minimal-categorized 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a200b6f9f8cf5e0b10a222ddcb96ef6a0a824df1085d17184072d327291a666
-  data.tar.gz: 3ddc7c89f497cc6ec78580590314c9a71442ac9de1ffa5f3419ba7dcf692acd3
+  metadata.gz: 6415a38becb2fecea685e504e1151de202d319b0318eaf7a944974883d0a16ac
+  data.tar.gz: 713e4a72dd644f0acdcbc64babe51311edcdeb664c28ee13dd903792d515e56c
 SHA512:
-  metadata.gz: d90103bae80ad567aecff90844a5db536c0d521ff3c5872e94febe7820cc36d0e60c7fa282f4a52a0a98f3242aa2e4aacbcc583022b520be55ed197ae46bf34e
-  data.tar.gz: 20b85163a078fa34a6b83d5e71dd64704f9176ed8419fe24e9922b351aa37d7a3e3ff16ae7e0b2b805547b36e36cfa6c51f18211f2acefbffc0de8dab08cd956
+  metadata.gz: 15ef67e272a34ce4b96dfca2bd52c8d9c878d1b17e39e3c0bac59642cf5f28d02c4d102b6da0ff36adadbf17ff04a9cf3882e3f14482812d501a4ef16b135e38
+  data.tar.gz: 48be04e4484a1354600841479a17a0daf6e7d1d478527ceee12ddfd5bae39a3df6dd9dbb3916cde7ffce169d3d184f46d60f5a0eccd59a35f40c8f4bde4dfffa

data/README.md

@@ -37,10 +37,28 @@ This theme is based on separating content into categories, which is later shown
 As for now, theme allows to use two main categories that will be displayed on home screen and more categories displayed only in menu to further separate content. Those are defined in `_data/menu.yml`.
 
 Structure of `_data/menu.yml`:
-TODO
+* 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
+* 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:
+    * title: Menu position title
+    * url: URL for href
+    * show_on_home: Boolean value to determine if this position is a category to be shown on category picker
+    * image_url: image URL for category picker
+    * icon_name: FavIcon to be displayed in menu
+    * category: unique identifier of category. Used to determine which menu item is selected
+    * tooltip: Tooltip for menu item
+* menu_contacts: a list of items to be displayed for a contact section in menu
+    * faicon: FavIcon to be displayed in menu
+    * url: URL for href
+    * target: target value of \<a> tag
 
 Structure of `_data/metaData.yml`:
-TODO
+author: Site Author name
+avatar_url: URL for avatar (for about page)
 
 ## Contributing
 

data/_data/menu.yml

@@ -2,14 +2,14 @@ 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
-minimal_menu: False
-menu_logo: /assets/img/avatar.png
+minimal_menu: True
+menu_logo: assets/img/avatar.png
 
 menu_pages:
 - title: Category 1
   url: /category-1.html
   show_on_home: True
-  image_url: https://cataas.com/cat/1
+  image_url: assets/img/category-1.jpg
   icon_name: fas fa-dice
   category: category-1
   tooltip: This is category 1
@@ -17,7 +17,7 @@ menu_pages:
 - title: Category 2
   url: /category-2.html
   show_on_home: True
-  image_url: https://cataas.com/cat/2
+  image_url: assets/img/category-2.jpg
   icon_name: fas fa-cogs
   category: category-2
   tooltip: This is category 2

data/_data/metaData.yml

@@ -1,4 +1,2 @@
 author: Site Author
-avatar_url: /assets/img/avatar.png
-twitter_username:
-github_username:
+avatar_url: assets/img/avatar.png

data/_includes/common-head.html

@@ -0,0 +1,5 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{ page.title }}</title>
+<link rel="stylesheet" href="{{ '/assets/styles/styles.css' | relative_url }}">
+<script src="https://kit.fontawesome.com/79c31398dc.js" crossorigin="anonymous"></script>

data/_includes/menu.html

@@ -1,5 +1,5 @@
 {% if site.data.menu.minimal_menu %}
-<aside class="menu minimal">
+<aside class="menu">
     <div class="menu-top">
 
         <ul class="navigation">

data/_layouts/category-aggregator.html

@@ -3,14 +3,19 @@ layout: default
 ---
 <div class="content-container category-aggregator {{ page.category }}">
     <h1>{{ page.title }}</h1>
+    <p>{{ page.summary }}</p>
     {{content}}
