arco 0.1.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 860a024f04415c6e0d8650dbcd4cdb11413b5fdd0ae5097a1fd843d81c4bf92d
-  data.tar.gz: 245a865ff73a7b353aabd0cdb176a4d3191f82320f5d3843578dcfa8d3efbddd
+  metadata.gz: 99f7f5507af4c5dfc8556e03a348ef13e6ade77c4a2bd3d1809511b4a60f54b0
+  data.tar.gz: 152d1a32a4df721048c32502c28c0898d104dee448fce9ce8ab5a1b366d219a5
 SHA512:
-  metadata.gz: 984f567c79b653a1de26f90d8e81d32d68a7bd53361d899169bee115c45d992c39f2ad1b6fd9bd5d83b766e34fee25624628f2f9e96e51fbe3693420f6015e32
-  data.tar.gz: 3351f049130df6f552c283a1b3cc8e45342641ca54ebb39346a1207c7e139bf90eba472839c71d831e8e9fe5c490cd5ed7fb024ba21ede2f2f2ce7d32246516e
+  metadata.gz: 8e3718a5bbf4c1f231218ddfb82e53bc4ffadc8773aabbb69b209c8893a23b09d53763faebca9d39159653ad179c63a4565654fa2eed1efc9e0191eda8c71e64
+  data.tar.gz: 27fe3ae0303cc409c4e0a133be2c00d4b50a7ca6fdb61b4449e7a9d12d8ff0fd8adbfd01652292bf1d79d1f3fe41a4ad03dc70a11928face236aae36c20777c4

data/README.md

@@ -0,0 +1,100 @@
+# 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.
+
+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 [https://github.com/meebuhs/meebuhs.github.io](source code) to get yourself started.
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "arco"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: arco
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install arco
+
+## Github Pages
+
+In your `_config.yml` delete the `theme: ` line and add:
+
+```yaml
+remote_theme: meebuhs/arco
+```
+
+You also need to make the following changes in your `Gemfile`:
+
+```Gemfile
+# Comment the jekyll gem
+# gem "jekyll", "~> 4.1.0"
+# Uncomment github-pages
+gem "github-pages", group: :jekyll_plugins
+```
+
+## Usage
+
+### Setup
+
+To get started you need to copy the `pages` folder from this repository to your site.
+
+By default it features a landing page, if you would like to bypass the landing page, delete `index.html` and then rename `projects.html` to `index.html`.
+
+### Site configuration
+
+The following settings can be configured in your site's `_config.yml`
+
+```yaml
+title: site-title
+tagline: site-tagline
+description: site-description
+image: /assets/images/image.png
+url: https://github.com/meebuhs/arco
+github_url: https://github.com/meebuhs
+resume: true | false
+author: Alex Sharpe
+lang: en-AU
+```
+
+There are additional parameters which can be set for use with `jekyll-seo-tag`. [See here for a complete list](https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md)
+
+### Expected post frontmatter
+
+```
+---
+layout: post
+title: Post title
+description: Post description
+category: completed | ongoing
+permalink: /projects/post-title
+cover-image: /assets/image-for-front-page.png
+image: /assets/image-for-top-of-post.png 
+mathjax: true | false
+---
+```
+
+### 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`.
+Then create a folder called `_includes` at the root of your site and add your `resume.html` to it.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_config.yml

@@ -1,2 +1,16 @@
+# Site settings
+title: site-title
+tagline: site-tagline
+description: site-description
+image: /assets/images/image.png
+url: https://github.com/meebuhs/arco
+github_url: https://github.com/meebuhs
+resume: true
+author: Alex Sharpe
+lang: en-AU
+
+# Build settings
 theme: arco
-highlighter: rouge
+plugins:
+  - jekyll-seo-tag
+  - jekyll-sitemap

data/_includes/cover.html

@@ -1,9 +1,10 @@
 <section id="cover" class="cover"> 
     <div class="cover-text">
-      <h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repository_name }}</a></h1>
-      <h6>{{ site.description | default: site.github.project_tagline }}</h6>
+      {% if site.image %}<img class="site-image" src="{{ site.image }}" />{% endif %}
+      <h1>{{ site.title }}</a></h1>
+      <h6>{{ site.description }}</h6>
     </div>
-    <div id="open-button-container" class="open-button-container">
-        <a href="/projects/" class="open-button">See my projects →</a>
+    <div class="open-button-container">
+        <a href="/projects/" id="open-button" class="button-dark">See my projects</a>
     </div>
 </section>

data/_includes/sidebar.html

@@ -1,8 +1,9 @@
 <section id="sidebar" class="sidebar"> 
     <svg id="sidebar-fader"></svg>
     <div class="sidebar-text">
-      <h1><a href="{{ "/projects/" | absolute_url }}" class="fade-onclick">{{ site.title | default: site.github.repository_name }}</a></h1>
-      <h6>{{ site.description | default: site.github.project_tagline }}</h6>
+        {% 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>
     <div class="sidebar-links">
         {% assign identifier = page.url | split: "/" | last %}
@@ -17,7 +18,6 @@
         {% else %}
             <a href="{{ "/projects/ongoing" }}" class="fade-onclick">ongoing</a>
         {% endif %}
-        / 
-        {% if site.github %}<a href="{{ site.github }}">github</a> {% endif %}{% if site.resume %} / <a href="{{ "/resume" }}" class="fade-onclick">resume</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>
 </section>

data/_layouts/404.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en-AU">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="/assets/css/main.css">
+  </head>
+  <body>
+    {{ content }}
+  </body>
+</html>

data/_layouts/default.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="/assets/css/main.css">
     <link rel="stylesheet" href="/assets/flexmasonry/flexmasonry.css">
     <script src="/assets/flexmasonry/flexmasonry.js"></script>
+    {% seo %}
   </head>
   <body>
     {% include sidebar.html %}

data/_layouts/landing.html

@@ -3,9 +3,9 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="/assets/css/main.css">
+    {% seo %}
   </head>
   <body>
     {% include cover.html %}
   </body>
-  <script src="/assets/js/cover-transitions.js"></script>
 </html>

data/_layouts/post.html

@@ -2,18 +2,21 @@
 layout: default
 ---
 
-{% include mathjax.html %}
+{% if page.mathjax %}
+  {% include mathjax.html %}
+{% endif %}
 
 <section class="content">
   <svg id="content-fader"></svg>
   <div class="post">
     <div class="post-title"><h1>{{ page.title }}</h1></div>
+    <div class="post-description">{{ page.description }}</div>
     <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>
     </div>
-    <img class="post-image" src="{{ page.top-image }}" />
+    <img class="post-image" src="{{ page.image }}" />
 
     <div class="post-content">
       {{ content }}

data/_sass/404.scss

@@ -0,0 +1,29 @@
+@import "constants";
+@import "fonts";
+
+.notfound-text {
+    h1 {
+        color: $primary-highlight;
+        margin: 0;
+    }
+    h6 {
+        text-transform: uppercase;
+        font-size: .9rem;
+        color: $text-colour-light;
+    }
+}
+
+.notfound {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+    top: 0;
+    position: fixed;
+    z-index: 9999;
+    background: $sidebar-colour;
+    color: $text-colour-light;
+    transition: all .25s ease;
+}

data/_sass/arco.scss

@@ -84,12 +84,9 @@ blockquote {
     padding: 0.5em 1em;
 }
 
-table, th, td {
-  border: none;
-}
-
 .table {
   display: table;
+  border-collapse: collapse;
 }
 
 .table-cell {
@@ -114,14 +111,6 @@ table {
     > tr:nth-child(odd) {
       background-color: $table-background-colour;
     }
-    > tr > td {
-      border-radius: 0;
-    }
-  }
-  &.centered {
-    thead tr th, tbody tr td, tfoot tr td {
-      text-align: center;
-    }
   }
 }
 
@@ -130,14 +119,17 @@ td, th {
   display: table-cell;
   text-align: left;
   vertical-align: middle;
-  border-radius: 2px;
 }
 
-
 li, ul {
     line-height: 1.5em;
 }
 
+.site-image {
+  width: 200px;
+  border-radius: 50%;
+}
+
 .content {
     width: auto;
     height: auto;

data/_sass/buttons.scss

@@ -0,0 +1,47 @@
+@mixin button($background, $highlight) {
+    display: inline-block;
+    padding: 10px 25px;
+    border-radius: 5px;
+    transition: all .25s ease;
+    justify-content: center;
+    text-align: center;
+    border: 2px solid $background;
+    background-color: $background;
+    color: $highlight;
+    &:hover, &:focus {
+        background-color: $highlight;
+        color: $background;
+    }
+}
+
+.button-dark {
+    @include button(white, $sidebar-colour)
+}
+
+.button-dark-primary {
+    @include button($primary-highlight, $sidebar-colour)
+}
+
+.button-dark-secondary {
+    @include button($secondary-highlight, $sidebar-colour)
+}
+
+.button-dark-tertiary {
+    @include button($tertiary-highlight, $sidebar-colour)
+}
+
+.button-light {
+    @include button($sidebar-colour, white)
+}
+
+.button-light-primary {
+    @include button($primary-highlight, white)
+}
+
+.button-light-secondary {
+    @include button($secondary-highlight, white)
+}
+
+.button-light-tertiary {
+    @include button($tertiary-highlight, white)
+}

data/_sass/cover.scss

@@ -3,10 +3,8 @@
 
 .cover-text {
     h1 {
+        color: $primary-highlight;
         margin: 0;
-        :hover {
-            color: lighten($primary-highlight, 14%);
-        }
     }
     h6 {
         text-transform: uppercase;
@@ -21,22 +19,11 @@
     }
 }
 
-.open-button {
-    height: 50px;
-    width: 200px;
-    border: 2px solid white;
-    border-radius: 5px;
-    transition: all .25s ease;
+#open-button {
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
-    background-color: $sidebar-colour;
-    color: white;
-    &:hover, &:focus {
-        background-color: white;
-        color: $sidebar-colour
-    }
 }
 
 .open-button-container {
@@ -71,11 +58,6 @@
         display: flex;
         flex-direction: column;
     }
-
-    .slide {
-        height: $sidebar-height;
-        animation-name: slide-up;
-    }
 }
 
 /* horizontal layout */
@@ -85,29 +67,4 @@
         text-align: center;
         justify-content: center;
     }
