Something went wrong. Try again.
The latest iteration of my personal site. ethana.dev
Something went wrong. Try again.
1.7 kB · 69 lines
CSS
at master
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970.header-content .header-nav { display: flex; align-items: center; margin-bottom: clamp(1.25rem, 0.261rem + 5.6516vw, 3.44rem);
& a { display: flex; }
& a:last-of-type { 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); }}.header-content .home-link { color: var(--subtle-text-colour); font-size: clamp(1rem, 0.6048rem + 2.2581vw, 1.875rem); text-decoration: none; font-weight: 500;}.header-content .home-link:hover,.header-content .home-link:focus { text-decoration: underline;}.header-content h1 { color: var(--text-colour-header); font-family: var(--secondary-font-family); font-weight: 700; font-size: clamp(1.875rem, 1.0282rem + 4.8387vw, 3.75rem); margin: 0;}.header-content p,.header-content time { color: var(--subtle-text-colour); font-size: clamp(1rem, 0.6048rem + 2.2581vw, 1.875rem); font-weight: 500; margin: 1.87rem 0 0 0;}