arco 0.6.3 → 0.8.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed3afabbd0f0d5eb50c6d5dc2eb291efc093a4bfff6b2bd9d24bb86e2104c8c5
-  data.tar.gz: 25e40f782d66b71d7aec51e1c3a3d45ce67c919621fc8872b2219479ff172fb3
+  metadata.gz: d5a37383a5b47ece7a581b757185eaac67f325c6c682547ec5ecaf5ef0f3bfc7
+  data.tar.gz: c8acd591f1bb03327e8de3de979080899d3b369a4e246b248a95eee4f4c77d5f
 SHA512:
-  metadata.gz: 28544ffe6094e042a600389c647e628dbca4a92da8ac1ba1027dace5b4aa9b1c3e92e58c36346df07da315dc401b4a899d1c0fe3990a39c79e846f0c3953029b
-  data.tar.gz: f01d4e8da0622fddedd6e4d414744cee5936a2cd519f06827cc96991a8988c61d8d0064c655bdc0c2064ed1a0011a5a4a0dcf9097602535cd53680701877ec91
+  metadata.gz: 796e4e121b0d95e2d460135b677f7291aa873715eb73bce0fb79967d06ed593e0f7d7c6fc354be09e01b3b895b2fa4929d9052a72eb10ee7eadd3815d0319f5e
+  data.tar.gz: d1a173c25f42aab7a711d818b1f85e3d34201d77b8344daa632b53ac63ec4fe5c22bd7daf2b3c72d34a9c971ec6338cde73368a54b1c2a64f7a22aabd6146677

data/README.md

@@ -1,11 +1,17 @@
 # arco
 
