arco 0.6.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68442f33429b4c0570935805e885391d45067dc5092c9ac62b11c36dc379771d
-  data.tar.gz: 9eae7b1b7444cfda65c3a103065e2d97d6fa64a815b1741263863edb9447fc9c
+  metadata.gz: 526cd05606bf060a1a1b17e57e7be4ed0c84763569b5860b0f2123dff9a148ff
+  data.tar.gz: 707a6ba4bb548d1f1edb5053809822fc51225b593c0012bf7ed3d48573e77b18
 SHA512:
-  metadata.gz: 392488a776a9552e52302d698ba45f20a62c8e094cf0530463963166d9da3f9f6d710c1bd903f5445bb74059d3397dfca2a320ce9f241428c8333e88abff750b
-  data.tar.gz: 67392ddc73ba81c236951406cfc94e5997adcd2332e4c046307447bd122a533d0c3f46ec488c00ddb0db1d2909ba341cc3838b59e59f29a0fac4c2ec863ab841
+  metadata.gz: 75050f7bd3ca7302c8dc132058af92249c6646c781f4c859d8f40944bca14e76582ee9ea5627a1cc0244185012d10cdd8e229f0fe6b9917d26fded4899a097ed
+  data.tar.gz: 765cb69e42c12307d9f36d21225ca7385b7cb1108f6fd66f83ead45138b22963f0a11c32bdd40840ebec4cfea25dfefbe3f9e72f7af80916e9564cbe7df15691

data/README.md

@@ -1,6 +1,10 @@
 # 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.
 
