Use lightningcss
This commit is contained in:
parent
1fe9a42d8d
commit
540bd17792
36 changed files with 728 additions and 252 deletions
|
@ -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.
1
public/assets/css/app.css.map
Normal file
1
public/assets/css/app.css.map
Normal file
File diff suppressed because one or more lines are too long
BIN
public/assets/css/app.css.map.br
Normal file
BIN
public/assets/css/app.css.map.br
Normal file
Binary file not shown.
BIN
public/assets/css/app.css.map.zst
Normal file
BIN
public/assets/css/app.css.map.zst
Normal file
Binary file not shown.
Binary file not shown.
|
@ -1,3 +0,0 @@
|
|||
.hljs {
|
||||
border-radius: .5rem;
|
||||
}
|
|
@ -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.
|
@ -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.
|
@ -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.
|
@ -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.
|
@ -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.
|
@ -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.
|
@ -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.
|
@ -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.
Loading…
Add table
Add a link
Reference in a new issue