nano-theme 0.2.3 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 282061fe94d40af756ffc6a050c791ff26f5d4d9bd5d65cdc023e5f062047178
-  data.tar.gz: e3fc25145d6bd51290bf43d56e20bf0e268c955684314844cd3a58cce9333495
+  metadata.gz: d80004cfdd5994e0e90ac47df878db53431ba2d4be5a7cc5e0d1093aacdcd54f
+  data.tar.gz: 2176090fea9155682b3f3a67b677502080f5f102061b4e4d33d81231180946d5
 SHA512:
-  metadata.gz: 376ee8b2a6ce68b69e55fe1b229ab37285f8546d073c14fc3eb41c56d3c610ac6e887bcc457e974e4fa979522d65e08d437206d9b99fcba24865a8a194adbff2
-  data.tar.gz: 3210b4ee8a227644f5a852daa0880fad67f4b8e6d2f66b1dff2a1198c728722699841d377bfe3a1d131e8bc8145ce5760acc0b28670d6dd2631fb797aec3fd1c
+  metadata.gz: e12db29ce9e084dde8a709f661ce344813de5ef336c22e727e25894c3b8695990084029e517c5e4292b4f959bb23d53e4cdd8424ed14e5dc99cdce9069624d65
+  data.tar.gz: 1d903f0a6ac5afb05b28d9dde25bfe5e79b018ddb384cf30e58e6132d960957c30d898f2e128972e8ba4e894a48fa0f0d6f6db560e3bbbfcd1a579594e1a8647

data/README.md

