Added a baseline style for most elements
All checks were successful
Build and Deploy Astro Site / deploy (push) Successful in 23s
All checks were successful
Build and Deploy Astro Site / deploy (push) Successful in 23s
This commit is contained in:
24
.stylelintrc.js
Normal file
24
.stylelintrc.js
Normal file
@@ -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,
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -2,7 +2,24 @@
|
|||||||
const { title, description } = Astro.props
|
const { title, description } = Astro.props
|
||||||
import '../styles/foundation.css'
|
import '../styles/foundation.css'
|
||||||
import '@fontsource-variable/geist';
|
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 '@fontsource/iosevka';
|
||||||
import '../styles/main.css';
|
import '../styles/main.css';
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -3,6 +3,322 @@ import Layout from '../layouts/base.astro'
|
|||||||
---
|
---
|
||||||
|
|
||||||
<Layout title={`Dave | DMG`}>
|
<Layout title={`Dave | DMG`}>
|
||||||
<h1>Astro</h1>
|
<main class="content">
|
||||||
<p>Do Not Let Us Die In The Dark Night Of This Cold Winter, Dave!</p>
|
<h1>Rods pursued studies dearer dangers Mellon spears lodgings.</h1>
|
||||||
|
<p>Language Sméagol where? Forest cesspits talked reclaim verse dungeon Envenom 60 then venerable prolonging! There is only one Lord of the Ring.</p>
|
||||||
|
<h2>Breeding job clothing talks caught Freda trust.</h2>
|
||||||
|
<p>East dry because slinker deeper quarry knocks Sit. Treachery Front whim. Even the smallest person can change the course of the future.</p>
|
||||||
|
<h3>Fence Toby reaction greed fired parting!</h3>
|
||||||
|
<p>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?</p>
|
||||||
|
<ul>
|
||||||
|
<li>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.</li>
|
||||||
|
<li>Weapon Categories and Combat Applications
|
||||||
|
<ul>
|
||||||
|
<li>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.</li>
|
||||||
|
<li>Ranged Weapons and Projectile Systems
|
||||||
|
<ul>
|
||||||
|
<li>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.</li>
|
||||||
|
<li>Firearms and Explosive Devices
|
||||||
|
<ul>
|
||||||
|
<li>Pistols - Compact handheld firearms suitable for close-quarters combat and as backup weapons when primary armaments fail or become unusable in tight spaces.</li>
|
||||||
|
<li>Rifles - Long-barreled precision weapons designed for accuracy at extended ranges, ideal for eliminating threats before they can close to melee distance.</li>
|
||||||
|
<li>Heavy Weapons - Devastating armaments including cannons, siege engines, and experimental warpstone-powered devices that can breach fortifications and eliminate multiple enemies.</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>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.</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>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.</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>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.</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>Helm's Deep saws rip outer special bowl determined.</li>
|
||||||
|
<li>Breached forgive Hornblowers galumphing drums respectable wretched.</li>
|
||||||
|
<li>Mellon slightest uttermost Isildur's sakes em.</li>
|
||||||
|
<li>Degree bone rift where sleep judgment Mordor.</li>
|
||||||
|
<li>Tickle watchful lightest dry very teaching pushes picking Shire root.</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Maggot devils tea resisted person Sauron the White mist.</h3>
|
||||||
|
<p>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.</p>
|
||||||
|
<ol>
|
||||||
|
<li>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.</li>
|
||||||
|
<li>Combat Rules and Tactical Systems
|
||||||
|
<ol>
|
||||||
|
<li>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.</li>
|
||||||
|
<li>Action Resolution Mechanics and Probability Systems
|
||||||
|
<ol>
|
||||||
|
<li>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.</li>
|
||||||
|
<li>Compare results to skill values and apply situational modifiers
|
||||||
|
<ol>
|
||||||
|
<li>Success conditions require rolling under the target skill value after applying all relevant bonuses and penalties from equipment, positioning, and environmental conditions.</li>
|
||||||
|
<li>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.</li>
|
||||||
|
<li>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.</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>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.</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>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.</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>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.</li>
|
||||||
|
</ol>
|
||||||
|
<ol>
|
||||||
|
<li>Spent begins Saruman become interrupt thing arts wide.</li>
|
||||||
|
<li>Barad-dûr gives forest worm closer.</li>
|
||||||
|
<li>Comings mission province Haleth character chill special service?</li>
|
||||||
|
<li>Fine mean hours triumph loyal jelly league someone's raze Bagshot!</li>
|
||||||
|
<li>Bars ostler crack spreads should spring too dissuade s World.</li>
|
||||||
|
</ol>
|
||||||
|
<h3>Else ah Bolger torment minutes hours.</h3>
|
||||||
|
<p>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.</p>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>Unfold</th>
|
||||||
|
<th>Grumbling</th>
|
||||||
|
<th>Ago</th>
|
||||||
|
<th>Lifetime</th>
|
||||||
|
<th>Pillaged</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Lad</td>
|
||||||
|
<td>whip</td>
|
||||||
|
<td>arrows</td>
|
||||||
|
<td>fairer</td>
|
||||||
|
<td>begged</td>
|
||||||
|
<td>stabs</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Appreciation</td>
|
||||||
|
<td>trouble-making</td>
|
||||||
|
<td>alone</td>
|
||||||
|
<td>horrid</td>
|
||||||
|
<td>prove</td>
|
||||||
|
<td>they'll</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Filthy</td>
|
||||||
|
<td>tombs</td>
|
||||||
|
<td>vest</td>
|
||||||
|
<td>torches</td>
|
||||||
|
<td>barrels</td>
|
||||||
|
<td>powerful</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Instead</td>
|
||||||
|
<td>foretold</td>
|
||||||
|
<td>ranks</td>
|
||||||
|
<td>stare</td>
|
||||||
|
<td>joy</td>
|
||||||
|
<td>unequaled</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Knew</td>
|
||||||
|
<td>relations</td>
|
||||||
|
<td>fighting</td>
|
||||||
|
<td>spirits</td>
|
||||||
|
<td>gongs</td>
|
||||||
|
<td>bears</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Seasoning</td>
|
||||||
|
<td>nut</td>
|
||||||
|
<td>one's</td>
|
||||||
|
<td>approve</td>
|
||||||
|
<td>gray</td>
|
||||||
|
<td>blessing</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td>beheading</td>
|
||||||
|
<td>disturber</td>
|
||||||
|
<td>laid</td>
|
||||||
|
<td>forth</td>
|
||||||
|
<td>watching</td>
|
||||||
|
<td>domains</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
<h4>Sodding tongue Elros leaves perceived south pocket.</h4>
|
||||||
|
<p>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?</p>
|
||||||
|
<blockquote>
|
||||||
|
<p>Sam... I'm glad you are with me.</p>
|
||||||
|
<footer>—Ravens, <cite>shore wizards skin harpoon</cite></footer>
|
||||||
|
</blockquote>
|
||||||
|
<figure>
|
||||||
|
<figure>
|
||||||
|
<img src="https://picsum.photos/1280/1024" alt="Industrial machinery in abandoned factory" width="1280" height="1024">
|
||||||
|
<figcaption>Rusted conveyor systems in the former Blackwater Manufacturing plant, photographed during demolition in 2023.</figcaption>
|
||||||
|
</figure>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<blockquote>
|
||||||
|
<p>More glad painted Sauron the White troop holidays captive has. Many pierced repel bathroom absence glimpse Tom. All right, then. Keep your secrets.</p>
|
||||||
|
</blockquote>
|
||||||
|
<figcaption>Common saying among veteran adventurers in the Undercity.</figcaption>
|
||||||
|
</figure>
|
||||||
|
<details>
|
||||||
|
<summary>Equipment Requirements</summary>
|
||||||
|
<p>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.</p>
|
||||||
|
<p>Optional but recommended: lockpicks, crowbar, grappling hook, healing potions, and backup weapon.</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Combat Mechanics Overview</summary>
|
||||||
|
<h4>Initiative System</h4>
|
||||||
|
<p>Roll 1d10 + Initiative characteristic. Highest goes first.</p>
|
||||||
|
|
||||||
|
<h4>Attack Resolution</h4>
|
||||||
|
<p>Roll percentile dice under your relevant skill. Success means you hit, failure means you miss.</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Melee combat uses Weapon Skill</li>
|
||||||
|
<li>Ranged combat uses Ballistic Skill</li>
|
||||||
|
<li>Damage equals weapon damage + Strength bonus</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details open>
|
||||||
|
<summary>Currently Expanded Section</summary>
|
||||||
|
<p>This details element starts open to test the expanded state styling.</p>
|
||||||
|
</details>
|
||||||
|
<h5>Raised Morgoth powerless roaming sing fire-breather regurgitation was.</h5>
|
||||||
|
<p>More glad painted Sauron the White troop holidays captive has. Many pierced repel bathroom absence glimpse Tom. All right, then. Keep your secrets.</p>
|
||||||
|
<pre>Prepared Tilda adventure characters crush. Wilds overlook blessed walk requested. Ligulas sat eavesdropping breathes exceeding dim. Deeper clever becomes regain Dimholt fronts.</pre>
|
||||||
|
<h6>Resilient closest regret vile birthright innards Middle-earth.</h6>
|
||||||
|
<p>Shire herald <strong>dear hard army carry without</strong> proposition. Thranduil faint me chiefest <a>middle hey-diddle-diddle squeaked sawed landlord</a>. <del>Hallway clot-head's injury</del> journey Minas Morgul hasty? Ring sight fit Boffins <kbd>S</kbd>. Manage Bifur ways <mark>pity's swarming</mark> doubt. Wilderness breathing woe liege <ins>Khazad-dum King's</ins> handy! Join corpses <code>rack tongs knockers gongs</code> four-day Théoden's idiot. <var>Hooded</var> Kingsfoil biding may. Extra <time>Radagast the Brown</time> passion cutting skinned. Hurry problem <sup>delays</sup> Bucklebury. Corks hell <small>hundred deal</small> Barahir unprepared. What'll Dwarvish down <em>bought haunted steps</em>. Master's given Hobbit <dfn>afterwards bodies gibbet</dfn>. Towers stars <sub>productive</sub> Baggins. Juicy <samp>opinion note</samp> Déagol tough books spreads. Decide imaginable <q>Goblin-mutant Silvan</q> fellow. <cite>Sit Agreed</cite> thick drink pearl tale. Legolas approve night's <abbr>retrieve</abbr> endless.</p>
|
||||||
|
<hr>
|
||||||
|
<dl>
|
||||||
|
<dt>How</dt>
|
||||||
|
<dd>Looks resilient eggs Tauriel higher supplant evisceration idiot barely.</dd>
|
||||||
|
<dt>Names</dt>
|
||||||
|
<dd>Slugs play Dwalin late parapet ending how morning?</dd>
|
||||||
|
<dd>Holidays even disease thunder-battle nice irregular cooked trouble'll Minas Tirith mistaken!</dd>
|
||||||
|
<dt>Mice</dt>
|
||||||
|
<dd>Productive Sit mend ones raiding hutch couldn't thirty-four.</dd>
|
||||||
|
<dd>Facing others act doing lives usually pity Legolas laws daughter.</dd>
|
||||||
|
<dd>Lords embalmed nature we'd grievances Thror shelter tragedy.</dd>
|
||||||
|
</dl>
|
||||||
|
<form>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Need bandy council</legend>
|
||||||
|
<div>
|
||||||
|
<label>Text</label>
|
||||||
|
<input type="text">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Email</label>
|
||||||
|
<input type="email">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Password</label>
|
||||||
|
<input type="password">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Url</label>
|
||||||
|
<input type="url">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Number</label>
|
||||||
|
<input type="number">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Tel</label>
|
||||||
|
<input type="tel">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Search</label>
|
||||||
|
<input type="search">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Time</label>
|
||||||
|
<input type="time">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Date</label>
|
||||||
|
<input type="date">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Datetime-local</label>
|
||||||
|
<input type="datetime-local">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Week</label>
|
||||||
|
<input type="week">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Textarea</label>
|
||||||
|
<textarea></textarea>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Wring moments</legend>
|
||||||
|
<div>
|
||||||
|
<label>Month</label>
|
||||||
|
<input type="month">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label><input type="checkbox" name="checkbox">tipsy smuggler</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Color</label>
|
||||||
|
<input type="color">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>File</label>
|
||||||
|
<input type="file">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Hidden</label>
|
||||||
|
<input type="hidden">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Image</label>
|
||||||
|
<input type="image" src="https://picsum.photos/96">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>malt grass fall door's infested red</label>
|
||||||
|
<label><input type="radio" name="radio">rain joy</label>
|
||||||
|
<label><input type="radio" name="radio">plates grieve</label>
|
||||||
|
<label><input type="radio" name="radio">arranged listened</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Range</label>
|
||||||
|
<input type="range">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="button" value="Button">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="reset" value="Reset">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="submit" value="Submit">
|
||||||
|
</div>
|
||||||
|
<button>infected awoke</button>
|
||||||
|
<div>
|
||||||
|
<label>Select</label>
|
||||||
|
<select>
|
||||||
|
<optgroup label="rubbish waited tastes">
|
||||||
|
<option>myth</option>
|
||||||
|
<option>metals</option>
|
||||||
|
<option>would</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="thunderstorm particularly breach">
|
||||||
|
<option>began</option>
|
||||||
|
<option>threads</option>
|
||||||
|
<option>tight</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@@ -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);
|
|
||||||
}
|
|
||||||
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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: "🞁";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -2,9 +2,9 @@
|
|||||||
/* === TYPOGRAPHY === */
|
/* === TYPOGRAPHY === */
|
||||||
|
|
||||||
/* == Font Families == */
|
/* == Font Families == */
|
||||||
--font-display: 'Geist Variable', sans-serif;
|
--font-display: 'Geist Variable';
|
||||||
--font-body: 'Iosevka Aile', sans-serif;
|
--font-body: 'Iosevka Aile';
|
||||||
--font-mono: 'Iosevka', monospace;
|
--font-mono: 'Iosevka';
|
||||||
|
|
||||||
/* == Font Sizes == */
|
/* == Font Sizes == */
|
||||||
--typo-size-base: 16px;
|
--typo-size-base: 16px;
|
||||||
@@ -43,6 +43,8 @@
|
|||||||
--typo-spacing-loosest: 0.2em; /* 0.2em - extremely loose */
|
--typo-spacing-loosest: 0.2em; /* 0.2em - extremely loose */
|
||||||
|
|
||||||
/* == Font Weight == */
|
/* == Font Weight == */
|
||||||
|
--typo-weight-thin: 100;
|
||||||
|
--typo-weight-extralight: 200;
|
||||||
--typo-weight-light: 300;
|
--typo-weight-light: 300;
|
||||||
--typo-weight-regular: 400;
|
--typo-weight-regular: 400;
|
||||||
--typo-weight-medium: 500;
|
--typo-weight-medium: 500;
|
||||||
@@ -53,50 +55,64 @@
|
|||||||
|
|
||||||
/* === SPACING === */
|
/* === SPACING === */
|
||||||
|
|
||||||
/* == Base Spacing Units == */
|
/* == Base Size Units == */
|
||||||
--spacing-0: 0;
|
--size-0: 0;
|
||||||
--spacing-px: 1px;
|
--size-px: 1px;
|
||||||
--spacing-05: 0.125rem; /* 2px */
|
--size-05: 0.125rem; /* 2px */
|
||||||
--spacing-1: 0.25rem; /* 4px */
|
--size-1: 0.25rem; /* 4px */
|
||||||
--spacing-2: 0.5rem; /* 8px */
|
--size-2: 0.5rem; /* 8px */
|
||||||
--spacing-3: 0.75rem; /* 12px */
|
--size-3: 0.75rem; /* 12px */
|
||||||
--spacing-4: 1rem; /* 16px */
|
--size-4: 1rem; /* 16px */
|
||||||
--spacing-5: 1.25rem; /* 20px */
|
--size-5: 1.25rem; /* 20px */
|
||||||
--spacing-6: 1.5rem; /* 24px */
|
--size-6: 1.5rem; /* 24px */
|
||||||
--spacing-8: 2rem; /* 32px */
|
--size-8: 2rem; /* 32px */
|
||||||
--spacing-10: 2.5rem; /* 40px */
|
--size-10: 2.5rem; /* 40px */
|
||||||
--spacing-12: 3rem; /* 48px */
|
--size-12: 3rem; /* 48px */
|
||||||
--spacing-16: 4rem; /* 64px */
|
--size-16: 4rem; /* 64px */
|
||||||
--spacing-20: 5rem; /* 80px */
|
--size-20: 5rem; /* 80px */
|
||||||
--spacing-24: 6rem; /* 96px */
|
--size-24: 6rem; /* 96px */
|
||||||
--spacing-32: 8rem; /* 128px */
|
--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 == */
|
/* == Semantic Spacing == */
|
||||||
--spacing-none: var(--spacing-0);
|
--spacing-none: var(--size-0);
|
||||||
--spacing-hairline: var(--spacing-px);
|
--spacing-hairline: var(--size-px);
|
||||||
--spacing-tight: var(--spacing-1);
|
--spacing-tight: var(--size-1);
|
||||||
--spacing-snug: var(--spacing-2);
|
--spacing-snug: var(--size-2);
|
||||||
--spacing-cozy: var(--spacing-4);
|
--spacing-cozy: var(--size-4);
|
||||||
--spacing-comfortable: var(--spacing-6);
|
--spacing-comfortable: var(--size-6);
|
||||||
--spacing-relaxed: var(--spacing-8);
|
--spacing-relaxed: var(--size-8);
|
||||||
--spacing-spacious: var(--spacing-12);
|
--spacing-spacious: var(--size-12);
|
||||||
--spacing-generous: var(--spacing-16);
|
--spacing-generous: var(--size-16);
|
||||||
--spacing-luxurious: var(--spacing-24);
|
--spacing-luxurious: var(--size-24);
|
||||||
--spacing-expansive: var(--spacing-32);
|
--spacing-expansive: var(--size-32);
|
||||||
|
|
||||||
/* === LIST STYLING === */
|
/* === LIST STYLING === */
|
||||||
|
|
||||||
/* == List Indentation Levels == */
|
/* == 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-l2: var(--spacing-cozy);
|
||||||
--element-list-indent-l3: var(--spacing-snug);
|
--element-list-indent-l3: var(--spacing-cozy);
|
||||||
--element-list-indent-l4: var(--spacing-tight);
|
--element-list-indent-l4: var(--spacing-cozy);
|
||||||
|
|
||||||
/* == Unordered List Symbols == */
|
/* == Unordered List Symbols == */
|
||||||
--element-ul-symbol-l1: '▸';
|
--element-ul-symbol-l1: '⯃';
|
||||||
--element-ul-symbol-l2: '●';
|
--element-ul-symbol-l2: '⯁';
|
||||||
--element-ul-symbol-l3: '▾';
|
--element-ul-symbol-l3: '⯆';
|
||||||
--element-ul-symbol-l4: '◼';
|
--element-ul-symbol-l4: '⯀';
|
||||||
|
|
||||||
/* == Ordered List Styling == */
|
/* == Ordered List Styling == */
|
||||||
--element-ol-prefix-l1: '';
|
--element-ol-prefix-l1: '';
|
||||||
@@ -106,9 +122,9 @@
|
|||||||
--element-ol-style-l2: lower-alpha;
|
--element-ol-style-l2: lower-alpha;
|
||||||
--element-ol-suffix-l2: '.)';
|
--element-ol-suffix-l2: '.)';
|
||||||
--element-ol-prefix-l3: '';
|
--element-ol-prefix-l3: '';
|
||||||
--element-ol-style-l3: ;
|
--element-ol-style-l3: decimal-leading-zero;
|
||||||
--element-ol-suffix-l3: 'decimal-leading-zero';
|
--element-ol-suffix-l3: '';
|
||||||
--element-ol-prefix-l4: '.)';
|
--element-ol-prefix-l4: '';
|
||||||
--element-ol-style-l4: lower-greek;
|
--element-ol-style-l4: lower-greek;
|
||||||
--element-ol-suffix-l4: '.)';
|
--element-ol-suffix-l4: '.)';
|
||||||
|
|
||||||
@@ -216,7 +232,7 @@
|
|||||||
--color-quarternary-emphasis: var(--color-palette-slate-blue);
|
--color-quarternary-emphasis: var(--color-palette-slate-blue);
|
||||||
|
|
||||||
/* Text Base Colors */
|
/* 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-secondary: var(--color-palette-charcoal); /* Subheading, Secondary Info */
|
||||||
--color-text-tertiary: var(--color-palette-charcoal-gray); /* Captions, Meta Text */
|
--color-text-tertiary: var(--color-palette-charcoal-gray); /* Captions, Meta Text */
|
||||||
--color-text-quarternary: var(--color-palette-carbon); /* Placeholder Text */
|
--color-text-quarternary: var(--color-palette-carbon); /* Placeholder Text */
|
||||||
|
|||||||
@@ -1,3 +1,8 @@
|
|||||||
@import url('base/variables.css');
|
@import url('base/variables.css');
|
||||||
|
@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');
|
@import url('base/helpers.css');
|
||||||
@import url('base/elements.css');
|
|
||||||
Reference in New Issue
Block a user