r-jekyll-theme 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1556b75b1f0c59039aff046cd84bb423c163ced5e2799dbbc9c4d50d25f48721
-  data.tar.gz: c6d889c56ec02dd28ba42f09dfbfdc8d8eef119f9a413ad8e195813f23d5fa84
+  metadata.gz: 8c47ff1ed0df12505c7bd7609720ac3dd4825a19f364b2a867f6174ef68f5678
+  data.tar.gz: ab52c289ae446332afa5ba2c4882ca651eee86ea5461544cead50d6bd16ccc57
 SHA512:
-  metadata.gz: bc7b3c413e97d41c28cc7e44800d8aa6d3eb29c85cb9ca043c89e8995070dd54911b09d50dc2bae035520cdf725854bbadc8decb9b6ce89cc7e56ef8b7393674
-  data.tar.gz: 49ba484ba6bb01cd1c9a7719ce020ce9fe85900ea4744e4786caa8b838e8e63dffbacc2f007fc27374322344aa01780f9d01ea7fa11fa0a119055ea25d07f0eb
+  metadata.gz: 4c8a4f3eac91be6ee8d2d805f1c8a1858742a55274651e34b07cd5b1e93dbf8517119e0dfafafdf803d1ebc50d02e8bf9ffc80689bca75a6b106cf132db9a2da
+  data.tar.gz: 5f9d5c3058ca0966fd9b3f0f0830fef5f1b2b3587fadf986f7b99d6984cc5d9287a3796b9e5d5c3720c6711cca930ed8a18c6acc94c4f701956aff0855a4e273

data/README.md

@@ -8,18 +8,22 @@ You can install the github-remote or gem-based r-jekyll-theme. You can also fork
 ### Preparing for the theme installation
 You need to create a directory for your Jekyll site and initialize a `Gemfile`.
 
