type; logo; hides unused sections for now

BrentWMiller · Jul 20, 2020 · a558241 · a558241
1 parent 417c927
commit a558241
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 12 deletions.
diff --git a/assets/svgs/logo.svg b/assets/svgs/logo.svg
diff --git a/components/Hero.vue b/components/Hero.vue
@@ -1,17 +1,19 @@
 <template>
   <section class="container flex items-center justify-center h-full mx-auto">
     <div class="absolute top-0 left-0 w-1/2 h-full -ml-12 bg-secondary-50"></div>
-    <div class="relative flex flex-col">
-      <h1 class="font-extrabold leading-none text-96 text-primary-500">
+    <div class="relative flex flex-col p-4">
+      <h1 class="font-extrabold leading-none md:text-96 text-48 text-primary-500">
         I'm a
         <br />
-        <span class="text-secondary-500">web developer</span>
-        ,
+        <span class="text-secondary-500">web developer</span>,
       </h1>
       <p class="mt-4 text-2xl">
-        building web sites and web apps for
-        <a class="font-bold hover:underline text-primary-500" href="https://skycatchfire.com" target="_blank">SKYCATCHFIRE</a>
-        .
+        building websites and apps for
+        <a
+          class="font-bold hover:underline text-primary-500"
+          href="https://skycatchfire.com"
+          target="_blank"
+        >SKYCATCHFIRE</a>.
       </p>
     </div>
     <dots class="absolute top-9/12 left-10/12" />

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col min-h-screen font-body text-dark-primary">
-    <navigation />
+    <!-- <navigation /> -->
     <nuxt class="flex-grow" />
     <footer class="w-full py-12 bg-primary-500 h-half">
       <div class="container flex justify-between mx-auto text-xs text-secondary-500">

diff --git a/pages/index.vue b/pages/index.vue
@@ -4,7 +4,7 @@
       <hero />
     </div>
 
-    <div class="container mx-auto mt-40">
+    <!-- <div class="container mx-auto mt-40">
       <div class="w-10/12 mx-auto">
         <h2 class="relative flex items-center text-lg font-bold tracking-wider uppercase text-secondary-500">
           <dots class="absolute left-0 -mt-4 -ml-16 -z-1" />
@@ -54,7 +54,7 @@
           </svg>
         </nuxt-link>
       </div>
-    </div>
+    </div>-->
   </div>
 </template>
 

diff --git a/pages/style-guide.vue b/pages/style-guide.vue
@@ -2,16 +2,30 @@
   <div class="mt-24">
     <div class="container w-8/12 mx-auto mb-20">
       <h1>Style Guide</h1>
+      <hr />
 
       <h2>Colors</h2>
       <ul class="grid grid-cols-4 gap-1">
-        <li v-for="color in colors" :key="color" class="flex flex-col items-center justify-center w-full border" :class="`border-${color}`">
+        <li
+          v-for="color in colors"
+          :key="color"
+          class="flex flex-col items-center justify-center w-full border"
+          :class="`border-${color}`"
+        >
           <span class="w-full h-16" :class="`bg-${color}`"></span>
           <span class="p-3">{{ color }}</span>
         </li>
       </ul>
+      <hr />
 
       <h2>Typography</h2>
+      <hr />
+      <h1>Heading One</h1>
+      <h2>Heading Two</h2>
+      <h3>Heading Three</h3>
+      <h4>Heading Four</h4>
+      <h5>Heading Five</h5>
+      <h6>Heading Six</h6>
     </div>
   </div>
 </template>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -123,6 +123,7 @@ module.exports = {
         },
       },
       fontSize: {
+        '48': '3rem',
         '80': '5rem',
         '96': '6rem',
       },