Add and use custom red skin

config.toml

@@ -1,5 +1,7 @@
 base_url = "https://maciejpedzich-preview.onrender.com"
+compile_sass = true
 title = "Maciej Pędzich"
+description = "Computer Science student @ PJAIT. F1 nerd since birth. Avid homelabber. House music aficionado. Visibly on the spectrum. Warsaw. he/him."
 theme = "tabi"
 default_language = "en"
 taxonomies = [{ name = "tags", feed = true }]
@@ -8,16 +10,18 @@ generate_feeds = true
 
 [markdown]
 highlight_code = true
-highlight_theme = "css"
 bottom_footnotes = true
+highlight_theme = "css"
 
 [extra]
-skin = "red"
-browser_theme_color = "#a41312"
-favicon_emoji = "💻"
+skin = "custom"
+browser_theme_color = "#cd3731"
+favicon = "images/favicon.png"
+social_media_card = "/images/banner.png"
 show_author = false
 toc = true
 quick_navigation_buttons = true
+stylesheets = ["css/custom.css"]
 menu = [
   { name = "Blog", url = "blog" },
   { name = "Tags", url = "tags" },
@@ -27,6 +31,7 @@ socials = [
   { name = "Email", url = "mailto:contact@maciejpedzi.ch", icon = "email" },
   { name = "Gitea", url = "https://code.maciejpedzi.ch", icon = "gitea" },
   { name = "GitHub", url = "https://github.com/maciejpedzich", icon = "github" },
+  { name = "Bluesky", url = "https://bsky.app/profile/maciejpedzi.ch", icon = "bluesky" },
   { name = "LinkedIn", url = "https://www.linkedin.com/in/maciejpedzich", icon = "linkedin" },
 ]
-copyright = "© $CURRENT_YEAR Maciej Pędzich $SEPARATOR Content on this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0) license."
+copyright = "© $CURRENT_YEAR Maciej Pędzich $SEPARATOR Content on this website is available under the [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0) license."

sass/skins/custom.scss

@@ -0,0 +1,30 @@
+// This defines theme-specific variables.
+@mixin theme-variables($theme) {
+  @if $theme =='light' {
+    // Light theme colours.
+    --primary-color: #cd3731;
+  }
+
+  @else if $theme =='dark' {
+    // Dark theme colours.
+    --primary-color: #e35d5d;
+  }
+}
+
+// Apply light theme variables by default.
+:root {
+  @include theme-variables('light');
+}
+
+// Apply dark theme variables when dark theme is explicitly set.
+[data-theme='dark'] {
+  @include theme-variables('dark');
+}
+
+// Apply dark theme variables when user's system prefers dark mode
+// and the theme is not explicitly set to light.
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    @include theme-variables('dark');
+  }
+}

static/css/custom.css

@@ -0,0 +1,31 @@
+@media only screen and (max-width: 600px) {
+  #home-banner-header {
+    text-align: center;
+  }
+}
+
+footer {
+  margin-block-end: 0.75rem !important;
+}
+
+#banner-home-subtitle p {
+  text-align: justify;
+}
+
+#notbyai {
+  width: 100%;
+  max-width: 150px;
+  margin: 0 auto 1.75rem auto;
+  transition-duration: 300ms;
+}
+
+#notbyai:hover,
+#notbyai:hover::before {
+  background-color: transparent;
+  color: transparent;
+  transform: scale(1.1);
+}
+
+#notbyai:active {
+  transform: scale(0.95);
+}