lynnesbian/lynnespace
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

style changes

Browse source
This commit is contained in:
Lynne Megido 2024-02-09 21:31:54 +10:00
parent a0f3efb05a
commit 9a4eb4555e
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
1 changed files with 34 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
assets/style.css
View file

@ -2,12 +2,11 @@
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
font-family: "Noto Sans", sans-serif; font-family: sans-serif;
margin: 0; margin: 0;
display: grid; display: grid;
grid-template-columns: max(325px, 15%) auto; grid-template-columns: max(325px, 15%) auto;
background: #fafafa; background: #fafafa;
color: black;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -20,20 +19,23 @@ main article h4 a,
main article h5 a, main article h5 a,
main article h6 a { main article h6 a {
color: inherit; color: inherit;
text-decoration: underline mediumpurple solid 3px; text-decoration: none;
} }
h1, h2, h3 {
main article h1 a { font-weight: 400;
text-decoration-thickness: 5px;
} }
h1 { h1 {
font-size: 3em; font-size: 3em;
text-align: center; text-align: center;
} }
main article h1 a {
/* needed for chrome */
/*noinspection CssInvalidPropertyValue*/
text-decoration: underline mediumpurple dotted 5px;
}
h2 { h2 {
font-size: 1.4em; font-size: 1.6em;
} }
main { main {
@ -42,18 +44,25 @@ main {
} }
main article { main article {
font-family: "IBM Plex Serif", serif; max-width: 1800px;
font-size: 1.3em;
max-width: max(1200px, 60%);
padding: 0 50px 30px; padding: 0 50px 30px;
margin: 0 auto; margin: 0 auto;
background: #fafafa; background: #fafafa;
min-height: 100%; min-height: 100%;
overflow: auto; overflow: auto;
font-size: 1.1em;
}
main article h2,
main article h3 {
border-left: 5px solid mediumpurple;
padding-left: 5px;
margin-left: -10px;
} }
main article a { main article a {
color: #60a; color: #60a;
text-decoration-style: dotted;
text-decoration-color: transparent; text-decoration-color: transparent;
transition: 0.2s all; transition: 0.2s all;
} }
@ -73,7 +82,7 @@ header {
height: 100vh; height: 100vh;
transition: 0.2s all; transition: 0.2s all;
} }
header::after { /* the background image behind the sidebar */ header::after {
/* will use webp with jpeg fallback when /* 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 https://developer.mozilla.org/en-US/docs/Web/CSS/image()#browser_compatibility becomes a thing, until then, it's jpeg
only for now :c */ only for now :c */
@ -86,13 +95,13 @@ header::after { /* the background image behind the sidebar */
z-index: -1; z-index: -1;
/*noinspection CssInvalidFunction*/ /*noinspection CssInvalidFunction*/
background: linear-gradient(to bottom, #333, #333 10%, 70%, transparent), background: linear-gradient(to bottom, #333, #333 10%, 70%, transparent),
/* image("/assets/img/background.webp", "/assets/img/background.jpeg") no-repeat bottom center/cover, */ /* image("/assets/img/background.webp", "/assets/img/background.jpeg") no-repeat bottom center/cover, */
url("/assets/img/background.jpeg") no-repeat bottom center/cover, url("/assets/img/background.jpeg") no-repeat bottom center/cover,
#333; #333;
filter: blur(3px) saturate(75%); filter: blur(5px) saturate(75%);
content: ""; content: "";
} }
#hamburger { /* hamburger menu button, should only display on mobile devices. see @media section at bottom of file */ #hamburger {
display: none; display: none;
position: fixed; position: fixed;
top: 10px; top: 10px;
@ -109,12 +118,14 @@ header::after { /* the background image behind the sidebar */
#hb-icon { #hb-icon {
height: 100%; height: 100%;
width: 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 { nav a {
color: white; color: white;
padding: 10px 40px; }
nav a {
padding: 10px 0;
display: block; display: block;
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -134,12 +145,10 @@ nav a::before {
position: absolute; position: absolute;
transition: 0.2s all; transition: 0.2s all;
} }
nav a:hover { nav a:hover,
nav a.current {
background: #00000044; background: #00000044;
} }
nav a.current:not(:hover) {
background: #9370db44;
}
nav a:hover::before, nav a:hover::before,
nav a.current::before { nav a.current::before {
left: 0; left: 0;
@ -153,11 +162,10 @@ nav a.current::before {
margin: 30px auto 50px auto; margin: 30px auto 50px auto;
} }
#bune-img { #bune {
height: max(200px, 10vh); height: max(200px, 10vh);
display: block; display: block;
margin: 50px auto 0; margin: 50px auto 0;
filter: drop-shadow(0 0 15px #ccc);
} }
.project { .project {
@ -177,39 +185,14 @@ nav a.current::before {
font-style: italic; font-style: italic;
} }
/* dark theme */
@media (prefers-color-scheme: dark) {
body, main article {
background: #282a36;
color: white;
}
main article a {
color: #a380eb;
}
header::after {
filter: blur(3px) saturate(75%) brightness(80%);
}
#bune-img {
filter: drop-shadow(0 0 15px #111);
}
}
/* smaller screen tweaks */
@media only screen and (max-device-width: 840px) {
body {
grid-template-columns: max(225px, 15%) auto;
}
}
/* mobile tweaks */ /* mobile tweaks */
@media only screen and (max-device-width: 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
main { main {
width: 100vw; width: 100vw;
box-shadow: none; box-shadow: none;
} }
main article { main article {
padding: 0 20px 30px; padding: 0 20px 30px;
font-size: 1.1em;
} }
h1 { h1 {
font-size: 2.5em; font-size: 2.5em;
@ -232,4 +215,4 @@ nav a.current::before {
display: inline-block; display: inline-block;
touch-action: manipulation; touch-action: manipulation;
} }
} }