-1. Create a directory in which you like to develop your site.
+#### Before you begin
+Ensure that you have Ruby and Jekyll installed. See [Jekyll - Quickstart](https://jekyllrb.com/docs/).
+
+1. Create a directory in which you want to develop your Jekyll site.
 2. In the site directory, run `bundle init`  
 **Result:** A `Gemfile` is created.
 
 ### Installing the github-remote-theme
-This is the recommended theme installation method if you plan to deploy your Jekyll site to GitHub-Pages.
+If you plan to deploy your Jekyll site to GitHub-Pages, use this installation method.
 
 1. To the `Gemfile`, add: 
     ```ruby
+    gem "github-pages"
     gem "jekyll-remote-theme"
     ```
-2. In the site directory, create a `_config.yml` file.
+2. In the site directory, create the `_config.yml` file.
 3. To the `_config.yml` file, add:
     ```yaml
     plugins:
@@ -29,21 +33,22 @@ This is the recommended theme installation method if you plan to deploy your Jek
 4. Run `bundle`
 
 ### Installing the gem-based theme
-This is the recommended theme installation method if you're into old school.
+If you're into old school, use this installation method.
 
  1. To the `Gemfile`, add:
     ```ruby
+    gem "github-pages"
     gem "r-jekyll-theme"
     ```
- 2. In the site directory, create a `_config.yml` file.
- 2. To the `_config.yml` file, add:
+ 2. In the site directory, create the `_config.yml` file.
+ 3. To the `_config.yml` file, add:
     ```yaml
     theme: r-jekyll-theme
     ```
- 3. Run `bundle`
+ 4. Run `bundle`
 
 ### Forking the theme GitHub repository
-This is the recommended theme installation method if you want to heavily modify the template.
+If you want to heavily modify the template, use this installation method.
 
 1. Fork the [r-jekyll-theme](https://github.com/rafalkaron/r-jekyll-theme) repository.
 2. In the root directory of the forked repository, run `bundle`
@@ -55,35 +60,27 @@ The r-jekyll-theme requires little configuration. You just need to add some cont
 You add content by creating Markdown files in the root directory of your Jekyll site.  
 **NOTE:** You should start adding your content by creating the `index.md` file.
 
-1. in the root directory of your Jekyll site, create a Markdown file.  
+1. In the root directory of your Jekyll site, create a Markdown file.  
 For example, create the `index.md` file.
 1. Open the file and add:
-```markdown
----
-layout: default
-title: Home
-order: "0"
----
-```
-where:
- * `layout` is the site HTML template. Always use the `default` value.
- * `title` is the page title that appears in the site navigation and in the web browser tab.
- * `order` is the position of the page in the navigation.
-1. Add content.  
+    ```markdown
+    ---
+    layout: default
+    title: Home
+    order: "0"
+    ---
+    ```
+    where:
+    * `layout` is the site HTML template. Always use the `default` value.
+    * `title` is the page title that appears in the site navigation and in the web browser tab.
+    * `order` is the position of the page link in the site navigation.
+1. Add Markdown (Kramdown) content.  
 For reference, see [content.md](https://raw.githubusercontent.com/rafalkaron/r-jekyll-theme/main/content.md).  
 **TIP:** To keep your files organized, add any media files to the `assets` directory.
 1. Save the Markdown file.
 
-### Previewing your site
-1. Set up your development environment by running `bundle install`  
-2. Run `bundle exec jekyll serve`
-3. In your web browser, go to `http://localhost:4000`
-4. Add pages, documents, data, styling etc.  
-For more information, see [Jekyll Home](https://jekyllrb.com/).
-**Info:** As you modify the theme or add content, your site regenerates automatically in the web browser. However, to see any `_config.yml` updates, you need to restart the server.
-
 ### Configuring site metadata and contact info
-You configure site metadata and contact information by editing the `_confing.yml` file. See the default [_config.yml](https://raw.githubusercontent.com/rafalkaron/r-jekyll-theme/main/_config.yml) file that you can customize.
+You configure site metadata and contact information by editing the `_confing.yml` file. For reference, see the default [_config.yml](https://raw.githubusercontent.com/rafalkaron/r-jekyll-theme/main/_config.yml).
 
 ### Styling
 You can override the default styling by creating the `main.scss` file in the `assets` directory.
@@ -91,10 +88,23 @@ You can override the default styling by creating the `main.scss` file in the `as
 1. In the root directory of your Jekyll site, create the `assets` directory.
 2. In the `assets` directory, create and open the `main.scss` file.
 3. To the `main.scss` file, add:
-```scss
----
----
-@import "r";
-```
+    ```scss
+    ---
+    ---
+    @import "r";
+    ```
 5. Under the `@import "r";` rule, add your styling.
-4. Save the `main.scss` file.
+4. Save the `main.scss` file.
+
+### Previewing your site
+You can generate and preview your site locally before publishing it.
+
+1. Set up your development environment by running `bundle install`  
+2. Run `bundle exec jekyll serve`
+3. In your web browser, go to `http://localhost:4000`
+4. Add pages, documents, data, styling etc. For more information, see [Jekyll Home](https://jekyllrb.com/).  
+**Info:** As you modify the theme or add content, your site should regenerate automatically in the web browser. However, to see any `_config.yml` updates, you need to restart the server.  
+If your site does not regenerate automatically in the web browser, ensure that you have the following added to your `_config.yml` file:
+    ```yaml
+    livereload: true
+    ```

data/_config.yml

@@ -1,5 +1,5 @@
 ### Site metadata
-title: r
+title: Red
 author: Name Surname
 description: Site description
 keywords: comma, separated, keywords
@@ -8,48 +8,50 @@ logo: "Red"
 
 ### Contact data
 contact:
-  email: 
-    id: 'mail@domain.com'
-    href: 'mailto:'
-    title: 'Email'
-    icon: "assets/icons/email.svg"
-    icon_dark: "assets/icons/email_dark.svg"
-  github: 
-    id: 'github_id'
-    href: 'https://github.com/'
-    title: 'GitHub'
-    icon: "assets/icons/github.svg"
-    icon_dark: "assets/icons/github_dark.svg"
-  linkedin:
-    id: 'linkedin_id'
-    href: 'https://linkedin.com/in/'
-    title: 'LinkedIn'
-    icon: "assets/icons/linkedin.svg"
-    icon_dark: "assets/icons/linkedin_dark.svg"
-  twitter: 
-    id: 'twitter_id'
-    href: 'https://twitter.com/'
-    title: 'Twitter'
-    icon: "assets/icons/twitter.svg"
-    icon_dark: "assets/icons/twitter_dark.svg"
-  500px:
-    id: '500px_id'
-    href: 'https://500px.com/'
-    title: '500px'
-    icon: "assets/icons/500px.svg"
-    icon_dark: "assets/icons/500px_dark.svg"
+    email:
+        id: "mail@domain.com"
+        href: "mailto:"
+        title: "Email"
+        icon: "/assets/icons/email.svg"
+        icon_dark: "/assets/icons/email_dark.svg"
+    github:
+        id: "github_id"
+        href: "https://github.com/"
+        title: "GitHub"
+        icon: "/assets/icons/github.svg"
+        icon_dark: "/assets/icons/github_dark.svg"
+    linkedin:
+        id: "linkedin_id"
+        href: "https://linkedin.com/in/"
+        title: "LinkedIn"
+        icon: "/assets/icons/linkedin.svg"
+        icon_dark: "/assets/icons/linkedin_dark.svg"
+    twitter:
+        id: "twitter_id"
+        href: "https://twitter.com/"
+        title: "Twitter"
+        icon: "/assets/icons/twitter.svg"
+        icon_dark: "/assets/icons/twitter_dark.svg"
+    500px:
+        id: "500px_id"
+        href: "https://500px.com/"
+        title: "500px"
+        icon: "/assets/icons/500px.svg"
+        icon_dark: "/assets/icons/500px_dark.svg"
 
 ### Site configuration
+permalink: blog/:categories/:title/
 livereload: true
-exclude: 
-  - LICENSE
-  - Gemfile
-  - Gemfile.lock
-  - README.md
-  - r-jekyll-theme.gemspec
+exclude:
+    - LICENSE
+    - Gemfile
+    - Gemfile.lock
+    - README.md
+    - r-jekyll-theme.gemspec
+    - r-jekyll-theme-0.1.2.gem
 markdown: kramdown
 kramdown:
-  input: GFM
+    input: GFM
 
 ### GitHub-remote theme
 #plugins:
@@ -57,4 +59,4 @@ kramdown:
 #remote_theme: rafalkaron/r-jekyll-theme@main
 
 ### Gem-based theme
-#theme: r-jekyll-theme
+#theme: r-jekyll-theme

data/_includes/blog/categories.html

@@ -0,0 +1,16 @@
+{% if site.categories %}
+<div id="categories-container">
+    <h1 class="blog-header" id="blog-categories">Categories</h1>
+    {% for category in site.categories %}
+    <div class="category-group">
+        {% capture category_name %}{{ category | first }}{% endcapture %}
+        <h3 id="{{ category_name | slugize }}" class="category-head">{{ category_name }}</h3>
+        <ul class="post-tags">
+            {% for post in site.categories[category_name] %}
+            <li class="post-tag"><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></li>
+            {% endfor %}
+        </ul>
+    </div>
+    {% endfor %}
+</div>
+{%endif%}

data/_includes/blog/go_back_to_blog.html

@@ -0,0 +1,3 @@
+<div class="go-back">
+    <a href="/blog" class="go-back-link">All posts...</a>
+</div>

data/_includes/blog/post_meta.html

@@ -0,0 +1,76 @@
+<div class="post-meta">
+    <div class="post-info">
+        {% if post %}
+        <time class="post-published" datetime="{{ post.date | date_to_xmlschema }}{{ post.date | date_to_xmlschema }}" itemprop="datePublished">{{ post.date | date: date_format }}</time>
+        {%endif%}
+        {% if page %}
+        <time class="post-published" datetime="{{ page.date | date_to_xmlschema }}{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</time>
+        {%endif%}
+
+        {%- if post.modified_date -%}<span> ~ </span>
+        {%- assign mdate = post.modified_date | date_to_xmlschema -%}
+        <time class="post-modified" datetime="{{ mdate }}" itemprop="dateModified">{{ mdate | date: date_format }}</time>
+        {%- endif -%}
+        {%- if page.modified_date -%}<span> ~ </span>
+        {%- assign mdate = page.modified_date | date_to_xmlschema -%}
+        <time class="post-modified" datetime="{{ mdate }}" itemprop="dateModified">{{ mdate | date: "%B %d, %Y" }}</time>
+        {%- endif -%}
+
+        {%- if post.author -%}<span> • </span>
+        <span class="p-author h-card" itemprop="name">{{ post.author }}</span>
+        {% endif -%}
+        {%- if page.author -%}<span> • </span>
+        <span class="p-author h-card" itemprop="name">{{ page.author }}</span>
+        {% endif -%}
+
+        {%- if post.category -%}<span> • </span>
+        <span class="post-categories">
+            {% assign categories = post.categories %}
+            {% for category in categories %}
+            <a href="{{site.baseurl}}/blog/#{{category|slugize}}">{{category}}</a>
+            {% unless forloop.last %}&nbsp;{% endunless %}
+            {% endfor %}
+        </span>
+        {%- endif -%}
+        {%- if page.category -%}<span> • </span>
+        <span class="post-categories">
+            {% assign categories = page.categories %}
+            {% for category in categories %}
+            <a href="{{site.baseurl}}/blog/#{{category|slugize}}">{{category}}</a>
+            {% unless forloop.last %}&nbsp;{% endunless %}
+            {% endfor %}
+        </span>
+        {%- endif -%}
+    </div>
+    
+    {%- if post.tags -%}
+    <ul class="post-tags">
+    {%- for tag in post.tags %}
+        <span class="post-categories">
+            {% assign categories = post.categories %}
+            {% for category in categories %}
+            <li class="post-tag"><a href="{{site.baseurl}}/blog/#{{tag|slugize}}">{{tag}}</a></li>
+            {% unless forloop.last %}&nbsp;{% endunless %}
+            {% endfor %}
+        </span>
+    {%- endfor -%}
+    {%- endif -%}
+    {%- if page.tags -%}
+    <ul class="post-tags">
+    {%- for tag in page.tags %}
+        <span class="post-categories">
+            {% assign categories = page.categories %}
+            {% for category in categories %}
+            <li class="post-tag"><a href="{{site.baseurl}}/blog/#{{tag|slugize}}">{{tag}}</a></li>
+            {% unless forloop.last %}&nbsp;{% endunless %}
+            {% endfor %}
+        </span>
+    {%- endfor -%}
+    {%- endif -%}
+    </ul>
+
+    {%- if post.excerpt -%}
+    <div class="post-excerpt">{{post.excerpt}}</div>
+    {%- endif -%}
+
+</div>

data/_includes/blog/posts_list.html

@@ -0,0 +1,23 @@
+{%if site.posts%}
+{% assign postsByYear = site.posts | group_by_exp:"post", "post.date | date: '%Y'" %}
+{% for year in postsByYear %}
+{%- assign date_format = site.date_format | default:"%b %-d, %Y" -%}
+
+
+<div id="post-list-container">
+    {% for post in year.items %}
+    <ul id="post-list">
+    
+        <li class="post-item">
+            <a href="{{ post.url }}" class="post-link"> <h1 id="{{post.title | slugify }}"> {%- if post.image -%} <img class="post-image" src="{{ post.image }}"> {%- endif -%}{{post.title}}</h1> </a>
+            {% include blog/post_meta.html -%}
+            <div class="read-more">
+                <a href="{{ post.url }}" class="read-more-link"> Read more...</a>
+            </div>
+
+        </li>
+    {% endfor %}
+    </ul>
+</div>
+{% endfor %}
+{%endif%}

data/_includes/blog/tags.html

@@ -0,0 +1,16 @@
+{% if site.tags %}
+<div id="tags-container">
+    <h1 class="blog-header" id="blog-tags">Tags</h1>
+    {% for tag in site.tags %}
+    <div class="tag-group">
+        {% capture tag_name %}{{ tag | first }}{% endcapture %}
+        <h3 id="{{ tag_name | slugize }}" class="tag-head">{{ tag_name }}</h3>
+        <ul class="post-tags">
+            {% for post in site.tags[tag_name] %}
+            <li class="post-tag"><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></li>
+            {% endfor %}
+        </ul>
+    </div>
+    {% endfor %}
+</div>
+{%endif%}

data/_includes/footer.html

@@ -1,17 +1,16 @@
-
-
 <footer id="site-footer">
     <div class="footer-column footer-contact">
         {%- if site.contact %}
-            {%- assign con = site.contact -%}
-            {%- for entry in con -%}
-                {%- assign key = entry | first -%}
-                {% if con[key].id %}
-            <a target="blank" class="footer-image-link" href="{{ con[key].href }}{{ con[key].id }}" title="{{ con[key].title }}"><img class="footer-icon" src="{{ con[key].icon }}"></a>
-                {%- endif -%}
-            {% endfor %}
+        {%- assign con = site.contact -%}
+        {%- for entry in con -%}
+        {%- assign key = entry | first -%}
+        {% if con[key].id %}
+        <a target="blank" class="footer-image-link" href="{{ con[key].href }}{{ con[key].id }}"
+            title="{{ con[key].title }}"><img class="footer-icon" src="/{{ con[key].icon }}"></a>
+        {%- endif -%}
+        {% endfor %}
         {%- endif %}
     </div>
-    <div class="footer-column footer-copyright">Copyright © {{site.since}}-{{ 'now' | date: "%Y" }} <a class="footer-link" href="{{site.email.href}}{{site.email.id}}" target="blank">{{site.author}}</a>.</div>
-</footer>
-
+    <div class="footer-column footer-copyright">Copyright © {{site.since}}-{{ 'now' | date: "%Y" }} <a
+            class="footer-link" href="{{site.email.href}}{{site.email.id}}" target="blank">{{site.author}}</a>.</div>
+</footer>

data/_includes/head.html

@@ -1,12 +1,10 @@
-
-
 <head>
     {%- assign title = page.title -%}
     {%- if site.title -%}
-        {% assign title = site.title | append: " | " | append: page.title %}
+    {% assign title = site.title | append: " | " | append: page.title %}
     {%- endif -%}
     {% if page.title == nil %}
-        {% assign title = site.title | append: " | " | append: "404" %}
+    {% assign title = site.title | append: " | " | append: "404" %}
     {% endif %}
     <title>{{ title }}</title>
     <meta charset="utf-8">
@@ -15,6 +13,6 @@
     <meta name="keywords" content="{{ site.keywords }}">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <link rel="icon" type="image/ico" href="assets/favicon.svg">
-    <link rel="stylesheet" href="assets/main.css">
+    <link rel="icon" type="image/ico" href="/assets/favicon.svg">
+    <link rel="stylesheet" href="/assets/main.css">
 </head>

data/_includes/header.html

@@ -1,9 +1,7 @@
-
-
-<header id="site-header" role="banner">    
+<header id="site-header" role="banner">
     <div id="site-logo-container">
         {%- if site.logo %}
-        <a href="index.html" id="site-logo">{{ site.logo }}</a>
+        <a href="/index.html" id="site-logo">{{ site.logo }}</a>
         {%- endif %}
     </div>
 
@@ -16,9 +14,17 @@
         <div id="site-nav-section">
             <h1 class="print print-header">Contents</h1>
             <div id="toc-sections">
-                {% include toc/sections.html html=content anchor_class="nav-link" h_min=1 h_max=1 sanitize=true %}
+                {% include toc/sections.html html=content anchor_class="nav-link" h_min=1 h_max=1 sanitize=true skip_no_ids=true %}
+                
+                {%- if page.layout == "post" -%}
+                <ul>
+                    <li><a style="font-weight: bold;" href="{{page.url}}#top" class="nav-link nav-link-top">{{ page.title }}</a></li>
+                </ul>
+                    
+                {% include toc/sections.html html=content anchor_class="nav-link" h_min=2 h_max=2 sanitize=true skip_no_ids=true %}
+                
+                {%- endif %}
             </div>
         </div>
     </nav>
-</header>
-
+</header>

data/_includes/print/print_button.html

@@ -1 +1 @@
-<input id="print-button" class="screen" type="button" value="Print {{ page.title }}" onClick="window.print()">
+<input id="print-button" class="screen" type="button" value="Print: {{ page.title }}" onClick="window.print()">

data/_includes/toc/pages.html

@@ -1,14 +1,13 @@
 {%- assign default_paths = site.pages | where: "layout", "default" | sort: "order" | map: "path" -%}
 {%- assign page_paths = site.header_pages | default: default_paths -%}
 
-
 <ul class="{{ page.title | slugify }}">
     {%- for path in page_paths %}
-        {%- assign toc_page = site.pages | where: "path", path | first -%}
-        {%- assign link_title = toc_page.title -%}
-        {%- if toc_page.navtitle -%}
-            {% assign link_title = toc_page.navtitle %}
-        {% endif %}
+    {%- assign toc_page = site.pages | where: "path", path | first -%}
+    {%- assign link_title = toc_page.title -%}
+    {%- if toc_page.navtitle -%}
+    {% assign link_title = toc_page.navtitle %}
+    {% endif %}
     <li><a href="{{ toc_page.url | relative_url }}" class="nav-link {{ toc_page.title | slugify }}">{{ link_title | escape }}</a></li>
     {%- endfor %}
 </ul>
@@ -19,3 +18,17 @@
     }
 </style>
 
+{%- if page.layout == "post" -%}
+<style>
+    a.blog {
+        text-decoration: underline;
+    }
+
+    div#toc-sections a {
+        text-decoration: none;
+    }
+    div#toc-sections a:hover {
+        text-decoration: underline;
+    }
+</style>
+{% endif %}

data/_layouts/default.html

@@ -7,15 +7,13 @@
     {%- include print/cover_front.html -%}
     {%- include header.html -%}
 
-<main id="page-content" class="content {{ page.outputclass }}">
+    <main id="page-content" class="content {{ page.outputclass }}">
+        {% include content/multipage.html -%}
+    </main>
 
-    {% include content/multipage.html -%}
-    
-</main>
-
-{%- include footer.html -%}
-{%- include print/cover_back.html -%}
+    {%- include footer.html -%}
+    {%- include print/cover_back.html -%}
 
 </body>
 
-</html> 
+</html>

data/_layouts/post.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+{%- include head.html %}
+
+<body>
+	{%- include print/cover_front.html -%} 
+	{%- include header.html -%}
+
+	<main id="page-content" class="content {{ page.outputclass }}">
+
+		<article class="post">
+			<h1 class="post-title">			{%- if page.image -%} <img class="post-image" src="{{ page.image }}"> {% endif %}
+				{{ page.title | escape }} </h1>
+			
+
+
+			{% include blog/post_meta.html -%}
+			
+			{{ content }}
+			{% include blog/go_back_to_blog.html %}
+		</article>
+	</main>
+	{%- include footer.html -%} 
+	{%- include print/cover_back.html -%}
+</body>
+
+</html>

data/_sass/r.scss

@@ -16,7 +16,6 @@ html {
     @import "r/layout/print";
 }
 @import "r/layout/columns";
-
 // Styling
 @import "r/styling/animations",
 "r/styling/shadow",
@@ -36,5 +35,6 @@ main#page-content {
     "r/content/note",
     "r/content/abbr",
     "r/content/link",
-    "r/content/title";
+    "r/content/title",
+    "r/content/blog";    
 }

data/_sass/r/content/blog.scss

@@ -0,0 +1,102 @@
+div#post-list-container {
+
+    ul#post-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    
+        li.post-item {
+            margin: 0;
+            padding: 0;
+            
+            a.post-link,
+            a.post-link:hover,
+            a.post-link:active {
+                text-decoration-color: $primary-color;
+            }
+
+    
+            div.post-excerpt {
+                p {
+                    margin-top: $margin;
+                }
+            }
+        }
+    
+
+    }
+}
+
+div.read-more,
+div.go-back {
+    text-align: right;
+    
+    a.read-more-link,
+    a.go-back-link {
+        font-size: 1.8rem;
+    }
+}
+div.post-info {
+    margin-top: $margin;
+
+    * {
+        font-weight: bold;
+    }
+
+    span.post-categories {
+        text-decoration: none;
+        font-weight: bold;
+        color: $text-dark;
+
+        * {
+            text-decoration: inherit;
+            font-weight: inherit;
+            color: inherit;
+        }
+    }
+
+    span.post-categories:hover,
+    span.post-categories:active {
+        color: $secondary-color;
+        text-decoration: underline;
+    }
+}
+
+ul.post-tags {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin-top: 0.25rem;
+    
+    li.post-tag {
+        font-size: 1.3rem;
+        list-style: none;
+        padding: 0.25em 0.75em;
+        margin: 0.8rem 0.8rem 0.8rem 0;
+        background-color: $background-middle;
+        color: $text-dark;
+        border-radius: $border-radius;
+        width: auto;
+        text-align: center;
+        vertical-align: middle;
+        display: inline;
+        text-decoration: none;
+        font-weight: bold;
+    
+        * {
+            border: none;
+            text-decoration: inherit;
+            font-size: inherit;
+            font-weight: inherit;
+            color: inherit;
+        }
+    }
+    li.post-tag:hover,
+    li.post-tag:active {
+        color: $secondary-color;
+    }
+}
+
+img.post-image {
+    margin-top: 0;
+}

