minimal-categorized 0.0.9 → 0.0.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2762d3812ac32b52b4d337aad712ed6a22aa0a52664efc96cbbffd41ba41907e
-  data.tar.gz: 3173b0082fdf37a21e672387dad00d87bef144914b37f5b82e6126093352efb2
+  metadata.gz: 91dcd1021101ae6e6af2c48e027e14225460eca63d23bb44a56d74f9d67f31aa
+  data.tar.gz: 1b5bae713c662e65cd3b5d08cc5425e0acaec5ab0a1abcbc6f2b3ef783894573
 SHA512:
-  metadata.gz: 27fe24c24ed97436b4a1857941437a84211e1c9722cbd0c9675590dcc0983bf8301cf1d0cb2eb714e0d465f792410b50a5f7d2deb0a47574fba60bb41a82a5b2
-  data.tar.gz: e909c87aeeb0e3fac77c9a81e3f09b8255984f6649aa9610e4ef9b3dff61d3e4a170c32517cd15daacf4aff1a7ea82e7f2cf86b6e632dc14b9501deef314401d
+  metadata.gz: 553cc24c77e897bbffb09c7e69c7ca98cde3a9657e6626247e49143db97e726e1b8313fedc5e1e016715c55d61515823a4e361777d4980b9c3f9dd3e3e43a8ce
+  data.tar.gz: c2a833c592d1faf4cae5ce6d431ff6aa8c7cd296a78fdd37b0662f5f71cedd9800a391f20439c53ec7640d80e8285d170254b23bb368407fc75a31c960e1d5fa

data/README.md

