[SITE] home and footer finished + nav for top level

assets/scss/foundation.scss

@@ -0,0 +1,51 @@
+/* STYLE for jannikbeyerstedt.de
+ * used parts of bootstrap
+ */
+
+// Core variables and mixins
+@import "custom";
+@import "variables";
+@import "mixins";
+
+// Reset and dependencies
+//@import "normalize";
+@import "print";
+
+// Core CSS
+@import "reboot"; // needed for correct grid behaviour
+@import "type";
+//@import "images";
+//@import "code";
+@import "grid";
+//@import "tables";
+//@import "forms";
+//@import "buttons";
+
+// Components
+//@import "animation";
+//@import "dropdown";
+//@import "button-group";
+//@import "input-group";
+//@import "custom-forms";
+//@import "nav";
+//@import "navbar";
+//@import "card";
+//@import "breadcrumb";
+//@import "pagination";
+//@import "tags";
+//@import "jumbotron";
+//@import "alert";
+//@import "progress";
+//@import "media";
+//@import "list-group";
+//@import "responsive-embed";
+//@import "close";
+
+// Components w/ JavaScript
+//@import "modal";
+//@import "tooltip";
+//@import "popover";
+//@import "carousel";
+
+// Utility classes
+//@import "utilities";

assets/scss/main.scss

@@ -0,0 +1,202 @@
+/* STYLE for jannikbeyerstedt.de
+ * generic styles
+ */
+@import "custom";
+@import "variables";
+@import "mixins";
+
+$fontcolor: #000;
+$col_xxs_bp: 543px;
+
+body {
+  margin: 0;
+  font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
+}
+h1, h2, h3, h4 {
+  margin-bottom: 18px;
+  font-family: 'Crimson Text', serif;
+}
+h5 {
+  margin-bottom: 8px;
+}
+h6 {
+  margin-bottom: 5px;
+}
+p {
+  margin-top: 0;
+  line-height: 1.5em;
+}
+
+
+$header_logoHeight: 75px;
+
+header {
+  img {
+    width: $header_logoHeight;
+    height: $header_logoHeight;
+    
+    float: left;
+  }
+}
+
+$nav_bgColor: #1779ff;
+$nav_textMinWidth: 80px;
+nav {
+  height: $header_logoHeight;
+  box-sizing: border-box;
+  ul {
+    margin: 0; // reset
+    padding-left: 0; // reset
+    background-color: $nav_bgColor;
+    color: #fff;
+    a {
+      li {
+        list-style-type: none; // reset
+      }
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+}
+@include media-breakpoint-up(sm) {
+  nav {  
+    ul {
+      float: right;
+      a {
+        text-align: center;
+        float: left;
+        padding-top: 45px;
+        font-size: 16px;
+        height: 75px;
+        width: 109px;
+        border-right: 1px solid #124fa2;
+      }
+      a:last-child {
+        border-right: 0;
+      }
+    }
+  }
+}
+@include media-breakpoint-down(xs) {
+  nav {
+    min-width: 2*$nav_textMinWidth + $header_logoHeight + 40px;
+    background-color: $nav_bgColor;
+    ul {
+      a {
+        text-align: left;
+        float: left;
+        margin: 10px 10px 0px;
+        font-size: 16px;
+        width: $nav_textMinWidth;
+      }
+    }
+  }
+}
+
+
+$footer_logoHeight: 1.4rem;
+footer {
+  margin-top: 20px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  
+  background-color: #bebebe;
+  
+  p {
+    margin-bottom: 0;
+  }
+  
+  @media (max-width: $col_xxs_bp) {
+    text-align: center;
+    p {
+      margin-bottom: 10px;
+    }
+  }
+  
+  i.fa {
+    color: $fontcolor;
+    font-size: $footer_logoHeight;
+    padding-right: 0.2em;
+  }
+  a > svg {
+    height: $footer_logoHeight;
+    width: $footer_logoHeight;
+    position: relative; top: 0.18rem;
+    image {
+      height: $footer_logoHeight;
+      width: $footer_logoHeight;
+    }
+  }
+  
+}
+
+/* make footer sticky */
+$footer_height: 85px;
+$footer_height_xs: 162px;
+html {
+  position: relative;
+  min-height: 100%;
+}
+@include media-breakpoint-up(sm) {
+  body {
+    /* Margin bottom by footer height */
+    margin-bottom: $footer_height;
+  }
+  footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: $footer_height;
+  }
+}
+@include media-breakpoint-down(xs) {
+  body {
+    /* Margin bottom by footer height */
+    margin-bottom: $footer_height_xs;
+  }
+  footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: $footer_height_xs;
+  }
+}
+
+
+
+/*
+ * HELPERS
+ */
+.right {
+  text-align: right;
+}
+.center {
+  text-align: center;
+}
+@media (max-width: $col_xxs_bp) {
+  .col-xxs-12.right, .col-xxs-12.center {
+    text-align: inherit;
+  }
+}
+
+/* to break down col-xs */
+.visible-xxs {
+  display: none!important;
+}
+@media (max-width: $col_xxs_bp) {
+  .col-xxs-12 {
+    float: none;
+    width: 100%;
+    
+    position: relative; left: 0; right: 0;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+  .hidden-xxs {
+    display: none!important;
+  }
+  .visible-xxs {
+    display: block!important;
+  }
+}

assets/scss/templates/home.scss

@@ -0,0 +1,23 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+
+main {
+  div.home {
+    text-align: center;
+    margin-top: 20%;
+    margin-bottom: 20%;
+    h1 {
+      margin: 0;
+      font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
+      font-weight: 100;
+      font-size: 60px;
+      margin-top: 15px;
+      margin-bottom: 15px;
+    }
+    p {
+      margin: 0;
+      font-size: 20px;
+    }
+  }
+}