🦝 Install eleventy

_site/scss/base.scss

@@ -0,0 +1,240 @@
+@charset 'utf-8';
+  @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;
+  $yellow: #ffff00;
+
+  $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: monotype-grotesque, 'Lucida Sans', sans-serif;
+  $serif: orpheuspro, Palatino, Times, serif;
+  $ext-sans: monotype-grotesque-extended, Arial Black, sans-serif;
+  $con-sans: monotype-grotesque-condensed, Arial Narrow, sans-serif;
+
+  $thin: 200;
+  $light: 300;
+  $regular: 400;
+  $medium: 500;
+  $bold: 700;
+
+body {
+  font-family: $sans-serif;
+  font-size: 20px;
+  }
+
+h1 {
+  font-family: $ext-sans;
+  font-weight: $bold;
+}
+
+h2, h3 {
+  font-family: $ext-sans;
+  font-weight: $regular;
+  letter-spacing: .1;
+}
+
+ul {
+  padding: 0 0 0 1em;
+  margin: 0;
+}
+
+li {
+  list-style: none;
+  padding-bottom: .5em;
+  text-transform: capitalize;
+  &.subterm {
+  padding-left: 10px;
+  }
+
+  &:last-child {
+  padding: 0;
+  }
+
+  &.subterm:before {
+  content: "\21B3 ";
+  padding-right: 5px;
+  }
+}
+
+  // GRID //
+
+.auto-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
+  grid-gap: 1rem; 
+  }
+
+// MEDIA // 
+
+@media screen and (min-width: 200px) {
+
+  #title, #description, #summary {
+  grid-column: span 4;
+  }
+
+  body {
+  padding: 1em;
+  }
+
+  .list, .item {
+  grid-column: span 4;
+  }
+
+  .list {
+    padding: 0 auto;
+    margin: 0;
+  }
+
+  h1 {
+    font-size: 3em;
+  }
+
+  h2 {
+    font-size: 1.25em;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  body {
+  padding: 2em;
+  }
+
+  .grid {
+    grid-row-gap: 1em;
+  }
+
+  #title {
+    grid-column: 1 / span 2;
+    grid-row: 1;
+  }
+
+  #summary {
+  grid-column: 3 / span 2;
+  grid-row: 1;
+  }
+
+  #description {
+    grid-column: span 4;
+    grid-row: 2; 
+  }
+  
+  .item {
+  grid-column: span 2;
+  }
+
+  h1 {
+    font-size: 3.5em;
+  }
+
+  h2 {
+    font-size: 1.3em;
+  }
+}
+
+.small {
+  font-size: .75em;
+}
+
+@media screen and (min-width: 1024px) {
+
+  #title {
+    grid-column: 1 / span 1;
+    grid-row: 1
+  }
+
+   #description {
+    grid-column: 2 / span 1;
+    grid-row: 1
+  }
+
+   #summary {
+    grid-column: 1 / span 1;
+    grid-row: 2
+  }
+
+  .list {
+  grid-row: span 3;
+  grid-column: span 1;
+  }
+}
+
+.block__dictionary {
+  max-width: 50rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 1rem;
+}
+
+
+
+.block__word {
+display: flex;
+flex-direction: column;
+margin: 1rem;
+}
+
+p {
+margin: .75rem 0;
+font-size: 1.25rem;
+}
+
+.style__italics {
+font-style: italic;
+}
+
+.word {
+  &__title {
+  font-family: $serif;
+  font-weight: 900;
+  font-size: 2.5rem;
+  line-height: 1.25;
+  }
+
+  &__definition {
+  font-family: $sans-serif;
+  font-size: 1.5rem;
+  }
+
+  &__speech {
+  font-size: .5em;
+  font-family: $sans-serif;
+  }
+
+  &__signal {
+  border-top: 1px solid currentcolor;
+  // border-radius: 100px;
+  display: inline-block;
+  font-family: $ext-sans;
+  text-transform: uppercase;
+  font-size: .75rem;
+  letter-spacing: .15rem;
+  padding: .5rem .75rem;
+  
+  &__avoid {
+    color: red;
+    
+    &:before {
+      content: "🚨";
+      margin-left: -2.15rem;
+    }
+  }
+  
+  &__better {
+  color: green;
+    
+    &:before  {
+      content: "👍";
+      margin-left: -2.15rem;
+      }
+  }
+}
+}