refactor
This commit is contained in:
NNWHEN
parent
c0a1b0a04f
commit
7e6c0d4b1d
3 changed files with 84 additions and 155 deletions
|
|
@ -155,11 +155,9 @@
|
|||
<a href="sound-design.html">
|
||||
My <span>Body / Music</span> is stored here
|
||||
</a>
|
||||
<br />
|
||||
<a href="blog/index.html">
|
||||
I <span>Write / Die</span> within these walls
|
||||
</a>
|
||||
<br />
|
||||
<a href="blog/2024-09-28-about-me.html"
|
||||
><span>Study / Bury</span> me here
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="800" height="800" fill="#ffffff" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(0,18.138)">
|
||||
<path d="m434.16 275.24v200.48h-125.84v-125.28h-104.64v125.28h-125.84v-200.48l178.16-139.52z"/>
|
||||
<path d="m0 224.54 256-203.75 256 203.75-29.79 43.082-226.21-180.04-226.21 180.04z"/>
|
||||
<path d="m439.85 0v130.4l-63.28-50.4v-80z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 439 B |
229
style.css
229
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%);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue