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

initial tool setup and basic styles

Browse Source
This commit is contained in:
Dave
2025-09-04 14:13:55 +02:00
parent b212b4f596
commit fc8b07185d
19 changed files with 9016 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

370
src/app/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: auto; /* 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: auto; /* 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;
}

50
src/app/globals.css
View File

@@ -1,42 +1,8 @@
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
@import url('../styles/base/variables.css');
@import url('../styles/base/typography.css');
@import url('../styles/base/lists.css');
@import url('../styles/base/tables.css');
@import url('../styles/base/inline.css');
@import url('../styles/base/form.css');
@import url('../styles/base/keyframes.css');
@import url('../styles/base/helpers.css');

37
src/app/layout.tsx
View File

@@ -1,32 +1,37 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import '@fontsource/iosevka'
import '@fontsource/iosevka-aile'
import type { Metadata } from 'next'
import { Blaka, Geist } from 'next/font/google'
import './foundation.css'
import './globals.css'
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
variable: '--font-geist-sans',
subsets: ['latin'],
})
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
const blaka = Blaka({
weight: '400', // Blaka only has one weight
subsets: ['latin'],
display: 'swap',
variable: '--font-blaka', // CSS variable for easy use
})
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
children: React.ReactNode
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
<body className={`${geistSans.variable} ${blaka.variable}`}>
{children}
</body>
</html>
);
)
}

330
src/styles/base/form.css Normal file
View File

@@ -0,0 +1,330 @@
input,
select,
textarea {
margin: var(--spacing-snug) 0;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"] {
width: 100%;
padding: var(--spacing-tight) var(--spacing-snug);
border: none;
border-bottom: var(--size-2) solid var(--color-text-secondary);
font-family: var(--font-mono), monospace;
color: var(--color-text-primary);
background: transparent;
transition: all 0.2s ease;
}
input:focus {
border-bottom-color: var(--color-text-primary);
color: var(--color-surface-base);
background: var(--color-text-primary);
outline: none;
}
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="week"],
input[type="month"] {
width: 100%;
margin: var(--spacing-snug) 0;
padding: var(--spacing-tight) var(--spacing-snug);
border: none;
border-bottom: var(--size-2) solid var(--color-text-secondary);
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-md);
color: var(--color-text-primary);
background: transparent;
transition: all 0.2s ease;
&:active,
&:focus-within {
border-bottom-color: var(--color-text-primary);
color: var(--color-surface-base);
background: var(--color-text-primary);
outline: none;
}
}
textarea {
resize: vertical; /* only allow vertical resizing */
width: 100%;
min-height: var(--size-32);
margin: var(--spacing-snug) 0;
padding: var(--spacing-tight) var(--spacing-snug);
border: none;
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-md);
color: var(--color-surface-base);
background: var(--color-text-primary);
}
legend {
width: 100%;
margin: var(--spacing-snug) 0;
padding: var(--spacing-snug) var(--spacing-comfortable);
border: none;
font-family: var(--font-display), serif;
font-size: var(--typo-size-xl);
font-weight: var(--typo-weight-black);
color: var(--color-surface-base);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.035em;
background: var(--color-text-primary);
}
input[type="checkbox"] {
cursor: pointer;
position: relative;
width: var(--size-6);
height: var(--size-6);
appearance: none;
background: var(--color-text-primary);
&:checked {
&::after {
content: "✔";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.9rem;
font-weight: bold;
color: var(--color-surface-base);
}
}
}
input[type="radio"] {
cursor: pointer;
position: relative;
width: var(--size-6);
height: var(--size-6);
border-radius: 50%;
appearance: none;
background: var(--color-text-primary);
&:checked {
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--size-2);
height: var(--size-2);
border-radius: 50%;
background: var(--color-surface-base);
}
}
}
input[type="color"] {
cursor: pointer;
width: var(--size-10);
height: var(--size-10);
padding: 0;
border: var(--size-2) solid var(--color-text-primary);
appearance: none;
background: transparent;
&::-webkit-color-swatch {
border: none;
border-radius: 0;
}
&::-webkit-color-swatch-wrapper {
padding: var(--size-0);
border: none;
}
}
input[type="file"],
input[type="image"]{
cursor: pointer;
padding: 0;
border: none;
border-bottom: var(--size-2) solid var(--color-text-secondary);
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-sm);
color: var(--color-text-primary);
background: transparent;
&::file-selector-button {
cursor: pointer;
margin-right: var(--spacing-snug);
padding: var(--spacing-tight) var(--spacing-snug);
border: none;
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-sm);
font-weight: var(--typo-weight-bold);
color: var(--color-surface-base);
background: var(--color-text-primary);
}
&:focus {
border-bottom-color: var(--color-text-primary);
outline: none;
}
}
input[type="range"] {
cursor: pointer;
width: 100%;
height: var(--size-2);
appearance: none;
background: var(--color-text-secondary);
&::-webkit-slider-thumb {
cursor: pointer;
width: 1rem;
height: 1rem;
border: none;
appearance: none;
background: var(--color-text-primary);
}
&::-moz-range-thumb {
cursor: pointer;
width: 1rem;
height: 1rem;
border: none;
border-radius: 0;
background: var(--color-text-primary);
}
}
input[type="hidden"] {
display: none;
}
input[type="image"] {
cursor: pointer;
max-width: 100%;
height: auto;
border: var(--size-2) solid var(--color-text-primary);
&:hover {
opacity: 0.8;
}
&:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-text-primary);
}
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
cursor: pointer;
padding: var(--spacing-snug) var(--spacing-comfortable);
border: var(--size-2) solid var(--color-text-primary);
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-sm);
font-weight: var(--typo-weight-bold);
color: var(--color-text-primary);
text-transform: uppercase;
background: var(--color-surface-base);
transition: all 0.2s ease;
&:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-text-primary);
}
&:hover {
color: var(--color-surface-base);
background: var(--color-text-primary);
}
}
select {
cursor: pointer;
padding: var(--spacing-tight) var(--spacing-snug);
padding-right: calc(var(--spacing-snug) + 1.5rem);
border: none;
border-bottom: var(--size-2) solid var(--color-text-secondary);
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-md);
color: var(--color-text-primary);
appearance: none;
background: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--spacing-snug) center;
background-size: 1rem;
&:focus {
border-bottom-color: var(--color-text-primary);
color: var(--color-surface-base);
background-color: var(--color-text-primary);
outline: none;
}
& optgroup {
font-weight: var(--typo-weight-bold);
color: var(--color-text-primary);
background: var(--color-surface-elevated-2);
}
& option {
font-weight: var(--typo-weight-regular);
color: var(--color-text-primary);
background: var(--color-surface-base);
}
}

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

