Add rules to main

This commit is contained in:
Henrik Bygren 2024-01-31 14:31:33 +01:00
parent 3b9f9e4143
commit e35a6e1a66
4 changed files with 228 additions and 74 deletions

View File

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

View File

@ -38,6 +38,7 @@ header {
color: white; color: white;
position: relative; position: relative;
border-bottom: 2px solid rgb(124, 10, 10); border-bottom: 2px solid rgb(124, 10, 10);
/* NYTT */
} }
header h1 { header h1 {
display: inline-block; display: inline-block;
@ -53,6 +54,82 @@ header img {
margin-top: 10px; margin-top: 10px;
margin-left: 50px; 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) { @media only screen and (max-width: 1024px) {
header { header {
@ -61,31 +138,124 @@ header img {
header img { header img {
margin-left: 25px; 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) { @media only screen and (max-width: 675px) {
header { header {
height: 108px; height: 108px;
/** NYTT **/
} }
header img { header img {
margin-left: 15px; 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 */ /** END header */
input,
p,
label,
button {
font-size: 1.4rem;
}
input {
padding: 0.3rem;
}
p {
text-align: justify;
}
main { main {
max-width: 768px; max-width: 768px;
margin: 0 auto; margin: 0 auto;
@ -136,17 +306,15 @@ input[type=submit]:hover {
background-color: blue; background-color: blue;
} }
aside, main aside,
section { main section {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
main aside {
aside {
margin-right: 10px; margin-right: 10px;
} }
main button {
button {
width: 100%; width: 100%;
color: white; color: white;
background-color: grey; background-color: grey;
@ -155,20 +323,19 @@ button {
padding: 0.7rem; padding: 0.7rem;
border-radius: 6px; border-radius: 6px;
} }
button:hover { main button:hover {
background-color: #aeaeae; background-color: #aeaeae;
} }
main p.center {
p.center {
text-align: center; text-align: center;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
@media only screen and (max-width: 675px) { @media only screen and (max-width: 675px) {
img { main img {
display: none; display: none;
} }
} }
/** footer */ /** footer */
footer { footer {
height: 45px; height: 45px;

View File

@ -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"}

View File

@ -95,7 +95,6 @@ header {
} }
button { button {
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -312,20 +311,7 @@ header {
/** END header */ /** END header */
input,
p,
label,
button {
font-size: 1.4rem;
}
input {
padding: 0.3rem;
}
p {
text-align: justify;
}
main { main {
max-width: 768px; max-width: 768px;
@ -382,7 +368,7 @@ input {
} }
} }
} }
main {
aside, aside,
section { section {
display: inline-block; display: inline-block;
@ -417,6 +403,8 @@ p.center {
display: none; display: none;
} }
} }
}
/** footer */ /** footer */
footer { footer {