dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

Updated navbar

Browse source
This commit is contained in:
Damien Broqua 2024-02-01 08:25:09 +01:00
parent 0ea6a21b90
commit d4e6d23459
2 changed files with 32 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
sass/colors.scss
View file

@ -45,6 +45,7 @@ $close-background-dark: rgba(240,240,240,.6);
--bg-color: #{darken($white, 5%)}; --bg-color: #{darken($white, 5%)};
--bg-alternate-color: #{darken($white, 8%)}; --bg-alternate-color: #{darken($white, 8%)};
--font-color: #{$nord3}; --font-color: #{$nord3};
--hover-font-color: #{lighten($nord3, 16%)};
--footer-color: #{$darken-white}; --footer-color: #{$darken-white};
--link-color: #{$nord1}; --link-color: #{$nord1};
@ -88,6 +89,7 @@ $close-background-dark: rgba(240,240,240,.6);
--bg-color: #{lighten($nord0, 2%)}; --bg-color: #{lighten($nord0, 2%)};
--bg-alternate-color: #{lighten($nord3, 8%)}; --bg-alternate-color: #{lighten($nord3, 8%)};
--font-color: #{$nord6}; --font-color: #{$nord6};
--hover-font-color: #{darken($nord6, 16%)};
--footer-color: #{$nord1}; --footer-color: #{$nord1};
--link-color: #{$nord4}; --link-color: #{$nord4};

34
sass/navbar.scss
View file

@ -117,7 +117,6 @@
@include respond-to("medium-up") { @include respond-to("medium-up") {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
color: rgba(0,0,0,.7);
.navbar-dropdown { .navbar-dropdown {
background-color: var(--default-color); background-color: var(--default-color);
@ -127,7 +126,6 @@
box-shadow: 0 8px 8px rgba(10,10,10,.1); box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none; display: none;
font-size: .875rem; font-size: .875rem;
left: 0;
min-width: 100%; min-width: 100%;
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -138,7 +136,7 @@
.navbar-link { .navbar-link {
background-color: var(--default-hl-color); background-color: var(--default-hl-color);
color: rgba(0,0,0,.7); color: var(--hover-font-color);
} }
.navbar-dropdown { .navbar-dropdown {
@ -167,15 +165,6 @@
@include respond-to("medium-up") { @include respond-to("medium-up") {
display: flex; display: flex;
align-items: center; align-items: center;
}
.icon {
align-items: center;
display: inline-flex;
justify-content: center;
height: 1.5rem;
width: 1.5rem;
}
&::after { &::after {
border: 3px solid transparent; border: 3px solid transparent;
@ -196,11 +185,22 @@
right: 1.125em; right: 1.125em;
@include respond-to("medium-up") { @include respond-to("medium-up") {
border-color: rgba(0,0,0,.7); border-color: var(--font-color);
} }
} }
} }
.icon {
align-items: center;
display: inline-flex;
justify-content: center;
height: 1.5rem;
width: 1.5rem;
}
}
.navbar-menu { .navbar-menu {
display: none; display: none;
background-color: var(--default-color); background-color: var(--default-color);
@ -260,7 +260,7 @@
background-color: var(--font-color); background-color: var(--font-color);
border: none; border: none;
height: 2px; height: 2px;
margin: .5rem 0; margin: .5rem 0 0 1.5rem;
} }
.navbar-item { .navbar-item {
@ -277,11 +277,15 @@
box-shadow: 0 8px 8px rgba(10,10,10,.1); box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none; display: none;
font-size: .875rem; font-size: .875rem;
left: 0; right: 0;
min-width: 100%; min-width: 100%;
position: absolute; position: absolute;
top: 100%; top: 100%;
hr {
margin: 0.5rem 0;
}
.navbar-item { .navbar-item {
white-space: nowrap; white-space: nowrap;
padding: .375rem 1rem; padding: .375rem 1rem;