Use lightningcss

This commit is contained in:
Jonny Barnes 2025-04-10 16:53:23 +01:00
parent 1fe9a42d8d
commit 540bd17792
Signed by: jonny
SSH key fingerprint: SHA256:CTuSlns5U7qlD9jqHvtnVmfYV3Zwl2Z7WnJ4/dqOaL8
36 changed files with 728 additions and 252 deletions

View file

@ -1,8 +1,2 @@
@import url('variables.css');
@import url('fonts.css');
@import url('layout.css');
@import url('colours.css');
@import url('code.css');
@import url('content.css');
@import url('notes.css');
@import url('indieauth.css');
:root{--font-family-headings:"Rockwell","Rockwell Nova","Roboto Slab","DejaVu Serif","Sitka Small",serif;--font-family-body:"Charter","Bitstream Charter","Sitka Text","Cambria",serif;--font-family-monospace:ui-monospace,"Cascadia Code","Source Code Pro","Menlo","Consolas","DejaVu Sans Mono",monospace;--font-size-sm:.75rem;--font-size-base:1rem;--font-size-md:1.25rem;--font-size-lg:1.5rem;--font-size-xl:1.75rem;--font-size-xxl:2rem;--font-size-xxxl:2.25rem;--color-primary:oklch(36.8% .1 125.505);--color-secondary:oklch(96.3% .1 125.505);--color-link:oklch(48.09% .146 241.41);--color-link-visited:oklch(70.44% .21 304.41);--color-primary-shadow:oklch(19.56% .054 125.505/.4);--rss-color-link:oklch(67.59% .189 42.04);--color-danger:oklch(64.41% .281 23.29);--color-danger-shadow:oklch(64.41% .281 23.29/.1)}body{font-family:var(--font-family-body);font-size:var(--font-size-md)}code{font-family:var(--font-family-monospace)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-headings)}.grid{grid-template-rows:min-content 1fr min-content;grid-template-columns:5vw 1fr 5vw;row-gap:1rem;display:grid}#site-header{grid-area:1/2/2/3;& .rss-icon{& svg{width:auto;height:1rem}}}main{grid-area:2/2/3/3}.h-feed{flex-direction:column;gap:2rem;display:flex}.h-entry{& p:first-of-type,& h1:first-of-type{margin-block-start:0}}.pagination{margin-block-start:1rem}footer{grid-area:3/2/4/3;& .iwc-logo{max-width:85vw}& .footer-actions{flex-direction:row;gap:1rem;display:flex}}body{background-color:var(--color-secondary);color:var(--color-primary)}a{color:var(--color-link);&:visited{color:var(--color-link-visited)}&.auth:visited{color:var(--color-link)}}#site-header{& a:visited{color:var(--color-link)}& .rss-icon{& svg{color:var(--rss-color-link)}}}.hljs{border-radius:.5rem}.h-card{& .hovercard{z-index:100;box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);background-color:var(--color-secondary);opacity:0;border-radius:1rem;flex-direction:column;gap:.5rem;width:fit-content;padding:1rem;transition:opacity .5s ease-in-out;display:none;position:absolute;& .u-photo{max-width:6rem}& .social-icon{width:1rem;height:1rem}}&:hover{& .hovercard{opacity:1;display:flex}}}.h-entry{border-inline-start:1px solid var(--color-primary);padding-inline-start:.5rem;& .reply-to{font-style:italic}& .post-info{& a{text-decoration:none}}& .note-metadata{flex-direction:row;gap:1rem;display:flex;& .replies,& .likes,& .reposts{flex-direction:row;align-items:center;gap:.5rem;display:inline-flex}& .syndication-links{flex-flow:wrap;& a{text-decoration:none;& svg{width:1rem;height:1rem}}}}}.feather{stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;fill:none;width:24px;height:24px}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}main{&>.u-comment{border-inline-start:1px solid var(--color-primary);margin-block-start:2rem;margin-inline-start:2rem;padding-inline-start:.5rem;& .mini-h-card{flex-direction:row;align-items:baseline;display:inline-flex;& .u-photo{border-radius:50%;width:2rem;height:2rem;margin-block-end:.5rem}}}& .notes-subtitle{font-size:1.2rem;font-weight:600}& .webmentions-author-list{flex-flow:wrap;gap:1rem;display:flex;& img{border-radius:50%;width:4rem;height:4rem}}}.indieauth{& .error{color:var(--color-danger);background-color:var(--color-danger-shadow);border:1px solid var(--color-danger);border-radius:.5rem;width:fit-content;margin-block-end:1rem;padding-block:.5rem;padding-inline:1rem;display:flex}}
/*# sourceMappingURL=/assets/css/app.css.map */

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -1,3 +0,0 @@
.hljs {
border-radius: .5rem;
}

View file

@ -1,28 +0,0 @@
body {
background-color: var(--color-secondary);
color: var(--color-primary);
}
a {
color: var(--color-link);
&:visited {
color: var(--color-link-visited);
}
&.auth:visited {
color: var(--color-link);
}
}
#site-header {
& a:visited {
color: var(--color-link);
}
& .rss-icon {
& svg {
color: var(--rss-color-link);
}
}
}