@@ -2,7 +2,7 @@
 
 [![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/mmistakes/minimal-mistakes/master/LICENSE)
 [![Jekyll](https://img.shields.io/badge/jekyll-%3E%3D%203.9-blue.svg)](https://jekyllrb.com/)
-[![Ruby gem](https://img.shields.io/gem/v/minimal-mistakes-jekyll.svg)](https://rubygems.org/gems/minimal-mistakes-jekyll)
+[![Gem Version](https://badge.fury.io/rb/minimal-categorized.svg)](https://badge.fury.io/rb/minimal-categorized)
 
 minimal-categorized is a flexible Jekyll theme, designed for sites with content easily aggregated into categories. Demo is available [here](https://itsmeaga1n.github.io/minimal-categorized/).
 
@@ -40,7 +40,7 @@ Structure of `_data/menu.yml`:
 * menu_title: Displayed on menu (only for normal menu)
 * menu_headline: Displayed in menu (only for normal menu) and in about page
 * menu_intro: Displayed in menu (only for normal menu) and in about page
-* show_menu_on_category_select: Boolean value determining if menu should be visible on category selection page
+* show_menu_on_gate_page: Boolean value determining if menu should be visible on category selection page
 * minimal_menu: Boolean value determining the style of menu bar
 * menu_logo: Path to logo displayed on menu (only for normal menu)
 * menu_pages: a list of items in menu. Each item contains information:
@@ -55,6 +55,10 @@ Structure of `_data/menu.yml`:
     * faicon: FavIcon to be displayed in menu
     * url: URL for href
     * target: target value of \<a> tag
+    * cookies: customize information about site cookies
+        * enabled: determine if should show cookies pop-up
+        * message: text on cookie pop-up
+        * agreeButtonText: text on agree button
 
 Structure of `_data/metaData.yml`:
 author: Site Author name

data/_data/menu.yml

@@ -1,11 +1,17 @@
 menu_title: Example menu title
 menu_headline: example menu headline
 menu_intro: Hi! This is an example of intro that you could write for your jekyll minimal-categorized theme!
-show_menu_on_category_select: False
+show_menu_on_gate_page: False
 minimal_menu: True
 menu_logo: assets/img/avatar.png
 
 menu_pages:
+- title: Home
+  url: /
+  show_on_home: False
+  icon_name: fas fa-home
+  category: home
+
 - title: Category 1
   url: /category-1.html
   show_on_home: True
@@ -13,6 +19,7 @@ menu_pages:
   icon_name: fas fa-dice
   category: category-1
   tooltip: This is category 1
+  description: Category 1 description, which is written in menu.yml file under :description property
 
 - title: Category 2
   url: /category-2.html
@@ -21,8 +28,9 @@ menu_pages:
   icon_name: fas fa-cogs
   category: category-2
   tooltip: This is category 2
+  description: Category 2 description, which is written in menu.yml file under :description property
 
-- title: ABOUT
+- title: About
   url: about.html
   show_on_home: False
   icon_name: fas fa-address-card

data/_data/metaData.yml

@@ -1,2 +1,8 @@
 author: Site Author
-avatar_url: assets/img/avatar.png
+avatar_url: assets/img/avatar.png
+lightTheme: False
+show_menu_logo_on_home_page: True
+cookies:
+  enabled: True
+  message: This site might be using cookies! Customize your message or disable cookies in metaData.yml!
+  agreeButtonText: Agree

data/_includes/avatar.html

@@ -0,0 +1,5 @@
+<div class="avatar_container">
+    <div class="avatar" >
+        <img src="{{ site.data.metaData.avatar_url }}" alt="avatar" onerror="this.style.display='none'"> 
+    </div>
+</div>

data/_includes/cookies.js

@@ -0,0 +1,29 @@
+(function() {
+    const consentPropName = "cookies_consent";
+    const storageType = localStorage;
+
+    shouldShowCookieConsent = () => !storageType.getItem(consentPropName);
+    acceptCookieConsent = () => storageType.setItem(consentPropName, true);
+    window.addEventListener("load", () => {
+        if(!shouldShowCookieConsent()) {
+            return;
+        }
+        const cookieContainer = document.createElement("div");
+        cookieContainer.classList.add("hidden");
+        const cookieParagraph = document.createElement("p");
+        const cookieContent = document.createTextNode("{{ site.data.metaData.cookies.message }}");
+        const cookieAgreeButton = document.createElement("button");
+        const cookieButtonContent = document.createTextNode("{{ site.data.metaData.cookies.agreeButtonText }}");
+        cookieAgreeButton.appendChild(cookieButtonContent);
+        cookieAgreeButton.onclick = () => {
+            acceptCookieConsent();
+            cookieContainer.classList.add("hidden");
+            window.setTimeout(cookieContainer.remove.bind(cookieContainer), 1000);
+        }
+        cookieParagraph.append(cookieContent);
+        cookieContainer.append(cookieParagraph, cookieAgreeButton);
+        cookieContainer.classList.add("cookie-container")
+        document.body.appendChild(cookieContainer);
+        window.setTimeout(() => cookieContainer.classList.remove("hidden"));
+    });
+})();

data/_includes/{home.js → gate.js}

@@ -27,5 +27,5 @@
         
         attachEvents(category1, category2);
         attachEvents(category2, category1);
-    })    
-})()
+    });
+})();

data/_includes/menu.html

@@ -1,62 +1,61 @@
 {% if site.data.menu.minimal_menu %}
-<aside class="menu">
-    <div class="menu-top">
+    <aside class="menu">
+        <div class="menu-top">
 
-        <ul class="navigation">
-            {% for menu_item in site.data.menu.menu_pages %}
-            <li>
-                <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}">
-                    <i class="{{ menu_item.icon_name }}"> </i>
+            <ul class="navigation">
+                {% for menu_item in site.data.menu.menu_pages %}
+                <li>
+                    <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}">
+                        <i class="{{ menu_item.icon_name }}"> </i>
+                    </a>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+        <div class="menu-contact">
+            {% for contact in site.data.menu.menu_contacts %}
+                <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}">
+                    <i class="{{ contact.faicon }}"></i>
                 </a>
-            </li>
             {% endfor %}
-        </ul>
-    </div>
-    <div class="menu-contact">
-        {% for contact in site.data.menu.menu_contacts %}
-
-        <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}">
-            <i class="{{ contact.faicon }}"></i>
-        </a>
-        {% endfor %}
-    </div>
-</aside>
+        </div>
+    </aside>
 
 {% else %}
 
