jekyll-theme-bluegreen 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 325ae45b2893b506e7018225405542c352291ed0e5ce1256d2fefc4b8469aed0
+  data.tar.gz: 92b5729b4720f7904e6a76567c6d297faad0299fcc295498846dd4aa2f67eab7
+SHA512:
+  metadata.gz: ae135c532e0d8e812e6fc1c412660283c3ed63cc461996c31bfb8709d935c54da1187750a3dc1e3766a4ce99e83b442df009aacc5dea625b058440b7b534b175
+  data.tar.gz: d829ec45a8a182bee8e5da3a7a6126cc0d09bc3588692b58f2d9af44ab4a16898b8f678d27ba114cc8e742ac80e5be9930fa0e7d2b2f1240ac19915f6c41fbec

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Björn Kawecki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,34 @@
+# Jekyll Theme Blue/Green 
+
+## Summary
+
+Starting from Jekyll's minima theme, I created a simple design according to my taste with pages for a blog, about me and projects.
+
+## Features
+
+- Tailwind v3
+- Simple layout
+- Light/dark theme toggle
+- Blog page with pagination
+- Projects page with pagination
+- Other pages: about, 404
+- Several layouts
+
+## Install
+
+1. Install `package.json` with your preferred node package manager
+2. Make sure that you installed ruby and bundler
+3. Use the scripts in `package.json` to build start and watch your development application
+
+## Customize
+
+- Paste your preffered woff2 font file in `/assets/fonts/` and change the refernce in `/_includes/head.html`
+- Edit your Tailwind color palettes in `tailwind.config.js`
+- Personalize the values for name, email, description, etc. in `_config.yml`
+
+## Preview
+
+Live-Preview: [bjoernkawecki.de](https://bjoernkawecki.de/)
+
+![preview-blog-blue](/assets/preview/blue.png) 
+![preview-blog-green](/assets/preview/green.png) 

data/_config.yml

@@ -0,0 +1,81 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+#
+# If you need help with YAML syntax, here are some quick references for you:
+# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
+# https://learnxinyminutes.com/docs/yaml/
+#
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+
+theme_name: bluegreen
+author: Björn Kawecki
+
+title: Tilly Bleen | Blog & Projects
+subtitle: Full Stack Cat
+name: Tilly Bleen
+
+email: tbleen@catmail.org
+description: Blog, Projects, About me
+url: "https://example.com" # the base hostname & protocol for your site, e.g. http://example.com
+baseurl: "" # the subpath of your site, e.g. /blog
+twitter_username:
+github_username: tbleen
+linkedin_username: tbleen
+
+plugins:
+  - jekyll-feed
+  - jekyll-postcss
+  - jekyll-paginate
+
+postcss:
+  cache: false
+
+paginate: 5
+paginate_path: "/page:num/"
+
+collections:
+  projects:
+    output: true   # Falls du möchtest, dass jedes Projekt eine eigene Seite hat
+    permalink: /projects/:path/
+
+sass:
+  load_paths:
+    - _sass
+    - node_modules
+
+include:
+  - node_modules/tailwindcss
+  - _pages
+
+kramdown:
+  smart_quotes: sbquo,rsquo,bdquo,rdquo
+# Exclude from processing.
+# The following items will not be processed, by default.
+# Any item listed under the `exclude:` key here will be automatically added to
+# the internal "default list".
+#
+# Excluded items can be processed by explicitly listing the directories or
+# their entries' file path in the `include:` list.
+#
+# exclude:
+#   - .sass-cache/
+#   - .jekyll-cache/
+#   - gemfiles/
+#   - Gemfile
+#   - Gemfile.lock
+#   - node_modules/
+#   - vendor/bundle/
+#   - vendor/cache/
+#   - vendor/gems/
+#   - vendor/ruby/

data/_includes/aside.html

@@ -0,0 +1,20 @@
+<aside class="flex-col items-center mb-3 md:mb-0 h-fit md:top-10 md:sticky">
+    <div class="flex justify-center mb-5">
+        <img src="/assets/img/your-profil-picture.webp" class="object-cover h-48 rounded-full md:h-72">
+    </div>
+    <div class="flex flex-col items-center mb-2 space-y-0.5">
+        <div class="px-6 text-2xl font-medium md:px-0">
+            <a href="/">{{ site.name }}</a>
+        </div>
+        <div>{{ site.subtitle}}</div>
+    </div>
+    <div class="flex justify-center mb-6 space-x-2">
+        <a href="/"
+            class="{% if page.url == '/' or page.url contains '/page' %}font-bold {% endif %}text-blue2-600 dark:text-emerald-500 hover:underline">Weblog</a><span>&middot;</span>
+        <a href="/projects/"
+            class="{% if page.url == '/projects/' %}font-bold {% endif %}text-blue2-600 hover:underline dark:text-emerald-500">Projects</a>
+        <span>&middot;</span>
+        <a href="/about/" class="{% if page.url == '/about/' %}font-bold {% endif %}text-blue2-600 hover:underline dark:text-emerald-500">About me</a>
+    </div>
+    {% include footer.html %}
+</aside>

data/_includes/footer.html

@@ -0,0 +1,33 @@
+<footer class="flex flex-col items-center my-10 space-y-3 md:mb-20">
+  <div class="flex justify-center space-x-3 w-1/2">
+    <a target="_blank" rel="noopener noreferrer" href="#">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+        class="w-7 h-7 fill-gray-700 hover:fill-gray-500 dark:fill-gray-200 dark:hover:fill-gray-50">
+        <title>github</title>
+        <path
+          d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
+      </svg>
+    </a>
+    <a href="#" target="_blank" rel="noopener noreferrer">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+        class="w-7 h-7 fill-gray-700 hover:fill-gray-500 dark:fill-gray-200 dark:hover:fill-gray-50">
+        <title>linkedin</title>
+        <path
+          d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />
+      </svg>
+    </a>
+    <a href="mailto:{{ site.email }}">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+        class="w-7 h-7 fill-gray-700 hover:fill-gray-500 dark:fill-gray-200 dark:hover:fill-gray-50">
+        <title>email-outline</title>
+        <path
+          d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" />
+      </svg>
+    </a>
+  </div>
+  <div class="text-sm dark:text-gray-300">Powered by Jekyll &amp; GitHub Pages</div>
+  <div id="toggle-color-mode" class="cursor-pointer">
+
+  </div>
+</footer>
+<script src="/assets/js/index.js"></script>

data/_includes/head.html

@@ -0,0 +1,44 @@
+<head>
+  <link rel="stylesheet" href="/assets/css/main.css">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- Begin Jekyll SEO tag v2.8.0 -->
+  <title>{% if page.title %}{{ page.title }} – {{ site.title }}
+    {% else %}{{ site.title }}{% endif %}</title>
+  <meta name="generator" content="Jekyll v4.3.3" />
+  <meta property="og:title" content="{{ site.title }}" />
+  <meta property="og:locale" content="de_DE" />
+  <meta name="description" content="{{ site.description }}" />
+  <meta property="og:description" content="{{ site.description }}" />
+  <link rel="canonical" href="{{ site.url }}" />
+  <meta property="og:url" content="{{ site.url }}" />
+  <meta property="og:site_name" content="{{ site.title }}" />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary" />
+  <meta property="twitter:title" content="{{ site.title }}" />
+
+  <script type="application/ld+json">
+  {"@context":"https://schema.org","@type":"WebSite","description":"{{ site.description }}","headline":"{{ site.title }}","name":"{{ site.title }}","url":"{{ site.uri }}"}</script>
+  <!-- End Jekyll SEO tag -->
+  <link rel="preload" href="/assets/fonts/inter-v18-latin-regular.woff2" as="font" type="font/woff" crossorigin>
+
+  <link rel="shortcut icon" href="/assets/img/favicon.ico">
+  <link rel="icon" href="/assets/img/favicon.ico" sizes="48x48">
+  <link rel="android-chrome-192x192.png" sizes="180x180" href="/assets/img/android-chrome-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png">
+  <link rel="manifest" href="/assets/img/site.webmanifest">
+  <script type="text/javascript">
+    let root = document.getElementsByTagName('html')[0];
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      root.classList.add("dark");
+      localStorage.theme = 'dark';
+    } else {
+      root.classList.remove("dark");
+      localStorage.theme = 'light';
+    }
+  </script>
+  <link type="application/atom+xml" rel="alternate" href="{{ site.url }}feed.xml"
+    title="{{ site.title }}" />
+</head>