-Arco is a responsive fixed-sidebar layout with a two column masonry grid which also features a landing page, a 404 page, smooth page transitions and a simple permalink structure.
+Arco is a responsive fixed-sidebar layout with a responsive masonry grid which also features a landing page, a 404 page, smooth page transitions and a simple permalink structure.
+
+<p align="center">
+  <img src="assets/images/demo.gif" width="60%">
+</p>
 
 This theme also utilises [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag) and [jekyll-sitemap](https://github.com/jekyll/jekyll-sitemap) to ensure your work will be seen.
 
 See this theme in use at [meebuhs.github.io](https://meebuhs.github.io) and check the [source code](https://github.com/meebuhs/meebuhs.github.io) to get yourself started.
 
+Also check the the usage examples in [this post](https://meebuhs.github.io/projects/arco).
+
 ## Installation
 
 Add this line to your Jekyll site's `Gemfile`:
@@ -78,11 +84,13 @@ There are additional parameters which can be set for use with `jekyll-seo-tag`.
 layout: post
 title: Post title
 description: Post description
-category: completed | ongoing
 permalink: /projects/post-title
-source-url: https://project.source/link/
-cover-image: /assets/image-for-front-page.png
-image: /assets/image-for-top-of-post.png 
+urls:
+    source: https://project.source/link/
+    download: https://project.download/link/
+images: 
+    cover: /assets/image-for-front-page.png
+    top: /assets/image-for-top-of-post.png 
 tags: [tags, which, relate, to, post]
 mathjax: true | false
 ---
@@ -102,18 +110,14 @@ In order to enable lazy loading on an image you must add a `data-echo` attribute
 
 ### Image lightbox
 
-In order to open an image in a fullscreen lightbox on click, you must wrap the image in a link tag like so: 
+In order to open an image in a fullscreen lightbox on click, you must wrap the image in a link tag with the class `clickable-image` like so: 
 
 ```html
-<a href="/assets/actual-image.png">
+<a class="clickable-image" href="/assets/actual-image.png">
     <img src="/assets/placeholder-for-image.png" alt="alt-text" data-echo="/assets/actual-image.png" />
 </a>
 ```
 
-### Markdown features
-
-[Check here](https://meebuhs.github.io/projects/arco) for examples of the supported markdown features.
-
 ### Resume support
 
 To add a resume to the site, set `resume: true` in your `_config.yml`.

data/_includes/cover.html

@@ -3,6 +3,11 @@
       {% if site.image %}<img class="cover-image" src="{{ site.image }}" />{% endif %}
       <h1>{{ site.title }}</a></h1>
       <h6>{{ site.description }}</h6>
+      {% if site.tagline %}
+        <div class="cover-tagline">
+          {{ site.tagline }}
+        </div>
+      {% endif %}
     </div>
     <div class="open-button-container">
         <a href="/projects/" id="open-button" class="button-dark">See my projects</a>

data/_includes/sidebar.html

@@ -9,25 +9,22 @@
         <div class="sidebar-text">
             <h1><a href="{{ "/projects/" }}" class="fade-onclick">{{ site.title }}</a></h1>
             <h6>{{ site.description }}</h6>
+            {% if site.tagline %}
+                <div class="sidebar-tagline">
+                    {{ site.tagline }}
+                </div>
+            {% endif %}
         </div>
     </div>
     <div class="sidebar-links">
-        <div class="sidebar-links-top">
-            {% assign identifier = page.url | split: "/" | last %}
-            {% if identifier  == "completed" %}
-            completed
-            {% else %}
-                <a href="{{ "/projects/completed" }}" class="fade-onclick">completed</a>
-            {% endif %}
-            / 
-            {% if identifier  == "ongoing" %}
-                ongoing
-            {% else %}
-                <a href="{{ "/projects/ongoing" }}" class="fade-onclick">ongoing</a>
-            {% endif %}
-        </div>
-        <div class="sidebar-links-bottom">
-            {% if site.github_url %} <a href="{{ site.github_url }}">github</a> / {% endif %}{% if site.resume %}<a href="{{ "/resume" }}" class="fade-onclick">resume</a> {% endif %}
-        </div>
+        {% if site.github_url %}
+            <a href="{{ site.github_url }}"><img class="github-image" src="/assets/images/GitHub-Mark-Light-64px.png"/>github</a>
+        {% endif %}
+        {% if site.github_url and site.resume %}
+                / 
+        {% endif %}
+        {% if site.resume %}
+            <a href="{{ "/resume" }}" class="fade-onclick">resume</a>
+        {% endif %}
     </div>
 </section>

data/_layouts/404.html

@@ -2,7 +2,8 @@
 <html lang="en-AU">
   <head>
     <meta charset="UTF-8">
-    <link rel="shortcut icon" type="image/png" href="favicon.png?">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" type="image/png" href="/favicon.png">
     <link rel="stylesheet" href="/assets/css/main.css">
   </head>
   <body>

data/_layouts/default.html

@@ -2,7 +2,8 @@
 <html lang="en-AU">
   <head>
     <meta charset="UTF-8">
-    <link rel="shortcut icon" type="image/png" href="favicon.png?">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" type="image/png" href="/favicon.png">
     <link rel="stylesheet" href="/assets/css/main.css">
     <link rel="stylesheet" href="/assets/flexmasonry/flexmasonry.css">
     <script src="/assets/flexmasonry/flexmasonry.js"></script>

data/_layouts/landing.html

@@ -2,7 +2,8 @@
 <html lang="en-AU">
   <head>
     <meta charset="UTF-8">
-    <link rel="shortcut icon" type="image/png" href="favicon.png?">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" type="image/png" href="/favicon.png">
     <link rel="stylesheet" href="/assets/css/main.css">
     {% seo %}
   </head>

data/_layouts/post-list.html

@@ -5,25 +5,23 @@ layout: default
 <section class="content">
   <svg id="content-fader"></svg>
   <div class="list-posts">
-    {% assign posts = site.categories[page.category] | default: site.posts %} 
-    {% for post in posts %}
+    {% for post in site.posts %}
     <div class="list-post">
       <a href="{{ post.url }}" class="fade-onclick">
         <div class="list-post-link">
-          <img class="list-post-image" src="{{ post.cover-image }}" />
+          {% if post.images.cover %}
+            <img class="list-post-image" src="{{ post.images.cover }}" />
+          {% endif %}
           <div class="list-post-info">
             <div class="list-post-title">{{ post.title }}</div>
-            <div class="list-post-summary">{{ post.summary }}</div>
+            <div class="list-post-description">{{ post.description }}</div>
           </div>
         </div>
       </a>
       <div class="list-post-footer">
         <span class="list-post-date">{{ post.date | date_to_string}}</span>
         &middot;
-        <a href="{{ "/projects/" }}{{ post.category }}" class="fade-onclick"><span class="list-post-category">{{ post.category }}</span></a>
-        <div class="list-post-tags">
-          {{ post.tags | join: ", "}}
-        </div>
+        <span class="list-post-tags">{{ post.tags | join: ", "}}</span>
       </div>
     </div>
     {% endfor %} 

data/_layouts/post.html

@@ -10,10 +10,14 @@ layout: default
   <svg id="content-fader"></svg>
   <div class="post">
     <div class="post-buttons">
-      <a href="{{ site.url }}\projects\" class="button-light-secondary">Home</a>
-      {% if page.source-url %}
-        <a href="{{ page.source-url }}" class="button-light-tertiary">See the source</a>
+      <a href="{{ site.url }}\projects\" class="button-light-primary fade-onclick">Home</a>
+      {% if page.urls.source %}
+        <a href="{{ page.urls.source }}" class="button-light-secondary">See the source</a>
       {% endif %}
+      {% if page.urls.download %}
+        <a href="{{ page.urls.download }}" class="button-light-tertiary">Download {{ page.title }}</a>
+      {% endif %}
+      
     </div>
 
     <div class="post-title"><h1>{{ page.title }}</h1></div>
@@ -21,20 +25,23 @@ layout: default
     <div class="post-header">
       <span class="post-date">{{ page.date | date_to_string}}</span>
       &middot;
-      <a href="{{ "/projects/" }}{{ page.category }}" class="fade-onclick"><span class="post-category">{{ page.category }}</span></a>
+      <span class="post-tags">{{ page.tags | join: ", "}}</span>
     </div>
-    <a href="{{ page.image }}">
-      <img class="post-image" alt="{{ page.title }} | {{ page.description | truncate: 80 }}" src="{{ page.image }}" />
-    </a>
+    <div class="clickable-image"><a href="{{ page.images.top }}" style="max-width: 80%">
+      <img class="post-image" alt="{{ page.title }} | {{ page.description | truncate: 80 }}" src="{{ page.images.top }}" />
+    </a></div>
 
     <div class="post-content">
       {{ content }}
     </div>
 
     <div class="post-buttons">
-      <a href="{{ site.url }}\projects\" class="button-light-secondary">Home</a>
-      {% if page.source-url %}
-        <a href="{{ page.source-url }}" class="button-light-tertiary">See the source </></a>
+      <a href="{{ site.url }}\projects\" class="button-light-primary fade-onclick">Home</a>
+      {% if page.urls.source %}
+        <a href="{{ page.urls.source }}" class="button-light-secondary">See the source</a>
+      {% endif %}
+      {% if page.urls.download %}
+        <a href="{{ page.urls.download }}" class="button-light-tertiary">Download {{ page.title }}</a>
       {% endif %}
     </div>
   </div>

data/_sass/arco.scss

@@ -7,6 +7,7 @@ html, body {
     height: 100%;
     box-sizing: border-box;
     font-family: "Open Sans", Arial, sans-serif;
+    font-size: 16px;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
 }
@@ -125,6 +126,11 @@ li, ul {
     line-height: 1.5em;
 }
 
+.MathJax_Display {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
 .content {
     width: auto;
     height: auto;

data/_sass/buttons.scss

@@ -9,6 +9,7 @@
     background-color: $background;
     color: $highlight;
     font-weight: bold;
+    font-size: 1rem;
     &:hover, &:focus {
         background-color: $highlight;
         color: $background;

data/_sass/constants.scss

@@ -1,12 +1,12 @@
 // Colours
 
 $primary-highlight: #f2777a;
-$secondary-highlight: #66cccc;
-$tertiary-highlight: #ffcc66;
+$secondary-highlight: #6b7fd7;
+$tertiary-highlight: #66cccc;
 
 $sidebar-colour: #1a2a38;
 $hover-colour: #e5e5e5;
-$summary-colour: #474747;
+$description-colour: #474747;
 $text-colour-light: white;
 $text-colour-dark: black;
 
@@ -15,5 +15,5 @@ $table-background-colour: #e5e5e5;
 // Sizes
 
 $sidebar-width: 330px;
-$sidebar-height-min: 100px;
-$sidebar-height: 150px;
+$sidebar-height-min: 150px;
+$sidebar-height: 200px;

data/_sass/cover.scss

@@ -44,4 +44,10 @@
     width: 200px;
     height: 200px;
     border-radius: 50%;
+}
+
+.cover-tagline {
+    max-width: 250px;
+    margin: auto;
+    color: $hover-colour;
 }

data/_sass/post-list.scss

@@ -30,7 +30,7 @@
 .list-post-title {
     color: $text-colour-dark;
     width: 100%;
-    font-size: 1.5em;
+    font-size: 1.5rem;
     font-weight: bold;
     a {
         color: white;
@@ -40,34 +40,24 @@
     }
 }
 
-.list-post-summary {
-    color: $summary-colour;
+.list-post-description {
+    color: $description-colour;
     margin: 0.4em 0;
-    font-size: 1em;
+    font-size: 1rem;
 }
 
 .list-post-footer {
-    margin-left: 1.4em;
+    margin: 0 1.4em;
 }
 
 .list-post-date {
     color: $secondary-highlight;
     font-weight: bold;
-    font-size: 0.9em;
-}
-
-.list-post-category { 
-    font-weight: bold;
-    font-size: 0.9em;
-    color: $primary-highlight;
-    &:hover, &:focus {
-        color: lighten($primary-highlight, 14%);
-    }
+    font-size: 0.9rem;
 }
 
 .list-post-tags {
     font-weight: bold;
-    font-size: 0.9em;
+    font-size: 0.9rem;
     color: $tertiary-highlight;
-    margin-top: 0.4em;
 }

data/_sass/post.scss

@@ -1,10 +1,15 @@
+@media only screen and (orientation: landscape) and (min-width: 1250px) {
+    .post {
+        max-width: 900px !important;
+    }
+}
+
 .post {
-    margin-top: 4em;
-    width: 100%;
+    max-width: 100%;
 }
 
 .post-title h1 {
-    margin: 1.5em 0 0 0;
+    margin: 0;
 }
 
 .post-description {
@@ -14,33 +19,39 @@
 .post-date {
     color: $secondary-highlight;
     font-weight: bold;
-    font-size: 0.9em;
+    font-size: 0.9rem;
 }
 
 .post-image {
-    display: block;
-    width: 70%;
-    margin: 2em auto 0 auto;
+    max-width: 100%;
+    max-height: 600px;
     border-radius: 5px;
+    margin-top: 1em;
 }
 
-.post-category { 
+.post-tags {
     font-weight: bold;
-    font-size: 0.9em;
-    color: $primary-highlight;
-    &:hover, &:focus {
-        color: lighten($primary-highlight, 14%);
-    }
+    font-size: 0.9rem;
+    color: $tertiary-highlight;
 }
 
 .post-content {
     margin-bottom: 2em;
 }
 
+.clickable-image {
+    max-width: 100%;
+    max-height: 600px;
+    text-align: center;
+}
+
+.clickable-image a {
+    max-width: 80%;
+    display: inline-block;
+}
+
 .post-content img {
-    max-width: 90%;
+    max-width: 100%;
     max-height: 600px;
-    display: block;
-    margin: 0 auto;
     border-radius: 5px;
 }

data/_sass/sidebar.scss

@@ -21,6 +21,18 @@
     }
 }
 
+.sidebar-tagline {
+    max-width: 250px;
+    margin: auto;
+    color: $hover-colour;
+}
+
+.github-image {
+    width: 1rem;
+    margin-right: .5rem;
+    vertical-align: middle;
+}
+
 #sidebar {
     display: flex;
     top: 0;
@@ -31,14 +43,36 @@
     transition: all .35s ease;
 }
 
-@media only screen and (orientation: portrait) {
-    #sidebar {
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        text-align: center;
-    }
+.content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+}
+
+#content-fader {
+    position: fixed;
+    right: 0;
+    z-index: 9999;
+    pointer-events: none;
+    background: white;
+    opacity: 1;
+    animation-duration: .35s;
+    animation-timing-function: ease;
+}
+
+#sidebar-fader {
+    position: fixed;
+    left: 0;
+    z-index: 9999;
+    pointer-events: none;
+    background: $sidebar-colour;
+    opacity: 1;
+    animation-duration: .35s;
+    animation-timing-function: ease;
+}
 
+@media only screen and (orientation: portrait) {
     .sidebar {
         width: 100%;
         height: $sidebar-height;
@@ -49,74 +83,98 @@
         height: $sidebar-height-min;
     }
 
-    .sidebar-header {
-        display: flex;
-        margin-left: 1em;
-    }
-
-    .sidebar-image-container {
-        margin-right: 1em;
-    }
-
-    .sidebar-image {
-        width: 80px;
-        height: 80px;
-        border-radius: 50%;
-    }
-
     .sidebar-text {
-        h1 {
-            font-size: 2.5em;
-            margin-top: -0.3em;
-        }
         h6 {
-            font-size: 1.3em;
             margin: 0;
         }
-        text-align: start;
-    }
-
-    .sidebar-links {
-        font-size: 1.5em;
-        margin-right: 1em;
-        text-align: end;
     }
 
     .content {
-        flex: 1;
         max-width: 100%;
-        margin: 190px 1em 1em 1em;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+        margin: calc(#{$sidebar-height} + 1em) 1em 1em 1em;
     }
 
     #content-fader {
-        position: fixed;
         bottom: 0;
-        right: 0;
         height: calc(100% - #{$sidebar-height});
         width: 100%;
-        z-index: 9999;
-        pointer-events: none;
-        background: white;
-        opacity: 1;
-        animation-duration: .35s;
-        animation-timing-function: ease;
     }
 
     #sidebar-fader {
-        position: fixed;
         top: 0;
-        left: 0;
         height: $sidebar-height;
         width: 100%;
-        z-index: 9999;
-        pointer-events: none;
-        background: $sidebar-colour;
-        opacity: 1;
-        animation-duration: .35s;
-        animation-timing-function: ease;
+    }
+
+    @media (min-width: 450px) {
+        #sidebar {
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            text-align: center;
+        }
+
+        .sidebar-header {
+            display: flex;
+            margin-left: 1em;
+        }
+
+        .sidebar-image-container {
+            margin-right: 1em;
+        }
+    
+        .sidebar-image {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+        }
+
+        .sidebar-text {
+            text-align: start;
+            h1 {
+                margin-top: -0.2em;
+            }
+        }
+
+        .sidebar-links {
+            margin-right: 1em;
+            text-align: end;
+        }
+
+        .post-buttons {
+            margin: 3em 0;
+        }
+    }
+
+    @media (max-width: 450px) {
+        #sidebar {
+            flex-direction: column;
+            text-align: center;
+            justify-content: center;
+        }
+
+        .sidebar-image-container {
+            display: none;
+        }
+
+        .sidebar-text {
+            h1 {
+                margin-top: -0.3em;
+            }
+        }
+
+        .sidebar-links {
+            margin-top: 1em;
+        }
+
+        .post-buttons {
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            a {
+                margin: .5em;
+            }
+        }
     }
 }
 
@@ -139,44 +197,29 @@
       }
     
     .content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
         justify-content: space-between;
         margin: 1em 1em 1em calc(1em + #{$sidebar-width});
     }
 
     .sidebar-links {
-        margin-top: 1.67em;
+        margin-top: 1em;
     }
 
     #content-fader {