@@ -1,21 +1,17 @@
-# Nano
-
-[![Gem Version](https://badge.fury.io/rb/nano-theme.svg)](https://badge.fury.io/rb/nano-theme)
-
-**This is in active developement. [You can see the roadmap here.](https://trello.com/b/6uBEAJwj)**
-
-Nano is a super lightweight Jekyll theme built to work great on all platforms, respect user privacy, and load at lightning-fast speeds.
-
-### Installation
-
-You can install Nano is two ways:
-
-**a) Cloning the demo branch**
-You can clone the demo branch (labelled `docs`) and [configure based on what's recommended in the wiki of this repo](https://github.com/doamatto/nano/wiki/Configuration).
-
-**b) Installing the Gem**
-You can also use [`gem install nano-theme`](https://rubygems.org/gems/nano-theme) and [configure based on what's recommended in the wiki of this repo](https://github.com/doamatto/nano/wiki/Configuration).
-
-### Credits
-
-Many thanks to the Jekyll and RubyGems community for great documentation, allowing me to make this simply and swiftly.
+# Nano
+
+[![Gem Version](https://badge.fury.io/rb/nano-theme.svg)](https://badge.fury.io/rb/nano-theme) [![Gem downloads](https://img.shields.io/gem/dt/nano-theme)](https://rubygems.org/gems/nano-theme)
+
+**This is in active developement. [You can see the roadmap here.](https://trello.com/b/6uBEAJwj)**
+
+Nano is a super lightweight Jekyll theme built to work great on all platforms, respect user privacy, and load at lightning-fast speeds.
+
+### Installation
+Installing Nano is simple. Start by downloading the latest version of Nano via [the releases page](https://github.com/doamatto/nano/releases/latest). Afterwards, using Gem, install bundler (`gem install bundler`). Then, run `bundle install` to install everything you need for Nano to work properly. You're now ready to configure your installation and deploy wherever. 
+
+### Credits
+Many thanks to the Jekyll and RubyGems community for great documentation, allowing me to make this simply and swiftly.
+
+Big thanks to the StackOverflow community; they helped me find some nice CSS workarounds for some things (like missing images). I quoted the posts I used when I used them.
+
+Special thanks to [Rishi](https://github.com/rveerepalli) for staying up late on the day before the launch of v0.3.

data/_includes/site-footer.html

@@ -1,3 +1,4 @@
+<hr class="end">
 <footer>
     <p class="copyright">
         &copy; {% if copyrightYear %}{{copyrightYear}}{% else %}{{ site.time | date: '%Y' }}{% endif %} {{ site.copyrightName }}.

data/_includes/site-header.html

@@ -1,26 +1,28 @@
-<header class="header">
-    <div class="container">
-        <nav class="nav">
-            {% if site.logo %}
-                <a href="{{ '/' | relative_url }}"><img class="nav_logo" src="{{site.logo}}" /></a>
-            {% endif %}
-            <ul class="links">
-                <input type="checkbox" id="collap-nav" class="toggle">
-                <label for="menu" class="lbl-toggle">Menu</label>
-                {% for item in site.navigation %}
-                    {% if item.url contains '://' %}
-                        {% assign url = item.url %}
-                    {% else %}
-                        {% assign url = item.url | relative_url %}
-                    {% endif %}
-                    <li> <a class="navLink" href="{{url}}">{{item.title}}</a> </li>
-                {% endfor %}
-            </ul>
-        </nav>
-        {% if site.tagline %}
-            <div class="center">
-                <h1>{{site.tagline}}</h1>
-            </div>
+<header>
+  {% if site.logo %}
+    <h1 class="logo">
+      <a href="{{ '/' | relative_url }}">
+        <img src="{{site.logo}}" width="64px" alt="Home">
+      </a>
+    </h1>
+  {% endif %}
+  <nav>
+    <ul>
+      {% for item in site.navigation %}
+        {% if item.url contains '://' %}
+          {% assign url = item.url %}
+        {% else %}
+          {% assign url = item.url | relative_url %}
         {% endif %}
-    </div>
-</header>
+        <li>
+          <a href="{{url}}">{{item.title}}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+</header>
+<div class="header">
+  {% if site.tagline %}
+    <p class="tagline">{{site.tagline}}</p>
+  {% endif %}
+</div>

data/_layouts/default.html

@@ -1,19 +1,58 @@
-<!DOCTYPE HTML>
-<html lang="{{site.lang}}">
-    <head>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>{{ page.title }} - {{ site.title }}</title>
-        <meta property="og:title" content="{{page.title}} - {{site.title}}" />
-        <meta name="description" content="{{page.description}}" />
-        <meta property="og:description" content="{{page.description}}" />
-        <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}" />
-        {% if site.favicon %}
-            <link rel="shortcut icon" href="{{ site.favicon }}" />
-        {% endif %}
-    </head>
-    <body>
-        {{ content }}
-    </body>
-</html>
+<!doctype html>
+{% if site.lang %}
+  <html lang="{{site.lang}}">
+{% else %}
+  <html>
+{% endif %}
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
+    <meta name="referrer" content="no-referrer, same-origin">
+    <title>{{ page.title }} - {{ site.title }}</title>
+    <meta property="og:title" content="{{page.title}} - {{site.title}}">
+    {% if site.lang %}
+      <meta property="og:locale" content="{{site.lang}}">
+    {% endif %}
+    {% if page.description %}
+      <meta name="description" content="{{page.description}}">
+      <meta property="og:description" content="{{page.description}}">
+      <meta name="twitter:description" content="{{page.description}}">
+    {% elsif site.description %}
+      <meta name="description" content="{{site.description}}">
+      <meta property="og:description" content="{{site.description}}">
+      <meta name="twitter:description" content="{{site.description}}">
+    {% endif %}
+    {% for item in site.font-import %}
+      <link rel="stylesheet" href="{{item}}">
+    {% endfor %}
+    <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
+    {% if site.favicon %}
+      <link rel="shortcut icon" href="{{ site.favicon }}">
+    {% elsif site.plingverify %}
+      <meta name="ocs-site-verification" content="{{ site.plingverify }}">
+    {% elsif site.googleverify %}
+      <meta name="google-site-verification" content="{{ site.googleverify }}">
+    {% elsif site.bingverify %}
+      <meta name="msvalidate.01" content="{{ site.bingverify }}">
+    {% elsif site.pinverify %}
+      <meta name="p:domain_verify" content="{{ site.pinverify }}">
+    {% elsif site.dailyverify %}
+      <meta name="dailymotion-domain-verification" content="{{ site.dailyverify }}">
+    {% elsif site.yandexverify %}
+      <meta name="yandex-verification" content="{{ site.yandexverify }}">
+    {% elsif site.nortonverify %}
+      <meta name="norton-safeweb-site-verification" content="{{ site.nortonverify }}">
+    {% elsif site.alexaverify %}
+      <meta name="alexaVerifyID" content="{{ site.alexaverify }}">
+    {% elsif site.wotverify %}
+      <meta name="wot-verification" content="{{ site.wotverify }}">
+    {% elsif site.specificverify %}
+      <meta name="specificfeeds-verification-code" content="{{ site.specificverify }}">
+    {% endif %}
+  </head>
+  <body>
+    {{ content }}
+  </body>
+</html>

data/_layouts/newsroom.html

@@ -5,15 +5,17 @@ layout: default
 {% include site-header.html %}
 
 <div class="container">
-    <h2>Newsroom</h2>
-    <ul>
-        {% for post in site.posts %}
-            <li>
-              <p><a class="newsText" href="{{ post.url }}"><b>{{ post.title }} ({{ post.date }}).</b></a> {{ post.excerpt }}</p>
-            </li>
-        {% endfor %}
-    </ul>
-    {{ content }}
+  {{ content }}
+  <ul>
+    {% for post in site.posts %}
+      <li>
+        <p>
+          <a class="news-text" href="{{ post.url }}"><b>{{ post.title }} ({{ post.dateS }}).</b></a>
+          {{ post.excerpt }}
+        </p>
+      </li>
+    {% endfor %}
+  </ul>
 </div>
 
 {% include site-footer.html %}

data/_layouts/page.html

@@ -5,8 +5,35 @@ layout: default
 {% include site-header.html %}
 
 <div class="container">
-    <h2>{{ page.title }}</h2>
     {{ content }}
 </div>
 
+{% if site.simpleanalytics == true %}
+  <script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
+  <noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt=""></noscript>
+{% elsif site.matomoanalytics == true %}
+  <!-- Matomo -->
+    <script type="text/javascript">
+      var _paq = window._paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(["setDoNotTrack", true]);
+      _paq.push(["disableCookies"]);
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="https://{{site.matomourl}}/";
+        _paq.push(['setTrackerUrl', u+'matomo.php']);
+        _paq.push(['setSiteId', '{{site.matomositeid}}']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.type='text/javascript'; g.async=true; g.defer=true; g.src='//cdn.matomo.cloud/{{site.matomourl}}/matomo.js'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+    <noscript><p><img src="https://{{site.matomourl}}/matomo.php?idsite=1&amp;rec=1" style="border:0;" alt="" /></p></noscript>
+  <!-- End Matomo Code -->
+{% endif %}
+
+{% if site.fathomanalytics == true %}
+  <script src="https://cdn.usefathom.com/script.js" site="{{site.fathomsite}}" honor-dnt="true" async defer></script>
+{% endif %}
+
 {% include site-footer.html %}

data/_layouts/post.html

@@ -5,9 +5,11 @@ layout: default
 {% include site-header.html %}
 
 <div class="container">
+  <div class="post">
     <h2>{{ page.title }}</h2>
-    <h3>{{ post.author }} - {{page.date}}</h3>
+    <h3>{{ page.dateS }} - Written by {{ page.author }}</h3>
     {{ content }}
+    </div>
 </div>
 
 {% include site-footer.html %}

data/_posts/{2020-05-02-test.md → 2020-06-04-test.md}

@@ -1,16 +1,16 @@
 ---
 layout: post
 title: "Blogging Support is Here"
-author: {{site.author}}
+author: doamatto
 excerpt_separator: ---
-date: "2020-05-02"
+dateS: "2020/06/04"
 ---
 
 Nano v0.3.0 is here and now, among many other things, has support for blogging!
 
 ---
 
-Since day one, Nano was a project to make a clean, fast, and mobile-friendly Jekyll theme that people could easily use and deploy themselves. When I first released the gem on RubyGems, I was amazed to see the downloads skyrocket to 100 in the first day. Now, as of writing, Nano is at a little over 1000 downloads on RG, and I realised I still need to deliver on two crucial things:
+Since day one, Nano was a project to make a clean, fast, and mobile-friendly Jekyll theme that people could easily use and deploy themselves. When I first released the gem on RubyGems, I was amazed to see the downloads skyrocket to 100 in the first day. Now, as of writing, Nano is at a little over 1500 downloads on RG, and I realised I still need to deliver on two crucial things:
 
 - Amazing Mobile Support, and:
 - Official Blogging Support.
@@ -19,4 +19,8 @@ Well, with the release of Nano v0.3.0, I'm happy to announce blogging being here
 
 Fortunately, I made the theme I used (which is this theme), and decided I'd finally get to work on adding blogging support. I did my utmost best to document it to the best of my ability and make it as painless as possible to deploy into sites using this theme.
 
-You can read the full changelog via GitHub's releases page [here](https://github.com/doamatto/nano/releases/tag/v0.3.0).
+You can read the full changelog via GitHub's releases page [here](https://github.com/doamatto/nano/releases/tag/v0.3.0).
+
+```
+Code block lmao
+```

data/_sass/_config.scss

@@ -1,31 +1,40 @@
-// Main Colour
-$LIGHTbgColour: #fff;
-$DARKbgColour: #000;
-$accentColour: #f62c43;
-
-// Header Colours (also uses $accentColour)
-$headerTextColour: #000;
-
-// Navigation Colours
-$navColour: #000;
-$navHoverColour: #fff;
-
-// Text Colour
-$LIGHTtextColour: #000;
-$LIGHTlinkColour: #000;
-$LIGHTlinkHoverColour: #f62c43;
-$DARKtextColour: #fff;
-$DARKlinkColour: #fff;
-$DARKlinkHoverColour: #f62c43;
-$LIGHTnewsLinkColour: #f62c43;
-$DARKnewsLinkColour: #f62c43;
-
-// Typography & Misc.
-$font: 'Inter', sans-serif;
-$font-regular: 400;
-$font-bold: 700;
-$font-italic: italic;
-$breakColour: #fff;
-
-// Switch this to whatever font you need, local or remote
-@import url('https://rsms.me/inter/inter.css');
+// Code Block Colours
+$LIGHTcodeColour: #fff;
+$DARKcodeColour: #fff;
+$LIGHTcodebgColour: #353230;
+$DARKcodebgColour: #353230;
+
+// Main Colours
+$LIGHTbgColour: #fff;
+$DARKbgColour: #000;
+$accentColour: #f62c43;
+
+// Header Colours (also uses $accentColour)
+$headerTextColour: #000;
+
+// Image Borders
+$LIGHTborderColour: #000;
+$DARKborderColour: #fff;
+$borderType: solid;
+$borderSize: 2.5px;
+
+// Navigation Colours
+$navColour: #000;
+
+// Text Colours
+$LIGHTtextColour: #000;
+$DARKtextColour: #fff;
+$LIGHTlinkColour: #000;
+$LIGHTlinkHoverColour: #f62c43;
+$DARKlinkColour: #fff;
+$DARKlinkHoverColour: #f62c43;
+
+// Typography & Misc.
+$codeFont: 'IBM Plex Mono', monospace;
+$codeFont-var: 'IBM Plex Mono', monospace; // Might break if nothing is here
+$font: 'Inter', sans-serif;
+$font-var: 'Inter', sans-serif; // Might break if nothing is here
+$font-regular: 400;
+$font-bold: 700;
+
+// Font imports were moved to ../_config.yml

data/_sass/_theme.scss

@@ -1,158 +1,279 @@
 // Import configuration
-@charset "utf-8";
 @import "config";
 
-// Auto Light and Dark Theme as Declared by Browser/OS
-@media (prefers-color-scheme: light) {
-    a { color: $LIGHTlinkColour; }
-    a:hover { color: $LIGHTlinkHoverColour; }
-    html {
-        background: $LIGHTbgColour;
-        color: $LIGHTtextColour;
-    }
-    .lbl-toggle {
-        background: $LIGHTbgColour;
-        color: $LIGHTtextColour;
-    }
-    .lbl-toggle:hover { color: $LIGHTlinkHoverColour; }
+// Typography and Misc.
+
+.centre {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  width: 100%;
+
+  text-align: center;
 }
 
-@media (prefers-color-scheme: dark) {
-    a { color: $DARKlinkColour; }
-    a:hover { color: $DARKlinkHoverColour; }
-    html {
-        background: $DARKbgColour;
-        color: $DARKtextColour;
-    }
-    .lbl-toggle {
-        background: $DARKbgColour;
-        color: $DARKtextColour;
-    }
-    .lbl-toggle:hover { color: $DARKlinkHoverColour; }
-}
-/*
-// Mobile Nav and Other Optimizations
-@media only screen and (max-width: 600px) {
-    .lbl-toggle {
-        display: block !important;
-        border-radius: 1vh;
-        padding: .25em 1em .25em 1em;
-        text-decoration: none;
-        transition: color 500ms;
-    }
-    nav input[type='checkbox']:checked ~ .links {
-        background: rgba(255,255,255,.2);
-        padding: 1em 1em;
-    }
-    .links {
-        transition: max-height 250ms ease-in-out;
-    }
-    .toggle:checked + .lbl-toggle + .links {
-        max-height: 100vh;
-    }
-    .navLink {
-        display: none;
-        width: 100%;
-    }
-    .navLink:hover {
+// ---
 
-    }
+// Document Prep
+* {
+  margin: 0;
+  padding: 0;
 }
-*/
-// Site Header (_includes/site-header.html)
-.header {
-    background: $accentColour;
-    color: $headerTextColour;
-    width: 100%;
-    padding-bottom: 2em;
-    // max-height: 32.5vh;
+
+body {
+  @supports (font-variation-settings: normal) {
+    font-family: $font-var;
+  }
+
+  background: $LIGHTbgColour;
+  color: $LIGHTtextColour;
+
+  font-family: $font;
+  font-weight: $font-regular;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  scroll-behavior: smooth;
 }
 
-.header h1 {
-    font-weight: $font-regular;
-    // font-size: calc(4vw + 4vh + 2vmin);
-    font-size: 4.5em;
+// Typography
+@media only screen and (max-device-width: 480px) {
+  h1 {
+    font-size: 32px !important;
+  }
+
+  h2 {
+    font-size: 21px !important;
+  }
+
+  h3 {
+    font-size: 19px !important;
+  }
+
+  .post {
+    h3 {
+      font-size: 14px !important;
+    }
+  }
+
+  h4, h5, h6 { font-size: 16px !important; }
+  .tagline { font-size: 40px !important; }
 }
 
-// Site Navigation
-.nav_logo {
-    width: 4em;
+.bold { font-weight: $font-bold; } // Jekyll will process bold text to have the "bold" class
+
+p { margin: 1em 0; }
+
+h1 {
+  font-size: 48px;
+  letter-spacing: -.05em;
+  font-weight: $font-bold;
+  line-height: 1.1;
 }
 
-.nav {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
+h2 {
+  font-size: 24px;
+  line-height: 1.35;
 }
 
-.links {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    list-style: none;
+h3 {
+  font-size: 16px;
 }
 
-.navLink {
-    padding: .25em 1em .25em 1em;
-    text-decoration: none;
-    color: $navColour;
+ol, ul {
+  margin: 2em 1em;
 }
 
-nav input[type='checkbox'] { display: none; }
-.lbl-toggle { display: none; }
+a { 
+  color: $LIGHTlinkColour; 
+  text-decoration: none;
+  :hover {
+    color: $LIGHTlinkHoverColour;
+    transition: color 250ms ease-in-out;
+  }
+}
 
-.navLink:hover { color: $navHoverColour; }
+// Code blocks
+.highlight {
+  @supports (font-variation-settings: normal) {
+    font-family: $codeFont-var;
+  }
+  font-family: $codeFont;
+  
+  background: $LIGHTcodebgColour;
+  color: $LIGHTcodeColour;
 
-// Site Content (_layouts/page[-notitle].html)
+  padding: .5vh 1vh .5vh 1vh;
+}
 
-.container {
-    padding-left: 1em;
-    padding-right: 1em;
+// Navigation
+header {
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  height: 100px;
+  cursor: default;
+  background: $accentColour;
+  padding-left: 16px;
+  * {
+    cursor: default;
+    font-size: 14px;
+  }
+  h1 {
+    flex: 0 0 auto;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    a {
+      display: block;
+      :hover { cursor: pointer; }
+    }
+    img { 
+      display: block;
+      border: none !important;
+      vertical-align: bottom;
+    }
+  }
+  a {
+    color: $navColour;
+    background: none;
+    :hover {
+      color: inherit;
+      background: none;
+    }
+  }
 }
 
-// Site Footer (_includes/site-footer.html)
+nav {
+  ul {
+    flex: 0 0 auto;
+    text-align: left;
+    display: flex;
+    margin-top: 2.5em;
+    li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      :first-child { margin-left: 0; }
+      a {
+        cursor: pointer;
+        padding: 0 0.8em;
+        font-size: 1.1em;
+        text-decoration: none;
+        color: $navColour;
+        :hover {
+          text-decoration: underline;
+          transition: text-decoration 150ms ease-in-out;
+        }
+      }
+      :last-child { a { padding-right: 0; } }
+    }
+  }
+}
 
-.copyright { font-size: .75em; }
-.copyright a { text-decoration: underline; }
+// Header
+.header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  background: $accentColour;
+  color: $headerTextColour;
+  padding-bottom: 2em;
+  padding-left: 32px;
+  max-height: 32.5vh;
 
-footer {
+  p {
+    flex: 0 0 auto;
+    margin: 0;
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex-direction: column;
     justify-content: center;
-    text-align: center;
+
+    font-size: 80px;
+    letter-spacing: -.05em;
+    font-weight: $font-regular;
+    line-height: 1.1;
+  }
 }
 
-// Typography and Misc.
+// Footer
+footer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  text-align: center;
+}
 
-body {
-    font-family: $font;
-    font-weight: $font-regular;
-    font-size: 1.125em;
-    margin: -20px 0px 8px 0px;
+.copyright {
+  font-size: .75em; 
+  a { text-decoration: underline; }
+}
+
+.end {
+  border: 0;
+  height: 1px;
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));
 }
 
+// Main Content
 .container {
-    margin: 1em auto;
-    max-width: 40em;
+  max-width: 40em;
+  margin: 1em 1em 1em 1em;
+  ul, ol {
+    margin-left: 2em !important;
+    margin-right: 24px !important;
+  }
+  .highlight, p, hr, h1, h2, h3 {
+    margin-left: 1em !important;
+    margin-right: 24px !important;
+  }
+  @media only screen and (max-device-width: 480px) {
+    max-width: 100% !important;
+    margin: 1em .5em 1em 1em;
+  }
 }
 
-.center {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: center;
-    text-align: center;
-    width: 100%;
+// Images
+img {
+  border: $borderSize $borderType $LIGHTborderColour;
+  :before {
+    display: none;
+    content: '';
+  } // Hack from https://stackoverflow.com/a/980948
 }
 
-a { transition: color 500ms; }
-hr { color: $breakColour; }
-.bold { font-weight: $font-bold; }
-html, body { height: 100%; width: 100%; }
+// Blog Posts
+.post {
+  h3 {
+    font-size: 14px !important;
+  }
+}
 
-/*
-// Unsorted
-.newsText { text-decoration: none; }
-*/
+// Auto Dark Theme as Declared by Browser/OS
+@media (prefers-color-scheme: dark) {
+  a { 
+    color: $DARKlinkColour; 
+    :hover { color: $DARKlinkHoverColour; }
+  }
+  .highlight {
+    background: $DARKcodebgColour;
+    color: $DARKcodeColour;
+  }
+  body {
+    background: $DARKbgColour;
+    color: $DARKtextColour;
+  }
+  img { border: $borderSize $borderType $DARKborderColour; }
+  .highlight {
+    background: $DARKcodebgColour;
+    color: $DARKcodeColour;
+  }
+}

data/assets/main.scss

@@ -1,5 +1,4 @@
----
----
-
-@charset 'utf-8';
+---
+---
+
 @import 'config', 'theme';

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: nano-theme
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.3.0
 platform: ruby
 authors:
 - doamatto
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-03 00:00:00.000000000 Z
+date: 2020-06-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -51,10 +51,9 @@ files:
 - _includes/site-header.html
 - _layouts/default.html
 - _layouts/newsroom.html
-- _layouts/page-notitle.html
 - _layouts/page.html
 - _layouts/post.html
-- _posts/2020-05-02-test.md
+- _posts/2020-06-04-test.md
 - _sass/_config.scss
 - _sass/_theme.scss
 - assets/logo.svg

data/_layouts/page-notitle.html

@@ -1,11 +0,0 @@
----
-layout: default
----
-
-{% include site-header.html %}
-
-<div class="container">
-    {{ content }}
-</div>
-
-{% include site-footer.html %}