From 6f51927e180fe6c6ea88806d245bd886df23f53a Mon Sep 17 00:00:00 2001
From: xAlpharax <42233094+xAlpharax@users.noreply.github.com>
Date: Sun, 3 Mar 2024 20:56:15 +0200
Subject: Made changes regarding the styling, config and added content and a
 shortcode for youtube embeds.

Changes to be committed:
    modified:   config.toml

    modified:   content/about.md
    modified:   content/posts/How I made this Blog with Zola.md
    new file:   content/posts/some_cool_stuff.md
    modified:   content/posts/typography.md

    modified:   sass/_normalize.scss
    modified:   sass/_predefined.scss
    modified:   sass/style.scss

    modified:   templates/index.html
    new file:   templates/shortcodes/youtube.html
---
 templates/index.html              | 8 +++++---
 templates/shortcodes/youtube.html | 7 +++++++
 2 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 templates/shortcodes/youtube.html

(limited to 'templates')

diff --git a/templates/index.html b/templates/index.html
index 4c08173..9144fc0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -51,12 +51,12 @@
   <link rel="icon" type="image/png" sizes="32x32" href="{{ get_url(path="favicon-32x32.png") }}"/>
   <link rel="icon" type="image/png" sizes="16x16" href="{{ get_url(path="favicon-16x16.png") }}"/>
 
-  <link rel="manifest" href="{{ get_url(path="site.webmanifest") }}">
+  <!-- <link rel="manifest" href="{{ get_url(path="site.webmanifest") }}"> PWA + android manifest -->
   <link rel="mask-icon" href="{{ get_url(path="safari-pinned-tab.svg") }}" color="#030303">
   <meta name="msapplication-TileColor" content="#603cba">
   <!-- <meta name="theme-color" content="#ffffff"> discord fancy ruler line on the left of link preview embeds -->
 
-  <link rel="shortcut icon" href="{{ get_url(path="favicon.ico") }}"/> <!-- this is for old browsers that don't support the other tags -->
+  <link rel="shortcut icon" href="{{ get_url(path="favicon.ico") }}"/>
 
   <!-- Stylesheets -->
   <link rel="stylesheet" href="{{ get_url(path="style.css") }}"/>
@@ -118,8 +118,9 @@
       {% endblock footer %}
     </div>
 
-    <script src="{{ get_url(path="js/main.js") }}"></script>
+    <script defer src="{{ get_url(path="js/main.js") }}"></script>
 
+    {% if page.extra.math %}
     <!-- Math rendering with KaTeX -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
 
@@ -129,6 +130,7 @@
     <!-- To automatically render math in text elements, include the auto-render extension -->
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
       onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>
+    {% endif %}
 
     {% if config.extra.google_analytics.enable %}
     <!-- Global Site Tag (gtag.js) - Google Analytics -->
diff --git a/templates/shortcodes/youtube.html b/templates/shortcodes/youtube.html
new file mode 100644
index 0000000..87ccffe
--- /dev/null
+++ b/templates/shortcodes/youtube.html
@@ -0,0 +1,7 @@
+<div {% if class %}class="{{class}}"{% endif %} style="position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio for responsive sizing */ overflow: hidden;">
+  <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+                 border-radius: 4px; /* Optional: Add some rounded corners */
+                 border-style: none; /* Remove iframe border */"
+          src="https://www.youtube-nocookie.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
+  </iframe>
+</div>
-- 
cgit v1.2.3