19 style guide

assets/html.css

@@ -1,10 +1,3 @@
-/* Lessons were learned here: */
-@media (min-width: 820px /* 51.25rem *//* 820 / 16 */) {
-  html {
-    font-size: calc(100% + 10 * (100vw - 1440px) / 900);
-  }
-}
-
 /* 
   Global CSS Variables 
 ****************************/
@@ -26,7 +19,45 @@
   --font-heading: 'Poppins', sans-serif;
   --font-body: 'Arimo', sans-serif;
   --mobile-nav-transition-duration: .3s;
+
+  --type-scale-base: calc(18rem/16);
+  --scale-multiplier: 1.2;
+  --type-scale-00: calc(var(--type-scale-base) / var(--scale-multiplier) / var(--scale-multiplier));
+  --type-scale-0: calc(var(--type-scale-base) / var(--scale-multiplier));
+  --type-scale-1: var(--type-scale-base);
+  --type-scale-2: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier));
+  --type-scale-3: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+  --type-scale-4: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+  --type-scale-5: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+  --type-scale-6: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+  --type-scale-7: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+  --type-scale-8: calc(var(--type-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+
+  --spatial-scale-base: calc(var(--type-scale-base) * .705);
+  --spatial-scale-00: calc(var(--spatial-scale-base) / var(--scale-multiplier) / var(--scale-multiplier));
+  --spatial-scale-0: calc(var(--spatial-scale-base) / var(--scale-multiplier));
+  --spatial-scale-1: var(--spatial-scale-base);
+  --spatial-scale-2: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier));
+  --spatial-scale-3: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+  --spatial-scale-4: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+  --spatial-scale-5: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+  --spatial-scale-6: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+  --spatial-scale-7: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+  --spatial-scale-8: calc(var(--spatial-scale-base) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier) * var(--scale-multiplier));
+
 }
+
+/* Lessons were learned here: */
+@media (min-width: 820px /* 51.25rem *//* 820 / 16 */) {
+  html {
+    font-size: calc(100% + 10 * (100vw - 1440px) / 900);
+  }
+  :root {
+    --scale-multiplier: 1.25;
+    --type-scale-base: calc(22rem/16);
+  }
+}
+
 /*
   Global styles
 ****************************/

components/ContactCta.vue

@@ -5,7 +5,7 @@
       <img class="image-desktop" src="/img/project-collage-desktop.jpg" alt="" />
     </div>
     <div class="content">
-      <h1>There’s so much more to talk&nbsp;about!</h1>
+      <h1 class="title">There’s so much more to talk&nbsp;about!</h1>
       <p>I’ve worked on many different teams and challenges. Some of that work hasn’t been published here yet&mdash;<strong>much of it can’t be</strong>. The&nbsp;best way to get to know what I have to offer is to talk shop over&nbsp;coffee.</p>
       <cta-link class="cta" href="https://www.linkedin.com/in/danhiester" variant="white">Contact me on LinkedIn</cta-link>
     </div>
