Test waka

css/themes/wakanda/home.scss

@@ -0,0 +1,175 @@
+---
+---
+
+header.home {
+  position: relative;
+  background: url(../../../img/circle.png) no-repeat center center, url(../../../img/background.png) repeat;
+  background-color:#eeeded;
+  width: 100%;
+  height: 257px;
+  text-align: center;
+
+  h1 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -75px;
+    margin-left: -167px;
+    padding: 5px 19px;
+    font-weight: 100;
+    font-size: 46px;
+    color: #fff;
+    max-width: 100%;
+    background-color: #ffb800;
+  }
+
+  img {
+    position: absolute;
+    top:105px;
+    left:50%;
+    margin-left: -202px;
+  }
+}
+
+.home-container {
+  padding:0;
+  margin: 0 8px 40px 8px;
+  justify-content: center;
+  
+  h2 {
+    clear: both;
+    margin: 18px 0 0 10px;
+    color: #A2A2A2;
+    font-weight: 400;
+    font-size: 12px;
+    text-transform: uppercase;
+  }
+  
+  hr {
+    clear: both;
+    color: white;
+    background-color: white;
+  }
+}
+
+.home-container > div {
+  width: 25%;
+  float: left;
+  background-color: #fafafa;
+  box-sizing: border-box;
+  padding-bottom: 15px;
+  border-style: solid;
+  border-color: #fff;
+  border-width: 16px 8px 0 8px;
+  height:268px;
+  &:hover {
+    border-bottom:3px solid #ffb800;
+    
+    &:hover .head {
+      background-color: #ffb800;
+      color:#fff;
+    }
+  }
+
+  .head {
+    color:#323232;
+    text-align: center;
+    height: 50px;
+    background-color: #f3f3f3;
+    font-size: 18px;
+    line-height: 50px;
+  }
+
+  .head .label {
+    font-size: 10px;
+    background-color: white;
+    border-radius: 5px;
+    color: #545454;
+    padding: 4px 8px 4px 8px;
+    text-transform: uppercase;
+    font-weight: bold;
+    position: relative;
+    top: -3px;
+    letter-spacing: 1px;
+  }
+
+  a.action {
+    .stepPic {
+      height: 96px;
+      width: 96px;
+      background-position: 0 0;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 15px;
+      margin-bottom: 20px;
+      background-position: center;
+      background-repeat: no-repeat;
+
+      &.model {
+        background-image: url(../../../img/pic_model.png);
+      }
+      &.prototype {
+        background-image: url(../../../img/pic_prototype.png);
+      }
+      &.webApp {
+        background-image: url(../../../img/pic_webApp.png);
+      }
+      &.mobileApp {
+        background-image: url(../../../img/pic_mobileApp.png);
+      }
+      &.circle {
+        background-color: white;
+        border-radius: 50%;
+        box-sizing: border-box;
+        border: 4px solid white;
+      }
+      &.deploy {
+        background-image: url(../../../img/icon-deploy.png);
+      }
+      &.connect {
+        background-image: url(../../../img/icon-connect.png);
+      }
+    }
+        
+    display: block;
+    width: 100%;
+    color: #555555;
+    font-weight: 700;
+    line-height: 1.5;
+    text-align:center;
+    &:hover {
+      color: #555;
+    }
+  }
+}
+
+section .blocks {
+  float: left;
+  width: 420px;
+}
+
+#home {
+    #contribute, #chapter {
+      display: none;   
+    }
+}
+
+@media print, screen and(max-width: 1060px) {
+  section {
+    .getting-started {
+      margin-top:5px;
+      width: 360px;
+    }
+    .step {
+      width: 160px;
+    }
+  }
+
+  .home {
+    display: none;
+  }
+
+  .home-container > div {
+        width: 50%;
+  }
+}