data/_sass/r/content/code.scss

@@ -24,6 +24,7 @@ pre {
     margin: $margin 0;
     padding: 0;
     display: block;
+    width: fit-content;
     border-radius: $border-radius;
 }
 

data/_sass/r/content/image.scss

@@ -5,6 +5,7 @@ img {
   margin: $margin 0;
   max-width: 100%;
   display: block;
+  border-radius: $border-radius;
 }
 
 img.center {

data/_sass/r/content/note.scss

@@ -4,11 +4,11 @@
 .note_caution,
 .note_tip {
     padding: 0.5rem 1rem;
-    background-color: $background-middle;
     display: block;
     border-left: $border;
     font-size: 1.4rem;
-    border-radius: $border-radius;
+    width: fit-content;
+    max-width: 100%;
 }
 
 /* Style note captions */

data/_sass/r/content/quote.scss

@@ -17,10 +17,10 @@ q::after {
 blockquote {
     width: fit-content;
     margin: $margin 0;
-    padding: 0 0.5rem 0 0.5rem;
-    background-color: $background-middle;
+    padding: 0 0.5rem 0 1.2rem;
     font-size: 1.3rem;
-    border-radius: $border-radius;
+    border-left: $border;
+    border-color: $background-middle;
 }
 blockquote * {
     font-size: 1.3rem;

data/_sass/r/content/title.scss

@@ -27,27 +27,27 @@ h6 * {
 /* Individual titles */
 h1 {
     margin: 0;
-    font-size: 3.8rem;
+    font-size: 4rem;
     font-weight: bold;
     margin-left: -0.035em;
 }
 h2 {
-    font-size: 2.4rem;
+    font-size: 2.8rem;
     font-weight: bold;
     color: $primary-color;
 
 }
 h3 {
     margin: 1em 0 0 0;
-    font-size: 2.0rem;
-    font-weight: normal;
+    font-size: 2.2rem;
+	font-weight: normal;
 }
 h4,
 h5,
 h6 {
     margin: 1em 0 0 0;
     font-size: 1.8rem;
-    font-weight: normal;
+	font-weight: normal;
 }
 
 /* Support images in titles */
@@ -61,4 +61,14 @@ h6 > img {
     margin: inherit;
     height: 1.2em;
     margin-bottom: -0.25em;
+}
+
+img.post-image {
+        overflow: auto;
+        padding: 0;
+        margin: $margin 0;
+        max-width: 100%;
+        display: block;
+        border-radius: $border-radius;
+        height: unset;
 }

data/_sass/r/layout/desktop.scss

@@ -27,7 +27,7 @@ body {
 main#page-content {
     display: block;
     min-width: 60rem;
-    margin: 0 0 0 35rem;
+    margin: 0 0 0 40rem;
 }
 
 article {
@@ -35,8 +35,18 @@ article {
     padding: 5rem 10rem;
 }
 
-article + article {
-    border-top: 0.5rem dashed $background-middle;
+div#post-list-container {
+    margin-top: 2.5rem;
+}
+
+div#post-list-container article{
+    padding: 2.5rem 10rem;
+}
+
+article + article,
+div#tags-container,
+div#categories-container {
+    border-top: 0.5rem dotted $background-middle;
 }
 
 /*** Body - END */
@@ -49,15 +59,9 @@ header#site-header {
     top: 0;
     left: 0;
     bottom: 0;
-    padding: 5rem 2.5rem 0 2.5rem;
+    padding: 5rem;
     text-align: left;
     background-color: $primary-color;
-    overflow-y: auto;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-}
-header#site-header::-webkit-scrollbar {
-    display: none;
 }
 
 /* Logo */
@@ -67,7 +71,9 @@ div#site-logo-container {
     overflow: hidden;
     flex-grow: 0;
     flex-shrink: 0;
-    margin: 0 2rem;
+    margin: 0;
+    position: fixed;
+    width: 30rem
 }
 a#site-logo {
     font-size: 15rem;
