2 files changed, 82 insertions, 0 deletions
diff --git a/sass/base/_base.scss b/sass/base/_base.scss
new file mode 100644
index 0000000..2211bca
--- /dev/null
+++ b/sass/base/_base.scss
@@ -0,0 +1,43 @@
+@use "../abstracts" as *;
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  // min-height to ensure footer sticks to bottom and background doesn't repeat
+  min-height: 100vh;
+  width: 100vw;
+}
+
+body {
+  background: linear-gradient(
+    45deg,
+    rgba($col-main-light, 0.89) 0%,
+    rgba($col-main-dark, 0.84) 100%
+  );
+  background-repeat: no-repeat;
+  background-size: cover;
+  box-sizing: border-box;
+  color: $text-main;
+  // grid to ensure footer sticks to the bottom in all cases; body consists of header (auto), main (1fr) and footer (auto); needs min-height 100vh too, here added to "html, body"
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  font-family: "Inter", sans-serif;
+  font-size: $small-text;
+  line-height: 1.5;
+}
+
+main {
+  height: 100%;
+  margin: $margin-main;
+
+  & * {
+    animation: fade-in 2s ease-out;
+  }
+}
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
new file mode 100644
index 0000000..38f3a3f
--- /dev/null
+++ b/sass/base/_typography.scss
@@ -0,0 +1,39 @@
+@use "../abstracts/variables" as *;
+
+.text-link {
+  color: $text-special-dark;
+
+  &:hover {
+    background-color: $text-special-dark;
+    border-radius: 2px;
+    color: $text-dark;
+    text-decoration: none;
+  }
+}
+
+.text-emphasis {
+  color: $text-special-light;
+  font-weight: bold;
+}
+
+.title {
+  font-family: "Archivo Black", sans-serif;
+  color: $text-special-light;
+  font-size: $big-text;
+  width: fit-content;
+}
+
+.subtitle {
+  font-family: "Archivo Black", sans-serif;
+  color: $text-special-dark;
+  font-size: $medium-text;
+}
+
+.name {
+  font-size: calc(2 * $big-text);
+}
+
+.note-auriga {
+  color: $text-special-dark;
+  font-style: italic;
+}