Update header with ProtoSchool logo

src/components/Lesson.vue

@@ -1,14 +1,10 @@
 <template>
   <div>
-    <header class="bg-navy pa3 flex items-center justify-around">
-      <a href='/#/' class="dn db-ns link flex-auto w-third-ns">
-        <img src="./home/ipfs-logo.svg" alt="IPFS" style="height: 66px" class="ml3-ns"/>
+    <header class="bg-navy pa2 pa3-ns flex items-center justify-around">
+      <a href='/#/' class="db-ns link flex-auto">
+        <img src="./home/ps_logo_horiz_white.svg" alt="ProtoSchool" style="height: 80px" class="ml3-ns"/>
       </a>
-      <a href='/#/' class="link ma0 ttu f3 f1-ns fw4 w-third-ns tc">
-        <span class="green">Proto</span>
-        <span class="white">school</span>
-      </a>
-      <div class="w-third-ns tr dn db-ns">
+      <div class="tr dn db-ns">
         <img src="./home/ipfs-illustrations-how-3.svg" alt="" style="height: 50px">
       </div>
     </header>

src/components/home/Home.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="home">
     <header class="flex items-center bg-navy white pv3">
-      <div class="flex-none">
-        <div class="ph2 ph4-ns">
-          <img src="./ipfs-logo.svg" alt="IPFS" style="height: 66px" />
-        </div>
-        <div class="header-text indent-1">
-          <h1 class="ma0 pt4 ttu fw4">
-            <span class="green">Proto</span>
-            <span class="white">school</span>
-          </h1>
-          <h2 class="ma0 fw5">
-            The interactive IPFS protocol workshop
-          </h2>
+      <div class="flex-auto">
+        <div class="pseudo-logo">
+          <img src="./ps_symbol_color.svg" alt="ProtoSchool" class="mr3 ml3" />
+          <div class="header-text">
+              <h1 class="ma0 fw4">
+                <span class="montserrat fw4">Proto</span>
+                <span class="montserrat fw2">School</span>
+              </h1>
+              <h2 class="ma0 montserrat fw3">
+                The interactive IPFS protocol workshop
+              </h2>
+          </div>
         </div>
       </div>
-      <div class="flex-auto tc">
-        <img src="./ipfs-illustrations-how-3.svg" alt="" style="height: 124px;"/>
+      <div class="flex-auto tc bonus-illustration">
+        <img src="./ipfs-illustrations-how-3.svg" alt="" style="height: 70px;"/>
       </div>
     </header>
     <section class="db bt border-aqua bw4">
@@ -111,27 +111,35 @@ export default {
 </script>
 
 <style scoped>
-.header-text {
-  padding-bottom: 31px;
+
+.bonus-illustration {
+  display: none;
 }
 .header-text h1 {
-  font-size: 36px;
+  font-size: 32px;
 }
 .header-text h2 {
-  font-size: 15px;
+  font-size: 16px;
 }
 .indent-1 {
   padding-left: 1rem;
 }
+.pseudo-logo {
+  display: flex;
+  align-items: center;
+}
+.pseudo-logo img {
+  height: 80px;
+}
 .section-1 {
   display: none;
 }
 @media screen and (min-width: 530px) {
   .header-text h1 {
-    font-size: 50px;
+    font-size: 40px;
   }
   .header-text h2 {
-    font-size: 21px;
+    font-size: 20px;
   }
   .indent-1 {
     padding-left: 93px;
@@ -140,5 +148,25 @@ export default {
     display: block;
     width: 93px;
   }
+  .pseudo-logo img {
+    height: 100px;
+  }
+}
+@media screen and (min-width: 740px) {
+  .bonus-illustration {
+    display: block;
+  }
+}
+
+@media screen and (max-width: 435px) {
+  .header-text h1 {
+    font-size: 24px;
+  }
+  .header-text h2 {
+    font-size: 12px;
+  }
+  .pseudo-logo img {
+    height: 60px;
+  }
 }
 </style>