-    <hr>
+    <hr class="content-separator">
     {% for post in site.posts %}
         {% if post.category == page.category %}
             <article>
                 <header>
                     <h2>
+                        {% if post.external_url %}
+                        <a href="{{ post.external_url | relative_url }}" target="_blank">
+                        {% else %}
                         <a href="{{ post.url | relative_url }}">
+                        {% endif %}
                             <i class="fas fa-angle-right"></i>
                             {{ post.title }}
                         </a>
@@ -22,6 +27,18 @@ layout: default
                         {{ post.summary }}
                     </p>
                 </section>
+                <span class="article-read">
+                    {% if post.external_url %}
+                    <a href="{{ post.external_url | relative_url }}" target="_blank">
+                    {% else %}
+                    <a href="{{ post.url | relative_url }}">
+                    {% endif %}                        {% if post.external_name %}
+                        Read more on {{ post.external_name }} &rarr;
+                        {% else %}
+                        Read more &rarr;
+                        {% endif %}
+                    </a>
+                </span>
                 <hr>
             </article>
         {% endif %}

data/_layouts/default.html

@@ -1,13 +1,14 @@
 <!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <title>{{ page.title }}</title>
-    <link rel="stylesheet" href="{{ '/assets/styles/styles.css' | relative_url }}">
-    <script src="https://kit.fontawesome.com/79c31398dc.js" crossorigin="anonymous"></script>
+    {% include common-head.html %}
   </head>
+  {% if site.data.menu.minimal_menu %}
+  <body class="is-minimal-menu" >
+  {% else %}
   <body>
-      {% include menu.html %}
+  {% endif %}
+    {% include menu.html %}
       <main class="content-layout">
           {{ content }}
           {% include footer.html %}

data/_layouts/home.html

@@ -1,15 +1,16 @@
 <!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <title>{{ page.title }}</title>
-    <link rel="stylesheet" href="{{ '/assets/styles/styles.css' | relative_url }}">
-    <script src="https://kit.fontawesome.com/79c31398dc.js" crossorigin="anonymous"></script>
+    {% include common-head.html %}
     <script>
       {% include home.js %}
     </script>
   </head>
+  {% if site.data.menu.minimal_menu %}
+  <body class="is-minimal-menu" >
+  {% else %}
   <body>
+  {% endif %}
     {% if site.data.menu.show_menu_on_category_select %}
     {% include menu.html %}
     <main class="content-layout">

data/_layouts/post.html

@@ -3,7 +3,7 @@ layout: default
 ---
 <div class="post">
     <figure>
-        <img src="{{ page.image }}"/>
+        <img src="{{ page.image | relative_url }}"/>
     </figure>
     <div class="content-container {{ page.category }}">
         <h1>{{ page.title }}</h1>

data/_sass/styles/_category-aggregator.scss

@@ -2,19 +2,38 @@
     color: $p_dark;
     a {
         color: $secondary;
+        &:hover {
+            color: darken($secondary, 10%);
+        }
     }
     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);
+        margin: $gap auto $gap * 0.5 auto;
     }
