New design (#54)

src/colors.scss

@@ -1,15 +0,0 @@
-//Palette generated by Material Palette
-//materialpalette.com/light-green/orange
-$primary-color-dark: #689F38;
-$primary-color: #8BC34A;
-$primary-color-light: #DCEDC8;
-$primary-color-text: #212121;
-$accent-color: #FF9800;
-$primary-text-color: #212121;
-$secondary-text-color: #757575;
-$divider-color: #BDBDBD;
-
-//Set bootstrap colors
-$brand-primary: $primary-color;
-$body-color: $primary-text-color;
-$code-color: darken($accent-color, 10);

src/landingpage.scss

@@ -1,19 +0,0 @@
-.landingpage {
-	@extend .content;
-	text-align: center;
-
-	.jumbotron {
-		background: none;
-	}
-
-	.logo {
-		width: 220px;
-		max-width:100%;
-	}
-
-	svg.octicon {
-		height: 24px;
-		margin-right: 8px;
-		fill: $brand-primary;
-	}
-}

src/main.scss

@@ -1,75 +1,125 @@
-@import "colors";
-@import "../node_modules/bootstrap/scss/bootstrap";
-
-@import "landingpage";
-
-.navbar {
-  padding: 21px 32px;
-  border-bottom: 1px solid $accent-color;
+*, *:hover, *:active, *:focus{
+  outline: none;
 }
 
-.navbar-brand {
-  padding: 0;
+@import '../node_modules/bulmaswatch/flatly/variables';
+@import "../node_modules/bulma/bulma";
+@import '../node_modules/bulmaswatch/flatly/overrides';
 
-  img {
-    height: 38px;
+.homepage-hero{
+  height: 100vh;
+  min-height: 700px;
+  overflow: hidden;
+
+  .hero-body .container{
+    padding: 3em 0 1em;
+
+    .button:first-child{
+      margin-right: 1em;
+    }
+  }
+
+  .hero-foot img {
+    max-width: 100vw;
+    width: 1000px;
+    display: block;
+    margin: 0 auto;
   }
 }
 
-#navbar-responsive {
-  clear: right;
-}
+.feature-shoutout {
+  font-size: 1.2em;
 
-.footer {
-  width: 100%;
-  padding: 32px 0;
-  background-color: #f7f7f9;
+  svg{
+    height: 36px;
+    vertical-align: middle;
+    padding-right: 5px;
+    fill: #fff;
+  }
 
-  p {
-    margin: 0;
-    padding: 16px 0;
+  a{
+    color: darken($turquoise, 20%) !important;
   }
 }
 
-.content {
-  margin: 64px auto;
+.page{
+  margin: 2em auto;
 
-  pre {
-    padding: 16px;
-    background-color: $code-bg;
-  }
+  .card{
+    margin-bottom: 2em;
 
-  blockquote{
-    @extend .blockquote;
-  }
-}
+    background-color: #fff;
+    box-shadow: 0 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
+    color: #4a4a4a;
+    max-width: 100%;
+    position: relative;
+    border: none;
+    border-radius: 0.2em;
 
-aside ul.nav {
-  @include media-breakpoint-up(sm) {
-    border-right: 1px solid lighten($accent-color, 30);
-  }
-
-  ul {
-    margin: 0;
-    padding: 8px;
-    margin-left: -8px;
-    margin-bottom: 16px;
-    margin-right: 16px;
-    border-top: 1px dashed lighten($accent-color, 30);
-  }
-
-  li {
-    list-style: none;
-    margin:0;
-    padding: 0;
-
-    li a {
-      font-size: 0.9rem;
+    .media-content a{
+      display: block;
     }
   }
 }
 
-// see https://github.com/go-gitea/theme/issues/48
-article img {
-  max-width: 100%;
+// Mobile Styles
+
+.navbar-background{
+  -webkit-transition: opacity ease 300ms;
+  transition: opacity ease 300ms;
+
+  opacity: 0;
 }
+
+.navbar-menu{
+  -webkit-transition: all ease 300ms;
+  transition: all ease 300ms;
+}
+
+@media screen and (max-width:1087px){
+  .navbar-menu{
+    position: fixed;
+    bottom: 0;
+    top: 0;
+    left: -160px;
+    z-index: 2;
+    opacity: 1;
+    display: block;
+  }
+}
+
+.navbar-menu .logo{
+  display: none;
+}
+
+.navbar-menu.is-active{
+  -webkit-transition: all ease 300ms;
+  transition: all ease 300ms;
+  left: 0;
+
+  .navbar-item{
+    padding: 0.5em 2em 0.5em 1.5em;
+  }
+
+  .logo{
+    display: block;
+  }
+}
+
+.navbar-burger.burger{
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 3;
+}
+
+.navbar-background.is-active{
+  background: rgba(0,0,0,0.5);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  opacity: 1;
+}