Refactor as SSG using Vite+React
This commit is contained in:
parent
a22071815d
commit
6830bd41dd
SSH key fingerprint:
SHA256:cj/YZ5VT+QOKncqSkx+ibKTIn0Obg7OIzwzl9BL8EO8
25 changed files with 3076 additions and 282 deletions
387
src/style.css
Normal file
387
src/style.css
Normal file
|
|
@ -0,0 +1,387 @@
|
|||
:root {
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
"Open Sans",
|
||||
"Helvetica Neue",
|
||||
sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: 1.5rem;
|
||||
color-scheme: light dark;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Material Light (https://github.com/dexpota/kitty-themes/blob/master/themes/Material.conf) */
|
||||
--light-color0: #212121;
|
||||
--light-color8: #424242;
|
||||
--light-color1: #b7141e;
|
||||
--light-color9: #e83a3f;
|
||||
--light-color2: #457b23;
|
||||
--light-color10: #7aba39;
|
||||
--light-color3: #f5971d;
|
||||
--light-color11: #fee92e;
|
||||
--light-color4: #134eb2;
|
||||
--light-color12: #53a4f3;
|
||||
--light-color5: #550087;
|
||||
--light-color13: #a94dbb;
|
||||
--light-color6: #0e707c;
|
||||
--light-color14: #26bad1;
|
||||
--light-color7: #eeeeee;
|
||||
--light-color15: #d8d8d8;
|
||||
--light-background: #eaeaea;
|
||||
--light-foreground: #222221;
|
||||
|
||||
--light-toggle-transform: 16px;
|
||||
|
||||
/* Default kitty theme (https://sw.kovidgoyal.net/kitty/conf/#the-color-table) */
|
||||
--dark-color0: #000000;
|
||||
--dark-color8: #767676;
|
||||
--dark-color1: #cc0403;
|
||||
--dark-color9: #f2201f;
|
||||
--dark-color2: #19cb00;
|
||||
--dark-color10: #23fd00;
|
||||
--dark-color3: #cecb00;
|
||||
--dark-color11: #fffd00;
|
||||
--dark-color4: #0d73cc;
|
||||
--dark-color12: #1a8fff;
|
||||
--dark-color5: #cb1ed1;
|
||||
--dark-color13: #fd28ff;
|
||||
--dark-color6: #0dcdcd;
|
||||
--dark-color14: #14ffff;
|
||||
--dark-color7: #dddddd;
|
||||
--dark-color15: #ffffff;
|
||||
--dark-foreground: #dddddd;
|
||||
--dark-background: #000000;
|
||||
|
||||
--dark-toggle-transform: -768px;
|
||||
|
||||
/* Default to light */
|
||||
--main-color0: var(--light-color0);
|
||||
--main-color8: var(--light-color8);
|
||||
--main-color1: var(--light-color1);
|
||||
--main-color9: var(--light-color9);
|
||||
--main-color2: var(--light-color2);
|
||||
--main-color10: var(--light-color10);
|
||||
--main-color3: var(--light-color3);
|
||||
--main-color11: var(--light-color11);
|
||||
--main-color4: var(--light-color4);
|
||||
--main-color12: var(--light-color12);
|
||||
--main-color5: var(--light-color5);
|
||||
--main-color13: var(--light-color13);
|
||||
--main-color6: var(--light-color6);
|
||||
--main-color14: var(--light-color14);
|
||||
--main-color7: var(--light-color7);
|
||||
--main-color15: var(--light-color15);
|
||||
--main-foreground: var(--light-foreground);
|
||||
--main-background: var(--light-background);
|
||||
--main-toggle-transform: var(--light-toggle-transform);
|
||||
--alt-color0: var(--dark-color0);
|
||||
--alt-color8: var(--dark-color8);
|
||||
--alt-color1: var(--dark-color1);
|
||||
--alt-color9: var(--dark-color9);
|
||||
--alt-color2: var(--dark-color2);
|
||||
--alt-color10: var(--dark-color10);
|
||||
--alt-color3: var(--dark-color3);
|
||||
--alt-color11: var(--dark-color11);
|
||||
--alt-color4: var(--dark-color4);
|
||||
--alt-color12: var(--dark-color12);
|
||||
--alt-color5: var(--dark-color5);
|
||||
--alt-color13: var(--dark-color13);
|
||||
--alt-color6: var(--dark-color6);
|
||||
--alt-color14: var(--dark-color14);
|
||||
--alt-color7: var(--dark-color7);
|
||||
--alt-color15: var(--dark-color15);
|
||||
--alt-foreground: var(--dark-foreground);
|
||||
--alt-background: var(--dark-background);
|
||||
--alt-toggle-transform: var(--dark-toggle-transform);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--main-color0: var(--dark-color0);
|
||||
--main-color8: var(--dark-color8);
|
||||
--main-color1: var(--dark-color1);
|
||||
--main-color9: var(--dark-color9);
|
||||
--main-color2: var(--dark-color2);
|
||||
--main-color10: var(--dark-color10);
|
||||
--main-color3: var(--dark-color3);
|
||||
--main-color11: var(--dark-color11);
|
||||
--main-color4: var(--dark-color4);
|
||||
--main-color12: var(--dark-color12);
|
||||
--main-color5: var(--dark-color5);
|
||||
--main-color13: var(--dark-color13);
|
||||
--main-color6: var(--dark-color6);
|
||||
--main-color14: var(--dark-color14);
|
||||
--main-color7: var(--dark-color7);
|
||||
--main-color15: var(--dark-color15);
|
||||
--main-foreground: var(--dark-foreground);
|
||||
--main-background: var(--dark-background);
|
||||
--main-toggle-transform: var(--dark-toggle-transform);
|
||||
--alt-color0: var(--light-color0);
|
||||
--alt-color8: var(--light-color8);
|
||||
--alt-color1: var(--light-color1);
|
||||
--alt-color9: var(--light-color9);
|
||||
--alt-color2: var(--light-color2);
|
||||
--alt-color10: var(--light-color10);
|
||||
--alt-color3: var(--light-color3);
|
||||
--alt-color11: var(--light-color11);
|
||||
--alt-color4: var(--light-color4);
|
||||
--alt-color12: var(--light-color12);
|
||||
--alt-color5: var(--light-color5);
|
||||
--alt-color13: var(--light-color13);
|
||||
--alt-color6: var(--light-color6);
|
||||
--alt-color14: var(--light-color14);
|
||||
--alt-color7: var(--light-color7);
|
||||
--alt-color15: var(--light-color15);
|
||||
--alt-foreground: var(--light-foreground);
|
||||
--alt-background: var(--light-background);
|
||||
--alt-toggle-transform: var(--light-toggle-transform);
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#dark-mode-toggle:not(:checked)) {
|
||||
/* Default to light */
|
||||
--color0: var(--main-color0) !important;
|
||||
--color8: var(--main-color8) !important;
|
||||
--color1: var(--main-color1) !important;
|
||||
--color9: var(--main-color9) !important;
|
||||
--color2: var(--main-color2) !important;
|
||||
--color10: var(--main-color10) !important;
|
||||
--color3: var(--main-color3) !important;
|
||||
--color11: var(--main-color11) !important;
|
||||
--color4: var(--main-color4) !important;
|
||||
--color12: var(--main-color12) !important;
|
||||
--color5: var(--main-color5) !important;
|
||||
--color13: var(--main-color13) !important;
|
||||
--color6: var(--main-color6) !important;
|
||||
--color14: var(--main-color14) !important;
|
||||
--color7: var(--main-color7) !important;
|
||||
--color15: var(--main-color15) !important;
|
||||
--foreground: var(--main-foreground) !important;
|
||||
--background: var(--main-background) !important;
|
||||
|
||||
.dark-mode-svg {
|
||||
transform: translate(16px, var(--main-toggle-transform));
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: transform ease var(--anim-duration);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#dark-mode-toggle:checked) {
|
||||
--color0: var(--alt-color0) !important;
|
||||
--color8: var(--alt-color8) !important;
|
||||
--color1: var(--alt-color1) !important;
|
||||
--color9: var(--alt-color9) !important;
|
||||
--color2: var(--alt-color2) !important;
|
||||
--color10: var(--alt-color10) !important;
|
||||
--color3: var(--alt-color3) !important;
|
||||
--color11: var(--alt-color11) !important;
|
||||
--color4: var(--alt-color4) !important;
|
||||
--color12: var(--alt-color12) !important;
|
||||
--color5: var(--alt-color5) !important;
|
||||
--color13: var(--alt-color13) !important;
|
||||
--color6: var(--alt-color6) !important;
|
||||
--color14: var(--alt-color14) !important;
|
||||
--color7: var(--alt-color7) !important;
|
||||
--color15: var(--alt-color15) !important;
|
||||
--foreground: var(--alt-foreground) !important;
|
||||
--background: var(--alt-background) !important;
|
||||
|
||||
.dark-mode-svg {
|
||||
transform: translate(16px, var(--alt-toggle-transform));
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: transform ease var(--anim-duration);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
--highlight: var(--color6);
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
|
||||
--content-gap: 10rem;
|
||||
|
||||
height: 100dvh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
margin: 0;
|
||||
|
||||
--anim-duration: 0.25s;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition:
|
||||
color var(--anim-duration) ease,
|
||||
background-color var(--anim-duration) ease;
|
||||
}
|
||||
}
|
||||
|
||||
#fetch-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#fetch {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
column-gap: 1rem;
|
||||
row-gap: 1rem;
|
||||
font-family: "JetBrains Mono", "ui-monospace", "SF Mono", "Courier New", monospace;
|
||||
margin: 0 1rem;
|
||||
white-space: nowrap;
|
||||
font-size: clamp(0.5rem, 2.5dvw, 1rem);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.indent {
|
||||
text-indent: 2lh;
|
||||
}
|
||||
|
||||
#michael-photo-container {
|
||||
flex: 1 1 9lh;
|
||||
max-width: 11lh;
|
||||
aspect-ratio: 1;
|
||||
padding-top: 1lh;
|
||||
|
||||
:active {
|
||||
animation: spin 1s linear infinite forwards;
|
||||
}
|
||||
}
|
||||
|
||||
#michael-photo {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
object-position: 0 10%;
|
||||
border: 0.2rem solid var(--highlight);
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: border ease var(--anim-duration);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#basic-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.text-highlight {
|
||||
color: var(--highlight);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.whitespace {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.blocks {
|
||||
letter-spacing: -1px;
|
||||
line-height: 0.9lh;
|
||||
}
|
||||
|
||||
br {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: calc(1lh - 1px);
|
||||
:after {
|
||||
content: "\0200B";
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: color ease var(--anim-duration);
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
column-gap: 1rem;
|
||||
row-gap: 1rem;
|
||||
width: min(40rem, 75%);
|
||||
|
||||
a {
|
||||
flex: 1 1 1rem;
|
||||
max-width: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
svg {
|
||||
transition: fill var(--anim-duration) ease;
|
||||
fill: var(--foreground);
|
||||
}
|
||||
:hover {
|
||||
transition: fill var(--anim-duration) ease;
|
||||
fill: var(--color8);
|
||||
}
|
||||
}
|
||||
|
||||
#dark-mode-toggle-label {
|
||||
flex: 1 1 1rem;
|
||||
max-width: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
cursor: grab;
|
||||
transition-duration: var(--anim-duration);
|
||||
|
||||
svg {
|
||||
transition: all var(--anim-duration) ease;
|
||||
}
|
||||
svg:hover {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
}
|
||||
|
||||
#dark-mode-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue