examples and tutorials

src/_includes/overview.njk

@@ -12,23 +12,13 @@
     {% include "partials/header.njk" %}
 
     <aside>
-
-      <a onclick="history.back()">
-        <i class="fa fa-solid fa-angle-left"></i>Zurück
-      </a>
-
-      {% if header %}
-        <div>
-          <img src="{{ header }}" alt="{{ title }}">
-        </div>
-      {% endif %}
-
-      <h1>{{ title }}</h1>
+      <h1>{{title}}</h1>
     </aside>
 
-    <div id="content">
+    <main>
       {{ content | safe }}
-    </div>
+    </main>
+
     {% include "partials/footer.njk" %}
   </body>
 </html>

src/_includes/post.njk

@@ -13,8 +13,8 @@
 
     <aside>
 
-      <a onclick="history.back()">
-        <i class="fa fa-solid fa-angle-left"></i>Zurück
+      <a class="button" onclick="history.back()">
+        <i class="fa fa-solid fa-angle-left"></i> Zurück
       </a>
 
       {% if header %}

src/css/fonts.css

@@ -1,9 +1,4 @@
 @font-face {
-  font-family: "Inter";
-  src: url("/assets/InterVariable.ttf");
-}
-
-@font-face {
-  font-family: "Caveat";
-  src: url("/assets/CaveatVariable.ttf");
+  font-family: "Quicksand";
+  src: url("/assets/fonts/QuicksandVariable.ttf");
 }

src/css/footer.css

@@ -1,5 +1,5 @@
 #main-footer {
-  font-family: "Caveat";
+  background-color: var(--dark-background-color);
   padding: 0.75rem 1rem 0.75rem 1rem;
   font-weight: bold;
   display: flex;

src/css/header.css

@@ -1,5 +1,5 @@
 #main-header {
-  font-family: "Caveat";
+  background-color: var(--dark-background-color);
   font-size: 20pt;
   padding: 18px;
 }
@@ -11,7 +11,7 @@
 
 #main-header ul {
   display: flex;
-  gap: 10px;
+  gap: 20px;
   flex-direction: row;
   justify-content: center;
   align-items: baseline;
@@ -26,7 +26,9 @@
   padding: 0px;
   text-decoration-skip-ink: none;
   text-underline-offset: 8px;
-  text-decoration: var(--text-color) wavy underline;
+  text-decoration-thickness: 8px;
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
 }
 
 /* Breakpoints */

src/css/post.css

@@ -1,63 +0,0 @@
-article header h1 {
-  font-weight: bold;
-  font-size: 1.5rem;
-  margin: 0px;
-}
-
-article header h1 a {
-  display: block;
-  text-decoration: none;
-}
-
-article header time {
-  display: block;
-  padding: 4px 1px;
-}
-
-article > p {
-  margin: 0px;
-  padding: 0px;
-}
-
-article > a {
-  display: inline-block;
-  color: var(--accent-red);
-  text-decoration-thickness: 3px;
-  margin-bottom: 3px;
-  padding-top: 8px;
-}
-
-ul > li:not(:last-child) {
-  margin-bottom: 20px;
-}
-
-/* Aside Header */
-
-aside a {
-  background-color: var(--accent-yellow);
-  color: var(--accent-red);
-  cursor: pointer;
-  display: inline-block;
-  padding: 8px;
-  font-weight: bold;
-  border-radius: 8px;
-  margin-bottom: 8px;
-}
-
-aside a i {
-  margin-right: 4px;
-}
-
-aside {
-  padding: 0px 16px;
-}
-
-aside div > img {
-  display: block;
-  width: 100%;
-  border-radius: 8px;
-}
-
-aside h1 {
-  margin: 0em 0px 0.2em 0px;
-}

src/css/style.css

@@ -1,3 +1,4 @@
+@import url("./fonts.css");
 @import url("./normalize.css");
 @import url("./variables.css");
 @import url("./header.css");
@@ -5,17 +6,17 @@
 
 html,
 body {
-  font-family: "Inter", sans-serif;
-  background-color: antiquewhite;
+  font-family: "Quicksand", sans-serif;
+  background-color: var(--background-color);
   color: var(--text-color);
 }
 
 h1,
 h2,
 h3 {
-  font-family: "Caveat", sans-serif;
+  font-family: "Quicksand", sans-serif;
   font-weight: bold;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
 }
 
 h1 > a,
@@ -26,6 +27,35 @@ article > a {
   color: var(--text-color);
 }
 
