Personal Website, vers. 1 (pushed far to late)
This commit is contained in:
Harlekin committed
commit
c8df66d3da
103 files changed
+8977
No files matched your search
@@ -0,0 +1,173 @@
|
||||
@layer reset {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
font-size: 100%;
|
||||
line-height: 1.6;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
scroll-padding-top: calc(var(--header-h) + 1rem);
|
||||
hanging-punctuation: first;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg);
|
||||
font-size: var(--step-0);
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding-bottom: var(--section);
|
||||
}
|
||||
|
||||
main:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 650;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.025em;
|
||||
text-wrap: balance;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-underline-offset: 0.2em;
|
||||
text-decoration-thickness: 1px;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--pink-text);
|
||||
outline-offset: 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--pink);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
flex: none;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.8;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.icon--play {
|
||||
fill: currentColor;
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
top: 0.75rem;
|
||||
left: 0.75rem;
|
||||
z-index: 100;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-s);
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
translate: 0 -200%;
|
||||
transition: translate 0.2s;
|
||||
|
||||
&:focus {
|
||||
translate: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,740 @@
|
||||
@layer components {
|
||||
.btn {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
min-height: 3rem;
|
||||
padding-inline: 1.4rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 99px;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
background-color 0.25s,
|
||||
border-color 0.25s,
|
||||
color 0.25s,
|
||||
translate 0.3s var(--ease-out);
|
||||
|
||||
& .icon {
|
||||
transition: translate 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
&:hover .icon--arrow-right {
|
||||
translate: 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
|
||||
&:hover {
|
||||
background: var(--pink-text);
|
||||
}
|
||||
}
|
||||
|
||||
.btn--ghost {
|
||||
border-color: var(--line-strong);
|
||||
background: rgb(12 10 18 / 0.35);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 99px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge--draft {
|
||||
border: 1px dashed rgb(255 141 180 / 0.6);
|
||||
background: rgb(255 118 164 / 0.12);
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.65rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.tag {
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--pink-text);
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-top: 1.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 3rem 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Pointer-following border glow, the position comes from pointer.js */
|
||||
[data-glow] {
|
||||
--mx: 50%;
|
||||
--my: 50%;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
padding: 1px;
|
||||
border-radius: inherit;
|
||||
background: radial-gradient(26rem circle at var(--mx) var(--my), rgb(255 141 180 / 0.7), rgb(192 17 215 / 0.35) 40%, transparent 65%);
|
||||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
[data-glow]:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Project cards */
|
||||
.project-grid {
|
||||
display: grid;
|
||||
gap: clamp(1rem, 2vw, 1.5rem);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
@media (min-width: 40em) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background: var(--surface);
|
||||
transition: border-color 0.3s, translate 0.4s var(--ease-out);
|
||||
}
|
||||
|
||||
.card__link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline-offset: 4px;
|
||||
border-radius: var(--radius-l);
|
||||
}
|
||||
}
|
||||
|
||||
.card__media {
|
||||
aspect-ratio: 16 / 10;
|
||||
overflow: hidden;
|
||||
border-radius: calc(var(--radius-l) - 1px) calc(var(--radius-l) - 1px) 0 0;
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.card__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: scale 0.9s var(--ease-out);
|
||||
}
|
||||
|
||||
.card__placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(80% 70% at 20% 20%, rgb(255 118 164 / 0.45), transparent 70%),
|
||||
radial-gradient(70% 70% at 80% 80%, rgb(47 60 190 / 0.6), transparent 70%),
|
||||
radial-gradient(60% 60% at 60% 30%, rgb(192 17 215 / 0.4), transparent 70%),
|
||||
var(--surface-2);
|
||||
}
|
||||
|
||||
.card__body {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.6rem;
|
||||
padding: 1.25rem 1.4rem 1.6rem;
|
||||
}
|
||||
|
||||
.card__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
min-height: 1.4rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.card__title {
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
.card__summary {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.card .tags {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.card:hover {
|
||||
border-color: transparent;
|
||||
|
||||
& .card__img {
|
||||
scale: 1.045;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Filter chips */
|
||||
.filter {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
|
||||
|
||||
@media (max-width: 39.99em) {
|
||||
margin-inline: calc(-1 * var(--gutter));
|
||||
padding-inline: var(--gutter);
|
||||
padding-bottom: 0.25rem;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x proximity;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 2.75rem;
|
||||
padding-inline: 1.1rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
scroll-snap-align: start;
|
||||
transition: color 0.2s, border-color 0.2s, background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--text);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
&[aria-current="true"] {
|
||||
border-color: transparent;
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
|
||||
& .chip__count {
|
||||
color: rgb(12 10 18 / 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chip__count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
/* Link buttons (project links, contact) */
|
||||
.link-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-height: 3rem;
|
||||
padding: 0.6rem 0.95rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: rgb(243 238 248 / 0.03);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
|
||||
& span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
& .icon {
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(255 141 180 / 0.6);
|
||||
background: rgb(255 118 164 / 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
/* Long-form text from Markdown */
|
||||
.prose {
|
||||
max-width: 42rem;
|
||||
color: rgb(243 238 248 / 0.88);
|
||||
|
||||
& > * + * {
|
||||
margin-top: 1.1em;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& h2 {
|
||||
margin-top: 2em;
|
||||
font-size: var(--step-3);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin-top: 1.75em;
|
||||
font-size: var(--step-2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
& h2 + *,
|
||||
& h3 + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--pink-text);
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
& strong {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
& ul,
|
||||
& ol {
|
||||
padding-left: 1.25em;
|
||||
}
|
||||
|
||||
& li + li {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
|
||||
& li::marker {
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
& code {
|
||||
padding: 0.12em 0.4em;
|
||||
border-radius: 0.35rem;
|
||||
background: rgb(243 238 248 / 0.08);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.86em;
|
||||
}
|
||||
|
||||
& pre {
|
||||
padding: 1.1rem 1.25rem;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: #0f0c16;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
|
||||
& code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
& img {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
& blockquote {
|
||||
padding-left: 1.25rem;
|
||||
border-left: 2px solid var(--violet-text);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
& hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
& table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
& th,
|
||||
& td {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.prose--wide {
|
||||
max-width: 52rem;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.field__label {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.field__input {
|
||||
width: 100%;
|
||||
min-height: 3.1rem;
|
||||
padding: 0.8rem 1rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 0.8rem;
|
||||
background: var(--surface);
|
||||
font-size: max(16px, 1rem);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(243 238 248 / 0.32);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--pink-text);
|
||||
box-shadow: 0 0 0 4px rgb(255 118 164 / 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
.field__input--area {
|
||||
min-height: 11rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.field--invalid .field__input {
|
||||
border-color: var(--error);
|
||||
}
|
||||
|
||||
.field__error {
|
||||
font-size: 0.875rem;
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.field--trap {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-status {
|
||||
padding: 1rem 1.25rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.form-status--ok {
|
||||
border-color: rgb(143 152 255 / 0.5);
|
||||
background: rgb(47 60 190 / 0.18);
|
||||
}
|
||||
|
||||
.form-status--error {
|
||||
border-color: rgb(255 154 169 / 0.5);
|
||||
background: rgb(255 107 129 / 0.1);
|
||||
}
|
||||
|
||||
/* Video */
|
||||
.video {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 9;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background:
|
||||
radial-gradient(60% 80% at 15% 20%, rgb(255 118 164 / 0.3), transparent 70%),
|
||||
radial-gradient(60% 80% at 85% 80%, rgb(47 60 190 / 0.45), transparent 70%),
|
||||
var(--surface);
|
||||
|
||||
& iframe {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.video--file {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.video__poster {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: brightness(0.55) saturate(0.9);
|
||||
}
|
||||
|
||||
.video__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.video__play {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
padding: 0.45rem 1.3rem 0.45rem 0.45rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
background: rgb(12 10 18 / 0.7);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--text);
|
||||
|
||||
& .video__play-icon {
|
||||
scale: 1.06;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video__play-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
transition: scale 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
.video__notice {
|
||||
max-width: 34ch;
|
||||
font-size: 0.8rem;
|
||||
color: rgb(243 238 248 / 0.75);
|
||||
}
|
||||
|
||||
/* Gallery + lightbox */
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery__link {
|
||||
display: block;
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.gallery__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: scale 0.7s var(--ease-out);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.gallery__link:hover .gallery__img {
|
||||
scale: 1.05;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
max-height: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: rgb(8 6 12 / 0.94);
|
||||
color: var(--text);
|
||||
|
||||
&::backdrop {
|
||||
background: rgb(8 6 12 / 0.6);
|
||||
}
|
||||
|
||||
&[open] {
|
||||
animation: fade-in 0.3s var(--ease-out);
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox__figure {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: calc(4.5rem + env(safe-area-inset-top)) 1rem calc(4rem + env(safe-area-inset-bottom));
|
||||
touch-action: pan-y pinch-zoom;
|
||||
|
||||
@media (min-width: 48em) {
|
||||
padding-inline: 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox__img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
object-fit: contain;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.lightbox__btn {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
padding: 0;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 50%;
|
||||
background: rgb(243 238 248 / 0.08);
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgb(243 238 248 / 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox__close {
|
||||
top: calc(1rem + env(safe-area-inset-top));
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.lightbox__prev,
|
||||
.lightbox__next {
|
||||
top: 50%;
|
||||
translate: 0 -50%;
|
||||
|
||||
@media (max-width: 47.99em) {
|
||||
top: auto;
|
||||
bottom: calc(1rem + env(safe-area-inset-bottom));
|
||||
translate: none;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox__prev {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.lightbox__next {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.lightbox__count {
|
||||
position: absolute;
|
||||
bottom: calc(1.6rem + env(safe-area-inset-bottom));
|
||||
left: 50%;
|
||||
translate: -50% 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,469 @@
|
||||
@layer pages {
|
||||
/* Hero */
|
||||
.hero {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
align-items: end;
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
padding-block: calc(var(--header-h) + 3rem) clamp(2.5rem, 7vh, 5rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero__bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
radial-gradient(60% 50% at 80% 18%, rgb(192 17 215 / 0.55), transparent 70%),
|
||||
radial-gradient(50% 45% at 25% 8%, rgb(255 118 164 / 0.45), transparent 70%),
|
||||
radial-gradient(70% 55% at 75% 75%, rgb(47 60 190 / 0.6), transparent 70%),
|
||||
var(--bg);
|
||||
|
||||
/* readability: darken towards the text and fade into the page */
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(12 10 18 / 0.25) 0%, rgb(12 10 18 / 0) 25%, rgb(12 10 18 / 0.45) 62%, var(--bg) 100%),
|
||||
linear-gradient(90deg, rgb(12 10 18 / 0.6) 0%, rgb(12 10 18 / 0.15) 60%, transparent 100%);
|
||||
}
|
||||
|
||||
/* film grain */
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
opacity: 0.12;
|
||||
mix-blend-mode: overlay;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 1.6s var(--ease-out);
|
||||
|
||||
&.is-ready {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__inner {
|
||||
display: grid;
|
||||
gap: clamp(1.25rem, 3vh, 2rem);
|
||||
}
|
||||
|
||||
.hero__kicker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(243 238 248 / 0.8);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
flex: none;
|
||||
width: 2rem;
|
||||
height: 1px;
|
||||
background: var(--fluid);
|
||||
}
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero__name {
|
||||
display: block;
|
||||
margin-left: -0.05em;
|
||||
padding-bottom: 0.04em;
|
||||
font-size: clamp(6rem, 2rem + 24vw, 19rem);
|
||||
line-height: 0.8;
|
||||
letter-spacing: -0.045em;
|
||||
color: var(--text);
|
||||
text-shadow: 0 0 60px rgb(12 10 18 / 0.35);
|
||||
}
|
||||
|
||||
.hero__pronouns {
|
||||
margin-top: clamp(0.25rem, 1.5vw, 1.5rem);
|
||||
padding: 0.4rem 0.85rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
background: rgb(12 10 18 / 0.45);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.hero__bottom {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__lead {
|
||||
max-width: 40ch;
|
||||
font-size: var(--step-1);
|
||||
color: rgb(243 238 248 / 0.88);
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.now {
|
||||
width: min(100%, 22rem);
|
||||
padding: 1.1rem 1.25rem 1.2rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background: rgb(12 10 18 / 0.55);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.now__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.now__pulse {
|
||||
position: relative;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--pink);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--pink);
|
||||
animation: ping 2.2s var(--ease-out) infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.now__list {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Bento */
|
||||
.bento {
|
||||
display: grid;
|
||||
gap: clamp(0.75rem, 1.5vw, 1.25rem);
|
||||
|
||||
@media (min-width: 40em) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-areas:
|
||||
"server server"
|
||||
"homelab homelab"
|
||||
"scripts study"
|
||||
"video video";
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-areas:
|
||||
"server server homelab homelab"
|
||||
"server server scripts study"
|
||||
"video video video video";
|
||||
}
|
||||
}
|
||||
|
||||
.tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
min-height: 16rem;
|
||||
padding: clamp(1.25rem, 2.5vw, 1.75rem);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background: linear-gradient(180deg, var(--surface), var(--bg-raised));
|
||||
}
|
||||
|
||||
/* only where the grid actually defines these areas, otherwise all tiles end up in one cell */
|
||||
@media (min-width: 40em) {
|
||||
.tile--server { grid-area: server; }
|
||||
.tile--homelab { grid-area: homelab; }
|
||||
.tile--scripts { grid-area: scripts; }
|
||||
.tile--study { grid-area: study; }
|
||||
.tile--video { grid-area: video; }
|
||||
}
|
||||
|
||||
.tile__visual {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 8rem;
|
||||
}
|
||||
|
||||
.tile__body {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.tile__title {
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
.tile__text {
|
||||
max-width: 48ch;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tile__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
width: fit-content;
|
||||
margin-top: 0.35rem;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 500;
|
||||
color: var(--pink-text);
|
||||
text-decoration: none;
|
||||
|
||||
/* the whole tile is clickable */
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
&::after {
|
||||
outline: 2px solid var(--pink-text);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
& .icon {
|
||||
transition: translate 0.3s var(--ease-out);
|
||||
}
|
||||
}
|
||||
|
||||
.tile:hover .tile__link .icon {
|
||||
translate: 3px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.tile--server .tile__visual {
|
||||
min-height: 14rem;
|
||||
}
|
||||
|
||||
.tile--video {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
|
||||
& .tile__visual {
|
||||
order: 2;
|
||||
flex: 1.4;
|
||||
}
|
||||
|
||||
& .tile__body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Featured projects: first card gets the full width */
|
||||
.project-grid--featured > li:first-child {
|
||||
@media (min-width: 40em) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
& .card__link {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
& .card__media {
|
||||
flex: 1.35;
|
||||
aspect-ratio: auto;
|
||||
min-height: 24rem;
|
||||
border-radius: calc(var(--radius-l) - 1px) 0 0 calc(var(--radius-l) - 1px);
|
||||
}
|
||||
|
||||
& .card__body {
|
||||
flex: 1;
|
||||
align-content: center;
|
||||
padding: clamp(1.5rem, 3vw, 3rem);
|
||||
}
|
||||
|
||||
& .card__title {
|
||||
font-size: var(--step-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tools marquee */
|
||||
.marquee {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
|
||||
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
|
||||
user-select: none;
|
||||
|
||||
&:hover .marquee__track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.marquee__track {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
animation: marquee 45s linear infinite;
|
||||
}
|
||||
|
||||
.marquee__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: clamp(1.25rem, 3vw, 2.5rem);
|
||||
padding-right: clamp(1.25rem, 3vw, 2.5rem);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step-4);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
white-space: nowrap;
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 1px rgb(243 238 248 / 0.45);
|
||||
|
||||
&:nth-child(3n + 1) {
|
||||
color: var(--text);
|
||||
-webkit-text-stroke: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 50%;
|
||||
background: var(--pink);
|
||||
}
|
||||
|
||||
&:nth-child(3n + 2)::after {
|
||||
background: var(--violet-text);
|
||||
}
|
||||
|
||||
&:nth-child(3n)::after {
|
||||
background: var(--blue-text);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.marquee {
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
padding-inline: var(--gutter);
|
||||
}
|
||||
|
||||
.marquee__track {
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 1;
|
||||
gap: 0.5rem 0;
|
||||
animation: none;
|
||||
|
||||
&[aria-hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.marquee__item {
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Contact teaser */
|
||||
.cta__inner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(2.25rem, 6vw, 5rem) clamp(1.25rem, 6vw, 5rem);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: clamp(1.25rem, 3vw, 2rem);
|
||||
background:
|
||||
radial-gradient(70% 90% at 100% 0%, rgb(192 17 215 / 0.32), transparent 60%),
|
||||
radial-gradient(60% 90% at 0% 100%, rgb(47 60 190 / 0.42), transparent 60%),
|
||||
radial-gradient(40% 60% at 60% 110%, rgb(255 118 164 / 0.25), transparent 70%),
|
||||
var(--surface);
|
||||
}
|
||||
|
||||
.cta__title {
|
||||
max-width: 18ch;
|
||||
font-size: var(--step-4);
|
||||
}
|
||||
|
||||
.cta__text {
|
||||
max-width: 52ch;
|
||||
margin-top: 1.1rem;
|
||||
font-size: var(--step-1);
|
||||
color: rgb(243 238 248 / 0.8);
|
||||
}
|
||||
|
||||
.cta__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 1rem 1.75rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.cta__mail {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.95rem;
|
||||
overflow-wrap: anywhere;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--pink-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,523 @@
|
||||
@layer layout {
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: calc(var(--container) + 2 * var(--gutter));
|
||||
margin-inline: auto;
|
||||
padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
|
||||
}
|
||||
|
||||
.container--wide {
|
||||
max-width: calc(92rem + 2 * var(--gutter));
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: var(--section);
|
||||
}
|
||||
|
||||
.section--flush {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.section--tight {
|
||||
padding-top: calc(var(--section) * 0.75);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem 1.25rem;
|
||||
margin-bottom: clamp(1.75rem, 4vw, 3.25rem);
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.section-head__index {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
.section-head__title {
|
||||
flex: 1 1 auto;
|
||||
font-size: var(--step-4);
|
||||
}
|
||||
|
||||
.section-head__more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
min-height: 2.75rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
/* Header. The header itself is never transformed, otherwise it would become
|
||||
the containing block for the fixed mobile menu inside it. */
|
||||
.site-header {
|
||||
position: fixed;
|
||||
inset: 0 0 auto;
|
||||
z-index: 50;
|
||||
height: calc(var(--header-h) + env(safe-area-inset-top));
|
||||
padding-top: env(safe-area-inset-top);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgb(12 10 18 / 0.72);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(140%);
|
||||
backdrop-filter: blur(14px) saturate(140%);
|
||||
border-bottom: 1px solid var(--line);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s, translate 0.45s var(--ease-out);
|
||||
}
|
||||
|
||||
&.is-scrolled::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.is-hidden {
|
||||
pointer-events: none;
|
||||
|
||||
&::before,
|
||||
.site-header__inner {
|
||||
translate: 0 -110%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-header__inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
transition: translate 0.45s var(--ease-out);
|
||||
}
|
||||
|
||||
.brand {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
min-height: 2.75rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand__mark {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px var(--line-strong), 0 0 20px rgb(255 118 164 / 0.3);
|
||||
transition: rotate 0.4s var(--ease-out), scale 0.4s var(--ease-out);
|
||||
}
|
||||
|
||||
.brand:hover .brand__mark {
|
||||
rotate: -8deg;
|
||||
scale: 1.06;
|
||||
}
|
||||
|
||||
.brand__name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0 0.25rem 0 0.9rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
background: rgb(12 10 18 / 0.5);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.menu-toggle__icon {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
|
||||
& span {
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
height: 1.5px;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: translate 0.35s var(--ease-out), rotate 0.35s var(--ease-out);
|
||||
}
|
||||
|
||||
& span:first-child {
|
||||
translate: 0 -3px;
|
||||
}
|
||||
|
||||
& span:last-child {
|
||||
translate: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-open .menu-toggle__icon {
|
||||
& span:first-child {
|
||||
translate: none;
|
||||
rotate: 45deg;
|
||||
}
|
||||
|
||||
& span:last-child {
|
||||
translate: none;
|
||||
rotate: -45deg;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.site-nav__list {
|
||||
display: flex;
|
||||
gap: 1.75rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.site-nav__link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 2.75rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0.55rem;
|
||||
height: 1px;
|
||||
background: var(--fluid);
|
||||
scale: 0 1;
|
||||
transform-origin: right;
|
||||
transition: scale 0.4s var(--ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&[aria-current="page"] {
|
||||
color: var(--text);
|
||||
|
||||
&::after {
|
||||
scale: 1 1;
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lang-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
min-height: 2.5rem;
|
||||
padding-inline: 0.85rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--text);
|
||||
background: rgb(243 238 248 / 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.lang-switch__current,
|
||||
.lang-switch__sep {
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
@media (max-width: 47.99em) {
|
||||
.menu-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 2.5rem;
|
||||
padding: calc(var(--header-h) + env(safe-area-inset-top) + 1rem) var(--gutter) calc(2.5rem + env(safe-area-inset-bottom));
|
||||
overflow-y: auto;
|
||||
background:
|
||||
radial-gradient(90% 60% at 100% 0%, rgb(192 17 215 / 0.28), transparent 70%),
|
||||
radial-gradient(80% 60% at 0% 100%, rgb(47 60 190 / 0.35), transparent 70%),
|
||||
var(--bg);
|
||||
clip-path: circle(0 at calc(100% - 2.75rem) 2.1rem);
|
||||
visibility: hidden;
|
||||
transition: clip-path 0.55s var(--ease-in-out), visibility 0s 0.55s;
|
||||
}
|
||||
|
||||
.menu-open .site-nav {
|
||||
clip-path: circle(150% at calc(100% - 2.75rem) 2.1rem);
|
||||
visibility: visible;
|
||||
transition: clip-path 0.7s var(--ease-out), visibility 0s;
|
||||
}
|
||||
|
||||
.menu-open .site-header::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.site-nav__list {
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.site-nav__link {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2.25rem, 11vw, 3.25rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--text);
|
||||
opacity: 0;
|
||||
translate: 0 1rem;
|
||||
transition: opacity 0.4s, translate 0.5s var(--ease-out);
|
||||
|
||||
&::after {
|
||||
bottom: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-open .site-nav__link {
|
||||
opacity: 1;
|
||||
translate: none;
|
||||
}
|
||||
|
||||
.menu-open .site-nav__item:nth-child(1) .site-nav__link { transition-delay: 0.12s; }
|
||||
.menu-open .site-nav__item:nth-child(2) .site-nav__link { transition-delay: 0.18s; }
|
||||
.menu-open .site-nav__item:nth-child(3) .site-nav__link { transition-delay: 0.24s; }
|
||||
.menu-open .site-nav__item:nth-child(4) .site-nav__link { transition-delay: 0.3s; }
|
||||
.menu-open .site-nav__item:nth-child(5) .site-nav__link { transition-delay: 0.36s; }
|
||||
|
||||
.lang-switch {
|
||||
min-height: 2.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Without JS the menu button can't do anything, so show the links inline */
|
||||
@media (max-width: 47.99em) and (scripting: none) {
|
||||
.site-header {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.site-header__inner {
|
||||
flex-wrap: wrap;
|
||||
padding-block: 0.75rem;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
position: static;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1rem;
|
||||
padding: 0;
|
||||
background: none;
|
||||
clip-path: none;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.site-nav__list {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 1rem;
|
||||
}
|
||||
|
||||
.site-nav__link {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.95rem;
|
||||
opacity: 1;
|
||||
translate: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-open,
|
||||
.lightbox-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Subpage heads */
|
||||
.page-head {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding-block: calc(var(--header-h) + clamp(3rem, 9vw, 7.5rem)) clamp(2.5rem, 5vw, 4.5rem);
|
||||
}
|
||||
|
||||
.page-head__glow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
width: min(62rem, 100%);
|
||||
height: min(36rem, 90%);
|
||||
background:
|
||||
radial-gradient(closest-side at 72% 32%, rgb(192 17 215 / 0.32), transparent),
|
||||
radial-gradient(closest-side at 92% 12%, rgb(255 118 164 / 0.28), transparent),
|
||||
radial-gradient(closest-side at 46% 4%, rgb(47 60 190 / 0.4), transparent);
|
||||
filter: blur(28px);
|
||||
pointer-events: none;
|
||||
animation: drift 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.page-head__kicker {
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
/* long German compounds like "Datenschutzerklärung" don't fit on phones otherwise */
|
||||
.page-head__title,
|
||||
.project-head__title {
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.page-head__title {
|
||||
max-width: 16ch;
|
||||
font-size: var(--step-5);
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.page-head__lead {
|
||||
max-width: 56ch;
|
||||
margin-top: 1.25rem;
|
||||
font-size: var(--step-1);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
padding-block: clamp(3rem, 6vw, 5rem) calc(2rem + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid var(--line);
|
||||
background: linear-gradient(180deg, transparent, rgb(47 60 190 / 0.07));
|
||||
font-size: 0.95rem;
|
||||
|
||||
& ul {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
& a {
|
||||
display: inline-block;
|
||||
padding-block: 0.2rem;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
overflow-wrap: anywhere;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer__grid {
|
||||
display: grid;
|
||||
gap: 2.25rem;
|
||||
|
||||
@media (min-width: 40em) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer__intro {
|
||||
@media (min-width: 40em) and (max-width: 59.99em) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer .brand {
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.site-footer__note {
|
||||
max-width: 36ch;
|
||||
margin-top: 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.site-footer__heading {
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
.site-footer__bottom {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem 1.5rem;
|
||||
margin-top: clamp(2.5rem, 5vw, 4rem);
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--line);
|
||||
font-size: 0.875rem;
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
.site-footer .site-footer__legal {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.to-top {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@layer reset, base, layout, components, pages, motion, utilities;
|
||||
|
||||
@import "@fontsource-variable/bricolage-grotesque/opsz.css";
|
||||
@import "@fontsource/ibm-plex-sans/latin-400.css";
|
||||
@import "@fontsource/ibm-plex-sans/latin-400-italic.css";
|
||||
@import "@fontsource/ibm-plex-sans/latin-500.css";
|
||||
@import "@fontsource/ibm-plex-sans/latin-600.css";
|
||||
@import "@fontsource/ibm-plex-mono/latin-400.css";
|
||||
@import "@fontsource/ibm-plex-mono/latin-500.css";
|
||||
|
||||
@import "./tokens.css";
|
||||
@import "./base.css";
|
||||
@import "./layout.css";
|
||||
@import "./components.css";
|
||||
@import "./visuals.css";
|
||||
@import "./home.css";
|
||||
@import "./pages.css";
|
||||
@import "./motion.css";
|
||||
@@ -0,0 +1,134 @@
|
||||
@layer motion {
|
||||
/* Content only starts hidden when JS runs and nobody asked for less motion */
|
||||
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
|
||||
[data-reveal] {
|
||||
opacity: 0;
|
||||
translate: 0 1.75rem;
|
||||
transition:
|
||||
opacity 0.9s var(--ease-out) var(--delay, 0s),
|
||||
translate 0.9s var(--ease-out) var(--delay, 0s);
|
||||
}
|
||||
|
||||
[data-reveal="mask"] {
|
||||
opacity: 1;
|
||||
translate: none;
|
||||
clip-path: inset(0 -0.2em 100% -0.2em);
|
||||
transform: translateY(0.35em);
|
||||
transition:
|
||||
clip-path 1.1s var(--ease-out) var(--delay, 0s),
|
||||
transform 1.1s var(--ease-out) var(--delay, 0s);
|
||||
}
|
||||
|
||||
[data-reveal].is-visible {
|
||||
opacity: 1;
|
||||
translate: none;
|
||||
}
|
||||
|
||||
[data-reveal="mask"].is-visible {
|
||||
clip-path: inset(-0.2em -0.2em -0.3em -0.2em);
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (animation-timeline: view()) {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.timeline::after {
|
||||
animation: grow linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 20% cover 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0s !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0s !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes drift {
|
||||
from { translate: 0 0; scale: 1; }
|
||||
to { translate: -6% 4%; scale: 1.08; }
|
||||
}
|
||||
|
||||
@keyframes ping {
|
||||
0% { scale: 1; opacity: 0.7; }
|
||||
80%, 100% { scale: 3; opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.25; }
|
||||
}
|
||||
|
||||
@keyframes load {
|
||||
from { translate: -30% 0; }
|
||||
to { translate: 60% 0; }
|
||||
}
|
||||
|
||||
@keyframes flow {
|
||||
from { stroke-dashoffset: 106; }
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
@keyframes sort {
|
||||
0%, 12% { height: var(--from); }
|
||||
40%, 75% { height: var(--to); }
|
||||
100% { height: var(--from); }
|
||||
}
|
||||
|
||||
@keyframes playhead {
|
||||
from { left: calc(0.9rem + var(--label)); }
|
||||
to { left: calc(100% - 0.9rem); }
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
to { translate: -100% 0; }
|
||||
}
|
||||
|
||||
@keyframes grow {
|
||||
from { scale: 1 0; }
|
||||
to { scale: 1 1; }
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes vt-out {
|
||||
to { opacity: 0; translate: 0 -0.75rem; }
|
||||
}
|
||||
|
||||
@keyframes vt-in {
|
||||
from { opacity: 0; translate: 0 1.25rem; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Cross-document page transitions, outside of the layers on purpose */
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@view-transition {
|
||||
navigation: none;
|
||||
}
|
||||
}
|
||||
|
||||
::view-transition-old(root) {
|
||||
animation: 0.3s var(--ease-in-out) both vt-out;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
animation: 0.55s var(--ease-out) both vt-in;
|
||||
}
|
||||
|
||||
::view-transition-group(project-cover) {
|
||||
animation-duration: 0.6s;
|
||||
animation-timing-function: var(--ease-out);
|
||||
}
|
||||
@@ -0,0 +1,553 @@
|
||||
@layer pages {
|
||||
/* Project detail */
|
||||
.project-head {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding-block: calc(var(--header-h) + clamp(2rem, 6vw, 5rem)) clamp(2rem, 4vw, 3rem);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 2.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
|
||||
& .icon {
|
||||
transition: translate 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--text);
|
||||
|
||||
& .icon {
|
||||
translate: -3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-head__title {
|
||||
max-width: 20ch;
|
||||
font-size: var(--step-5);
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.25rem 3rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
& dt {
|
||||
margin-bottom: 0.4rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--faint);
|
||||
}
|
||||
}
|
||||
|
||||
.project-cover {
|
||||
margin-bottom: clamp(2.5rem, 5vw, 4rem);
|
||||
}
|
||||
|
||||
.project-cover__img {
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
max-height: 80svh;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
object-fit: cover;
|
||||
view-transition-name: project-cover;
|
||||
}
|
||||
|
||||
.project-body {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: minmax(0, 1fr) 18rem;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
.project-links {
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
|
||||
@media (min-width: 60em) {
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + 1.5rem);
|
||||
}
|
||||
|
||||
& ul {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.project-links__title,
|
||||
.contact__aside-title {
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
.project-section {
|
||||
padding-top: clamp(3rem, 6vw, 5rem);
|
||||
}
|
||||
|
||||
.project-section__title {
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: var(--step-3);
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding-top: var(--section);
|
||||
|
||||
@media (min-width: 40em) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.pager__link {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--line-strong);
|
||||
background: var(--surface);
|
||||
}
|
||||
}
|
||||
|
||||
.pager__link--older {
|
||||
text-align: right;
|
||||
|
||||
@media (min-width: 40em) {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
& .pager__label {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.pager__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pager__title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step-2);
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
/* Homelab */
|
||||
.hardware,
|
||||
.services,
|
||||
.skills {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hardware {
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
|
||||
}
|
||||
|
||||
.services,
|
||||
.skills {
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
|
||||
}
|
||||
|
||||
.machine,
|
||||
.service-group,
|
||||
.skill-group {
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background: linear-gradient(180deg, var(--surface), var(--bg-raised));
|
||||
}
|
||||
|
||||
.machine__role {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
.machine__name {
|
||||
margin-top: 0.4rem;
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
.machine__specs {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
flex: none;
|
||||
width: 0.35rem;
|
||||
height: 0.35rem;
|
||||
margin-top: 0.6em;
|
||||
border-radius: 50%;
|
||||
background: var(--violet-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service-group__title,
|
||||
.skill-group__title {
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.service-group__list {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.service {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: baseline;
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
|
||||
.service__dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--pink);
|
||||
box-shadow: 0 0 0 4px rgb(255 118 164 / 0.14);
|
||||
}
|
||||
|
||||
.service__name {
|
||||
font-weight: 600;
|
||||
|
||||
& a {
|
||||
color: inherit;
|
||||
text-decoration-color: rgb(255 141 180 / 0.6);
|
||||
|
||||
&:hover {
|
||||
color: var(--pink-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service__text {
|
||||
grid-column: 2;
|
||||
font-size: 0.92rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Journey */
|
||||
.about {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: 18rem minmax(0, 1fr);
|
||||
column-gap: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.about__head {
|
||||
grid-column: 1 / -1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.about__portrait {
|
||||
width: min(100%, 18rem);
|
||||
}
|
||||
|
||||
.about__img {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 5;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.about__text {
|
||||
font-size: var(--step-1);
|
||||
line-height: 1.55;
|
||||
|
||||
.about__head + & {
|
||||
grid-column: 1 / -1;
|
||||
max-width: 48rem;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline {
|
||||
--line-x: 0.45rem;
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
margin: 0;
|
||||
padding: 0 0 0 2.25rem;
|
||||
list-style: none;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
left: var(--line-x);
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: linear-gradient(180deg, var(--pink), var(--violet-text), var(--blue-text));
|
||||
transform-origin: top;
|
||||
scale: 1 var(--progress, 1);
|
||||
}
|
||||
|
||||
@media (min-width: 60em) {
|
||||
--line-x: calc(50% - 1px);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
column-gap: 5rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline__entry {
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 60em) {
|
||||
&:nth-child(odd) {
|
||||
grid-column: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
grid-column: 2;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
&:nth-child(even) + .timeline__entry {
|
||||
margin-top: -3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline__dot {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
left: calc(-2.25rem + 0.45rem + 1px - 0.45rem);
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
background: var(--bg);
|
||||
box-shadow: 0 0 0 4px var(--bg);
|
||||
|
||||
@media (min-width: 60em) {
|
||||
.timeline__entry:nth-child(odd) & {
|
||||
left: auto;
|
||||
right: calc(-2.5rem - 0.45rem);
|
||||
}
|
||||
|
||||
.timeline__entry:nth-child(even) & {
|
||||
left: calc(-2.5rem - 0.45rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline__entry--edu { color: var(--blue-text); }
|
||||
.timeline__entry--work { color: var(--pink-text); }
|
||||
.timeline__entry--project,
|
||||
.timeline__entry--other { color: var(--violet-text); }
|
||||
|
||||
.timeline__card {
|
||||
padding: 1.25rem 1.4rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.timeline__period {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
|
||||
@media (min-width: 60em) {
|
||||
.timeline__entry:nth-child(odd) & {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline__title {
|
||||
margin-top: 0.4rem;
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
.timeline__place {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.timeline__text {
|
||||
margin-top: 0.6rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.skill-group__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.skill {
|
||||
padding: 0.35rem 0.8rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 99px;
|
||||
background: rgb(243 238 248 / 0.05);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
/* Contact */
|
||||
.contact {
|
||||
display: grid;
|
||||
gap: clamp(2rem, 5vw, 4rem);
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.contact-form__footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 1rem 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-form__note {
|
||||
max-width: 42ch;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.contact__aside {
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.contact__links {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Errors */
|
||||
.error-page {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
min-height: 80vh;
|
||||
min-height: 80svh;
|
||||
padding-block: calc(var(--header-h) + 3rem) 2rem;
|
||||
|
||||
& .btn {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.error-page__code {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(7rem, 4rem + 18vw, 16rem);
|
||||
font-weight: 700;
|
||||
line-height: 0.85;
|
||||
letter-spacing: -0.06em;
|
||||
background: var(--fluid);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.error-page__title {
|
||||
margin-top: 1.25rem;
|
||||
font-size: var(--step-4);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
|
||||
--bg: #0c0a12;
|
||||
--bg-raised: #120f1a;
|
||||
--surface: #16131f;
|
||||
--surface-2: #1e1a2a;
|
||||
--line: rgb(243 238 248 / 0.1);
|
||||
--line-strong: rgb(243 238 248 / 0.2);
|
||||
|
||||
--text: #f3eef8;
|
||||
--muted: #a8a0bb;
|
||||
--faint: #857d99;
|
||||
|
||||
/* genderfluid flag */
|
||||
--pink: #ff76a4;
|
||||
--white: #ffffff;
|
||||
--violet: #c011d7;
|
||||
--black: #000000;
|
||||
--blue: #2f3cbe;
|
||||
|
||||
/* lighter versions that are readable on the dark background */
|
||||
--pink-text: #ff8db4;
|
||||
--violet-text: #da7ff2;
|
||||
--blue-text: #8f98ff;
|
||||
--error: #ff9aa9;
|
||||
|
||||
--fluid: linear-gradient(110deg, var(--pink) 0%, var(--violet-text) 48%, var(--blue-text) 100%);
|
||||
|
||||
--font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", system-ui, sans-serif;
|
||||
--font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
|
||||
|
||||
--step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
|
||||
--step-0: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
|
||||
--step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
|
||||
--step-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.85rem);
|
||||
--step-3: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
|
||||
--step-4: clamp(2.2rem, 1.6rem + 3vw, 4.25rem);
|
||||
--step-5: clamp(2.8rem, 1.7rem + 5.5vw, 6.5rem);
|
||||
|
||||
--radius-s: 0.6rem;
|
||||
--radius: 1rem;
|
||||
--radius-l: 1.5rem;
|
||||
|
||||
--gutter: clamp(1rem, 4vw, 2.5rem);
|
||||
--container: 78rem;
|
||||
--section: clamp(4.5rem, 3rem + 7vw, 9rem);
|
||||
--header-h: 4.25rem;
|
||||
|
||||
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
/* Small decorative animations inside the homepage tiles */
|
||||
@layer components {
|
||||
/* Server rack */
|
||||
.rack {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
width: min(100%, 24rem);
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.tile--server & {
|
||||
gap: 0.7rem;
|
||||
width: min(100%, 30rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rack__unit {
|
||||
display: grid;
|
||||
position: relative;
|
||||
grid-template-columns: auto auto minmax(0, 1fr) 4.5rem;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
height: 2.4rem;
|
||||
padding-inline: 0.9rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.6rem;
|
||||
background: linear-gradient(180deg, #231e33, #1a1626);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
|
||||
}
|
||||
|
||||
.rack__led {
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
border-radius: 50%;
|
||||
background: var(--pink);
|
||||
box-shadow: 0 0 8px var(--pink);
|
||||
animation: blink 1.6s steps(2, jump-none) infinite;
|
||||
}
|
||||
|
||||
.rack__led--b1,
|
||||
.rack__led--b2,
|
||||
.rack__led--b3,
|
||||
.rack__led--b4,
|
||||
.rack__led--b5 {
|
||||
background: var(--blue-text);
|
||||
box-shadow: 0 0 8px var(--blue-text);
|
||||
}
|
||||
|
||||
.rack__led--2 { animation-duration: 0.9s; }
|
||||
.rack__led--3 { animation-duration: 2.3s; animation-delay: -0.6s; }
|
||||
.rack__led--4 { animation-duration: 1.2s; animation-delay: -0.3s; }
|
||||
.rack__led--b1 { animation-duration: 0.7s; animation-delay: -0.2s; }
|
||||
.rack__led--b2 { animation-duration: 3.1s; }
|
||||
.rack__led--b3 { animation-duration: 1.1s; animation-delay: -0.5s; }
|
||||
.rack__led--b4 { animation-duration: 0.5s; }
|
||||
.rack__led--5 { animation-duration: 1.9s; animation-delay: -1s; }
|
||||
.rack__led--b5 { animation-duration: 0.8s; animation-delay: -0.1s; }
|
||||
|
||||
.rack__vents {
|
||||
height: 0.9rem;
|
||||
border-radius: 2px;
|
||||
background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.09) 0 2px, transparent 2px 6px);
|
||||
}
|
||||
|
||||
.rack__bar {
|
||||
height: 0.3rem;
|
||||
overflow: hidden;
|
||||
border-radius: 9px;
|
||||
background: rgb(255 255 255 / 0.08);
|
||||
}
|
||||
|
||||
.rack__load {
|
||||
display: block;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--fluid);
|
||||
animation: load 5s var(--ease-in-out) infinite alternate;
|
||||
}
|
||||
|
||||
.rack__load--2 { width: 70%; animation-duration: 3.4s; animation-delay: -1s; }
|
||||
.rack__load--3 { width: 25%; animation-duration: 6s; animation-delay: -2.5s; }
|
||||
.rack__load--4 { width: 55%; animation-duration: 4.2s; animation-delay: -0.4s; }
|
||||
.rack__load--5 { width: 35%; animation-duration: 5.5s; animation-delay: -3s; }
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.tile--server .rack__unit {
|
||||
height: 3.1rem;
|
||||
grid-template-columns: auto auto minmax(0, 1fr) 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Network graph */
|
||||
.net {
|
||||
width: min(100%, 24rem);
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.net__links path {
|
||||
fill: none;
|
||||
stroke: rgb(255 255 255 / 0.14);
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.net__flow path {
|
||||
fill: none;
|
||||
stroke: var(--pink);
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 6 100;
|
||||
animation: flow 3s linear infinite;
|
||||
}
|
||||
|
||||
.net__flow path:nth-child(2) { stroke: var(--violet-text); animation-duration: 2.4s; animation-delay: -1.2s; }
|
||||
.net__flow path:nth-child(3) { stroke: var(--white); animation-duration: 3.6s; animation-delay: -0.4s; }
|
||||
.net__flow path:nth-child(4) { stroke: var(--blue-text); animation-duration: 2.8s; animation-delay: -2s; }
|
||||
.net__flow path:nth-child(5) { animation-duration: 4s; animation-delay: -3s; }
|
||||
|
||||
.net__nodes rect {
|
||||
fill: #1e1a2a;
|
||||
stroke: rgb(255 255 255 / 0.25);
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
|
||||
.net__core {
|
||||
fill: var(--bg);
|
||||
stroke: var(--pink);
|
||||
stroke-width: 2;
|
||||
filter: drop-shadow(0 0 8px rgb(255 118 164 / 0.7));
|
||||
}
|
||||
|
||||
/* Shell script */
|
||||
.code {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 1rem 1.1rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: #0f0c16;
|
||||
color: #d9d1e7;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.74rem;
|
||||
line-height: 1.65;
|
||||
white-space: pre;
|
||||
|
||||
& .c { color: var(--faint); }
|
||||
& .k { color: var(--pink-text); }
|
||||
& .s { color: var(--blue-text); }
|
||||
}
|
||||
|
||||
.code__caret {
|
||||
display: inline-block;
|
||||
width: 0.55em;
|
||||
height: 1.15em;
|
||||
margin-left: 0.2em;
|
||||
vertical-align: text-bottom;
|
||||
background: var(--pink-text);
|
||||
animation: blink 1.1s steps(2, jump-none) infinite;
|
||||
}
|
||||
|
||||
/* Bars that keep sorting themselves */
|
||||
.bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.4rem;
|
||||
width: min(100%, 15rem);
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.bars__bar {
|
||||
flex: 1;
|
||||
height: var(--to);
|
||||
border-radius: 0.3rem 0.3rem 0.15rem 0.15rem;
|
||||
background: linear-gradient(180deg, var(--violet-text), var(--blue));
|
||||
animation: sort 7s var(--ease-in-out) infinite;
|
||||
}
|
||||
|
||||
.bars__bar--1 { --from: 70%; --to: 18%; }
|
||||
.bars__bar--2 { --from: 30%; --to: 28%; animation-delay: 0.08s; }
|
||||
.bars__bar--3 { --from: 95%; --to: 38%; animation-delay: 0.16s; }
|
||||
.bars__bar--4 { --from: 18%; --to: 48%; animation-delay: 0.24s; }
|
||||
.bars__bar--5 { --from: 58%; --to: 58%; animation-delay: 0.32s; }
|
||||
.bars__bar--6 { --from: 40%; --to: 70%; animation-delay: 0.4s; }
|
||||
.bars__bar--7 { --from: 82%; --to: 84%; animation-delay: 0.48s; }
|
||||
.bars__bar--8 { --from: 48%; --to: 100%; animation-delay: 0.56s; }
|
||||
|
||||
.bars__bar--3,
|
||||
.bars__bar--8 {
|
||||
background: linear-gradient(180deg, var(--pink), var(--violet));
|
||||
}
|
||||
|
||||
/* Video editor timeline */
|
||||
.edit {
|
||||
--label: 2.2rem;
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
width: 100%;
|
||||
padding: 0.9rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: #0f0c16;
|
||||
}
|
||||
|
||||
.edit__ruler {
|
||||
height: 0.6rem;
|
||||
margin-left: var(--label);
|
||||
background:
|
||||
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 2.5rem),
|
||||
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.09) 0 1px, transparent 1px 0.5rem);
|
||||
}
|
||||
|
||||
.edit__track {
|
||||
position: relative;
|
||||
height: 1.9rem;
|
||||
margin-left: var(--label);
|
||||
border-radius: 0.35rem;
|
||||
background: rgb(255 255 255 / 0.03);
|
||||
}
|
||||
|
||||
.edit__label {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(-1 * var(--label));
|
||||
translate: 0 -50%;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
.edit__clip {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
bottom: 3px;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.edit__clip--title { left: 30%; width: 22%; background: linear-gradient(90deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.55)); }
|
||||
.edit__clip--a { left: 0; width: 34%; background: var(--pink); }
|
||||
.edit__clip--b { left: 34.6%; width: 28%; background: var(--violet); }
|
||||
.edit__clip--c { left: 63.2%; width: 36.8%; background: var(--blue); }
|
||||
|
||||
.edit__clip--wave {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: repeating-linear-gradient(90deg, var(--violet-text) 0 2px, transparent 2px 4px);
|
||||
clip-path: polygon(0.0% 39%, 2.5% 26%, 5.0% 12%, 7.5% 14%, 10.0% 15%, 12.5% 28%, 15.0% 37%, 17.5% 21%, 20.0% 18%, 22.5% 16%, 25.0% 26%, 27.5% 36%, 30.0% 33%, 32.5% 23%, 35.0% 27%, 37.5% 29%, 40.0% 30%, 42.5% 33%, 45.0% 33%, 47.5% 33%, 50.0% 28%, 52.5% 36%, 55.0% 32%, 57.5% 39%, 60.0% 37%, 62.5% 34%, 65.0% 31%, 67.5% 28%, 70.0% 37%, 72.5% 34%, 75.0% 26%, 77.5% 23%, 80.0% 20%, 82.5% 28%, 85.0% 38%, 87.5% 31%, 90.0% 16%, 92.5% 12%, 95.0% 15%, 97.5% 23%, 100.0% 38%, 100.0% 62%, 97.5% 77%, 95.0% 85%, 92.5% 88%, 90.0% 84%, 87.5% 69%, 85.0% 62%, 82.5% 72%, 80.0% 80%, 77.5% 77%, 75.0% 74%, 72.5% 66%, 70.0% 63%, 67.5% 72%, 65.0% 69%, 62.5% 66%, 60.0% 63%, 57.5% 61%, 55.0% 68%, 52.5% 64%, 50.0% 72%, 47.5% 67%, 45.0% 67%, 42.5% 67%, 40.0% 70%, 37.5% 71%, 35.0% 73%, 32.5% 77%, 30.0% 67%, 27.5% 64%, 25.0% 74%, 22.5% 84%, 20.0% 82%, 17.5% 79%, 15.0% 63%, 12.5% 72%, 10.0% 85%, 7.5% 86%, 5.0% 88%, 2.5% 74%, 0.0% 61%);
|
||||
}
|
||||
|
||||
.edit__playhead {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
left: calc(0.9rem + var(--label) + 30%);
|
||||
width: 2px;
|
||||
background: var(--pink-text);
|
||||
box-shadow: 0 0 12px var(--pink);
|
||||
animation: playhead 8s linear infinite;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -5px;
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
border-radius: 2px 2px 6px 6px;
|
||||
background: var(--pink-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user