|
|
|
@ -2,7 +2,7 @@ |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
body { |
|
|
|
|
font-family: sans-serif; |
|
|
|
|
font-family: "Noto Sans", sans-serif; |
|
|
|
|
margin: 0; |
|
|
|
|
display: grid; |
|
|
|
|
grid-template-columns: max(325px, 15%) auto; |
|
|
|
@ -82,7 +82,7 @@ header { |
|
|
|
|
height: 100vh; |
|
|
|
|
transition: 0.2s all; |
|
|
|
|
} |
|
|
|
|
header::after { |
|
|
|
|
header::after { /* the background image behind the sidebar */ |
|
|
|
|
/* will use webp with jpeg fallback when |
|
|
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/image()#browser_compatibility becomes a thing, until then, it's jpeg |
|
|
|
|
only for now :c */ |
|
|
|
@ -98,10 +98,10 @@ header::after { |
|
|
|
|
/* image("/assets/img/background.webp", "/assets/img/background.jpeg") no-repeat bottom center/cover, */ |
|
|
|
|
url("/assets/img/background.jpeg") no-repeat bottom center/cover, |
|
|
|
|
#333; |
|
|
|
|
filter: blur(5px) saturate(75%); |
|
|
|
|
filter: blur(3px) saturate(75%); |
|
|
|
|
content: ""; |
|
|
|
|
} |
|
|
|
|
#hamburger { |
|
|
|
|
#hamburger { /* hamburger menu button, should only display on mobile devices. see @media section at bottom of file */ |
|
|
|
|
display: none; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 10px; |
|
|
|
@ -118,14 +118,14 @@ header::after { |
|
|
|
|
#hb-icon { |
|
|
|
|
height: 100%; |
|
|
|
|
width: 100%; |
|
|
|
|
background: linear-gradient( to bottom, mediumpurple, mediumpurple 10%, #fafafa 10%, #fafafa 45%, mediumpurple 45%, mediumpurple 55%, #fafafa 55%, #fafafa 90%, mediumpurple 90%, mediumpurple 100% ); |
|
|
|
|
background: linear-gradient(to bottom, mediumpurple, mediumpurple 10%, #fafafa 10%, #fafafa 45%, mediumpurple 45%, mediumpurple 55%, #fafafa 55%, #fafafa 90%, mediumpurple 90%, mediumpurple 100%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
nav a { |
|
|
|
|
color: white; |
|
|
|
|
} |
|
|
|
|
nav a { |
|
|
|
|
padding: 10px 0; |
|
|
|
|
padding: 10px 40px; |
|
|
|
|
display: block; |
|
|
|
|
width: 100%; |
|
|
|
|
text-align: center; |
|
|
|
@ -145,10 +145,12 @@ nav a::before { |
|
|
|
|
position: absolute; |
|
|
|
|
transition: 0.2s all; |
|
|
|
|
} |
|
|
|
|
nav a:hover, |
|
|
|
|
nav a.current { |
|
|
|
|
nav a:hover { |
|
|
|
|
background: #00000044; |
|
|
|
|
} |
|
|
|
|
nav a.current:not(:hover) { |
|
|
|
|
background: #9370db44; |
|
|
|
|
} |
|
|
|
|
nav a:hover::before, |
|
|
|
|
nav a.current::before { |
|
|
|
|
left: 0; |
|
|
|
@ -185,8 +187,15 @@ nav a.current::before { |
|
|
|
|
font-style: italic; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* smaller screen tweaks */ |
|
|
|
|
@media only screen and (max-device-width : 840px) { |
|
|
|
|
body { |
|
|
|
|
grid-template-columns: max(225px, 15%) auto; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* mobile tweaks */ |
|
|
|
|
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { |
|
|
|
|
@media only screen and (max-device-width : 480px) { |
|
|
|
|
main { |
|
|
|
|
width: 100vw; |
|
|
|
|
box-shadow: none; |
|
|
|
|