sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use flex for navbar instead of grid

Browse source
This commit is contained in:
Ruben 2024-08-11 23:58:04 -05:00
commit e470d062a6
No known key found for this signature in database
GPG key ID: AE181294E97E4802
1 changed files with 21 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

38
style.css
View file

@ -305,17 +305,16 @@ styling of the terminal windows
top navbar styling. attempts to look like a desktop panel/window manager bar
*/
.navbar {
display: flex;
flex-direction: row;
position: fixed;
top: 0 !important;
z-index: 10;
min-width: 100%;
max-width: 100%;
min-height: 2.3em;
max-height: 2.3em;
display: grid;
grid-gap: 1em;
grid-template-columns: max-content auto max-content;
min-height: 1.8em !important;
max-height: 1.8em !important;
margin-top: .5em;
font-family: "Lexend Deca";
align-content: center;
@ -323,7 +322,7 @@ top navbar styling. attempts to look like a desktop panel/window manager bar
color: var(--text);
.nav-base {
padding: .2em;
padding: 0px .2em !important;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
max-width: fit-content;
@ -333,7 +332,7 @@ top navbar styling. attempts to look like a desktop panel/window manager bar
background-color: var(--green);
text-decoration: unset !important;
color: var(--crust);
margin-left: .4em !important;
margin-left: .5em !important;
}
.nav-baselink-mobile {
display: none;
@ -345,6 +344,7 @@ top navbar styling. attempts to look like a desktop panel/window manager bar
background-color: var(--base);
color: var(--text);
padding: 0px 5px 0px;
margin-left: .5em !important;
}
.nav-links a {
color: var(--text);
@ -357,7 +357,8 @@ top navbar styling. attempts to look like a desktop panel/window manager bar
.nav-systray {
background-color: var(--crust);
color: var(--text);
margin-right: .4em !important;
margin-left: auto !important;
margin-right: .5em !important;
i {
padding: 0px 2px 0px 2px;
}
@ -927,9 +928,13 @@ modify widths and spacing depending on the size of the display
*/
@media screen and (max-width: 59em) {
.navbar {
min-height: 2.3em;
max-height: 2.3em;
min-height: 1.8em !important;
max-height: 1.8em !important;
flex-wrap: wrap;
.nav-base {
padding: .27em .2em !important;
}
.nav-baselink {
display: none !important;
}
@ -948,25 +953,24 @@ modify widths and spacing depending on the size of the display
.hover-tip {
display: unset !important;
background-color: var(--base);
margin-left: .5em !important;
animation: blink 3s ease-inr-out infinite;
-moz-animation: blink 3s ease-in-out infinite;
-webkit-animation: blink 3s ease-in-out infinite;
}
.nav-links {
display: none !important;
order: 1;
margin-top: .5em;
}
}
.navbar:hover {
grid-template-columns: max-content auto;
grid-template-rows: auto auto;
min-height: 4.9em !important;
max-height: 5.5em !important;
min-height: 4.06em !important;
.hover-tip {
display: none !important;
}
.nav-links {
display: unset !important;
grid-row: 2 !important;
padding: .2em;
margin-left: .4em !important;
}
@ -979,7 +983,7 @@ modify widths and spacing depending on the size of the display
}
.terminal:nth-child(2) {
margin-top: 2.4em;
margin-top: 2.8em;
}
.terminal {
.term-titlebar {