arco 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 860a024f04415c6e0d8650dbcd4cdb11413b5fdd0ae5097a1fd843d81c4bf92d
+  data.tar.gz: 245a865ff73a7b353aabd0cdb176a4d3191f82320f5d3843578dcfa8d3efbddd
+SHA512:
+  metadata.gz: 984f567c79b653a1de26f90d8e81d32d68a7bd53361d899169bee115c45d992c39f2ad1b6fd9bd5d83b766e34fee25624628f2f9e96e51fbe3693420f6015e32
+  data.tar.gz: 3351f049130df6f552c283a1b3cc8e45342641ca54ebb39346a1207c7e139bf90eba472839c71d831e8e9fe5c490cd5ed7fb024ba21ede2f2f2ce7d32246516e

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/_config.yml

@@ -0,0 +1,2 @@
+theme: arco
+highlighter: rouge

data/_includes/cover.html

@@ -0,0 +1,9 @@
+<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>
+    </div>
+    <div id="open-button-container" class="open-button-container">
+        <a href="/projects/" class="open-button">See my projects →</a>
+    </div>
+</section>

data/_includes/footer.html

@@ -0,0 +1,3 @@
+<footer>
+  Powered by <a href="https://jekyllrb.com">Jekyll</a> &ndash; <a href="https://github.com/meebuhs/arco">arco theme</a> by <a href="https://github.com/meebuhs">meebuhs</a>
+</footer>

data/_includes/mathjax.html

@@ -0,0 +1,22 @@
+{% if page.mathjax %}
+<script type="text/x-mathjax-config">
+  MathJax.Hub.Config({
+    tex2jax: {
+      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
+      processEscapes: true
+    }
+  });
+</script>
+<script
+  type="text/javascript"
+  charset="utf-8"
+  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
+>
+</script>
+<script
+  type="text/javascript"
+  charset="utf-8"
+  src="https://vincenttam.github.io/javascripts/MathJaxLocal.js"
+>
+</script>
+{% endif %}

data/_includes/sidebar.html

@@ -0,0 +1,23 @@
+<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>
+    </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 %}<a href="{{ site.github }}">github</a> {% endif %}{% if site.resume %} / <a href="{{ "/resume" }}" class="fade-onclick">resume</a> {% endif %}
+    </div>
+</section>

data/_layouts/default.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-AU">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/flexmasonry/flexmasonry.css">
+    <script src="/assets/flexmasonry/flexmasonry.js"></script>
+  </head>
+  <body>
+    {% include sidebar.html %}
+    {{ content }}
+  </body>
+  <script src="/assets/js/sidebar.js"></script>
+  <script src="/assets/js/fade-transitions.js"></script>
+  <script>fadeInPage();</script>
+</html>

data/_layouts/landing.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en-AU">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="/assets/css/main.css">
+  </head>
+  <body>
+    {% include cover.html %}
+  </body>
+  <script src="/assets/js/cover-transitions.js"></script>
+</html>

data/_layouts/post-list.html

@@ -0,0 +1,30 @@
+---
+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 %}
+    <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 }}" />
+          <div class="list-post-info">
+            <div class="list-post-title">{{ post.title }}</div>
+            <div class="list-post-summary">{{ post.summary }}</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>
+    </div>
+    {% endfor %} 
+  </div>
+  {% include footer.html %}
+</section>
+<script src="/assets/js/post-grid-init.js"></script>

data/_layouts/post.html

@@ -0,0 +1,23 @@
+---
+layout: default
+---
+
+{% include mathjax.html %}
+
+<section class="content">
+  <svg id="content-fader"></svg>
+  <div class="post">
+    <div class="post-title"><h1>{{ page.title }}</h1></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 }}" />
+
+    <div class="post-content">
+      {{ content }}
+    </div>
+  </div>
+  {% include footer.html %}  
+</section>

data/_layouts/resume.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+Create a folder named `_layouts` and put your resume in `resume.html`

data/_sass/arco.scss

