files upload

scss/base.scss

@@ -0,0 +1,97 @@
+@charset 'utf-8';
+  @import url('https://fonts.googleapis.com/css?family=Inconsolata|Noto+Serif+KR');
+  @import url("https://use.typekit.net/qlo3dpu.css");
+
+// COLORS //
+  $primary-color: #0e4bff; //cobalt blue is so pretty//
+  $secondary-color: #F3F315; //
+
+  $black: #222222;
+  $white: #ffffff;
+  $pistachio: #e5ffe5;
+
+  $dark-grey: #4F4F4F;
+  $mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y
+  $light-grey: #eeeeee; // for backgrounds only
+
+
+// TYPOGRAPHY // 
+  $sans-serif: Inconsolata, Helvetica, sans-serif;
+  $serif: 'Noto Serif KR', Georgia, serif;
+  $mono: Courier, mono;
+
+  $thin: 200;
+  $light: 300;
+  $regular: 400;
+  $medium: 500;
+  $bold: 700;
+
+body {
+  font-family: $sans-serif;
+  font-size: 20px;
+  padding: 4em;
+  background: #e5ffe5;
+  }
+
+h1 {
+  font-family: $serif;
+  font-weight: $thin;
+  border-bottom: 20px $white solid;
+}
+
+h2 {
+  font-family: $serif;
+  font-weight: $bold;
+}
+
+li {
+  list-style: none;
+  padding-bottom: .5em;
+  text-transform: capitalize;
+}
+
+  // GRID //
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, [col] 1fr [col]);
+  grid-row-gap: 2em;
+  grid-column-gap: 1em;
+  grid-gap: .5em;
+}
+
+
+
+@media screen and (min-width: 200px) {
+  .item {
+  grid-column: span 4;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1em;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  .item {
+  grid-column: span 2;
+  }
+
+  h1 {
+    font-size: 4em;
+  }
+
+  h2 {
+    font-size: 1.5em;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .item {
+  grid-column: span 1;
+  }
+}