-
-    .slide {
-        width: $sidebar-width;
-        animation-name: slide-left;
-    }
-}
-
-@keyframes slide-left {
-    from {
-        width: 100%;
-    }
-
-    to {
-        width: $sidebar-width;
-    }
-}
-
-@keyframes slide-up {
-    from {
-        height: 100%;
-    }
-
-    to {
-        height: $sidebar-height;
-    }
-}
+}

data/_sass/post.scss

@@ -3,10 +3,14 @@
     width: 100%;
 }
 
-.post-title h1{
+.post-title h1 {
     margin-bottom: 0;
 }
 
+.post-description {
+    margin-bottom: 0.5em;
+}
+
 .post-date {
     color: $secondary-highlight;
     font-weight: bold;
@@ -34,4 +38,5 @@
     max-height: 600px;
     display: block;
     margin: 0 auto;
+    border-radius: 5px;
 }

data/_sass/syntax-highlighting.scss

@@ -39,8 +39,10 @@ pre code {
 
 .highlight {
   margin: 0;
+  border-radius: 5px;
   pre {
     position: relative;
+    border-radius: 5px;
   }
   pre code {
     color: #cccccc;

data/assets/css/main.scss

@@ -3,9 +3,11 @@
 
 @import "arco";
 @import "cover";
+@import "404";
 @import "sidebar";
 @import "footer";
 @import "post-list";
 @import "post";
 @import "normalize";
-@import "syntax-highlighting";
+@import "syntax-highlighting";
+@import "buttons";

metadata

@@ -1,48 +1,58 @@
 --- !ruby/object:Gem::Specification
 name: arco
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.4.0
 platform: ruby
 authors:
 - meebuhs
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-06-26 00:00:00.000000000 Z
+date: 2020-07-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '4.1'
+        version: '3.5'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.5'
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '4.1'
+        version: '5.0'
 description: 
 email:
-- alexeksharpe@gmail.com
+- meebuhs@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
 - LICENSE.txt
+- README.md
 - _config.yml
 - _includes/cover.html
 - _includes/footer.html
 - _includes/mathjax.html
 - _includes/sidebar.html
+- _layouts/404.html
 - _layouts/default.html
 - _layouts/landing.html
 - _layouts/post-list.html
 - _layouts/post.html
 - _layouts/resume.html
+- _sass/404.scss
 - _sass/arco.scss
+- _sass/buttons.scss
 - _sass/constants.scss
 - _sass/cover.scss
 - _sass/fonts.scss
@@ -65,7 +75,6 @@ files:
 - assets/fonts/roboto-mono/RobotoMono-BoldItalic.ttf
 - assets/fonts/roboto-mono/RobotoMono-Italic.ttf
 - assets/fonts/roboto-mono/RobotoMono-Regular.ttf
-- assets/js/cover-transitions.js
 - assets/js/fade-transitions.js
 - assets/js/post-grid-init.js
 - assets/js/sidebar.js

data/assets/js/cover-transitions.js

@@ -1,16 +0,0 @@
-document.addEventListener("DOMContentLoaded", function() {
-    let openButton = document.getElementsByClassName("open-button");
-    openButton[0].addEventListener("click", function(event) {
-        let cover = document.getElementById("cover"),
-            anchor = event.currentTarget;
-
-        let listener = function() {
-            window.location = anchor.href;
-            cover.removeEventListener("animationend", listener);
-        };
-        cover.addEventListener("animationend", listener);
-            
-        event.preventDefault();
-        cover.classList.add("slide");
-    });
-});