feat: add hero & prototype sizing, spacing variables

diez · Nov 14, 2019 · 9fe0ca0 · 9fe0ca0
1 parent 7833b29
commit 9fe0ca0
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 4 deletions.
diff --git a/packages/site/assets/styles/_layout.scss b/packages/site/assets/styles/_layout.scss
@@ -1,9 +1,33 @@
-$example-size: 90px;
-$page-width: 1320px;
+// SPACINGS
+$spacing2XS: 2px;
+$spacingXS: 4px;
+$spacingSM: 8px;
+$spacingMD: 12px;
+$spacingLG: 18px;
+$spacingXL: 24px;
+$spacing2XL: 32px;
+$spacing3XL: 44px;
+
+// SIZINGS
+$sizing2XS: 60px;
+$sizingXS: 100px;
+$sizingSM: 200px;
+$sizingMD: 300px;
+$sizingLG: 400px;
+$sizingXL: 600px;
+$sizing2XL: 860px;
+$sizing3XL: 1300px;
+
+$page-width: $sizing3XL;
 
 .page {
   max-width: $page-width;
   margin: 0 auto;
   padding: 40px;
   position: relative;
+}
+
+.section-narrow {
+  max-width: $sizing2XL;
+  margin: 0 auto;
 }
diff --git a/packages/site/assets/styles/_shared.scss b/packages/site/assets/styles/_shared.scss
@@ -28,6 +28,16 @@ a {
   }
 }
 
+h1 {
+  font-size: 4rem;
+}
+
+h3 {
+  font-weight: 400;
+  font-size: 2rem;
+  line-height: 2.72rem;
+}
+
 button, .button {
   background-color: $primary;
   position: relative;
@@ -68,4 +78,13 @@ button, .button {
       transition: all 300ms ease-in;
     }
   }
+}
+
+.center {
+  text-align: center;
+  margin: 0 auto;
+}
+
+.muted {
+  opacity: .44
 }
diff --git a/packages/site/pages/index.vue b/packages/site/pages/index.vue
@@ -1,8 +1,15 @@
 <template>
   <div class="page">
     <NavBar></NavBar>
-    <h1>Hello Diez, bro!</h1>
-    <p>yo thi sis my paragraph</p>
+    <div class="hero section-narrow">
+      <h1>Keep your design system in sync with your code</h1>
+      <h3>Diez is the design system compiler — for developers creating custom workflows around design systems</h3>
+      <div class="cta-holster">
+        <span class="muted">License: MIT</span>
+        <a href="#">GitHub</a>
+        <a href="#">Docs</a>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -20,4 +27,26 @@ export default class extends Vue {
 <style lang="scss" scoped>
   @import '@/assets/styles/_shared.scss';
   @import '@/assets/styles/_layout.scss';
+
+  .hero {
+    height: 80vh;
+    max-height: 1200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  h1 {
+    margin-bottom: 0;
+  }
+
+  .cta-holster {
+    margin-top: $spacingXS;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: $sizingMD;
+  }
 </style>