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);
+}