animation & spacing tweaks

README.md

@@ -63,10 +63,8 @@ You can make text **bold like so**
 
 Some pages like front page source their content dynamically during site build. This is so we have a single source of truth for content used in multiple places on the site.
 
-### Front page
-
-Content for all sections on front page is coming from a data file:
 - [`_src/_data/content-front.yml`](_src/_data/content-front.yml)
+- [`_src/_data/content-foundation.yml`](_src/_data/content-foundation.yml)
 
 
 # Development

_src/_assets/scss/_hero.scss

@@ -93,7 +93,7 @@ $edge-height:    $spacer * 4;
 .hero__title {
     color: $brand-05;
     font-size: $font-size-h2;
-    margin-bottom: $spacer;
+    margin-bottom: $spacer / $line-height;
 
     @media ($screen-sm) {
         font-size: $font-size-h1 * 1.1;
@@ -139,9 +139,9 @@ $edge-height:    $spacer * 4;
     margin-bottom: -1rem;
 }
 
-.starbase__item--bicycle {
-    margin-bottom: -4.5rem;
-    animation: bicycle 10s forwards;
+.starbase__item--mooncycle {
+    margin-bottom: -4rem;
+    animation: bicycle 8s both 1s;
 }
 
 @keyframes bicycle {
@@ -149,6 +149,11 @@ $edge-height:    $spacer * 4;
         transform: translate3d(60vw, 0, 0);
     }
 
+    35%,
+    60% {
+        transform: translate3d(0, 0, 0);
+    }
+
     100% {
         transform: translate3d(-100vw, 0, 0);
     }

_src/_assets/scss/_sections.scss

@@ -37,7 +37,7 @@
     margin-bottom: $spacer;
 
     @media ($screen-sm) {
-        margin-bottom: $spacer / 2;
+        margin-bottom: $spacer / $line-height;
     }
 }
 

_src/_assets/scss/ipdb.scss

@@ -7,7 +7,6 @@
 @import 'buttons';
 @import 'media';
 @import 'sections';
-@import 'hero';
 @import 'header';
 @import 'menus';
 @import 'logo';

_src/_assets/scss/page-front.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'hero';
 
 .section--intro {
     .section__description {
@@ -35,7 +36,7 @@
 
 .feature__title {
     font-size: $font-size-h4;
-    margin-bottom: $spacer / 2;
+    margin-bottom: $spacer / $line-height;
 }
 
 .connect__title {

_src/_data/content-front.yml

@@ -17,7 +17,7 @@ intro:
         - title: "Store any data, permanently"
           text: "IPDB allows you to store data indefinitely. It provides blockchain-style tamper-resistance and database-style queryability to give you the best of both worlds."
         - title: "Governed by Caretakers"
-          text: "The IPDB Foundation is run by its internet-loving Caretakers around the world."
+          text: "The IPDB Foundation is run by its internet-loving [Caretakers](/foundation/) around the world."
         - title: "A Dashboard for your IPDB apps"
           text: "Manage your apps, give users access, and get statistical insights about your app’s API usage."
 

_src/index.html

@@ -25,18 +25,20 @@ css: page-front
     </div>
 
     <div class="starbase">
-        <div class="row">
-            <svg class="starbase__item starbase__item--stones" width="234" height="80">
-                <use xlink:href="/assets/img/sprite.svg#starbase-stones"></use>
-            </svg>
+        <div class="starbase-wrap">
+            <div class="row">
+                <svg class="starbase__item starbase__item--stones" width="234" height="80">
+                    <use xlink:href="/assets/img/sprite.svg#starbase-stones"></use>
+                </svg>
 
-            <svg class="starbase__item starbase__item--bicycle" width="59" height="31">
-                <use xlink:href="/assets/img/sprite.svg#starbase-bicycle"></use>
-            </svg>
+                <svg class="starbase__item starbase__item--mooncycle" width="59" height="31">
+                    <use xlink:href="/assets/img/sprite.svg#starbase-mooncycle"></use>
+                </svg>
 
-            <svg class="starbase__item starbase__item--towers" width="673" height="389">
-                <use xlink:href="/assets/img/sprite.svg#starbase-towers"></use>
-            </svg>
+                <svg class="starbase__item starbase__item--towers" width="673" height="389">
+                    <use xlink:href="/assets/img/sprite.svg#starbase-towers"></use>
+                </svg>
+            </div>
         </div>
     </div>
 
@@ -83,7 +85,7 @@ css: page-front
 
                     <div class="grid__col grid__col--4">
                         <h1 class="feature__title">{{ feature.title }}</h1>
-                        <p class="feature__text">{{ feature.text }}</p>
+                        <div class="feature__text">{{ feature.text | markdownify }}</div>
                     </div>
                 </div>
             </div>