jekyll-theme-tallneck 0.1.2 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b78e9f41c1b51565bbcf1fa916d808cde5f741f0bfbdf8aa5d9f2b0174409281
-  data.tar.gz: ccbe02eb67a7805414a1338e19710d4f48e669abc95c7198493d70e2c6845a3d
+  metadata.gz: 7317de0c2a5e949b4c4c37c61d61bebe6a992d07a840e3d194ad4d3bc390adf1
+  data.tar.gz: 1dc31c68accf10ef439cd94081ed4a08ff0077af622d7999a9f4d139aebfbad7
 SHA512:
-  metadata.gz: 6f9ee31d9fdba32b64ae4d2479a6c31b37f8d34faffd082f3f8384daa4f1de4e70cb97221df5ca047cb6f70da0fe4550f627f3c759f53397618ce80c887caa96
-  data.tar.gz: 9b6699bdb22d22f387619c24f90bb2f6afa6ed6ce8deffbce7faaf183bcf8e132b1a1c05d42b6370e5c5a94d3af588edf685176a4823f1aace3741f7293dc744
+  metadata.gz: 11b2f9e1aa44267b7a7b90890c362b78e1c30da689bc75e7c1f7e6f224fcb1e162a86d685e74795b86da3842d60104e3f8e5198f97d51ea69eaea52418b609b4
+  data.tar.gz: 7f3a423c2d3a87460377ebce809718717d8fc8bd4b10660e6c109e4d0e8c9dfa5f26f96d15065a725b708f387223f1b6ace9734083a9a56d1e07540be9406989

data/README.md

@@ -1,6 +1,8 @@
 # Tallneck
 
