byhe/egytalk-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add scss to nav

Browse Source
This commit is contained in:
Henrik Bygren 2024-01-31 13:12:36 +01:00
parent f73c9150eb
commit 3b9f9e4143
1 changed files with 358 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

235
www/public/css/style.scss
View File

@ -1,4 +1,3 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -28,6 +27,7 @@ body {
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
} }
/** Header */ /** Header */
header { header {
width: 100%; width: 100%;
@ -56,6 +56,101 @@ header {
margin-top: 10px; margin-top: 10px;
margin-left: 50px; margin-left: 50px;
} }
/* NYTT */
nav {
position: relative;
display: inline;
margin-left: 2rem;
ul {
list-style-type: none;
display: inline;
li {
margin-left: 1rem;
display: inline;
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;
&:hover {
border-bottom: 1px solid red;
color: #ffffff;
}
&.active {
border-bottom: 1px solid red;
color: #ffffff;
}
}
}
}
}
button {
background-color: transparent;
border: none;
img {
width: 14px;
height: auto;
}
&.sign {
border: none;
border-radius: 4px;
padding: 5px 15px;
text-decoration: none;
color: white;
background-color: rgb(124, 10, 10);
margin-left: 1.8rem;
img {
display: none;
}
&:hover {
background-color: gray;
}
&::after {
content: "Logga Ut";
}
}
&:hover {
cursor: pointer;
}
img {
width: 28px;
margin-bottom: -10px;
&:hover {
opacity: 0.5;
}
}
}
form {
display: inline;
margin-bottom: 0.7rem;
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) {
@ -66,6 +161,101 @@ header {
margin-left: 25px; margin-left: 25px;
} }
} }
/* Nytt */
nav {
position: relative;
display: inline;
margin-left: 2rem;
ul {
list-style-type: none;
display: inline;
li {
margin-left: 1rem;
display: inline;
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;
&:hover {
border-bottom: 1px solid red;
color: #ffffff;
}
&.active {
border-bottom: 1px solid red;
color: #ffffff;
}
}
}
}
}
button {
background-color: transparent;
border: none;
img {
width: 14px;
height: auto;
}
&.sign {
border: none;
border-radius: 4px;
padding: 5px 15px;
text-decoration: none;
color: white;
background-color: rgb(124, 10, 10);
margin-left: 1.8rem;
img {
display: none;
}
&:hover {
background-color: gray;
}
&::after {
content: "Logga Ut";
}
}
&:hover {
cursor: pointer;
}
img {
width: 28px;
margin-bottom: -10px;
&:hover {
opacity: 0.5;
}
}
}
form {
display: inline;
margin-bottom: 0.7rem;
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) {
@ -75,6 +265,48 @@ header {
img { img {
margin-left: 15px; margin-left: 15px;
} }
/** NYTT **/
input,
button.search {
display: none;
margin-top: 1rem;
justify-content: right;
}
button.sign {
margin-left: 2.6rem;
padding: 0;
background-color: transparent;
position: absolute;
right: 15px;
top: 15px;
&:hover {
background-color: transparent;
color: alpha($color: #000000);
}
&::after {
content: none;
}
img {
display: inline;
}
}
button.search {
display: none;
}
nav {
ul {
li {
margin-left: 0.3rem;
}
}
}
} }
} }
@ -150,6 +382,7 @@ input {
} }
} }
} }
aside, aside,
section { section {
display: inline-block; display: inline-block;