+h1::after,
+h2::after,
+h3::after {
+  display: block;
+  width: 100px;
+  height: 8px;
+  margin-top: 6px;
+  margin-bottom: 0px;
+  content: "";
+  border-radius: var(--border-radius);
+  background-color: var(--accent);
+}
+
+aside {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+aside > :not(a) {
+  flex: 1;
+  width: 768px;
+}
+
+aside a {
+  align-self: center;
+}
+
 main {
   padding: 16px;
   display: flex;
@@ -38,8 +68,19 @@ main > * {
   width: 768px;
 }
 
+.button {
+  cursor: pointer;
+  display: inline-block;
+  font-weight: bold;
+  border-radius: var(--border-radius);
+  padding: 8px;
+  color: var(--text-color);
+  background-color: var(--accent);
+}
+
 @media (max-width: 400px) {
-  main > * {
+  main > *,
+  aside {
     width: 100%;
   }
 }

src/css/variables.css

@@ -2,9 +2,10 @@
   --white: #ffffff;
   --black: #000000;
 
-  --background-color: #e0e2db;
-  --text-color: #191716;
-  --accent-yellow: #e6af2e;
-  --accent-blue: #3d348b;
-  --accent-red: #b31e57;
+  --background-color: #393e46;
+  --dark-background-color: #2d3138;
+  --text-color: #eeeeee;
+  --accent: #00adb5;
+
+  --border-radius: 8px;
 }

src/examples/examples.json

@@ -0,0 +1,7 @@
+{
+  "layout": "post.njk",
+  "title": "Unnamed",
+  "tags": "example",
+  "author": "Luca Junge",
+  "date": "Created"
+}

src/examples/examples.njk

@@ -0,0 +1,23 @@
+---
+title: Alle Beispiele
+layout: overview.njk
+eleventyExcludeFromCollections: true
+---
+
+{%- for post in collections.example -%}
+  <article>
+    <header>
+      <h1>
+        <a href="{{post.url}}">{{post.data.title}}</a>
+      </h1>
+
+      <time>{{post.date | formatDate }}</time>
+    </header>
+
+    <p>{{post.templateContent | createExcerpt}}</p>
+
+    <a class="button" href="{{post.url}}">
+        Weiterlesen
+    </a>
+  </article>
+{%- endfor -%}

src/examples/test-example/index.md

@@ -0,0 +1,7 @@
+---
+title: Test Example
+---
+
+# Hello World
+
+This is a test

src/index/index.njk

@@ -16,7 +16,7 @@ permalink: /index.html
 
     <p>{{post.templateContent | createExcerpt}}</p>
 
-    <a href="{{post.url}}">
+    <a class="button" href="{{post.url}}">
         Weiterlesen
     </a>
   </article>

src/posts/posts.njk

@@ -1,26 +1,23 @@
 ---
 title: Alle Posts
-layout: post-list.njk
+layout: overview.njk
 eleventyExcludeFromCollections: true
 ---
 
-<ul>
-  {%- for post in collections.post -%}
-    <li>
-      <article>
-        <header>
-          <h1>
-            <a href="{{post.url}}">{{post.data.title}}</a>
-          </h1>
+{%- for post in collections.post -%}
+  <article>
+    <header>
+      <h1>
+        <a href="{{post.url}}">{{post.data.title}}</a>
+      </h1>
 
-          <time>{{post.date | formatDate }}</time>
-        </header>
+      <time>{{post.date | formatDate }}</time>
+    </header>
 
-        <p>{{post.templateContent | createExcerpt}}</p>
+    <p>{{post.templateContent | createExcerpt}}</p>
 
-        <a href="{{post.url}}">
-        Weiterlesen</a>
-      </article>
-    </li>
-  {%- endfor -%}
-</ul>
+    <a class="button" href="{{post.url}}">
+        Weiterlesen
+    </a>
+  </article>
+{%- endfor -%}

src/posts/test/index.md

@@ -1,4 +1,4 @@
 ---
 title: This is a test post with a very long title lorem ipsum dolor sit amet
-draft: false
+draft: true
 ---

src/tutorials/test-tutorial/index.md

@@ -0,0 +1,7 @@
+---
+title: Test Tutorial
+---
+
+# Hello World
+
+This is a test

src/tutorials/tutorials.json

@@ -0,0 +1,7 @@
+{
+  "layout": "post.njk",
+  "title": "Unnamed",
+  "tags": "tutorial",
+  "author": "Luca Junge",
+  "date": "Created"
+}

src/tutorials/tutorials.njk

@@ -0,0 +1,23 @@
+---
+title: Alle Tutorials
+layout: overview.njk
+eleventyExcludeFromCollections: true
+---
+
+{%- for post in collections.tutorial -%}
+  <article>
+    <header>
+      <h1>
+        <a href="{{post.url}}">{{post.data.title}}</a>
+      </h1>
+
+      <time>{{post.date | formatDate }}</time>
+    </header>
+
+    <p>{{post.templateContent | createExcerpt}}</p>
+
+    <a class="button" href="{{post.url}}">
+        Weiterlesen
+    </a>
+  </article>
+{%- endfor -%}