From 5bdf09b9e1081fd6610fe85327611b2a56fe9ff2 Mon Sep 17 00:00:00 2001 From: Dave Date: Wed, 3 Sep 2025 16:16:43 +0200 Subject: [PATCH] Added a baseline style for most elements --- .stylelintrc.js | 24 +++ src/layouts/base.astro | 19 +- src/pages/index.astro | 320 +++++++++++++++++++++++++++++++- src/styles/base/elements.css | 10 - src/styles/base/form.css | 330 +++++++++++++++++++++++++++++++++ src/styles/base/helpers.css | 28 +++ src/styles/base/inline.css | 156 ++++++++++++++++ src/styles/base/keyframes.css | 21 +++ src/styles/base/lists.css | 113 +++++++++++ src/styles/base/tables.css | 44 +++++ src/styles/base/typography.css | 254 +++++++++++++++++++++++++ src/styles/base/variables.css | 100 +++++----- src/styles/main.css | 9 +- 13 files changed, 1371 insertions(+), 57 deletions(-) create mode 100644 .stylelintrc.js delete mode 100644 src/styles/base/elements.css create mode 100644 src/styles/base/form.css create mode 100644 src/styles/base/inline.css create mode 100644 src/styles/base/keyframes.css create mode 100644 src/styles/base/lists.css create mode 100644 src/styles/base/tables.css create mode 100644 src/styles/base/typography.css diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 0000000..ec84fce --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,24 @@ +export default { + extends: [ + 'stylelint-config-standard', + 'stylelint-config-html', // For .astro files + 'stylelint-config-clean-order' + ], + overrides: [ + { + files: ['**/*.astro'], + customSyntax: 'postcss-html', + }, + ], + rules: { + // Allow unknown at-rules for PostCSS utilities + 'at-rule-no-unknown': [ + true, + { + ignoreAtRules: ['util', 'apply'], // For postcss-utilities + }, + ], + // Allow CSS-in-JS style nesting + 'no-descending-specificity': null, + }, +} \ No newline at end of file diff --git a/src/layouts/base.astro b/src/layouts/base.astro index 40d3f28..0edab0e 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -2,7 +2,24 @@ const { title, description } = Astro.props import '../styles/foundation.css' import '@fontsource-variable/geist'; -import '@fontsource/iosevka-aile'; +import '@fontsource/iosevka-aile/100.css'; +import '@fontsource/iosevka-aile/200.css'; +import '@fontsource/iosevka-aile/300.css'; +import '@fontsource/iosevka-aile/400.css'; +import '@fontsource/iosevka-aile/500.css'; +import '@fontsource/iosevka-aile/600.css'; +import '@fontsource/iosevka-aile/700.css'; +import '@fontsource/iosevka-aile/800.css'; +import '@fontsource/iosevka-aile/900.css'; +import '@fontsource/iosevka-aile/100-italic.css'; +import '@fontsource/iosevka-aile/200-italic.css'; +import '@fontsource/iosevka-aile/300-italic.css'; +import '@fontsource/iosevka-aile/400-italic.css'; +import '@fontsource/iosevka-aile/500-italic.css'; +import '@fontsource/iosevka-aile/600-italic.css'; +import '@fontsource/iosevka-aile/700-italic.css'; +import '@fontsource/iosevka-aile/800-italic.css'; +import '@fontsource/iosevka-aile/900-italic.css'; import '@fontsource/iosevka'; import '../styles/main.css'; --- diff --git a/src/pages/index.astro b/src/pages/index.astro index 19dd281..3d6e05e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,6 +3,322 @@ import Layout from '../layouts/base.astro' --- -

Astro

-

Do Not Let Us Die In The Dark Night Of This Cold Winter, Dave!

+
+

Rods pursued studies dearer dangers Mellon spears lodgings.

+

Language Sméagol where? Forest cesspits talked reclaim verse dungeon Envenom 60 then venerable prolonging! There is only one Lord of the Ring.

+

Breeding job clothing talks caught Freda trust.

+

East dry because slinker deeper quarry knocks Sit. Treachery Front whim. Even the smallest person can change the course of the future.

+

Fence Toby reaction greed fired parting!

+

Do not take me for some conjurer of cheap tricks. Room aged Hobbitses! Wall odds force simply shield hmm Tuckborough pearl privilege grows. Ride amazing seeps lake guardian pretty Arwen retrieve stroke steps?

+
    +
  • Primary Equipment Loadout - Every adventurer must carry essential gear including weapons, armor, survival tools, and emergency supplies that could mean the difference between life and death in the depths of forgotten dungeons and abandoned ruins.
    • +
  • Weapon Categories and Combat Applications +
      +
    • Melee Weapons - Close combat instruments ranging from simple clubs and daggers to sophisticated swords and war hammers, each designed for specific tactical situations and requiring different skill sets to master effectively.
      • +
    • Ranged Weapons and Projectile Systems +
        +
      • Bows and Crossbows - Traditional projectile weapons that rely on mechanical tension to launch arrows and bolts with deadly accuracy across considerable distances, favored by hunters and scouts.
        • +
      • Firearms and Explosive Devices +
          +
        • Pistols - Compact handheld firearms suitable for close-quarters combat and as backup weapons when primary armaments fail or become unusable in tight spaces.
          • +
        • Rifles - Long-barreled precision weapons designed for accuracy at extended ranges, ideal for eliminating threats before they can close to melee distance.
          • +
        • Heavy Weapons - Devastating armaments including cannons, siege engines, and experimental warpstone-powered devices that can breach fortifications and eliminate multiple enemies.
          • +
        +
        • +
      • Thrown Weapons - Projectiles designed for manual deployment including knives, axes, and specialized implements that require significant skill and practice to use effectively in combat situations.
        • +
      +
      • +
    • Magic Items and Enchanted Artifacts - Supernatural implements that harness arcane energies to produce effects beyond the capabilities of mundane equipment, often requiring specific knowledge or bloodlines to activate safely.
      • +
    +
    • +
  • Protective Gear and Defensive Equipment - Armor systems, shields, and other defensive measures designed to reduce incoming damage and improve survival chances against the horrors that lurk in the darkness below.
    • +
+
    +
  • Helm's Deep saws rip outer special bowl determined.
    • +
  • Breached forgive Hornblowers galumphing drums respectable wretched.
    • +
  • Mellon slightest uttermost Isildur's sakes em.
    • +
  • Degree bone rift where sleep judgment Mordor.
    • +
  • Tickle watchful lightest dry very teaching pushes picking Shire root.
    • +
+

Maggot devils tea resisted person Sauron the White mist.

+

You shall not pass! Pelennor squash least crunchable feel faithless years well-done fun. Rock ending almost shared extend crooked alliances possible nightfall Dwarf fine risky.

+
    +
  1. Character Creation Process - The systematic approach to developing a playable character including attribute generation, skill selection, equipment procurement, and background development that establishes the foundation for all future adventures.
    2. +
  2. Combat Rules and Tactical Systems +
      +
    1. Initiative Phase Determination - The method by which turn order is established at the beginning of combat encounters, typically involving dice rolls modified by relevant characteristics and environmental factors.
      2. +
    2. Action Resolution Mechanics and Probability Systems +
        +
      1. Roll percentile dice against relevant skill values - The core mechanic requiring players to generate random numbers between 1 and 100 and compare the result to their character's applicable skill rating.
        2. +
      2. Compare results to skill values and apply situational modifiers +
          +
        1. Success conditions require rolling under the target skill value after applying all relevant bonuses and penalties from equipment, positioning, and environmental conditions.
          2. +
        2. Failure occurs when the dice result exceeds the modified skill value, resulting in missed attacks, failed attempts, or other negative outcomes depending on the specific action attempted.
          3. +
        3. Critical results happen on natural rolls of 01-05 for automatic success or 96-00 for catastrophic failure, regardless of skill levels or modifiers applied to the attempt.
          4. +
        +
        3. +
      3. Apply environmental modifiers, equipment bonuses, and situational penalties that reflect the current tactical situation and the character's preparation level for the specific challenge being attempted.
        4. +
      +
      3. +
    3. Damage Resolution and Wound Tracking - The system for determining injury severity, applying armor protection values, and tracking the cumulative effects of combat damage on character performance and survival.
      4. +
    +
    3. +
  3. Experience and Advancement Systems - The mechanisms by which characters improve their capabilities over time through successful completion of adventures, skill usage, and deliberate training between expeditions.
    4. +
+
    +
  1. Spent begins Saruman become interrupt thing arts wide.
    2. +
  2. Barad-dûr gives forest worm closer.
    3. +
  3. Comings mission province Haleth character chill special service?
    4. +
  4. Fine mean hours triumph loyal jelly league someone's raze Bagshot!
    5. +
  5. Bars ostler crack spreads should spring too dissuade s World.
    6. +
+

Else ah Bolger torment minutes hours.

+

Possibly Moon effect utterly tipsy overcrowd next misplaced? Covet parting Brandybuck hungers crevice hours pork haven't tempted clothing. All right, then. Keep your secrets.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnfoldGrumblingAgoLifetimePillaged
Ladwhiparrowsfairerbeggedstabs
Appreciationtrouble-makingalonehorridprovethey'll
Filthytombsvesttorchesbarrelspowerful
Insteadforetoldranksstarejoyunequaled
Knewrelationsfightingspiritsgongsbears
Seasoningnutone'sapprovegrayblessing
beheadingdisturberlaidforthwatchingdomains
+

Sodding tongue Elros leaves perceived south pocket.

+

Born revenge utterly that'll Goblin-town gladness. Chips sustained times apocalypse closest Alfrid grow. I can cut across country easily enough. Clearing toss unhappy Smeagol's gifted?

+
+

Sam... I'm glad you are with me.

+
—Ravens, shore wizards skin harpoon
+
+
+
+ Industrial machinery in abandoned factory +
Rusted conveyor systems in the former Blackwater Manufacturing plant, photographed during demolition in 2023.
+
+
+
+
+

More glad painted Sauron the White troop holidays captive has. Many pierced repel bathroom absence glimpse Tom. All right, then. Keep your secrets.

+
+
Common saying among veteran adventurers in the Undercity.
+
+
+ Equipment Requirements +

All adventurers must carry a minimum of: one weapon (melee or ranged), basic armor or protective gear, emergency rations for 3 days, torch or light source, 50 feet of rope, and a first aid kit.

+

Optional but recommended: lockpicks, crowbar, grappling hook, healing potions, and backup weapon.

+
+ +
+ Combat Mechanics Overview +

Initiative System

+

Roll 1d10 + Initiative characteristic. Highest goes first.

+ +

Attack Resolution

+

Roll percentile dice under your relevant skill. Success means you hit, failure means you miss.

+ +
    +
  • Melee combat uses Weapon Skill
    • +
  • Ranged combat uses Ballistic Skill
    • +
  • Damage equals weapon damage + Strength bonus
    • +
+
+ +
+ Currently Expanded Section +

This details element starts open to test the expanded state styling.

+
+
Raised Morgoth powerless roaming sing fire-breather regurgitation was.
+

More glad painted Sauron the White troop holidays captive has. Many pierced repel bathroom absence glimpse Tom. All right, then. Keep your secrets.

+ 
Prepared Tilda adventure characters crush. Wilds overlook blessed walk requested. Ligulas sat eavesdropping breathes exceeding dim. Deeper clever becomes regain Dimholt fronts.
+
Resilient closest regret vile birthright innards Middle-earth.
+

Shire herald dear hard army carry without proposition. Thranduil faint me chiefest middle hey-diddle-diddle squeaked sawed landlord. Hallway clot-head's injury journey Minas Morgul hasty? Ring sight fit Boffins S. Manage Bifur ways pity's swarming doubt. Wilderness breathing woe liege Khazad-dum King's handy! Join corpses rack tongs knockers gongs four-day Théoden's idiot. Hooded Kingsfoil biding may. Extra passion cutting skinned. Hurry problem delays Bucklebury. Corks hell hundred deal Barahir unprepared. What'll Dwarvish down bought haunted steps. Master's given Hobbit afterwards bodies gibbet. Towers stars productive Baggins. Juicy opinion note Déagol tough books spreads. Decide imaginable Goblin-mutant Silvan fellow. Sit Agreed thick drink pearl tale. Legolas approve night's retrieve endless.

+
+
+
How
+
Looks resilient eggs Tauriel higher supplant evisceration idiot barely.
+
Names
+
Slugs play Dwalin late parapet ending how morning?
+
Holidays even disease thunder-battle nice irregular cooked trouble'll Minas Tirith mistaken!
+
Mice
+
Productive Sit mend ones raiding hutch couldn't thirty-four.
+
Facing others act doing lives usually pity Legolas laws daughter.
+
Lords embalmed nature we'd grievances Thror shelter tragedy.
+
+
+
+ Need bandy council +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ Wring moments +
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + +
+
+ + +
+
+ +
+
+ +
+
+ +
+ +
+ + +
+
+
+
diff --git a/src/styles/base/elements.css b/src/styles/base/elements.css deleted file mode 100644 index 53f009e..0000000 --- a/src/styles/base/elements.css +++ /dev/null @@ -1,10 +0,0 @@ -body { - background-color: var(--color-surface-base); - font-family: var(--typo-font-body); - 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); -} \ No newline at end of file diff --git a/src/styles/base/form.css b/src/styles/base/form.css new file mode 100644 index 0000000..8d061a7 --- /dev/null +++ b/src/styles/base/form.css @@ -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); + } +} diff --git a/src/styles/base/helpers.css b/src/styles/base/helpers.css index e69de29..fa00b05 100644 --- a/src/styles/base/helpers.css +++ b/src/styles/base/helpers.css @@ -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); + } +} \ No newline at end of file diff --git a/src/styles/base/inline.css b/src/styles/base/inline.css new file mode 100644 index 0000000..d6f3348 --- /dev/null +++ b/src/styles/base/inline.css @@ -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); +} \ No newline at end of file diff --git a/src/styles/base/keyframes.css b/src/styles/base/keyframes.css new file mode 100644 index 0000000..4245122 --- /dev/null +++ b/src/styles/base/keyframes.css @@ -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); + } +} \ No newline at end of file diff --git a/src/styles/base/lists.css b/src/styles/base/lists.css new file mode 100644 index 0000000..012fc32 --- /dev/null +++ b/src/styles/base/lists.css @@ -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; + } +} \ No newline at end of file diff --git a/src/styles/base/tables.css b/src/styles/base/tables.css new file mode 100644 index 0000000..ec75974 --- /dev/null +++ b/src/styles/base/tables.css @@ -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); + } +} \ No newline at end of file diff --git a/src/styles/base/typography.css b/src/styles/base/typography.css new file mode 100644 index 0000000..86fc2dc --- /dev/null +++ b/src/styles/base/typography.css @@ -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: "🞁"; + } + } + } +} diff --git a/src/styles/base/variables.css b/src/styles/base/variables.css index b9f0b7c..f091d7d 100644 --- a/src/styles/base/variables.css +++ b/src/styles/base/variables.css @@ -2,9 +2,9 @@ /* === TYPOGRAPHY === */ /* == Font Families == */ - --font-display: 'Geist Variable', sans-serif; - --font-body: 'Iosevka Aile', sans-serif; - --font-mono: 'Iosevka', monospace; + --font-display: 'Geist Variable'; + --font-body: 'Iosevka Aile'; + --font-mono: 'Iosevka'; /* == Font Sizes == */ --typo-size-base: 16px; @@ -43,6 +43,8 @@ --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; @@ -53,50 +55,64 @@ /* === SPACING === */ - /* == Base Spacing Units == */ - --spacing-0: 0; - --spacing-px: 1px; - --spacing-05: 0.125rem; /* 2px */ - --spacing-1: 0.25rem; /* 4px */ - --spacing-2: 0.5rem; /* 8px */ - --spacing-3: 0.75rem; /* 12px */ - --spacing-4: 1rem; /* 16px */ - --spacing-5: 1.25rem; /* 20px */ - --spacing-6: 1.5rem; /* 24px */ - --spacing-8: 2rem; /* 32px */ - --spacing-10: 2.5rem; /* 40px */ - --spacing-12: 3rem; /* 48px */ - --spacing-16: 4rem; /* 64px */ - --spacing-20: 5rem; /* 80px */ - --spacing-24: 6rem; /* 96px */ - --spacing-32: 8rem; /* 128px */ + /* == 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(--spacing-0); - --spacing-hairline: var(--spacing-px); - --spacing-tight: var(--spacing-1); - --spacing-snug: var(--spacing-2); - --spacing-cozy: var(--spacing-4); - --spacing-comfortable: var(--spacing-6); - --spacing-relaxed: var(--spacing-8); - --spacing-spacious: var(--spacing-12); - --spacing-generous: var(--spacing-16); - --spacing-luxurious: var(--spacing-24); - --spacing-expansive: var(--spacing-32); + --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-comfortable); + --element-list-indent-l1: var(--spacing-cozy); --element-list-indent-l2: var(--spacing-cozy); - --element-list-indent-l3: var(--spacing-snug); - --element-list-indent-l4: var(--spacing-tight); + --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: '◼'; + --element-ul-symbol-l1: '⯃'; + --element-ul-symbol-l2: '⯁'; + --element-ul-symbol-l3: '⯆'; + --element-ul-symbol-l4: '⯀'; /* == Ordered List Styling == */ --element-ol-prefix-l1: ''; @@ -106,9 +122,9 @@ --element-ol-style-l2: lower-alpha; --element-ol-suffix-l2: '.)'; --element-ol-prefix-l3: ''; - --element-ol-style-l3: ; - --element-ol-suffix-l3: 'decimal-leading-zero'; - --element-ol-prefix-l4: '.)'; + --element-ol-style-l3: decimal-leading-zero; + --element-ol-suffix-l3: ''; + --element-ol-prefix-l4: ''; --element-ol-style-l4: lower-greek; --element-ol-suffix-l4: '.)'; @@ -216,7 +232,7 @@ --color-quarternary-emphasis: var(--color-palette-slate-blue); /* Text Base Colors */ - --color-text-primary: var(--color-palette-woodsmoke); /* Main Body Texts, headlines */ + --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 */ diff --git a/src/styles/main.css b/src/styles/main.css index e2acb20..7d08248 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,3 +1,8 @@ @import url('base/variables.css'); -@import url('base/helpers.css'); -@import url('base/elements.css'); \ No newline at end of file +@import url('base/typography.css'); +@import url('base/lists.css'); +@import url('base/tables.css'); +@import url('base/inline.css'); +@import url('base/form.css'); +@import url('base/keyframes.css'); +@import url('base/helpers.css'); \ No newline at end of file