Something went wrong. Try again.
The latest iteration of my personal site. ethana.dev
Something went wrong. Try again.
3.7 kB · 183 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184header { display: flex; align-items: center; max-width: 31.25rem; margin: 8vw auto 1rem; padding: 0 1rem; justify-content: unset; background-color: unset;}
nav { display: flex; margin: 0 0 0 auto;
& a { display: flex; margin: 0 0 0 auto; position: relative; isolation: isolate;
&::before { content: ""; position: absolute; inset: calc(-0.75rem - 2px); border: 2px solid transparent; background-color: transparent; transition: background-color 0.25s ease-out, border-color 0.25s ease-out; z-index: -1; border-radius: 50%; }
&:hover::before, &:focus-visible::before { background-color: var(--colour-green); border-color: var(--border-colour); }
&:hover svg, &:focus-visible svg { fill: var(--colour-black); } }
& svg { width: 2rem; height: 2rem; fill: var(--icon-fill-colour); }}
main { display: flex; flex-direction: column; max-width: 31.25rem; margin: 0 auto 8vw; padding: 0 1rem;}
h1 { font-weight: 500; margin: 0;}
ul { list-style: none; padding: 0;}
li { border: 0.1rem solid var(--border-colour); transition: background-color 0.2s ease-out;
& a { display: flex; align-items: center; gap: 1rem; padding: 1rem; width: 100%; color: var(--colour-black); text-decoration: none; font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem);
& svg { width: 2rem; height: 2rem; }
& svg:last-of-type { margin: 0 0 0 auto; width: 1.6rem; height: 1.6rem; transition: transform 0.2s ease-in-out; } }
& + li { border-top: none; }
&:hover, &:focus-within { background-color: var(--colour-black);
& a { color: var(--colour-white); }
svg { fill: var(--colour-white); }
& svg:last-of-type { transform: translateX(4px); } }}
.blog-link { background-color: var(--colour-purple);}
.notes-link { background-color: var(--colour-yellow);}
.tags-link { background-color: var(--colour-blue);}
.theme-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem);
&[hidden] { display: none; }}
.theme-options { display: flex; margin: 0 0 0 auto; border: 2px solid var(--border-colour); border-radius: 30px; overflow: hidden;
& label { padding: 0.375rem 0.75rem; cursor: pointer; transition: background-color 0.2s ease-out; } & label + label { border-left: 2px solid var(--border-colour); } & label:hover { background-color: var(--surface-colour); } & label:has(:checked) { background-color: var(--text-colour); color: var(--background-colour); } & label:has(:focus-visible) { outline: 3px solid var(--border-colour); outline-offset: -6px; } & label:has(:checked:focus-visible) { outline-color: var(--background-colour); }
/* Visually hidden but still focusable, so arrow keys move between options */ & input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }}