jekyll-theme-hydejack 6.0.0.pre.alpha → 6.0.0.pre.beta2

data/_layouts/compress.html

@@ -17,10 +17,10 @@
                 /\___/                \ \____/
                 \/__/                  \/___/
 
-Copyright (c) 2017 Florian Klampfer.
-Licensed under MIT.
-Design: Hydejack by @qwtel. Get it at: https://qwtel.com/hydejack
-Version: 6.0.0-alpha
+Copyright (c) 2017 Florian Klampfer
+Licensed under MIT
+Powered by Hydejack (https://qwtel.com/hydejack/)
+Version: 6.0.0-beta2
 -->{% capture _LINE_FEED %}
 {% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}
 </html>

data/_layouts/default.html

@@ -2,24 +2,32 @@
 layout: base
 ---
 
-<article class="page" role="article">
-  <h1 class="page-title">{{ page.title }}</h1>
-
-  {% capture warning %}
-  Looks like you are using the `default` layout, which is not recommened.
-  Use `page` or `post` instead.
-  See the Hydejack documentation for more information on available layouts.
+<div class="page">
+  <h1 class="page-title">{{ page.title | default:"Home"}}</h1>
+  {% capture message %}
+Looks like you are using the `{{ page.layout }}` layout. This layout is not supported by Hydejack. Instead use `blog` or `list`. For more information see the [Hydejack Documentation](https://qwtel.com/hydejack/docs/6.0.0-beta2).
   {% endcapture %}
-
-  {% include message.html text=warning %}
+  {% include message.html text=message %}
 
   {{ content }}
 
   <h2>Posts</h2>
-  <hr/>
   <ul class="related-posts">
-  {% for post in site.posts %}
-    {% include post-list-item.html post=post format="%m/%d/%y" %}
-  {% endfor %}
+    {% for post in site.posts %}
+      {% include post-list-item.html post=post format="%m/%d/%y" %}
+    {% endfor %}
+  </ul>
+
+  <h2>Pages</h2>
+  <ul class="related-posts">
+    {% for page in site.html_pages %}
+      {% if page.layout == 'page' %}
+        <li class="h4">
+          <a href="{{ page.url | relative_url }}" data-flip="title">
+            <span>{{ page.title }}</span>
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
   </ul>
-</article>
+</div>

data/_layouts/home.html

@@ -0,0 +1,3 @@
+---
+layout: default
+---

data/_layouts/list.html

@@ -14,7 +14,7 @@ layout: base
   {% endif %}
 {% endif %}
 
-{% if page.title != null %}
+{% if page.title.size > 0 %}
   <h1 class="page-title">{{ page.title }}</h1>
   {% include message.html text=page.description %}
 {% endif %}
@@ -22,7 +22,7 @@ layout: base
 {% for post in posts %}
   {% assign currentdate = post.date | date: "%Y" %}
   {% if currentdate != date %}
-    {% unless forloop.first %}</ul><hr/>{% endunless %}
+    {% unless forloop.first %}</ul>{% endunless %}
     <h2 id="y{{post.date | date: "%Y"}}">{{ currentdate }}</h2>
     <ul class="related-posts">
     {% assign date = currentdate %}

data/_layouts/redirect.html

@@ -0,0 +1,8 @@
+---
+layout: base
+---
+
+<div class="page">
+  <h1 class="page-title">Redirecting...</h1>
+  <p class="lead"><a href="{{ page.redirect.to }}">{{ page.redirect.to }}</a></p>
+</div>

data/_sass/_mixins.scss

@@ -1,8 +1,8 @@
-@mixin figure() {
+@mixin pre() {
   margin-left: -1rem;
   margin-right: -1rem;
   padding: 1rem;
-  background-color: #f9f9f9;
+  background-color: $gray-bg;
 }
 
 @mixin aspect-ratio($width, $height) {

data/_sass/_spinner.scss

@@ -23,7 +23,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: #9a9a9a;
+  background-color: $gray;
   -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
           animation: sk-foldCubeAngle 2.4s infinite linear both;
   -webkit-transform-origin: 100% 100%;

data/_sass/_variables.scss

@@ -1,43 +1,27 @@
-$gray-1: #f9f9f9;
-$gray-2: #ccc;
-$gray-3: #767676;
-$gray-4: #515151;
-$gray-5: #313131;
-
-$red: #ac4142;
-$orange: #d28445;
-$yellow: #f4bf75;
-$green: #90a959;
-$cyan: #75b5aa;
-$blue: #268bd2;
-// $blue: #6a9fb5;
-$brown: #8f5536;
+$gray: #9a9a9a;
+$gray-bg: #f9f9f9;
+$gray-text: #787878;
 
 $root-font-size: 16px;
+$root-font-size-medium: 17px;
+$root-font-size-large: 18px;
 $root-line-height: 1.75;
 
-$body-color: #464646;
+$body-color: #333;
 $body-bg: #fff;
-$link-color: $blue;
 
 $border-color: #e5e5e5;
+$border-color-light: #eee;
 
-$large-breakpoint: 38em;
-$large-font-size: 20px;
-
-$code-font-family: Menlo, Monaco, "Courier New", monospace;
+$code-font-family: Menlo, Monaco, Consolas, monospace;
 $code-color: inherit;
 
-$scrollbar-width: 18px;
-
-$break-point-1: 800px + 1px;
-$break-point-2: 1024px + 1px;
-$break-point-3: 1440px + 1px;
-
-$break-point-font-1: 608px;
-$break-point-font-2: 1152px;
-
-$break-point-content-max: 82em; // content max width reached
-$break-point-dynamic: 1656px; // left-right margin equal
+$break-point-1: 38em;
+$break-point-2: 50em;
+$break-point-3: 60em;
+$break-point-4: 72em;
+$break-point-5: 92em;
+$break-point-dynamic: 103.5em;
+$break-point-font-large: 125em;
 
 $dynamic-width: calc(50% - 28rem);

data/_sass/hydejack/_base-inline.scss

@@ -40,15 +40,15 @@ body, main {
   // transform: scale(0.33);
 }
 
-@media screen and (min-width: $break-point-font-1) {
+@media screen and (min-width: $break-point-1) {
   html {
-    font-size: 18px;
+    font-size: $root-font-size-medium;
   }
 }
 
-@media screen and (min-width: $break-point-1) {
+@media screen and (min-width: $break-point-2) {
   html {
-    font-size: 16px;
+    font-size: $root-font-size;
   }
 
   main {
@@ -61,20 +61,26 @@ body, main {
   // }
 }
 
-@media screen and (min-width: $break-point-font-2) {
+@media screen and (min-width: $break-point-4) {
+  html {
+    font-size: $root-font-size-medium;
+  }
+}
+
+@media screen and (min-width: $break-point-font-large) {
   html {
-    font-size: 18px;
+    font-size: $root-font-size-large;
   }
 }
 
 // @media print {
 //   html {
-//     font-size: 16px;
+//     font-size: $root-font-size;
 //   }
 // }
 
 .sr-only {
-  // will be properly styled in the non-essential part
+  // will be properly styled in the main css
   display: none;
   // display: unset;
   // position: absolute;
@@ -92,28 +98,35 @@ body, main {
 }
 
 // .faded {
-//   color: #9a9a9a;
+//   color: $gray;
 // }
 
 a, .a {
   position: relative;
   padding-bottom: 0.15rem;
-  border-bottom: 3px solid transparent;
-
+  border-bottom: 1px solid;
+  // transition: color 500ms, border-color 250ms ease;
+  //
   // &:hover, &:focus {
   //   text-decoration: none;
-  //   border-bottom: 3px solid;
+  //   border-bottom-width: 4px;
+  //   transition: color 500ms, border-color 50ms ease-out;
   // }
-
+  //
   // &.no-hover {
   //   border-bottom: none;
   //   padding-bottom: none;
+  //   transition: none;
+  //
+  //   &:hover, &:focus {
+  //     transition: none;
+  //   }
   // }
 }
 
 .img {
   overflow: hidden;
-  background-color: #f9f9f9;
+  background-color: $gray-bg;
   // background-position: center;
   // background-repeat: no-repeat;
   // background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjkwIiB2aWV3Qm94PSIwIDAgMTYwIDkwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMDQ4ODI4LCAwLCAwLCAwLjA0Nzk5MSwgNTQuOTk5OTczLCAyMC40MjgxNDgpIj4KICAgIDxwYXRoIGQ9Ik05NTkuODg0IDEyOGMwLjA0MCAwLjAzNCAwLjA4MiAwLjA3NiAwLjExNiAwLjExNnY3NjcuNzdjLTAuMDM0IDAuMDQwLTAuMDc2IDAuMDgyLTAuMTE2IDAuMTE2aC04OTUuNzdjLTAuMDQwLTAuMDM0LTAuMDgyLTAuMDc2LTAuMTE0LTAuMTE2di03NjcuNzcyYzAuMDM0LTAuMDQwIDAuMDc2LTAuMDgyIDAuMTE0LTAuMTE0aDg5NS43N3pNOTYwIDY0aC04OTZjLTM1LjIgMC02NCAyOC44LTY0IDY0djc2OGMwIDM1LjIgMjguOCA2NCA2NCA2NGg4OTZjMzUuMiAwIDY0LTI4LjggNjQtNjR2LTc2OGMwLTM1LjItMjguOC02NC02NC02NHYweiIgc3R5bGU9ImZpbGw6IHJnYigyMjEsIDIyMSwgMjIxKTsiLz4KICAgIDxwYXRoIGQ9Ik04MzIgMjg4YzAgNTMuMDIwLTQyLjk4IDk2LTk2IDk2cy05Ni00Mi45OC05Ni05NiA0Mi45OC05NiA5Ni05NiA5NiA0Mi45OCA5NiA5NnoiIHN0eWxlPSJmaWxsOiByZ2IoMjIxLCAyMjEsIDIyMSk7Ii8+CiAgICA8cGF0aCBkPSJNODk2IDgzMmgtNzY4di0xMjhsMjI0LTM4NCAyNTYgMzIwaDY0bDIyNC0xOTJ6IiBzdHlsZT0iZmlsbDogcmdiKDIyMSwgMjIxLCAyMjEpOyIvPgogIDwvZz4KPC9zdmc+');

data/_sass/hydejack/_base.scss

@@ -40,41 +40,47 @@ body, main {
   transform: scale(0.33);
 }
 
-@media screen and (min-width: $break-point-font-1) {
+@media screen and (min-width: $break-point-1) {
   // html {
-  //   font-size: 18px;
+  //   font-size: $root-font-size-large;
   // }
 }
 
-@media screen and (min-width: $break-point-1) {
+@media screen and (min-width: $break-point-2) {
   // html {
-  //   font-size: 16px;
+  //   font-size: $root-font-size;
   // }
   //
   // main {
   //   border-left: none;
   // }
-  //
+
   .shadow-main {
     left: 0;
     width: 100%;
   }
 }
 
-@media screen and (min-width: $break-point-font-2) {
+@media screen and (min-width: $break-point-4) {
   // html {
-  //   font-size: 18px;
+  //   font-size: $root-font-size-medium;
+  // }
+}
+
+@media screen and (min-width: $break-point-font-large) {
+  // html {
+  //   font-size: $root-font-size-large;
   // }
 }
 
 @media print {
   html {
-    font-size: 16px;
+    font-size: $root-font-size;
   }
 }
 
 .sr-only {
-  // will be properly styled in the non-essential part
+  // will be properly styled in the main css
   // display: none;
   display: unset;
   position: absolute;
@@ -92,32 +98,35 @@ body, main {
 // }
 
 .faded {
-  color: #9a9a9a;
+  color: $gray;
 }
 
 a, .a {
   // position: relative;
   // padding-bottom: 0.15rem;
-  // border-bottom: 3px solid transparent;
+  // border-bottom: 1px dotted transparent;
+  transition: color 500ms, border-color 250ms;
 
   &:hover, &:focus {
     text-decoration: none;
-    border-bottom: 3px solid;
+    // border-bottom-width: 4px;
+    transition: color 500ms, border-color 50ms;
   }
 
   &.no-hover {
     border-bottom: none;
     padding-bottom: none;
-  }
-}
+    transition: none;
 
-.content a {
-  transition: color 300ms;
+    &:hover, &:focus {
+      transition: none;
+    }
+  }
 }
 
 .img {
   // overflow: hidden;
-  // background-color: #f9f9f9;
+  // background-color: $gray-bg;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjkwIiB2aWV3Qm94PSIwIDAgMTYwIDkwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMDQ4ODI4LCAwLCAwLCAwLjA0Nzk5MSwgNTQuOTk5OTczLCAyMC40MjgxNDgpIj4KICAgIDxwYXRoIGQ9Ik05NTkuODg0IDEyOGMwLjA0MCAwLjAzNCAwLjA4MiAwLjA3NiAwLjExNiAwLjExNnY3NjcuNzdjLTAuMDM0IDAuMDQwLTAuMDc2IDAuMDgyLTAuMTE2IDAuMTE2aC04OTUuNzdjLTAuMDQwLTAuMDM0LTAuMDgyLTAuMDc2LTAuMTE0LTAuMTE2di03NjcuNzcyYzAuMDM0LTAuMDQwIDAuMDc2LTAuMDgyIDAuMTE0LTAuMTE0aDg5NS43N3pNOTYwIDY0aC04OTZjLTM1LjIgMC02NCAyOC44LTY0IDY0djc2OGMwIDM1LjIgMjguOCA2NCA2NCA2NGg4OTZjMzUuMiAwIDY0LTI4LjggNjQtNjR2LTc2OGMwLTM1LjItMjguOC02NC02NC02NHYweiIgc3R5bGU9ImZpbGw6IHJnYigyMjEsIDIyMSwgMjIxKTsiLz4KICAgIDxwYXRoIGQ9Ik04MzIgMjg4YzAgNTMuMDIwLTQyLjk4IDk2LTk2IDk2cy05Ni00Mi45OC05Ni05NiA0Mi45OC05NiA5Ni05NiA5NiA0Mi45OCA5NiA5NnoiIHN0eWxlPSJmaWxsOiByZ2IoMjIxLCAyMjEsIDIyMSk7Ii8+CiAgICA8cGF0aCBkPSJNODk2IDgzMmgtNzY4di0xMjhsMjI0LTM4NCAyNTYgMzIwaDY0bDIyNC0xOTJ6IiBzdHlsZT0iZmlsbDogcmdiKDIyMSwgMjIxLCAyMjEpOyIvPgogIDwvZz4KPC9zdmc+');

data/_sass/hydejack/_content-inline.scss

@@ -8,18 +8,22 @@
   padding-top: 5rem;
   padding-bottom: 10rem;
 
-  @media screen and (min-width: $break-point-1) {
+  @media screen and (min-width: $break-point-2) {
+    max-width: 42rem;
     padding-top: 4rem;
-    max-width: 48rem;
     margin-left: 20rem;
     margin-right: 2rem;
   }
 
-  @media screen and (min-width: $break-point-font-2) {
+  @media screen and (min-width: $break-point-4) {
     margin-left: 22rem;
     margin-right: 4rem;
   }
 
+  @media screen and (min-width: $break-point-5) {
+    max-width: 48rem;
+  }
+
   @media screen and (min-width: $break-point-dynamic) {
     margin: auto;
   }

data/_sass/hydejack/_footer-inline.scss

@@ -4,11 +4,15 @@ main > footer {
   left: 0;
   right: 0;
   padding: 0 1rem;
-  color: #9a9a9a;
+  color: $gray;
   font-size: smaller;
   text-align: center;
 
-  a::after {
-    display: none;
+  > p {
+    margin-bottom: 0;
   }
+
+  // a::after {
+  //   display: none;
+  // }
 }

data/_sass/hydejack/_katex.scss

@@ -1,28 +1,31 @@
 article {
   .katex-display, div.MathJax_Preview {
-    @include figure();
-
     /* Prevent code linebreaks and allow side-scrolling (much better readability on mobile) */
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 
-    backface-visibility: hidden; // wat?
+    @include pre();
+
+    backface-visibility: hidden;
   }
 
   div.MathJax_Preview {
     font-family: $code-font-family;
-    font-size: 0.75rem;
-    line-height: 1.4;
+    font-size: .75em;
+    line-height: 1.45;
     white-space: pre;
+    margin-bottom: 1rem;
   }
 
   span.MathJax_Preview {
     font-family: $code-font-family;
-    font-size: 0.85rem;
+    padding: .25em .5em;
+    font-size: .85em;
+    background-color: rgba(0, 0, 0, 0.03);
   }
 }
 
 .MathJax_Preview:empty {
-  display:none;
+  display: none;
   visibility: hidden;
 }