dave-dmg/blog_astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Linting, prettier and postcss setup
All checks were successful
Build and Deploy Astro Site / deploy (push) Successful in 18s
Details

Browse Source
This commit is contained in:
Dave
2025-09-02 12:02:35 +02:00
parent 422e22867f
commit ca1c6b9018
11 changed files with 8395 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
.prettierrc.js Normal file
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

29
package.json
View File

@@ -6,9 +6,36 @@
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
"astro": "astro",
"lint": "eslint . --ext .js,.ts,.astro",
"lint:fix": "eslint . --ext .js,.ts,.astro --fix"
},
"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"
},
"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
View 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>

21
src/pages/index.astro
View File

@@ -1,17 +1,8 @@
---
import Layout from '../layouts/base.astro'
---
---
<html lang="en">
<head>
<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>
<Layout title={`Dave | DMG`}>
<h1>Astro</h1>
<p>Do Not Let Us Die In The Dark Night Of This Cold Winter, Dave!</p>
</Layout>

0
src/styles/base/elements.css Normal file
View File

0
src/styles/base/helpers.css Normal file
View File

277
src/styles/base/variables.css Normal file
View 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
View 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
View File

@@ -0,0 +1,3 @@
@import url('base/variables.css');
@import url('base/helpers.css');
@import url('base/elements.css');