From 7323b1a91aee8f0e86f1cb0685e1b98f2f702e7c Mon Sep 17 00:00:00 2001
From: Matt DeCamp <matthewdecamp@gmail.com>
Date: Thu, 16 Sep 2021 16:51:09 -0400
Subject: [PATCH] link, text, icons, nav and variable styles

---
 src/assets/styles/base/_links.scss        |  0
 src/assets/styles/base/_text.scss         |  0
 src/assets/styles/components/_icons.scss  |  5 +++++
 src/assets/styles/components/_nav.scss    | 10 ++++++++++
 src/assets/styles/utility/_variables.scss |  7 +++++--
 5 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/styles/base/_links.scss
 create mode 100644 src/assets/styles/base/_text.scss
 create mode 100644 src/assets/styles/components/_icons.scss
 create mode 100644 src/assets/styles/components/_nav.scss

diff --git a/src/assets/styles/base/_links.scss b/src/assets/styles/base/_links.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/styles/base/_text.scss b/src/assets/styles/base/_text.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/styles/components/_icons.scss b/src/assets/styles/components/_icons.scss
new file mode 100644
index 0000000..df2a47b
--- /dev/null
+++ b/src/assets/styles/components/_icons.scss
@@ -0,0 +1,5 @@
+.icon {
+    fill: var(--text-secondary);
+    width: var(--s2);
+    height: var(--s2);
+}
diff --git a/src/assets/styles/components/_nav.scss b/src/assets/styles/components/_nav.scss
new file mode 100644
index 0000000..6e59387
--- /dev/null
+++ b/src/assets/styles/components/_nav.scss
@@ -0,0 +1,10 @@
+nav {
+  & ul {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    gap: var(--s0);
+
+    font-size: var(--s1);
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/utility/_variables.scss b/src/assets/styles/utility/_variables.scss
index c02c37c..7fe30f3 100644
--- a/src/assets/styles/utility/_variables.scss
+++ b/src/assets/styles/utility/_variables.scss
@@ -2,9 +2,10 @@
   // COLORS
   --background-color: #ffffff;
   --background-color-secondary: #301e4e;
+  --background-color-tertiary: #ff6e6c;
 
-  --headline: #1f1135;
-  --text-paragraph: #1f1135;
+  --text: #1f1135;
+  --text-secondary: #ffffff;
   --sub-headline: #301e4e;
 
   --link-color: #ff6e6c;
@@ -26,4 +27,6 @@
   --s3: calc(var(--s2) * var(--ratio));
   --s4: calc(var(--s3) * var(--ratio));
   --s5: calc(var(--s4) * var(--ratio));
+
+  --max-width: 1000px;
 }