start something stylish 🐷💅 add sass, create layout components, sort styles and components into folders

web/src/css/base.scss

@@ -0,0 +1,98 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  min-height: 100%;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  color: var(--color-text);
+  background: var(--color-background);
+  font-family: var(--font-main);
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.4;
+
+  @media (max-width: 1000px) {
+    &.hideScroll {
+      overflow: hidden;
+      height: 100vh;
+    }
+  }
+}
+
+.site-main {
+  animation: fadeIn 1s ease-out forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+a {
+  color: inherit;
+  text-underline-offset: .1rem;
+}
+
+p {
+  font-size: var(--font-size-body);
+
+  &.lead {
+    font-size: var(--font-size-lead);
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+button {
+  border-radius: 10rem;
+  background: var(--color-text);
+  color: var(--color-background);
+  border: none;
+  padding: 1rem 1.5rem;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+
+  &:hover {
+    opacity: .8;
+  }
+}
+
+blockquote {
+  font-family: var(--font-serif);
+  font-size: 2.8rem;
+  font-style: italic;
+  margin: 1.8rem 0;
+}
+
+.site-main {
+  padding: var(--spacing-sitepadding);
+}

web/src/css/fonts.scss

@@ -0,0 +1,8 @@
+@import url("https://use.typekit.net/spa5smt.css");
+
+/*@font-face {
+  font-family: 'Avenir';
+  src: url('/assets/fonts/Avenir/Avenir.woff2') format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}*/

web/src/css/main.scss

@@ -0,0 +1,3 @@
+@import 'fonts.scss';
+@import 'variables.scss';
+@import 'base.scss';

web/src/css/variables.scss

@@ -0,0 +1,15 @@
+:root {
+  // font families
+  --font-main: 'Avenir Next', sans-serif;
+  --font-serif: 'p22-mackinac-pro', serif;
+
+  --font-size-body: 1rem;
+  --font-size-lead: 1.4rem;
+
+  // colors
+  --color-text: #333;
+  --color-background: #eee;
+
+  // spacing
+  --spacing-sitepadding: 2rem;
+}