@@ -84,15 +90,28 @@ nav#site-nav {
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
-    margin: 3.5rem 0;
-    max-width: 30rem;
+    margin: 2.5rem 0;
+    width: 30rem;
+    position: fixed;
+    top: 15rem;
+    bottom: 8rem;
+    overflow-y: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 
+// nav#site-nav::-webkit-scrollbar {
+//     display: none;
+// }
+
 div#site-nav-page {
-    padding: 0 1.5rem 0 2rem;
+    padding: 0 1.5rem 0 0rem;
+    border-right: 0.25rem solid $text-light;
+
 }
 div#site-nav-section {
-    padding: 0 2rem 0 1.5rem;
+    padding: 0 0rem 0 1.5rem;
+    margin-left: -0.20rem;
     border-left: 0.25rem solid $text-light;
 }
 
@@ -107,7 +126,7 @@ div#toc-pages ul {
 div#toc-sections ul {
     margin: 0;
     padding: 0;
-    display: flexbox;        
+    display: flexbox;
     justify-content: flex-start;
     flex-wrap: wrap;
 }
@@ -115,8 +134,15 @@ div#toc-pages li {
     list-style: none;
     padding-bottom: 0.8em;
 }
+
+div#toc-pages li:last-of-type {
+    padding-bottom: 0;
+}
+
 div#toc-sections li {
     list-style: none;