-Tallneck is a Jeckyll theme for my personal blog. The name was inspired from one of the machines on my favorite game, Horizon Zero Dawn.
+Tallneck is a Jekyll theme for blogs. It is a simple and clean theme with a focus on the responsiveness. Also js free.
+
+Preview: [https://jekyll-theme-tallneck.pages.dev/](https://jekyll-theme-tallneck.pages.dev/)
 
 ## Installation
 
@@ -18,46 +20,52 @@ theme: jekyll-theme-tallneck
 
 And then execute:
 
-    $ bundle
+```bash
+bundle
+```
 
 Or install it yourself as:
 
-    $ gem install jekyll-theme-tallneck
-
+```bash
+gem install jekyll-theme-tallneck
+```
 
 ## Usage
 
-### Customization
+### Initial setup
 
-Create a folder named `assets` in your Jekyll site's root directory.
-Then create a folder named `images` inside the `assets` folder and put a replacement for the default banner image named `banner.png` (1200x630) inside it.
+To set up your Jekyll site with the Tallneck theme, follow these steps:
 
-After that, replace the `favicon.ico` and `favicon.svg` file in the root directory with your own favicon.
+1. Install the theme as described above.
+2. Add the following to your site's `_config.yml` to activate the theme:
 
-Then, configure the various plugins in `_config.yml` to your liking. The plugins are:
-
-- [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag)
-- [jekyll-toc](https://github.com/toshimaru/jekyll-toc)
-- [jekyll-sitemap](https://github.com/jekyll/jekyll-sitemap)
-
-### Main pages
+```yaml
+plugins:
+  - jekyll-remote-theme
+  - jekyll-feed
+  - jekyll-seo-tag
+  - jekyll-sitemap
 
-Create at the root of your Jekyll site the following pages:
+theme: jekyll-theme-tallneck
+```
 
-- `about.md`, which will be the About page and set the permalink to `/about`
-- `contact.md`, which will be the Contact page and set the permalink to `/contact`
-- `cookie.md`, which will be the Cookie Policy page and set the permalink to `/cookie`
-- `privacy.md`, which will be the Privacy Policy page and set the permalink to `/privacy`
-- `terms.md`, which will be the Terms of Service page and set the permalink to `/terms`
+3. Create the following files at the root of your Jekyll site and edit them like the ones in this repo:
+    - [index.md](index.md)
+    - [feed.md](feed.md)
+    - [404.md](404.md)
+    - [about.md](about.md)
+    - [cookie.md](cookie.md)
+    - [privacy.md](privacy.md)
+    - [terms.md](terms.md)
 
-Also create the file `404.html` with the following content:
+4. Create the `assets/image` folder and put a replacement for the following images:
+    - `favicon.ico` and `favicon.svg` that will be used as the favicon.
+    - `logo.svg` that will be used as the home button.
+    - `pwa_icon.svg`, `pwa_icon_x512.png`, `pwa_icon_x128.png`, `pwa_icon_x96.png` that will be used as the PWA icon. ([https://maskable.app/editor](https://maskable.app/editor) can be used to create the maskable icon)
+5. In the `assets` folder, create the sitemanifest.json file and edit it to your liking.
+6. [Optional] Customize the theme by creating the `_sass` folder and editing `custom_variables.scss` and `custom_styles.scss` files.
+7. Edit the `_config.yml` file to your liking (you can use the [config](/_config.yml) file in this repo as a template).
 
-```yaml
----
-layout: 404
-sitemap: false
----
-```
 
 ### Writing posts
 
@@ -65,13 +73,11 @@ To create a new post, add a markdown file in the `_posts` directory and add at t
 
 ```yaml
 ---
-layout: post
+layout: post   # Optional, post is default
 title:  "First post!"
-subtitle: "Written in Go."
+subtitle: "Written in Go."  # Optional
 date:   2023-01-16 17:40:28 +0100
-image:
-    path: /assets/images/golang.jpg
-    alt: golang logo
+image: /assets/image/golang.jpg  # Optional
 ---
 ```
 
@@ -82,8 +88,11 @@ To set up your environment to develop this theme, run `bundle install`.
 Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
 
 When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
-To add a custom directory to your theme-gem, please edit the regexp in `jotone_theme.gemspec` accordingly.
 
 ## License
 
 The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Credits
+
+Some of the css code was inspired from the [Minima Theme](https://github.com/jekyll/minima). [Minima license](https://github.com/jekyll/minima/blob/master/LICENSE.txt).

data/_includes/footer.html

@@ -1,24 +1,11 @@
-<footer class="container no_print">
-    <hr>
-    <div>
-        <nav>
-            <ul>
-                <li>
-                    <a href="{{ '/privacy'  | relative_url }}" rel="noopener noreferrer">Privacy</a>
-                </li>
-                <li>
-                    <a href="{{ '/cookie' | relative_url }}" rel="noopener noreferrer">Cookie</a>
-                </li>
-                <li>
-                    <a href="{{ '/terms' | relative_url }}" rel="noopener noreferrer">Terms</a>
-                </li>
-                <li>
-                    <a href="{{ '/about' | relative_url }}" rel="noopener noreferrer">About</a>
-                </li>
-                <li>
-                    <a href="{{ '/contacts' | relative_url }}" rel="noopener noreferrer">Contacts</a>
-                </li>
-            </ul>
-        </nav>
-    </div>
+<footer class="page-footer">
+    <hr class="footer-hr">
+    <nav class="footer-nav">
+        <a href="{{ '/privacy'  | relative_url }}" rel="noopener noreferrer">Privacy</a>
+        <a href="{{ '/cookie' | relative_url }}" rel="noopener noreferrer">Cookie</a>
+        <a href="{{ '/terms' | relative_url }}" rel="noopener noreferrer">Terms</a>
+    </nav>
+    {% if include.text %}
+    <p class="footer-text">{{include.text}}</p>
+    {% endif %}
 </footer>

data/_includes/head.html

@@ -1,16 +1,49 @@
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f0f0f0">
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#252525">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta charset="UTF-8">
+
+    <!-- Design meta -->
+    <meta content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0" name="viewport">
+    <meta content="#f0f0f0" media="(prefers-color-scheme: light)" name="theme-color">
+    <meta content="#252525" media="(prefers-color-scheme: dark)" name="theme-color">
+    <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
+
+    {% if page.private %}
+        <meta name="robots" content="noindex, nofollow">
+    {% else %}
+        {% if page.keywords %}
+        <meta name="keywords" content="{{ page.keywords }}">
+        {% else if site.keywords %}
+        <meta name="keywords" content="{{ site.keywords }}">
+        {% endif %}
+
+        {% seo %}
+    {% endif %}
+
+    <!-- Preload -->
+    <link rel="preload" as="font" href="{{ "/assets/font/opensans/opensans.woff2" | relative_url }}" type="font/woff2" crossOrigin="anonymous">
+    <link rel="preload" as="font" href="{{ "/assets/font/opensans/opensans-bold.woff2" | relative_url }}" type="font/woff2" crossOrigin="anonymous">
+    <link rel="preload" as="font" href="{{ "/assets/font/opensans/opensans-italic.woff2" | relative_url }}" type="font/woff2" crossOrigin="anonymous">
+    <link rel="preload" as="style" href="{{ "/assets/css/style.css" | relative_url }}">
+    <!--<link rel="preload" as="style" href="{{ "/assets/css/code.css" | relative_url }}">-->
     
-    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
+    <!-- CSS stylesheets -->
+    <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}" blocking="render" fetchpriority="high">
+    <link rel="stylesheet" href="{{ "/assets/css/code.css" | relative_url }}" fetchpriority="low">
+    <link rel="stylesheet" href="{{ "/assets/css/print.css" | relative_url }}" media="print" fetchpriority="low">
     
-    {% seo %}
-
-    <link rel="icon" href="{{ "{{ site.favicon_ico | relative_url }}" | relative_url }}" sizes="any">
-    <link rel="icon" href="{{ "{{ site.favicon | relative_url }}" | relative_url }}" type="image/svg+xml">
+    <!-- Favicon -->
+    <link rel="icon" href="{{ /assets/image/favicon.svg | relative_url }}" type="image/svg+xml">
+    <link rel="icon" href="{{ /assets/image/favicon.ico | relative_url }}" sizes="any">
+    
+    <!-- PWA -->
+    <meta name="theme-color" content="#282828"/>
+    <meta content="yes" name="apple-mobile-web-app-capable">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="manifest" href="/assets/sitemanifest.json">
+    <link rel="apple-touch-icon" sizes="512x512" href="/assets/image/pwa_icon_x512.png">
 
-    <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
+    <!-- Analytics -->
+    {% if site.cloudflare %}
+    <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "{{ site.cloudflare }}"}'></script>
+    {% endif %}
 </head>

data/_includes/header.html

@@ -1,12 +1,14 @@
-<header class="no_print">
-    <a href="{{ '/' | relative_url }}" class="header__logo" aria-label="Home">
-        <img src="{{ site.favicon | relative_url }}" width="32" height="32" alt="Website logo" class=".header__logo__img">
-    </a>
-    <nav>
-        <ul>
-            <li>
-                <a href="{{ '/feed' | relative_url }}">All Posts</a>
-            </li>
-        </ul>
-    </nav>
+<header class="page-header">
+    <div class="page-header--container">
+        <div class="header-logo">
+            <a aria-label="Home" href="{{ '/' | relative_url }}">
+                <img alt="Website logo" src="{{ '/assets/image/logo.svg' | relative_url }}" loading="eager" width="37px" height="37px">
+            </a>
+        </div>
+
+        <nav class="header-nav">
+            <a href="{{ '/feed' | relative_url }}">Posts</a>
+            <a href="{{ '/about' | relative_url }}">About me</a>
+        </nav>
+    </div>
 </header>

data/_includes/post-card.html

@@ -0,0 +1,18 @@
+<article class="post-card" id="{{ include.post.id }}">
+<a href="{{ include.post.url | relative_url }}" class="post-card--link post-card--flex">
+    <div class="post-card--image">
+        <img src="{{ include.post.image | relative_url }}" alt="{{ include.post.title }}" aria-hidden="true">
+    </div>
+    <div class="post-card--content">
+        <h2 class="post-card--title">{{ include.post.title }}</h2>
+        {% if include.post.subtitle %}
+        <p class="post-card--subtitle">{{ include.post.subtitle }}</p>
+        {% else %}
+        <p class="post-card--subtitle">
+            {{ include.post.excerpt | strip_html | truncatewords: 50 }}
+        </p>
+        {% endif %}
+        <p class="post-card--date">{{ include.post.date | date: "%B %-d, %Y" }}</p>
+    </div>
+</a>
+</article>

data/_includes/post-preview.html

@@ -0,0 +1,15 @@
+<article class="post-preview" id="{{ include.post.id }}">
+    <a href="{{ include.post.url | relative_url }}" class="post-preview--link">
+        <div class="post-preview--content">
+            <h2 class="post-preview--title">{{ include.post.title }}</h2>
+            {% if include.post.subtitle %}
+            <p class="post-preview--subtitle">{{ include.post.subtitle }}</p>
+            {% else %}
+            <p class="post-preview--subtitle">
+                {{ include.post.excerpt | strip_html | truncatewords: 50 }}
+            </p>
+            {% endif %}
+            <p class="post-preview--date">{{ include.post.date | date: "%B %-d, %Y" }}</p>
+        </div>
+    </a>
+</article>

data/_layouts/404.html

@@ -1,6 +1,16 @@
 ---
-layout: page
+layout: base
 title: 404
 ---
 
-Page not found.
+<h1>Page not found</h1>
+
+<svg height="512" style="max-width: 100%; height: auto;" viewBox="0 0 512 512" width="512"
+     xmlns="http://www.w3.org/2000/svg">
+    <path
+            d="M321.96677 122.23294h29.647985v148.76007H321.96677zM214.02321 65.440117h29.647985v148.76007H214.02321zM108.04003 281.38394l-9.027921 30.95923L424.58335 407.2819l9.02792-30.95923z"
+            style="fill:var(--svg-fill);stroke-width:.27;"
+            transform="translate(-10.31 19.64)"
+    />
+</svg>
+  

data/_layouts/about.html

@@ -0,0 +1,109 @@
+---
+layout: base
+---
+<div class="content-width">
+    {% if page.title %}
+    <h1>{{ page.title }}</h1>
+    {% else %}
+    <h1>About me</h1>
+    {% endif %}
+
+    {% if site.social %}
+    <nav class="about-social no_print">
+        {% if site.github_url %}
+        <a href="{{ site.github_url }}" title="GitHub" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/github.svg#github" | relative_url }}" alt="GitHub"></use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.gitlab_url %}
+        <a href="{{ site.gitlab_url }}" title="GitLab" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/gitlab.svg#gitlab" | relative_url }}" alt="GitLab"></use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.discord_url %}
+        <a href="{{ site.discord_url }}" title="Discord" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/discord.svg#discord" | relative_url }}" alt="Discord"></use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.reddit_url %}
+        <a href="{{ site.reddit_url }}" title="Reddit" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/reddit.svg#reddit" | relative_url }}" alt="Reddit"></use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.instagram_url %}
+        <a href="{{ site.instagram_url }}" title="Instagram" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/instagram.svg#instagram" | relative_url }}" alt="Instagram">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.linkedin_url %}
+        <a href="{{ site.linkedin_url }}" title="LinkedIn" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/linkedin.svg#linkedin" | relative_url }}" alt="LinkedIn">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.threads_url %}
+        <a href="{{ site.threads_url }}" title="Threads" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/threads.svg#threads" | relative_url }}" alt="Threads">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.x_url %}
+        <a href="{{ site.x_url }}" title="X" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/x.svg#x" | relative_url }}" alt="X">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.telegram_url %}
+        <a href="{{ site.telegram_url }}" title="Telegram" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/telegram.svg#telegram" | relative_url }}" alt="Telegram">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.email %}
+        <a href="mailto:{{ site.email }}" title="Email" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/mail.svg#mail" | relative_url }}" alt="Email">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
+    </nav>
+    {% endif %}
+
+    <div class="about">
+        <div class="about--img">
+            <img src="{{ site.about_image | relative_url }}" alt="About me" width="500px" height="500px">
+        </div>
+        <div class="about--content">
+            {{ content }}
+        </div>
+    </div>
+</div>

data/_layouts/base.html

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="{{ page.language | default: site.language | default: 'en' }}">
-    {% include head.html %}
-    <body>
-        {% include header.html %}
+{% include head.html %}
+<body>
+{% include header.html %}
 
-        {{ content }}
+<main class="page-main">
+    {{ content }}
+</main>
 
-        {% include footer.html %}
-    </body>
-    
+{% include footer.html text=site.copyright %}
+</body>
 </html>

data/_layouts/feed.html

@@ -1,9 +1,16 @@
 ---
-layout: page
+layout: base
 ---
 
-<div class="post-preview">
-    {% for post in site.posts %}
-      {% include article-preview.html author=post.author image=post.image.path alt=post.image.alt title=post.title subtitle=post.subtitle date=post.date tags=post.tags url=post.url %}
-    {% endfor %}
+<h1>{{ page.title }}</h1>
+
+<div class="content-width">
+    <div class="post-preview-container">
+        {% for post in site.posts %}
+            {% include post-preview.html post=post %}
+            {% if forloop.last == false %}
+                <hr class="post-preview-hr">
+            {% endif %}
+        {% endfor %}
+    </div>
 </div>

data/_layouts/home.html

@@ -1,11 +1,25 @@
 ---
-layout: page
+layout: base
 ---
 
+<h1>{{ page.title }}</h1>
+
+<div>
 {{ content }}
+</div>
+
+<div>
+    <h2><a href="{{ '/feed' | relative_url }}" class="hidden-link">Latest Posts</a></h2>
+    <div class="post-card-container">
+        {% for post in site.posts limit: 4 %}
+            {% include post-card.html post=post %}
+        {% endfor %}
+    </div>
+
+    <div style="height: fit-content; align-items: center; text-align: center; margin: 3rem auto 0rem;">
+        <a href="{{ '/feed' | relative_url }}" class="hidden-link hover-underline center">
+            <span>Read all posts →</span>
+        </a>
+    </div>
+</div>
 
-<div class="post-preview" style="margin-top: 3rem;">
-  {% for post in site.posts limit: 5 %}
-    {% include article-preview.html author=post.author image=post.image.path alt=post.image.alt title=post.title subtitle=post.subtitle tags=post.tags url=post.url %}
-  {% endfor %}
-</div>

data/_layouts/post.html

@@ -2,26 +2,23 @@
 layout: base
 ---
 
-<div id="content" class="container content" itemscope itemtype="http://schema.org/BlogPosting">
-    <h1 itemprop="name headline">{{ page.title }}</h1>
-    <p class="content__info">
-        <time datetime="{{ date | date_to_xmlschema }}" itemprop="datePublished">
-            {{ page.date | date: "%-d %B %Y" }}
-        </time>
-        {% if page.author %}
-        &nbsp;&nbsp;|&nbsp;&nbsp;
-        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
-            <span itemprop="name">{{ page.author }}</span>
-        </span>
+<div class="content-width">
+    <div class="post-header">
+        <h1 class="post-header--title">{{ page.title }}</h1>
+        {% if page.no_meta %}
+        {% else %}
+        <p class="post-header--meta">
+            <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+                {{ page.date | date: "%-d %B %Y" }}
+            </time>
+            {% if page.keywords %}
+                | <span class="post-header--keywords">{{ page.keywords }}</span>
+            {% endif %}
+        </p>
         {% endif %}
-        <br>
-        This work is licensed under <a href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
-    </p>
-    
-    <div id="toc">
-        {% toc %}
     </div>
-    <div itemprop="articleBody">
+
+    <div class="post-content">
         {{ content }}
     </div>
 </div>

data/_sass/custom_layout.scss

@@ -0,0 +1 @@
+// Copy this file to your _sass folder and add your own customizations to override the default settings

data/_sass/custom_variables.scss

@@ -0,0 +1 @@
+// Copy this file to your _sass folder and add your own variables to override the default settings