initial tool setup and basic styles
This commit is contained in:
174
.idea/workspace.xml
generated
Normal file
174
.idea/workspace.xml
generated
Normal file
@@ -0,0 +1,174 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="AutoImportSettings">
|
||||
<option name="autoReloadType" value="SELECTIVE" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="c41707ed-a751-4a5e-bfaa-7bebd8a58741" name="Changes" comment="Added a baseline style for most elements" />
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="Git.Settings">
|
||||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||
</component>
|
||||
<component name="ProjectColorInfo"><![CDATA[{
|
||||
"associatedIndex": 7
|
||||
}]]></component>
|
||||
<component name="ProjectId" id="328Wk3oFTT4NcZIRDwiNyALa8z7" />
|
||||
<component name="ProjectViewState">
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent"><![CDATA[{
|
||||
"keyToString": {
|
||||
"ModuleVcsDetector.initialDetectionPerformed": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true",
|
||||
"RunOnceActivity.git.unshallow": "true",
|
||||
"git-widget-placeholder": "main",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.standard": "true",
|
||||
"node.js.detected.package.stylelint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.standard": "",
|
||||
"node.js.selected.package.stylelint": "/Users/dave/projects/dave-dmg/blog/node_modules/stylelint",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"prettierjs.PrettierConfiguration.Package": "/Users/dave/projects/dave-dmg/blog/node_modules/prettier",
|
||||
"settings.editor.selected.configurable": "settings.javascript.prettier",
|
||||
"ts.external.directory.path": "/Applications/WebStorm.app/Contents/plugins/javascript-plugin/jsLanguageServicesImpl/external",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
}
|
||||
}]]></component>
|
||||
<component name="RecentsManager">
|
||||
<key name="MoveFile.RECENT_KEYS">
|
||||
<recent name="$PROJECT_DIR$/src" />
|
||||
<recent name="$PROJECT_DIR$/configs/collections" />
|
||||
<recent name="$PROJECT_DIR$" />
|
||||
<recent name="$PROJECT_DIR$/keystatic/collections" />
|
||||
<recent name="$PROJECT_DIR$/keystatic/collections/system" />
|
||||
</key>
|
||||
</component>
|
||||
<component name="SharedIndexes">
|
||||
<attachedChunks>
|
||||
<set>
|
||||
<option value="bundled-js-predefined-d6986cc7102b-e03c56caf84a-JavaScript-WS-252.23892.411" />
|
||||
</set>
|
||||
</attachedChunks>
|
||||
</component>
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="Default task">
|
||||
<changelist id="c41707ed-a751-4a5e-bfaa-7bebd8a58741" name="Changes" comment="" />
|
||||
<created>1756802819394</created>
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1756802819394</updated>
|
||||
<workItem from="1756802820524" duration="57336000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="Added simple astrojs deploy">
|
||||
<option name="closed" value="true" />
|
||||
<created>1756802956526</created>
|
||||
<option name="number" value="00001" />
|
||||
<option name="presentableId" value="LOCAL-00001" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1756802956526</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00002" summary="Re-check astro-deploy">
|
||||
<option name="closed" value="true" />
|
||||
<created>1756803135592</created>
|
||||
<option name="number" value="00002" />
|
||||
<option name="presentableId" value="LOCAL-00002" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1756803135592</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00003" summary="Linting, prettier and postcss setup">
|
||||
<option name="closed" value="true" />
|
||||
<created>1756807359351</created>
|
||||
<option name="number" value="00003" />
|
||||
<option name="presentableId" value="LOCAL-00003" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1756807359351</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00004" summary="Added postcss config">
|
||||
<option name="closed" value="true" />
|
||||
<created>1756811324432</created>
|
||||
<option name="number" value="00004" />
|
||||
<option name="presentableId" value="LOCAL-00004" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1756811324432</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00005" summary="Added postcss config">
|
||||
<option name="closed" value="true" />
|
||||
<created>1756811378555</created>
|
||||
<option name="number" value="00005" />
|
||||
<option name="presentableId" value="LOCAL-00005" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1756811378555</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00006" summary="Added keystatic">
|
||||
<option name="closed" value="true" />
|
||||
<created>1756836138180</created>
|
||||
<option name="number" value="00006" />
|
||||
<option name="presentableId" value="LOCAL-00006" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1756836138180</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00007" summary="Added environment-dependent astro.config.mjs">
|
||||
<option name="closed" value="true" />
|
||||
<created>1756838138550</created>
|
||||
<option name="number" value="00007" />
|
||||
<option name="presentableId" value="LOCAL-00007" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1756838138550</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00008" summary="Added a baseline style for most elements">
|
||||
<option name="closed" value="true" />
|
||||
<created>1756909004310</created>
|
||||
<option name="number" value="00008" />
|
||||
<option name="presentableId" value="LOCAL-00008" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1756909004310</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="9" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="3" />
|
||||
</component>
|
||||
<component name="Vcs.Log.Tabs.Properties">
|
||||
<option name="TAB_STATES">
|
||||
<map>
|
||||
<entry key="MAIN">
|
||||
<value>
|
||||
<State />
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
</option>
|
||||
</component>
|
||||
<component name="VcsManagerConfiguration">
|
||||
<MESSAGE value="Added simple astrojs deploy" />
|
||||
<MESSAGE value="Re-check astro-deploy" />
|
||||
<MESSAGE value="Linting, prettier and postcss setup" />
|
||||
<MESSAGE value="Added postcss config" />
|
||||
<MESSAGE value="Added keystatic" />
|
||||
<MESSAGE value="Added environment-dependent astro.config.mjs" />
|
||||
<MESSAGE value="Added a baseline style for most elements" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="Added a baseline style for most elements" />
|
||||
</component>
|
||||
<component name="XDebuggerManager">
|
||||
<breakpoint-manager>
|
||||
<breakpoints>
|
||||
<line-breakpoint enabled="true" type="javascript">
|
||||
<url>file://$PROJECT_DIR$/src/definitions/collections/system/tags.ts</url>
|
||||
<line>11</line>
|
||||
<properties lambdaOrdinal="-1" />
|
||||
<option name="timeStamp" value="1" />
|
||||
</line-breakpoint>
|
||||
</breakpoints>
|
||||
</breakpoint-manager>
|
||||
</component>
|
||||
</project>
|
||||
16
.prettierrc.js
Normal file
16
.prettierrc.js
Normal file
@@ -0,0 +1,16 @@
|
||||
export default {
|
||||
semi: false,
|
||||
singleQuote: true,
|
||||
tabWidth: 2,
|
||||
trailingComma: 'es5',
|
||||
plugins: ['prettier-plugin-organize-imports'],
|
||||
overrides: [
|
||||
{
|
||||
files: '*.mdx',
|
||||
options: {
|
||||
parser: 'mdx',
|
||||
tabWidth: 4
|
||||
}
|
||||
}
|
||||
],
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import { dirname } from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import { FlatCompat } from "@eslint/eslintrc";
|
||||
import mdx from 'eslint-plugin-mdx'
|
||||
import markdown from '@eslint/markdown'
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
@@ -20,6 +22,14 @@ const eslintConfig = [
|
||||
"next-env.d.ts",
|
||||
],
|
||||
},
|
||||
{
|
||||
...mdx.flat,
|
||||
files: ['**/*.{md,mdx}'],
|
||||
},
|
||||
{
|
||||
files: ['**/*.md'],
|
||||
...markdown.configs.recommended,
|
||||
}
|
||||
];
|
||||
|
||||
export default eslintConfig;
|
||||
|
||||
6735
package-lock.json
generated
6735
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
25
package.json
25
package.json
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"name": "blog",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack",
|
||||
@@ -9,17 +10,33 @@
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/iosevka": "^5.2.5",
|
||||
"@fontsource/iosevka-aile": "^5.2.5",
|
||||
"next": "15.5.2",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0",
|
||||
"next": "15.5.2"
|
||||
"react-dom": "19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@eslint/markdown": "^7.2.0",
|
||||
"@fullhuman/postcss-purgecss": "^7.0.2",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.5.2",
|
||||
"@eslint/eslintrc": "^3"
|
||||
"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",
|
||||
"prettier-plugin-organize-imports": "^4.2.0",
|
||||
"stylelint": "^16.23.1",
|
||||
"stylelint-config-clean-order": "^7.0.0",
|
||||
"stylelint-config-html": "^1.1.0",
|
||||
"stylelint-config-standard": "^39.0.0",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
||||
36
postcss.config.js
Normal file
36
postcss.config.js
Normal file
@@ -0,0 +1,36 @@
|
||||
// postcss.config.js
|
||||
import postcssImport from 'postcss-import'
|
||||
import postcssPresetEnv from 'postcss-preset-env'
|
||||
import postcssUtilities from 'postcss-utilities'
|
||||
import postcssNesting from 'postcss-nesting'
|
||||
import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss'
|
||||
|
||||
const plugins = [
|
||||
postcssImport(),
|
||||
postcssPresetEnv({
|
||||
stage: 1,
|
||||
features: {
|
||||
"nesting-rules": false,
|
||||
},
|
||||
}),
|
||||
postcssUtilities(),
|
||||
postcssNesting(),
|
||||
]
|
||||
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
console.log("Adding PurgeCSS")
|
||||
plugins.push(
|
||||
purgeCSSPlugin({
|
||||
content: [
|
||||
"./src/**/*.{html,js,jsx,ts,tsx}", // Removed .astro, added Next.js patterns
|
||||
"./content/**/*.{md,mdx}",
|
||||
],
|
||||
safelist: ["html", "body"],
|
||||
variables: true
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
export default {
|
||||
plugins
|
||||
}
|
||||
370
src/app/foundation.css
vendored
Normal file
370
src/app/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: 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;
|
||||
}
|
||||
@@ -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');
|
||||
@@ -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
330
src/styles/base/form.css
Normal 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
28
src/styles/base/helpers.css
Normal 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
156
src/styles/base/inline.css
Normal 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
21
src/styles/base/keyframes.css
Normal 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
113
src/styles/base/lists.css
Normal 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
44
src/styles/base/tables.css
Normal 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
254
src/styles/base/typography.css
Normal 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
293
src/styles/base/variables.css
Normal 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
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;
|
||||
}
|
||||
22
stylelint.config.js
Normal file
22
stylelint.config.js
Normal file
@@ -0,0 +1,22 @@
|
||||
export default {
|
||||
extends: [
|
||||
'stylelint-config-standard',
|
||||
'stylelint-config-html',
|
||||
'stylelint-config-clean-order'
|
||||
],
|
||||
overrides: [
|
||||
{
|
||||
files: ['**/*.{js,jsx,ts,tsx}'],
|
||||
customSyntax: 'postcss-html',
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
'at-rule-no-unknown': [
|
||||
true,
|
||||
{
|
||||
ignoreAtRules: ['util', 'apply'],
|
||||
},
|
||||
],
|
||||
'no-descending-specificity': null,
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user