css fixes, add icons at bottom of page, fixes #71

content/assets/stylesheets/includes/blogpost.scss

@@ -1,9 +1,3 @@
-.blogpost {
-  .blogtitle {
-    font-size: 4em;
-  }
-}
-
 #markdown-toc {
   @extend .menu-list;
 
@@ -13,6 +7,7 @@
   }
 }
 
+// Definition list is not defined in bulma
 dl {
   dt {
     display: inline;
@@ -29,11 +24,6 @@ dl {
   }
 }
 
-.padbox {
-  margin-bottom:10px;
-  border-radius: 0 !important;
-}
-
 .blogwidth{
   width: 75%;
   margin:auto;

content/assets/stylesheets/includes/general.scss

@@ -1,12 +1,21 @@
+// Small helper in bulma style
 .has-text-justified {
   text-align: justify;
 }
 
+// Override box styling without round corners
+.box {
+  margin-bottom:10px;
+  border-radius: 0 !important;
+}
+
+// Add some hero attributes to make backgrounds prettier
 .hero {
   background-position: center;
   background-size: cover;
 }
 
+// link borders are unnecessary
 .content {
   a {
     &:not(.button) {
@@ -19,27 +28,21 @@
   }
 }
 
-#navbar {
+footer .content a {
-  z-index: 100;
+  &:not(.button) {
-  margin-bottom: 10px;
+    color: $text-light;
 
-  .logo-wrapper {
+    &:visited {
-    padding-bottom: 0;
+      color: $text-light;
     }
 
-  .actual-nav-bar {
+    &:hover {
-    padding: 0;
+      color: $link-hover;
-    margin: 10px;
-    margin-bottom: 0;
-    border-bottom: 1px solid #eee;
     }
-
-  .nav-menu {
-    z-index: 20;
   }
 }
 
-
+// Proper padding of these sections
 header.section {
   padding-bottom: 10px;
 }
@@ -48,60 +51,11 @@ main.section {
   padding-top: 20px;
 }
 
-
-#navbar {
-  align-items: flex-end;
-
-  #inline-logo {
-    min-width: 38.703px;
-  }
-  #logo-link {
-    #logo {
-      padding-top: 10px;
-      padding-left: 10px;
-      width: 100px;
-    }
-  }
-  .nav {
-    height: 100%;
-    align-items: flex-end;
-    z-index: auto;
-
-    .nav-item {
-      transition: 0.2s;
-
-      font-variant: small-caps;
-      font-size: 1.15em;
-
-      &:hover {
-        transition: 0.2s;
-      }
-
-      &.social-icon {
-          padding-left: 5px;
-          padding-right: 5px;
-      }
-
-      &.is-tab {
-          border-bottom: 3px solid transparent;
-          border-top: 3px solid transparent;
-
-          &:hover, &.is-active {
-              border-bottom-color: $zeus-orange;
-          }
-      }
-    }
-  }
-}
-
 footer.footer {
   padding-bottom: 40px;
-
-  .fa {
-    vertical-align: inherit;
-  }
 }
 
+// Cursor highlight color
 ::selection {
   color: white;
   background: rgba(255, 127, 0, 0.99);
@@ -158,49 +112,6 @@ footer.footer {
   }
 }
 
-#tipue_search_input {
-  background: none;
-  padding: 12px;
-  font: inherit;
-  color: inherit;
-
-  width: 40px;
-
-  border-color: rgba(0, 0, 0, 0);
-
-  display: flex;
-  flex-direction: row;
-
-  justify-content: inherit;
-
-  transition: all 0.5s;
-
-
-  input {
-    background: none;
-    border: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    box-shadow: none;
-    outline: 0;
-    margin: 0;
-
-    color: inherit;
-  }
-
-  &:hover, &:focus, &.focused {
-    width: 170px;
-    border: 1px solid #e2e2e2;
-  }
-
-  &::before {
-    font: normal normal normal 14px/1 FontAwesome;
-    content: "\f002 ";
-    color: inherit;
-    padding-right: 5px;
-  }
-}
-
 .fa {
   vertical-align: baseline;
 }

content/assets/stylesheets/includes/navbar.scss

@@ -0,0 +1,63 @@
+#navbar {
+  align-items: flex-end;
+
+  z-index: 100;
+  margin-bottom: 10px;
+
+  .logo-wrapper {
+    padding-bottom: 0;
+  }
+
+  .nav-menu {
+    z-index: 20;
+  }
+
+  .actual-nav-bar {
+    padding: 0;
+    margin: 10px;
+    margin-bottom: 0;
+    border-bottom: 1px solid #eee;
+  }
+
+  #inline-logo {
+    min-width: 38.703px;
+  }
+
+  #logo-link {
+    #logo {
+      padding-top: 10px;
+      padding-left: 10px;
+      width: 100px;
+    }
+  }
+  .nav {
+    height: 100%;
+    align-items: flex-end;
+    z-index: auto;
+
+    .nav-item {
+      transition: 0.2s;
+
+      font-variant: small-caps;
+      font-size: 1.15em;
+
+      &:hover {
+        transition: 0.2s;
+      }
+
+      &.social-icon {
+          padding-left: 5px;
+          padding-right: 5px;
+      }
+
+      &.is-tab {
+          border-bottom: 3px solid transparent;
+          border-top: 3px solid transparent;
+
+          &:hover, &.is-active {
+              border-bottom-color: $zeus-orange;
+          }
+      }
+    }
+  }
+}

