feat: move css to own directory
This commit is contained in:
Devin Haska
parent
598102a7ec
commit
449d650b75
21 changed files with 5 additions and 4 deletions
|
|
@ -1,11 +0,0 @@
|
|||
.archive-divider {
|
||||
border-color: var(--color-surface);
|
||||
border-width: 1px;
|
||||
border-style: dashed;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.archive-date {
|
||||
color: var(--color-fadeText);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
.catalogue-type {
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.catalogue-meta {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.catalogue source,
|
||||
.catalogue img {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.categories {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.categories li {
|
||||
--text-color: var(--color-fadeText);
|
||||
}
|
||||
|
||||
.categories > li > a {
|
||||
color: var(--text-color);
|
||||
text-decoration-color: var(--text-color);
|
||||
}
|
||||
|
||||
.categories li:has(a:hover) {
|
||||
--text-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.categories > li > a::before {
|
||||
content: "#";
|
||||
color: var(--text-color);
|
||||
user-select: none;
|
||||
transition: color var(--transition-duration);
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.date {
|
||||
color: var(--color-fadeText);
|
||||
}
|
||||
|
||||
.date svg {
|
||||
color: var(--color-shadow);
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.pill {
|
||||
background-color: var(--color-surface);
|
||||
border-radius: 1rem;
|
||||
transition: transform var(--transition-duration);
|
||||
}
|
||||
|
||||
.pill:hover {
|
||||
background-color: var(--color-text);
|
||||
color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.pill:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
a.pill {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pill-count {
|
||||
color: var(--color-fadeText);
|
||||
}
|
||||
|
||||
.pill:hover .pill-count {
|
||||
color: var(--color-border);
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
/* Adapted from the Tokyo Night theme on GitHub
|
||||
* https://github.com/folke/tokyonight.nvim/blob/main/extras/prism/tokyonight_night.js
|
||||
*/
|
||||
|
||||
pre:has(code) {
|
||||
background-color: #1a1b26;
|
||||
border-radius: 0.5em;
|
||||
padding: 1em;
|
||||
color: #c0caf5;
|
||||
}
|
||||
|
||||
.token.prolog,
|
||||
.token.builtin {
|
||||
color: #f7768e;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #7aa2f7;
|
||||
}
|
||||
|
||||
.token.symbol {
|
||||
color: #2ac3de;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #bb9af7;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.tag,
|
||||
.token.selector {
|
||||
color: #9ece6a;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #9d7cd8;
|
||||
}
|
||||
|
||||
.token.operator {
|
||||
color: #89ddff;
|
||||
}
|
||||
|
||||
.token.constant,
|
||||
.token.boolean {
|
||||
color: #ff9e64;
|
||||
}
|
||||
|
||||
.token.variable {
|
||||
color: #c0caf5;
|
||||
}
|
||||
|
||||
.token.comment {
|
||||
color: #565f89;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #73daca;
|
||||
}
|
||||
|
||||
.token.class-name {
|
||||
color: #ff757f;
|
||||
}
|
||||
|
||||
.token.plain-text {
|
||||
color: #c0caf5;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.footer {
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer-socials {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media (min-width: 32rem) {
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.footer-pages ul {
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
.site-logo {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.site-logo .wordmark {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-logo .wordmark > span {
|
||||
text-shadow:
|
||||
-1px 1px 0 var(--shadow-color),
|
||||
0 1px 0 var(--shadow-color),
|
||||
-1px -1px 0 var(--shadow-color),
|
||||
1px -1px 0 var(--shadow-color),
|
||||
1px 1px 0 var(--shadow-color),
|
||||
-1px 2px 0 var(--shadow-color),
|
||||
0px 2px 0 var(--shadow-color),
|
||||
1px 2px 0 var(--shadow-color),
|
||||
-1px 3px 0 var(--shadow-color),
|
||||
0px 3px 0 var(--shadow-color),
|
||||
1px 3px 0 var(--shadow-color);
|
||||
color: var(--color-white);
|
||||
font-family: var(--font-family-display);
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: -0.05em;
|
||||
transition: transform var(--transition-duration);
|
||||
}
|
||||
|
||||
.site-logo .wordmark > span:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.site-logo .wordmark > :nth-child(1) {
|
||||
--shadow-color: var(--color-shadow);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.site-logo .wordmark > :nth-child(2) {
|
||||
--shadow-color: var(--color-primary);
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.navbar {
|
||||
backdrop-filter: blur(3px);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--color-background) 60%,
|
||||
transparent
|
||||
);
|
||||
background-image: linear-gradient(var(--color-background) 20%, transparent);
|
||||
container: navbar / inline-size;
|
||||
padding-block: 1.5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.navbar .links {
|
||||
list-style-type: none;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@import "global/reset.css";
|
||||
@import "global/variables.css";
|
||||
|
||||
@import "global/global-styles.css";
|
||||
|
||||
@import-glob "blocks/*.css";
|
||||
@import-glob "utils/*.css";
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
/*
|
||||
Global styles
|
||||
|
||||
Low-specificity, global styles that apply to the whole
|
||||
project: https://cube.fyi/css.html
|
||||
*/
|
||||
html {
|
||||
scrollbar-color: var(--color-primary) var(--color-indiglo-800);
|
||||
}
|
||||
|
||||
body {
|
||||
accent-color: var(--color-primary);
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-family-body);
|
||||
font-size: 1.125rem;
|
||||
font-weight: var(--font-weight-body-regular);
|
||||
letter-spacing: -0.03rem;
|
||||
line-height: 2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-family-display);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: var(--font-weight-display-extrabold);
|
||||
letter-spacing: -0.05rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: var(--font-weight-display-bold);
|
||||
letter-spacing: -0.05rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: var(--font-weight-display-bold);
|
||||
letter-spacing: -0.05rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: var(--font-weight-display-bold);
|
||||
letter-spacing: -0.05rem;
|
||||
line-height: 1.125rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
text-decoration-color: var(--color-primary);
|
||||
text-decoration-thickness: 2px;
|
||||
transition:
|
||||
color var(--transition-duration),
|
||||
text-decoration-color var(--transition-duration);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
text-decoration-color: var(--color-shadow);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active,
|
||||
a:focus-visible {
|
||||
color: var(--color-primary);
|
||||
text-decoration-color: var(--color-primary);
|
||||
}
|
||||
|
||||
ul li::marker {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
ol li::marker {
|
||||
color: var(--color-fadeText);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 2px solid var(--color-primary);
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding-inline: 1rem;
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
blockquote > * + * {
|
||||
margin-block-start: 1rem;
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid;
|
||||
outline-color: var(--color-primary);
|
||||
outline-offset: 0.3ch;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
abbr {
|
||||
text-decoration-color: var(--color-primary);
|
||||
}
|
||||
|
||||
img[width][height] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-style: solid;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-border);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 0.5em;
|
||||
padding-block: 0.15em;
|
||||
padding-inline: 0.25em;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
color: var(--color-fadeText);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.125rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
picture source,
|
||||
picture img {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html:focus-within {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Prevent font size inflation */
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Remove default margin in favour of better control in authored CSS */
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
ul[role="list"],
|
||||
ol[role="list"] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Set shorter line heights on headings and interactive elements */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
button,
|
||||
input,
|
||||
label {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Balance text wrapping on headings */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny */
|
||||
textarea:not([rows]) {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
/* Anything that has been anchored to should have extra scroll margin */
|
||||
:target {
|
||||
scroll-margin-block: 5ex;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/* Global variables */
|
||||
:root {
|
||||
--transition-duration: 250ms;
|
||||
--transition-timing: ease;
|
||||
|
||||
--color-white: white;
|
||||
--color-black: black;
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
/*
|
||||
* Implementation sourced from eleventyone starter kit
|
||||
* https://github.com/philhawksworth/eleventyone
|
||||
* ---
|
||||
* https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
|
||||
*/
|
||||
|
||||
const fs = require("fs");
|
||||
const postcss = require("postcss");
|
||||
const postcssImport = require("postcss-import");
|
||||
const postcssImportExtGlob = require("postcss-import-ext-glob");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const cssnano = require("cssnano");
|
||||
const path = require("path").posix;
|
||||
|
||||
module.exports = class {
|
||||
async data() {
|
||||
const rawFilepath = path.join(__dirname, "./global.css");
|
||||
const rawCss = fs.readFileSync(rawFilepath);
|
||||
|
||||
return {
|
||||
permalink: `assets/css/styles.css`,
|
||||
rawFilepath,
|
||||
rawCss,
|
||||
};
|
||||
}
|
||||
|
||||
async render({ rawCss, rawFilepath }) {
|
||||
return await postcss([
|
||||
postcssImportExtGlob,
|
||||
postcssImport,
|
||||
autoprefixer,
|
||||
cssnano,
|
||||
])
|
||||
.process(rawCss, { from: rawFilepath })
|
||||
.then((result) => result.css);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/*
|
||||
* FLOW UTILITY
|
||||
* Like the Every Layout stack: https://every-layout.dev/layouts/stack/
|
||||
* Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
|
||||
*/
|
||||
.flow > * + * {
|
||||
margin-block-start: var(--flow-space, 1em);
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.list-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.list-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.list-decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/*
|
||||
* VISUALLY HIDDEN UTILITY
|
||||
* Info: https://piccalil.li/quick-tip/visually-hidden/
|
||||
*/
|
||||
.visually-hidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* WRAPPER
|
||||
* Sets a max width, adds a consistent gutter and horizontally
|
||||
* centers the contents
|
||||
* https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
|
||||
*/
|
||||
.wrapper {
|
||||
width: 90vw;
|
||||
width: clamp(16rem, 90vw, 65ch);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue