look mom, i'm breaking the page!

_includes/head.html

@@ -6,24 +6,24 @@
   <meta name="description" content="{{ site.description }}">
   <meta name="viewport" content="width=device-width initial-scale=1" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <script src="{{ "/bootstrap/js/jquery-2.1.1.min.js" | prepend: site.baseurl }}" type="text/javascript"></script>
   <script src="{{ "/bootstrap/js/bootstrap.js" | prepend: site.baseurl }}" type="text/javascript"></script>
   <link rel="stylesheet" type="text/css" href="{{ "/bootstrap/css/bootstrap.css" | prepend: site.baseurl }}">
-  <link rel="stylesheet" type="text/css" href="{{ "/css/style.css" | prepend: site.baseurl }}">
   <link href="{{ "/css/font-awesome.min.css" | prepend: site.baseurl }}" rel="stylesheet">
+  <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
+
   <link rel="alternate" type="application/rss+xml" href="feed.xml">
-  <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-touch-icon-57x57.png">
-  <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60x60.png">
-  <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-touch-icon-72x72.png">
-  <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76x76.png">
-  <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-touch-icon-114x114.png">
-  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120x120.png">
-  <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-touch-icon-144x144.png">
-  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152x152.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180x180.png">
-  <link rel="manifest" href="/android-chrome-manifest.json">
+  <link rel="manifest" href="/favicon/android-chrome-manifest.json">
   <meta name="msapplication-TileColor" content="#000000">
   <meta name="msapplication-TileImage" content="/mstile-144x144.png">
   <meta name="theme-color" content="#ffffff">

_layouts/default.html

@@ -8,7 +8,7 @@
         <canvas id="demo-canvas" style="position:absolute;width:100%;"></canvas>
 	<div class="row row-centered">
 	  <div class="col-centered">
-	    <img src="{{ "/images/logo.svg" | prepend: site.baseurl }}" alt="Chaospott Logo" style="width:300px;" />
+	    <img src="{{ "/images/logo.svg" | prepend: site.baseurl }}" alt="Chaospott Logo" />
 	  </div>
 	</div>
       </div>

_sass/_chaospott.scss

@@ -7,52 +7,70 @@
 
 * {
   background-color:transparent;
-  font-family: 'Share Tech', sans-serif;
+  font-family: $base-font-family;
 }
 
 body, .jumbotron {
-  background-color:#d2d4bc;
+  background-color:$background-color;
-}
-
-.jumbotron h1 {
-  font-size:26px;
-  font-weight:bold;
-  margin-top:50px;
-}
-
-.navbar {
-/* background-color:#350505; */
-background-color:#d2d4bc;
-border:none;
-}
-
-ul.navbar-nav li a {
-  color:#800032 !important;
-}
-
-.btn-default {
-  border:0;
-  background-color:transparent;
-  color:#800032;
-}
-
-a {
-  color:#800032;
-}
-
-a:visited {
-  color:#800032;
-}
-
-.row {
-  padding:50px 0;
 }
 
 .jumbotron {
   margin:0;
   padding:0;
+
+  h1 {
+    font-size:26px;
+    font-weight:bold;
+    margin-top:50px;
+  }
+
+  &>hr {
+    background-color:#333;
+    height:1px;
+    border: 3px #333 solid;
+    width:300px;
+  }
 }
 
+.navbar {
+  background-color:$background-color;
+  border:none;
+
+  .divider-vertical {
+    height: 20px;
+    margin: 14px 9px;
+    border-right: 1px solid $nav-link-color;
+    border-left: 1px solid $nav-link-color;
+  }
+}
+
+ul.navbar-nav li a {
+  color:$nav-link-color !important;
+}
+
+.btn-default {
+  border:0;
+  background-color:transparent;
+  color: $nav-link-color;
+}
+
+a {
+  color:$nav-link-color;
+
+  &:visited {
+    color:$nav-link-color;
+  }
+}
+
+
+.row {
+  padding:50px 0;
+
+  &-centered {
+    text-align: center;
+    margin: 0;
+  }
+}
 
 #large-header {
   background-color:#222;