Binary file not shown.

Binary file not shown.

View file

@ -1,64 +0,0 @@
@import url('h-card.css');
.h-entry {
border-inline-start: 1px solid var(--color-primary);
padding-inline-start: .5rem;
& .reply-to {
font-style: italic;
}
& .post-info {
& a {
text-decoration: none;
}
}
& .note-metadata {
display: flex;
flex-direction: row;
gap: 1rem;
& .replies,
& .likes,
& .reposts {
display: inline-flex;
flex-direction: row;
gap: .5rem;
align-items: center;
}
& .syndication-links {
flex-flow: row wrap;
& a {
text-decoration: none;
& svg {
width: 1rem;
height: 1rem;
}
}
}
}
}
.feather {
width: 24px;
height: 24px;
stroke: currentcolor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

Binary file not shown.

Binary file not shown.

View file

@ -1,17 +0,0 @@
body {
font-family: var(--font-family-body);
font-size: var(--font-size-md);
}
code {
font-family: var(--font-family-monospace);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-family-headings);
}

Binary file not shown.

Binary file not shown.

View file

@ -1,32 +0,0 @@
.h-card {
& .hovercard {
display: none;
position: absolute;
z-index: 100;
padding: 1rem;
border-radius: 1rem;
box-shadow: 0 .5rem .5rem .5rem var(--color-primary-shadow);
background-color: var(--color-secondary);
width: fit-content;
transition: opacity 0.5s ease-in-out;
opacity: 0;
flex-direction: column;
gap: .5rem;
& .u-photo {
max-width: 6rem;
}
& .social-icon {
width: 1rem;
height: 1rem;
}
}
&:hover {
& .hovercard {
display: flex;
opacity: 1;
}
}
}

Binary file not shown.

Binary file not shown.

View file

@ -1,13 +0,0 @@
.indieauth {
.error {
color: var(--color-danger);
background-color: var(--color-danger-shadow);
border: 1px solid var(--color-danger);
border-radius: .5rem;
display: flex;
padding-inline: 1rem;
padding-block: .5rem;
width: fit-content;
margin-block-end: 1rem;
}
}

Binary file not shown.

Binary file not shown.

View file

@ -1,55 +0,0 @@
.grid {
display: grid;
grid-template-columns: 5vw 1fr 5vw;
grid-template-rows: min-content 1fr min-content;
row-gap: 1rem;
}
#site-header {
grid-column: 2 / 3;
grid-row: 1 / 2;
& .rss-icon {
& svg {
width: auto;
height: 1rem;
}
}
}
main {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.h-feed {
display: flex;
flex-direction: column;
gap: 2rem;
}
.h-entry {
& p:first-of-type,
& h1:first-of-type {
margin-block-start: 0;
}
}
.pagination {
margin-block-start: 1rem;
}
footer {
grid-column: 2 / 3;
grid-row: 3 / 4;
& .iwc-logo {
max-width: 85vw;
}
& .footer-actions {
display: flex;
flex-direction: row;
gap: 1rem;
}
}

Binary file not shown.

Binary file not shown.

View file

@ -1,38 +0,0 @@
main {
& > .u-comment {
margin-block-start: 2rem;
margin-inline-start: 2rem;
border-inline-start: 1px solid var(--color-primary);
padding-inline-start: .5rem;
& .mini-h-card {
display: inline-flex;
flex-direction: row;
align-items: baseline;
& .u-photo {
width: 2rem;
height: 2rem;
border-radius: 50%;
margin-block-end: 0.5rem;
}
}
}
& .notes-subtitle {
font-size: 1.2rem;
font-weight: 600;
}
& .webmentions-author-list {
display: flex;
flex-flow: row wrap;
gap: 1rem;
& img {
width: 4rem;
height: 4rem;
border-radius: 50%;
}
}
}

Binary file not shown.

Binary file not shown.

View file

@ -1,25 +0,0 @@
:root {
/* Font Family */
--font-family-headings: 'Rockwell', 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
--font-family-body: 'Charter', 'Bitstream Charter', 'Sitka Text', 'Cambria', serif;
--font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', monospace;
/* Font Size */
--font-size-sm: 0.75rem; /* 12px */
--font-size-base: 1rem; /* 16px, base */
--font-size-md: 1.25rem; /* 20px */
--font-size-lg: 1.5rem; /* 24px */
--font-size-xl: 1.75rem; /* 28px */
--font-size-xxl: 2rem; /* 32px */
--font-size-xxxl: 2.25rem; /* 36px */
/* Colours */
--color-primary: oklch(36.8% 0.1 125.505deg);
--color-secondary: oklch(96.3% 0.1 125.505deg);
--color-link: oklch(48.09% 0.146 241.41deg);
--color-link-visited: oklch(70.44% 0.21 304.41deg);
--color-primary-shadow: oklch(19.56% 0.054 125.505deg / 40%);
--rss-color-link: oklch(67.59% 0.189 42.04deg);
--color-danger: oklch(64.41% 0.281 23.29deg);
--color-danger-shadow: oklch(64.41% 0.281 23.29deg / 10%);
}

Binary file not shown.

Binary file not shown.