+    padding-bottom: 0.4em;
+    line-height: 1em;
 }
 
 /* Navigation links */
@@ -125,7 +151,7 @@ div#toc-sections li {
     font-size: 2.2rem;
 }
 #toc-sections a.nav-link {
-    font-size: 1.6rem;
+    font-size: 1.4rem;
 }
 a.nav-link {
     color: $text-light;
@@ -146,7 +172,7 @@ footer#site-footer {
     left: 0;
     bottom: 0;
     display: flexbox;
-    width: 30rem;
+    width: 35rem;
     background-color: $primary-color;
     padding: 2.5rem;
 }
@@ -184,4 +210,7 @@ img.footer-icon:first-of-type {
         color: $text-dark;
         padding: 5rem;
     }
-}
+    div#post-list-container article{
+        padding: 2.5rem 5rem;
+    }
+}

data/_sass/r/layout/mobile.scss

@@ -36,7 +36,17 @@ article {
     padding: 5rem 5rem; 
 }
 
-article + article {
+div#post-list-container article{
+    padding: 2.5rem 5rem;
+}
+
+div#post-list-container {
+    margin-top: 2.5rem;
+}
+
+article + article,
+div#categories-container,
+div#tags-container  {
     border-top: 0.5rem dotted $background-middle;
 }
 /*** Body - END */
