Linting, prettier and postcss setup
All checks were successful
Build and Deploy Astro Site / deploy (push) Successful in 18s
All checks were successful
Build and Deploy Astro Site / deploy (push) Successful in 18s
This commit is contained in:
23
.prettierrc.js
Normal file
23
.prettierrc.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
export default {
|
||||||
|
semi: false,
|
||||||
|
singleQuote: true,
|
||||||
|
tabWidth: 2,
|
||||||
|
trailingComma: 'es5',
|
||||||
|
plugins: ['prettier-plugin-astro'],
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: '*.astro',
|
||||||
|
options: {
|
||||||
|
parser: 'astro',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: '*.mdx',
|
||||||
|
options: {
|
||||||
|
parser: 'mdx',
|
||||||
|
tabWidth: 4
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
56
eslint.config.js
Normal file
56
eslint.config.js
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
// eslint.config.js
|
||||||
|
import js from '@eslint/js'
|
||||||
|
import typescriptParser from '@typescript-eslint/parser'
|
||||||
|
import typescript from '@typescript-eslint/eslint-plugin'
|
||||||
|
import astro from 'eslint-plugin-astro'
|
||||||
|
import astroParser from 'astro-eslint-parser'
|
||||||
|
import * as mdx from 'eslint-plugin-mdx' // Import everything
|
||||||
|
import markdown from 'eslint-plugin-markdown'
|
||||||
|
|
||||||
|
export default [
|
||||||
|
js.configs.recommended,
|
||||||
|
{
|
||||||
|
files: ['**/*.ts', '**/*.tsx'],
|
||||||
|
plugins: {
|
||||||
|
'@typescript-eslint': typescript
|
||||||
|
},
|
||||||
|
languageOptions: {
|
||||||
|
parser: typescriptParser
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...typescript.configs.recommended.rules
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['**/*.astro'],
|
||||||
|
plugins: {
|
||||||
|
astro
|
||||||
|
},
|
||||||
|
languageOptions: {
|
||||||
|
parser: astroParser,
|
||||||
|
parserOptions: {
|
||||||
|
parser: typescriptParser,
|
||||||
|
extraFileExtensions: ['.astro']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...astro.configs.recommended.rules
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['**/*.mdx'],
|
||||||
|
plugins: {
|
||||||
|
mdx
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...mdx.configs.recommended.rules
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['**/*.md'],
|
||||||
|
plugins: {
|
||||||
|
markdown
|
||||||
|
},
|
||||||
|
processor: 'markdown/markdown'
|
||||||
|
}
|
||||||
|
]
|
||||||
7611
package-lock.json
generated
7611
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
31
package.json
31
package.json
@@ -6,9 +6,36 @@
|
|||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
"astro": "astro"
|
"astro": "astro",
|
||||||
|
"lint": "eslint . --ext .js,.ts,.astro",
|
||||||
|
"lint:fix": "eslint . --ext .js,.ts,.astro --fix"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fontsource-variable/geist": "^5.2.6",
|
||||||
|
"@fontsource/blaka": "^5.2.6",
|
||||||
|
"@fontsource/iosevka": "^5.2.5",
|
||||||
|
"@fontsource/iosevka-aile": "^5.2.5",
|
||||||
"astro": "^5.13.5"
|
"astro": "^5.13.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.34.0",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^8.41.0",
|
||||||
|
"@typescript-eslint/parser": "^8.41.0",
|
||||||
|
"astro-eslint-parser": "^1.2.2",
|
||||||
|
"cssnano": "^7.1.1",
|
||||||
|
"eslint": "^9.34.0",
|
||||||
|
"eslint-plugin-astro": "^1.3.1",
|
||||||
|
"eslint-plugin-markdown": "^5.1.0",
|
||||||
|
"eslint-plugin-mdx": "^3.6.2",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"postcss-import": "^16.1.1",
|
||||||
|
"postcss-nesting": "^13.0.2",
|
||||||
|
"postcss-preset-env": "^10.3.1",
|
||||||
|
"postcss-utilities": "^0.8.4",
|
||||||
|
"prettier": "^3.6.2",
|
||||||
|
"stylelint": "^16.23.1",
|
||||||
|
"stylelint-config-clean-order": "^7.0.0",
|
||||||
|
"stylelint-config-html": "^1.1.0",
|
||||||
|
"stylelint-config-standard": "^39.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
23
src/layouts/base.astro
Normal file
23
src/layouts/base.astro
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
---
|
||||||
|
const { title, description } = Astro.props
|
||||||
|
import '../styles/foundation.css'
|
||||||
|
import '@fontsource-variable/geist';
|
||||||
|
import '@fontsource/iosevka-aile';
|
||||||
|
import '@fontsource/iosevka';
|
||||||
|
import '../styles/main.css';
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>{title}</title>
|
||||||
|
<meta name="description" content={description || 'Default description'}>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,17 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
import Layout from '../layouts/base.astro'
|
||||||
|
---
|
||||||
|
|
||||||
---
|
<Layout title={`Dave | DMG`}>
|
||||||
|
<h1>Astro</h1>
|
||||||
<html lang="en">
|
<p>Do Not Let Us Die In The Dark Night Of This Cold Winter, Dave!</p>
|
||||||
<head>
|
</Layout>
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width" />
|
|
||||||
<meta name="generator" content={Astro.generator} />
|
|
||||||
<title>Astro</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Astro</h1>
|
|
||||||
<p>Do Not Let Us Die In The Dark Night Of This Cold Winter, Dave!</p>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
0
src/styles/base/elements.css
Normal file
0
src/styles/base/elements.css
Normal file
0
src/styles/base/helpers.css
Normal file
0
src/styles/base/helpers.css
Normal file
277
src/styles/base/variables.css
Normal file
277
src/styles/base/variables.css
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
:root {
|
||||||
|
/* === TYPOGRAPHY === */
|
||||||
|
|
||||||
|
/* == Font Families == */
|
||||||
|
--font-display: 'Geist Variable', sans-serif;
|
||||||
|
--font-body: 'Iosevka Aile', sans-serif;
|
||||||
|
--font-mono: 'Iosevka', monospace;
|
||||||
|
|
||||||
|
/* == Font Sizes == */
|
||||||
|
--typo-size-base: 16px;
|
||||||
|
--typo-size-6xl: 4em; /* 64px */
|
||||||
|
--typo-size-5xl: 3.1875em; /* 51px */
|
||||||
|
--typo-size-4xl: 2.5em; /* 40px */
|
||||||
|
--typo-size-3xl: 2em; /* 32px */
|
||||||
|
--typo-size-2xl: 1.5625em; /* 25px */
|
||||||
|
--typo-size-xl: 1.25em; /* 20px */
|
||||||
|
--typo-size-lg: 1.125em; /* 18px */
|
||||||
|
--typo-size-md: 1em; /* 16px */
|
||||||
|
--typo-size-sm: 0.875em; /* 14px */
|
||||||
|
--typo-size-xs: 0.8125em; /* 13px */
|
||||||
|
--typo-size-2xs: 0.625em; /* 10px */
|
||||||
|
|
||||||
|
/* == Line Height == */
|
||||||
|
--typo-leading-compressed: 1.0; /* 1.0 - very tight */
|
||||||
|
--typo-leading-tight: 1.125; /* 1.125 - tight */
|
||||||
|
--typo-leading-snug: 1.25; /* 1.25 - snug */
|
||||||
|
--typo-leading-cozy: 1.375; /* 1.375 - cozy */
|
||||||
|
--typo-leading-normal: 1.5; /* 1.5 - normal */
|
||||||
|
--typo-leading-relaxed: 1.625; /* 1.625 - relaxed */
|
||||||
|
--typo-leading-comfortable: 1.75; /* 1.75 - comfortable */
|
||||||
|
--typo-leading-loose: 1.875; /* 1.875 - loose */
|
||||||
|
--typo-leading-spacious: 2.0; /* 2.0 - very loose */
|
||||||
|
|
||||||
|
/* == Letter Spacing == */
|
||||||
|
--typo-spacing-tightest: -0.05em; /* -0.05em - very tight */
|
||||||
|
--typo-spacing-tighter: -0.025em; /* -0.025em - tight */
|
||||||
|
--typo-spacing-tight: -0.0125em; /* -0.0125em - slightly tight */
|
||||||
|
--typo-spacing-normal: 0em; /* 0 - normal */
|
||||||
|
--typo-spacing-relaxed: 0.025em; /* 0.025em - slightly loose */
|
||||||
|
--typo-spacing-comfortable: 0.05em; /* 0.05em - comfortable */
|
||||||
|
--typo-spacing-loose: 0.1em; /* 0.1em - loose */
|
||||||
|
--typo-spacing-looser: 0.15em; /* 0.15em - very loose */
|
||||||
|
--typo-spacing-loosest: 0.2em; /* 0.2em - extremely loose */
|
||||||
|
|
||||||
|
/* == Font Weight == */
|
||||||
|
--typo-weight-light: 300;
|
||||||
|
--typo-weight-regular: 400;
|
||||||
|
--typo-weight-medium: 500;
|
||||||
|
--typo-weight-semibold: 600;
|
||||||
|
--typo-weight-bold: 700;
|
||||||
|
--typo-weight-extrabold: 800;
|
||||||
|
--typo-weight-black: 900;
|
||||||
|
|
||||||
|
/* === SPACING === */
|
||||||
|
|
||||||
|
/* == Base Spacing Units == */
|
||||||
|
--spacing-0: 0;
|
||||||
|
--spacing-px: 1px;
|
||||||
|
--spacing-05: 0.125rem; /* 2px */
|
||||||
|
--spacing-1: 0.25rem; /* 4px */
|
||||||
|
--spacing-2: 0.5rem; /* 8px */
|
||||||
|
--spacing-3: 0.75rem; /* 12px */
|
||||||
|
--spacing-4: 1rem; /* 16px */
|
||||||
|
--spacing-5: 1.25rem; /* 20px */
|
||||||
|
--spacing-6: 1.5rem; /* 24px */
|
||||||
|
--spacing-8: 2rem; /* 32px */
|
||||||
|
--spacing-10: 2.5rem; /* 40px */
|
||||||
|
--spacing-12: 3rem; /* 48px */
|
||||||
|
--spacing-16: 4rem; /* 64px */
|
||||||
|
--spacing-20: 5rem; /* 80px */
|
||||||
|
--spacing-24: 6rem; /* 96px */
|
||||||
|
--spacing-32: 8rem; /* 128px */
|
||||||
|
|
||||||
|
/* == Semantic Spacing == */
|
||||||
|
--spacing-none: var(--spacing-0);
|
||||||
|
--spacing-hairline: var(--spacing-px);
|
||||||
|
--spacing-tight: var(--spacing-1);
|
||||||
|
--spacing-snug: var(--spacing-2);
|
||||||
|
--spacing-cozy: var(--spacing-4);
|
||||||
|
--spacing-comfortable: var(--spacing-6);
|
||||||
|
--spacing-relaxed: var(--spacing-8);
|
||||||
|
--spacing-spacious: var(--spacing-12);
|
||||||
|
--spacing-generous: var(--spacing-16);
|
||||||
|
--spacing-luxurious: var(--spacing-24);
|
||||||
|
--spacing-expansive: var(--spacing-32);
|
||||||
|
|
||||||
|
/* === LIST STYLING === */
|
||||||
|
|
||||||
|
/* == List Indentation Levels == */
|
||||||
|
--element-list-indent-l1: var(--spacing-comfortable);
|
||||||
|
--element-list-indent-l2: var(--spacing-cozy);
|
||||||
|
--element-list-indent-l3: var(--spacing-snug);
|
||||||
|
--element-list-indent-l4: var(--spacing-tight);
|
||||||
|
|
||||||
|
/* == Unordered List Symbols == */
|
||||||
|
--element-ul-symbol-l1: '▸';
|
||||||
|
--element-ul-symbol-l2: '●';
|
||||||
|
--element-ul-symbol-l3: '▾';
|
||||||
|
--element-ul-symbol-l4: '◼';
|
||||||
|
|
||||||
|
/* == Ordered List Styling == */
|
||||||
|
--element-ol-prefix-l1: '';
|
||||||
|
--element-ol-style-l1: decimal;
|
||||||
|
--element-ol-suffix-l1: '.)';
|
||||||
|
--element-ol-prefix-l2: '';
|
||||||
|
--element-ol-style-l2: lower-alpha;
|
||||||
|
--element-ol-suffix-l2: '.)';
|
||||||
|
--element-ol-prefix-l3: '';
|
||||||
|
--element-ol-style-l3: ;
|
||||||
|
--element-ol-suffix-l3: 'decimal-leading-zero';
|
||||||
|
--element-ol-prefix-l4: '.)';
|
||||||
|
--element-ol-style-l4: lower-greek;
|
||||||
|
--element-ol-suffix-l4: '.)';
|
||||||
|
|
||||||
|
/* === COLORS === */
|
||||||
|
|
||||||
|
/* == Default Palette == */
|
||||||
|
|
||||||
|
/* Blacks, Grays & Off-Whites */
|
||||||
|
--color-palette-woodsmoke: oklch(15.5% 0.009 274.276deg); /* Woodsmoke: #0B0C10 */
|
||||||
|
--color-palette-black-ink: oklch(21.9% 0.006 285.911deg); /* Shark: #1A1A1D */
|
||||||
|
--color-palette-charcoal: oklch(26.6% 0.008 240.166deg); /* Shark2: #222629 */
|
||||||
|
--color-palette-charcoal-gray: oklch(33.7% 0.026 266.801deg); /* Bright Gray: #313745 */
|
||||||
|
--color-palette-slate-gray: oklch(33.3% 0 89.876deg); /* Mineshaft: #363636 */
|
||||||
|
--color-palette-gunmetal: oklch(41.1% 0.008 248.035deg); /* Abbey2: #474B4F */
|
||||||
|
--color-palette-carbon: oklch(39.8% 0 89.876deg); /* Tundora: #474747 */
|
||||||
|
--color-palette-steel-gray: oklch(42.5% 0.003 286.26deg); /* Abbey: #4e4e50 */
|
||||||
|
--color-palette-dusty-black: oklch(43.7% 0.013 17.672deg); /* DonJuan: #594F4F */
|
||||||
|
--color-palette-stone: oklch(64.3% 0.005 91.471deg); /* Natural Gray: #8E8D8A */
|
||||||
|
--color-palette-cloud-gray: oklch(53.6% 0.005 236.565deg); /* Nevada: #6B6E70 */
|
||||||
|
--color-palette-silver: oklch(72.9% 0.001 17.185deg); /* Silver Chalice: #A8A7A7 */
|
||||||
|
--color-palette-light-silver: oklch(82.6% 0.002 247.844deg); /* Silversand: #C5C6C7 */
|
||||||
|
--color-palette-pale-gray: oklch(91.3% 0.004 91.449deg); /* Westar: #E3E2DF */
|
||||||
|
--color-palette-pale-stone: oklch(89.7% 0.004 106.481deg); /* Quillgray: #DDDDDA */
|
||||||
|
--color-palette-very-pale-gray: oklch(94.3% 0 89.876deg); /* Gallery: #ECECEC */
|
||||||
|
--color-palette-off-white: oklch(98.1% 0.003 247.858deg); /* Catskill White: #F7F9fB */
|
||||||
|
--color-palette-cat-squeeze: oklch(98.3% 0.004 236.496deg); /* Cat Squeeze: #F7FAFC */
|
||||||
|
--color-palette-smoky-mauve: oklch(50% 0.054 308.622deg); /* Smoky: #6C5B7B */
|
||||||
|
|
||||||
|
/* Reds */
|
||||||
|
--color-palette-oxblood: oklch(30.5% 0.122 12.109deg); /* Bordeaux: #5D001E */
|
||||||
|
--color-palette-deep-maroon: oklch(37.6% 0.109 11.682deg); /* Crown of Thorns: #6F2232 */
|
||||||
|
--color-palette-crimson: oklch(43.2% 0.169 7.14deg); /* Monarch: #950740 */
|
||||||
|
--color-palette-cherry-red: oklch(45.4% 0.168 1.454deg); /* Disco: #9A1750 */
|
||||||
|
--color-palette-ruby: oklch(52.1% 0.206 15.782deg); /* Shiraz: #C3073F */
|
||||||
|
--color-palette-red-clay: oklch(65.1% 0.178 27.507deg); /* Burnt Sienna: #E85A4F */
|
||||||
|
--color-palette-lava: oklch(63.6% 0.193 17.075deg); /* Mandy: #E84A5F */
|
||||||
|
--color-palette-vivid-scarlet: oklch(66.6% 0.221 15.669deg); /* Radical Red: #FE4365 */
|
||||||
|
|
||||||
|
/* Pinks & Magentas */
|
||||||
|
--color-palette-heliotrope: oklch(68.3% 0.217 353.666deg); /* Heliotrope: #F74FA3 */
|
||||||
|
--color-palette-hot-pink: oklch(65.4% 0.2 6.69deg); /* French Rose: #EE4C7C */
|
||||||
|
--color-palette-cerise: oklch(60.7% 0.23 18.554deg); /* Amaranth: #EC2049 */
|
||||||
|
--color-palette-fuchsia: oklch(49.6% 0.181 351.176deg); /* Hibiscus: #A7226E */
|
||||||
|
--color-palette-dusty-rose: oklch(63.2% 0.11 2.384deg); /* Turkish Rose: #C06C84 */
|
||||||
|
--color-palette-berry: oklch(60.8% 0.159 2.621deg); /* Mulberry: #CC527A */
|
||||||
|
--color-palette-petal-pink: oklch(80.5% 0.063 1.992deg); /* Rose Fog: #E3AFBC */
|
||||||
|
--color-palette-coral-pink: oklch(71.2% 0.162 15.607deg); /* Froly: #F67280 */
|
||||||
|
--color-palette-sweet-pink: oklch(79.2% 0.114 21.911deg); /* Sweet Pink: #FC9D9A */
|
||||||
|
|
||||||
|
/* Oranges & Browns */
|
||||||
|
--color-palette-persimmon: oklch(68.6% 0.179 40.01deg); /* Flamingo: #F26B38 */
|
||||||
|
--color-palette-terracotta: oklch(71.3% 0.131 27.646deg); /* Apricot: #E98074 */
|
||||||
|
--color-palette-tan: oklch(82.7% 0.047 76.752deg); /* Akaroa: #D8C3A5 */
|
||||||
|
--color-palette-peach: oklch(88.5% 0.072 57.746deg); /* Flesh: #FECEAB */
|
||||||
|
--color-palette-pastel-orange: oklch(82.1% 0.092 42.408deg); /* Rosebud: #F8B195 */
|
||||||
|
--color-palette-light-apricot: oklch(87.8% 0.066 57.778deg); /* Vivid Tangerine: #F9CDAD */
|
||||||
|
--color-palette-bone-white: oklch(92.7% 0.015 94.206deg); /* Satin Linen: #EAE7DC */
|
||||||
|
|
||||||
|
/* Yellows */
|
||||||
|
--color-palette-ripe-lemon: oklch(83.9% 0.167 91.469deg); /* Ripe Lemon: #F2C51D */
|
||||||
|
--color-palette-bright-canary: oklch(89% 0.157 97.726deg); /* Energy Yellow: #F7DB4F */
|
||||||
|
--color-palette-pale-lemon: oklch(95.6% 0.104 121.573deg); /* Mimosa: #E5FCAD */
|
||||||
|
|
||||||
|
/* Greens */
|
||||||
|
--color-palette-forest-green: oklch(58.1% 0.127 130.001deg); /* Crete: #61892F */
|
||||||
|
--color-palette-lime-green: oklch(74.6% 0.18 129.939deg); /* Atlantis: #86C232 */
|
||||||
|
--color-palette-electric-green: oklch(87.7% 0.227 137.099deg); /* Screaming Green: #87f74f */
|
||||||
|
--color-palette-sage: oklch(75.1% 0.056 144.175deg); /* Norway: #87f74f */
|
||||||
|
--color-palette-mint-green: oklch(84.8% 0.098 151.333deg); /* Chinook: #9de0ad */
|
||||||
|
--color-palette-olive-drab: oklch(82.5% 0.042 107.285deg); /* Olive Drap: #C8C8A9 */
|
||||||
|
--color-palette-seafoam: oklch(71.6% 0.056 165.214deg); /* Acapulco: #83AF9B */
|
||||||
|
|
||||||
|
/* Blues & Teals */
|
||||||
|
--color-palette-dark-navy: oklch(27.3% 0.024 253.693deg); /* Ebony Clay: #1F2833 */
|
||||||
|
--color-palette-deep-teal: oklch(32.4% 0.018 225.132deg); /* Outer Space: #2A363B */
|
||||||
|
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg); /* Ming: #355C7D */
|
||||||
|
--color-palette-sky-blue: oklch(76.3% 0.129 233.891deg); /* Picton Blue: #4FBFF7 */
|
||||||
|
--color-palette-slate-blue: oklch(55.1% 0.043 210.602deg); /* Cutty Sark: #547980 */
|
||||||
|
--color-palette-turquoise: oklch(61.5% 0.091 198.865deg); /* Lochinvar: #2F9599 */
|
||||||
|
--color-palette-aqua: oklch(68.6% 0.095 190.758deg); /* Keppel: #45ADA8 */
|
||||||
|
--color-palette-electric-blue: oklch(90.8% 0.128 188.419deg); /* Aquamarine: #66FCF1 */
|
||||||
|
--color-palette-powder-blue: oklch(88.2% 0.062 187.276deg); /* Powder Blue: #a9e6df */
|
||||||
|
--color-palette-ice-blue: oklch(99.9% 0.001 197.139deg); /* Twilight Blue: #feffff */
|
||||||
|
|
||||||
|
/* == Semantic Colors == */
|
||||||
|
|
||||||
|
/* Primary Colors */
|
||||||
|
--color-primary: var(--color-palette-lava);
|
||||||
|
--color-primary-surface: var(--color-palette-sweet-pink);
|
||||||
|
--color-primary-emphasis: var(--color-palette-cherry-red);
|
||||||
|
|
||||||
|
/* Secondary Colors */
|
||||||
|
--color-secondary: var(--color-palette-seafoam);
|
||||||
|
--color-secondary-surface: var(--color-palette-olive-drab);
|
||||||
|
--color-secondary-emphasis: var(--color-palette-mint-green);
|
||||||
|
|
||||||
|
/* Tertiary Colors */
|
||||||
|
--color-tertiary: var(--color-palette-bright-canary);
|
||||||
|
--color-tertiary-surface: var(--color-palette-pale-lemon);
|
||||||
|
--color-tertiary-emphasis: var(--color-palette-ripe-lemon);
|
||||||
|
|
||||||
|
/* Quartenary Colors */
|
||||||
|
--color-quarternary: var(--color-palette-powder-blue);
|
||||||
|
--color-quarternary-surface: var(--color-palette-aqua);
|
||||||
|
--color-quarternary-emphasis: var(--color-palette-slate-blue);
|
||||||
|
|
||||||
|
/* Text Base Colors */
|
||||||
|
--color-text-primary: var(--color-palette-woodsmoke); /* Main Body Texts, headlines */
|
||||||
|
--color-text-secondary: var(--color-palette-charcoal); /* Subheading, Secondary Info */
|
||||||
|
--color-text-tertiary: var(--color-palette-charcoal-gray); /* Captions, Meta Text */
|
||||||
|
--color-text-quarternary: var(--color-palette-carbon); /* Placeholder Text */
|
||||||
|
--color-text-inverse: var(--color-palette-ice-blue); /* Text on dark backgrounds */
|
||||||
|
--color-text-disabled: var(--color-palette-cloud-gray); /* Disabled form labels, inactive text */
|
||||||
|
|
||||||
|
/* Surface Base Colors */
|
||||||
|
--color-surface-base: var(--color-palette-ice-blue); /* Main page background */
|
||||||
|
--color-surface-elevated-1: var(--color-palette-off-white); /* Cards, Panels */
|
||||||
|
--color-surface-elevated-2: var(--color-palette-very-pale-gray); /* Modals, Dropdowns */
|
||||||
|
--color-surface-elevated-3: var(--color-palette-pale-gray); /* Tooltips, popovers */
|
||||||
|
--color-surface-elevated-4: var(--color-palette-light-silver); /* Highest Elevation */
|
||||||
|
--color-surface-inverse: var(--color-palette-black-ink); /* Darkest Surface for Contrast */
|
||||||
|
|
||||||
|
/* Border Base Colors */
|
||||||
|
--color-border-subtle: var(--color-palette-silver); /* Subtle Dividers, Card Borders */
|
||||||
|
--color-border-normal: var(--color-palette-stone); /* Standard Borders, form fields */
|
||||||
|
--color-border-strong: var(--color-palette-charcoal-gray); /* Emphasized Borders */
|
||||||
|
|
||||||
|
/* State Colors */
|
||||||
|
--color-state-error: var(--color-palette-cerise); /* Error Text, Container, icons */
|
||||||
|
--color-state-warning: var(--color-palette-persimmon); /* Warning Text, Container, Icons */
|
||||||
|
--color-state-success: var(--color-palette-lime-green); /* Success Text, Container, Icons */
|
||||||
|
--color-state-info: var(--color-palette-royal-blue); /* Info Text, Container, Icons */
|
||||||
|
|
||||||
|
/* Link Colors */
|
||||||
|
--color-text-link: var(--color-text-tertiary);
|
||||||
|
--color-text-link-hover: var(--color-secondary);
|
||||||
|
--color-text-link-visited: var(--color-palette-fuchsia);
|
||||||
|
|
||||||
|
/* Focus States */
|
||||||
|
--color-focus-ring: var(--color-primary);
|
||||||
|
--color-focus-ring-offset: var(--color-primary);
|
||||||
|
--color-focus-indicator: var(--color-primary-emphasis)
|
||||||
|
|
||||||
|
/* Overlays */;
|
||||||
|
--color-utility-overlay-light: oklch(0% 0 0deg / 10%); /* Light overlays */
|
||||||
|
--color-utility-overlay-medium: oklch(0% 0 0deg / 30%); /* Medium overlays */
|
||||||
|
--color-utility-overlay-heavy: oklch(0% 0 0deg / 60%); /* Heavy overlays, modal backdrops */
|
||||||
|
--color-surface-overlay: var(--color-utility-overlay-medium); /* Modal overlays, backdrop */
|
||||||
|
--color-surface-backdrop: var(--color-utility-overlay-heavy); /* Full screen overlays */
|
||||||
|
|
||||||
|
/* Loading/Skeleton */
|
||||||
|
--color-utility-skeleton-base: var(--color-surface-elevated-2); /* Skeleton loader base */
|
||||||
|
--color-utility-skeleton-shimmer: var(--color-surface-elevated-1); /* Skeleton shimmer effect */
|
||||||
|
|
||||||
|
/* Dividers */
|
||||||
|
--color-utility-divider: var(--color-border-subtle); /* Section dividers, HR elements */
|
||||||
|
--color-utility-divider-strong: var(--color-border-normal); /* Emphasized dividers */
|
||||||
|
|
||||||
|
/* Shadows */
|
||||||
|
--color-utility-shadow: oklch(0% 0 0deg / 10%); /* Drop shadows */
|
||||||
|
--color-utility-shadow-strong: oklch(0% 0 0deg / 25%); /* Strong shadows */
|
||||||
|
|
||||||
|
/* Highlights */
|
||||||
|
--color-utility-highlight: var(--color-tertiary-surface); /* Text highlighting, search results */
|
||||||
|
--color-utility-highlight-strong: var(--color-tertiary); /* Strong highlighting */
|
||||||
|
}
|
||||||
370
src/styles/foundation.css
vendored
Normal file
370
src/styles/foundation.css
vendored
Normal file
@@ -0,0 +1,370 @@
|
|||||||
|
/*
|
||||||
|
Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/preflight)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||||
|
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
||||||
|
*/
|
||||||
|
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
border-style: solid; /* 2 */
|
||||||
|
border-width: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Use a consistent sensible line-height in all browsers.
|
||||||
|
2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
3. Use a more readable tab size.
|
||||||
|
4. Use the system's `sans` font-family by default.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||||
|
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
|
||||||
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
|
||||||
|
|
||||||
|
line-height: 1.5; /* 1 */
|
||||||
|
text-size-adjust: 100%; /* 2 */
|
||||||
|
tab-size: 4; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Remove the margin in all browsers.
|
||||||
|
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0; /* 1 */
|
||||||
|
line-height: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Add the correct height in Firefox.
|
||||||
|
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||||
|
3. Ensure horizontal rules are visible by default.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
height: 0; /* 1 */
|
||||||
|
border-top-width: 1px; /* 3 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr:where([title]) {
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Remove the default font size and weight for headings.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Reset links to optimize for opt-in styling instead of opt-out.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add the correct font weight in Edge and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Use the system's `mono` font family by default.
|
||||||
|
2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp,
|
||||||
|
pre {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||||
|
"Liberation Mono", "Courier New", monospace; /* 1 */
|
||||||
|
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||||
|
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||||
|
3. Remove gaps between table borders by default.
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse; /* 3 */
|
||||||
|
border-color: inherit; /* 2 */
|
||||||
|
text-indent: 0; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Change the font styles in all browsers.
|
||||||
|
2. Remove the margin in Firefox and Safari.
|
||||||
|
3. Remove default padding in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
font-weight: inherit; /* 1 */
|
||||||
|
line-height: inherit; /* 1 */
|
||||||
|
color: inherit; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Remove the inheritance of text transform in Edge and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
2. Remove default button styles.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
appearance: button; /* 1 */
|
||||||
|
background-color: transparent; /* 2 */
|
||||||
|
background-image: none; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Use the modern Firefox focus style for all focusable elements.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:-moz-focusring {
|
||||||
|
outline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
||||||
|
*/
|
||||||
|
|
||||||
|
:-moz-ui-invalid {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add the correct vertical alignment in Chrome and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Correct the cursor style of increment and decrement buttons in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-inner-spin-button,
|
||||||
|
::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-search-decoration {
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
appearance: button; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add the correct display in Chrome and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Removes the default spacing and border for appropriate elements.
|
||||||
|
*/
|
||||||
|
|
||||||
|
blockquote,
|
||||||
|
dl,
|
||||||
|
dd,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
hr,
|
||||||
|
figure,
|
||||||
|
p,
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
menu {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Prevent resizing textareas horizontally by default.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
||||||
|
*/
|
||||||
|
|
||||||
|
input::placeholder,
|
||||||
|
textarea::placeholder {
|
||||||
|
opacity: 1; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Set the default cursor for buttons.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[role="button"] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Make sure disabled buttons don't get the pointer cursor.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:disabled {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||||
|
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
||||||
|
This can trigger a poorly considered lint error in some tools but is included by design.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img,
|
||||||
|
svg,
|
||||||
|
video,
|
||||||
|
canvas,
|
||||||
|
audio,
|
||||||
|
iframe,
|
||||||
|
embed,
|
||||||
|
object {
|
||||||
|
display: block; /* 1 */
|
||||||
|
vertical-align: middle; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||||
|
*/
|
||||||
|
|
||||||
|
img,
|
||||||
|
video {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Make elements with the HTML hidden attribute stay hidden by default.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
3
src/styles/main.css
Normal file
3
src/styles/main.css
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
@import url('base/variables.css');
|
||||||
|
@import url('base/helpers.css');
|
||||||
|
@import url('base/elements.css');
|
||||||
Reference in New Issue
Block a user