Added home page stuff

src/documents/index.html

@@ -4,6 +4,18 @@ title: "Home"
 icon: "home"
 order: 0
 ---
-<div class="animated">
+<div id="desktop">
-  Hello World!
+  <div id="columns">
+    <div class="animated">
+      <div id="text">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius facilisis commodo. Aliquam convallis at sem at scelerisque. Integer dictum, ipsum a mollis dictum, erat tortor imperdiet urna, vitae scelerisque sem augue nec sapien. Mauris interdum tempor semper. Proin tristique lacinia commodo. Sed sed rhoncus purus, vitae feugiat massa. Quisque leo turpis, dapibus ut nisl vitae, placerat pretium risus. Duis sit amet tellus tristique, porta dolor vel, consequat eros. Donec vel nunc vehicula, accumsan diam ut, blandit massa. Nullam pellentesque mi pretium scelerisque ultricies.
+      </div>
+    </div>
+    <div class="animated">
+      <img src="/img/Photo.jpg" />
+    </div>
+  </div>
+  <div id="social" class="animated">
+    Twitter, Github, etc
+  </div>
 </div>

src/documents/styles.css.scss

@@ -137,35 +137,59 @@ body{
   animation-direction: alternate-reverse;
 }
 
-.animations[data-slug="index"]{
+#content{
-  >div{
+  overflow: hidden;
-    animation-name: fadeIn;
-  }
 }
 
-.animations #lightcontent{
+#content[data-slug="index"]{
-  animation-name: slideInUp;
+  #desktop{
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  #columns{
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    >div{
+      flex-grow: 1;
+      width: 50%;
+      margin: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:last-child{
+        img{
+          display: block;
+          width: 70%;
+          border-radius: 100%;
+        }
+      }
+    }
+  }
+  #social{
+    height: 150px;
+    background-color: purple;
+  }
+  &.animations{
+    #columns>div:first-child{
+      animation-name: slideInLeft;
+    }
+    #columns>div:last-child{
+      animation-name: slideInRight;
+    }
+    #social{
+      animation-name: fadeInUp;
+      animation-delay: 150ms;
+    }
+  }
 }
 
 .animations{
-  #headerimg{
-    //animation-name: fadeInUp;
-  }
-  #maincontent{
-    //animation-name: fadeInUpBig;
-    //animation-delay: 150ms;
-  }
   #imgcontent{
     animation-name: fadeInUp;
   }
-  &.is-exiting{
+  #lightcontent{
-    #imgcontent{
+    animation-name: slideInUp;
-      animation-name: fadeOutDown;
-      animation-direction: normal;
-    }
-    #headerimg, #maincontent{
-      animation-name: none;
-      animation-duration: 0ms;
-    }
   }
 }