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

10 files changed, 138 insertions, 53 deletions

diff --git a/config.toml b/config.toml
index fb0820f..99bc6dd 100644
--- a/config.toml
+++ b/config.toml
@@ -1,61 +1,50 @@
-# Base URL of the site, the only required config argument - also used for sitemap and rss
+# Base URL of the site, the only required configuration variable - also used for sitemap and rss feed
 base_url = "https://alphara.art"
 
 # Used in RSS by default
 title = "Alphara's Blog"
-description = "Neural Art at its finest :))" # Neural Art at its finest :)) Blog dedicated to my stuff
+description = "Neural Art at its finest :))" # Blog dedicated to my stuff
+
+# The default author for pages
+author = "Iustin Râznic"
 
 # The default language, used in RSS and as a fallback value
 default_language = "en"
 
-# Theme name to use
+# The site theme to use.
 # theme = ""
 
-# Whether to generate a RSS feed automatically
-generate_feed = true
-feed_filename = "atom.xml"
-
-# The number of articles to include in the RSS feed. Will include all items if
-# not set (the default).
-# rss_limit = 20
-
-# The taxonomies to be rendered for that site and their configuration
-# Example:
-#     taxonomies = [
-#       {name = "tags", rss = true}, # each tag will have its own RSS feed
-#       {name = "categories", paginate_by = 5},  # 5 items per page for a term
-#       {name = "authors"}, # Basic definition: no RSS or pagination
-#     ]
-#
-taxonomies = [
-    {name = "tags", rss = true}
-]
-
 # Whether to automatically compile all sass files found in the `sass` directory
 compile_sass = true
 
 # When set to "true", the generated HTML files are minified.
 minify_html = true
 
-# This does the whole example.com/image.jpg url hardlinking thing
-# When set to "true", files in the `static` directory are hard-linked. Useful for large
-# static files. Note that for this to work, both `static` and the
-# output directory need to be on the same filesystem. Note that the theme's `static`
-# files are always copied, regardless of this setting.
-hard_link_static = true
-
-# Whether to build a search index out of the pages and section content for the `default_language`
-# or whether to build a search index to be used later on by a JavaScript library
-build_search_index = false
-
 # A list of glob patterns specifying asset files to ignore when processing the content directory.
 # Defaults to none, which means all asset files are copied over to the public folder.
 # Example:
 #     ignored_content = ["*.{graphml,xlsx}", "temp.*"]
 ignored_content = []
 
-# A list of directories to search for additional `.sublime-syntax` files in.
-extra_syntaxes = []
+# Similar to ignored_content, a list of glob patterns specifying asset files to
+# ignore when the static directory is processed. Defaults to none, which means
+# that all asset files are copied over to the `public` directory
+ignored_static = []
+
+# Whether to generate a RSS feed automatically
+generate_feed = true
+feed_filename = "atom.xml"
+
+# The taxonomies to be rendered for that site and their configuration
+# Example:
+#     taxonomies = [
+#       { name = "tags", rss = true }, # each tag will have its own RSS feed
+#       { name = "categories", paginate_by = 5 },  # 5 items per page for a term
+#       { name = "authors" } # Basic definition: no RSS or pagination
+#     ]
+taxonomies = [
+    { name = "tags", rss = true }
+]
 
 [markdown]
 
@@ -63,12 +52,27 @@ extra_syntaxes = []
 highlight_code = true
 highlight_theme = "base16-ocean-dark"
 
-# Emojis like :smile: and :shrug:
+# Use emojis like :smile: and :shrug:
 render_emoji = true
 
-[translations]
+# Whether external links are to be opened in a new tab
+# If this is true, a `rel="noopener"` will always automatically be added for security reasons
+external_links_target_blank = false
+
+# Whether to set rel="nofollow" for all external links
+external_links_no_follow = false
+
+# Whether to set rel="noreferrer" for all external links
+external_links_no_referrer = false
 
-# You can put any kind of data in there and it will be accessible in all templates
+# Whether smart punctuation is enabled (changing quotes, dashes, dots in their typographic form)
+# For example, `...` into `…`, `"quote"` into `“curly”` etc
+smart_punctuation = false
+
+# Whether to set decoding="async" and loading="lazy" for all images
+# When turned on, the alt text must be plain text.
+# For example, `![xx](...)` is ok but `![*x*x](...)` isn’t ok
+lazy_async_image = false
 
 [extra]
 
@@ -96,7 +100,7 @@ email = "iustin@alphara.art"
 
 [extra.meta]
 
-website_type = "blog" # either "blog" or "article" - I haven't seen any difference yet
+website_type = "blog" # either "blog" or "article" - I haven't seen any difference though
 
 keywords = "blog, technology, science, philosophy, mathematics, artificial intelligence, AI research, machine learning, data science, deep learning, neural networks, Linux, Void Linux, OpenBSD, system administration, open source, FOSS, developer tools, programming, coding, tutorials, programming languages, software development, software engineering, computer science, algorithms, cybersecurity"
 
@@ -105,7 +109,7 @@ preview_image_alt = "Alphara"
 
 twitter_card = "summary_large_image" # either "summary" or "summary_large_image" (for big preview image)
 
-twitter_creator = "@IustinRaznic" # your twitter handle
+twitter_creator = "@IustinRaznic" # twitter handle of the author
 
 [extra.disqus]
 
@@ -136,6 +140,27 @@ twitter_creator = "@IustinRaznic" # your twitter handle
 #
 # in the page front-matter
 
