Something went wrong. Try again.
The latest iteration of my personal site. ethana.dev
Something went wrong. Try again.
8.2 kB · 387 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388/* Global stylesheet */* { box-sizing: border-box;}
html,body { padding: 0; margin: 0 auto; font-family: var(--font-family); color: var(--text-colour); background-color: var(--background-colour);}
p:last-child { margin-bottom: 0;}p { line-height: 1.5;}
li { line-height: 1.5;}
a { color: var(--text-colour-link);}
:focus-visible { outline: 3px solid var(--border-colour); outline-offset: 3px;}
.fat-hover-link[href] { color: var(--text-colour-header); text-decoration: unset; background-image: linear-gradient( 120deg, var(--hover-link-background-colour), var(--hover-link-background-colour) ); background-size: 100% 0.05em; background-position: 0 90%; background-repeat: no-repeat; transition: background-size 0.1s ease-in, color 0.1s ease-in;}.fat-hover-link[href]:hover,.fat-hover-link[href]:active,.fat-hover-link[href]:focus { background-size: 100% 100%; color: var(--hover-link-text-colour); text-decoration: unset;}
header:after { content: ""; display: table; clear: both;}
.links-nextprev { display: flex; list-style: none; border-top: 2px solid var(--border-colour); padding: 1em 0;}.links-nextprev a { font-weight: 500;}.links-nextprev a:last-of-type { margin: 0 0 0 auto;}
table { margin: 1em 0;}table td,table th { padding-right: 1em;}
pre,code { font-family: var(--font-family-monospace);}pre:not([class*="language-"]) { margin: 0.5em 0; line-height: 1.375; /* 22px /16 */ -moz-tab-size: var(--syntax-tab-size); -o-tab-size: var(--syntax-tab-size); tab-size: var(--syntax-tab-size); -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal;}code { word-break: break-all;}
header { display: flex; justify-content: center; background-color: var(--header-colour);}.header-content { display: flex; flex-direction: column; width: 100%; margin: 8vw; max-width: 900px;}
footer { display: flex; justify-content: center; font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem); font-weight: 500; margin: 12vw 8vw 6vw 8vw;
& p { font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem); font-weight: 500; margin: 0; line-height: 1.5; color: var(--subtle-text-colour); }}.footer-content { max-width: 900px; display: flex; align-items: center; width: 100%;}.footer-links { display: flex; gap: 0.75rem; margin: 0 0 0 auto;
& a { display: flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 50%; background-color: transparent; border: 2px solid transparent; transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
& svg { width: 2rem; height: 2rem; fill: var(--icon-fill-colour); transition: fill 0.25s ease; }
&:hover, &:focus-visible { transform: translateY(-3px); border-color: var(--border-colour); } }
& a:nth-child(1):hover, & a:nth-child(1):focus-visible { background-color: var(--colour-purple);
& svg { fill: var(--colour-black); } } & a:nth-child(2):hover, & a:nth-child(2):focus-visible { background-color: var(--colour-orange);
& svg { fill: var(--colour-black); } } & a:nth-child(3):hover, & a:nth-child(3):focus-visible { background-color: rgb(15, 115, 255);
& svg { fill: var(--colour-white); } } & a:nth-child(4):hover, & a:nth-child(4):focus-visible { background-color: var(--colour-black);
& svg { fill: var(--colour-white); } } & a:nth-child(5):hover, & a:nth-child(5):focus-visible { background-color: rgb(10, 102, 194);
& svg { fill: var(--colour-white); } }}
@media (max-width: 768px) { .footer-content { flex-direction: column; gap: 1.5rem; } .footer-links { flex-wrap: wrap; justify-content: center; margin: 0 auto; }}
.postlist { padding: 0; margin: 0; display: grid; gap: clamp(1.88rem, 1.32rem + 3.2vw, 3.12rem); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));}.postlist-item { display: flex; flex-direction: column; padding: clamp(1.25rem, 0.6855rem + 3.2258vw, 2.5rem); border: 2px solid var(--border-colour); color: var(--colour-black); text-decoration: unset; transition: box-shadow 0.1s ease-out;}.postlist-item:hover,.postlist-item:focus { text-decoration: none;}.postlist-item:nth-child(4n-7) { background-color: var(--colour-green); box-shadow: 10px 10px 0px 0px var(--postlist-item-background-one-colour);
&:hover, &:focus { box-shadow: none; }}.postlist-item:nth-child(4n-6) { background-color: var(--colour-purple); box-shadow: 10px 10px 0px 0px var(--postlist-item-background-two-colour);
&:hover, &:focus { box-shadow: none; }}.postlist-item:nth-child(4n-5) { background-color: var(--colour-blue); box-shadow: 10px 10px 0px 0px var(--postlist-item-background-three-colour);
&:hover, &:focus { box-shadow: none; }}.postlist-item:nth-child(4n-4) { background-color: var(--colour-red); box-shadow: 10px 10px 0px 0px var(--postlist-item-background-four-colour);
&:hover, &:focus { box-shadow: none; }}.post-title { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: clamp(1rem, 0.6048rem + 2.2581vw, 1.875rem); font-weight: 500; margin: 0;}.post-date { margin: 1.25rem 0 0 auto; font-weight: 400; font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem);}
/* Year headings on the blog and notes pages, with a diamond signpost */.year-heading { display: flex; align-items: center; gap: clamp(0.875rem, 0.6rem + 1vw, 1.25rem);
&::before { content: ""; flex-shrink: 0; box-sizing: border-box; width: 0.55em; height: 0.55em; rotate: 45deg; border: 2px solid var(--colour-black); background-color: var(--colour-yellow); }}
/* Tags */.post-tag { text-transform: capitalize; font-weight: 500; border: 2px solid var(--border-colour); color: var(--colour-black); padding: 0.5rem 1rem; border-radius: 30px; text-decoration: unset; background-color: var(--colour-purple); transition: background-color 0.2s ease-out;}.post-tag:hover,.post-tag:focus { background-color: var(--colour-black); color: var(--colour-white);}.postlist-item > .post-tag { align-self: center;}
/* Tags list */.post-metadata { display: inline-flex; flex-wrap: wrap; gap: 1.2em; list-style: none; padding: 0; margin: 0; margin-bottom: 2rem;}.post-metadata time { margin-right: 1em;}
/* Direct Links / Markdown Headers */.header-anchor { text-decoration: none; font-style: normal; font-size: 1em; margin-left: 0.1em;}a[href].header-anchor,a[href].header-anchor:visited { color: transparent;}a[href].header-anchor:focus,a[href].header-anchor:hover { text-decoration: underline;}a[href].header-anchor:focus,:hover > a[href].header-anchor { color: var(--text-colour);}
h2 + .header-anchor { font-size: 1.5em;}
@view-transition { navigation: auto;}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }}