minimal-categorized 0.0.13 → 0.0.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e9ecd370164a3292e9f9f243415565b854c51eef66fa001291f5bc1c8d3cbae8
-  data.tar.gz: e0aecaf432d6887732f2115bdd0e7e1283630a47f5ae94f4652ef0aef841661e
+  metadata.gz: c5a5936ee7e1e6562a2e786de5a280ffe563ca9d4e44374cc4913fd239a203b5
+  data.tar.gz: d9acf65066cd5ce86887174bfb49c863cdb7f196365ad34bb80eba24d190cc26
 SHA512:
-  metadata.gz: 808d35f7797f0ea4c3a63b3b886351b6338cff33b83acdcd3c002eba683d900939edbce0ea9cdedb37cc4167c6a3b22bd032a355392e0780f66be353878e6fa4
-  data.tar.gz: e7060e7731d29217b1453135027af3aadfbbdebb0cb68ac961eb03f3e268ba71c4087c2f5cccffe0a9b91ef1c0f7b9ba8078f4f1602ab090fa8ff441dba8c9c8
+  metadata.gz: 1c2f0d6a12d4f452c0b21a1e1e05b1a0c062194758cccb8b111d6b71bbb4dedc4c618af4db166153247871ea9c6853bf512bbb0025d3424e0bcd0cdb8986025f
+  data.tar.gz: aab66215b47d480917d65a92841e6942331e0d70fff67a886aae03eeccc3e370a1fc026bca92dbf8e35a22f658da6f165c5ee9d42338ada307bc80e54c490070

data/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020 Patryk Bieszke
+Copyright (c) 2021 Patryk Bieszke
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/README.md

@@ -1,35 +1,53 @@
-# [minimal-categorized Jekyll theme](https://github.com/ItsMeaga1n/minimal-categorized/)
+<h1><a href="https://github.com/ItsMeaga1n/minimal-categorized/"><img src="https://raw.githubusercontent.com/ItsMeaga1n/minimal-categorized/master/assets/img/favicon.ico" height="21" alt="minimal-categorized logo" /> minimal-categorized Jekyll theme </h1></a>
 
 [![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/)
 [![Gem Version](https://badge.fury.io/rb/minimal-categorized.svg)](https://badge.fury.io/rb/minimal-categorized)
+<a href="https://ko-fi.com/itsmeaga1n">
+  <img height="20" src="https://www.ko-fi.com/img/githubbutton_sm.svg"
+    alt="Donate (Ko-fi)" />
+</a>
+<a href="https://jekyll-themes.com">
+    <img src="https://img.shields.io/badge/featured%20on-JekyllThemes-red.svg" height="20" alt="Jekyll Themes Shield" />
+</a>
 
-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/).
+minimal-categorized is a flexible Jekyll theme, designed for sites with content easily aggregated into two categories. It's main focus is on separating two main categories, while maintaining minimal style and full customization. Demo is available [here](https://itsmeaga1n.github.io/minimal-categorized/).
 
 ![layout examples](screenshot.png)
 
 ## Installation
+There are three ways to install:
 
-Add this line to your Jekyll site's `Gemfile`:
+* As a ruby gem theme:
 
-```ruby
-gem "minimal-categorized"
-```
+    Add this line to your Jekyll site's `Gemfile`:
 
-And add this line to your Jekyll site's `_config.yml`:
+    ```ruby
+    gem "minimal-categorized"
+    ```
 
-```yaml
-theme: minimal-categorized
-```
+    And add this line to your Jekyll site's `_config.yml`:
 
-And then execute:
+    ```yaml
+    theme: minimal-categorized
+    ```
 
-    $ bundle
+    And then execute:
 
-Or install it yourself as:
+        $ bundle
 
-    $ gem install minimal-categorized
+    Or install it yourself as:
 
+        $ gem install minimal-categorized
+
+* As a remote theme (GitHub Pages compatible)
+    
+    In your Jekyll site's _config.yml remove other themes and add this entry:
+    ```
+    remote_theme: ItsMeaga1n/minimal-categorized
+    ```
+
+* Forking/directly copying all of the theme files into your project.
 ## Usage
 
 This theme is based on separating content into categories, which is later shown on separated sites designated to the specific content type.
@@ -40,7 +58,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,15 +73,17 @@ 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
-avatar_url: URL for avatar (for about page)
 
+Structure of `_data/metaData.yml`:
+* author: Site Author name
+* avatar_url: URL for avatar (for about page)
+* lightTheme: Will work in future releases
+* 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
+* show_menu_logo_on_home_page: boolean value determining, if should display logo from "menu_logo" entry in default home page layout
 ## Contributing
 
 Bug reports and pull requests are welcome on [GitHub](https://github.com/ItsMeaga1n/minimal-categorized). This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
@@ -80,4 +100,3 @@ To add a custom directory to your theme-gem, please edit the regexp in `minimal-
 ## License
 
 The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
-

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,6 +1,7 @@
 author: Site Author
 avatar_url: assets/img/avatar.png
-lightTheme: True
+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!

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/common-head.html

@@ -1,6 +1,16 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="{{ '/assets/styles/styles.css' | relative_url }}">
+<link rel="stylesheet" href="https://indestructibletype.com/fonts/Jost.css" type="text/css" charset="utf-8" />
 <script src="https://kit.fontawesome.com/79c31398dc.js" crossorigin="anonymous"></script>
+<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/img/apple-touch-icon.png' | relative_url }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/img/favicon-32x32.png' | relative_url }}">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/img/favicon-16x16.png' | relative_url }}">
+<link rel="manifest" href="{{ '/assets/img/site.webmanifest' | relative_url }}">
+<link rel="mask-icon" href="{{ '/assets/img/safari-pinned-tab.svg'| relative_url }}" color="#5bbad5">
+<link rel="shortcut icon" href="{{'/assets/img/favicon.ico' | relative_url }}">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="{{ '/assets/img/browserconfig.xml' | relative_url }}">
+<meta name="theme-color" content="#ffffff">
 {% include customizations.html %}
 {% seo %}

data/_includes/menu.html

@@ -27,7 +27,7 @@
         <div class="menu-top">
             <div class="profile">
                 <div class="avatar">
-                    <a href="{{ '/about.html' | relative_url }}" alt="avatar">
+                    <a href="{{ '/about.html' | relative_url }}" >
                         <img src="{{ site.data.menu.menu_logo | relative_url }}" alt="avatar" onerror="this.style.display='none'">
                     </a>
                 </div>

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

@@ -2,15 +2,23 @@
 layout: default
 ---
 <div class="post">
-    {% if page.image %}
-    <figure>
-        <img src="{{ page.image | relative_url }}"/>
-    </figure>
-    {% endif %}
+
     <div class="content-container {{ page.category }}">
-        <h1>{{ page.title }}</h1>
+        <header>
+            {% if page.image %}
+                <figure class="post-cover">
+            <!-- TODO: Images for diffrent screen size -->
+                    <img src="{{ page.image | relative_url }}" alt="{{ page.image_alt }}" class="post-cover_image" />
+                </figure>
+            {% endif %}
+            <h1>{{ page.title }}</h1>
+            <p class="post-metadata">
+                {{ page.date | date_to_string }}
+            </p>
+
+        </header>
         <div class="post-content">
-            {{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/_defaults.scss

@@ -25,7 +25,7 @@ h2, h2, h3 a {
 body {
     font-size: 16px;
     color: $base-white;
-    font-family: forma-djr-micro,Arial,sans-serif;
+    font-family: 'Jost',Arial,sans-serif;
     -webkit-font-smoothing: antialiased;
 }
 main {
@@ -36,7 +36,9 @@ main {
         padding: 0px 18px 24px;
         flex-grow: 1;
         position: relative;
-
+        p {
+            @include hyperlink-convention();
+        }
         .content-separator {
             margin: $gap auto;
             &:last-child {
@@ -56,9 +58,15 @@ a, p, li {
 
 @include mobile {
     body {
-        font-size: 13px;
+        font-size: 15px;
     }
     h1 {
         font-size: 2em;
     }
+    main {
+        .content-container {
+            width: 100%;
+            padding: 0px 9px 12px;
+        }
+    }
 }

data/_sass/styles/_gate.scss

@@ -0,0 +1,64 @@
+
+.gate {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    background-color: $main-bg-color;
+    a {
+        display: flex;
+        flex: 0 50%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        border: 1px solid $base-white;
+        transition: .5s ease;
+        &:hover {
+            .category {
+                opacity: 0.25;
+            }
+            p {
+                opacity: 1;
+            }
+        }
+        
+        .category {
+            display: flex;
+            flex: 0 100%;
+            opacity: 0.7;
+            height: 100%;
+            background-repeat: no-repeat;
+            background-size: cover;
+            transition: .5s ease;
+            backface-visibility: hidden;
+            @include mobile {
+                opacity: 0.25;
+            }
+        }
+
+        p {
+            color: $p_lightest;
+            font-size: 42px;
+            font-weight: 700;
+            transition: .5s ease;
+            opacity: 0;
+            position: absolute;
+            text-align: center;
+            text-shadow: $dark 3px 3px 3px;
+            @include mobile {
+                opacity: 1;
+            }
+        }
+    }
+
+    @include mobile {
+        flex-direction: column;
+        a {
+            height: 50%;
+            width: 100%;
+        }
+    }
+}

data/_sass/styles/_home.scss

@@ -1,64 +1,115 @@
+$image-dim: 192px;
 
 .home {
-    flex-grow: 1;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-start;
-    background-color: $main-bg-color;
-    a {
+    color: $p_text;
+    .page-summary {
+        flex: 0;
+        width: 100%;
+        text-align: center;
+    }
+    h1 {
+        flex: 0;
+        margin: auto;
         display: flex;
-        flex: 0 50%;
-        height: 100%;
-        justify-content: center;
         align-items: center;
-        box-sizing: border-box;
-        border: 1px solid $base-white;
-        transition: .5s ease;
+    }
+    a {
         &:hover {
-            .category {
-                opacity: 0.25;
-            }
-            p {
-                opacity: 1;
+            text-decoration: underline $primary;
+        }
+    }
+    .category {
+        &_wrapper {
+            margin-top: 2em;
+            flex: 1;
+            width: 100%;
+            display: flex;
+            @include mobile {
+                flex-direction: column;
+                margin-top: 1em;
             }
         }
-        
-        .category {
+        &_container {
             display: flex;
-            flex: 0 100%;
-            opacity: 0.7;
+            flex-direction: column;
+            flex: 0 50%;
             height: 100%;
-            background-repeat: no-repeat;
-            background-size: cover;
+            justify-content: flex-start;
+            align-items: center;
+            box-sizing: border-box;
             transition: .5s ease;
-            backface-visibility: hidden;
+            padding-left: 2em;
+            padding-right: 2em;
             @include mobile {
-                opacity: 0.25;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 2em;
+            }
+            &:first-of-type {
+                border-right: 1px solid $base-white;
+                @include mobile {
+                    padding-bottom: 2em;
+                    padding-top: 0;
+                    border-right: none;
+                    border-bottom: 1px solid $base-white;
+                }
             }
         }
-
-        p {
-            color: $p_lightest;
-            font-size: 42px;
-            font-weight: 700;
-            transition: .5s ease;
-            opacity: 0;
-            position: absolute;
-            text-align: center;
-            text-shadow: $dark 3px 3px 3px;
+        &_image {
+            justify-content: center !important;
+            display: flex;
+            height: $image-dim * 1.4;
+            align-items: center;
             @include mobile {
-                opacity: 1;
+                height: $image-dim * 1.1;
+            }
+            a {
+                display: block;
+                width: $image-dim;
+                height: $image-dim;
+                border-radius: 50%;
+                border: 2px solid $p_light;
+                overflow: hidden;
+                transition: .5s ease;
+                &:hover {
+                    height: $image-dim * 1.2;
+                    width: $image-dim * 1.2;
+                }
+            }
+            img {
+                height: $image-dim;
+                width: $image-dim;
+                object-fit: cover;
+                transition: .5s ease;
+                opacity: 0.85;
+                &:hover {
+                    height: $image-dim * 1.2;
+                    width: $image-dim * 1.2;
+                }
             }
         }
-    }
+        &_description {
+            text-align: center;
 
-    @include mobile {
-        flex-direction: column;
-        a {
-            height: 50%;
-            width: 100%;
         }
+        display: flex;
+        flex: 0 100%;
+        opacity: 0.7;
+        height: 100%;
+        background-repeat: no-repeat;
+        background-size: cover;
+        backface-visibility: hidden;
+        @include mobile {
+            opacity: 0.25;
+        }
+    }
+
+    .avatar_container {
+        margin-right: 0.5em;
     }
 }

data/_sass/styles/_index.scss

@@ -6,4 +6,6 @@
 @import './profile';
 @import './post';
 @import './cookies';
-@import './projects-collection.scss';
+@import './projects-collection.scss';
+@import './gate.scss';
+@import './avatar';

data/_sass/styles/_menu.scss

@@ -73,6 +73,12 @@
                         left: -2px;
                         top: 0px;
                         box-shadow: $primary 4px 0px 22px;
+                        @include mobile {
+                            height: 2px;
+                            width: 100%;
+                            top: -2px;
+                            left: 0;
+                        }
                     }
                 }
                 @include mobile {

data/_sass/styles/_post.scss

@@ -1,26 +1,23 @@
 .post {
+    $root: &;
     font-size: 1.2em;
-    a {
-        text-decoration-line: none;
-        color: $secondary;
-        &:hover {
-            text-decoration: underline;
-            font-weight: 500;
-        }
-    }
-    .language-plaintext, .language-shell, .language-html {
-        border-radius: 3px;
-        padding: 1px 3px;
-        background-color:rgb(228, 230, 232);
+    color: black;
+    @include hyperlink-convention();
+    @include mobile{
+        font-size: 1em;
     }
     figure {
         margin: 0;
         width: 100%;
-        img {
-            width: 100%;
-            background-repeat: no-repeat;
-            background-size: cover;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+        margin-left: -0.5em;
+        margin-right: -0.5em;
+        width: calc(100% + 1em);
+        & > pre {
+            overflow: auto;
         }
+
     }
     p, ul {
         margin-bottom: $gap * .5;
@@ -41,7 +38,40 @@
 
     &-content {
         background: $base-white;
-        padding: 2rem;
+        padding: 0.2em 2rem 2rem 2rem;
         border-radius: 10px;
+        @include mobile {
+            padding: 0.2em 1.2rem 1.2rem 1.2rem;
+        }
+    }
+
+    header {
+        padding: 1em 0.5em 0.8em 0.5em;
+        h1 {
+            padding: 0;
+            line-height: 1em;
+        }
+        p {
+            margin: 0;
+            color: $p_text;
+
+            &#{$root}-metadata {
+                font-size: 0.7em;
+                text-align: center;
+            }
+        }
+    }
+
+    &-cover {
+        &_image {
+            display: block;
+            max-width: 100%;
+            width: auto;
+            background-repeat: no-repeat;
+            background-size: cover;
+            height: auto;
+            max-height: 84vh;
+            margin: auto;
+        }
     }
 }

data/_sass/styles/_profile.scss

@@ -3,24 +3,12 @@ $avatar-dim: 96px;
 .profile { 
     margin-top: 30px;
     text-align: center;
-    .avatar {
-        justify-content: center!important;
-        display: flex;
-        a {
-            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;
-        }
-    }
     p {
         margin: 6px;
         line-height: 1.5em;
     }
+    .avatar {
+        margin-left: auto;
+        margin-right: auto;
+    }
 }

data/_sass/variables/_dark-theme.scss

@@ -0,0 +1,25 @@
+$base-white: #fafafa;
+$main-bg-color: #162129;
+
+$primary: #4fc2f7;
+$p_light: #81d3fa;
+$p_lighter_less: #81d3fa;
+$p_lighter: #b3e4fc;
+$p_lightest: #e1f5fe;
+$p_dark: #09a7f4;
+$p_darker: #0986d0;
+$p_darkest: #07559a;
+
+$dark: #162129;
+
+$secondary: #f7844f;
+$s_light: #faa682;
+$s_lighter: #fdc9b3;
+$s_lightest: #fbe8e4;
+$s_dark: #001970;
+
+$p_text: #ecf8ff;
+$p_text_dimmed: #5e8ca7;
+$s_text: #ffffff;
+
+$post_content_bg_color: #fff;

data/_sass/variables/_light-theme.scss

@@ -0,0 +1,17 @@
+$base-white: #fafafa;
+$main-bg-color: #fafafa;
+$dark: #1c313a;
+$primary: #455a64;
+$p_light: #718792;
+$p_lighter_less: #8fa4ad;
+$p_lighter: #a8bac2;
+$p_lightest: #eef3f5;
+$p_dark: #1c313a;
+$p_darkest: #1c313a;
+$secondary: #303f9f;
+$s_light: #666ad1;
+$s_lighter: #a0a0d1;
+$s_dark: #001970;
+$p_text: #1c313a;
+$p_text_dimmed: #5e8ca7;
+$s_text: #ffffff;

data/_sass/variables/_mixins.scss

@@ -31,4 +31,16 @@
             border-color: #555 transparent transparent transparent;
           }
     }
+}
+
+@mixin hyperlink-convention {
+    a {
+      transition: all 300ms ease 0s;
+      cursor: pointer;
+      text-decoration-line: none;
+      text-decoration: underline $primary;
+      &:hover {
+          color: $primary;
+      }
+  }
 }

data/assets/img/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/assets/images/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

data/assets/img/project-2.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 460 460" style="enable-background:new 0 0 460 460;" xml:space="preserve">
+<g>
+	<path style="fill:#325763;" d="M375,310.077V460h35V280.522C400.197,292.319,388.352,302.349,375,310.077z"/>
+	<path style="fill:#05232E;" d="M150,347.53V460h35V357.5c35.133,0,67.006-13.943,90.402-36.59l-72.607-13.83
+		C189.091,324.755,170.933,338.8,150,347.53z"/>
+	<path style="fill:#FAEAB6;" d="M410,201.369l-0.084-0.003c-1.574,41.607-28.08,76.252-64.916,89.898v31.468
+		c10.614-2.961,20.668-7.254,30-12.655c13.352-7.727,25.197-17.758,35-29.554c17.723-21.327,28.774-48.398,29.895-78.022H440
+		v-98.833l-30,10V201.369z"/>
+	<path style="fill:#6B8F9C;" d="M202.794,307.08C219.845,285.088,230,257.481,230,227.5v-47.727L100,197.5c-38.66,0-70-31.34-70-70
+		c0-38.66,31.34-70,70-70v-30c-55.229,0-100,44.771-100,100c0,55.228,44.771,100,100,100V325H65v135h35V357.5
+		c17.719,0,34.607-3.551,50-9.97C170.933,338.8,189.091,324.755,202.794,307.08z"/>
+	<path style="fill:#325763;" d="M440,47.143L420,30h-27V0c-12.065,0-22.362,7.534-26.479,18.144l-57.98,149.564L230,179.773V227.5
+		c0,29.982-10.155,57.588-27.206,79.58l72.607,13.83L310,327.5V460h35V291.263c36.836-13.646,63.342-48.29,64.916-89.898
+		l0.084,0.003v-87.702l30-10l1.026-0.342C451.462,99.846,460,88,460,77V50L440,47.143z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

data/assets/img/project-3.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 187 187"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="13.97" y1="93.5" x2="172.35" y2="93.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00ffa9"/><stop offset="1" stop-color="#0d4dff"/></linearGradient></defs><title>Q</title><path class="cls-1" d="M172.35,127.34c-.29-10.91-.13-21.84-.06-32.76a17.24,17.24,0,0,0-1.58-7.75c-3.35-7-6.7-14.1-9.82-21.25-1.69-3.88-4.15-5.56-8.54-5.45-10.5.27-21,0-31.52.15-3.11,0-4.41-.61-4.23-4,.3-5.34-.21-10.73.15-16.06.41-6.1-2.37-7.95-8-7.87-14.43.21-28.85.07-43.28.07s-28.85,0-43.27,0c-7.25,0-8.16,1-8.17,8.24Q14,75,14,109.27c0,10.35,0,10.33,10.25,11.21,1.19.1,3.43-.74,2.91,1.72-.28,1.31-.18,3.56-2.63,3.54-1,0-2.07.05-3.09,0-3.51-.13-7.17.13-7.26,4.59s3.7,5,7.11,4.76,5,.86,6.24,4.15c3.91,10,11.68,15.3,22.39,15.37s18.45-5.3,22.53-15.22c1.28-3.11,2.58-4.41,6.09-4.31,9.89.27,19.79.24,29.67,0,3.44-.08,4.89,1,6.16,4.28a23.24,23.24,0,0,0,22.49,15.29c10.77-.2,18.42-5.5,22.52-15.34,1.2-2.88,2.17-4.51,5.51-4.2C170.45,135.65,172.49,132.88,172.35,127.34ZM150.49,96.05c-3.36.15-22.39.11-27.46.09a1.23,1.23,0,0,1-1.23-1.25V75.08a1.25,1.25,0,0,1,1.25-1.25h3.6c5.94,0,11.88,0,17.82,0a5.66,5.66,0,0,1,5.43,3.33c1.93,3.84,3.84,7.69,5.45,11.66C157.16,93.29,155.42,95.83,150.49,96.05Z"/></svg>

data/assets/img/safari-pinned-tab.svg

@@ -0,0 +1 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" width="346.667" height="346.667" viewBox="0 0 260.000000 260.000000"><path d="M127.5 19.2c-1.1 1.1-7.4 6.5-14 12.1-20.2 17-24 20.2-24.5 20.7-.3.3-4.5 3.9-9.5 8-4.9 4.1-9.2 7.7-9.5 8-.3.3-6.1 5.3-13 11-6.9 5.8-12.7 10.7-13 11-.3.3-3.2 2.7-6.5 5.5-3.3 2.7-7.1 6-8.5 7.1-1.4 1.2-8.5 7.2-15.8 13.4C2.3 125.3 0 127.7.1 129.9c0 2.1 3.3 5.4 18.8 18.4 10.4 8.7 19.7 16.6 20.7 17.5 1.1.9 6 5.1 10.9 9.2 8 6.6 18.6 15.5 66.7 56.3l12.6 10.7 6.4-5.2c3.5-2.9 6.5-5.5 6.8-5.8.3-.3 2.1-1.8 4-3.4 1.9-1.5 5.8-4.8 8.5-7.1 9.1-7.8 21-17.9 26-22 2.6-2.2 8.2-6.9 12.4-10.5 4.2-3.6 9.9-8.4 12.6-10.7 2.8-2.3 6.1-5.1 7.5-6.3 1.4-1.2 4.5-3.8 6.9-5.8 2.4-2.1 10.8-9.1 18.5-15.7 7.8-6.6 15.6-13.2 17.4-14.7 6-5 5.7-5.4-22-28.9-61-51.5-101.9-86-103.9-87.5-1.1-.9-1.9-.7-3.4.8z"/></svg>

data/assets/img/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/assets/images/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/images/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

data/assets/styles/highlight.css

@@ -0,0 +1,74 @@
+.highlight { color: #cccccc }
+.highlight pre { background-color: #222222 }
+.highlight .hll { background-color: #222222 }
+.highlight .c { color: #2e7400 } /* Comment */
+.highlight .err { color: #cccccc; border: 1px solid #FF0000 } /* Error */
+.highlight .g { color: #cccccc } /* Generic */
+.highlight .k { color: #cdcd00 } /* Keyword */
+.highlight .l { color: #cccccc } /* Literal */
+.highlight .n { color: #cccccc } /* Name */
+.highlight .o { color: #3399cc } /* Operator */
+.highlight .x { color: #cccccc } /* Other */
+.highlight .p { color: #cccccc } /* Punctuation */
+.highlight .cm { color: #2e7400 } /* Comment.Multiline */
+.highlight .cp { color: #2e7400 } /* Comment.Preproc */
+.highlight .c1 { color: #2e7400 } /* Comment.Single */
+.highlight .cs { color: #cd0000; font-weight: bold } /* Comment.Special */
+.highlight .gd { color: #cd0000 } /* Generic.Deleted */
+.highlight .ge { color: #cccccc; font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00cd00 } /* Generic.Inserted */
+.highlight .go { color: #808080 } /* Generic.Output */
+.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { color: #cccccc; font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0040D0 } /* Generic.Traceback */
+.highlight .kc { color: #cdcd00 } /* Keyword.Constant */
+.highlight .kd { color: #00cd00 } /* Keyword.Declaration */
+.highlight .kn { color: #cd00cd } /* Keyword.Namespace */
+.highlight .kp { color: #cdcd00 } /* Keyword.Pseudo */
+.highlight .kr { color: #cdcd00 } /* Keyword.Reserved */
+.highlight .kt { color: #00cd00 } /* Keyword.Type */
+.highlight .ld { color: #cccccc } /* Literal.Date */
+.highlight .m { color: #cd00cd } /* Literal.Number */
+.highlight .s { color: #cd0000 } /* Literal.String */
+.highlight .na { color: #cccccc } /* Name.Attribute */
+.highlight .nb { color: #cd00cd } /* Name.Builtin */
+.highlight .nc { color: #00cdcd } /* Name.Class */
+.highlight .no { color: #cccccc } /* Name.Constant */
+.highlight .nd { color: #cccccc } /* Name.Decorator */
+.highlight .ni { color: #cccccc } /* Name.Entity */
+.highlight .ne { color: #666699; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #cccccc } /* Name.Function */
+.highlight .nl { color: #cccccc } /* Name.Label */
+.highlight .nn { color: #cccccc } /* Name.Namespace */
+.highlight .nx { color: #cccccc } /* Name.Other */
+.highlight .py { color: #cccccc } /* Name.Property */
+.highlight .nt { color: #cccccc } /* Name.Tag */
+.highlight .nv { color: #00cdcd } /* Name.Variable */
+.highlight .ow { color: #cdcd00 } /* Operator.Word */
+.highlight .w { color: #cccccc } /* Text.Whitespace */
+.highlight .mf { color: #cd00cd } /* Literal.Number.Float */
+.highlight .mh { color: #cd00cd } /* Literal.Number.Hex */
+.highlight .mi { color: #cd00cd } /* Literal.Number.Integer */
+.highlight .mo { color: #cd00cd } /* Literal.Number.Oct */
+.highlight .sb { color: #cd0000 } /* Literal.String.Backtick */
+.highlight .sc { color: #cd0000 } /* Literal.String.Char */
+.highlight .sd { color: #cd0000 } /* Literal.String.Doc */
+.highlight .s2 { color: #cd0000 } /* Literal.String.Double */
+.highlight .se { color: #cd0000 } /* Literal.String.Escape */
+.highlight .sh { color: #cd0000 } /* Literal.String.Heredoc */
+.highlight .si { color: #cd0000 } /* Literal.String.Interpol */
+.highlight .sx { color: #cd0000 } /* Literal.String.Other */
+.highlight .sr { color: #cd0000 } /* Literal.String.Regex */
+.highlight .s1 { color: #cd0000 } /* Literal.String.Single */
+.highlight .ss { color: #cd0000 } /* Literal.String.Symbol */
+.highlight .bp { color: #cd00cd } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #00cdcd } /* Name.Variable.Class */
+.highlight .vg { color: #00cdcd } /* Name.Variable.Global */
+.highlight .vi { color: #00cdcd } /* Name.Variable.Instance */
+.highlight .il { color: #cd00cd } /* Literal.Number.Integer.Long */
+
+.highlight .dl {color: #e26647}
+.highlight .lineno { color: rgb(173, 173, 173); margin-right: 5px; }

data/assets/styles/styles.scss

@@ -5,4 +5,5 @@
 // {% else %}
 // @import "./variables/dark-theme";
 // {% endif %}
-@import "minimal-categorized";
+@import "minimal-categorized";
+@import "./highlight.css";

data/pages/about.html

@@ -6,11 +6,7 @@ category: about
 
 ---
 <div class="profile">
-    <div class="avatar">
-        <a href="about.html" alt="avatar">
-            <img src="{{ site.data.metaData.avatar_url }}" alt="avatar" onerror="this.style.display='none'"> 
-        </a>
-    </div>
+    {% include avatar.html %}
     <h2>{{ site.data.menu.menu_headline }}</h2>
     <p>{{ site.data.menu.menu_intro }}</p>
 </div>

data/pages/category-1.html

@@ -3,7 +3,7 @@ title: Category 1
 layout: category-aggregator
 permalink: category-1.html
 category: category-1
-summary: Summary of a category. It is just a special placeholder wrapped in a particular class, so it looks more interesting. You can always make your own layout for a category, or make a category.html look the way you want.
+summary: Summary of a category. It is just a special placeholder wrapped in a particular class, so it looks more interesting. You can always make your own layout for a category, or make a category.html look the way you want. If you want to see the source code of this theme, feel free to check out the repository on <a href="https://github.com/ItsMeaga1n/minimal-categorized" target="_blank">GitHub</a>.
 ---
 <hr>
 <h2>Showcase of customizing aggregator site</h2>
@@ -20,12 +20,12 @@ summary: Summary of a category. It is just a special placeholder wrapped in a pa
                     </div>
                 </div>
             </a>
-            <a class="item">
+            <a class="item" >
                 <div class="icon"><img src="assets/img/project-2.svg"></div>
                 <div class="content">
                     <h4>CatoCat</h4>
                     <div class="description">
-                        CatoCat description. It's very fun and so on 
+                        CatoCat description. It's very fun and so on. 
                     </div>
                 </div>
             </a>
@@ -34,16 +34,16 @@ summary: Summary of a category. It is just a special placeholder wrapped in a pa
     <div class="group">
         <div class="title">Title for this section</div>
         <ul>
-            <a class="item">
+            <a class="item" href="gate.html">
                 <div class="icon"><img src="assets/img/project-3.svg"></div>
                 <div class="content">
-                    <h4>Track tacking</h4>
+                    <h4>Gate page</h4>
                     <div class="description">
-                        Track tacking description. It's a track, but more colorful
+                        This particular cell will take you to the gate webpage, which is a former "homepage". You can still use it if you want!
                     </div>
                 </div>
             </a>
-            <a class="item" href="https://ko-fi.com/itsmeaga1n0929" target="_blank">
+            <a class="item" href="https://ko-fi.com/itsmeaga1n" target="_blank">
                 <div class="icon"><img src="assets/img/ko-fi.jpg"></div>
                 <div class="content">
                     <h4>Ko-fi</h4>
@@ -62,16 +62,16 @@ summary: Summary of a category. It is just a special placeholder wrapped in a pa
                 <div class="content">
                     <h4>Project coffuska</h4>
                     <div class="description">
-                        Project that converts coffee into lines of code
+                        Project that converts coffee into lines of code. Or will, right now there is nothing
                     </div>
                 </div>
             </a>
             <a class="item">
                 <div class="icon"><i class="fas fa-cat"></i></div>
                 <div class="content">
-                    <h4>Project x</h4>
+                    <h4>Project X</h4>
                     <div class="description">
-                        Project x description. It's very fun and so on 
+                        Project X description. It's very fun and so on. Well, for now there is nothing
                     </div>
                 </div>
             </a>

data/pages/gate.html

@@ -0,0 +1,4 @@
+---
+layout: gate
+permalink: gate.html
+---

data/pages/super-cat.html

@@ -0,0 +1,9 @@
+---
+title: Category 1
+layout: default
+permalink: super-cat.html
+category: category-1
+---
+<hr>
+<h1>Super cat!</h2>
+<div class="icon"><img src="assets/img/project-1.png"></div>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: minimal-categorized
 version: !ruby/object:Gem::Version
-  version: 0.0.13
+  version: 0.0.18
 platform: ruby
 authors:
 - Patryk Bieszke
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-11-07 00:00:00.000000000 Z
+date: 2021-01-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -38,20 +38,24 @@ files:
 - _data/customs.yml
 - _data/menu.yml
 - _data/metaData.yml
+- _includes/avatar.html
 - _includes/common-head.html
 - _includes/cookies.js
 - _includes/customizations.html
 - _includes/footer.html
-- _includes/home.js
+- _includes/gate.js
 - _includes/menu.html
 - _layouts/category-aggregator.html
 - _layouts/default.html
+- _layouts/gate.html
 - _layouts/home.html
 - _layouts/post.html
 - _sass/minimal-categorized.scss
+- _sass/styles/_avatar.scss
 - _sass/styles/_category-aggregator.scss
 - _sass/styles/_cookies.scss
 - _sass/styles/_defaults.scss
+- _sass/styles/_gate.scss
 - _sass/styles/_home.scss
 - _sass/styles/_index.scss
 - _sass/styles/_layout.scss
@@ -60,16 +64,37 @@ files:
 - _sass/styles/_profile.scss
 - _sass/styles/_projects-collection.scss
 - _sass/variables/_colors.scss
+- _sass/variables/_dark-theme.scss
 - _sass/variables/_index.scss
 - _sass/variables/_layout.scss
+- _sass/variables/_light-theme.scss
 - _sass/variables/_mixins.scss
+- assets/img/android-chrome-192x192.png
+- assets/img/android-chrome-256x256.png
+- assets/img/apple-touch-icon.png
 - assets/img/avatar.png
+- assets/img/browserconfig.xml
 - assets/img/category-1.jpg
 - assets/img/category-2.jpg
+- assets/img/favicon-16x16.png
+- assets/img/favicon-32x32.png
+- assets/img/favicon.ico
+- assets/img/ko-fi.jpg
+- assets/img/mstile-150x150.png
+- assets/img/post-2.jpg
+- assets/img/project-1.png
+- assets/img/project-2.svg
+- assets/img/project-3.svg
+- assets/img/project-4.png
+- assets/img/safari-pinned-tab.svg
+- assets/img/site.webmanifest
+- assets/styles/highlight.css
 - assets/styles/styles.scss
 - pages/about.html
 - pages/category-1.html
 - pages/category-2.html
+- pages/gate.html
+- pages/super-cat.html
 homepage: https://github.com/ItsMeaga1n/minimal-categorized
 licenses:
 - MIT