-        position: fixed;
         top: 0;
-        right: 0;
         width: calc(100% - #{$sidebar-width});
         height: 100%;
-        z-index: 9999;
-        pointer-events: none;
         background: white;
-        opacity: 1;
-        animation-duration: .35s;
-        animation-timing-function: ease;
     }
 
     #sidebar-fader {
-        position: fixed;
         bottom: 0;
-        left: 0;
         height: 100%;
         width: $sidebar-width;
-        z-index: 9999;
-        pointer-events: none;
-        background: $sidebar-colour;
-        opacity: 1;
-        animation-duration: .35s;
-        animation-timing-function: ease;
+    }
+
+    .post-buttons {
+        margin: 3em 0;
     }
 }
 

data/_sass/syntax-highlighting.scss

@@ -3,7 +3,7 @@
 pre, code {
   font-family: "Roboto Mono";
   color: #cccccc;
-  font-size: 1em;
+  font-size: 1rem;
   background-color: #f8f8f8;
 }
 
@@ -16,7 +16,7 @@ code {
 pre { // only apply for code blocks
   overflow: auto;
   display: block;
-  padding: 1em;
+  padding: 0 20px 20px 20px;
   margin: 0 0 1em;
   line-height: 1.3;
   word-break: break-all;
@@ -45,16 +45,17 @@ pre code {
   }
   pre code {
     color: #cccccc;
-    ::before {
+    &::before {
       content: attr(data-lang);
-      position: absolute;
+      position: -webkit-sticky;
+      position: sticky;
+      display: block;
       top: 0;
-      right: 0;
+      left: 0;
       color: #ccc;
-      text-align: right;
+      text-align: left;
       text-transform: uppercase;
-      font-size: 0.85em;
-      padding: 5px 10px 0;
+      font-size: 0.85rem;
       line-height: 20px;
       height: 20px;
       font-weight: 600;

data/assets/js/post-grid-init.js

@@ -1,4 +1,7 @@
 FlexMasonry.init('.list-posts', {
-    responsive: false,
-    numCols: 2
+    responsive: true,
+    breakpointCols: {
+        'min-width: 1500px': 3,
+        'min-width: 700px': 2,
+    }
 });

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: arco
 version: !ruby/object:Gem::Version
-  version: 0.6.3
+  version: 0.8.2
 platform: ruby
 authors:
 - meebuhs
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-07-06 00:00:00.000000000 Z
+date: 2020-08-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -76,6 +76,8 @@ files:
 - assets/fonts/roboto-mono/RobotoMono-BoldItalic.ttf
 - assets/fonts/roboto-mono/RobotoMono-Italic.ttf
 - assets/fonts/roboto-mono/RobotoMono-Regular.ttf
+- assets/images/GitHub-Mark-Light-64px.png
+- assets/images/demo.gif
 - assets/js/fade-transitions.js
 - assets/js/post-grid-init.js
 - assets/js/sidebar.js