From f725b36dac38d0e6ac293b82617f5b0f29e56134 Mon Sep 17 00:00:00 2001 From: Anhgelus Morhtuuzh Date: Mon, 29 Sep 2025 14:37:35 +0200 Subject: feat(design): base text --- design/style.css | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 design/style.css (limited to 'design/style.css') diff --git a/design/style.css b/design/style.css new file mode 100644 index 0000000..d0b8c02 --- /dev/null +++ b/design/style.css @@ -0,0 +1,87 @@ +:root { + --color-dark: #04151F; + --color-gray: #BCB3BB; /* quote */ + --color-light: #EFF7F6; + --color-rose: #F2B5D4; /* link accent */ + --color-light-rose: #F6CBE1; /* link accent hover */ + --color-green: #C9CBA3; /* highlight */ + + font-size: 20px; +} + +body { + font-family: Raveo, Inter, sans-serif; + + background: var(--color-dark); + color: var(--color-light); + + padding: 2rem 4rem; +} + +body * { + line-height: 1.4em; +} + +article { + max-width: 800px; + margin: 0 auto; +} + +h1, h2, h3 { + font-weight: 500; + + margin-bottom: 0.5rem; +} + +h1 { + font-size: 2.75rem; +} + +h2 { + font-size: 2rem; + margin-top: 2rem; +} + +h3 { + font-size: 1.5rem; + margin-top: 1.5rem; +} + +p { + margin-bottom: 1rem; +} + +a { + color: var(--color-rose); + text-decoration: underline; + &:hover { + color: #F6CBE1; + } +} + +em, cite { + font-style: italic; +} + +b, *::selection { + background: var(--color-green); + color: var(--color-dark); + padding: 0.05em 0.1em; + &::selection { + background: var(--color-light); + } +} + +.quote { + font-size: 0.85rem; +} + +blockquote { + padding: 0.5rem 2rem; + margin-bottom: 0.25rem; + + color: var(--color-gray); + + border-left: var(--color-rose) solid 0.25em; +} + -- cgit v1.2.3