data/_includes/header.html

@@ -0,0 +1,3 @@
+<div class="flex justify-between mb-5">
+    <a href="{{ include.link }}">Zur Übersicht</a>
+</div>

data/_includes/pagination.html

@@ -0,0 +1,27 @@
+<div class="flex justify-center items-center mt-10 md:justify-normal">
+    {% if paginator.previous_page %}
+    <div class="flex items-center">
+        <a href="{{ paginator.previous_page_path }}"
+            class="text-sm font-medium text-white rounded bg-blue2-600 dark:bg-emerald-500 focus:ring-2 focus:ring-blue2-500 dark:focus:ring-emerald-600 focus:outline-none hover:bg-blue2-700 dark:hover:bg-emerald-400">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 fill-white hover:fill-white dark:fill-zinc-900 dark:hover:fill-zinc-900">
+                <title>Vorherige Seite</title>
+                <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
+            </svg>
+        </a>
+    </div>
+    {% endif %}
+    <div class="px-3">
+        Seite {{ paginator.page }} von {{ paginator.total_pages }}
+    </div>
+    {% if paginator.next_page %}
+    <div class="flex items-center">
+        <a href="{{ paginator.next_page_path }}"
+            class="text-sm font-medium text-white rounded bg-blue2-600 dark:bg-emerald-500 focus:ring-2 focus:ring-blue2-500 dark:focus:ring-emerald-600 focus:outline-none hover:bg-blue2-700 dark:hover:bg-emerald-400">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 fill-white hover:fill-white dark:fill-zinc-900 dark:hover:fill-zinc-900">
+                <title>Nächste Seite</title>
+                <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
+            </svg>
+        </a>
+    </div>
+    {% endif %}
+</div>