@@ -47,7 +57,7 @@ header#site-header {
     top: 0;
     left: 0;
     right: 0;
-    padding: 2.5rem 4.2rem $margin 4.2rem;
+    padding: 2.5rem 4.2rem;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -65,7 +75,6 @@ div#site-logo-container {
     margin: 0 5rem 0 0;
     flex-grow: 0;
     flex-shrink: 0;
-    min-height: 10rem;
 }
 a#site-logo {
     font-size: 10rem;
@@ -73,6 +82,7 @@ a#site-logo {
     color: $text-light;
     text-decoration: none;
     line-height: 0.9em;
+    height: 0.7em;
     overflow: hidden;
     font-family: $logo-font;
     margin-left: -0.035em;
@@ -119,9 +129,10 @@ div#toc-sections li {
 #toc-pages a.nav-link {
     font-weight: bold;
     font-size: 2.2rem;
+
 }
 #toc-sections a.nav-link {
-    font-size: 1.6rem;
+    font-size: 1.4rem;
 }
 a.nav-link {
     color: $text-light;
@@ -203,6 +214,7 @@ img.footer-icon {
     a#site-logo {
         font-size: 6.2rem;
         line-height: 0.9em;
+        margin-bottom: $margin-small;
         overflow: hidden;
     }
     nav#site-nav {
@@ -221,7 +233,7 @@ img.footer-icon {
         font-size: 2.2rem;
     }
     #toc-sections a.nav-link {
-        font-size: 1.6rem;
+        font-size: 1.4rem;
     }
 }
 