@@ -0,0 +1,149 @@
+@import "constants";
+@import "fonts";
+
+html, body {
+    margin: 0px;
+    padding: 0px;
+    height: 100%;
+    box-sizing: border-box;
+    font-family: "Open Sans", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+}
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+    font-weight: inherit;
+    color: $text-colour-dark;
+    :hover, :focus {
+      color: lighten($text-colour-dark, 24%);
+    }
+  }
+
+h1 {
+    font-size: 2rem; 
+    margin: 0.5em 0 1em 0;
+    font-weight: bold;
+    line-height: 1.7;
+}
+
+h2 {
+    font-size: 1.75rem; 
+    margin: 2em 0 0.8em;
+    padding-bottom: 0.7em;
+    border-bottom: 1px solid #ddd;
+    font-weight: bold;
+    line-height: 1.7;
+}
+
+h3 {
+    font-size: 1.5rem;
+    margin: 1.75em 0 1.2em;
+    font-weight: bold;
+    line-height: 1.7;
+}
+
+h4 {
+    font-size: 1.25rem;
+    margin: (1.25rem / 2) 0 (1.25rem / 2.5) 0;
+    font-weight: bold;
+    line-height: 1.7;
+}
+
+h5 {
+    font-size: 1.15rem;
+    margin: (1.15rem / 2) 0 (1.15rem / 2.5) 0;
+    font-weight: bold;
+    line-height: 1.7;
+}
+
+h6 {
+    font-size: 1rem; 
+    margin: (1rem / 2) 0 (1rem / 2.5) 0; 
+    text-transform: uppercase;
+}
+
+a {
+    text-decoration: none;
+    color: $primary-highlight;
+    &:hover, &:focus {
+        color: lighten($primary-highlight, 14%);
+    }
+}
+
+blockquote {
+    display: block;
+    position: relative;
+    padding-left: 20px;
+    font-style: italic;
+    border-left: 5px solid $secondary-highlight;
+}
+
+.notice {
+    border: 1px solid $sidebar-colour;
+    border-radius: 0.4em;
+    padding: 0.5em 1em;
+}
+
+table, th, td {
+  border: none;
+}
+
+.table {
+  display: table;
+}
+
+.table-cell {
+  display: table-cell;
+}
+
+.table-top {
+  vertical-align: top;
+}
+
+.table-middle {
+  vertical-align: middle;
+}
+
+.table-bottom {
+  vertical-align: bottom;
+}
+
+table {
+  display: table;
+  &.striped > tbody {
+    > 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;
+    }
+  }
+}
+
+td, th {
+  padding: 10px 5px;
+  display: table-cell;
+  text-align: left;
+  vertical-align: middle;
+  border-radius: 2px;
+}
+
+
+li, ul {
+    line-height: 1.5em;
+}
+
+.content {
+    width: auto;
+    height: auto;
+}
+
+.footer {
+    flex-shrink: 0;
+}
+

data/_sass/constants.scss

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

data/_sass/cover.scss

@@ -0,0 +1,113 @@
+@import "constants";
+@import "fonts";
+
+.cover-text {
+    h1 {
+        margin: 0;
+        :hover {
+            color: lighten($primary-highlight, 14%);
+        }
+    }
+    h6 {
+        text-transform: uppercase;
+        font-size: .9rem;
+        color: $text-colour-light;
+    }
+    a {
+        color: $primary-highlight;
+        :hover {
+            color: lighten($primary-highlight, 24%);
+        }
+    }
+}
+
+.open-button {
+    height: 50px;
+    width: 200px;
+    border: 2px solid white;
+    border-radius: 5px;
+    transition: all .25s ease;
+    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 {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+}
+
+.cover {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    top: 0;
+    position: fixed;
+    z-index: 9999;
+    background: $sidebar-colour;
+    color: $text-colour-light;
+    transition: all .25s ease;
+}
+
+/* vertical layout */
+@media only screen and (max-width: calc(2 * #{$sidebar-width - 1})), (orientation: portrait) {
+    #cover {
+        flex-direction: row;
+        justify-content: space-evenly;
+        align-items: center;
+        text-align: center;
+    }
+
+    .cover-text {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .slide {
+        height: $sidebar-height;
+        animation-name: slide-up;
+    }
+}
+
+/* horizontal layout */
+@media only screen and (min-width: calc(2 * #{$sidebar-width})) and (orientation: landscape) {
+    #cover {
+        flex-direction: column;
+        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/fonts.scss

@@ -0,0 +1,55 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 400;
+  font-style: normal;
+  src: url('../fonts/open-sans/OpenSans-Regular.ttf') format('truetype');
+}
+  
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 700;
+  font-style: normal;
+  src: url('../fonts/open-sans/OpenSans-Bold.ttf') format('truetype');
+}
+
+  @font-face {
+  font-family: 'Open Sans';
+  font-weight: 400;
+  font-style: italic;
+  src: url('../fonts/open-sans/OpenSans-Italic.ttf') format('truetype');
+}
+  
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 700;
+  font-style: italic;
+  src: url('../fonts/open-sans/OpenSans-BoldItalic.ttf') format('truetype');
+}
+  
+@font-face {
+  font-family: 'Roboto Mono';
+  font-weight: 400;
+  font-style: normal;
+  src: url('../fonts/roboto-mono/RobotoMono-Regular.ttf') format('truetype');
+}
+  
+@font-face {
+  font-family: 'Roboto Mono';
+  font-weight: 700;
+  font-style: normal;
+  src: url('../fonts/roboto-mono/RobotoMono-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  font-weight: 400;
+  font-style: italic;
+  src: url('../fonts/roboto-mono/RobotoMono-Italic.ttf') format('truetype');
+}
+  
+@font-face {
+  font-family: 'Roboto Mono';
+  font-weight: 700;
+  font-style: italic;
+  src: url('../fonts/roboto-mono/RobotoMono-BoldItalic.ttf') format('truetype');
+}

data/_sass/footer.scss

@@ -0,0 +1,3 @@
+footer {
+    margin-top: 4em;
+}