From 7e6c0d4b1dc5768a21787d16124aa03294852cc3f7bee12d173b23c30510a4c5 Mon Sep 17 00:00:00 2001 From: NNWHEN Date: Tue, 21 Jan 2025 13:57:35 +0200 Subject: [PATCH] refactor --- index.html | 2 - res/asset-sitewide-nav-home.svg | 8 -- style.css | 229 ++++++++++++-------------------- 3 files changed, 84 insertions(+), 155 deletions(-) delete mode 100644 res/asset-sitewide-nav-home.svg diff --git a/index.html b/index.html index a3fef89..1af1098 100644 --- a/index.html +++ b/index.html @@ -155,11 +155,9 @@ My Body / Music is stored here -
I Write / Die within these walls -
Study / Bury me here diff --git a/res/asset-sitewide-nav-home.svg b/res/asset-sitewide-nav-home.svg deleted file mode 100644 index 3949313..0000000 --- a/res/asset-sitewide-nav-home.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/style.css b/style.css index 00d1d89..6a19072 100644 --- a/style.css +++ b/style.css @@ -26,12 +26,10 @@ -webkit-box-sizing: border-box; box-sizing: border-box; } - *::-moz-selection { background-color: var(--accent-0); color: var(--max-0); } - *::selection { background-color: var(--accent-0); color: var(--max-0); @@ -42,13 +40,11 @@ src: url("./res/asset-font-Redaction-Regular.woff2") format("woff2"); font-display: swap; } - @font-face { font-family: "mono"; src: url("./res/asset-font-Inconsolata.woff2") format("woff2"); font-display: swap; } - @font-face { font-family: "syne"; src: url("./res/asset-font-SyneMono-Regular.woff2") format("woff2"); @@ -57,19 +53,18 @@ body { margin: 0; + margin-bottom: 45px; padding: 0; background-color: var(--background); color: var(--accent-0); font-family: "Redaction", serif; - margin-bottom: 45px; } a { - text-decoration: none; color: var(--accent-1); + text-decoration: none; } - a:hover { color: var(--max-1); } @@ -78,7 +73,6 @@ a:hover { -webkit-animation: load 2s ease-in-out infinite alternate; animation: load 2s ease-in-out infinite alternate; } - @keyframes load { 0% { background-color: var(--load-0); @@ -98,8 +92,8 @@ a:hover { text-align: center; } #content-warnings h1 { - font-size: 2rem; margin: 10px 0; + font-size: 2rem; } #content-warnings ul { display: -webkit-box; @@ -109,23 +103,24 @@ a:hover { flex-wrap: wrap; max-width: 1200px; margin: 16px auto; - - list-style-type: none; padding: 0; + -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; + + list-style-type: none; } #content-warnings ul li { - padding: 5px 10px; min-width: 30%; + padding: 5px 10px; font-size: 1.2rem; } .back { - font-size: 1.2rem; - text-align: right; width: min(700px, 90%); margin: auto; + font-size: 1.2rem; + text-align: right; } /* Header */ @@ -139,7 +134,6 @@ header { height: 90px; -o-object-fit: cover; - object-fit: cover; } #header-img-group-logo img { @@ -152,6 +146,7 @@ header { height: 160px; width: 180px; + -o-object-fit: contain; object-fit: contain; @@ -161,63 +156,61 @@ header { /* NavList */ header nav { position: absolute; - bottom: -5px; width: 100%; + bottom: -5px; } - header nav ul { - margin: 0; - padding: 0; - display: -webkit-box; display: -ms-flexbox; display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; + margin: 0; + padding: 0; + font-size: 22px; } - header nav ul li { position: relative; - list-style: none; padding: 2px 0; - width: calc(100% / 5); + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + text-align: center; + list-style: none; } - header nav #whitespace { - width: calc(100% / 5); + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; } - header nav li#here a { cursor: not-allowed; background-color: var(--accent-2); color: var(--background); text-decoration: line-through; } - header nav li#parent a { background-color: var(--accent-2); color: var(--background); } - header nav li#parent a::after { content: "*"; } - header nav li#parent a:hover { background-color: var(--max-1) !important; } - header nav li a { padding: 2px 10px; color: var(--accent-2); background-color: var(--max-0); } - header nav li:not(#here) a:hover { color: var(--background); background-color: var(--accent-2); @@ -226,7 +219,6 @@ header nav li:not(#here) a:hover { #arrow img { position: absolute; margin: 35px 0 0 -100px; - width: 250px; } @@ -244,11 +236,9 @@ header nav li:not(#here) a:hover { justify-content: space-evenly; margin: 25px 0; } - #socials img { width: 40px; } - #socials a { -webkit-transition: ease-in-out 100ms; -o-transition: ease-in-out 100ms; @@ -262,12 +252,10 @@ header nav li:not(#here) a:hover { .no { cursor: not-allowed; } - .no img { -webkit-filter: brightness(20%); filter: brightness(20%); } - .no:hover img { -webkit-filter: brightness(20%) !important; filter: brightness(20%) !important; @@ -277,16 +265,14 @@ header nav li:not(#here) a:hover { @media only screen and (max-width: 790px) { header { - margin: 32px 0 80px 0; + margin: 18px 0 80px 0; } - header nav { position: absolute; bottom: -50px; } - - header { - margin: 18px 0 80px 0; + header nav ul li a img { + display: block; } #header-img-group-banner img { height: 50px; @@ -297,10 +283,10 @@ header nav li:not(#here) a:hover { } #whitespace, - #arrow { + #arrow, + #here { display: none; } - li#music:not(#here) a { -webkit-animation: nav-flash 1s ease-in-out infinite alternate; animation: nav-flash 1s ease-in-out infinite alternate; @@ -337,7 +323,6 @@ header nav li:not(#here) a:hover { background-color: var(--load-1); } } - @keyframes load { from { background-color: var(--load-0); @@ -353,14 +338,14 @@ footer#free { position: fixed; display: inline; max-width: min(90%, 180px); + margin: auto; + padding: 5px; bottom: 5px; left: 0; right: 0; text-align: center; background-color: var(--text-background); border-radius: 20px; - margin: auto; - padding: 5px; z-index: 100; } @@ -383,84 +368,75 @@ footer#free { text-align: center; font-family: "Syne", monospace; } - #hero-headshot img { width: 100%; height: auto; aspect-ratio: 1/1; max-height: 700px; - min-width: 360px; + min-height: 360px; - -o-object-fit: contain; - - object-fit: contain; + -o-object-fit: cover; + object-fit: cover; } - #hero-headshot p { margin: 0; color: var(--subtitle); font-size: 22px; } - #hero-headshot p span { text-wrap: nowrap; } - #hero-headshot aside.quote { + max-width: 700px; font-family: "mono", monospace; text-transform: none; - max-width: 700px; } #hero-info { width: min(100%, 700px); margin: auto 0; } - #hero-info p { - font-size: 22px; margin: 30px 0; - line-height: 37px; + font-size: 22px; } - #hero-info h1 { color: var(--max-1); font-size: 35px; } - #hero-info b { color: var(--accent-2); } - #hero-info p a { + display: block; + width: min(95%, 500px); + margin: 20px auto; padding: 0 5px; + -webkit-transition: 150ms ease-in-out; -o-transition: 150ms ease-in-out; transition: 150ms ease-in-out; } - #hero-info p a:hover { background-color: var(--accent-0); color: var(--background); } - #hero-info span { + padding: 0 10px; + background-color: var(--accent-0); color: var(--background); - - padding: 0 10px; font-weight: bolder; text-wrap: nowrap; } #hero-info span:hover { - cursor: not-allowed; background-color: var(--max-0); + -webkit-transition: ease-in-out 100ms; -o-transition: ease-in-out 100ms; transition: ease-in-out 100ms; -webkit-animation: shake 2s linear alternate infinite; - animation: shake 2s linear alternate infinite; } @@ -468,20 +444,21 @@ footer#free { .ly-sect { margin: 40px 0; } - .ly-sect > h1 { - text-wrap: nowrap; position: relative; - padding: 3px 8px; margin: 0 20%; + padding: 3px 8px; font-size: 32px; + text-wrap: nowrap; } - .ly-cont { display: -webkit-box; display: -ms-flexbox; display: flex; + width: min(95%, 2000px); + margin: 10px auto; + -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; @@ -491,11 +468,10 @@ footer#free { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; - margin: 10px auto; - width: min(95%, 2000px); } .ly-item { + position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; @@ -503,11 +479,9 @@ footer#free { -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; - position: relative; margin: 10px; } - .ly-item a h1 { color: var(--accent-2); } @@ -515,69 +489,61 @@ footer#free { background-color: var(--text-background); color: var(--max-1); } - .ly-item h1 { padding: 2px; background-color: var(--title-background); -webkit-transition: ease-in-out 100ms; - -o-transition: ease-in-out 100ms; - transition: ease-in-out 100ms; } - .ly-sect.ly-square { margin: 40px 0; } - .ly-sect.ly-square > h1 { display: inline-block; margin: 20px 20% 0 20%; - text-align: center; background-color: var(--max-0); color: var(--max-1); + + text-align: center; } .ly-sect.ly-square > h1:hover { background-color: var(--accent-2); color: var(--background); } - .ly-sect.ly-square .h1-circle img { position: absolute; + margin: auto; + width: 200px; top: 0; bottom: 0; left: 0; right: 0; - margin: auto; - width: 200px; } .ly-item { margin-bottom: 30px; } - .ly-item audio { width: 100%; } - .ly-item.ly-square { width: min(95%, 350px); } - .ly-item.ly-square h1 { position: absolute; + margin: auto; top: 0; left: 0; right: 0; - margin: auto; text-align: center; text-shadow: var(--background) 1px 1px 0; } - .ly-item.ly-square img { width: 100%; + aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; @@ -587,69 +553,66 @@ footer#free { width: 80%; max-height: 160px; } - .ly-item.ly-rect.ly-archive h1 { position: absolute; display: inline; + margin: auto; + padding: 2px 8px; bottom: 20px; left: 25px; - margin: auto; font-size: 22px; - - padding: 2px 8px; background-color: var(--text-background); -webkit-transition: ease-in-out 100ms; - -o-transition: ease-in-out 100ms; - transition: ease-in-out 100ms; + z-index: 2; } .ly-item.ly-rect.ly-archive h2 { position: absolute; display: inline; + margin: auto; + padding: 5px 8px; top: 15px; right: 15px; - margin: auto; - font-size: 15px; - padding: 5px 8px; + font-size: 15px; background-color: var(--text-background); color: var(--max-1); -webkit-transition: ease-in-out 100ms; - -o-transition: ease-in-out 100ms; - transition: ease-in-out 100ms; + z-index: 2; } .ly-item.ly-rect.ly-dir h1 { + margin-top: 2px; + margin-bottom: 12px; background-color: transparent; text-shadow: 1px 1px 0 black; font-size: 26px; - margin-top: 2px; - margin-bottom: 12px; + -webkit-transition: ease-in-out 100ms; - -o-transition: ease-in-out 100ms; - transition: ease-in-out 100ms; + z-index: 2; } .ly-item.ly-rect.ly-dir h2 { - background-color: transparent; - text-shadow: 1px 1px 0 black; - font-size: 21px; margin-top: 2px; margin-bottom: 12px; margin-left: 35px; + + background-color: transparent; + text-shadow: 1px 1px 0 black; + font-size: 21px; + -webkit-transition: ease-in-out 100ms; - -o-transition: ease-in-out 100ms; - transition: ease-in-out 100ms; + z-index: 2; } .ly-item.ly-rect a:hover h1, @@ -661,19 +624,17 @@ footer#free { -webkit-filter: drop-shadow(var(--max-0) 5px 5px 5px); filter: drop-shadow(var(--max-0) 5px 5px 5px); } - .ly-item.ly-rect img { width: 100%; max-height: 160px; min-height: 160px; + aspect-ratio: 5/1; -o-object-fit: cover; object-fit: cover; -webkit-transition: ease-in-out 200ms; - -o-transition: ease-in-out 200ms; - transition: ease-in-out 200ms; } @@ -686,8 +647,8 @@ footer#free { font-family: "mono"; } .list li { - font-size: 22px; padding: 2px 0; + font-size: 22px; } .list ul, .list ol { @@ -712,12 +673,13 @@ footer#free { flex-direction: row-reverse; } .list-entity picture img { + width: 100%; + height: 100%; + -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; - width: 100%; - height: 100%; } .list-entity picture { width: min(250px, 100%); @@ -733,32 +695,6 @@ footer#free { margin: 5px 15px; } -/* 404 page */ -.fzf { - text-align: center; -} - -.fzf h1 { - color: var(--max-1); - font-family: "mono", monospace; - font-style: normal; -} - -.fzf h2 { - color: var(--max-1); - font-family: "Syne", monospace; - text-align: justify; - -moz-text-align-last: justify; - text-align-last: justify; - text-wrap: nowrap; - overflow-x: hidden; - padding: 0 10%; - margin: auto; - background-color: var(--accent-1); - color: var(--background); - text-decoration: line-through; -} - /* animations */ @-webkit-keyframes shake { 0% { @@ -840,10 +776,12 @@ footer#free { /* Accessibility */ .skip-to-content { - background-color: var(--max-0); + position: absolute; padding: 8px; margin: 0; - position: absolute; + + left: 40px; + -webkit-transform: translateY(-70px); -ms-transform: translateY(-70px); transform: translateY(-70px); @@ -852,10 +790,11 @@ footer#free { -o-transition: transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; - left: 40px; + + background-color: var(--max-0); + z-index: 1; } - .skip-to-content:focus { -webkit-transform: translateY(0%); -ms-transform: translateY(0%);