Something went wrong. Try again.
The latest iteration of my personal site. ethana.dev
Something went wrong. Try again.
2.3 kB · 119 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120header { 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(--colour-black); } }
& svg { width: 2rem; height: 2rem; }}
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%; 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; } }
&:last-of-type { 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);}
.tags-link { background-color: var(--colour-blue);}