From fcc96bbf0a0f8b4056c310b76ad33c0ea8621c57 Mon Sep 17 00:00:00 2001 From: Andrzej Stepien Date: Wed, 24 Apr 2024 16:22:46 +0200 Subject: [PATCH] add css --- defaults.css | 62 ++++++++++++++++++++++++++++++++++++++++++++ styles.css | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 135 insertions(+) create mode 100644 defaults.css create mode 100644 styles.css diff --git a/defaults.css b/defaults.css new file mode 100644 index 0000000..4f95935 --- /dev/null +++ b/defaults.css @@ -0,0 +1,62 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +img { + display: block; + max-width: 100%; +} + +menu:not(article menu), +ol:not(article ol), +ul:not(article ul) { + list-style: none; +} + +menu, +ol, +ul { + padding-left: 0; +} + +article ol, +article ul { + list-style-position: inside; +} + +a { + /* Places underlines below the descenders */ + text-underline-position: under; + + + /* Sets the thickness as a percentage of the font size */ + text-decoration-thickness: 8; +} + +/* = the root */ +html { + font-size: 62.5%; + /* (62.5/100) * 16px = 10px */ + -webkit-text-size-adjust: none; + /* for iOS Safari */ + text-size-adjust: none; + /* for other mobile browsers */ +} + +@media (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } +} + +label, +button, +select, +summary, +[type=radio], +[type=submit], +[type=checkbox] { + cursor: pointer; +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..cdb8e7c --- /dev/null +++ b/styles.css @@ -0,0 +1,73 @@ +@font-face { + font-family: GoMono; + src: url(fonts/GoMonoNerdFont-Regular.ttf); + font-weight: 400; + font-style: normal; +} + +:root { + --text: #e0def4; + --love: #eb6f92; + --gold: #f6c177; + --rose: #ebbcba; + --pine: #31748f; + --foam: #9ccfd8; + --iris: #c4a7e7; + + --base: #191724; + --surface: #1f1d2e; + --overlay: #26233a; + + --hl-med: #403d52; + --hl-high: #524f67; +} + +body { + background-color: var(--base); +} + +h1, +h2, +h3, +h4 { + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: var(--love); +} + +main { + font-family: GoMono, serif; + font-size: 2rem; + width: 60%; + margin: auto; + color: var(--text); +} + +p { + background-color: var(--surface); + border-radius: 10rem; + padding: 2rem; +} + +b { + color: var(--gold); +} + + +a { + text-decoration: none; + color: var(--foam); +} + +a:visited { + color: var(--pine); +} + +a:hover { + background-color: pink; +} + +li { + list-style-type: ' '; + margin-bottom: 2rem; + +}