data/_sass/r/styling/animations.scss

@@ -33,11 +33,11 @@ main,
 }
 /*** Page-level animations - END*/
 
-a:hover,
-a:active,
-a:focus,
-abbr[title]:hover,
-abbr[title]:focus,
-abbr[title]:active {
-    transition-duration: 0.5s;
-}
+// a:hover,
+// a:active,
+// a:focus,
+// abbr[title]:hover,
+// abbr[title]:focus,
+// abbr[title]:active {
+//     transition-duration: 0.5s;
+// }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: r-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - rafalkaron
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-23 00:00:00.000000000 Z
+date: 2021-01-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -48,6 +48,11 @@ files:
 - LICENSE
 - README.md
 - _config.yml
+- _includes/blog/categories.html
+- _includes/blog/go_back_to_blog.html
+- _includes/blog/post_meta.html
+- _includes/blog/posts_list.html
+- _includes/blog/tags.html
 - _includes/content/multipage.html
 - _includes/content/singlepage.html
 - _includes/footer.html
@@ -60,10 +65,12 @@ files:
 - _includes/toc/pages.html
 - _includes/toc/sections.html
 - _layouts/default.html
+- _layouts/post.html
 - _layouts/singlepage_dev.html
 - _sass/_variables.scss
 - _sass/r.scss
 - _sass/r/content/abbr.scss
+- _sass/r/content/blog.scss
 - _sass/r/content/code.scss
 - _sass/r/content/image.scss
 - _sass/r/content/link.scss
@@ -83,6 +90,7 @@ files:
 - _sass/r/styling/selection.scss
 - _sass/r/styling/shadow.scss
 - assets/bicycle.jpg
+- assets/blog/neonbrand-Ak5c5VTch5E-unsplash.jpg
 - assets/favicon.svg
 - assets/icons/500px.svg
 - assets/icons/500px_dark.svg