Merge pull request #275 from amiaopensource/break-lines-for-code-blocks

breaks long long lines for code and dt blocks

css/css.css

@@ -1,23 +1,127 @@
+html, body {
+  line-height: 1.5;
+  font-size: 16px;
+  color: #888888;
+  background-color: #060606;
+  margin: 0;
+  word-break: break-word;
+}
+
+.grid {
+  display: grid;
+  align-content: center;
+  grid-template-areas:
+   "header"
+   "sidebar"
+   "content"
+   "footer";
+}
+
+.header {
+  grid-area: header;
+  text-align: center;
+}
+
+.content {
+  grid-area: content;
+}
+
+.sidebar {
+  grid-area: sidebar;
+}
+
+.footer {
+  grid-area: footer;
+  text-align: center;
+}
+
+@media only screen and (max-width: 999px) {
+  .grid {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+    "header"
+    "sidebar"
+    "content"
+    "footer";
+  }
+}
+
+@media only screen and (min-width: 1000px) {
+  .grid {
+    grid-gap: 1rem;
+    grid-template-columns: 25% auto;
+    grid-template-areas:
+    "header  header"
+    "sidebar content"
+    "footer  footer";
+  }
+}
+
+@media only screen and (min-width: 1500px) {
+  .grid {
+    max-width: 70%;
+    margin: 0 auto;
+    grid-template-areas:
+    "header  header"
+    "sidebar content"
+    "footer  footer";
+  }
+}
+
+a {
+  color: #91cf91;
+}
+
+a:hover {
+  color: #5cb85c;
+}
+
+a:visited {
+  color: #449d44;
+}
+
+.license img {
+  max-width: 10em;
+  display: inline;
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Montserrat', sans-serif;
 }
 
+h1 {
+  letter-spacing: 0.1em;
+  font-size: 7vw;
+}
+
 h2 {
-  font-size: 24px;
+  font-size: 1.5em;
+  margin: 5px 8px 8px 8px;
+}
+
+.heading {
+  font-size: 2em;
+  margin: 6px 0px 12px 0px;
+}
+
+h3 {
+  font-size: 1.5em;
 }
 
 .intro-lead {
   font-family: 'Montserrat', sans-serif;
-  font-size: 20px;
-}
-
-.select-from {
-  font-size: 16px;
+  font-size: 1em;
 }
 
 code {
+  padding: 2px 4px;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  border-radius: 4px;
   word-break: break-all;
   word-wrap: break-word;
+  white-space: normal;
+  display: inline-block;
 }
 
 dd {
@@ -26,6 +130,10 @@ dd {
 
 dt {
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: normal;
+  display: inline-block;
 }
 
 img {
@@ -36,13 +144,10 @@ img {
 }
 
 .sample-image {
+  margin: 0 auto;
   margin-bottom: 18px;
-}
-
-h1 {
-  letter-spacing: 8px;
-  font-size: 86px;
-  line-height: 120px;
+  max-width: 500px;
+  text-align: center;
 }
 
 div {
@@ -50,58 +155,67 @@ div {
   color: white;
 }
 
-.btn {
-  margin: 8px;
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -moz-osx-font-smoothing: grayscale;
+.sidebar a {
+  text-decoration: none;
+}
+
+.recipe, .contents-list {
+  color: white;
+  background-color: #383838;
+  padding: 14px;
+  font-family: "Montserrat";
+  letter-spacing: 0.05em;
+  border: 1px solid black;
+  cursor: pointer;
   position: relative;
-  padding-left: 2.5em;
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-}
-
-.btn:before {
-  content: "💫";
-  position: absolute;
-  left: 1em;
-  padding: 0 1px;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-  -webkit-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-}
-
-.btn:hover:before, .btn:focus:before, .btn:active:before {
-  -webkit-transform: scale(1.3) translateZ(0);
-  transform: scale(1.3) translateZ(0);
+  padding-left: 2.8em;
+  transition: all .5s ease-out;
 }
 
 .contents-list {
-  color: black;
+  font-size: 0.9em;
 }
 
-.contents-list:hover {
-  color: #2a9fd6;
+nav .heading {
+  word-break: normal;
+}
+
+.recipe {
+  display: block;
+  width: 90%;
+}
+
+.recipe:hover, .contents-list:hover {
+  background-color: #449d44;
+}
+
+.recipe:before {
+  content: "💫";
 }
 
 .contents-list:before {
-  content: "📼"
+  content: "📼";
+}
+
+.recipe:before, .contents-list:before {
+  position: absolute;
+  left: 1em;
+  padding-right: 1em;
+}
+
+.recipe:hover:before, .recipe:focus:before, .recipe:active:before {
+  transform: scale(1.5) translateX(0.1em);
+  transition: 0.5s;
+}
+
+.contents-list:hover:before, .contents-list:focus:before, .contents-list:active:before {
+  transform: scale(1.8) translateX(0.3em);
+  transition: 0.5s;
 }
 
 .codeblock {
   font-family: monospace
   padding: 2px 4px;
-  font-size: 90%;
   color: #c7254e;
   background-color: #f9f2f4;
   border-radius: 4px;
@@ -115,14 +229,29 @@ div {
   font-size: 90%;
 }
 
-@media only screen and (min-width: 576px) {
-  img {
-    max-width: 60%;
-  }
+.well {
+  padding: 1em;
+  margin-bottom: 0.5em;
+  background-color: #151515;
+  border: 1px solid #030303;
+  border-radius: 8px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
 
-@media only screen and (min-width: 992px) {
-  img {
-    width: 100%;
-  }
+.hiding {
+  opacity: 0;
+	height: 0;
+  overflow: hidden;
+}
+
+input {
+	position: absolute;
+	left: -999em
+}
+
+input[type=checkbox]:checked + div {
+	opacity: 1;
+  height: auto;
+  overflow: hidden;
+  transition: opacity .5s linear, height .5s linear;
 }

js/js.js

@@ -1,28 +1,20 @@
 $(document).ready(function() {
 
-  $(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');
-    // add direct link to modal window
-    $(".link").empty();
-    $(".link").append("<small>Link to this command: <a href="+window.location.href+">"+window.location.href+"</a></small>");
+    id = window.location.hash
+    document.getElementById(id.substring(1)).checked = true;
+    $('html, body').animate({ scrollTop: $(id).offset().top}, 1000);
+    $(id).closest('div').find('.link').empty();
+    $(id).closest('div').find('.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
-  $('span[data-toggle="modal"]').on("click", function(){
-    window.location.hash = $(this).attr("data-target");
-    // add direct link to modal window
-    $(".link").empty();
-    $(".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);
+  // add hash URL when recipe is opened
+  $('label[class="recipe"]').on("click", function(){
+    id = $(this).attr("for");
+    window.location.hash = ('#' + id)
+    $('#' + id).closest('div').find('.link').empty();
+    $('#' + id).closest('div').find('.link').append("<small>Link to this command: <a href="+window.location.href+">"+window.location.href+"</a></small>");
   });
 
 });

scripts/ffmprovisr

@@ -22,4 +22,6 @@ elif [[ "$(uname -s)" = "Linux" ]] ; then
         ffmprovisr_path=$(find ~/.linuxbrew/Cellar/ffmprovisr -iname 'index.html' | sort -M | tail -n1)
     fi
     xdg-open "${ffmprovisr_path}"
+else
+    echo "Please locate the 'ffmprovisr' folder, and open the 'index.html' file in a browser."
 fi