-<aside class="menu">
-    <div class="menu-top">
-        <div class="profile">
-            <div class="avatar">
-                <a href="{{ '/about.html' | relative_url }}" alt="avatar">
-                    <img src="{{ site.data.menu.menu_logo | relative_url }}" alt="avatar" onerror="this.style.display='none'">
-                </a>
+    <aside class="menu">
+        <div class="menu-top">
+            <div class="profile">
+                <div class="avatar">
+                    <a href="{{ '/about.html' | relative_url }}" alt="avatar">
+                        <img src="{{ site.data.menu.menu_logo | relative_url }}" alt="avatar" onerror="this.style.display='none'">
+                    </a>
+                </div>
+                <h1>{{ site.data.menu.menu_title }}</h1>
+                <h2>{{ site.data.menu.menu_headline }}</h2>
+                <p>{{ site.data.menu.menu_intro }}</p>
             </div>
-            <h1>{{ site.data.menu.menu_title }}</h1>
-            <h2>{{ site.data.menu.menu_headline }}</h2>
-            <p>{{ site.data.menu.menu_intro }}</p>
+
+            <ul class="navigation">
+                {% for menu_item in site.data.menu.menu_pages %}
+                <li>
+                    <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}">
+                        <i class="{{ menu_item.icon_name }}"> </i>
+                        <span>{{ menu_item.title }}</span>
+                    </a>
+                </li>
+                {% endfor %}
+            </ul>
         </div>
+        <div class="menu-contact">
+            {% for contact in site.data.menu.menu_contacts %}
 
-        <ul class="navigation">
-            {% for menu_item in site.data.menu.menu_pages %}
-            <li>
-                <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}">
-                    <i class="{{ menu_item.icon_name }}"> </i>
-                    <span>{{ menu_item.title }}</span>
-                </a>
-            </li>
+            <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}">
+                <i class="{{ contact.faicon }}"></i>
+            </a>
             {% endfor %}
-        </ul>
-    </div>
-    <div class="menu-contact">
-        {% for contact in site.data.menu.menu_contacts %}
-
-        <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}">
-            <i class="{{ contact.faicon }}"></i>
-        </a>
-        {% endfor %}
-    </div>
-</aside>
+        </div>
+    </aside>
 {% endif %}
 
 <script>

data/_layouts/default.html

@@ -1,6 +1,11 @@
 <!doctype html>
 <html>
   <head>
+    {% if site.data.metaData.cookies.enabled %}
+      <script>
+        {% include cookies.js %}
+      </script>
+    {% endif %}
     {% include common-head.html %}
   </head>
   {% if site.data.menu.minimal_menu %}

data/_layouts/gate.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+  <head>
+    {% include common-head.html %}
+    <script>
+      {% include gate.js %}
+    </script>
+  </head>
+  {% if site.data.menu.minimal_menu and site.data.menu.show_menu_on_gate_page %}
+  <body class="is-minimal-menu" >
+  {% else %}
+  <body>
+  {% endif %}
+    {% if site.data.menu.show_menu_on_gate_page %}
+    {% include menu.html %}
+    <main class="content-layout">
+    {% else %}
+    <main class="content-layout no-menu">
+    {% endif %}
+        <div class="gate">
+            {% for menu_item in site.data.menu.menu_pages %}
+                {% if menu_item.show_on_home %}
+                    <a href="{{ menu_item.url | relative_url }}" class="category-container">
+                        <div class="category" style="background-image: url('{{ menu_item.image_url | relative_url}}')"></div>
+                        <p>
+                            {{ menu_item.title }}
+                        </p>
+                    </a>
+                {% endif %}
+            {% endfor %}
+        </div>
+      </main>
+  </body>
+</html>
+

data/_layouts/home.html

@@ -1,35 +1,35 @@
-<!doctype html>
-<html>
-  <head>
-    {% include common-head.html %}
-    <script>
-      {% include home.js %}
-    </script>
-  </head>
-  {% if site.data.menu.minimal_menu and site.data.menu.show_menu_on_category_select %}
-  <body class="is-minimal-menu" >
-  {% else %}
-  <body>
-  {% endif %}
-    {% if site.data.menu.show_menu_on_category_select %}
-    {% include menu.html %}
-    <main class="content-layout">
-    {% else %}
-    <main class="content-layout no-menu">
+---
+layout: default
+category: home
+---
+<div class="content-container home">
+    
+    <h1>
+        {% if site.data.metaData.show_menu_logo_on_home_page %}
+        {% include avatar.html %}
     {% endif %}
