diff options
Diffstat (limited to 'examples/blog/public/global.css')
| -rw-r--r-- | examples/blog/public/global.css | 130 |
1 files changed, 67 insertions, 63 deletions
diff --git a/examples/blog/public/global.css b/examples/blog/public/global.css index 3566fce27..e8498b58e 100644 --- a/examples/blog/public/global.css +++ b/examples/blog/public/global.css @@ -1,95 +1,99 @@ :root { - --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; - --color-green: #17c083; + --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', + 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; + --color-green: #17c083; } * { - box-sizing: border-box; - margin: 0; + box-sizing: border-box; + margin: 0; } html { - display: grid; - width: 100%; - max-width: 100vw; - overflow: hidden; - height: 100%; - background-color: #000014; + display: grid; + width: 100%; + max-width: 100vw; + overflow: hidden; + height: 100%; + background-color: #000014; } html, body { - padding: 0; - font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px); - font-family: var(--font-sans); - font-weight: 400; - background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%); - background-repeat: no-repeat; - color: #f3f4f6; + padding: 0; + font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px); + font-family: var(--font-sans); + font-weight: 400; + background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%); + background-repeat: no-repeat; + color: #f3f4f6; } body { - position: relative; - display: grid; - place-items: center; - min-width: 100%; - max-width: 100vw; - min-height: 100vh; - overflow-x: hidden; + position: relative; + display: grid; + place-items: center; + min-width: 100%; + max-width: 100vw; + min-height: 100vh; + overflow-x: hidden; } .visually-hidden { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; } a { - position: relative; - text-decoration: none; - color: var(--color-green); - padding: 0.05em 0.125em; - margin: -0.05em -0.125em; - transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1); - z-index: 0; - display: inline-block; + position: relative; + text-decoration: none; + color: var(--color-green); + padding: 0.05em 0.125em; + margin: -0.05em -0.125em; + transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1); + z-index: 0; + display: inline-block; } -a:hover, a:focus { - color: black; +a:hover, +a:focus { + color: black; } -a:hover::before, a:focus::before { - transform: scaleY(1); - background: var(--color-green); +a:hover::before, +a:focus::before { + transform: scaleY(1); + background: var(--color-green); } a:visited { - color: var(--color-green); + color: var(--color-green); } -a:visited:hover, a:visited:focus { - color: black; +a:visited:hover, +a:visited:focus { + color: black; } a::before { - transform-origin: bottom center; - content: ''; - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - inset: 0; - background: var(--color-green); - pointer-events: none; - transform: scaleY(0.05); - transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1); - z-index: -1; -}
\ No newline at end of file + transform-origin: bottom center; + content: ''; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + inset: 0; + background: var(--color-green); + pointer-events: none; + transform: scaleY(0.05); + transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1); + z-index: -1; +} |