@@ -60,17 +78,14 @@ a:visited {
   margin:0;
   padding:0;
   margin-bottom:30px;
-}
 
-#large-header img {
+  img {
     position:relative;
     top:30px;
+    width: 300px;
+  }
 }
 
-.row-centered {
-  text-align:center;
-  margin:0;
-}
 .col-centered {
   display:inline-block;
   float:none;
@@ -79,14 +94,7 @@ a:visited {
 }
 
 ul.nav>li>a {
-  color:#800032;
+  color:$nav-link-color;
-}
-
-.jumbotron>hr {
-  background-color:#333;
-  height:1px;
-  border: 3px #333 solid;
-  width:300px;
 }
 
 .post-content img {
@@ -113,26 +121,24 @@ ul.nav>li>a {
   border-color:transparent;
 }
 
-.navbar .divider-vertical {
-height: 20px;
-margin: 14px 9px;
-border-right: 1px solid #800032;
-border-left: 1px solid #800032;
-}
 
 .navbar-inverse .divider-vertical {
-border-right-color: #222222;
+  border-right-color: #222222;
-border-left-color: #111111;
+  border-left-color: #111111;
 }
 
 @media (max-width: 767px) {
-.navbar-collapse .nav > .divider-vertical {
+  #large-header {
+    display: none;
+  }
+
+  .navbar-collapse .nav > .divider-vertical {
     display: none;
   }
 }
 
 rect.bordered {
-  stroke: #D2D4BC;
+  stroke: $background-color;
   stroke-width:1px;
 }
 

css/main.scss

@@ -6,7 +6,7 @@
 
 
 // Our variables
-$base-font-family: Helvetica, Arial, sans-serif;
+$base-font-family: 'Share Tech', sans-serif;
 $base-font-size:   16px;
 $small-font-size:  $base-font-size * 0.875;
 $base-line-height: 1.5;
@@ -14,7 +14,7 @@ $base-line-height: 1.5;
 $spacing-unit:     30px;
 
 $text-color:       #111;
-$background-color: #fdfdfd;
+$background-color: #d2d4bc;
 $brand-color:      #2a7ae2;
 
 $grey-color:       #828282;
@@ -24,6 +24,8 @@ $grey-color-dark:  darken($grey-color, 25%);
 $on-palm:          600px;
 $on-laptop:        800px;
 
+$nav-link-color:  #800032;
+
 
 
 // Using media queries with like this:
@@ -45,5 +47,8 @@ $on-laptop:        800px;
 @import
         "base",
         "layout",
-        "syntax-highlighting"
+        "syntax-highlighting",
+        "chaospott"
 ;
+
+

favicon/android-chrome-manifest.json

@@ -2,37 +2,37 @@
 	"name": "Chsospott",
 	"icons": [
 		{
-			"src": "\/android-chrome-36x36.png",
+			"src": "\/favicon\/android-chrome-36x36.png",
 			"sizes": "36x36",
 			"type": "image\/png",
 			"density": "0.75"
 		},
 		{
-			"src": "\/android-chrome-48x48.png",
+			"src": "\/favicon\/android-chrome-48x48.png",
 			"sizes": "48x48",
 			"type": "image\/png",
 			"density": "1.0"
 		},
 		{
-			"src": "\/android-chrome-72x72.png",
+			"src": "\/favicon\/android-chrome-72x72.png",
 			"sizes": "72x72",
 			"type": "image\/png",
 			"density": "1.5"
 		},
 		{
-			"src": "\/android-chrome-96x96.png",
+			"src": "\/favicon\/android-chrome-96x96.png",
 			"sizes": "96x96",
 			"type": "image\/png",
 			"density": "2.0"
 		},
 		{
-			"src": "\/android-chrome-144x144.png",
+			"src": "\/favicon\/android-chrome-144x144.png",
 			"sizes": "144x144",
 			"type": "image\/png",
 			"density": "3.0"
 		},
 		{
-			"src": "\/android-chrome-192x192.png",
+			"src": "\/favicon\/android-chrome-192x192.png",
 			"sizes": "192x192",
 			"type": "image\/png",
 			"density": "4.0"