diff --git a/www/inc/header.php b/www/inc/header.php index d53152c..2ecf2a5 100644 --- a/www/inc/header.php +++ b/www/inc/header.php @@ -3,5 +3,4 @@

EGY TALK

- \ No newline at end of file diff --git a/www/public/css/style.css b/www/public/css/style.css index d920b6e..4e74505 100644 --- a/www/public/css/style.css +++ b/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, -section { +main aside, +main section { display: inline-block; vertical-align: top; } - -aside { +main aside { margin-right: 10px; } - -button { +main 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; } - -p.center { +main 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; diff --git a/www/public/css/style.css.map b/www/public/css/style.css.map index bb55475..a278036 100644 --- a/www/public/css/style.css.map +++ b/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"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/www/public/css/style.scss b/www/public/css/style.scss index 648b763..4cc6bd6 100644 --- a/www/public/css/style.scss +++ b/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 { } } } - -aside, -section { - display: inline-block; - vertical-align: top; -} - -aside { - margin-right: 10px; -} - -button { - width: 100%; - color: white; - background-color: grey; - border: none; - margin: 10px 10px 0 0; - padding: 0.7rem; - border-radius: 6px; - - &:hover { - background-color: #aeaeae; +main { + aside, + section { + display: inline-block; + vertical-align: top; + } + + aside { + margin-right: 10px; + } + + button { + width: 100%; + color: white; + background-color: grey; + border: none; + margin: 10px 10px 0 0; + padding: 0.7rem; + border-radius: 6px; + + &:hover { + 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 {