@@ -0,0 +1,28 @@
.content {
max-width: clamp(60ch, 90vw, 90ch);
margin: 0 auto;
padding: 0 var(--spacing-comfortable);
font-size: clamp(1rem, 2.5vw, 1.25rem);
}
@keyframes slide-down {
from {
max-height: 2em;
}
to {
max-height: 500px;
}
}
@keyframes scale-up-ver-top {
0% {
transform-origin: 100% 0%;
transform: scaleY(0.4);
}
100% {
transform-origin: 100% 0%;
transform: scaleY(1);
}
}

156
src/styles/base/inline.css Normal file
View File

@@ -0,0 +1,156 @@
em,
i {
padding: 0.1em 0.2em;
font-weight: var(--typo-weight-semibold);
font-style: normal;
color: var(--color-surface-base);
letter-spacing: var(--typo-spacing-relaxed);
background: var(--color-primary)
}
strong,
b {
font-weight: var(--typo-weight-black);
letter-spacing: var(--typo-spacing-loose);
}
a {
position: relative;
padding: 0.1em 0.2em;
font-weight: var(--typo-weight-semibold);
color: var(--color-text-primary);
text-decoration: underline;
text-decoration-thickness: var(--size-1);
text-underline-offset: 2px;
transition: color 0.5s ease-in-out, background 0.5s ease-in-out;
&:hover {
cursor: pointer;
color: var(--color-surface-base);
text-decoration: none;
background: var(--color-text-primary);
}
&:visited,
&:active {
color: var(--color-primary-emphasis);
}
}
code {
padding: 0.1em 0.3em;
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-sm);
color: var(--color-surface-base);
background: var(--color-text-primary);
}
kbd {
padding: 0.1em 0.3em;
border: 1px solid var(--color-text-primary);
border-radius: 2px;
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-xs);
color: var(--color-surface-base);
text-transform: uppercase;
background: var(--color-text-secondary);
}
samp {
padding: 0.1em 0.3em;
border-left: var(--size-1) solid var(--color-text-tertiary);
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-sm);
color: var(--color-text-primary);
background: var(--color-surface-elevated-2);
}
var {
font-family: var(--font-mono), monospace;
font-weight: var(--typo-weight-semibold);
font-style: normal;
color: var(--color-text-secondary);
}
mark {
padding: 0.1em 0.2em;
font-weight: var(--typo-weight-semibold);
color: var(--color-surface-base);
background: var(--color-primary);
}
small {
font-size: var(--typo-size-xs);
color: var(--color-text-tertiary);
}
sub, sup {
font-size: 0.5625em;
font-weight: var(--typo-weight-semibold);
color: var(--color-text-secondary);
}
del,
s {
color: var(--color-text-tertiary);
text-decoration: line-through;
text-decoration-thickness: var(--size-1);
}
ins {
font-weight: var(--typo-weight-semibold);
color: var(--color-text-primary);
text-decoration: underline;
text-decoration-color: var(--color-primary);
text-decoration-thickness: var(--size-1);
background: transparent;
}
abbr {
cursor: help;
text-decoration: underline dotted;
text-underline-offset: var(--size-1);
}
dfn {
font-weight: var(--typo-weight-bold);
font-style: normal;
color: var(--color-text-primary);
}
cite {
font-weight: var(--typo-weight-semibold);
font-style: normal;
color: var(--color-text-secondary);
}
q {
font-style: normal;
&::before {
content: "»";
}
&::after {
content: "«";
}
}
time {
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-sm);
color: var(--color-text-secondary);
}