-    .article-date {
-        font-weight: 700;
-        padding-left: 18px;
+    article {
+        position: relative;
+        .article-date {
+            font-weight: 700;
+            padding-left: 18px;
+            font-style: italic;
+            margin-top: -0.8em;
+            color: rgba(0, 0, 0, 0.4);
+            font-size: 0.9em;
+        }
+        .article-read {
+            position: absolute;
+            right: 10px;
+            font-size: 0.8em;
+            bottom: 0;
+        }
     }
     section {
         p {
+            width: 90%;
+            line-height: 1.7em;
             padding-left: 18px;
         }
     }

data/_sass/styles/_defaults.scss

@@ -1,15 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
-
 h1 {
     text-transform: uppercase;
     font-weight: 700;
     text-rendering: optimizeLegibility;
-    line-height: 1.1;
     color: inherit;
     text-align: center;
-    margin: 30px 0;
-    font-size: 4em;
+    font-size: 2.5em;
     letter-spacing: -1px;
+    margin: 1em 50px 1em;
 }
 
 h2 {
@@ -18,19 +15,44 @@ h2 {
     color: $secondary;
 }
 
-html {
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    line-height: 1.7em;
+}
+body {
+    font-size: 16px;
     color: $base-white;
-    font-family: 'Roboto', sans-serif;
+    font-family: forma-djr-micro,Arial,sans-serif;
 }
 main {
     .content-container {
         margin: 0px auto;
         max-width: 960px;
+        width: 90%;
         padding: 0px 18px 24px;
         flex-grow: 1;
+
+        .content-separator {
+            margin: $gap auto;
+        }
     }
 }
 a {
     text-decoration-line: none;
     color: inherit;
+}
+
+a, p {
+    font-size: 1.1em;
+}
+
+@include mobile {
+    body {
+        font-size: 13px;
+    }
+    h1 {
+        font-size: 2em;
+    }
 }

data/_sass/styles/_layout.scss

@@ -1,4 +1,3 @@
-
 main {
     background-color: $main-bg-color;
     color: black;
@@ -34,4 +33,16 @@ footer {
     p {
         margin: 0;
     }
+}
+
+.is-minimal-menu {
+    main {
+        width: $content-width-desktop-minimal-menu;
+        left: $minimal-menu-size;
+        @include mobile {
+            top: $minimal-menu-size;
+            left: 0;
+            width: 100%;
+        }
+    }
 }

data/_sass/styles/_menu.scss

@@ -33,9 +33,6 @@
             padding: 3px 10px 3px 10px;
         }
     }
-    h1 {
-        font-size: 2.5em;
-    }
     ul {
         @include mobile {
             display: flex;
@@ -57,7 +54,6 @@
                 letter-spacing: 1px;
                 line-height: 28px;
                 &:hover {
-                    text-decoration: underline;
                     font-weight: 900;
                     color: $p_lighter;
 
@@ -78,6 +74,11 @@
         }
     }
 
+    h1 {
+        font-size: 2em;
+        margin: 0.5em;
+    }
+
     h2 {
         color: darken($color: $s_text, $amount: 25);
         font-weight: 400;
@@ -87,18 +88,26 @@
     
 
     &-contact {
-        @include mobile{
-            a {
-                margin-top: 8px;
-                height: calc(#{$menu-size} - 10px);
-                width: calc(#{$menu-size} - 10px);
-                font-size: 30px;
-            }
-        }
         display:flex;
         justify-content:center;
         margin-bottom: 20px;
         flex-wrap: wrap;
+        @include mobile{
+            font-size: 16px;
+            max-height: $menu-size;
+            margin-bottom: 0;
+            display: inline-grid;
+            grid-template-rows: 50% 50%;
+            a:nth-child(odd) {
+                grid-row-start: 1;
+            }
+            a:nth-child(even) {
+                grid-row-start: 2;
+            }
+            a:nth-child(odd):last-child {
+                margin-top: 13px;
+            }
+        }
         a {
             color: $p_lighter;
             cursor:pointer;
@@ -112,14 +121,25 @@
             }
         }
     }
+}
 
-    &.minimal {
+.is-minimal-menu {
+    .menu {
+        width: $minimal-menu-size;
+        @include mobile {
+            height: $minimal-menu-size;
+            width: 100%;
+        }
         ul {
             li {
                 a {
                     i {
                         margin: 0;
                     }
+                    @include mobile {
+                        height: calc(#{$minimal-menu-size} - 10px);
+                        width: $minimal-menu-size;
+                    }
                 }
             }
         }

data/_sass/styles/_post.scss

@@ -0,0 +1,27 @@
+.post {
+    a {
+        text-decoration-line: none;
+        color: $secondary;
+        &:hover {
+            text-decoration: underline;
+            font-weight: 500;
+        }
+    }
+    code {
+        &.language-plaintext {
+            border-radius: 3px;
+            padding: 1px 3px;
+            background-color:rgb(228, 230, 232);
+        }
+
+    }
+    figure {
+        margin: 0;
+        img {
+            width: 100%;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+    }
+
+}

data/_sass/variables/_layout.scss

@@ -1,6 +1,11 @@
-$content-width-desktop: calc(100% - #{$menu-size});
 $tablet-width: 768px;
 $desktop-width: 1024px;
+$menu-size: 200px;
+$minimal-menu-size: 50px;
+$gap: 30px;
+
+$content-width-desktop: calc(100% - #{$menu-size});
+$content-width-desktop-minimal-menu: calc(100% - #{$minimal-menu-size});
 @mixin tablet {
     @media only screen and (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
       @content;

data/assets/styles/styles.scss

@@ -1,9 +1,4 @@
 ---
 ---
-{% if site.data.menu.minimal_menu %}
-$menu-size: 50px;
-{% else %}
-$menu-size: 200px;
-{% endif %}
 
 @import "minimal-categorized";

data/pages/about.html

@@ -7,11 +7,10 @@ category: about
 ---
 <div class="profile">
     <div class="avatar">
-        <a href="/about.html" alt="avatar">
+        <a href="about.html" alt="avatar">
             <img src="{{ site.data.metaData.avatar_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>

data/pages/category-1.html

@@ -3,14 +3,6 @@ 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.
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur turpis nec tortor sagittis, in tincidunt lectus iaculis. Sed tempor ligula ac nulla dictum, quis luctus tortor pretium. Suspendisse vitae nibh id sapien tempus posuere eu id ante. Fusce nec neque nisl. Suspendisse velit elit, euismod et lacus a, commodo mollis ligula. Duis non nibh gravida, interdum tellus sed, aliquam libero. Ut et tempor velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-
-Maecenas egestas eu nulla sed facilisis. Phasellus suscipit varius nibh, nec pharetra velit dignissim vel. Proin eget sapien nec massa ornare ornare. Vestibulum mattis placerat sapien, vel cursus est pretium nec. Sed at est eget enim semper scelerisque. Proin massa massa, luctus vel ante nec, dignissim molestie leo. Nulla auctor et ligula nec mollis. Fusce lectus lorem, hendrerit et metus suscipit, molestie commodo eros.
-
-Aliquam tempor porttitor mi. Aliquam et sapien faucibus, mattis purus sed, malesuada urna. Ut eget enim urna. Duis tempus est vel tincidunt luctus. Nunc commodo ante nec orci scelerisque, eu lobortis massa fermentum. Nunc sagittis eros at sapien volutpat aliquet. Donec posuere efficitur laoreet. Ut ornare tellus ut ipsum hendrerit, vitae varius ante pharetra. Suspendisse fringilla leo erat, dignissim auctor ex ultrices a. Sed ultrices blandit eros. Pellentesque volutpat ultrices sem, vel semper enim fermentum eu. Nulla eget eros ipsum. Sed hendrerit et arcu vitae pulvinar. Vivamus facilisis, eros eu gravida rhoncus, enim felis suscipit leo, vitae lacinia magna nisl hendrerit est. Cras eget blandit ante. Aenean tincidunt blandit lacus, vitae porta ipsum viverra et.
-
-Proin urna lorem, pulvinar quis orci non, accumsan pharetra erat. Aliquam vulputate aliquam tellus, ac sollicitudin nibh fermentum in. Sed malesuada nisl mi, vitae lobortis massa pretium ut. Nunc risus diam, consectetur non congue sed, rutrum eu eros. Integer sed aliquet sapien, a porttitor ex. Nam sed auctor augue, vitae cursus arcu. Donec vehicula viverra scelerisque.
-
-Duis quis mattis eros, gravida convallis dui. Nullam venenatis nisi mauris, eu consequat purus fermentum non. Suspendisse libero ipsum, tristique non efficitur ultrices, fringilla vulputate purus. Nullam laoreet lacus non sapien euismod, in viverra augue feugiat. Integer congue varius risus at cursus. Aenean tincidunt arcu vitae massa eleifend porta. Nullam facilisis eros rhoncus metus tincidunt tempus. Maecenas viverra urna mi, id rhoncus lectus aliquet maximus. Pellentesque vulputate turpis ut nulla lobortis, at ullamcorper sem sodales. Phasellus fringilla neque ut libero condimentum fermentum. Sed lobortis, felis mollis porta lacinia, nibh neque maximus ante, non eleifend dolor nunc dictum velit. Sed lacinia ut quam et dapibus.

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: minimal-categorized
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
 platform: ruby
 authors:
 - Patryk Bieszke
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-09-21 00:00:00.000000000 Z
+date: 2020-11-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -37,6 +37,7 @@ files:
 - _config.yml
 - _data/menu.yml
 - _data/metaData.yml
+- _includes/common-head.html
 - _includes/footer.html
 - _includes/home.js
 - _includes/menu.html
@@ -51,6 +52,7 @@ files:
 - _sass/styles/_index.scss
 - _sass/styles/_layout.scss
 - _sass/styles/_menu.scss
+- _sass/styles/_post.scss
 - _sass/styles/_profile.scss
 - _sass/variables/_colors.scss
 - _sass/variables/_index.scss