355 lines
8.9 KiB
CSS
355 lines
8.9 KiB
CSS
:root {
|
|
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 {
|
|
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.75rem, 2.5dvw, 1.25rem);
|
|
}
|
|
|
|
p {
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
#michael-photo-container {
|
|
max-height: 9lh;
|
|
aspect-ratio: 1;
|
|
|
|
: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;
|
|
}
|
|
|
|
.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: nowrap;
|
|
justify-content: space-evenly;
|
|
column-gap: 2.5%;
|
|
width: min(40rem, 95%);
|
|
|
|
.footerAction {
|
|
flex: 1 0 2rem;
|
|
max-width: 5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
a {
|
|
svg {
|
|
transition: fill var(--anim-duration) ease;
|
|
fill: var(--foreground);
|
|
}
|
|
:hover {
|
|
transition: fill var(--anim-duration) ease;
|
|
fill: var(--color8);
|
|
}
|
|
}
|
|
|
|
#dark-mode-toggle-label {
|
|
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;
|
|
}
|
|
}
|