Add rules to main

www/inc/header.php

@@ -3,5 +3,4 @@
     <h1>EGY TALK</h1>
 
     <?php if(isset($_SESSION['uid'])) include 'nav.php'; ?>
-
 </header>

www/public/css/style.css

@@ -38,6 +38,7 @@ header {
   color: white;
   position: relative;
   border-bottom: 2px solid rgb(124, 10, 10);
+  /* NYTT */
 }
 header h1 {
   display: inline-block;
@@ -53,6 +54,82 @@ header img {
   margin-top: 10px;
   margin-left: 50px;
 }
+header nav {
+  position: relative;
+  display: inline;
+  margin-left: 2rem;
+}
+header nav ul {
+  list-style-type: none;
+  display: inline;
+}
+header nav ul li {
+  margin-left: 1rem;
+  display: inline;
+}
+header nav ul li a {
+  display: inline-block;
+  padding: 6px;
+  border-bottom: 1px solid rgb(124, 10, 10);
+  font-size: 1.4rem;
+  text-decoration: none;
+  color: white;
+  background-color: black;
+}
+header nav ul li a:hover {
+  border-bottom: 1px solid red;
+  color: #ffffff;
+}
+header nav ul li a.active {
+  border-bottom: 1px solid red;
+  color: #ffffff;
+}
+header button {
+  background-color: transparent;
+  border: none;
+}
+header button img {
+  width: 14px;
+  height: auto;
+}
+header button.sign {
+  border: none;
+  border-radius: 4px;
+  padding: 5px 15px;
+  text-decoration: none;
+  color: white;
+  background-color: rgb(124, 10, 10);
+  margin-left: 1.8rem;
+}
+header button.sign img {
+  display: none;
+}
+header button.sign:hover {
+  background-color: gray;
+}
+header button.sign::after {
+  content: "Logga Ut";
+}
+header button:hover {
+  cursor: pointer;
+}
+header button img {
+  width: 28px;
+  margin-bottom: -10px;
+}
+header button img:hover {
+  opacity: 0.5;
+}
+header form {
+  display: inline;
+  margin-bottom: 0.7rem;
+}
+header form input[type=text] {
+  margin-top: 0.5rem;
+  margin-left: 1.5em;
+  font-size: 1.4rem;
+  width: 20rem;
+}
 
 @media only screen and (max-width: 1024px) {
   header {
@@ -61,31 +138,124 @@ header img {
   header img {
     margin-left: 25px;
   }
+  /* Nytt */
+  nav {
+    position: relative;
+    display: inline;
+    margin-left: 2rem;
+  }
+  nav ul {
+    list-style-type: none;
+    display: inline;
+  }
+  nav ul li {
+    margin-left: 1rem;
+    display: inline;
+  }
+  nav ul li a {
+    display: inline-block;
+    padding: 6px;
+    border-bottom: 1px solid rgb(124, 10, 10);
+    font-size: 1.4rem;
+    text-decoration: none;
+    color: white;
+    background-color: black;
+  }
+  nav ul li a:hover {
+    border-bottom: 1px solid red;
+    color: #ffffff;
+  }
+  nav ul li a.active {
+    border-bottom: 1px solid red;
+    color: #ffffff;
+  }
+  button {
+    background-color: transparent;
+    border: none;
+  }
+  button img {
+    width: 14px;
+    height: auto;
+  }
+  button.sign {
+    border: none;
+    border-radius: 4px;
+    padding: 5px 15px;
+    text-decoration: none;
+    color: white;
+    background-color: rgb(124, 10, 10);
+    margin-left: 1.8rem;
+  }
+  button.sign img {
+    display: none;
+  }
+  button.sign:hover {
+    background-color: gray;
+  }
+  button.sign::after {
+    content: "Logga Ut";
+  }
+  button:hover {
+    cursor: pointer;
+  }
+  button img {
+    width: 28px;
+    margin-bottom: -10px;
+  }
+  button img:hover {
+    opacity: 0.5;
+  }
+  form {
+    display: inline;
+    margin-bottom: 0.7rem;
+  }
+  form input[type=text] {
+    margin-top: 0.5rem;
+    margin-left: 1.5em;
+    font-size: 1.4rem;
+    width: 20rem;
+  }
 }
 @media only screen and (max-width: 675px) {
   header {
     height: 108px;
+    /** NYTT **/
   }
   header img {
     margin-left: 15px;
   }
+  header input,
+  header button.search {
+    display: none;
+    margin-top: 1rem;
+    justify-content: right;
+  }
+  header button.sign {
+    margin-left: 2.6rem;
+    padding: 0;
+    background-color: transparent;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+  }
+  header button.sign:hover {
+    background-color: transparent;
+    color: 1;
+  }
+  header button.sign::after {
+    content: none;
+  }
+  header button.sign img {
+    display: inline;
+  }
+  header button.search {
+    display: none;
+  }
+  header nav ul li {
+    margin-left: 0.3rem;
+  }
 }
 /** END header */
-input,
-p,
-label,
-button {
-  font-size: 1.4rem;
-}
-
-input {
-  padding: 0.3rem;
-}
-
-p {
-  text-align: justify;
-}
-
 main {
   max-width: 768px;
   margin: 0 auto;
@@ -136,17 +306,15 @@ input[type=submit]:hover {
   background-color: blue;
 }
 
-aside,
+main aside,
-section {
+main section {
   display: inline-block;
   vertical-align: top;
 }
-
+main aside {
-aside {
   margin-right: 10px;
 }
-
+main button {
-button {
   width: 100%;
   color: white;
   background-color: grey;
@@ -155,20 +323,19 @@ button {
   padding: 0.7rem;
   border-radius: 6px;
 }
-button:hover {
+main button:hover {
   background-color: #aeaeae;
 }
-
+main p.center {
-p.center {
   text-align: center;
   margin-top: 0.5rem;
 }
-
 @media only screen and (max-width: 675px) {
-  img {
+  main img {
     display: none;
   }
 }
+
 /** footer */
 footer {
   height: 45px;

www/public/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACA;EACI,SAAA;EACA,UAAA;EACA,wHAAA;EACA,sBAAA;ACAJ;;ADGA;EACI,kBAAA;EACA,qCAAA;ACAJ;ADGA;EACI,kBAAA;EACA,mCAAA;EACA,iBAAA;ACDJ;ADIA;EACI,gBAAA;ACFJ;;ADKA;EACI,iBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;EACA,iBAAA;ACFJ;;ADIA,YAAA;AACA;EACI,WAAA;EACA,iBAAA;EACA,gBAAA;EACA,YAAA;EACA,gBAAA;EACA,0CAAA;EACA,yBAAA;EACA,YAAA;EACA,kBAAA;EACA,yCAAA;ACDJ;ADGI;EACI,qBAAA;EACA,yBAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;ACDR;ADII;EACI,WAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;ACFR;;ADMA;EACI;IACI,aAAA;ECHN;EDKM;IACI,iBAAA;ECHV;AACF;ADOA;EACI;IACI,aAAA;ECLN;EDOM;IACI,iBAAA;ECLV;AACF;ADSA,gBAAA;AAEA;;;;EAII,iBAAA;ACRJ;;ADWA;EACI,eAAA;ACRJ;;ADWA;EACI,mBAAA;ACRJ;;ADWA;EACI,gBAAA;EACA,cAAA;EACA,0BAAA;EACA,kBAAA;EACA,YAAA;ACRJ;ADUI;EACI,gDAAA;EACA,iBAAA;EACA,sBAAA;ACRR;ADWI;EACI,kBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;ACTR;ADYI;EACI,eAAA;EACA,yCAAA;EACA,iBAAA;EACA,qBAAA;ACVR;ADaI;EACI,eAAA;EACA,yCAAA;EACA,iBAAA;EACA,qBAAA;ACXR;;ADeA;EACI,cAAA;ACZJ;;ADeA;EACI,WAAA;ACZJ;ADcI;EACI,YAAA;EACA,yBAAA;EACA,YAAA;EACA,qBAAA;EACA,eAAA;EACA,kBAAA;ACZR;ADcQ;EACI,sBAAA;ACZZ;;ADgBA;;EAEI,qBAAA;EACA,mBAAA;ACbJ;;ADgBA;EACI,kBAAA;ACbJ;;ADgBA;EACI,WAAA;EACA,YAAA;EACA,sBAAA;EACA,YAAA;EACA,qBAAA;EACA,eAAA;EACA,kBAAA;ACbJ;ADeI;EACI,yBAAA;ACbR;;ADiBA;EACI,kBAAA;EACA,kBAAA;ACdJ;;ADiBA;EACI;IACI,aAAA;ECdN;AACF;ADiBA,YAAA;AACA;EACI,YAAA;EACA,WAAA;EACA,+CAAA;EACA,sCAAA;EACA,kBAAA;EACA,SAAA;ACfJ;ADiBI;EACI,YAAA;EACA,aAAA;ACfR","file":"style.css"}
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}

www/public/css/style.scss

@@ -95,7 +95,6 @@ header {
    }
 
    button {
-
       background-color: transparent;
       border: none;
 
@@ -312,20 +311,7 @@ header {
 
 /** END header */
 
-input,
-p,
-label,
-button {
-   font-size: 1.4rem;
-}
 
-input {
-   padding: 0.3rem;
-}
-
-p {
-   text-align: justify;
-}
 
 main {
    max-width: 768px;
@@ -382,41 +368,43 @@ input {
       }
    }
 }
-
+main {
-aside,
+   aside,
-section {
+   section {
-   display: inline-block;
+      display: inline-block;
-   vertical-align: top;
+      vertical-align: top;
-}
+   }
-
+   
-aside {
+   aside {
-   margin-right: 10px;
+      margin-right: 10px;
-}
+   }
-
+   
-button {
+   button {
-   width: 100%;
+      width: 100%;
-   color: white;
+      color: white;
-   background-color: grey;
+      background-color: grey;
-   border: none;
+      border: none;
-   margin: 10px 10px 0 0;
+      margin: 10px 10px 0 0;
-   padding: 0.7rem;
+      padding: 0.7rem;
-   border-radius: 6px;
+      border-radius: 6px;
-
+   
-   &:hover {
+      &:hover {
-      background-color: #aeaeae;
+         background-color: #aeaeae;
+      }
+   }
+   
+   p.center {
+      text-align: center;
+      margin-top: 0.5rem;
+   }
+   
+   @media only screen and (max-width: 675px) {
+      img {
+         display: none;
+      }
    }
 }
 
-p.center {
-   text-align: center;
-   margin-top: 0.5rem;
-}
-
-@media only screen and (max-width: 675px) {
-   img {
-      display: none;
-   }
-}
 
 /** footer */
 footer {