@@ -80,9 +84,12 @@ 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,10 +109,10 @@ 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>
 ```

data/_includes/cover.html

@@ -1,8 +1,13 @@
 <section class="cover"> 
     <div class="cover-text">
-      {% if site.image %}<img class="site-image" src="{{ site.image }}" />{% endif %}
+      {% 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/mathjax.html

@@ -10,7 +10,7 @@
 <script
   type="text/javascript"
   charset="utf-8"
-  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
+  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
 >
 </script>
 <script

data/_includes/sidebar.html

@@ -1,23 +1,46 @@
 <section id="sidebar" class="sidebar"> 
     <svg id="sidebar-fader"></svg>
-    <div class="sidebar-text">
-        {% if site.image %}<img class="site-image" src="{{ site.image }}" />{% endif %}
-        <h1><a href="{{ "/projects/" }}" class="fade-onclick">{{ site.title }}</a></h1>
-        <h6>{{ site.description }}</h6>
+    <div class="sidebar-header">
+        {% if site.image %}
+            <div class="sidebar-image-container">
+                <img class="sidebar-image" src="{{ site.image }}" />
+            </div>
+        {% endif %}
+        <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">
-        {% 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 %}
-        {% 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 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.github_url and site.resume %}
+                 / 
+            {% endif %}
+            {% if site.resume %}
+                <a href="{{ "/resume" }}" class="fade-onclick">resume</a>
+            {% endif %}
+        </div>
     </div>
 </section>

data/_layouts/404.html

@@ -2,6 +2,7 @@
 <html lang="en-AU">
   <head>
     <meta charset="UTF-8">
+    <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>

data/_layouts/default.html

@@ -2,6 +2,7 @@
 <html lang="en-AU">
   <head>
     <meta charset="UTF-8">
+    <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">

data/_layouts/landing.html

@@ -2,6 +2,7 @@
 <html lang="en-AU">
   <head>
     <meta charset="UTF-8">
+    <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 %}

data/_layouts/post-list.html

@@ -10,10 +10,12 @@ layout: default
     <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>

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>
@@ -23,16 +27,21 @@ layout: default
       &middot;
       <a href="{{ "/projects/" }}{{ page.category }}" class="fade-onclick"><span class="post-category">{{ page.category }}</span></a>
     </div>
-    <img class="post-image" src="{{ page.image }}" />
+    <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/404.scss

@@ -8,7 +8,6 @@
     }
     h6 {
         text-transform: uppercase;
-        font-size: .9rem;
         color: $text-colour-light;
     }
 }

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,9 +126,9 @@ li, ul {
     line-height: 1.5em;
 }
 
-.site-image {
-  width: 200px;
-  border-radius: 50%;
+.MathJax_Display {
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .content {

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

@@ -8,7 +8,6 @@
     }
     h6 {
         text-transform: uppercase;
-        font-size: .9rem;
         color: $text-colour-light;
     }
     a {
@@ -40,3 +39,15 @@
     text-align: center;
     justify-content: center;
 }
+
+.cover-image {
+    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: 18px;
+    font-size: 1.5rem;
     font-weight: bold;
     a {
         color: white;
@@ -40,10 +40,10 @@
     }
 }
 
-.list-post-summary {
-    color: $summary-colour;
+.list-post-description {
+    color: $description-colour;
     margin: 0.4em 0;
-    font-size: 16px;
+    font-size: 1rem;
 }
 
 .list-post-footer {
@@ -53,12 +53,12 @@
 .list-post-date {
     color: $secondary-highlight;
     font-weight: bold;
-    font-size: 14px;
+    font-size: 0.9rem;
 }
 
 .list-post-category { 
     font-weight: bold;
-    font-size: 14px;
+    font-size: 0.9rem;
     color: $primary-highlight;
     &:hover, &:focus {
         color: lighten($primary-highlight, 14%);
@@ -67,7 +67,7 @@
 
 .list-post-tags {
     font-weight: bold;
-    font-size: 14px;
+    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: 900px) {
+    .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,19 +19,19 @@
 .post-date {
     color: $secondary-highlight;
     font-weight: bold;
-    font-size: 14px;
+    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 { 
     font-weight: bold;
-    font-size: 14px;
+    font-size: 0.9rem;
     color: $primary-highlight;
     &:hover, &:focus {
         color: lighten($primary-highlight, 14%);
@@ -37,10 +42,19 @@
     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

@@ -10,7 +10,6 @@
     }
     h6 {
         text-transform: uppercase;
-        font-size: .9rem;
         color: $text-colour-light;
     }
     a {
@@ -22,6 +21,12 @@
     }
 }
 
+.sidebar-tagline {
+    max-width: 250px;
+    margin: auto;
+    color: $hover-colour;
+}
+
 #sidebar {
     display: flex;
     top: 0;
@@ -32,14 +37,36 @@
     transition: all .35s ease;
 }
 
-@media only screen and (orientation: portrait) {
-    #sidebar {
-        flex-direction: row;
-        justify-content: space-evenly;
-        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;
@@ -51,45 +78,93 @@
     }
 
     .sidebar-text {
-        display: flex;
-        flex-direction: column;
+        h6 {
+            margin: 0;
+        }
     }
 
     .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;
+            }
+        }
+
+        .post-buttons {
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            a {
+                margin: .5em;
+            }
+        }
     }
 }
 
@@ -104,46 +179,37 @@
         width: $sidebar-width;
         height: 100%;
     }
+
+    .sidebar-image {
+        width: 200px;
+        height: 200px;
+        border-radius: 50%;
+      }
     
     .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,9 +3,8 @@
 pre, code {
   font-family: "Roboto Mono";
   color: #cccccc;
-  font-size: 0.9em;
+  font-size: 1rem;
   background-color: #f8f8f8;
-  font-size: 14px;
 }
 
 code {
@@ -17,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;
@@ -46,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,
+    }
 });

data/assets/lightbox/lightbox.js

@@ -111,6 +111,7 @@ document.addEventListener("DOMContentLoaded", function() {
         if(event.target.id != 'next' && event.target.id != 'prev'){
             this.innerHTML = '';
             document.getElementById('lightbox').style.display = 'none';
+            document.body.style.overflow="visible";
         }
     });
     
@@ -121,6 +122,7 @@ document.addEventListener("DOMContentLoaded", function() {
             event.preventDefault();
             document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">&rsaquo;</a><a id="prev">&lsaquo;</a><div class="videoWrapperContainer"><div class="videoWrapper"><iframe src="https://www.youtube.com/embed/'+this.getAttribute('data-id')+'?autoplay=1&showinfo=0&rel=0"></iframe></div>';
             document.getElementById('lightbox').style.display = 'block';
+            document.body.style.overflow="hidden";
 
             setGallery(this);
         });
@@ -133,6 +135,7 @@ document.addEventListener("DOMContentLoaded", function() {
             event.preventDefault();
             document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">&rsaquo;</a><a id="prev">&lsaquo;</a><div class="img" style="background: url(\''+this.getAttribute('href')+'\') center center / contain no-repeat;" title="'+this.getAttribute('title')+'" ><img src="'+this.getAttribute('href')+'" alt="'+this.getAttribute('title')+'" /></div><span>'+this.getAttribute('title')+'</span>';
             document.getElementById('lightbox').style.display = 'block';
+            document.body.style.overflow="hidden";
 
             setGallery(this);
         });

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: arco
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.8.0
 platform: ruby
 authors:
 - meebuhs
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-07-04 00:00:00.000000000 Z
+date: 2020-07-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -76,6 +76,7 @@ files:
 - assets/fonts/roboto-mono/RobotoMono-BoldItalic.ttf
 - assets/fonts/roboto-mono/RobotoMono-Italic.ttf
 - assets/fonts/roboto-mono/RobotoMono-Regular.ttf
+- assets/images/demo.gif
 - assets/js/fade-transitions.js
 - assets/js/post-grid-init.js
 - assets/js/sidebar.js