21
src/styles/base/keyframes.css Normal file
View File

@@ -0,0 +1,21 @@
@keyframes line-up {
0% {
transform-origin: 50% 100%;
transform: scale3d(1, 0.045, 1);
}
50% {
transform-origin: 50% 100%;
transform: scale3d(1, 1, 1);
}
51% {
transform-origin: 50% 0%;
transform: scale3d(1, 1, 1);
}
100% {
transform-origin: 50% 0%;
transform: scale3d(1, 0.045, 1);
}
}

113
src/styles/base/lists.css Normal file
View File

@@ -0,0 +1,113 @@
ul {
padding-left: var(--element-list-indent-l1);
& li {
padding-left: var(--spacing-snug);
&::marker {
content: var(--element-ul-symbol-l1);
color: var(--color-text-tertiary);
}
}
& ul {
padding-left: var(--element-list-indent-l2);
& li::marker {
content: var(--element-ul-symbol-l2);
}
& ul {
padding-left: var(--element-list-indent-l3);
& li::marker {
content: var(--element-ul-symbol-l3);
}
& ul {
padding-left: var(--element-list-indent-l4);
& li::marker {
content: var(--element-ul-symbol-l4);
}
}
}
}
}
ol {
counter-reset: ol-counter-l1;
padding-left: var(--element-list-indent-l1);
& li {
counter-increment: ol-counter-l1;
padding-left: var(--spacing-comfortable);
&::marker {
content: var(--element-ol-prefix-l1) counter(ol-counter-l1, var(--element-ol-style-l1)) var(--element-ol-suffix-l1);
color: var(--color-text-tertiary);
}
}
& ol {
counter-reset: ol-counter-l2;
padding-left: var(--element-list-indent-l2);
& li {
counter-increment: ol-counter-l2;
&::marker {
content: var(--element-ol-prefix-l2) counter(ol-counter-l2, var(--element-ol-style-l2)) var(--element-ol-suffix-l2);
}
}
& ol {
counter-reset: ol-counter-l3;
padding-left: var(--element-list-indent-l3);
& li {
counter-increment: ol-counter-l3;
&::marker {
content: var(--element-ol-prefix-l3) counter(ol-counter-l3, var(--element-ol-style-l3)) var(--element-ol-suffix-l3);
}
}
& ol {
counter-reset: ol-counter-l4;
padding-left: var(--element-list-indent-l4);
& li {
counter-increment: ol-counter-l4;
&::marker {
content: var(--element-ol-prefix-l4) counter(ol-counter-l4, var(--element-ol-style-l4)) var(--element-ol-suffix-l4);
}
}
}
}
}
}
dt {
padding: var(--spacing-snug);
font-family: var(--font-display), serif;
font-size: var(--typo-size-lg);
font-weight: var(--typo-weight-black);
line-height: 1.5385;
color: var(--color-surface-base);
text-transform: uppercase;
letter-spacing: 0.035em;
background: var(--color-text-secondary);
}
dd {
margin: 0 0 var(--spacing-snug) 0;
padding: var(--spacing-snug);
& p {
margin-bottom: 0;
}
}

44
src/styles/base/tables.css Normal file
View File

