moderate redesign, figure plugin

stephenhowells · Dec 2, 2017 · 20418e8 · 20418e8
1 parent cf08efa
commit 20418e8
Show file tree

Hide file tree

Showing 117 changed files with 761 additions and 663 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -4,7 +4,7 @@
           <li><strong>Twitter:</strong>&nbsp;<a href="https://twitter.com/stephenhowells">@stephenhowells</a></li>
           <li><strong>GitHub:</strong>&nbsp;<a href="https://github.com/stephenhowells">stephenhowells</a></li>
         </ul>
-      <p>Made with <i class="icon ion-heart"></i> in sunny Arizona. <span class="copy">Copyright &copy; 2014-{{ site.time | date: "%Y" }} Stephen&nbsp;Howells</span></p>
+      <p>Made with <span class="heart">♥</span> in sunny Arizona. <span class="copy">&copy; 2014-{{ site.time | date: "%Y" }} Stephen&nbsp;Howells</span></p>
     </footer>
   {% include scripts.html %}
   </body>

diff --git a/_includes/head.html b/_includes/head.html
@@ -8,7 +8,6 @@
   <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
   <link rel="shortcut icon" href="/dist/img/favicon.ico?v{{ site.data.version.rev }}" />
   <link rel="apple-touch-icon-precomposed" href="/dist/img/apple-touch-icon.png?v{{ site.data.version.rev }}" />
-  <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6185512/7037372/css/fonts.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
   <style>

diff --git a/_includes/main.min.css b/_includes/main.min.css
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,7 +1,7 @@
 <nav>
   <div class="nav">
     <div class="logo">
-      <a class="nav-logo" href="/">StephenHowells<span>.net</span></a>
+      <a class="nav-logo" href="/">FROM THE DESK OF STEPHEN&nbsp;HOWELLS</a>
     </div>
     <ul>
       <li>
@@ -17,7 +17,7 @@
         <a href="https://github.com/stephenhowells/stephenhowells.net">Source</a>
       </li>
       <li>
-        <a href="{{ site.url }}/feeds/main.xml">RSS</a>
+        <a href="{{ site.url }}/feeds/main.xml">Subscribe</a>
       </li>
     </ul>
   </div>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -8,8 +8,8 @@ <h1 class="post-title">{{ page.title | no_widows }}</h1>
     <p class="post-meta">{% include time.html the_date=page.date %}</p>
     {{ content }}
   {% elsif page.type == 'link' %}
-    <h4><a href="{{ page.link }}" class="link-item">{{ page.title | no_widows }}</a></h4>
-    {{ content }}
+    <h4 class="link-item-container"><a href="{{ page.link }}" class="link-item">{{ page.title | no_widows }}</a></h4>
     <p class="post-meta-link">{% include time.html the_date=page.date %}</p>
+    {{ content }}
   {% endif %}
 </article>
diff --git a/_plugins/image.rb b/_plugins/image.rb
@@ -0,0 +1,60 @@
+module Jekyll
+  class FigureTag < Liquid::Tag
+    @url = nil
+    @caption = nil
+    @class = nil
+    @resrc = nil
+
+    IMAGE_URL_WITH_CLASS_AND_CAPTION = /(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)"(.*?)"/i
+    IMAGE_URL_WITH_CAPTION = /((https?:\/\/|\/)(\S+))(\s+)"(.*?)"/i
+    IMAGE_URL_WITH_CLASS = /(\w+)(\s+)((https?:\/\/|\/)(\S+))/i
+    IMAGE_URL = /((https?:\/\/|\/)(\S+))/i
+
+    def initialize(tag_name, markup, tokens)
+      super
+
+      if markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION
+        @class   = $1
+        @url     = $3
+        @caption = $7
+      elsif markup =~ IMAGE_URL_WITH_CAPTION
+        @url     = $1
+        @caption = $5
+      elsif markup =~ IMAGE_URL_WITH_CLASS
+        @class = $1
+        @url   = $3
+      elsif markup =~ IMAGE_URL
+        @url = $1
+      end
+
+    end
+
+    def render(context)
+      site = context.registers[:site]
+      @site_url = site.config['url']
+
+      if @class
+        if @class == 'breakout'
+          source = "</div><figure class='#{@class}'>"
+        else
+          source = "<figure class='#{@class}'>"
+        end
+      else
+        source = "<figure>"
+      end
+
+      if ENV['JEKYLL_ENV'] != 'development' && (@url.include? '.jpg' or @url.include? '.jpeg' or @url.include? '.png')
+        source += "<img src=\"#{@site_url}#{@url}\" data-action=\"zoom\"/>"
+      else
+        source += "<img src=\"#{@url}\" data-action=\"zoom\"/>"
+      end
+
+      source += "<figcaption>#{@caption}</figcaption>" if @caption
+      source += "</figure>"
+
+      source
+    end
+  end
+end
+
+Liquid::Template.register_tag('figure', Jekyll::FigureTag)
diff --git a/_posts/2016-06-18-use-elixir-in-coderunner-2.markdown b/_posts/2016-06-18-use-elixir-in-coderunner-2.markdown
@@ -20,10 +20,10 @@ curl -O https://raw.githubusercontent.com/elixir-lang/elixir-tmbundle/master/Syn
 
 Then, in CodeRunner's preferences visit the "Languages" tab and click the plus sign in the lower left. Name the new syntax "Elixir" and then in the "Syntax Mode" dropdown box select `Other…`. Navigate to where you saved the `Elixir.tmLanguage` file earlier and select it. You're almost finished. The following two screenshots display the required configuration to start using Elixir:
 