content/assets/stylesheets/includes/search.scss

@@ -0,0 +1,42 @@
+#tipue_search_input {
+  background: none;
+  padding: 12px;
+  font: inherit;
+  color: inherit;
+
+  width: 40px;
+
+  border-color: rgba(0, 0, 0, 0);
+
+  display: flex;
+  flex-direction: row;
+
+  justify-content: inherit;
+
+  transition: all 0.5s;
+
+
+  input {
+    background: none;
+    border: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    box-shadow: none;
+    outline: 0;
+    margin: 0;
+
+    color: inherit;
+  }
+
+  &:hover, &:focus, &.focused {
+    width: 170px;
+    border: 1px solid #e2e2e2;
+  }
+
+  &::before {
+    font: normal normal normal 14px/1 FontAwesome;
+    content: "\f002 ";
+    color: inherit;
+    padding-right: 5px;
+  }
+}

content/assets/stylesheets/main.scss

@@ -30,3 +30,5 @@ body.site {
 @import "includes/eventpage";
 @import "includes/404";
 @import "includes/projects";
+@import "includes/navbar";
+@import "includes/search";

layouts/blogpost.erb

@@ -21,6 +21,6 @@
     </div>
     <div class="content is-medium">
       <%= yield %>
+    </div>
   </article>
 </div>
-</div>

layouts/partials/_footer.erb

@@ -1,6 +1,33 @@
 <footer class="footer">
   <div class="container">
     <div class="content has-text-centered">
+      <p class="is-hidden-tablet">
+        <a class="icon" href="https://github.com/ZeusWPI" target="_blank">
+          <span class="icon">
+            <%= fa :github %>
+          </span>
+        </a>
+        <a class="icon" href="https://www.facebook.com/zeus.wpi/" target="_blank">
+          <span class="icon">
+            <%= fa :facebook %>
+          </span>
+        </a>
+        <a class="icon" href="/feed.xml" target="_blank">
+          <span class="icon">
+            <%= fa :rss %>
+          </span>
+        </a>
+        <a class="icon" href="/ical.ics">
+          <span class="icon">
+            <%= fa :calendar %>
+          </span>
+        </a>
+        <a class="icon" href="//zeus.ugent.be/wiki">
+          <span class="icon">
+            <%= fa :'wikipedia-w' %>
+          </span>
+        </a>
+      </p>
       <p>
         Made with <%= fa :heart %> by Zeus WPI
       </p>

layouts/partials/_navbar.erb

@@ -36,7 +36,7 @@
             <span></span>
           </span>
 
-          <div class="nav-right is-hidden-mobile social-icons">
+          <div class="nav-right is-hidden-mobile">
               <a class="nav-item social-icon" href="https://github.com/ZeusWPI" target="_blank">
                   <span class="icon">
                     <%= fa :github %>