another-theme 0.0.1 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f57756973d4194a276af1f845f3001798698b2ee2efbe09a702e4a052faef9ab
-  data.tar.gz: bbb8f6976dfd971a701068bea1cb1c6b59a9532b94b5bf93cfea878f6a97609d
+  metadata.gz: 36864c0f43b00ba1ca7e96000391320621fce787287dcfae106ad8f724406e87
+  data.tar.gz: 74224358546a150a480c3b49ef1316150c3b0c749a943253454717ed891faeb4
 SHA512:
-  metadata.gz: 41ca109a90d11a676df7c1dbb7d3abdbc2469e1f8d4e0be3bc077ef19076648fad7a5659e92076918d39e88c6ecc934a2e92976c56687ce7a0e482661b84feb9
-  data.tar.gz: 25a397a1399046d9490a6dede9c3fab829ef9f9bad26c9d1e11120393da93cd53068f44c5a7a74aa908f8bb446672969c547587be24efefa66526471e8b203aa
+  metadata.gz: 0a9d5aaf6aa4c97477caaa26c98c73d9c4194e7fbd6b5ed13bb676382b5d0c8f5038f5a7ced2fb5958f4997665542be16835a1b53cde5ecbb6386ee42e841647
+  data.tar.gz: b3b6390c257176bec80611a9ab55527a016639fb5bb3fcf7c78c3172061d7492c2ed63b390e48e84a6f12fc0aae54e5274a8d58ee57587626557517d6e369eb2

data/_includes/algolia.html

