|
|
|
|
@ -3,6 +3,36 @@ |
|
|
|
|
* Handcrafted with ♥ by x~alotl |
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Variables |
|
|
|
|
**/ |
|
|
|
|
|
|
|
|
|
:root { |
|
|
|
|
|
|
|
|
|
/* Colors */ |
|
|
|
|
--plum: #26175e; |
|
|
|
|
--sage: #f0fff1; |
|
|
|
|
|
|
|
|
|
--box: #f0fff1; |
|
|
|
|
--text: #26175e; |
|
|
|
|
--button: #52ffdc; |
|
|
|
|
--active: #2b8b8d; |
|
|
|
|
--link: #3203dd; |
|
|
|
|
--shadowRgb: 125, 112, 122; |
|
|
|
|
--boxShadow: 0 0 12px rgba(var(--shadowRgb), 0.3); |
|
|
|
|
|
|
|
|
|
/* Animated Title */ |
|
|
|
|
--weightMin: 200; |
|
|
|
|
--weightMax: 900; |
|
|
|
|
--duration: 2200ms; |
|
|
|
|
--step: 70ms; |
|
|
|
|
|
|
|
|
|
/* Box Clipping */ |
|
|
|
|
--boxEdge: 40px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Font Faces |
|
|
|
|
*/ |
|
|
|
|
@ -36,29 +66,6 @@ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Global Variables |
|
|
|
|
**/ |
|
|
|
|
|
|
|
|
|
:root { |
|
|
|
|
--plum: #26175e; |
|
|
|
|
--sage: #f0fff1; |
|
|
|
|
|
|
|
|
|
--box: #f0fff1; |
|
|
|
|
--text: #26175e; |
|
|
|
|
--button: #52ffdc; |
|
|
|
|
--active: #2b8b8d ; |
|
|
|
|
--link: #3203dd; |
|
|
|
|
--shadow-rgb: 125, 112, 122; |
|
|
|
|
--box-shadow: 0 0 12px rgba(var(--shadow-rgb), 0.3); |
|
|
|
|
|
|
|
|
|
/* Animated Title Variables */ |
|
|
|
|
--wght-min: 200; |
|
|
|
|
--wght-max: 900; |
|
|
|
|
--dur: 2200ms; |
|
|
|
|
--step: 70ms; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Base |
|
|
|
|
@ -217,7 +224,13 @@ b { |
|
|
|
|
margin-bottom: 2em; |
|
|
|
|
padding: 0.5em 2em 1.4em 2em; |
|
|
|
|
border: none; |
|
|
|
|
box-shadow: var(--box-shadow); |
|
|
|
|
box-shadow: var(--boxShadow); |
|
|
|
|
clip-path: polygon(var(--boxEdge) 0%, |
|
|
|
|
100% 0%, |
|
|
|
|
100% calc(100% - var(--boxEdge)), |
|
|
|
|
calc(100% - var(--boxEdge)) 100%, |
|
|
|
|
0% 100%, |
|
|
|
|
0% var(--boxEdge)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.box-grid { |
|
|
|
|
@ -278,7 +291,7 @@ b { |
|
|
|
|
transition: background-color 0.3s ease; |
|
|
|
|
border-radius: 0; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
box-shadow: var(--box-shadow); |
|
|
|
|
box-shadow: var(--boxShadow); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.button:hover { |
|
|
|
|
@ -374,12 +387,12 @@ b { |
|
|
|
|
transition: background-color 0.3s ease, color 0.3s ease; |
|
|
|
|
text-align: center; |
|
|
|
|
margin: 0 5px; |
|
|
|
|
box-shadow: var(--box-shadow); |
|
|
|
|
box-shadow: var(--boxShadow); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.navigationbar a:hover { |
|
|
|
|
transform: scale(1.1); |
|
|
|
|
box-shadow: 0 0 16px rgba(var(--shadow-rgb), 0.5); |
|
|
|
|
box-shadow: 0 0 16px rgba(var(--shadowRgb), 0.5); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.navigationbar a.active { |
|
|
|
|
@ -427,8 +440,8 @@ b { |
|
|
|
|
.title .ch { |
|
|
|
|
display: inline-block; |
|
|
|
|
will-change: font-variation-settings; |
|
|
|
|
font-variation-settings: "wght" var(--wght-min); |
|
|
|
|
animation: wghtWave var(--dur) cubic-bezier(.45, 0, .1, 1) infinite alternate; |
|
|
|
|
font-variation-settings: "wght" var(--weightMin); |
|
|
|
|
animation: wghtWave var(--duration) cubic-bezier(.45, 0, .1, 1) infinite alternate; |
|
|
|
|
animation-delay: calc(var(--i) * var(--step)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -439,11 +452,11 @@ b { |
|
|
|
|
|
|
|
|
|
@keyframes wghtWave { |
|
|
|
|
from { |
|
|
|
|
font-variation-settings: "wght" var(--wght-min); |
|
|
|
|
font-variation-settings: "wght" var(--weightMin); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
to { |
|
|
|
|
font-variation-settings: "wght" var(--wght-max); |
|
|
|
|
font-variation-settings: "wght" var(--weightMax); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|