Added support for Sass

2022-06-14 01:34:15 +02:00
parent 1d61efeda0
commit 41b08b86e0
8 changed files with 525 additions and 29 deletions
@@ -0,0 +1,69 @@
+/* TODO: Don't use CDN and serve as static files */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
+
+:root {
+    --fg-300: #777;
+    --fg-400: #666;
+    --fg-500: #333;
+    --fg-600: #222;
+
+    --bg-000: #f0f0f0;
+    --bg-100: #f0f0f0;
+    --bg-500: #eaeaea;
+    --bg-550: #ecedee;
+    --bg-600: #e4e5e7;
+    --bg-700: #d5d5d5;
+    --bg-750: #c8c8c8;
+    --bg-800: #c0c0c0;
+    --bg-850: #b8b8b8;
+
+    --accent-300: #5cc969;
+    --accent-400: #4eaa59;
+    --accent-500: #278542;
+    --accent-600: #2e974c;
+    --accent-700: #154d24;
+    --accent-800: #002d0d;
+
+    --ft-ss: 'Inter', sans-serif;
+    --ft-ss-wt-light: 300;
+    --ft-ss-wt-normal: 400;
+    --ft-ss-wt-medium: 500;
+    --ft-ss-wt-bold: 700;
+
+    --shadow-500: 0 0 16px 0 #00000018;
+
+    // Components
+    --text-input-bg: var(--bg-000);
+    --text-input-readonly-bg: var(--bg-600);
+    --text-input-readonly-fg: var(--fg-300);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+}
+
+html {
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    background: var(--bg-500);
+    color: var(--fg-500);
+
+    font-family: var(--ft-ss);
+    font-size: 17px;
+    font-weight: var(--ft-ss-wt-normal);
+
+    width: 100%;
+    min-height: 100%;
+
+    position: relative;
+}
+
+@import './typography.scss';
@@ -0,0 +1,78 @@
+h1,
+h2,
+h3,
+h4 {
+    margin: 0;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+
+    font-weight: var(--font-weight-light);
+}
+
+h1 {
+    font-size: 2rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+}
+
+h3 {
+    font-size: 1.35rem;
+}
+
+h4 {
+    font-size: 1.2rem;
+    font-weight: var(--font-weight-bold);
+}
+
+p,
+ul,
+ol,
+li {
+    margin: 0;
+    width: 70ch;
+    max-width: 100%;
+    line-height: 1.8;
+}
+
+p + p {
+    padding-top: 0.5rem;
+}
+
+ul,
+ol {
+    padding: 0 0 0 1.5rem;
+}
+
+hr {
+    width: 50ch;
+    height: 1px;
+    margin: 0;
+
+    border: none;
+    background-color: var(--bg-darker-2);
+}
+
+pre {
+    margin: 0.5rem 0;
+
+    background: var(--bg-lighter);
+    border: 1px solid #cbcbcb;
+    border-radius: 2px;
+    box-shadow: 0 2px 4px 0 #00000033;
+
+    font-size: 90%;
+
+    display: flex;
+    overflow-x: auto;
+}
+
+pre > code {
+    display: block;
+    margin: 0.25rem;
+}
+
+p.center {
+    text-align: center;
+}