jekyll-theme-horizon-flow 0.1.1

data/_posts/2023-06-01-getting-started-with-jekyll.md

@@ -0,0 +1,49 @@
+---
+layout: post
+title: "Getting Started with Jekyll"
+date: 2023-06-01
+categories: jekyll
+---
+
+# Getting Started with Jekyll
+
+Jekyll is a static site generator that allows you to create beautiful websites easily. In this post, we will explore the basics of getting started with Jekyll. We'll cover installation, folder structure, and how to create your first Jekyll site.
+
+## Installation
+
+To install Jekyll, you need to have Ruby installed on your system. Once Ruby is installed, you can install Jekyll using the following command:
+
+gem install jekyll
+
+shell
+Copy code
+
+## Folder Structure
+
+A typical Jekyll site has the following folder structure:
+
+```bash
+_config.yml
+_layouts
+default.html
+_posts
+_site
+index.md
+sql
+```
+
+## Creating Your First Site
+
+To create your first Jekyll site, navigate to the folder where you want to create the site and run the following command:
+
+jekyll new mysite
+cd mysite
+jekyll serve
+
+less
+Copy code
+
+You can then access your site at [http://localhost:4000](http://localhost:4000).
+
+That's it! You're now ready to start building your Jekyll site.
+Apologies for the inconvenience caused. Please let me know if you have any further questions or requests.

data/_posts/2023-06-03-customizing-your-jekyll-site.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: "Customizing Your Jekyll Site"
+date: 2023-06-03
+---
+
+Jekyll provides several customization options to make your site unique. In this post, we'll explore some of the ways you can customize your Jekyll site.
+
+## Changing the Theme
+
+Jekyll has a wide range of themes available that you can use to change the appearance of your site. To change the theme, update the `theme` setting in the `_config.yml` file to the desired theme name.
+
+## Adding CSS
+
+You can customize the styles of your Jekyll site by adding CSS. Create a new file called `styles.css` in the root directory of your site and link it in the head section of your layout file.
+
+## Customizing Layouts
+
+Jekyll uses layouts to define the structure of your site's pages. You can create your own custom layouts or modify existing ones to match your design requirements. Layout files are stored in the `_layouts` directory.
+
+## Using Plugins
+
+Jekyll supports plugins that extend its functionality. You can find a variety of Jekyll plugins on GitHub that can add features like SEO optimization, sitemaps, and more.
+
+With these customization options, you can create a Jekyll site that reflects your personal style and requirements.

data/_posts/2023-06-06-welcome-to-jekyll.md

@@ -0,0 +1,29 @@
+---
+layout: post
+title:  "Welcome to Jekyll!"
+date:   2023-06-06 13:13:20 +0200
+categories: jekyll update
+---
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+Jekyll requires blog post files to be named according to the following format:
+
+`YEAR-MONTH-DAY-title.MARKUP`
+
+Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.
+
+Jekyll also offers powerful support for code snippets:
+
+{% highlight ruby %}
+def print_hi(name)
+  puts "Hi, #{name}"
+end
+print_hi('Tom')
+#=> prints 'Hi, Tom' to STDOUT.
+{% endhighlight %}
+
+Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
+
+[jekyll-docs]: https://jekyllrb.com/docs/home
+[jekyll-gh]:   https://github.com/jekyll/jekyll
+[jekyll-talk]: https://talk.jekyllrb.com/

data/_posts/2023-07-13-title-for-champions.md

@@ -0,0 +1,284 @@
+---
+layout: post
+title: "Title for Champions"
+date: 2023-07-13
+tags: champion test
+subtitle: "You're going to love this."
+categories: rest
+last_modified_at: 10.09.202
+---
+# Code Block tests
+
+**Code Block with** \`\`\`
+
+```bash
+vi 2023-06-12-lorem-ipsum.md
+mkdir somerandomdir
+ping 8.8.8.8
+curl www.google.de
+```
+
+```python
+def factorial(n):
+    if n == 0:
+        return 1 #just to take at how a really long comment looks like in the code block
+    else:
+        return n * factorial(n-1)
+        
+result = factorial(5)
+print("Factorial of 5:", result)
+```
+
+**Code Block with** \{\% highlight \%\}
+
+{% highlight bash %}
+vi 2023-06-12-lorem-ipsum.md
+mkdir somerandomdir
+ping 8.8.8.8
+curl www.google.de
+{% endhighlight %}
+
+{% highlight python  %}
+def factorial(n):
+    if n == 0:
+        return 1 #just to take at how a really long comment looks like in the code block
+    else:
+        return n * factorial(n-1)
+        
+result = factorial(5)
+print("Factorial of 5:", result)
+{% endhighlight %}
+
+**Code Block with** \~\~\~
+
+~~~ bash
+vi 2023-06-12-lorem-ipsum.md
+mkdir somerandomdir
+ping 8.8.8.8
+curl www.google.de
+~~~
+
+~~~ python
+def factorial(n):
+    if n == 0:
+        return 1 #just to take at how a really long comment looks like in the code block
+    else:
+        return n * factorial(n-1)
+        
+result = factorial(5)
+print("Factorial of 5:", result)
+~~~
+
+**Big Fat Text**
+
+_Underscored Text_
+
+~~destroyed~~
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+- List
+- with
+- some
+    + text
+    + and
+    + a
+    + second
+        * level
+- the
+- end
+
+1. list
+1. with
+    * unordered sub bullet
+    * unordered sub bullet2
+1. numbers
+    1. second
+    1. level
+        1. third level
+    1. and more
+1. Next one
+    - unordered in 
+    - an ordered
+    - list
+1. last
+
+# Liquid Test
+
+test ob ich liquid in markdown verwenden kann
+
+paginator.posts:
+
+{% for post in paginator.posts %}
+<a href="{{ post.url }}"><h3>{{ post.title }}</h3></a>
+{% endfor %}
+
+site.description:
+
+
+page.title:
+{{ page.title }}
+
+
+page.lang: {{ page.lang }}
+wenn page.lang=de:
+
+{% if page.lang == "de" %}
+nur ausgeben wenn lang=de
+{% endif %}
+
+{% if page.lang == "en" %} 
+nur ausgeben wenn lang=en
+{% endif %}
+
+
+site.lang: {{ site.lang }}
+wenn site.lang=en:
+
+{% if site.lang == "de" %}
+nur ausgeben wenn lang=de
+{% endif %}
+
+{% if site.lang == "en" %} 
+nur ausgeben wenn lang=en
+{% endif %}
+
+
+# Links
+
+[Link for Picture](#Some-Pictures-embedded)
+
+[google](www.google.de)
+
+- [Categories](/categories.html)
+- [Archive](/archive.html)
+
+# Header for contenders
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
+
+**Code Block with** \`\`\`bash
+
+```bash
+vi 2023-06-12-lorem-ipsum.md
+mkdir somerandomdir
+ping 8.8.8.8
+curl www.google.de
+```
+
+
+**Code Block with** \{\% highlight bash \%\}
+
+{% highlight bash %}
+vi 2023-06-12-lorem-ipsum.md
+mkdir somerandomdir
+ping 8.8.8.8
+curl www.google.de
+{% endhighlight %}
+
+
+## Subheader for the looser
+
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
+
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   
+
+At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.   
+
+## Another Subheader
+
+Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.   
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
+
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
+
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   
+
+
+### Subsubheader 1
+
+nothing to see
+
+#### Sub-Sub-Sub-Header
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
+
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
+
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
+
+
+##### Sub-Sub-Sub-Sub-Header
+
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
+
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
+
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
+
+##### Sub-Sub-Sub-Sub-Header 2
+
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
+
+###### 6er-Header
+
+###### 6er-Header 2
+
+###### 6er-Header 3
+
+###### Sub-Sub-Sub-Sub-Sub-Header 4
+
+
+##### Sub-Sub-Sub-Sub-Header 3
+
+kein content
+
+##### Sub-Sub-Sub-Sub-Header 4
+
+- this
+    + is
+        * sparta!!!!!!!!
+            - with
+                + a
+                    * `mini inline`
+                        - codeblock
+
+### Subsubheader 2
+
+### Subsubheader 3
+
+# LONG AS TITLE FOR TESTING PURPOSES TO SEE WHAT WILL HAPPEN WITH a more or less real sentence for everyone crazy it gets even longer it never stops where should this go?????????????????????????????
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
+
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
+
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
+
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
+
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
+
+
+# Some Pictures embedded
+![image](https://static.nationalgeographic.de/files/styles/image_3200/public/01_volcano_earthquake_gettyimages-532502396.jpg?w=1600&h=2416)
+
+At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.   
+
+Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.   
+
+Letzter Abschlusssatz.
+
+
+# Update test

data/_sass/default/_base.scss

@@ -0,0 +1,31 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
+
+* {
+  font-family: 'Open Sans', sans-serif;
+}
+
+html {
+  height: 100%;
+  //overflow-x: hidden;
+}
+
+body {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: $background-color;
+  overflow-x: hidden;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+main {
+  max-width: 70%;
+  margin: 5rem auto;
+}

data/_sass/default/_footer.scss

@@ -0,0 +1,162 @@
+footer {
+  width: 100%;
+  color: $background-color;
+  font-size: 0.8em;
+  margin-top: auto;
+}
+
+footer ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+footer ul li {
+  padding-bottom: 0.2em;
+}
+
+footer a {
+  @include links($background-color);
+  padding: 0;
+}
+
+footer a:hover {
+  @include hover();
+}
+
+footer h1, footer h2, footer h3 {
+  color: $primary-color;
+  font-size: 1em;
+}
+
+footer .social-icons {
+  background-color: $primary-color;
+  height: max-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+footer .social-icons > * {
+  color: $background-color;
+  margin: 0 0.5em; 
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+}
+
+
+footer .social-icons .divider::before {
+  content: "|";
+  font-size: 0.8em;
+}
+
+/* ---------------------------------------------------- */
+/* ---------------------------------------------------- */
+/* footer sidebar */
+/* ---------------------------------------------------- */
+/* ---------------------------------------------------- */
+
+
+footer aside {
+  background-color: $secondary-color;
+  display: flex;
+  padding: 1em;
+  max-height: max-content;
+}
+
+
+/* one item */
+footer aside section:first-child:nth-last-child(1) {
+  padding: 0 0 0 1em;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+/* two items */
+footer aside section:first-child:nth-last-child(2),
+footer aside section:first-child:nth-last-child(2) ~ section {
+  padding: 0 0 0 1em;
+  flex-grow: 1;
+  max-width: 50%;
+}
+
+/* three items */
+footer aside section:first-child:nth-last-child(3),
+footer aside section:first-child:nth-last-child(3) ~ section {
+  padding: 0 0 0 1em;
+  flex-grow: 1;
+  max-width: 33%;
+}
+
+/* four items */
+footer aside section:first-child:nth-last-child(4),
+footer aside section:first-child:nth-last-child(4) ~ section {
+  padding: 0 0 0 1em;
+  flex-grow: 1;
+  max-width: 25%;
+}
+
+/* five items */
+footer aside section:first-child:nth-last-child(5),
+footer aside section:first-child:nth-last-child(5) ~ section {
+  padding: 0 0 0 1em;
+  flex-grow: 1;
+  max-width: 20%;
+}
+
+footer aside section:first-child {
+  padding: 0;
+}
+
+
+
+.footer_categories, .footer_tags {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    columns: 5;
+  }
+
+  a {
+    text-decoration: none;
+    color: $background-color;
+    letter-spacing: -1px;
+    width: 100%;
+    cursor: pointer;
+  }
+}
+
+.footer_categories1, .footer_tags1, .footer_tags, .footer_recentposts1  {
+
+}
+
+.footer_recentposts {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    columns: 2;
+  }
+
+  a {
+    text-decoration: none;
+    color: $background-color;
+    letter-spacing: -1px;
+    width: 100%;
+    cursor: pointer;
+  }
+}
+
+.footer_sitedescription, .footer_extracontent {
+    a {
+    text-decoration: none;
+    color: $background-color;
+    letter-spacing: -1px;
+    width: 100%;
+    cursor: pointer;
+  }
+}

data/_sass/default/_header.scss

@@ -0,0 +1,62 @@
+header {
+  position: fixed;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  font-size: 1.1em;
+  z-index: 100;
+}
+
+
+header nav {
+	background-color: $primary-color;
+	width: fit-content;
+	margin: auto;
+	padding-left: 10px;
+	padding-right: 10px;
+	padding-top: 0;
+	padding-bottom: 10px;
+	border-radius: 0 0 0.5em 0.5em;
+	transform: translateY(-1px);
+}
+
+nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  min-width: fit-content;
+}
+
+nav li {
+	display: inline-block;
+}
+
+nav li a {
+	@include links($background-color);
+	text-transform: uppercase;
+	letter-spacing: -1.5px;
+	font-size: 0.8em;
+}
+
+/* Active Link */
+.navi_current {
+	color: $lighter;
+	font-weight: bold;
+}
+
+/* Line above the Navi */
+#header_hr {
+	border-bottom: 0;
+	border-top: 0.5em solid $primary-color;
+	border-left: 0;
+	border-right: 0;
+	width: 100%;
+	position: sticky;
+	top: 0;
+	left: 0;
+	margin: 0;
+	padding: 0;
+}