Merge pull request #260 from kfrn/gh-pages

Reorder several sections of the page

css/css.css

@@ -1,3 +1,11 @@
+html, body {
+  line-height: 1.5;
+  color: #888888;
+  background-color: #060606;
+  margin: 0;
+  word-break: break-word;
+}
+
 .grid {
   display: grid;
   align-content: center;
@@ -26,21 +34,21 @@
   text-align: center;
 }
 
-@media only screen and (max-width: 999px)  {
+@media only screen and (max-width: 999px) {
-.grid {
+  .grid {
-  grid-template-columns: 1fr;
+    grid-template-columns: 1fr;
-  grid-template-areas:
+    grid-template-areas:
-  "header"
+    "header"
-  "sidebar"
+    "sidebar"
-  "content"
+    "content"
-  "footer";
+    "footer";
   }
 }
 
-@media only screen and (min-width: 1000px)   {
+@media only screen and (min-width: 1000px) {
   .grid {
     grid-gap: 1rem;
-    grid-template-columns: 0.25fr auto;
+    grid-template-columns: 25% auto;
     grid-template-areas:
     "header  header"
     "sidebar content"
@@ -48,6 +56,25 @@
   }
 }
 
+@media only screen and (min-width: 1500px) {
+  .grid {
+    max-width: 70%;
+    margin: 0 auto;
+  }
+}
+
+a {
+  color: #91cf91;
+}
+
+a:hover {
+  color: #5cb85c;
+}
+
+a:visited {
+  color: #449d44;
+}
+
 .license img {
   max-width: 10em;
   display: inline;
@@ -63,20 +90,22 @@ h1 {
 }
 
 h2 {
-  font-size: 3em;
+  font-size: 1.5em;
+  margin: 5px 8px 8px 8px;
+}
+
+.heading {
+  font-size: 2em;
+  margin: 6px 0px 12px 0px;
 }
 
 h3 {
-  font-size: 2em;
+  font-size: 1.5em;
 }
 
 .intro-lead {
   font-family: 'Montserrat', sans-serif;
-  font-size: 20px;
+  font-size: 1em;
-}
-
-.select-from {
-  font-size: 16px;
 }
 
 code {
@@ -109,7 +138,22 @@ div {
   color: white;
 }
 
+button {
+  font: inherit;
+  font-family: inherit;
+  color: inherit;
+}
+
 .btn {
+  border: 1px solid transparent;
+  background-color: #424242;
+  font-size: 1em;
+  line-height: 1.5em;
+  white-space: normal;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 4px;
+  padding-left: 2.5em;
   margin: 8px;
   display: inline-block;
   vertical-align: middle;
@@ -120,7 +164,6 @@ div {
   backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
-  padding-left: 2.5em;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
 }
@@ -146,15 +189,31 @@ div {
 }
 
 .contents-list {
-  color: black;
+  color: white;
+  border: 1px solid black;
+  background-color: #383838;
+  padding: 14px;
+  font-family: "Montserrat";
+  font-weight: bold;
+  font-size: 1em;
+  border:1px solid rgba(255, 255, 255, 0);
+  transition:all .5s ease-in-out;
+}
+
+.sidebar a {
+  text-decoration: none;
 }
 
 .contents-list:hover {
-  color: #2a9fd6;
+  color: black;
+  font-size: 1.05em;
+  background-color: #449d44;
+  border:1px solid black;
 }
 
 .contents-list:before {
-  content: "📼"
+  content: "📼";
+  padding-right: 1em;
 }
 
 .codeblock {

js/js.js

@@ -4,25 +4,21 @@ $(document).ready(function() {
     $('[data-toggle="tooltip"]').tooltip()
   });
 
-  // open modal window if a hash is found in URL
+  // open recipe window if a hash is found in URL
   if(window.location.hash) {
-    $(window.location.hash).modal('show');
+    id = window.location.hash
-    // add direct link to modal window
+    $(id).collapse('show');
-    $(".link").empty();
+    $('html, body').animate({ scrollTop: $(id).offset().top}, 1000);
-    $(".link").append("<small>Link to this command: <a href="+window.location.href+">"+window.location.href+"</a></small>");
+    $(id + " .link").empty();
+    $(id + " .link").append("<small>Link to this command: <a href="+window.location.href+">"+window.location.href+"</a></small>");
   }
 
-  // add hash to URL when modal is opened
+  // add hash URL when recipe is opened
-  $('span[data-toggle="modal"]').on("click", function(){
+  $('span[data-toggle="collapse"]').on("click", function(){
-    window.location.hash = $(this).attr("data-target");
+    id = $(this).attr("data-target");
-    // add direct link to modal window
+    window.location.hash = id
-    $(".link").empty();
+    $(id + " .link").empty();
-    $(".link").append("<small>Link to this command: <a href="+window.location.href+">"+window.location.href+"</a></small>");
+    $(id + " .link").append("<small>Link to this command: <a href="+window.location.href+">"+window.location.href+"</a></small>");
-  });
-
-  // remove hash from URL when modal is closed
-  $(document).on('hide.bs.modal', function (e) {
-    history.pushState("", document.title, window.location.pathname);
   });
 
 });