data/_includes/post_pagination.html

@@ -0,0 +1,12 @@
+<div class="flex justify-between mt-10">
+    {% if page.previous.url %}
+    <a class="basis-1/2" href="{{page.previous.url}}">Vorheriger Eintrag</a>
+    {% else %}
+    <div class="basis-1/2"></div>
+    {% endif %}
+    {% if page.next.url %}
+    <a class="basis-1/2 text-right" href="{{page.next.url}}">Nächster Eintrag</a>
+    {% else %}
+    <div class="basis-1/2"></div>
+    {% endif %}
+</div>

data/_layouts/blog.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+
+<body class="text-gray-700 bg-gray-50 dark:bg-zinc-900 dark:text-gray-200">
+    <main class="px-5 mx-auto mb-10 w-full md:px-0" aria-label="Content">
+        <div class="flex flex-col justify-center mt-10 space-x-0 md:flex-row md:space-x-28">
+            {% include aside.html %}
+            <div class="md:w-1/3" >
+                <div
+                class="w-full prose prose-p:my-0 prose-sm md:prose dark:prose-p:text-gray-200 prose-h2:text-blue2-600 dark:prose-h2:text-emerald-500 prose-a:no-underline  prose-headings:text-gray-700 prose-h2:mt-0 prose-h2:mb-0 dark:prose-headings:text-gray-200 ">
+                {{ content }}
+                </div>
+                {% include pagination.html %}
+            </div>
+        </div>
+    </main>
+</body>
+
+</html>

