janis/explainegy-nextjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/explainegy-nextjs.git synced 2025-10-30 13:17:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

sdasd

Browse Source
This commit is contained in:
Janis
2022-12-23 14:53:36 +01:00
parent 1bb4cc82e2
commit 0c2ad4b1b0
11 changed files with 155 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
styles/Nav.module.scss
View File

@@ -1,3 +1,4 @@
@import "variables.scss";
.nav {
background-color: var(--color-background-nav);
height: 60px;
@@ -7,6 +8,15 @@
align-items: center;
box-shadow: var(--color-shadow-nav) 0px 4px 8px;
@media (max-width: $nav-breakpoint-1) {
grid-template-columns: 1fr 1fr 0.25fr;
}
@media (max-width: $nav-breakpoint-2) {
grid-template-columns: 1fr 1fr;
height: 100px;
}
& > div {
height: 100%;
display: flex;
@@ -15,7 +25,14 @@
}
.containerLeft {
column-gap: 100px;
@media (max-width: $nav-breakpoint-2) {
grid-column: 1;
grid-row: 1;
}
@media (max-width: $nav-breakpoint-3) {
column-gap: 20px;
}
.links {
font-size: 0.8em;
@@ -24,6 +41,12 @@
}
.containerCenter {
width: 100%;
@media (max-width: $nav-breakpoint-2) {
grid-row: 2;
grid-column: span 2;
}
.searchBar {
display: flex;
justify-content: center;
@@ -60,6 +83,10 @@
outline: 0;
padding-right: 10px;
color: var(--color-font);
@media (max-width: $nav-breakpoint-4) {
width: 200px;
}
}
.icon {
@@ -76,6 +103,14 @@
justify-content: flex-end;
padding-right: 50px;
@media (max-width: $nav-breakpoint-2) {
grid-row: 1;
}
@media (max-width: $nav-breakpoint-4) {
padding-right: 20px;
}
.themeSwitch {
svg {
transition: all 50ms linear;