diff --git a/src/assets/css/global/base/global-styles.css b/src/assets/css/global/base/global-styles.css index 3d60a6c..53b6af5 100644 --- a/src/assets/css/global/base/global-styles.css +++ b/src/assets/css/global/base/global-styles.css @@ -76,7 +76,7 @@ textarea { } svg { - block-size: 2ex; + block-size: 0.6lh; inline-size: auto; flex: none; } @@ -87,21 +87,12 @@ strong { } hr { + border: none; height: 1px; width: 10%; - margin-block: var(--space-m-l); + margin-block: var(--flow-space, var(--space-m-l)); margin-inline-start: 0; background-color: var(--color-bg-accent-2); - border: 0; -} - -a { - color: currentcolor; - text-decoration-thickness: 0.08em; -} - -a:hover { - text-decoration: none; } figcaption { @@ -109,12 +100,33 @@ figcaption { font-size: var(--size-step-min-1); text-align: center; padding-block-end: var(--space-xs); - border-bottom: 1px solid var(--color-bg-accent); + border-bottom: var(--stroke); +} + +a { + text-decoration-thickness: 0.15ex; + text-underline-offset: 0.2ch; +} + +a:not([class]):hover { + text-decoration: none; +} + +:focus { + outline: none; } :focus-visible { - outline: 3px solid; - outline-offset: 0.3ch; + outline: 3px solid var(--focus-color, currentColor); + outline-offset: var(--focus-offset, 0.3ch); +} + +/* reduce focus offset for Firefox +*/ +@supports (-moz-appearance: none) { + :root { + --focus-offset: 0.08em; + } } ::selection { diff --git a/src/assets/css/global/base/reset.css b/src/assets/css/global/base/reset.css index c4ad2a0..ef44ccc 100644 --- a/src/assets/css/global/base/reset.css +++ b/src/assets/css/global/base/reset.css @@ -56,14 +56,14 @@ ol[role='list'] { list-style: none; } -/* Padding for lists */ [role='list'] { padding: 0; } /* Anchor styles */ -a:not([class]) { +a { text-decoration-skip-ink: auto; + color: currentColor; } /* Image styles */ @@ -100,7 +100,6 @@ textarea { resize: block; } -/* Textarea height */ textarea:not([rows]) { min-height: 10em; } @@ -153,7 +152,7 @@ html:has(dialog[open]:modal) { /* Reduced motion */ @media (prefers-reduced-motion: reduce) { - html:focus-within { + :focus-within { scroll-behavior: auto; } diff --git a/src/assets/css/global/base/variables.css b/src/assets/css/global/base/variables.css index 919ae40..bf7edd5 100644 --- a/src/assets/css/global/base/variables.css +++ b/src/assets/css/global/base/variables.css @@ -6,9 +6,10 @@ --transition-duration: 250ms; --transition-timing: ease; --wrapper-width: 85rem; - --tracking: -0.05ch; + --tracking: -0.04ch; --tracking-s: -0.075ch; - --tracking-wide: 0.05ch; + --tracking-wide: 0.04ch; + --stroke: 1px solid var(--color-bg-accent); --gradient-rainbow: linear-gradient(90deg, #cf4662 10%, #fbbe25 30%, #62c95c 50%, #08bccb 75%, #a977d5 90%); --gradient-conic: conic-gradient( @@ -26,6 +27,7 @@ --color-light: var(--color-gray-100); --color-dark: var(--color-gray-900); + --color-mid: var(--color-gray-400); } /* Light theme */