-        <div class="home">
-            {% for menu_item in site.data.menu.menu_pages %}
-                {% if menu_item.show_on_home %}
-                    <a href="{{ menu_item.url | relative_url }}" class="category-container">
-                        <div class="category" style="background-image: url('{{ menu_item.image_url | relative_url}}')"></div>
-                        <p>
-                            {{ menu_item.title }}
-                        </p>
+        {{ page.title }}
+    </h1>
+    <p class="page-summary">{{ page.summary }}</p>
+    <div class="category_wrapper">
+    {% for menu_item in site.data.menu.menu_pages %}
+        {% if menu_item.show_on_home %}
+            <div class="category_container">
+                <div class="category_image">
+                    <a href="{{ menu_item.url | relative_url }}">
+                        <img class="category" src="{{ menu_item.image_url | relative_url}}">
                     </a>
-                {% endif %}
-            {% endfor %}
-        </div>
-      </main>
-  </body>
-</html>
-
+                </div>
+                <div class="category_description">
+                    <a href="{{ menu_item.url | relative_url }}">
+                    <h2> {{ menu_item.title }} </h2>
+                    </a>
+                    <p>
+                        {{ menu_item.description }}
+                    </p>
+                </div>
+            </div>
+        {% endif %}
+    {% endfor %}
+</div>
+</div>

data/_layouts/post.html

@@ -9,6 +9,8 @@ layout: default
     {% endif %}
     <div class="content-container {{ page.category }}">
         <h1>{{ page.title }}</h1>
-        {{content}}
+        <div class="post-content">
+            {{content}}
+        </div>
     </div>
 </div>

data/_sass/styles/_avatar.scss

@@ -0,0 +1,16 @@
+.avatar {
+    &_container {
+        justify-content: center!important;
+        display: flex;
+    }
+    display: block;
+    width: $avatar-dim;
+    height: $avatar-dim;
+    border-radius: 50%;
+    border: 2px solid $p_light;
+    overflow: hidden;
+    img {
+        height: $avatar-dim;
+        width: $avatar-dim;
+    }
+}

data/_sass/styles/_category-aggregator.scss

@@ -1,16 +1,16 @@
 .category-aggregator {
-    color: $p_dark;
+    color: $p_text;
     a {
-        color: $secondary;
+        color: $p_text;
         &:hover {
-            color: darken($secondary, 10%);
+            color: $primary;
         }
     }
     hr {
         border: 0;
         height: 0;
         border-top: 1px solid rgba(0, 0, 0, 0.1);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+        border-bottom: 1px solid $p_text_dimmed;
         margin: $gap auto $gap * 0.5 auto;
     }
     article {
@@ -20,7 +20,7 @@
             padding-left: 18px;
             font-style: italic;
             margin-top: -0.6em;
-            color: rgba(0, 0, 0, 0.4);
+            color: $p_text_dimmed;
             font-size: 0.9em;
         }
         .article-read {

data/_sass/styles/_cookies.scss

@@ -0,0 +1,53 @@
+.cookie-container {
+    position: fixed;
+    padding: 20px 15px;
+    z-index: $pop-ups-z-1;
+    background-image: radial-gradient(farthest-corner at 25% 0, $p_darkest, $dark);
+    box-shadow: 0 0 6px 0 $dark;
+    text-align: center;
+    opacity: 0.95;
+    -webkit-transition: opacity 800ms, visibility 800ms;
+    transition: opacity 800ms, visibility 800ms;
+    bottom: 30px;
+    left: 40px;
+    max-width: 300px;
+    border-radius: 3px;
+    border: 3px solid $dark;
+
+    p {
+        color: $p_text;
+        line-height: 1.6em;
+        margin-bottom: 10px;
+    }
+    &.hidden {
+        opacity: 0;
+        visibility: hidden;
+    }
+    button {
+        line-height: 1.4;
+        font-weight: 700;
+        display: inline-block;
+        padding: 10px 20px;
+        background-color: $p_dark;
+        color: $p_text;
+        border: none;
+        border-radius: 3px;
+        text-decoration: none;
+        cursor: pointer;
+        -webkit-transition: background-color 200ms;
+        transition: background-color 200ms;
+        &:hover {
+            background-color: $primary;
+        }
+    }
+    @include mobile {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        max-width: 100%;
+        padding: 12px 10px;
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 0;
+    }
+}