@@ -33,7 +33,7 @@ export default ContactCta
 .ContactCta {
   background: #486172;
   color: var(--white);
-  padding: 0 0 2rem 0;
+  padding: 0 0 var(--spatial-scale-3) 0;
 }
 .image-mobile {
   width: 100%;
@@ -42,36 +42,35 @@ export default ContactCta
   display: none;
 }
 .content {
-  margin: 0 1.25rem;
+  margin: 0 var(--spatial-scale-3);
   padding: 0;
   overflow: hidden;
-  & > h1 {
+  & > .title {
     font-weight: 400;
-    font-size: calc(30rem/16);
-    line-height: calc(38rem/16);
-    margin: 1em 0 .25em;
+    font-size: var(--type-scale-2);
+    line-height: var(--spatial-scale-6);
+    margin: 1em 0 var(--spatial-scale-1);
   }
   & > p {
-    font-size: 1rem;
-    line-height: 1.5rem;
-    margin: .5em 0 1.5em;
+    font-size: var(--type-scale-1);
+    line-height: var(--spatial-scale-5);
+    margin: var(--spatial-scale-1) 0 var(--spatial-scale-3);
   }
 }
+.cta {
+  max-width: 20rem;
+  margin-right: auto;
+  margin-left: auto;
+}
 
 @media (--viewport-small) {
   .content {
     margin: 0 auto;
     max-width: 30rem;
-    & > h1 {
-      margin-bottom: .5em;
+    & > .title {
       text-align: center;
     }
   }
-  .cta {
-    max-width: 20rem;
-    margin-right: auto;
-    margin-left: auto;
-  }
 }
 @media (--viewport-medium) {
   .ContactCta {
@@ -85,20 +84,22 @@ export default ContactCta
   .content {
     flex-basis: 47%;
     padding-right: 1.5rem;
-    & > h1, & > p, & > .cta {
+    & > .title, & > p, & > .cta {
       max-width: 22rem;
       margin-right: auto;
       margin-left: auto;
     }
-    & > h1 {
-      font-size: calc(36rem/16);
-      line-height: calc(50em/36);
+    & > .title {
+      font-size: var(--type-scale-2);
+      line-height: var(--spatial-scale-5);
       margin-top: 0;
+      margin-bottom: var(--spatial-scale-1);
       text-align: left;
     }
     & > p {
-      font-size: calc(18rem/16);
-      line-height: calc(28rem/16);
+      font-size: var(--type-scale-0);
+      line-height: var(--spatial-scale-3);
+      margin-bottom: var(--spatial-scale-2);
     }
   }
   .image-container {

components/DyLogo.vue

@@ -9,7 +9,6 @@
   </svg>
 </template>
 
-
 <script lang="ts">
 import { Vue, Component, Prop } from "nuxt-property-decorator"
 
@@ -43,4 +42,3 @@ class DyLogo extends Vue {
 }
 export default DyLogo
 </script>
-

components/content/Anthology.vue

@@ -29,16 +29,18 @@ export default Anthology
   padding: 0 calc(20rem/16);
 }
 .anthology-list {
-  display: flex;
-  flex-direction: column;
   padding-bottom: 1.5rem;
 }
 @media (--viewport-medium) {
   .anthology {
     margin: 2rem 0;
     padding: 0;
+    &:first-child {
+      margin-top: 0;
+    }
   }
   .anthology-list {
+    display: flex;
     flex-direction: row;
     padding-bottom: 0;
   }

components/content/AnthologyHero.vue

@@ -31,32 +31,31 @@ export default AnthologyHero
 
 <style lang="postcss" scoped>
 .AnthologyHero {
-  display: flex;
-  flex-direction: column;
+  overflow: hidden;
 }
 .title {
   color: var(--white);
-  font-size: calc(24rem/16);
+  font-size: var(--type-scale-2);
   font-weight: 400;
-  line-height: calc(38em/30);
-  margin: calc(35em/30) 0 calc(20em/30) 0;
+  line-height: 1.375em;
+  margin: var(--spatial-scale-4) 0 var(--spatial-scale-1);
   text-align: center;
 }
 .description {
-  font-size: 1rem;
-  line-height: calc(24em/16);
+  font-size: var(--type-scale-1);
+  line-height: var(--spatial-scale-5);
 }
 .image {
-  margin: 0 15%;
+  margin: var(--spatial-scale-1) 15%;
   & > img {
     width: 100%;
   }
 }
 .subhead {
-  font-size: calc(24rem/16);
+  font-size: var(--type-scale-2);
   font-weight: 400;
-  line-height: 1.26667em;
-  margin: 1.16667em 0 .66667em;
+  line-height: 1.375em;
+  margin: var(--spatial-scale-2) 0 var(--spatial-scale-1);
   text-align: center;
 }
 @media (--viewport-small) {
@@ -69,6 +68,7 @@ export default AnthologyHero
 @media (--viewport-medium) {
   .AnthologyHero {
     display: flex;
+    flex-direction: column;
     height: 25.5rem;
     justify-content: center;
     overflow: hidden;
@@ -81,7 +81,11 @@ export default AnthologyHero
   }
   .subhead {
     display: none;
-  }  
+  }
+  .description {
+    font-size: var(--type-scale-0);
+    line-height: var(--spatial-scale-3);
+  }
   .image {
     margin: 0;
     position: absolute;
@@ -93,7 +97,7 @@ export default AnthologyHero
   /* Modification classes */
   .Anthology--inroads {
     & .title {
-      font-size: calc(48rem/16) !important;
+      font-size: var(--type-scale-4) !important;
     }
   }
 }

components/content/AnthologyItem.vue

@@ -40,11 +40,8 @@ export default AnthologyItem
   background-color: var(--white);
   border-radius: calc(8rem/16);
   color: var(--gray-400);
-  margin: calc(12rem/16) 0;
-  padding: 1rem;
-  &:first-of-type {
-    margin-top: calc(15rem/16);
-  }
+  margin: var(--spatial-scale-2) 0;
+  padding: var(--spatial-scale-3) var(--spatial-scale-1) var(--spatial-scale-1);
   & .type {
     color: var(--gray-600);
   }
@@ -54,13 +51,14 @@ export default AnthologyItem
   }
 }
 .description {
-  margin: calc(5rem/16) 0 calc(15rem/16) 0;
+  margin: 0 0 var(--spatial-scale-1) 0;
 }
 @media (--viewport-small) {
   .AnthologyItem {
     max-width: 30rem;
     margin-right: auto;
     margin-left: auto;
+    padding: var(--type-scale-1);
 
     & .cta {
       max-width: 20rem;
@@ -76,12 +74,9 @@ export default AnthologyItem
     display: flex;
       flex-direction: column;
       flex-basis: 50%;
-    padding: 4rem 0 4.25rem 0;
+    padding: var(--spatial-scale-8) 0 var(--spatial-scale-8) 0;
     margin: 0;
     max-width: none;
-    &:first-of-type {
-      margin-top: 0;
-    }
     &:nth-child(2n+1) {
       background: var(--bg-blue-600);
     }
@@ -90,6 +85,10 @@ export default AnthologyItem
     }
     & .type {
       color: inherit;
+      font-size: var(--type-scale-00);
+      line-height: var(--spatial-scale-00);
+    }
+    & .description {
     }
     & .cta {
       background-color: var(--white);

components/content/BlogPost.vue

@@ -43,17 +43,17 @@ export default BlogPost
   .text {
     margin: 0 auto;
     max-width: 30rem;
-    padding: 3rem 1.25rem;
+    padding: var(--spatial-scale-5) var(--spatial-scale-2);
   }
   .title {
-    font-size: calc(26rem/16);
-    line-height: calc(32em/26);
+    font-size: var(--type-scale-2);
+    line-height: var(--spatial-scale-5);
     margin-top: 0;
+    margin-bottom: var(--spatial-scale-2);
   }
   .cta {
     max-width: 20rem;
-    margin-left: auto;
-    margin-right: auto;
+    margin: var(--spatial-scale-3) auto 0;
   }
 </style>