@@ -0,0 +1,44 @@
table {
border-collapse: collapse;
width: 100%;
margin: var(--spacing-comfortable) 0;
border: var(--size-2) solid var(--color-text-primary);
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-sm);
& thead th,
& th {
font-family: var(--font-display), serif;
font-weight: var(--typo-weight-black);
color: var(--color-surface-base);
text-align: center;
text-transform: uppercase;
background: var(--color-text-primary);
}
& tbody td,
& td {
padding: var(--spacing-snug) var(--spacing-cozy);
border: var(--size-1) solid var(--color-text-primary);
text-align: center;
background: var(--color-surface-base)
}
& td:first-child,
& th:first-child {
text-align: left;
}
& tfoot td {
padding: var(--spacing-snug) var(--spacing-cozy);
border: var(--size-px) solid var(--color-text-primary);
font-weight: var(--typo-weight-bold);
color: var(--color-surface-base);
background: var(--color-text-secondary);
}
}

254
src/styles/base/typography.css Normal file
View File

@@ -0,0 +1,254 @@
html {
font-size: var(--typo-size-base);
}
body {
font-family: var(--font-body), sans-serif;
font-feature-settings: "kern" 1;
font-weight: var(--typo-weight-regular);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: var(--typo-leading-comfortable);
color: var(--color-text-primary);
background-color: var(--color-surface-base);
}
h1,h2,h3,h4,h5,h6 {
font-family: var(--font-display), serif;
}
h1 {
margin-bottom: var(--spacing-cozy);
padding-bottom: var(--spacing-snug);
border-bottom: var(--size-4) solid var(--color-text-primary);
font-size: var(--typo-size-6xl);
font-weight: var(--typo-weight-black);
line-height: 1.125;
text-transform: uppercase;
letter-spacing: -0.0137em;
}
h2 {
margin: var(--spacing-relaxed) 0 var(--spacing-cozy) 0;
padding-left: var(--spacing-cozy);
border-left: var(--size-4) solid var(--color-text-primary);
font-size: var(--typo-size-5xl);
font-weight: var(--typo-weight-black);
line-height: 1.1765;
text-transform: uppercase;
letter-spacing: -0.0096em;
}
h3 {
margin: var(--spacing-comfortable) 0 var(--spacing-cozy) 0;
border-bottom: var(--size-2) solid var(--color-text-secondary);
font-size: var(--typo-size-4xl);
font-weight: var(--typo-weight-extrabold);
line-height: 1.2;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: -0.004em;
}
h4 {
margin: var(--spacing-comfortable) 0 var(--spacing-snug) 0;
padding: var(--spacing-tight) var(--spacing-snug);
font-size: var(--typo-size-3xl);
font-weight: var(--typo-weight-bold);
line-height: 1.125;
color: var(--color-surface-base);
text-transform: uppercase;
letter-spacing: 0.0025em;
background: var(--color-text-primary);
}
h5 {
position: relative;
margin: var(--spacing-cozy) 0 var(--spacing-snug) 0;
border-top: var(--size-2) solid var(--color-text-secondary);
border-bottom: var(--size-2) solid var(--color-text-secondary);
font-size: var(--typo-size-2xl);
font-weight: var(--typo-weight-extrabold);
line-height: 1.28;
color: var(--color-text-secondary);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}
h6 {
margin: var(--spacing-cozy) 0 var(--spacing-snug) 0;
font-size: var(--typo-size-xl);
font-weight: var(--typo-weight-black);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.035em;
/* &::after {
content: "▼";
display: block;
font-size: 1.25em;
} */
}
p {
margin: var(--spacing-cozy) 0;
font-size: var(--typo-size-md);
line-height: var(--typo-leading-normal);
text-align: justify;
}
h1 + p {
font-size: var(--typo-size-xl);
font-weight: var(--typo-weight-bold);
line-height: 1.4;
letter-spacing: 0.022em;
}
blockquote {
margin: var(--spacing-comfortable) 0;
padding: var(--spacing-snug) 0 var(--spacing-snug) var(--spacing-comfortable);
border-left: var(--size-4) solid var(--color-text-tertiary);
color: var(--color-text-tertiary);
& p {
margin-top: 0;
}
}
pre {
overflow-x: auto;
margin: var(--spacing-comfortable) 0;
padding: var(--spacing-comfortable);
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-sm);
line-height: 1.5385;
color: var(--color-surface-base);
background: var(--color-text-primary);
}
hr {
position: relative;
overflow: visible;
height: var(--size-4);
margin: var(--spacing-relaxed) 0;
border: none;
background-color: var(--color-text-primary);
&::after {
content: "▼";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 var(--spacing-snug);
font-size: var(--typo-size-4xl);
line-height: var(--typo-leading-compressed);
color: var(--color-text-primary);
background-color: var(--color-surface-base);
}
}
figure {
margin: var(--spacing-relaxed) 0;
padding: var(--spacing-comfortable) 0;
border-top: var(--size-3) solid var(--color-text-primary);
border-bottom: var(--size-3) solid var(--color-text-primary);
& blockquote {
position: relative;
margin: var(--spacing-comfortable) 0;
padding: var(--spacing-snug) 0 var(--spacing-comfortable) var(--spacing-comfortable);
border: none;
font-size: var(--typo-size-lg);
font-weight: var(--typo-weight-extrabold);
line-height: var(--typo-leading-loose);
color: var(--color-text-tertiary);
&::before {
content: "";
position: absolute;
bottom: calc(var(--size-1)*-1);
left: 50%;
transform: translateX(-50%);
width: var(--size-16);
height: var(--size-2);
background: var(--color-text-tertiary);
}
& p {
margin: 0;
text-align: center;
}
}
& figcaption {
margin-top: var(--spacing-snug);
font-size: var(--typo-size-xs);
color: var(--color-text-tertiary);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.074em;
}
}
details {
overflow: hidden;
& summary {
padding: var(--spacing-snug) 0;
font-family: var(--font-display), serif;
font-size: var(--typo-size-lg);
font-weight: var(--typo-weight-black);
line-height: 1.5385;
color: var(--color-surface-base);
text-transform: uppercase;
letter-spacing: 0.035em;
background: var(--color-text-secondary);
&::marker {
content: "🞃";
position: absolute;
right: 0;
font-family: var(--font-body), sans-serif
}
}
&[open] {
summary {
&::marker {
content: "🞁";
}
}
}
}