@@ -0,0 +1,80 @@
+<script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.33.0/dist/algoliasearchLite.min.js" integrity="sha256-3Laj91VXexjTlFLgL8+vvIq27laXdRmFIcO2miulgEs=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@3.4.0/dist/instantsearch.production.min.js" integrity="sha256-pM0n88cBFRHpSn0N26ETsQdwpA7WAXJDvkHeCLh3ujI=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
+
+<script>
+const search = instantsearch({
+  indexName: '{{ site.algolia.index_name }}',
+  searchClient: algoliasearch('{{ site.algolia.application_id }}', '{{ site.algolia.search_only_api_key }}'),
+  routing: true
+});
+
+search.addWidget(
+  instantsearch.widgets.configure({
+    hitsPerPage: 8
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.searchBox({
+    container: '#searchbox',
+    placeholder: 'Search...',
+    showReset: true,
+    showLoadingIndicator: false,
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.hits({
+    container: '#hits',
+    templates: {
+      item(hit) {
+        let url = `{{ site.url }}${hit.url}`;
+        let date = moment.unix(hit.date).format('MMM DD, YYYY');
+        let cover = '';
+        let excerpt_text = '';
+        let extra_padding = 'py-3';
+        if(hit.cover){
+          cover = '<img class="w-100 mb-0.5 mb-sm-0" src="{{ site.url }}' + hit.cover + '" alt="' + hit.title + '">';
+          excerpt_text = '<p class="body-md mt-1">' + hit.excerpt_text + '</p>';
+          extra_padding = '';
+        }
+        return `
+          <a class="post-link row ${extra_padding}" href="${url}">
+            <div class="col-12 col-sm-4 col-md-3 col-xl-2">
+              ${cover}
+            </div>
+            <div class="col-12 col-sm-8 col-md-9 col-xl-10 pl-0">
+              <div class="row">
+                <div class="post-title col-12 col-lg-9 col-xl-10">
+                  <span class="fw-600">${hit.title}</span>
+                  ${excerpt_text}
+                </div>
+                <time class="post-date col-12 col-lg-3 col-xl-2 text-lg-right">${date}</time>
+              </div>
+            </div>
+          </a>
+        `;
+      },
+    },
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.pagination({
+    container: '#pagination',
+    showPrevious: true,
+    showNext: true,
+    totalPages: 2
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.poweredBy({
+    container: '.ais-PoweredBy',
+    theme: 'dark',
+  })
+);
+
+search.start();
+</script>

data/_includes/dark-mode.html

@@ -1,8 +1,10 @@
 {% assign dark_mode = true %}
 
-<span id="dark" title="Dark Mode">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-</span>
-<span id="light" title="Light Mode">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
-</span>
+<div>
+  <button id="dark" class="btn btn-nav body-lg fw-600" title="Dark Mode">
+    {%- include icons.html icon="dark" size=17 -%} Dark
+  </button>
+  <button id="light" class="btn btn-nav body-lg fw-600" title="Light Mode">
+    {%- include icons.html icon="light" size=17 -%} Light
+  </button>
+</div>

data/_includes/footer.html

@@ -0,0 +1,29 @@
+<footer class="mb-5 mt-5">
+<div class="container">
+  <div class="row justify-content-end">
+    <nav class="col-auto mb-2 mb-sm-0 menu">
+      <ul>
+        {% assign sorted_pages = site.pages | sort: "priority" %}
+        {% for node in sorted_pages %}
+          {% if node.priority %}
+          <li><a href="{{ site.url }}{{ node.url }}">{{ node.title }}</a></li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+    </nav>
+    <nav class="col-auto social">
+      <ul>
+        {%- if site.social.twitter -%}
+          <li><a href="//twitter.com/{{ site.social.twitter }}">Twitter</a></li>
+        {%- endif -%}
+        {%- if site.social.github -%}
+          <li><a href="//github.com/{{ site.social.twitter }}">GitHub</a></li>
+        {%- endif -%}
+        {%- if site.social.facebook -%}
+          <li><a href="//facebook.com/{{ site.social.twitter }}">Facebook</a></li>
+        {%- endif -%}
+      </ul>
+    </nav>
+  </div>
+</div>
+</footer>

data/_includes/head.html

@@ -1,8 +1,13 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  {% if page.name == "index.md" or page.name == "index.html" %}
   <title>{{ site.title }}</title>
+  {% else %}
+  <title>{{ page.title }} - {{ site.title }}</title>
+  {% endif %}
   {% seo title=false %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/reset-min.css" integrity="sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8=" crossorigin="anonymous">
   <link rel="stylesheet" href="{{ site.url }}/assets/css/main.css">
   <link rel="shortcut icon" href="{{ site.url }}/assets/img/{{ site.favicon }}">
   {% feed_meta %}

data/_includes/icons.html

@@ -0,0 +1,53 @@
+{%- assign size = 24 -%}
+{%- if include.size > 1 -%}
+  {%- assign size = include.size -%}
+{%- endif -%}
+{%- assign fill = "none" -%}
+{%- if include.fill -%}
+  {%- assign fill = include.fill -%}
+{%- endif -%}
+{%- assign class = "" -%}
+{%- if include.class -%}
+  {%- assign class = include.class -%}
+{%- endif -%}
+
+{%- if include.icon == "menu" -%}
+<svg xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{size}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon {{ class }}"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+{%- endif -%}
+
+{%- if include.icon == "close" -%}
+<svg viewBox="0 0 24 24" width="{{size}}" height="{{size}}" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon {{ class }}"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+{%- endif -%}
+
+{%- if include.icon == "dark" -%}
+<svg xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{size}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon {{ class }}"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+{%- endif -%}
+
+{%- if include.icon == "light" -%}
+<svg xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{size}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon {{ class }}"><circle cx="12" cy="12" r="10"></circle></svg>
+{%- endif -%}
+
+
+{%- if include.icon == "github" -%}
+<svg xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{size}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon {{ class }}"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+{%- endif -%}
+
+{%- if include.icon == "twitter" -%}
+<svg viewBox="0 0 24 24" width="{{size}}" height="{{size}}" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon {{ class }}"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
+{%- endif -%}
+
+{%- if include.icon == "facebook" -%}
+<svg viewBox="0 0 24 24" width="{{size}}" height="{{size}}" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon {{ class }}"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
+{%- endif -%}
+
+{%- if include.icon == "instagram" -%}
+<svg viewBox="0 0 24 24" width="{{size}}" height="{{size}}" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon {{ class }}"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.5" y2="6.5"></line></svg>
+{%- endif -%}
+
+{%- if include.icon == "youtube" -%}
+<svg viewBox="0 0 24 24" width="{{size}}" height="{{size}}" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon {{ class }}"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
+{%- endif -%}
+
+{%- if include.icon == "linkedin" -%}
+<svg viewBox="0 0 24 24" width="{{size}}" height="{{size}}" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon {{ class }}"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
+{%- endif -%}

data/_includes/last-posts.html

@@ -1,10 +1,11 @@
-<h2 class="mt-lg">Recent posts</h2>
+<h2 class="mt-5">Recent posts</h2>
+<hr>
 <ul class="posts-feed">
 {% for post in site.posts | limit:5 %}
   <li class="post-node">
-    <a href="{{ site.url }}{{ post.url }}" class="post-link">
-      <span class="post-title">{{ post.title }}</span>
-      <time class="post-date">{{ post.date | date: "%B %d, %Y" }}</time> 
+    <a href="{{ site.url }}{{ post.url }}" class="post-link row align-items-center">
+      <div class="post-title col-auto pr-0">{{ post.title }}</div>
+      <time class="post-date col-auto">{{ post.date | date: "%B %d, %Y" }}</time>
     </a>
   </li>
 {% endfor %}

data/_includes/menu.html

@@ -1,10 +1,11 @@
-<nav class="nav-menu">
-  <ul>
+<nav>
+  <ul class="d-flex flex-column">
     {% assign sorted_pages = site.pages | sort: "priority" %}
     {% for node in sorted_pages %}
       {% if node.priority %}
-      <li class="{% if node.title == page.title %}active{% endif %}"><a href="{{ site.url }}{{ node.url }}">{{ node.title }}</a></li>
+      <li class="mt-2{% if node.title == page.title %} active{% endif %}""><a class="body-lg fw-600 border-bottom-0" href="{{ site.url }}{{ node.url }}">{{ node.title }}</a></li>
       {% endif %}
     {% endfor %}
   </ul>
+  {% include social.html %}
 </nav>

data/_includes/projects.html

@@ -1,10 +1,11 @@
-<h2 class="mt-lg">Selected projects</h2>
+<h2 class="mt-5">Selected projects</h2>
+<hr>
 <ul class="posts-feed">
 {% for project in site.data.projects | limit:5 %}
   <li class="post-node">
-    <a href="{{ post.url }}" class="post-link" style="justify-content: normal">
-      <span class="post-title">{{ project.name }}</span>
-      <span class="post-date">{{ project.description }}</span> 
+    <a href="{{ post.url }}" class="post-link row align-items-center">
+      <span class="post-title col-auto pr-0">{{ project.name }}</span>
+      <span class="post-date col-auto">{{ project.description }}</span>
     </a>
   </li>
 {% endfor %}

data/_includes/social.html

@@ -0,0 +1,11 @@
+<hr class="menu-separator my-3">
+<ul class="row">
+  {%- for social in site.social -%}
+    {%- assign social_icon = social[0] -%}
+    <li class="col-auto">
+      <a href="//{{social_icon}}.com/{{social[1]}}" class="border-bottom-0">
+      {%- include icons.html icon=social_icon size=17 -%}
+      </a>
+    </li>
+  {%- endfor -%}
+</ul>

data/_layouts/algolia-feed.html

@@ -0,0 +1,41 @@
+---
+layout: page
+---
+<div class="ais-Container">
+  <div class="ais-SearchIcon">
+    <svg class="ais-Searsh-svg" viewbox="0 0 13.33 13.33" xmlns="http://www.w3.org/2000/svg">
+      <path d="M13.14 12.19l-2.46-2.45a6 6 0 1 0-.94.94l2.45 2.46a.7.7 0 0 0 .48.19.66.66 0 0 0 .47-.19.68.68 0 0 0 0-.95zM1.33 6a4.67 4.67 0 1 1 8 3.29 4.67 4.67 0 0 1-8-3.29z"></path>
+    </svg>
+  </div>
+  <div class="ais-SearchBox" id="searchbox"></div>
+  <div class="ais-PoweredBy"></div>
+</div>
+<ul class="posts-feed my-3" id="hits">
+  {% for post in site.posts  limit: 8 %}
+    <li class="post-node">
+      <a class="post-link row {% unless post.cover %}py-3{% endunless %}" href="{{ post.url | relative_url }}">
+        <div class="col-12 col-sm-4 col-md-3 col-xl-2">
+          {%- if post.cover -%}
+            <img class="w-100 mb-0.5 mb-sm-0" src="{{ site.url }}{{ post.cover }}" alt="{{ post.title }}">
+          {%- endif -%}
+        </div>
+        <div class="col-12 col-sm-8 col-md-9 col-xl-10 pl-0">
+          <div class="row">
+            <div class="post-title col-12 col-lg-9 col-xl-10">
+              <span class="fw-600">{{ post.title }}</span>
+              {%- if post.cover -%}
+              <p class="body-md mt-1">
+                {{ post.excerpt | strip_html }}
+              </p>
+              {%- endif -%}
+            </div>
+            <time class="post-date col-12 col-lg-3 col-xl-2 text-lg-right">{{ post.date | date: "%b %d, %Y" }}</time>
+          </div>
+        </div>
+      </a>
+    </li>
+  {% endfor %}
+</ul>
+<div id="pagination"></div>
+
+{% include algolia.html %}

data/_layouts/default.html

@@ -5,10 +5,20 @@ layout: compress
 <html lang="en" data-theme="light">
   {% include head.html %}
   <body>
-    {% include menu.html %}
-    {% include dark-mode.html %}
-    <div class="content">
-      <div class="container {% if page.fluid or layout.fluid %}fluid{% endif %}">
+    <div class="container">
+      <div class="menu-toggle--btn-container">
+        <button class="menu-toggle open btn btn-nav body-lg fw-600 mt-3" title="Open Menu">
+            {%- include icons.html icon="menu" size=17 -%} Menu
+        </button>
+        <button class="menu-toggle close btn btn-nav body-lg fw-600 mt-3" title="Close Menu">
+            {%- include icons.html icon="close" size=17 -%} Close
+        </button>
+      </div>
+      <div class="row">
+        <aside id="menu" role="navigation" class="col-12 col-xl-2 d-flex flex-column justify-content-around">
+          {% include menu.html %}
+          {% include dark-mode.html %}
+        </aside>
         {{ content }}
       </div>
     </div>
@@ -17,4 +27,5 @@ layout: compress
       <script src="{{ site.url }}/assets/js/main.js" charset="utf-8"></script>
     {% endif %}
   </body>
+  {% include footer.html %}
 </html>

data/_layouts/page.html

@@ -1,11 +1,15 @@
 ---
 layout: default
 ---
-<article>
-  <header class="post-header">
-    <h1 class="mb-lg">{{ page.title }}</h1>
-  </header>
-  <section class="post-content">
-    {{ content }}
-  </section>
-</article>
+<div class="{% if page.content_width == "large"%}col-12 col-xl-10{% else %}col-12 col-md-10 col-lg-9 col-xl-7{% endif %} pt-4 pt-lg-5 page-wrap" role="main">
+  <article>
+    {%- if page.page_title -%}
+      <header class="post-header mb-4">
+        <h1>{{ page.title }}</h1>
+      </header>
+    {%- endif -%}
+    <section {% if page.post_content %}class="post-content"{%- endif -%}>
+      {{ content }}
+    </section>
+  </article>
+</div>

data/_layouts/post.html

@@ -2,11 +2,16 @@
 layout: default
 fluid: true
 ---
-<article>
-  <header class="post-header">
-    <h1 class="mb-lg">{{ page.title }}</h1>
-  </header>
-  <section class="post-content">
-    {{ content }}
-  </section>
-</article>
+<div class="col-12 col-md-10 col-lg-8 col-xl-6 pt-4 pt-lg-5 page-wrap">
+  <article class="post">
+    <header class="post-header mb-3">
+      <h1 class="mb-0">{{ page.title }}</h1>
+      <time class="body-sm" datetime="{{ page.date | date: '%Y-%m-%d' }}">
+        <strong>{{ page.date | date: "%B %d, %Y"}}</strong>
+      </time>
+    </header>
+    <section class="post-content">
+      {{ content }}
+    </section>
+  </article>
+</div>

data/_sass/another.scss

@@ -3,11 +3,11 @@
 @import "another/font-face";
 @import "another/variables";
 @import "another/base";
-@import "another/layout";
+@import "another/bootstrap-grid";
 @import "another/type";
-@import "another/menu";
+@import "another/header";
 @import "another/feed";
-@import "another/posts";
+@import "another/buttons";
 @import "another/syntax";
 @import "another/code";
-@import "another/utilities";
+@import "another/footer";

data/_sass/another/_base.scss

@@ -8,10 +8,18 @@
   box-sizing: border-box;
 }
 
+::selection {
+  color: #fff;
+  color: var(--bg-color);
+  background-color: #171717;
+  background-color: var(--primary-color);
+}
+
 html,
 body {
   margin: 0;
   padding: 0;
+  overflow-x: hidden;
 }
 
 html {
@@ -23,7 +31,7 @@ html {
   -moz-font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
   font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
 
-  @media (min-width: $medium-breakpoint) {
+  @media (min-width: $small-breakpoint) {
     @include properties($body-lg);
   }
 }
@@ -66,7 +74,6 @@ img {
   display: block;
   max-width: 100%;
   margin: 0 0 1rem;
-  border-radius: 5px;
 }
 
 table {