data/_layouts/default.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+
+<body class="text-gray-700 bg-gray-50 dark:bg-zinc-900 dark:text-gray-200">
+    <main class="px-5 mx-auto mb-10 w-full md:px-0" aria-label="Content">
+        <div class="flex flex-col justify-center mt-10 space-x-0 md:flex-row md:space-x-28">
+            {% include aside.html %}
+            <div class="md:w-1/3">
+                <div
+                    class="prose dark:prose-strong:text-gray-200 prose-sm md:prose prose-a:text-blue2-600 dark:prose-a:dark:text-emerald-500 prose-a:no-underline hover:prose-a:underline prose-headings:text-gray-700 prose-h4:font-medium prose-a:font-semibold dark:prose-headings:text-gray-200 dark:prose-ul:text-gray-200 dark:prose-p:text-gray-200 dark:prose-td:text-gray-200">
+                    {{ content }}
+                </div>
+            </div>
+        </div>
+    </main>
+</body>
+
+</html>

data/_layouts/post.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+
+<body class="text-gray-700 bg-gray-50 dark:bg-zinc-900 dark:text-gray-200">
+    <main class="px-5 mx-auto w-fit md:px-0" aria-label="Content">
+        <div class="flex flex-col justify-center mt-10 space-x-0 md:space-x-10">
+            <div
+                class="prose-a:text-blue2-600 dark:prose-a:dark:text-emerald-500 prose-a:font-semibold prose-a:underline prose-h1:mt-3 prose-headings:text-gray-700 prose-headings:font-bold prose-h4:font-medium prose-p:text-lg prose-sm md:prose prose-a:text-base prose-li:text-lg dark:prose-headings:text-gray-200 dark:prose-ul:text-gray-200 dark:prose-ol:text-gray-200 dark:prose-p:text-gray-200">
+                {% include header.html link="/" %}
+                <h4>{{ page.date | date: "%d.%m.%Y" }} | {{ page.category }}</h4>
+                <h1>{{ page.title }}</h1>
+                {{ content }}
+                {% include post_pagination.html %}
+                {% include footer.html %}
+            </div>
+        </div>
+    </main>
+</body>
+</html>

data/_layouts/project.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+
+<body class="text-gray-700 bg-gray-50 dark:bg-zinc-900 dark:text-gray-200">
+    <main class="px-5 mx-auto w-fit md:px-0" aria-label="Content">
+        <div class="flex flex-col justify-center mt-10 space-x-0 md:space-x-10">
+            <div
+                class="prose-a:text-blue2-600 dark:prose-strong:text-gray-200 dark:prose-a:dark:text-emerald-500 prose-h1:mt-3 prose-a:font-semibold prose-a:underline prose-headings:text-gray-700 prose-headings:font-bold prose-h4:font-medium prose-p:text-lg prose-sm md:prose prose-a:text-base prose-li:text-lg dark:prose-headings:text-gray-200 dark:prose-ul:text-gray-200 dark:prose-ol:text-gray-200 dark:prose-p:text-gray-200 dark:prose-table:text-gray-200">
+                {% include header.html link="/projects/" %}
+                <h4>Start: {{ page.started }} | Status: {{ page.status }}</h4>
+                <h1>{{ page.title }}</h1>
+                {{ content }}
+                {% include footer.html %}
+            </div>
+        </div>
+    </main>
+</body>
+</html>

data/_layouts/projects.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+
+<body class="text-gray-700 bg-gray-50 dark:bg-zinc-900 dark:text-gray-200">
+    <main class="px-5 mx-auto mb-10 w-full md:px-0" aria-label="Content">
+        <div class="flex flex-col justify-center mt-10 space-x-0 md:flex-row md:space-x-28">
+            {% include aside.html %}
+            <div class="md:w-1/3" >
+                <div
+                    class="w-full prose prose-p:my-0 prose-sm md:prose dark:prose-p:text-gray-200 prose-h2:text-blue2-600 dark:prose-h2:text-emerald-500 prose-a:no-underline  prose-headings:text-gray-700 prose-h2:mt-0 prose-h2:mb-2  dark:prose-headings:text-gray-200 ">
+                    {{ content }}
+                </div>
+            </div>
+        </div>
+    </main>
+</body>
+
+</html>