293
src/styles/base/variables.css Normal file
View File

@@ -0,0 +1,293 @@
:root {
/* === TYPOGRAPHY === */
/* == Font Families == */
--font-display: 'Geist Variable';
--font-body: 'Iosevka Aile';
--font-mono: 'Iosevka';
/* == 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-thin: 100;
--typo-weight-extralight: 200;
--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 Size Units == */
--size-0: 0;
--size-px: 1px;
--size-05: 0.125rem; /* 2px */
--size-1: 0.25rem; /* 4px */
--size-2: 0.5rem; /* 8px */
--size-3: 0.75rem; /* 12px */
--size-4: 1rem; /* 16px */
--size-5: 1.25rem; /* 20px */
--size-6: 1.5rem; /* 24px */
--size-8: 2rem; /* 32px */
--size-10: 2.5rem; /* 40px */
--size-12: 3rem; /* 48px */
--size-16: 4rem; /* 64px */
--size-20: 5rem; /* 80px */
--size-24: 6rem; /* 96px */
--size-32: 8rem; /* 128px */
--size-40: 10rem; /* 160px */
--size-48: 12rem; /* 192px */
--size-64: 16rem; /* 256px */
--size-80: 20rem; /* 320px */
--size-96: 24rem; /* 384px */
--size-128: 32rem; /* 512px */
--size-160: 40rem; /* 640px */
--size-192: 48rem; /* 768px */
--size-256: 64rem; /* 1024px */
--size-320: 80rem; /* 1280px */
--size-384: 96rem; /* 1536px */
--size-360: 90rem; /* 1440px */
--size-400: 100rem; /* 1600px */
--size-480: 120rem; /* 1920px */
/* == Semantic Spacing == */
--spacing-none: var(--size-0);
--spacing-hairline: var(--size-px);
--spacing-tight: var(--size-1);
--spacing-snug: var(--size-2);
--spacing-cozy: var(--size-4);
--spacing-comfortable: var(--size-6);
--spacing-relaxed: var(--size-8);
--spacing-spacious: var(--size-12);
--spacing-generous: var(--size-16);
--spacing-luxurious: var(--size-24);
--spacing-expansive: var(--size-32);
/* === LIST STYLING === */
/* == List Indentation Levels == */
--element-list-indent-l1: var(--spacing-cozy);
--element-list-indent-l2: var(--spacing-cozy);
--element-list-indent-l3: var(--spacing-cozy);
--element-list-indent-l4: var(--spacing-cozy);
/* == 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: decimal-leading-zero;
--element-ol-suffix-l3: '';
--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-black-ink); /* 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;
}