chore: split out styles + only load where needed
This commit is contained in:
parent
37db7d35d6
commit
0e65983a19
28 changed files with 250 additions and 287 deletions
|
|
@ -1,94 +1,3 @@
|
|||
:root {
|
||||
/* colors */
|
||||
--blue-50: #eff5ff;
|
||||
--blue-100: #dbe8fe;
|
||||
--blue-200: #bfd7fe;
|
||||
--blue-300: #93bbfd;
|
||||
--blue-400: #609afa;
|
||||
--blue-500: #3b82f6;
|
||||
--blue-600: #2570eb;
|
||||
--blue-700: #1d64d8;
|
||||
--blue-800: #1e55af;
|
||||
--blue-900: #1e478a;
|
||||
--blue-950: #172e54;
|
||||
|
||||
--gray-50: #f6f7f8;
|
||||
--gray-100: #eaecef;
|
||||
--gray-200: #d9dee4;
|
||||
--gray-300: #b8c2cc;
|
||||
--gray-400: #a0adba;
|
||||
--gray-500: #8996a8;
|
||||
--gray-600: #778399;
|
||||
--gray-700: #6b748a;
|
||||
--gray-800: #5a6173;
|
||||
--gray-900: #4b515d;
|
||||
--gray-950: #30333b;
|
||||
|
||||
--white: #fff;
|
||||
--black: #000;
|
||||
|
||||
--brand-github: #333;
|
||||
--brand-github-light: #f5f5f5;
|
||||
--brand-proton: #6d4aff;
|
||||
--brand-mastodon: #6364ff;
|
||||
--brand-lastfm: #d51007;
|
||||
--brand-trakt: #ed1c24;
|
||||
--brand-storygraph: #14919b;
|
||||
--brand-buy-me-a-coffee: #ffdd00;
|
||||
--brand-rss: #f26522;
|
||||
--webrings: #ec8fd0;
|
||||
|
||||
/* fonts */
|
||||
--font-sans: silka, Inter, Roboto, 'Helvetica Neue', system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, monospace;
|
||||
|
||||
/* text */
|
||||
--font-size-xs: .75rem;
|
||||
--line-height-xs: 1rem;
|
||||
|
||||
--font-size-sm: .875rem;
|
||||
--line-height-sm: 1.25rem;
|
||||
|
||||
--font-size-base: 1rem;
|
||||
--line-height-base: 1.5rem;
|
||||
|
||||
--font-size-lg: 1.125rem;
|
||||
--line-height-lg: 1.75rem;
|
||||
|
||||
--font-size-xl: 1.25rem;
|
||||
--line-height-xl: 1.75rem;
|
||||
|
||||
--font-size-2xl: 1.5rem;
|
||||
--line-height-2xl: 2rem;
|
||||
|
||||
--font-size-3xl: 1.875rem;
|
||||
--line-height-3xl: 2.25rem;
|
||||
|
||||
/* radii */
|
||||
--rounded-none: 0;
|
||||
--rounded-sm: .125rem;
|
||||
--rounded: .25rem;
|
||||
--rounded-md: .375rem;
|
||||
--rounded-lg: .5rem;
|
||||
--rounded-full: 9999px;
|
||||
|
||||
/* transitions */
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* svgs */
|
||||
--stroke-width-default: 1.4;
|
||||
--stroke-width-bold: 2;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: var(--font-sans);
|
||||
|
|
@ -240,45 +149,21 @@ nav ul li:last-child {
|
|||
stroke: var(--blue-600);
|
||||
}
|
||||
|
||||
.active:hover svg,
|
||||
.active svg:hover {
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
|
||||
.at svg {
|
||||
stroke: var(--brand-proton) !important;
|
||||
}
|
||||
|
||||
.brand-github svg {
|
||||
stroke: var(--brand-github) !important;
|
||||
}
|
||||
|
||||
.brand-mastodon svg {
|
||||
stroke: var(--brand-mastodon) !important;
|
||||
}
|
||||
|
||||
.brand-lastfm svg {
|
||||
stroke: var(--brand-lastfm) !important;
|
||||
}
|
||||
|
||||
.device-tv svg {
|
||||
stroke: var(--brand-trakt) !important;
|
||||
}
|
||||
|
||||
.books svg {
|
||||
stroke: var(--brand-storygraph) !important;
|
||||
}
|
||||
|
||||
.cup svg {
|
||||
stroke: var(--brand-buy-me-a-coffee) !important;
|
||||
}
|
||||
|
||||
.heart-handshake svg {
|
||||
stroke: var(--webrings) !important;
|
||||
}
|
||||
|
||||
.rss svg {
|
||||
stroke: var(--brand-rss) !important;
|
||||
}
|
||||
/* social icons */
|
||||
.at svg { stroke: var(--brand-proton) !important; }
|
||||
.brand-github svg { stroke: var(--brand-github) !important; }
|
||||
.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
|
||||
.brand-lastfm svg { stroke: var(--brand-lastfm) !important; }
|
||||
.device-tv svg { stroke: var(--brand-trakt) !important; }
|
||||
.books svg { stroke: var(--brand-storygraph) !important; }
|
||||
.cup svg { stroke: var(--brand-buy-me-a-coffee) !important; }
|
||||
.heart-handshake svg { stroke: var(--webrings) !important; }
|
||||
.rss svg { stroke: var(--brand-rss) !important; }
|
||||
|
||||
/* layout */
|
||||
.default__wrapper {
|
||||
|
|
@ -415,32 +300,8 @@ article time {
|
|||
line-height: var(--line-height-sm);
|
||||
}
|
||||
|
||||
/* statistics */
|
||||
.post-graph {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.post-graph__wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2rem;
|
||||
margin-bottom: .375rem;
|
||||
}
|
||||
|
||||
.post-graph__progress {
|
||||
background-color: var(--blue-600);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.post-graph__year {
|
||||
font-family: var(--font-mono)
|
||||
}
|
||||
|
||||
.post-graph__progress,
|
||||
.post-graph__data {
|
||||
margin-left: .625rem;
|
||||
.eleventy-plugin-youtube-embed {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
|
|
@ -1071,8 +932,14 @@ footer nav {
|
|||
|
||||
/* shared styles */
|
||||
.media__grid .item__wrapper:hover,
|
||||
.media__grid .item__wrapper:focus,
|
||||
.media__grid .item__wrapper:active,
|
||||
.webmentions .interaction .avatar__wrapper:hover,
|
||||
.webmentions .interaction .comment__wrapper:hover .avatar__wrapper {
|
||||
.webmentions .interaction .avatar__wrapper:focus,
|
||||
.webmentions .interaction .avatar__wrapper:active,
|
||||
.webmentions .interaction .comment__wrapper:hover .avatar__wrapper,
|
||||
.webmentions .interaction .comment__wrapper:focus .avatar__wrapper
|
||||
.webmentions .interaction .comment__wrapper:active .avatar__wrapper {
|
||||
border-color: var(--blue-200);
|
||||
}
|
||||
|
||||
|
|
|
|||
Reference in a new issue