From 171ae2214ae2345a92372c8fa10bb29c62cb25a0 Mon Sep 17 00:00:00 2001
From: "Elf M. Sternberg" <elf.sternberg@gmail.com>
Date: Sun, 24 Apr 2022 21:38:29 -0700
Subject: [PATCH] Start the CSS design

Gonna go for the liquid scaling, but I think I'm gonna need a spreadsheet for
all the calculations I want to do. Given I have a min 360 and a max 960
width (is that even reasonable?) and I want a maximum text width of 30 ems, I
think I could write a spreadsheet that could calculate all of the margins and
clamp them.

It's annoying that I have to calc(clamp()) to keep Sass from fucking with me,
but at least it's do-able.  Maybe as a separate CSS file?
---
 .gitignore                    |  4 +++
 config.toml                   |  2 +-
 sass/design/_definitions.scss |  8 +++++
 sass/design/_fonts.scss       | 61 +++++++++++++++++++++++++++++++++++
 sass/main.scss                | 31 ++++++++++++++++++
 5 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 .gitignore
 create mode 100644 sass/design/_definitions.scss
 create mode 100644 sass/design/_fonts.scss
 create mode 100644 sass/main.scss

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f323499
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+*#
+.#*
+*~
+public/
diff --git a/config.toml b/config.toml
index 8b2b7d4..ac413ac 100644
--- a/config.toml
+++ b/config.toml
@@ -1,5 +1,5 @@
 # The URL the site will be built for
-base_url = "https://elfsternberg.com/notes"
+base_url = "http://192.168.1.143:1025"
 
 # Whether to automatically compile all Sass files in the sass directory
 compile_sass = true
diff --git a/sass/design/_definitions.scss b/sass/design/_definitions.scss
new file mode 100644
index 0000000..b4e2e2f
--- /dev/null
+++ b/sass/design/_definitions.scss
@@ -0,0 +1,8 @@
+:root {
+  --primary-color: #520022;
+  --secondary-color: #dbff98;
+  --background-color: #ffffff;
+  --background-secondary-color: #dcdcdc;
+  --text-color: #1f000d;
+}
+    
diff --git a/sass/design/_fonts.scss b/sass/design/_fonts.scss
new file mode 100644
index 0000000..bde1e8a
--- /dev/null
+++ b/sass/design/_fonts.scss
@@ -0,0 +1,61 @@
+/* Nunito-Regular - latin */
+
+@font-face {
+  font-family: "Nunito";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url("fonts/nunito/Nunito-Regular.ttf") format("ttf"),
+    url("fonts/nunito/Nunito-Regular.woff2") format("woff2"),
+    url("fonts/nunito/Nunito-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* nunito-500 - latin */
+@font-face {
+  font-family: "Nunito";
+  font-style: normal;
+  font-weight: 500;
+  src:
+    url("fonts/nunito/Nunito-SemiBold.woff2") format("woff2"),
+    url("fonts/nunito/Nunito-SemiBold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* nunito-700 - latin */
+@font-face {
+  font-family: "Nunito";
+  font-style: normal;
+  font-weight: 700;
+  src:
+    url("fonts/nunito/Nunito-Bold.woff2") format("woff2"),
+    url("fonts/nunito/Nunito-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* nunito-italic - latin */
+@font-face {
+  font-family: "Nunito";
+  font-style: italic;
+  font-weight: 400;
+  src:
+    url("fonts/nunito/Nunito-Italic.woff2") format("woff2"),
+    url("fonts/nunito/Nunito-Italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* nunito-500italic - latin */
+@font-face {
+  font-family: "Nunito";
+  font-style: italic;
+  font-weight: 500;
+  src:
+    url("fonts/nunito/Nunito-SemiBoldItalic.woff2") format("woff2"),
+    url("fonts/nunito/Nunito-SemiBoldItalic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* nunito-BoldItalic - latin */
+@font-face {
+  font-family: "Nunito";
+  font-style: italic;
+  font-weight: 700;
+  src:
+    url("fonts/nunito/Nunito-BoldItalic.woff2") format("woff2"),
+    url("fonts/nunito/Nunito-BoldItalic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
diff --git a/sass/main.scss b/sass/main.scss
new file mode 100644
index 0000000..e0aa0c6
--- /dev/null
+++ b/sass/main.scss
@@ -0,0 +1,31 @@
+@import "design/definitions";
+@import "design/fonts";
+
+:root {
+  font-size: calc(clamp(0.875rem, .725rem + 0.6666vw, 1.125rem));
+  font-family: "Nunito", sans-serif;
+}
+
+body {
+  font-size: calc(clamp(0.875rem, .725rem + 0.6666vw, 1.125rem));
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+}
+  
+header.header {
+  position: fixed;
+  background-color: var(--background-color, #ffffff);
+}
+
+.container {
+    width: 100%;
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.navbar .container {
+  display: flex;
+  align-items: flex-start;
+}