+# Similarily, but unrelated,
+
+# Math Latex (KaTeX) rendering can be enabled per-page by adding:
+# [extra]
+# math=true
+#
+# in the page front-matter
+
+# Similarily, but unrelated,
+
+# Navigation buttons can be enabled per-page by adding:
+# [extra.earlier]
+# title = "Typography"
+# permalink = "https://alphara.art/posts/typography"
+
+# AND/OR
+
+# [extra.later]
+# title = "Henlo Internet!"
+# permalink = "https://alphara.art/posts/how-i-made-this-blog-with-zola/"
+
 [extra.google_analytics]
 
 # enable = false
diff --git a/content/about.md b/content/about.md
index d96d597..0e956dd 100644
--- a/content/about.md
+++ b/content/about.md
@@ -2,6 +2,8 @@
 title = "About"
 +++
 
-Just a big section that needs updated.
+Hi there! My name is Iustin. I'm a math student with a background in AI development and research. This blog represents my attempt at sharing my personal thoughts and experiences as a follow-through venture in AI research, mathematics, philosophy and Linux related things, as well as a bunch of other things that define my interests.
 
-Welp, see you soon.
+I hope to make interesting, qualitative, useful and fun content for you to read and learn from. I hope you will enjoy it!
+
+Welcome to my corner of organised anarchy on the internet! Feel free to reach out to me if you have any questions or comments or would like to chat. I am always happy and open to meet passionate people.
diff --git a/content/posts/How I made this Blog with Zola.md b/content/posts/How I made this Blog with Zola.md
index b5aa84a..520ee1c 100644
--- a/content/posts/How I made this Blog with Zola.md
+++ b/content/posts/How I made this Blog with Zola.md
@@ -11,4 +11,10 @@ disable_comments = true
 toc = false
 +++
 
-LOLZ
+Hello, World! This is my first post on my new blog. I'm excited to share my thoughts with you.
+
+First off, how did I make this? I used Zola - a static site generator written in Rust. It's fast, easy to use, and has lots of features.
+
+Design : markdown rendered pages ; css-only animations and eyecandy ; minimal js ; must have atom rss
+
+You can find the source code for this blog on my GitHub as well as on [my own git instance](https://git.alphara.art/blog).
diff --git a/content/posts/some_cool_stuff.md b/content/posts/some_cool_stuff.md
new file mode 100644
index 0000000..e8d24a4
--- /dev/null
+++ b/content/posts/some_cool_stuff.md
@@ -0,0 +1,40 @@
++++
+title = "Some cool stuff"
+date = 2024-03-02T00:00:00+03:00
+draft = false
+
+[taxonomies]
+tags = ["test"]
+
+[extra]
+disable_comments = true
+toc = true
++++
+
+Let's test manual anchor link declaration:
+
+# Heading 1 {#h1}
+
+## Heading 2
+
+Nice, let's test internal linking now: [my link](@/posts/typography.md#h1)
+
+---
+
+Nice! Now let's test shortcodes with a youtube iframe embed video:
+
+{{ youtube(id="dCKeXuVHl1o") }}
+
+---
+
+{{ youtube(id="dCKeXuVHl1o", autoplay=true) }}
+
+---
+
+{{ youtube(id="dCKeXuVHl1o", autoplay=true) }}
+
+---
+
+{{ youtube(id="9h2Z0I2jxRU", autoplay=true) }}
+
+Cool! All these features should be plenty enough for now. I will add some others as we go.
diff --git a/content/posts/typography.md b/content/posts/typography.md
index 3b554cd..9a7d074 100644
--- a/content/posts/typography.md
+++ b/content/posts/typography.md
@@ -7,6 +7,7 @@ draft = false
 tags = ["test", "original_post"]
 
 [extra]
+math = true
 disable_comments = true
 toc = true
 +++
@@ -27,7 +28,7 @@ Inline styles to test:
 
 ---
 
-# Heading 1
+# Heading 1 {#h1}
 
 ## Heading 2
 
diff --git a/sass/_normalize.scss b/sass/_normalize.scss
index 47b010e..ce3e9a8 100644
--- a/sass/_normalize.scss
+++ b/sass/_normalize.scss
@@ -189,6 +189,7 @@ button,
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
+  appearance: button;
 }
 
 /**
@@ -281,6 +282,7 @@ textarea {
 
 [type="search"] {
   -webkit-appearance: textfield; /* 1 */
+  appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
 
diff --git a/sass/_predefined.scss b/sass/_predefined.scss
index ac955ed..e0fb95b 100644
--- a/sass/_predefined.scss
+++ b/sass/_predefined.scss
@@ -9,12 +9,12 @@ $dark-grey: #3b3e48;
 $highlight-grey: #7d828a;
 $midnightblue: #2b303b; //#31333d; // to fix code syntax highlighting
 
-//$theme: #018574;
-//$text: #8dabd0; // fg // general text // mod white
-//$light-grey: #4e6695; // bg // mod blue
+//$theme: #018574; // links // green
+//$text: #8dabd0; // fg // general text // white
+//$light-grey: #4e6695; // bg // blue
 //$dark-grey: #4e6695;
 //$highlight-grey: #4e6695;
-//$midnightblue: #4e6695;
+//$midnightblue: #2b303b;
 
 // Fonts
 //
diff --git a/sass/style.scss b/sass/style.scss
index 18ff1d0..b2d75f5 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -90,7 +90,7 @@ a {
   text-decoration: none;
   border: none;
   transition-property: color;
-  transition-duration: 0.4s;
+  transition-duration: 0.5s;
   transition-timing-function: ease-out;
 
   &:hover {
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>