-![CodeRunner Elixir Settings](/dist/img/2016-06-18_8_17_37AM.png){:data-action="zoom"}
+{% figure /dist/img/2016-06-18_8_17_37AM.png %}
 
-![CodeRunner Elixir Template](/dist/img/2016-06-18_8_18_10AM.png){:data-action="zoom"}
+{% figure /dist/img/2016-06-18_8_18_10AM.png %}
 
 Once those settings are saved in CodeRunner you'll have the option to start using Elixir. Just choose it in the dropdown box for a new file:
 
-![CodeRunner Elixir Example](/dist/img/2016-06-18_2_48_03PM.png){:data-action="zoom"}
+{% figure /dist/img/2016-06-18_2_48_03PM.png %}
diff --git a/_scss/_globals.scss b/_scss/_globals.scss
@@ -2,11 +2,11 @@
 $font-stack:  "Sentinel SSm A", "Sentinel SSm B", "Whitney SSm A", "Whitney SSm B", system, -apple-system, BlinkMacSystemFont, Avenir, sans-serif;
 $headline-fonts: "Whitney Cond SSm A", "Whitney Cond SSm B", system, -apple-system, BlinkMacSystemFont, Avenir, sans-serif;
 $code-font: "Operator Mono A", "Operator Mono B", 'Source Code Pro', Consolas, Monaco, 'Andale Mono', monospace;
-$date-font: "Whitney SSm A", "Whitney SSm B", system, -apple-system, BlinkMacSystemFont, Avenir, sans-serif;
-$footnotes: "Whitney SSm A", "Whitney SSm B", system, -apple-system, BlinkMacSystemFont, Avenir, sans-serif;
+$date-font: "Whitney Cond SSm A", "Whitney Cond SSm B", system, -apple-system, BlinkMacSystemFont, Avenir, sans-serif;
+$footnotes: "Whitney Cond SSm A", "Whitney Cond SSm B", system, -apple-system, BlinkMacSystemFont, Avenir, sans-serif;
 
 // Colors
-$accent-color: #3784b8;
+$accent-color: #f57077;
 $body-font-color: #555;
 $body-bg-color: #fff;
 $bg-contrast: #efefef;

diff --git a/_scss/_layout.scss b/_scss/_layout.scss
@@ -55,14 +55,10 @@ article {
   ol,
   ul,
   table,
-  blockquote,
   .archive-list,
   .search,
   video {
     @include page-box;
-
-    padding-left: 10px;
-    padding-right: 10px;
   }
 
   p,
@@ -92,7 +88,7 @@ article {
     @include page-box;
 
     overflow-x: auto;
-    padding: 12px 10px;
+    padding: 12px 0;
   }
 
   p code,
@@ -103,7 +99,8 @@ article {
   }
 
   blockquote {
-    border-left: 4px solid $accent-color;
+    @include page-box;
+    border-left: 3px solid $accent-color;
 
     p,
     ul,
@@ -138,16 +135,25 @@ article {
   margin-bottom: 12px;
 }
 
-img {
-  max-width: 100%;
-  opacity: 1;
-  transition: opacity 0.3s ease-in;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-
-  &.small-img {
-    transform: scale(0.5);
+figure {
+  height: auto;
+  max-width: 1000px;
+  margin: 0 auto;
+  clear: both;
+  overflow: visible;
+  img {
+    height: auto;
+    max-width: 100%;
+    opacity: 1;
+    transition: opacity 0.3s ease-in;
+    display: inline-block;
+    margin: 12px auto 0;
+  }
+  figcaption {
+    display: inline-block;
+    width: 100%;
+    margin-top: 12px;
+    margin-bottom: 24px;
   }
 }
 

diff --git a/_scss/_media.scss b/_scss/_media.scss
@@ -8,17 +8,12 @@
       margin-bottom: 12px;
 
       .nav-logo {
-        padding-left: 10px !important;
+        font-size: 1.1rem !important;
       }
     }
 
     ul {
-      float: left !important;
-      clear: left;
-      width: 100%;
-      border-top: 1px solid #eaeaea;
       background: #fafafa;
-      padding-left: 10px;
 
       li {
         &:first-child {
@@ -31,8 +26,31 @@
   }
 
   article {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    ol,
+    ul,
+    table,
+    .archive-list,
+    .search,
+    video,
+    pre code {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
     li {
       margin-left: 20px;
     }
+    blockquote {
+      width: auto;
+      margin: 0 10px;
+      clear: both;
+      float: none;
+    }
   }
 }
diff --git a/_scss/_nav.scss b/_scss/_nav.scss
@@ -3,30 +3,36 @@ nav {
 
   .nav {
     @include page-box;
-
-    padding-left: 10px;
-    padding-right: 10px;
     margin: 60px 0;
-    border-bottom: 4px solid $body-font-color;
 
     .logo {
-      display: inline-block;
-      float: left;
+      display: block;
+      clear: both;
+      text-align: center;
+      margin-bottom: 20px;
 
       .nav-logo {
-        padding: 0 12px 0 0;
+        &:hover {
+          color: $body-font-color;
+        }
       }
     }
 
     ul {
-      float: right;
+      display: block;
+      clear: both;
+      text-align: center;
+      border-top: 1px solid $body-font-color;
+      border-bottom: 1px solid $body-font-color;
 
       li {
         list-style: none;
         display: inline-block;
 
         a {
           padding: 0 10px;
+          color: lighten($body-font-color, 10%);
+          letter-spacing: 0.1rem;
         }
       }
     }