Add act1-curling writeup

.github/workflows/hugo_cd.yml

@@ -1,62 +1,62 @@
 name: Hugo CD
 
 on:
-  push:
+    push:
-    branches:
+        branches:
-      - "master"
+            - "master"
 
 defaults:
-  run:
+    run:
-    working-directory: ./
+        working-directory: ./
 
 jobs:
-  build:
+    build:
-    timeout-minutes: 6
+        timeout-minutes: 6
-    name: Build
+        name: Build
-    runs-on: ubuntu-latest
+        runs-on: ubuntu-latest
-    steps:
+        steps:
-      - name: Checkout code
+            - name: Checkout code
-        uses: actions/checkout@v4
+              uses: actions/checkout@v4
-
+
-      - name: Setup hugo
+            - name: Setup hugo
-        uses: peaceiris/actions-hugo@v3
+              uses: peaceiris/actions-hugo@v3
-        with:
+              with:
-          hugo-version: "latest"
+                  hugo-version: "latest"
-          extended: true
+                  extended: true
-
+
-      - name: Build
+            - name: Build
-        run: hugo --minify
+              run: hugo --minify
-
+
-      - name: Upload deployment
+            - name: Upload deployment
-        uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@v4
-        with:
+              with:
-          name: public-html
+                  name: public-html
-          path: ./public
+                  path: ./public
-
+
-  deploy:
+    deploy:
-    timeout-minutes: 6
+        timeout-minutes: 6
-    name: Deploy
+        name: Deploy
-    runs-on: ubuntu-latest
+        runs-on: ubuntu-latest
-    needs: build
+        needs: build
-    environment:
+        environment:
-      name: production
+            name: production
-      url: https://maik.dev/
+            url: https://maik.dev/
-    steps:
+        steps:
-      - name: Download deployment
+            - name: Download deployment
-        uses: actions/download-artifact@v4
+              uses: actions/download-artifact@v4
-        with:
+              with:
-          name: public-html
+                  name: public-html
-          path: ./public-html
+                  path: ./public-html
-
+
-      - name: Setup SSH config for remote server
+            - name: Setup SSH config for remote server
-        run: |
+              run: |
-          mkdir -p ~/.ssh
+                  mkdir -p ~/.ssh
-          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
+                  echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
-          echo "${{ secrets.SSH_HOST }} ssh-ed25519 ${{ secrets.SSH_HOST_KEY }}" > ~/.ssh/known_hosts
+                  echo "${{ secrets.SSH_HOST }} ssh-ed25519 ${{ secrets.SSH_HOST_KEY }}" > ~/.ssh/known_hosts
-          chmod 600 ~/.ssh/id_ed25519
+                  chmod 600 ~/.ssh/id_ed25519
-          eval "$(ssh-agent -s)"
+                  eval "$(ssh-agent -s)"
-          ssh-add ~/.ssh/id_ed25519
+                  ssh-add ~/.ssh/id_ed25519
-
+
-      - name: Transfer deployment to remote server
+            - name: Transfer deployment to remote server
-        run: |
+              run: |
-          rsync -avh --delete-after ./public-html/ ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:~/maik.dev
+                  rsync -avh --delete-after ./public-html/ ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:~/maik.dev

.github/workflows/hugo_ci.yml

@@ -1,34 +1,34 @@
 name: Hugo CI
 
 on:
-  push:
+    push:
-    branches:
+        branches:
-      - "*"
+            - "*"
-      - "*/*"
+            - "*/*"
-      - "**"
+            - "**"
-      - "!master"
+            - "!master"
-  pull_request:
+    pull_request:
-    branches:
+        branches:
-      - "master"
+            - "master"
 
 defaults:
-  run:
+    run:
-    working-directory: ./
+        working-directory: ./
 
 jobs:
-  ci:
+    ci:
-    timeout-minutes: 5
+        timeout-minutes: 5
-    name: CI
+        name: CI
-    runs-on: ubuntu-latest
+        runs-on: ubuntu-latest
-    steps:
+        steps:
-      - name: Checkout code
+            - name: Checkout code
-        uses: actions/checkout@v4
+              uses: actions/checkout@v4
 
-      - name: Setup hugo
+            - name: Setup hugo
-        uses: peaceiris/actions-hugo@v3
+              uses: peaceiris/actions-hugo@v3
-        with:
+              with:
-          hugo-version: "latest"
+                  hugo-version: "latest"
-          extended: true
+                  extended: true
 
-      - name: Build
+            - name: Build
-        run: hugo -D -F
+              run: hugo -D -F

config/_default/hugo.toml

@@ -10,192 +10,201 @@ pygmentsUseClasses = true
 PygmentsStyle = "monokai"
 
 archetypeDir = "archetypes"
-contentDir   = "content"
+contentDir = "content"
-dataDir      = "data"
+dataDir = "data"
-layoutDir    = "layouts"
+layoutDir = "layouts"
-publishDir   = "public"
+publishDir = "public"
 
-buildDrafts  = false
+buildDrafts = false
-buildFuture  = false
+buildFuture = false
 buildExpired = false
 canonifyURLs = true
 
 enableRobotsTXT = true
-enableGitInfo   = true
+enableGitInfo = true
-enableEmoji     = true
+enableEmoji = true
+
+ignoreLogs = ["warning-goldmark-raw-html"]
 
 [permalinks]
-  [permalinks.page]
+[permalinks.page]
-    posts = "/posts/:title/"
+posts = "/posts/:title/"
-    writeups = "/:sections/:title/"
+writeups = "/:sections/:title/"
-    # writeups = "/writeups/:title/"
+# writeups = "/writeups/:title/"
-    portfolio = "/portfolio/:title/"
+portfolio = "/portfolio/:title/"
 
 [outputs]
-  home = ["HTML", "RSS"]
+home = ["HTML", "RSS"]
-  page = ["HTML", "RSS"]
+page = ["HTML", "RSS"]
 
 [pagination]
-  pagerSize  = 12
+pagerSize = 12
 
 [params]
-  dateform        = "Jan 2, 2006"
+dateform = "Jan 2, 2006"
-  dateformShort   = "Jan 2"
+dateformShort = "Jan 2"
-  dateformNum     = "2006-01-02"
+dateformNum = "2006-01-02"
-  dateformNumTime = "2006-01-02 15:04 -0700"
+dateformNumTime = "2006-01-02 15:04 -0700"
-  dateformMonth   = "Jan, 2006"
+dateformMonth = "Jan, 2006"
-
+
-  # Metadata mostly used in document's head
+# Metadata mostly used in document's head
-  description = "Hey there, my name is Maik de Kruif, I create websites, bots and other kinds of software. At the moment, I'm still studying computer science at Avans University of Applied Sciences. I am also a big fan of open-source software, which is why you'll find many of my projects on Github. And last but not least, I love playing around with cyber-security related stuff."
+description = "Hey there, my name is Maik de Kruif, I create websites, bots and other kinds of software. At the moment, I'm still studying computer science at Avans University of Applied Sciences. I am also a big fan of open-source software, which is why you'll find many of my projects on Github. And last but not least, I love playing around with cyber-security related stuff."
-  keywords = "Devloper, Software Engineer, Software Developer, Maik, Computer Science, Portfolio, Blog, Maik de Kruif"
+keywords = "Devloper, Software Engineer, Software Developer, Maik, Computer Science, Portfolio, Blog, Maik de Kruif"
-  images = [""]
+images = [""]
-
+
-  genre = "Blog"
+genre = "Blog"
-
+
-  rssLimit  = 15
+rssLimit = 15
-
+
-  showReadingTimeInList = false
+showReadingTimeInList = false
-
+
-  homeSubtitle = "Software Engineering, Linux and Cyber Security"
+homeSubtitle = "Software Engineering, Linux and Cyber Security"
-
+
-  # Prefix of link to the git commit detail page. GitInfo must be enabled.
+# Prefix of link to the git commit detail page. GitInfo must be enabled.
-  gitUrl = "https://github.com/maikka39/Personal-Website/commit/"
+gitUrl = "https://github.com/maikka39/Personal-Website/commit/"
-
+
-  # Add domain for GoatCounter to enable
+# Add domain for GoatCounter to enable
-  goatCounter = "webstats.maik.dev"
+goatCounter = "webstats.maik.dev"
-
+
-  # Show pageviews on posts, writeups, etc.
+# Show pageviews on posts, writeups, etc.
-  showPageViews = true
+showPageViews = true
-
+
-  # Set disableReadOtherPosts to true in order to hide the links to other posts.
+# Set disableReadOtherPosts to true in order to hide the links to other posts.
-  disableReadOtherPosts = false
+disableReadOtherPosts = false
-
+
-  # Sharing buttons
+# Sharing buttons
-  # There are a lot of buttons preconfigured. If you want to change them,
+# There are a lot of buttons preconfigured. If you want to change them,
-  # generate the buttons here: https://sharingbuttons.io
+# generate the buttons here: https://sharingbuttons.io
-  # and add them into your own `layouts/partials/sharing-buttons.html`
+# and add them into your own `layouts/partials/sharing-buttons.html`
-  # Preconfigured: facebook, twitter, tumblr, email, pinterest, linkedin, reddit, xing, whatsapp, hackernews, telegram
+# Preconfigured: facebook, twitter, tumblr, email, pinterest, linkedin, reddit, xing, whatsapp, hackernews, telegram
-  enableSharingButtons = true
+enableSharingButtons = true
-  sharingButtons = ["twitter", "email", "linkedin", "reddit", "whatsapp", "telegram"]
+sharingButtons = [
-
+  "twitter",
-  # Integrate Javascript files or stylesheets by adding the url to the external assets or by
+  "email",
-  # linking local files with their path relative to the static folder, e.g. "css/styles.css"
+  "linkedin",
-  customCSS = []
+  "reddit",
-  customJS  = []
+  "whatsapp",
-
+  "telegram",
-  # Toggle this option need to rebuild SCSS, requires extended version of Hugo
+]
-  justifyContent = false  # Set "text-align: justify" to .post-content.
+
-
+# Integrate Javascript files or stylesheets by adding the url to the external assets or by
-  # Default theme "light" or "dark"
+# linking local files with their path relative to the static folder, e.g. "css/styles.css"
-  defaultTheme = "light"
+customCSS = []
-  themeColor = "#252627"
+customJS = []
-
+
-  # Colors for favicons
+# Toggle this option need to rebuild SCSS, requires extended version of Hugo
-  [params.favicon.color]
+justifyContent = false # Set "text-align: justify" to .post-content.
-    mask = "#252627"
+
-    msapplication = "#252627"
+# Default theme "light" or "dark"
-    theme = "#252627"
+defaultTheme = "light"
-
+themeColor = "#252627"
-  [params.logo]
+
-    logoText     = "$ cd /home/"
+# Colors for favicons
-    logoHomeLink = "/"
+[params.favicon.color]
-
+mask = "#252627"
-  # Uncomment this if you want a portrait on your start page
+msapplication = "#252627"
-  [params.portrait]
+theme = "#252627"
-    path     = "/img/home/portrait.png"
+
-    alt      = "Portrait"
+[params.logo]
-    size = "175px"
+logoText = "$ cd /home/"
-
+logoHomeLink = "/"
-  [params.author]
+
-    name = "Maik de Kruif"
+# Uncomment this if you want a portrait on your start page
-    email = "maik@maik.dev"
+[params.portrait]
-    twitter = "@maik_dev"
+path = "/img/home/portrait.png"
-    image = "/img/home/portrait.png"
+alt = "Portrait"
-
+size = "175px"
-  [params.general]
+
-    twitter = "@maik_dev"
+[params.author]
-
+name = "Maik de Kruif"
-  # Wallets
+email = "maik@maik.dev"
-  [[params.wallets]]
+twitter = "@maik_dev"
-    name = "XMR"
+image = "/img/home/portrait.png"
-    address = "83cfsXGHPaW81hKJtAPYZEgbfFqANMTXXRwghsBpjf5oTDRV3BnCC4jFno8tLTnF4C6gJzGjPEmpvjntXaiGBB7kVitkDKi"
+
-
+[params.general]
-  # Social icons
+twitter = "@maik_dev"
-  [[params.social]]
+
-    name = "email"
+# Wallets
-    url  = "mailto:maik@maik.dev"
+[[params.wallets]]
-
+name = "XMR"
-  [[params.social]]
+address = "83cfsXGHPaW81hKJtAPYZEgbfFqANMTXXRwghsBpjf5oTDRV3BnCC4jFno8tLTnF4C6gJzGjPEmpvjntXaiGBB7kVitkDKi"
-    name = "github"
+
-    url  = "https://github.com/maikka39"
+# Social icons
-
+[[params.social]]
-  [[params.social]]
+name = "email"
-    name = "linkedin"
+url = "mailto:maik@maik.dev"
-    url  = "https://www.linkedin.com/in/maikdekruif/"
+
-
+[[params.social]]
-  [[params.social]]
+name = "github"
-    name = "twitter"
+url = "https://github.com/maikka39"
-    url  = "https://twitter.com/maik_dev"
+
-
+[[params.social]]
-  [[params.social]]
+name = "linkedin"
-    name = "discord"
+url = "https://www.linkedin.com/in/maikdekruif/"
-    url  = "https://discord.gg/wXCMdzCDcH"
+
-
+[[params.social]]
-  [[params.social]]
+name = "twitter"
-    name = "instagram"
+url = "https://twitter.com/maik_dev"
-    url  = "https://www.instagram.com/maik.dev/"
+
-
+[[params.social]]
-  [[params.social]]
+name = "discord"
-    name = "stackoverflow"
+url = "https://discord.gg/wXCMdzCDcH"
-    url  = "https://stackoverflow.com/users/9146982/maik-de-kruif"
+
-
+[[params.social]]
-  # [[params.social]]
+name = "instagram"
-  #   name = "rss"
+url = "https://www.instagram.com/maik.dev/"
-  #   url  = "posts/index.xml"
+
-
+[[params.social]]
-  # [[params.social]]
+name = "stackoverflow"
-  #   name = "hackerrank"
+url = "https://stackoverflow.com/users/9146982/maik-de-kruif"
-  #   url  = "https://www.hackerrank.com/maik_dev"
+
-
+# [[params.social]]
-  # [[params.social]]
+#   name = "rss"
-  #   name = "medium"
+#   url  = "posts/index.xml"
-  #   url  = "https://medium.com/@maikka39"
+
-
+# [[params.social]]
-  [[params.social]]
+#   name = "hackerrank"
-    name = "steam"
+#   url  = "https://www.hackerrank.com/maik_dev"
-    url  = "https://steamcommunity.com/id/maikka39"
+
-
+# [[params.social]]
-  [[params.social]]
+#   name = "medium"
-    name = "reddit"
+#   url  = "https://medium.com/@maikka39"
-    url  = "https://www.reddit.com/user/maikka39"
+
-
+[[params.social]]
-  # [[params.social]]
+name = "steam"
-  #   name = "lbry"
+url = "https://steamcommunity.com/id/maikka39"
-  #   url  = "https://lbry.tv/@Maik:c"
+
-
+[[params.social]]
-  [[params.social]]
+name = "reddit"
-    name = "youtube"
+url = "https://www.reddit.com/user/maikka39"
-    url  = "https://www.youtube.com/channel/UCepNO6s7q0Kcyn8cc3rZNFA"
+
+# [[params.social]]
+#   name = "lbry"
+#   url  = "https://lbry.tv/@Maik:c"
+
+[[params.social]]
+name = "youtube"
+url = "https://www.youtube.com/channel/UCepNO6s7q0Kcyn8cc3rZNFA"
 
 [languages]
-  [languages.en]
+[languages.en]
-    weight    = 1
+weight = 1
-    copyright = "© Maik de Kruif (maik_dev). All rights reserved."
+copyright = "© Maik de Kruif (maik_dev). All rights reserved."
 
 [menu]
-  [[menu.main]]
+[[menu.main]]
-    identifier = "about"
+identifier = "about"
-    name       = "About"
+name = "About"
-    url        = "about/"
+url = "about/"
-  [[menu.main]]
+[[menu.main]]
-    identifier = "portfolio"
+identifier = "portfolio"
-    name       = "Portfolio"
+name = "Portfolio"
-    url        = "portfolio/"
+url = "portfolio/"
-  [[menu.main]]
+[[menu.main]]
-    identifier = "posts"
+identifier = "posts"
-    name       = "Posts"
+name = "Posts"
-    url        = "posts/"
+url = "posts/"
-  [[menu.main]]
+[[menu.main]]
-    identifier = "writeups"
+identifier = "writeups"
-    name       = "Writeups"
+name = "Writeups"
-    url        = "writeups/"
+url = "writeups/"

config/production/hugo.toml

@@ -1,5 +1,5 @@
 baseURL = "https://maik.dev/"
 
 [services]
-  [services.googleAnalytics]
+[services.googleAnalytics]
-    id = "UA-136337666-1"
+id = "UA-136337666-1"

content/writeups/holiday-hack-challenge/2024/act1/_index.md

@@ -0,0 +1,8 @@
++++
+author = "Maik de Kruif"
+title = "Act 1 - SANS HHC 2024"
+breadcrumb = "Act 1"
+description = "A collection of my writeups for the 2024 edition of the SANS Holiday Hack Challenge (HHC). HHC is a free series of fun, quality, hands-on cybersecurity challenges."
++++
+
+A collection of my writeups for the 2024 edition of the SANS Holiday Hack Challenge (HHC). HHC is a free series of fun, quality, hands-on cybersecurity challenges.

content/writeups/holiday-hack-challenge/2024/act1/curling.md

@@ -0,0 +1,322 @@
++++
+author = "Maik de Kruif"
+title = "Curling"
+subtitle = "Act 1 - SANS Holiday Hack Challenge 2024"
+date = 2024-11-23T11:44:53+01:00
+description = "In the fourth challenge of the Holiday Hack Challenge 2024, we'll explore how to use curl using the Linux manpages."
+cover = "img/writeups/holiday-hack-challenge/2024/act1/curling/cover.png"
+tags = [
+    "Holiday Hack Challenge",
+    "ctf",
+    "hacking",
+    "writeup",
+]
+categories = [
+    "ctf",
+    "writeups",
+    "hacking",
+]
++++
+
+## Link
+
+If you want to play the challenge yourself, you can find it here:
+
+<https://2024.holidayhackchallenge.com/>
+
+## Story line
+
+Let's start off by talking to Bow Ninecandle:
+
+```txt
+Well hello there! I'm Bow Ninecandle, bright as a twinkling star! Everyone's busy unpacking, but I've grown quite bored of that. Care to join me for a lovely game?
+
+Oh Joy! Today, We're diving into something delightful: the curling challenge—without any ice, but plenty of sparkle!
+
+No icy brooms here though! We're all about Curl, sending web requests from the command line like magic messages.
+
+So, have you ever wielded Curl before? If not, no worries at all, my friend!
+
+It's this clever little tool that lets you whisper directly to web servers. Pretty neat, right?
+
+Think of it like sending secret scrolls through the interwebs, awaiting a wise reply!
+
+To begin, you can type something like curl https://example.com. Voilà! The HTML of the page appears, like conjuring a spell!
+
+Simple enough, huh? But oh, there's a whole world of magic you can cast with Curl!
+
+We're just brushing the surface here, but trust me—it’s a hoot and a half!
+
+If you get tangled up or need help, just give me a shout! I’m here to help you ace this curling spectacle.
+
+So, are you ready to curl those web requests like a pro? Let’s see your magic unfold!
+```
+
+## Recon
+
+Upon opening the challenge, we're greeted with a terminal. Looks like we'll have to use the `curl` command to solve the challenge.
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/start.png" title="Welcome screen" >}}
+
+Let's enter "y", press enter, and start the challenge.
+
+## Silver
+
+### Task 1
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/http.png" title="Question 1" >}}
+
+So, for our first task, we'll have to send a simple http request to `http://curlingfun:8080/`. Those of use who have used curl before will have no issues here, but since this writeup isn't just for them, I'll pretend to have never used curl before.
+
+To get more info on how curl works, we can open its manpage. A manpage is the documentation of a command on linux systems. We can open it by running `man curl` in the terminal.
+
+{{< figure class="small" src="/img/writeups/holiday-hack-challenge/2024/act1/curling/manpage.png" title="manpage of curl" >}}
+
+We can scroll through the page using the arrow keys (or vim shortcuts), and search for things by typing `/[SEARCH TERM HERE]`.
+
+For the first task, we don't need any of the special options, and we can just append the url after the curl command.
+
+```sh
+curl http://curlingfun:8080/
+```
+
+### Task 2
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/insecure-https.png" title="Question 2" >}}
+
+For tasks 2, we'll have to send an https request. Sounds easy enough, and normally that would be the case, but here it also specifies that the destination is using a self-signed certificate.
+
+By default curl will verify the remote certificate, and block the request if the certificate is not issued by a trusted party. Since the certificate here is self-signed, meaning there is no trusted party involved, curl will block the request.
+
+To circumvent this protection mechanism, we'll have to tell curl to allow insecure connections. If we look at the manpage, we can find the following option:
+
+```txt
+       -k, --insecure
+              (TLS) By default, every SSL connection curl makes is verified  to  be  secure.
+              This  option  allows  curl  to proceed and operate even for server connections
+              otherwise considered insecure.
+
+              ...
+```
+
+So we can add the `-k` option, and run the command like this:
+
+```sh
+curl -k https://curlingfun:9090/
+```
+
+### Task 3
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/post.png" title="Question 3" >}}
+
+On to task three, where we'll have to send a POST request with some data.
+
+We can again look at the manpage. If type in `/POST`, press enter, and then press `n` to go to the next occurrence a few times, we'll find the following entry:
+
+```txt
+       -d, --data <data>
+              (HTTP) Sends the specified data in a POST request to the HTTP server,  in  the
+              same  way  that  a  browser  does  when  a user has filled in an HTML form and
+              presses the submit button. This will cause curl to pass the data to the server
+              using  the  content-type  application/x-www-form-urlencoded.   Compare  to -F,
+              --form.
+
+              ...
+
+              If  any  of these options is used more than once on the same command line, the
+              data pieces specified will be merged  together  with  a  separating  &-symbol.
+              Thus,  using  '-d name=daniel -d skill=lousy' would generate a post chunk that
+              looks like 'name=daniel&skill=lousy'.
+
+              ...
+```
+
+Using this option, we can send the requested data. The page also shows an example of how to specify the data, so we can use that in our case like so:
+
+```sh
+curl -k https://curlingfun:9090/ --data "skip=alabaster"
+```
+
+In the screenshot below, I also added the `-X POST` option. The `-X` option as you may gave guessed sets the request method. I did this out of habit, but it is not needed at all. The `--data` option automatically converts it to a POST request for you.
+
+### Task 4
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/cookie.png" title="Question 4" >}}
+
+Next up is sending a cookie along. A quick search in the manpage will yield us the following result:
+
+```txt
+       -b, --cookie <data|filename>
+              (HTTP) Pass the data to the HTTP server in the Cookie header. It is supposedly
+              the  data  previously  received  from the server in a "Set-Cookie:" line.  The
+              data should be in the format "NAME1=VALUE1; NAME2=VALUE2".
+
+              ...
+```
+
+The page also conveniently shows us the format in which the data is expected. Let's fill it in and send it.
+
+```sh
+curl -k https://curlingfun:9090/ --cookie "end=3"
+```
+
+### Task 5
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/headers.png" title="Question 5" >}}
+
+This time, we'll have to get curl to show us the headers it received as well.
+
+You know the drill by now, this is what the manpage shows:
+
+```txt
+       -i, --include
+              Include the HTTP response headers in the output. The HTTP response headers can
+              include  things  like server name, cookies, date of the document, HTTP version
+              and more...
+
+              ...
+```
+
+We won't have to send any data, so we can leave all other things out.
+
+```sh
+curl -k -i https://curlingfun:9090/
+```
+
+### Task 6
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/header.png" title="Question 6" >}}
+
+For the sixth task, we need to send a header along with the request.
+
+Once again, the manpage helps us out:
+
+```txt
+       -H, --header <header/@file>
+              (HTTP) Extra header to include in the request when sending HTTP to  a  server.
+              You  may  specify  any  number of extra headers.
+
+              ...
+
+              Example:
+
+               curl -H "X-First-Name: Joe" http://example.com/
+
+              ...
+```
+
+```sh
+curl -k https://curlingfun:9090/ -H "Stone: Granite"
+```
+
+### Task 7
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/path-as-is.png" title="Question 7" >}}
+
+We have made it to the last task; making a request with `./` in the url. Because actually wanting to send `./` or `../` is very rare and often unintended (only hackers would want to), curl resolves them locally before sending the request.
+
+Luckily, we can also disable this functionality:
+
+```txt
+       --path-as-is
+              Tell curl to not handle sequences of /../ or /./ in the given URL  path.  Nor‐
+              mally  curl will squash or merge them according to standards but with this op‐
+              tion set you tell it not to do that.
+```
+
+We'll just add that option to our final command:
+
+```sh
+curl -k --path-as-is https://curlingfun:9090/../../etc/hacks
+```
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/silver.png" title="Silver" >}}
+
+And... bam! We got the medal!
+
+### Tl;dr
+
+These are the commands in order:
+
+```sh
+curl http://curlingfun:8080/
+curl -k https://curlingfun:9090/
+curl -k https://curlingfun:9090/ --data "skip=alabaster"
+curl -k https://curlingfun:9090/ --cookie "end=3"
+curl -k -i https://curlingfun:9090/
+curl -k https://curlingfun:9090/ -H "Stone: Granite"
+curl -k --path-as-is https://curlingfun:9090/../../etc/hacks
+```
+
+## Gold
+
+### Continued story line
+
+Let's first talk to the elf again, he'll tell us what we'll have to do for gold.
+
+```txt
+Bravo! Look at you, curling through that like a true web wizard!
+
+You zipped through that challenge faster than a curling stone on enchanted ice!
+
+You know... rumor has it you can breeze through this with just three commands. Why don’t you give it a whirl?
+```
+
+### Task 1
+
+At first, I though we could just combine the previous commands in one, and solve it, but, alas, this was not the case...
+
+This is the input I tried:
+
+```sh
+curl http://curlingfun:8080/
+curl -k -X POST https://curlingfun:9090/ --data "skip=alabaster" --cookie "end=3" -H "Stone: Granite"
+curl -k  --path-as-is https://curlingfun:9090/../../etc/hacks
+```
+
+Curious as to what we needs to be done, we should explore further. Let's start by listing the files in the current directory. This turns out to be a good idea, as we find a file there; `HARD-MODE.txt`.
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/hard-mode.png" title="HARD-MODE.txt" >}}
+
+Turns out we get some more steps to follow. We have already practiced all the things needed here with the silver one, so we can apply the knowledge gained there with this task.
+
+```sh
+curl -k https://curlingfun:9090/ --data "skip=bow" --cookie "end=10" -H "Hack: 12ft"
+```
+
+### Task 2
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/gold2.png" title="Question 2" >}}
+
+The second one also brings nothing new, the `--path-as-is` option will help us again here:
+
+```sh
+curl -k --path-as-is https://curlingfun:9090/../../etc/button
+```
+
+### Task 3
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/gold3.png" title="Question 3" >}}
+
+For the third task, we got something new. The message shows us that the url will redirect us.
+
+By default, curl will not follow redirects. As you may have guessed by now though, there is way to enable this functionality, and it's written in the manpage:
+
+```txt
+       -L, --location
+              (HTTP)  If the server reports that the requested page has moved to a different
+              location (indicated with a Location: header and a 3XX response code), this op‐
+              tion  will  make curl redo the request on the new place.
+
+              ...
+```
+
+We can then add this option to the command as follows:
+
+```sh
+curl -k -L https://curlingfun:9090/GoodSportsmanship
+```
+
+{{< figure src="/img/writeups/holiday-hack-challenge/2024/act1/curling/gold.png" title="Gold" >}}
+
+And that's it, we got the gold medal!

content/writeups/holiday-hack-challenge/2024/prologue/elf-connect.md

@@ -7,7 +7,6 @@ description = "Let's play our first game of the Holiday Hack Challenge. To win,
 cover = "img/writeups/holiday-hack-challenge/2024/prologue/elf-connect/cover.png"
 tags = [
     "Holiday Hack Challenge",
-    "Prologue",
     "ctf",
     "hacking",
     "writeup",

content/writeups/holiday-hack-challenge/2024/prologue/elf-minder.md

@@ -7,7 +7,6 @@ description = "On to our second game of the Holiday Hack Challenge. This time we
 cover = "img/writeups/holiday-hack-challenge/2024/prologue/elf-minder/cover.png"
 tags = [
     "Holiday Hack Challenge",
-    "Prologue",
     "ctf",
     "hacking",
     "writeup",

content/writeups/holiday-hack-challenge/2024/prologue/orientation.md

@@ -7,7 +7,6 @@ description = "An easy start of the Holiday Hack Challenge 2024."
 cover = "img/writeups/holiday-hack-challenge/2024/prologue/orientation/cover.png"
 tags = [
     "Holiday Hack Challenge",
-    "Prologue",
     "ctf",
     "hacking",
     "writeup",

themes/maik-blog/assets/js/main.js

@@ -1,20 +1,42 @@
 window.addEventListener("load", () => {
+    // Enlarged floating figures
     for (let figure of document.getElementsByTagName("figure")) {
-        if (figure.classList.contains("post-cover") || figure.classList.contains("portfolio-cover"))
+        if (
-            continue
+            figure.classList.contains("post-cover") ||
+            figure.classList.contains("portfolio-cover")
+        )
+            continue;
 
         figure.addEventListener("click", () => {
-            figure.classList.toggle("floated-focus")
+            figure.classList.toggle("floated-focus");
-        })
+        });
     }
 
-    document.addEventListener('keydown', (e) => {
+    document.addEventListener("keydown", (e) => {
-        if (e.keyCode !== 27)
+        if (e.keyCode !== 27) return;
-            return
 
         for (let figure of document.getElementsByClassName("floated-focus")) {
-            figure.classList.remove("floated-focus")
+            figure.classList.remove("floated-focus");
         }
+    });
 
-    })
+    // Add anchors to article headings
-})
+    for (let article of document.getElementsByTagName("article")) {
+        for (let heading of article.querySelectorAll(
+            "h1, h2, h3, h4, h5, h6"
+        )) {
+            if (!heading.id) continue;
+
+            let anchor = document.createElement("a");
+            anchor.innerHTML = heading.innerHTML;
+            anchor.href = "#" + heading.id;
+            heading.innerHTML = "";
+            heading.appendChild(anchor);
+            heading.classList.add("article-heading");
+
+            anchor.addEventListener("click", (e) => {
+                navigator.clipboard.writeText(anchor.href);
+            });
+        }
+    }
+});

themes/maik-blog/assets/js/menu.js

@@ -3,20 +3,20 @@
 const menuTrigger = document.querySelector(".menu-trigger");
 const menu = document.querySelector(".menu");
 const mobileQuery = getComputedStyle(document.body).getPropertyValue(
-  "--phoneWidth"
+    "--phoneWidth"
 );
 const isMobile = () => window.matchMedia(mobileQuery).matches;
 const isMobileMenu = () => {
-  menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile());
+    menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile());
-  menu && menu.classList.toggle("hidden", isMobile());
+    menu && menu.classList.toggle("hidden", isMobile());
 };
 
 isMobileMenu();
 
 menuTrigger &&
-  menuTrigger.addEventListener(
+    menuTrigger.addEventListener(
-    "click",
+        "click",
-    () => menu && menu.classList.toggle("hidden")
+        () => menu && menu.classList.toggle("hidden")
-  );
+    );
 
-window.addEventListener("resize", isMobileMenu);
+window.addEventListener("resize", isMobileMenu);

themes/maik-blog/assets/js/nav.js

@@ -1,38 +1,40 @@
+// Path navigation on top left
 window.addEventListener("load", () => {
-  const terminal = document.getElementById('nav-terminal')
+    const terminal = document.getElementById("nav-terminal");
 
-  const keyDown = (e) => {
+    const keyDown = (e) => {
-    if (e.keyCode === 13) {
+        if (e.keyCode === 13) {
-      if (document.activeElement !== document.body) return
+            if (document.activeElement !== document.body) return;
-      if (terminal.textContent.length === 0) return
+            if (terminal.textContent.length === 0) return;
 
-      if (terminal.textContent.includes("~")) terminal.textContent = ""
+            if (terminal.textContent.includes("~")) terminal.textContent = "";
 
-      window.location.href = window.location.origin + "/" + terminal.textContent
+            window.location.href =
-      return
+                window.location.origin + "/" + terminal.textContent;
-    }
+            return;
+        }
 
-    if (e.keyCode === 8) {
+        if (e.keyCode === 8) {
-      terminal.textContent = terminal.textContent.slice(0, -1)
+            terminal.textContent = terminal.textContent.slice(0, -1);
-      return
+            return;
-    }
+        }
 
-    if (e.keyCode === 192) {
+        if (e.keyCode === 192) {
-      if (terminal.textContent.length !== 0) return
+            if (terminal.textContent.length !== 0) return;
 
-      terminal.textContent += "~"
+            terminal.textContent += "~";
-      return
+            return;
-    }
+        }
 
-    if (e.keyCode === 191) {
+        if (e.keyCode === 191) {
-      terminal.textContent += "/"
+            terminal.textContent += "/";
-      return
+            return;
-    }
+        }
 
-    if (e.keyCode < 65 || e.keyCode > 90) return
+        if (e.keyCode < 65 || e.keyCode > 90) return;
 
-    terminal.textContent += e.key.toLowerCase()
+        terminal.textContent += e.key.toLowerCase();
-  }
+    };
 
-  document.addEventListener('keydown', keyDown)
+    document.addEventListener("keydown", keyDown);
-})
+});

themes/maik-blog/assets/js/theme.js

@@ -6,20 +6,20 @@ const isDark = theme === "dark";
 var metaThemeColor = document.querySelector("meta[name=theme-color]");
 
 if (theme !== null) {
-  document.body.classList.toggle("dark-theme", isDark);
+    document.body.classList.toggle("dark-theme", isDark);
-  isDark
+    isDark
-    ? metaThemeColor.setAttribute("content", "#252627")
+        ? metaThemeColor.setAttribute("content", "#252627")
-    : metaThemeColor.setAttribute("content", "#fafafa");
+        : metaThemeColor.setAttribute("content", "#fafafa");
 }
 
 themeToggle.addEventListener("click", () => {
-  document.body.classList.toggle("dark-theme");
+    document.body.classList.toggle("dark-theme");
-  window.localStorage &&
+    window.localStorage &&
-    window.localStorage.setItem(
+        window.localStorage.setItem(
-      "theme",
+            "theme",
-      document.body.classList.contains("dark-theme") ? "dark" : "light"
+            document.body.classList.contains("dark-theme") ? "dark" : "light"
-    );
+        );
-  document.body.classList.contains("dark-theme")
+    document.body.classList.contains("dark-theme")
-    ? metaThemeColor.setAttribute("content", "#252627")
+        ? metaThemeColor.setAttribute("content", "#252627")
-    : metaThemeColor.setAttribute("content", "#fafafa");
+        : metaThemeColor.setAttribute("content", "#fafafa");
 });

themes/maik-blog/assets/scss/_buttons.scss

@@ -1,99 +1,101 @@
 .button-container {
-  display: table;
+    display: table;
-  margin-left: auto;
+    margin-left: auto;
-  margin-right: auto;
+    margin-right: auto;
 }
 
 button,
 .button,
 a.button {
-  position: relative;
+    position: relative;
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
-  padding: 8px 18px;
-  margin-bottom: 5px;
-  background: $light-background-secondary;
-  text-decoration: none;
-  text-align: center;
-  font-weight: 500;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  appearance: none;
-  cursor: pointer;
-  outline: none;
-
-  .dark-theme & {
-    background: $dark-background-secondary;
-    color: inherit;
-  }
-
-  /* variants */
-
-  &.outline {
-    background: transparent;
-    border-color: $light-background-secondary;
-    box-shadow: none;
     padding: 8px 18px;
+    margin-bottom: 5px;
+    background: $light-background-secondary;
+    text-decoration: none;
+    text-align: center;
+    font-weight: 500;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    appearance: none;
+    cursor: pointer;
+    outline: none;
 
     .dark-theme & {
-      border-color: $dark-background-secondary;
+        background: $dark-background-secondary;
-      color: inherit;
+        color: inherit;
     }
 
-    :hover {
+    /* variants */
-      transform: none;
+
-      box-shadow: none;
+    &.outline {
+        background: transparent;
+        border-color: $light-background-secondary;
+        box-shadow: none;
+        padding: 8px 18px;
+
+        .dark-theme & {
+            border-color: $dark-background-secondary;
+            color: inherit;
+        }
+
+        :hover {
+            transform: none;
+            box-shadow: none;
+        }
     }
-  }
 
-  &.primary {
+    &.primary {
-    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
+        box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
+            0 1px 3px rgba(0, 0, 0, 0.08);
 
-    &:hover {
+        &:hover {
-      box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08);
+            box-shadow: 0 2px 6px rgba(50, 50, 93, 0.21),
+                0 1px 3px rgba(0, 0, 0, 0.08);
+        }
     }
-  }
 
-  &.link {
+    &.link {
-    background: none;
+        background: none;
-    font-size: 1rem;
+        font-size: 1rem;
-  }
+    }
 
-  &.small {
+    &.small {
-    font-size: .8rem;
+        font-size: 0.8rem;
-  }
+    }
 
-  &.wide {
+    &.wide {
-    min-width: 200px;
+        min-width: 200px;
-    padding: 14px 24px;
+        padding: 14px 24px;
-  }
+    }
 }
 
 .code-toolbar {
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 
-  .toolbar-item a {
+    .toolbar-item a {
-    position: relative;
+        position: relative;
-    display: inline-flex;
+        display: inline-flex;
-    align-items: center;
+        align-items: center;
-    justify-content: center;
+        justify-content: center;
-    padding: 3px 8px;
+        padding: 3px 8px;
-    margin-bottom: 5px;
+        margin-bottom: 5px;
-    background: $light-background-secondary;
+        background: $light-background-secondary;
-    text-decoration: none;
+        text-decoration: none;
-    text-align: center;
+        text-align: center;
-    font-size: 13px;
+        font-size: 13px;
-    font-weight: 500;
+        font-weight: 500;
-    border-radius: 8px;
+        border-radius: 8px;
-    border: 1px solid transparent;
+        border: 1px solid transparent;
-    appearance: none;
+        appearance: none;
-    cursor: pointer;
+        cursor: pointer;
-    outline: none;
+        outline: none;
 
-    .dark-theme & {
+        .dark-theme & {
-      background: $dark-background-secondary;
+            background: $dark-background-secondary;
-      color: inherit;
+            color: inherit;
+        }
     }
-  }
+}
-}

themes/maik-blog/assets/scss/_code.scss

@@ -20,9 +20,8 @@
     }
 
     input[type="checkbox"]:checked {
-
+        ~ .highlight,
-        ~.highlight,
+        ~ .code-toolbar .highlight {
-        ~.code-toolbar .highlight {
             max-height: 0;
 
             padding: 0;
@@ -30,7 +29,7 @@
             overflow: hidden;
         }
 
-        ~.code-toolbar {
+        ~ .code-toolbar {
             padding: 0;
             border-top: none;
 
@@ -39,11 +38,11 @@
             }
         }
 
-        ~label {
+        ~ label {
             border-radius: 10px;
         }
 
-        ~label .collapsable-code__toggle:after {
+        ~ label .collapsable-code__toggle:after {
             content: attr(data-label-expand);
         }
     }
@@ -117,4 +116,4 @@
     .code-toolbar {
         margin: 0;
     }
-}
+}

themes/maik-blog/assets/scss/_fonts.scss

@@ -1,53 +1,53 @@
 @font-face {
-  font-family: 'Inter UI';
+    font-family: "Inter UI";
-  font-style: normal;
+    font-style: normal;
-  font-display: fallback;
+    font-display: fallback;
-  font-weight: 400;
+    font-weight: 400;
-  src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"),
+    src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"),
-    url("../fonts/Inter-UI-Regular.woff") format("woff");
+        url("../fonts/Inter-UI-Regular.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter UI';
+    font-family: "Inter UI";
-  font-style: italic;
+    font-style: italic;
-  font-display: fallback;
+    font-display: fallback;
-  font-weight: 400;
+    font-weight: 400;
-  src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"),
+    src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"),
-    url("../fonts/Inter-UI-Italic.woff") format("woff");
+        url("../fonts/Inter-UI-Italic.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter UI';
+    font-family: "Inter UI";
-  font-style: normal;
+    font-style: normal;
-  font-display: auto;
+    font-display: auto;
-  font-weight: 600;
+    font-weight: 600;
-  src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
+    src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
-    url("../fonts/Inter-UI-Medium.woff") format("woff");
+        url("../fonts/Inter-UI-Medium.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter UI';
+    font-family: "Inter UI";
-  font-style: italic;
+    font-style: italic;
-  font-display: fallback;
+    font-display: fallback;
-  font-weight: 600;
+    font-weight: 600;
-  src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
+    src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
-    url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
+        url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter UI';
+    font-family: "Inter UI";
-  font-style: normal;
+    font-style: normal;
-  font-display: fallback;
+    font-display: fallback;
-  font-weight: 800;
+    font-weight: 800;
-  src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
+    src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
-    url("../fonts/Inter-UI-Bold.woff") format("woff");
+        url("../fonts/Inter-UI-Bold.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter UI';
+    font-family: "Inter UI";
-  font-style: italic;
+    font-style: italic;
-  font-display: fallback;
+    font-display: fallback;
-  font-weight: 800;
+    font-weight: 800;
-  src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
+    src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
-    url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
+        url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
-}
+}

themes/maik-blog/assets/scss/_footer.scss

@@ -1,77 +1,77 @@
 .footer {
-  padding: 40px 20px;
+    padding: 40px 20px;
-  flex-grow: 0;
+    flex-grow: 0;
-  color: $light-color-secondary;
+    color: $light-color-secondary;
 
-  &__inner {
+    &__inner {
-    display: flex;
+        display: flex;
-    align-items: center;
+        align-items: center;
-    justify-content: center;
+        justify-content: center;
-    margin: 0 auto;
+        margin: 0 auto;
-    width: 760px;
+        width: 760px;
-    max-width: 100%;
+        max-width: 100%;
 
-    @media #{$media-size-tablet} {
+        @media #{$media-size-tablet} {
-      flex-direction: column;
+            flex-direction: column;
+        }
     }
-  }
 
-  &__content {
+    &__content {
-    display: flex;
+        display: flex;
-    flex-direction: column;
+        flex-direction: column;
-    align-items: center;
+        align-items: center;
-    font-size: 1rem;
+        font-size: 1rem;
-    color: $light-color-secondary;
+        color: $light-color-secondary;
 
-    &__section {
+        &__section {
-      display: flex;
+            display: flex;
-      flex-direction: row;
+            flex-direction: row;
-      align-items: center;
+            align-items: center;
-      padding: 5px;
+            padding: 5px;
 
-      @media #{$media-size-tablet} {
+            @media #{$media-size-tablet} {
-        margin-top: 10px;
+                margin-top: 10px;
-      }
+            }
 
-      &.regular {
+            &.regular {
-        @media #{$media-size-tablet} {
+                @media #{$media-size-tablet} {
-          flex-direction: column;
+                    flex-direction: column;
-        }
+                }
-        &>*:not(:last-child)::after {
+                & > *:not(:last-child)::after {
-          content: "•";
+                    content: "•";
-          padding: 0 5px;
+                    padding: 0 5px;
 
-          @media #{$media-size-tablet} {
+                    @media #{$media-size-tablet} {
-            content: "";
+                        content: "";
-            padding: 0;
+                        padding: 0;
-          }
+                    }
-        }
+                }
 
-        &>*:last-child {
+                & > *:last-child {
-          padding: 0 5px;
+                    padding: 0 5px;
 
-          @media #{$media-size-tablet} {
+                    @media #{$media-size-tablet} {
-            padding: 0;
+                        padding: 0;
-          }
+                    }
-        }
+                }
-      }
+            }
 
-      &.donations {
+            &.donations {
-        white-space: nowrap;
+                white-space: nowrap;
-        overflow-x: scroll;
+                overflow-x: scroll;
-        max-width: 600px;
+                max-width: 600px;
-        position: relative;
+                position: relative;
 
-        @media #{$media-size-tablet} {
+                @media #{$media-size-tablet} {
-          max-width: 180px;
+                    max-width: 180px;
-        }
+                }
 
-        .wallet {
+                .wallet {
-          .name {
+                    .name {
-            font-weight: 700;
+                        font-weight: 700;
-          }
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }

themes/maik-blog/assets/scss/_header.scss

@@ -1,54 +1,54 @@
 .header {
-  background: #fafafa;
+    background: #fafafa;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  padding: 20px;
-
-  .dark-theme & {
-    background: #242626;
-  }
-
-  &__right {
     display: flex;
-    flex-direction: row;
     align-items: center;
+    justify-content: center;
+    position: relative;
+    padding: 20px;
 
-    @media #{$media-size-phone} {
+    .dark-theme & {
-      flex-direction: row-reverse;
+        background: #242626;
     }
-  }
 
-  &__inner {
+    &__right {
-    display: flex;
+        display: flex;
-    align-items: center;
+        flex-direction: row;
-    justify-content: space-between;
+        align-items: center;
-    margin: 0 auto;
+
-    width: 760px;
+        @media #{$media-size-phone} {
-    max-width: 100%;
+            flex-direction: row-reverse;
+        }
+    }
 
-    a {
+    &__inner {
-      text-decoration: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 0 auto;
+        width: 760px;
+        max-width: 100%;
+
+        a {
+            text-decoration: none;
+        }
     }
-  }
 }
 
 .theme-toggle {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
-  line-height: 1;
+    line-height: 1;
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .theme-toggler {
-  fill: currentColor;
+    fill: currentColor;
 }
 
 .unselectable {
-  user-select: none;
+    user-select: none;
-  -webkit-user-select: none;
+    -webkit-user-select: none;
-  -moz-user-select: none;
+    -moz-user-select: none;
-  -ms-user-select: none;
+    -ms-user-select: none;
 }

themes/maik-blog/assets/scss/_logo.scss

@@ -1,42 +1,42 @@
 .logo {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  text-decoration: none;
+    text-decoration: none;
-  font-weight: bold;
+    font-weight: bold;
-  font-display: auto;
+    font-display: auto;
-  font-family: monospace, monospace;
+    font-family: monospace, monospace;
 
-  img {
+    img {
-    height: 44px;
+        height: 44px;
-  }
+    }
 
-  &__mark {
+    &__mark {
-    margin-right: 5px;
+        margin-right: 5px;
-  }
+    }
 
-  &__text {
+    &__text {
-    font-size: 1.125rem;
+        font-size: 1.125rem;
-  }
+    }
 
-  &__cursor {
+    &__cursor {
-    display: inline-block;
+        display: inline-block;
-    width: 10px;
+        width: 10px;
-    height: 1rem;
+        height: 1rem;
-    background: #252627;
+        background: #252627;
-    margin-left: 2px;
+        margin-left: 2px;
-    border-radius: 1px;
+        border-radius: 1px;
-    animation: cursor 1s infinite;
+        animation: cursor 1s infinite;
 
-    .dark-theme & {
+        .dark-theme & {
-      background: #fafafa;
+            background: #fafafa;
+        }
     }
-  }
 
-  @media (prefers-reduced-motion: reduce) {
+    @media (prefers-reduced-motion: reduce) {
-    &__cursor {
+        &__cursor {
-      animation: none;
+            animation: none;
+        }
     }
-  }
 }
 
 // // Fading
@@ -56,15 +56,15 @@
 
 // Blinking
 @keyframes cursor {
-  0% {
+    0% {
-    visibility: hidden;
+        visibility: hidden;
-  }
+    }
 
-  50% {
+    50% {
-    visibility: hidden;
+        visibility: hidden;
-  }
+    }
 
-  100% {
+    100% {
-    visibility: visible;
+        visibility: visible;
-  }
+    }
 }

themes/maik-blog/assets/scss/_main.scss

@@ -1,59 +1,60 @@
 /* Webkit Scrollbar Customize */
 ::-webkit-scrollbar {
-  width: 8px;
+    width: 8px;
-  height: 8px;
+    height: 8px;
-  background: #212020;
+    background: #212020;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #888;
+    background: #888;
 
-  &:hover {
+    &:hover {
-    background: #dcdcdc;
+        background: #dcdcdc;
-  }
+    }
 }
 
 html {
-  box-sizing: border-box;
+    box-sizing: border-box;
-  line-height: 1.6;
+    line-height: 1.6;
-  letter-spacing: 0.06em;
+    letter-spacing: 0.06em;
-  scroll-behavior: smooth;
+    scroll-behavior: smooth;
 }
 
 *,
 *:before,
 *:after {
-  box-sizing: inherit;
+    box-sizing: inherit;
 }
 
 body {
-  margin: 0;
+    margin: 0;
-  padding: 0;
+    padding: 0;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
+    font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
-    "Segoe UI", Helvetica, Arial, sans-serif;
+        "Segoe UI", Helvetica, Arial, sans-serif;
-  font-display: auto;
+    font-display: auto;
-  font-size: 1rem;
-  line-height: 1.54;
-  background-color: $light-background;
-  color: $light-color;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
-  -webkit-overflow-scrolling: touch;
-  -webkit-text-size-adjust: 100%;
-
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-
-  @media #{$media-size-phone} {
     font-size: 1rem;
-  }
+    line-height: 1.54;
+    background-color: $light-background;
+    color: $light-color;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01",
+        "locl";
+    -webkit-overflow-scrolling: touch;
+    -webkit-text-size-adjust: 100%;
 
-  &.dark-theme {
+    display: flex;
-    background-color: $dark-background;
+    min-height: 100vh;
-    color: $dark-color;
+    flex-direction: column;
-  }
+
+    @media #{$media-size-phone} {
+        font-size: 1rem;
+    }
+
+    &.dark-theme {
+        background-color: $dark-background;
+        color: $dark-color;
+    }
 }
 
 h2,
@@ -61,406 +62,465 @@ h3,
 h4,
 h5,
 h6 {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  line-height: 1.3;
+    line-height: 1.3;
 }
 
 h1 {
-  font-size: 2.625rem;
+    font-size: 2.625rem;
 }
 
 h2 {
-  font-size: 1.625rem;
+    font-size: 1.625rem;
 }
 
 h3 {
-  font-size: 1.375rem;
+    font-size: 1.375rem;
 }
 
 h4 {
-  font-size: 1.125rem;
+    font-size: 1.125rem;
 }
 
 @media #{$media-size-phone} {
-  h1 {
+    h1 {
-    font-size: 2rem;
+        font-size: 2rem;
-  }
+    }
 
-  h2 {
+    h2 {
-    font-size: 1.4rem;
+        font-size: 1.4rem;
-  }
+    }
 
-  h3 {
+    h3 {
-    font-size: 1.15rem;
+        font-size: 1.15rem;
-  }
+    }
 
-  h4 {
+    h4 {
-    font-size: 1.125rem;
+        font-size: 1.125rem;
-  }
+    }
 }
 
 a {
-  color: inherit;
+    color: inherit;
 }
 
 img {
-  display: block;
+    display: block;
-  width: auto;
+    width: auto;
-  height: auto;
+    height: auto;
-  max-width: 100%;
+    max-width: 100%;
 
-  &.left {
+    &.left {
-    margin-right: auto;
+        margin-right: auto;
-  }
+    }
 
-  &.center {
+    &.center {
-    margin-left: auto;
+        margin-left: auto;
-    margin-right: auto;
+        margin-right: auto;
-  }
+    }
 
-  &.right {
+    &.right {
-    margin-left: auto;
+        margin-left: auto;
-  }
+    }
 
-  &.circle {
+    &.circle {
-    border-radius: 50%;
+        border-radius: 50%;
-    max-width: 25%;
+        max-width: 25%;
-    margin: auto;
+        margin: auto;
-  }
+    }
 }
 
 figure {
-  display: table;
+    display: table;
-  max-width: 100%;
+    max-width: 100%;
-  margin: 25px 0;
+    margin: 25px 0;
-
-  img {
-    border-radius: 8px;
-    padding: 5px;
-
-    .dark-theme & {
-      background-color: #ffffff4f;
-    }
-  }
-
-  &.left {
-    margin-right: auto;
-  }
-
-  &.left-floated {
-    margin-right: auto;
-    float: left;
 
     img {
-      margin: 20px 20px 20px 0;
+        border-radius: 8px;
-    }
+        padding: 5px;
-  }
-
-  &.center {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  &.right {
-    margin-left: auto;
-  }
 
-  &.right-floated {
+        .dark-theme & {
-    margin-left: auto;
+            background-color: #ffffff4f;
-    float: right;
+        }
-
-    img {
-      margin: 20px 0 20px 20px;
     }
-  }
 
-  &.rounded {
+    &.left {
-    img {
+        margin-right: auto;
-      border-radius: 50%;
     }
-  }
 
-  figcaption {
+    &.left-floated {
-    font-size: 1.125rem;
+        margin-right: auto;
-    line-height: 1.3;
+        float: left;
-    margin-top: 0.4em;
-    font-weight: bold;
-    opacity: 0.8;
 
-    &.left {
+        img {
-      text-align: left;
+            margin: 20px 20px 20px 0;
+        }
     }
 
     &.center {
-      text-align: center;
+        margin-left: auto;
+        margin-right: auto;
     }
 
     &.right {
-      text-align: right;
+        margin-left: auto;
     }
-  }
 
-  &.small {
+    &.right-floated {
-    max-width: 300px;
+        margin-left: auto;
-    width: 90%;
+        float: right;
-    margin: 5px 0;
-  }
 
-  &.inline {
+        img {
-    display: inline-table;
+            margin: 20px 0 20px 20px;
-  }
+        }
+    }
 
-  &.floated-focus {
+    &.rounded {
-    display: flex;
+        img {
-    position:fixed;
+            border-radius: 50%;
-    top: 0;
+        }
-    left: 0;
+    }
-    width: 100vw;
-    max-width: unset;
-    height: 100vh;
-    padding: 3rem;
-    margin: 0;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    background-color: #212020ec;
-    z-index: 10000;
 
     figcaption {
-      color: #ddd3c6;
+        font-size: 1.125rem;
-      font-size: 1.5rem;
+        line-height: 1.3;
+        margin-top: 0.4em;
+        font-weight: bold;
+        opacity: 0.8;
+
+        &.left {
+            text-align: left;
+        }
+
+        &.center {
+            text-align: center;
+        }
+
+        &.right {
+            text-align: right;
+        }
+    }
+
+    &.small {
+        max-width: 300px;
+        width: 90%;
+        margin: 5px 0;
     }
 
-    &:after {
+    &.inline {
-      content: "Close";
+        display: inline-table;
-      margin-top: 1rem;
+    }
-      text-decoration: underline;
+
-      cursor: pointer;
+    &.floated-focus {
-      display: block;
+        display: flex;
-      color: #999288;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        max-width: unset;
+        height: 100vh;
+        padding: 3rem;
+        margin: 0;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        background-color: #212020ec;
+        z-index: 10000;
+
+        figcaption {
+            color: #ddd3c6;
+            font-size: 1.5rem;
+        }
+
+        &:after {
+            content: "Close";
+            margin-top: 1rem;
+            text-decoration: underline;
+            cursor: pointer;
+            display: block;
+            color: #999288;
+        }
     }
-  }
 }
 
 code {
-  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+    font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
-  font-display: auto;
+    font-display: auto;
-  font-feature-settings: normal;
+    font-feature-settings: normal;
-  background: $light-background-secondary;
+    background: $light-background-secondary;
-  padding: 1px 6px;
+    padding: 1px 6px;
-  margin: 0 2px;
+    margin: 0 2px;
-  border-radius: 5px;
+    border-radius: 5px;
-  font-size: 0.95rem;
+    font-size: 0.95rem;
-  word-wrap: break-word;
+    word-wrap: break-word;
 
-  .dark-theme & {
+    .dark-theme & {
-    background: $dark-background-secondary;
+        background: $dark-background-secondary;
-  }
+    }
 }
 
 pre {
-  // background: #212020;
+    // background: #212020;
-  padding: 10px 10px 10px 20px;
+    padding: 10px 10px 10px 20px;
-  border-radius: 8px;
+    border-radius: 8px;
-  font-size: 0.95rem;
+    font-size: 0.95rem;
-  overflow: auto;
+    overflow: auto;
-
-  @media #{$media-size-phone} {
-    white-space: pre-wrap;
-    word-wrap: break-word;
-  }
 
-  code {
+    @media #{$media-size-phone} {
-    background: none !important;
+        white-space: pre-wrap;
-    color: #ccc;
+        word-wrap: break-word;
-    margin: 0;
+    }
-    padding: 0;
-    font-size: inherit;
 
-    .dark-theme & {
+    code {
-      color: inherit;
+        background: none !important;
+        color: #ccc;
+        margin: 0;
+        padding: 0;
+        font-size: inherit;
+
+        .dark-theme & {
+            color: inherit;
+        }
     }
-  }
 }
 
 blockquote {
-  border-left: 2px solid;
+    border-left: 2px solid;
-  margin: 40px;
+    margin: 40px;
-  padding: 10px 20px;
+    padding: 10px 20px;
-
+
-  @media #{$media-size-phone} {
+    @media #{$media-size-phone} {
-    margin: 10px;
+        margin: 10px;
-    padding: 10px;
+        padding: 10px;
-  }
+    }
-
-  &:before {
-    content: "”";
-    font-family: Georgia, serif;
-    font-display: auto;
-    font-size: 3.875rem;
-    position: absolute;
-    left: -40px;
-    top: -20px;
-  }
 
-  p:first-of-type {
+    &:before {
-    margin-top: 0;
+        content: "”";
-  }
+        font-family: Georgia, serif;
+        font-display: auto;
+        font-size: 3.875rem;
+        position: absolute;
+        left: -40px;
+        top: -20px;
+    }
+
+    p:first-of-type {
+        margin-top: 0;
+    }
 
-  p:last-of-type {
+    p:last-of-type {
-    margin-bottom: 0;
+        margin-bottom: 0;
-  }
+    }
 }
 
 ul,
 ol {
-  margin-left: 40px;
+    margin-left: 40px;
-  padding: 0;
+    padding: 0;
 
-  @media #{$media-size-phone} {
+    @media #{$media-size-phone} {
-    margin-left: 20px;
+        margin-left: 20px;
-  }
+    }
 }
 
 ol ol {
-  list-style-type: lower-alpha;
+    list-style-type: lower-alpha;
 }
 
 .container {
-  flex: 1 auto;
+    flex: 1 auto;
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  justify-content: center;
+    justify-content: center;
-  text-align: center;
+    text-align: center;
 }
 
 .content {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  flex: 1 auto;
+    flex: 1 auto;
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
-  margin: 0;
+    margin: 0;
-
+
-  @media #{$media-size-phone} {
+    @media #{$media-size-phone} {
-    margin-top: 0;
+        margin-top: 0;
-  }
+    }
-
+
-  &-list {
+    &-list {
-    display: block;
+        display: block;
-  }
+    }
 }
 
 hr {
-  width: 100%;
+    width: 100%;
-  border: none;
+    border: none;
-  background: $light-border-color;
+    background: $light-border-color;
-  height: 1px;
+    height: 1px;
 
-  .dark-theme & {
+    .dark-theme & {
-    background: $dark-border-color;
+        background: $dark-border-color;
-  }
+    }
 }
 
 svg {
-  height: 1em;
+    height: 1em;
 }
 
 .hidden {
-  display: none;
+    display: none;
 }
 
 .hide-on-phone {
-  @media #{$media-size-phone} {
+    @media #{$media-size-phone} {
-    display: none;
+        display: none;
-  }
+    }
 }
 
 .hide-on-tablet {
-  @media #{$media-size-tablet} {
+    @media #{$media-size-tablet} {
-    display: none;
+        display: none;
-  }
+    }
 }
 
 // Accessibility
 .screen-reader-text {
-  border: 0;
+    border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
+    clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
+    clip-path: inset(50%);
-  height: 1px;
+    height: 1px;
-  margin: -1px;
+    margin: -1px;
-  overflow: hidden;
+    overflow: hidden;
-  padding: 0;
+    padding: 0;
-  position: absolute !important;
+    position: absolute !important;
-  width: 1px;
+    width: 1px;
-  word-wrap: normal !important;
+    word-wrap: normal !important;
 }
 
 .screen-reader-text:focus {
-  background-color: #f1f1f1;
+    background-color: #f1f1f1;
-  border-radius: 3px;
+    border-radius: 3px;
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-  clip: auto !important;
+    clip: auto !important;
-  clip-path: none;
+    clip-path: none;
-  color: #21759b;
+    color: #21759b;
-  display: block;
+    display: block;
-  font-size: 14px;
+    font-size: 14px;
-  font-size: 0.875rem;
+    font-size: 0.875rem;
-  font-weight: bold;
+    font-weight: bold;
-  height: auto;
+    height: auto;
-  width: auto;
+    width: auto;
-  top: 5px;
+    top: 5px;
-  left: 5px;
+    left: 5px;
-  line-height: normal;
+    line-height: normal;
-  padding: 15px 23px 14px;
+    padding: 15px 23px 14px;
-  text-decoration: none;
+    text-decoration: none;
-  z-index: 100000;
+    z-index: 100000;
 }
 
 // Custom
 .socials {
-  user-select: none;
+    user-select: none;
 
-  svg {
+    svg {
-    font-size: 1.5rem;
+        font-size: 1.5rem;
-  }
+    }
 }
 
 table {
-  width: 100%;
+    width: 100%;
-  padding: 10px 10px 10px 20px;
+    padding: 10px 10px 10px 20px;
-  border-radius: 8px;
+    border-radius: 8px;
-  font-size: 0.95rem;
+    font-size: 0.95rem;
-  overflow: auto;
+    overflow: auto;
-  background: $light-background-secondary;
+    background: $light-background-secondary;
 
-  th {
+    th {
-    padding: 8px 0px;
+        padding: 8px 0px;
-  }
+    }
 
-  td {
+    td {
-    padding: 6px 0px;
+        padding: 6px 0px;
 
-    border-top: 1px solid $light-color-secondary;
+        border-top: 1px solid $light-color-secondary;
-  }
+    }
 
-  .dark-theme & {
+    .dark-theme & {
-    background: $dark-background-secondary;
+        background: $dark-background-secondary;
 
-    td {
+        td {
-      border-top-color: $dark-color-secondary;
+            border-top-color: $dark-color-secondary;
+        }
     }
-  }
 }
 
 .feather {
-  display: inline-block;
+    display: inline-block;
-  vertical-align: -0.125em;
+    vertical-align: -0.125em;
-  width: 1em;
+    width: 1em;
-  height: 1em;
+    height: 1em;
 }
 
 .nostyle {
-  text-decoration: none;
+    text-decoration: none;
+}
+
+.breadcrumbs {
+    display: inline;
+
+    ol {
+        list-style-type: none;
+        margin: 0;
+        display: inline;
+
+        li {
+            display: inline;
+
+            &::after {
+                content: " > ";
+            }
+        }
+    }
+}
+
+.article-heading {
+    a {
+        position: relative;
+        text-decoration: none;
+
+        &:hover {
+            &::after {
+                content: " ";
+                display: inline-block;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                height: 100%;
+
+                background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-link%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%3E%3C/path%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%3E%3C/path%3E%3C/svg%3E");
+                background-repeat: no-repeat;
+                background-position: center;
+                background-size: auto 50%;
+            }
+        }
+
+        @media #{$media-size-tablet-min} {
+            &:hover {
+                &::after {
+                    right: 100%;
+                    width: 1.5em;
+                }
+            }
+        }
+
+        @media #{$media-size-tablet} {
+            &:hover {
+                &::after {
+                    left: 100%;
+                    width: 1.2em;
+                }
+            }
+        }
+    }
 }

themes/maik-blog/assets/scss/_masonry.scss

@@ -1,16 +1,14 @@
 .masonry {
-  display: grid;
+    display: grid;
-  margin-top: 20px;
+    margin-top: 20px;
-  grid-gap: 20px 90px;
+    grid-gap: 20px 90px;
-  grid-template-columns: repeat(2, minmax(250px, 1fr));
+    grid-template-columns: repeat(2, minmax(250px, 1fr));
-  // grid-auto-rows: 20px; // Set by JavaScript
-  // margin-bottom: calc(4 * 20px); // Set by JavaScript
 
-  > * {
+    > * {
-    margin: 0;
+        margin: 0;
-  }
+    }
 
-  @media #{$media-size-medium} {
+    @media #{$media-size-medium} {
-    grid-template-columns: 1fr;
+        grid-template-columns: 1fr;
-  }
+    }
 }

themes/maik-blog/assets/scss/_menu.scss

@@ -1,67 +1,67 @@
 .menu {
-  background: #fafafa;
+    background: #fafafa;
-  border-right: 1px solid;
+    border-right: 1px solid;
-  margin-right: 18px;
+    margin-right: 18px;
-  z-index: 9999;
+    z-index: 9999;
 
-  .dark-theme & {
+    .dark-theme & {
-    background: #252627;
+        background: #252627;
-  }
-
-  @media #{$media-size-phone} {
-    position: absolute;
-    top: 50px;
-    right: 0;
-    border: none;
-    margin: 0;
-    padding: 10px;
-  }
-
-  &__inner {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    max-width: 100%;
-    margin: 0 auto;
-    padding: 0 15px;
-    font-size: 1rem;
-    list-style: none;
-
-    li {
-      margin: 0 12px;
     }
 
     @media #{$media-size-phone} {
-      flex-direction: column;
+        position: absolute;
-      align-items: flex-start;
+        top: 50px;
-      padding: 0;
+        right: 0;
-
+        border: none;
-      li {
         margin: 0;
-        padding: 5px;
+        padding: 10px;
-      }
     }
-  }
 
-  &-trigger {
+    &__inner {
-    width: 24px;
+        display: flex;
-    height: 24px;
+        align-items: center;
-    fill: currentColor;
+        justify-content: flex-start;
-    margin-left: 10px;
+        max-width: 100%;
-    cursor: pointer;
+        margin: 0 auto;
-  }
+        padding: 0 15px;
+        font-size: 1rem;
+        list-style: none;
+
+        li {
+            margin: 0 12px;
+        }
 
-  a {
+        @media #{$media-size-phone} {
-    display: inline-block;
+            flex-direction: column;
-    margin-right: 15px;
+            align-items: flex-start;
-    text-decoration: none;
+            padding: 0;
 
-    &:hover {
+            li {
-      text-decoration: underline;
+                margin: 0;
+                padding: 5px;
+            }
+        }
     }
 
-    &:last-of-type {
+    &-trigger {
-      margin-right: 0;
+        width: 24px;
+        height: 24px;
+        fill: currentColor;
+        margin-left: 10px;
+        cursor: pointer;
+    }
+
+    a {
+        display: inline-block;
+        margin-right: 15px;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        &:last-of-type {
+            margin-right: 0;
+        }
     }
-  }
+}
-}

themes/maik-blog/assets/scss/_mixins.scss

@@ -1,3 +1,3 @@
 @mixin dimmed {
-  opacity: .6;
+    opacity: 0.6;
-}
+}

themes/maik-blog/assets/scss/_normalize.scss

@@ -8,8 +8,8 @@
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 html {
-  line-height: 1.15; // 1
+    line-height: 1.15; // 1
-  -webkit-text-size-adjust: 100%; // 2
+    -webkit-text-size-adjust: 100%; // 2
 }
 
 /* Sections
@@ -20,7 +20,7 @@ html {
  */
 
 body {
-  margin: 0;
+    margin: 0;
 }
 
 /**
@@ -28,7 +28,7 @@ body {
  */
 
 main {
-  display: block;
+    display: block;
 }
 
 /**
@@ -37,8 +37,8 @@ main {
  */
 
 h1 {
-  font-size: 2em;
+    font-size: 2em;
-  margin: 0.67em 0;
+    margin: 0.67em 0;
 }
 
 /* Grouping content
@@ -50,9 +50,9 @@ h1 {
  */
 
 hr {
-  box-sizing: content-box; // 1
+    box-sizing: content-box; // 1
-  height: 0; // 1
+    height: 0; // 1
-  overflow: visible; // 2
+    overflow: visible; // 2
 }
 
 /**
@@ -61,9 +61,9 @@ hr {
  */
 
 pre {
-  font-family: monospace, monospace; // 1
+    font-family: monospace, monospace; // 1
-  font-display: auto;
+    font-display: auto;
-  font-size: 1em; // 2
+    font-size: 1em; // 2
 }
 
 /* Text-level semantics
@@ -74,7 +74,7 @@ pre {
  */
 
 a {
-  background-color: transparent;
+    background-color: transparent;
 }
 
 /**
@@ -83,9 +83,9 @@ a {
  */
 
 abbr[title] {
-  border-bottom: none; // 1
+    border-bottom: none; // 1
-  text-decoration: underline; // 2
+    text-decoration: underline; // 2
-  text-decoration: underline dotted; // 2
+    text-decoration: underline dotted; // 2
 }
 
 /**
@@ -94,7 +94,7 @@ abbr[title] {
 
 b,
 strong {
-  font-weight: bolder;
+    font-weight: bolder;
 }
 
 /**
@@ -105,9 +105,9 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; // 1
+    font-family: monospace, monospace; // 1
-  font-display: auto;
+    font-display: auto;
-  font-size: 1em; // 2
+    font-size: 1em; // 2
 }
 
 /**
@@ -115,7 +115,7 @@ samp {
  */
 
 small {
-  font-size: 80%;
+    font-size: 80%;
 }
 
 /**
@@ -125,18 +125,18 @@ small {
 
 sub,
 sup {
-  font-size: 75%;
+    font-size: 75%;
-  line-height: 0;
+    line-height: 0;
-  position: relative;
+    position: relative;
-  vertical-align: baseline;
+    vertical-align: baseline;
 }
 
 sub {
-  bottom: -0.25em;
+    bottom: -0.25em;
 }
 
 sup {
-  top: -0.5em;
+    top: -0.5em;
 }
 
 /* Embedded content
@@ -147,7 +147,7 @@ sup {
  */
 
 img {
-  border-style: none;
+    border-style: none;
 }
 
 /* Forms
@@ -163,11 +163,11 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit; // 1
+    font-family: inherit; // 1
-  font-display: auto;
+    font-display: auto;
-  font-size: 100%; // 1
+    font-size: 100%; // 1
-  line-height: 1.15; // 1
+    line-height: 1.15; // 1
-  margin: 0; // 2
+    margin: 0; // 2
 }
 
 /**
@@ -177,7 +177,7 @@ textarea {
 
 button,
 input {
-  overflow: visible; // 1
+    overflow: visible; // 1
 }
 
 /**
@@ -187,7 +187,7 @@ input {
 
 button,
 select {
-  text-transform: none; // 1
+    text-transform: none; // 1
 }
 
 /**
@@ -198,7 +198,7 @@ button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button;
+    -webkit-appearance: button;
 }
 
 /**
@@ -209,8 +209,8 @@ button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
-  border-style: none;
+    border-style: none;
-  padding: 0;
+    padding: 0;
 }
 
 /**
@@ -221,7 +221,7 @@ button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
+    outline: 1px dotted ButtonText;
 }
 
 /**
@@ -229,7 +229,7 @@ button:-moz-focusring,
  */
 
 fieldset {
-  padding: 0.35em 0.75em 0.625em;
+    padding: 0.35em 0.75em 0.625em;
 }
 
 /**
@@ -240,12 +240,12 @@ fieldset {
  */
 
 legend {
-  box-sizing: border-box; // 1
+    box-sizing: border-box; // 1
-  color: inherit; // 2
+    color: inherit; // 2
-  display: table; // 1
+    display: table; // 1
-  max-width: 100%; // 1
+    max-width: 100%; // 1
-  padding: 0; // 3
+    padding: 0; // 3
-  white-space: normal; // 1
+    white-space: normal; // 1
 }
 
 /**
@@ -253,7 +253,7 @@ legend {
  */
 
 progress {
-  vertical-align: baseline;
+    vertical-align: baseline;
 }
 
 /**
@@ -261,7 +261,7 @@ progress {
  */
 
 textarea {
-  overflow: auto;
+    overflow: auto;
 }
 
 /**
@@ -271,8 +271,8 @@ textarea {
 
 [type="checkbox"],
 [type="radio"] {
-  box-sizing: border-box; // 1
+    box-sizing: border-box; // 1
-  padding: 0; // 2
+    padding: 0; // 2
 }
 
 /**
@@ -281,7 +281,7 @@ textarea {
 
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
-  height: auto;
+    height: auto;
 }
 
 /**
@@ -290,8 +290,8 @@ textarea {
  */
 
 [type="search"] {
-  -webkit-appearance: textfield; // 1
+    -webkit-appearance: textfield; // 1
-  outline-offset: -2px; // 2
+    outline-offset: -2px; // 2
 }
 
 /**
@@ -299,7 +299,7 @@ textarea {
  */
 
 [type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+    -webkit-appearance: none;
 }
 
 /**
@@ -308,8 +308,8 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; // 1
+    -webkit-appearance: button; // 1
-  font: inherit; // 2
+    font: inherit; // 2
 }
 
 /* Interactive
@@ -320,7 +320,7 @@ textarea {
  */
 
 details {
-  display: block;
+    display: block;
 }
 
 /*
@@ -328,7 +328,7 @@ details {
  */
 
 summary {
-  display: list-item;
+    display: list-item;
 }
 
 /* Misc
@@ -339,7 +339,7 @@ summary {
  */
 
 template {
-  display: none;
+    display: none;
 }
 
 /**
@@ -347,5 +347,5 @@ template {
  */
 
 [hidden] {
-  display: none;
+    display: none;
-}
+}

themes/maik-blog/assets/scss/_portfolio.scss

@@ -1,206 +1,206 @@
 .portfolio {
-  width: 100%;
+    width: 100%;
-  max-width: 1000px;
+    max-width: 1000px;
-  text-align: left;
+    text-align: left;
-  padding: 20px;
+    padding: 20px;
-  margin: 20px auto;
+    margin: 20px auto;
 
-  @media #{$media-size-medium} {
+    @media #{$media-size-medium} {
-    max-width: 800px;
+        max-width: 800px;
-  }
+    }
+
+    @media #{$media-size-tablet} {
+        max-width: 600px;
+    }
 
-  @media #{$media-size-tablet} {
+    &-title {
-    max-width: 600px;
+        font-size: 2.625rem;
-  }
+        margin: 0 0 20px;
 
-  &-title {
+        @media #{$media-size-phone} {
-    font-size: 2.625rem;
+            font-size: 2rem;
-    margin: 0 0 20px;
+        }
 
-    @media #{$media-size-phone} {
+        a {
-      font-size: 2rem;
+            text-decoration: none;
+        }
     }
 
-    a {
+    &-timespan {
-      text-decoration: none;
+        margin-top: -20px;
+        font-size: 0.9em;
     }
-  }
 
-  &-timespan {
+    &-tags {
-    margin-top: -20px;
+        display: block;
-    font-size: 0.9em;
+        margin-bottom: 20px;
-  }
+        font-size: 1rem;
+        opacity: 0.5;
 
-  &-tags {
+        a {
-    display: block;
+            text-decoration: none;
-    margin-bottom: 20px;
+        }
-    font-size: 1rem;
+    }
-    opacity: 0.5;
 
-    a {
+    &-content {
-      text-decoration: none;
+        margin-top: 30px;
     }
-  }
 
-  &-content {
+    &-links {
-    margin-top: 30px;
+        font-size: 0.8em;
-  }
+        margin-top: -8px;
+        opacity: 0.7;
 
-  &-links {
+        a {
-    font-size: 0.8em;
+            text-decoration: none;
-    margin-top: -8px;
+        }
-    opacity: 0.7;
 
-    a {
+        > * {
-      text-decoration: none;
+            margin-right: 8px;
+        }
     }
 
-    > * {
+    &-cover {
-      margin-right: 8px;
+        border-radius: 8px;
-    }
+        margin: 30px -50px;
-  }
+        width: 1060px;
+        max-width: 1060px;
 
-  &-cover {
+        @media #{$media-size-medium} {
-    border-radius: 8px;
+            max-width: 860px;
-    margin: 30px -50px;
+        }
-    width: 1060px;
-    max-width: 1060px;
 
-    @media #{$media-size-medium} {
+        @media #{$media-size-tablet} {
-      max-width: 860px;
+            margin: 20px 0;
+            width: 100%;
+        }
     }
 
-    @media #{$media-size-tablet} {
+    &-info {
-      margin: 20px 0;
+        margin-top: 30px;
-      width: 100%;
+        font-size: 0.8rem;
-    }
+        line-height: normal;
-  }
+        @include dimmed;
 
-  &-info {
+        p {
-    margin-top: 30px;
+            margin: 0.8em 0;
-    font-size: 0.8rem;
+        }
-    line-height: normal;
-    @include dimmed;
 
-    p {
+        a:hover {
-      margin: 0.8em 0;
+            border-bottom: 1px solid white;
+        }
+
+        svg {
+            margin-right: 0.8em;
+        }
+
+        .tag {
+            margin-right: 0.5em;
+            display: inline-block;
+
+            &::before {
+                content: "#";
+            }
+        }
     }
 
-    a:hover {
+    .flag {
-      border-bottom: 1px solid white;
+        border-radius: 50%;
+        margin: 0 5px;
     }
+}
 
-    svg {
+.pagination {
-      margin-right: 0.8em;
+    margin-top: 20px;
+
+    &__title {
+        display: flex;
+        text-align: center;
+        position: relative;
+        margin: 20px 0;
+
+        &-h {
+            text-align: center;
+            margin: 0 auto;
+            padding: 5px 10px;
+            background: $light-background;
+            color: $light-color-secondary;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            text-decoration: none;
+            letter-spacing: 0.1em;
+            z-index: 1;
+
+            .dark-theme & {
+                background: $dark-background;
+                color: $dark-color-secondary;
+            }
+        }
+
+        hr {
+            position: absolute;
+            left: 0;
+            right: 0;
+            width: 100%;
+            margin-top: 15px;
+            z-index: 0;
+        }
     }
 
-    .tag {
+    &__buttons {
-      margin-right: 0.5em;
+        display: flex;
-      display: inline-block;
+        align-items: center;
+        justify-content: center;
 
-      &::before {
+        a {
-        content: "#";
+            text-decoration: none;
-      }
+            font-weight: bold;
+        }
     }
-  }
-
-  .flag {
-    border-radius: 50%;
-    margin: 0 5px;
-  }
 }
 
-.pagination {
+.button {
-  margin-top: 20px;
-
-  &__title {
-    display: flex;
-    text-align: center;
     position: relative;
-    margin: 20px 0;
+    display: inline-flex;
-
-    &-h {
-      text-align: center;
-      margin: 0 auto;
-      padding: 5px 10px;
-      background: $light-background;
-      color: $light-color-secondary;
-      font-size: 0.8rem;
-      text-transform: uppercase;
-      text-decoration: none;
-      letter-spacing: 0.1em;
-      z-index: 1;
-
-      .dark-theme & {
-        background: $dark-background;
-        color: $dark-color-secondary;
-      }
-    }
-
-    hr {
-      position: absolute;
-      left: 0;
-      right: 0;
-      width: 100%;
-      margin-top: 15px;
-      z-index: 0;
-    }
-  }
-
-  &__buttons {
-    display: flex;
     align-items: center;
     justify-content: center;
+    background: $light-background-secondary;
+    font-size: 1rem;
+    font-weight: 600;
+    border-radius: 8px;
+    max-width: 40%;
+    padding: 0;
+    cursor: pointer;
+    appearance: none;
+
+    .dark-theme & {
+        background: $dark-background-secondary;
+    }
+
+    + .button {
+        margin-left: 10px;
+    }
 
     a {
-      text-decoration: none;
+        display: flex;
-      font-weight: bold;
+        padding: 8px 16px;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
     }
-  }
-}
 
-.button {
+    &__text {
-  position: relative;
+        text-overflow: ellipsis;
-  display: inline-flex;
+        white-space: nowrap;
-  align-items: center;
+        overflow: hidden;
-  justify-content: center;
+    }
-  background: $light-background-secondary;
+
-  font-size: 1rem;
+    &.next .button__icon {
-  font-weight: 600;
+        margin-left: 8px;
-  border-radius: 8px;
+    }
-  max-width: 40%;
+
-  padding: 0;
+    &.previous .button__icon {
-  cursor: pointer;
+        margin-right: 8px;
-  appearance: none;
+    }
-
-  .dark-theme & {
-    background: $dark-background-secondary;
-  }
-
-  + .button {
-    margin-left: 10px;
-  }
-
-  a {
-    display: flex;
-    padding: 8px 16px;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  &__text {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  &.next .button__icon {
-    margin-left: 8px;
-  }
-
-  &.previous .button__icon {
-    margin-right: 8px;
-  }
 }

themes/maik-blog/assets/scss/_portfolios.scss

@@ -1,192 +1,192 @@
 .portfolios {
-  width: 100%;
+    width: 100%;
-  max-width: calc(1000px + 50px + 80px);
+    max-width: calc(1000px + 50px + 80px);
-  text-align: left;
+    text-align: left;
-  padding: 20px calc(20px + 50px + 15px);
+    padding: 20px calc(20px + 50px + 15px);
-  margin: 20px auto;
+    margin: 20px auto;
-  counter-reset: portfolio;
+    counter-reset: portfolio;
-
-  @media #{$media-size-medium} {
-    max-width: calc(800px + 50px + 80px);
-  }
-
-  @media #{$media-size-tablet} {
-    max-width: 660px;
-  }
-
-  &:not(:last-of-type) {
-    border-bottom: 1px solid $light-border-color;
-
-    .dark-theme & {
-      border-color: $dark-border-color;
-    }
-  }
-
-  &-group {
-    display: flex;
-    margin-bottom: 1.9em;
-    line-height: normal;
 
-    @media #{$media-size-tablet} {
+    @media #{$media-size-medium} {
-      display: block;
+        max-width: calc(800px + 50px + 80px);
-    }
-  }
-
-  &-list {
-    flex-grow: 1;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .portfolio {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    margin: 80px auto;
-    position: relative;
-    counter-increment: portfolio;
-
-    > * {
-      flex: 1;
-      padding: 5px;
     }
 
     @media #{$media-size-tablet} {
-      flex-direction: column-reverse;
+        max-width: 660px;
     }
 
-    .read-more {
+    &:not(:last-of-type) {
-      white-space: nowrap;
+        border-bottom: 1px solid $light-border-color;
-      max-width: max-content;
-    }
-
-    &-cover {
-      margin: 0;
-    }
-
-    &-title {
-      font-size: 1rem;
-      margin: 5px 0 2px 0;
-    }
-
-    &-company {
-      font-size: 0.9rem;
-      margin: 5px 0 5px 0;
-    }
-
-    &-meta {
-      font-size: 0.8em;
-    }
 
-    &-content {
+        .dark-theme & {
-      margin-top: 12px;
+            border-color: $dark-border-color;
+        }
     }
 
-    &-item {
+    &-group {
-      border-bottom: 1px grey dashed;
-
-      a {
         display: flex;
-        justify-content: space-between;
+        margin-bottom: 1.9em;
-        align-items: baseline;
+        line-height: normal;
-        padding: 12px 0;
-        text-decoration: none;
-      }
-    }
-
-    &-day {
-      flex-shrink: 0;
-      margin-left: 1em;
-      @include dimmed;
-    }
-
-    &-skills {
-      &-title {
-        font-size: 0.9rem;
-        margin: 15px 0 0 0;
-      }
-    }
 
-    &::before {
+        @media #{$media-size-tablet} {
-      display: block;
+            display: block;
-      content: counter(portfolio);
+        }
-      position: absolute;
-
-      transform: translate(-50%, -50%);
-      border-radius: 50%;
-      font-weight: bold;
-      min-width: 50px;
-      min-height: 50px;
-      line-height: 50px;
-      text-align: center;
-      top: 30px;
-      z-index: 10;
-
-      background-color: $light-color;
-      color: $light-background;
-
-      .dark-theme & {
-        background-color: $dark-color;
-        color: $dark-background;
-      }
     }
 
-    &::after {
+    &-list {
-      display: block;
+        flex-grow: 1;
-      content: "";
+        margin: 0;
-      position: absolute;
+        padding: 0;
-      top: -50px;
+        list-style: none;
-      width: calc(50% + 50px);
-      height: calc(100% + 83px);
-      pointer-events: none;
-
-      border-bottom: 3px solid;
-      border-top: 3px solid;
     }
 
-    &:nth-child(odd) {
+    .portfolio {
-      // margin-left: 40px;
+        display: flex;
-      // background: #cfc;
+        flex-direction: row;
-
+        flex-wrap: nowrap;
-      &::before {
+        align-items: center;
-        left: -48.5px;
+        margin: 80px auto;
-      }
+        position: relative;
-
+        counter-increment: portfolio;
-      &::after {
+
-        left: -50px;
+        > * {
-        border-left: 3px solid;
+            flex: 1;
-        border-radius: 15px 0 0 15px;
+            padding: 5px;
-      }
+        }
-    }
+
-    &:nth-child(even) {
+        @media #{$media-size-tablet} {
-      // margin-left: -40px;
+            flex-direction: column-reverse;
-      // background: #fcc;
+        }
-
+
-      &::before {
+        .read-more {
-        right: -98.5px;
+            white-space: nowrap;
-      }
+            max-width: max-content;
-
+        }
-      &::after {
+
-        right: -50px;
+        &-cover {
-        border-right: 3px solid;
+            margin: 0;
-        border-radius: 0 15px 15px 0;
+        }
-      }
+
-    }
+        &-title {
-    &:first-child {
+            font-size: 1rem;
-      &::after {
+            margin: 5px 0 2px 0;
-        border-top: 0;
+        }
-        border-top-left-radius: 0;
+
-        border-top-right-radius: 0;
+        &-company {
-      }
+            font-size: 0.9rem;
-    }
+            margin: 5px 0 5px 0;
-    &:last-child {
+        }
-      &::after {
+
-        border-bottom: 0;
+        &-meta {
-        border-bottom-left-radius: 0;
+            font-size: 0.8em;
-        border-bottom-right-radius: 0;
+        }
-      }
+
+        &-content {
+            margin-top: 12px;
+        }
+
+        &-item {
+            border-bottom: 1px grey dashed;
+
+            a {
+                display: flex;
+                justify-content: space-between;
+                align-items: baseline;
+                padding: 12px 0;
+                text-decoration: none;
+            }
+        }
+
+        &-day {
+            flex-shrink: 0;
+            margin-left: 1em;
+            @include dimmed;
+        }
+
+        &-skills {
+            &-title {
+                font-size: 0.9rem;
+                margin: 15px 0 0 0;
+            }
+        }
+
+        &::before {
+            display: block;
+            content: counter(portfolio);
+            position: absolute;
+
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+            font-weight: bold;
+            min-width: 50px;
+            min-height: 50px;
+            line-height: 50px;
+            text-align: center;
+            top: 30px;
+            z-index: 10;
+
+            background-color: $light-color;
+            color: $light-background;
+
+            .dark-theme & {
+                background-color: $dark-color;
+                color: $dark-background;
+            }
+        }
+
+        &::after {
+            display: block;
+            content: "";
+            position: absolute;
+            top: -50px;
+            width: calc(50% + 50px);
+            height: calc(100% + 83px);
+            pointer-events: none;
+
+            border-bottom: 3px solid;
+            border-top: 3px solid;
+        }
+
+        &:nth-child(odd) {
+            // margin-left: 40px;
+            // background: #cfc;
+
+            &::before {
+                left: -48.5px;
+            }
+
+            &::after {
+                left: -50px;
+                border-left: 3px solid;
+                border-radius: 15px 0 0 15px;
+            }
+        }
+        &:nth-child(even) {
+            // margin-left: -40px;
+            // background: #fcc;
+
+            &::before {
+                right: -98.5px;
+            }
+
+            &::after {
+                right: -50px;
+                border-right: 3px solid;
+                border-radius: 0 15px 15px 0;
+            }
+        }
+        &:first-child {
+            &::after {
+                border-top: 0;
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+            }
+        }
+        &:last-child {
+            &::after {
+                border-bottom: 0;
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
     }
-  }
 }

themes/maik-blog/assets/scss/_posts.scss

@@ -1,101 +1,107 @@
 .posts {
-  width: 100%;
+    width: 100%;
-  max-width: 1000px;
+    max-width: 1000px;
-  text-align: left;
+    text-align: left;
-  padding: 20px;
+    padding: 20px;
-  margin: 20px auto;
+    margin: 20px auto;
-
+
-  @media #{$media-size-medium} {
+    @media #{$media-size-medium} {
-    max-width: 800px;
+        max-width: 800px;
-  }
-
-  @media #{$media-size-tablet} {
-    max-width: 660px;
-  }
-
-  &:not(:last-of-type) {
-    border-bottom: 1px solid $light-border-color;
-
-    .dark-theme & {
-      border-color: $dark-border-color;
     }
-  }
-
-  &-group {
-    display: flex;
-    margin-bottom: 1.9em;
-    line-height: normal;
 
     @media #{$media-size-tablet} {
-      display: block;
+        max-width: 660px;
-    }
-  }
-
-  &-list {
-    flex-grow: 1;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  &-breadcrumbs {
-    margin: 0 0 -25px;
-
-    @media #{$media-size-phone} {
-      font-size: 0.9rem;
-      margin: 0 0 -15px;
     }
-  }
 
-  .post {
+    &:not(:last-of-type) {
-    &-title {
+        border-bottom: 1px solid $light-border-color;
-      font-size: 1.9rem;
-      margin: 5px 0 5px 0;
-    }
 
-    &-subtitle {
+        .dark-theme & {
-      font-size: 1.1rem;
+            border-color: $dark-border-color;
-      margin: 5px 0 10px 0;
+        }
-      font-weight: 600;
     }
 
-    &-year {
+    &-group {
-      padding-top: 6px;
+        display: flex;
-      margin-right: 1.8em;
+        margin-bottom: 1.9em;
-      font-size: 1.6em;
+        line-height: normal;
-      @include dimmed;
 
-      @media #{$media-size-tablet} {
+        @media #{$media-size-tablet} {
-        margin: -6px 0 4px;
+            display: block;
-      }
+        }
     }
 
-    &-item {
+    &-list {
-      border-bottom: 1px grey dashed;
+        flex-grow: 1;
-
+        margin: 0;
-      a {
+        padding: 0;
-        display: flex;
+        list-style: none;
-        justify-content: space-between;
-        align-items: baseline;
-        padding: 12px 0;
-        text-decoration: none;
-      }
     }
 
-    &-day {
+    &-breadcrumbs {
-      flex-shrink: 0;
+        margin: 0 0 -25px;
-      margin-left: 1em;
-      @include dimmed;
-    }
 
-    &-cover {
+        @media #{$media-size-phone} {
-      margin-top: 20px;
+            font-size: 0.9rem;
-      margin-bottom: 20px;
+            margin: 0 0 -15px;
+        }
     }
 
-    &-content {
+    .post {
-      margin-top: 10px;
+        &-title {
-      margin-bottom: 10px;
+            font-size: 1.9rem;
+            margin: 5px 0 5px 0;
+        }
+
+        &-subtitle {
+            font-size: 1.1rem;
+            margin: 5px 0 10px 0;
+            font-weight: 600;
+
+            .breadcrumbs {
+                li:last-child::after {
+                    display: none;
+                }
+            }
+        }
+
+        &-year {
+            padding-top: 6px;
+            margin-right: 1.8em;
+            font-size: 1.6em;
+            @include dimmed;
+
+            @media #{$media-size-tablet} {
+                margin: -6px 0 4px;
+            }
+        }
+
+        &-item {
+            border-bottom: 1px grey dashed;
+
+            a {
+                display: flex;
+                justify-content: space-between;
+                align-items: baseline;
+                padding: 12px 0;
+                text-decoration: none;
+            }
+        }
+
+        &-day {
+            flex-shrink: 0;
+            margin-left: 1em;
+            @include dimmed;
+        }
+
+        &-cover {
+            margin-top: 20px;
+            margin-bottom: 20px;
+        }
+
+        &-content {
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
     }
-  }
 }

themes/maik-blog/assets/scss/_sharing-buttons.scss

@@ -1,34 +1,34 @@
 .sharing-buttons {
-  display: flex;
+    display: flex;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
-  justify-content: space-between;
+    justify-content: space-between;
 
-  .resp-sharing-button__icon,
+    .resp-sharing-button__icon,
-  .resp-sharing-button__link {
+    .resp-sharing-button__link {
-    display: inline-block;
+        display: inline-block;
-  }
+    }
 
-  .resp-sharing-button__link {
+    .resp-sharing-button__link {
-    text-decoration: none;
+        text-decoration: none;
-    margin: 0.5em;
+        margin: 0.5em;
-  }
+    }
 
-  .resp-sharing-button {
+    .resp-sharing-button {
-    border-radius: 5px;
+        border-radius: 5px;
-    transition: 25ms ease-out;
+        transition: 25ms ease-out;
-    padding: 0.5em 0.75em;
+        padding: 0.5em 0.75em;
-    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-  }
+    }
 
-  .resp-sharing-button__icon svg {
+    .resp-sharing-button__icon svg {
-    width: 1em;
+        width: 1em;
-    height: 1em;
+        height: 1em;
-    margin-right: 0.4em;
+        margin-right: 0.4em;
-    vertical-align: top;
+        vertical-align: top;
-  }
+    }
 
-  .resp-sharing-button--small svg {
+    .resp-sharing-button--small svg {
-    margin: 0;
+        margin: 0;
-    vertical-align: middle;
+        vertical-align: middle;
-  }
+    }
-}
+}

themes/maik-blog/assets/scss/_variables.scss

@@ -15,13 +15,15 @@ $dark-color-secondary: #73747b;
 $dark-border-color: #4a4b50;
 
 $media-size-phone: "(max-width: 684px)";
+$media-size-phone-min: "(min-width: 684px)";
 $media-size-tablet: "(max-width: 900px)";
+$media-size-tablet-min: "(min-width: 900px)";
 $media-size-medium: "(max-width: 1200px)";
 $media-size-medium-min: "(min-width: 1200px)";
 
 /* variables for js, must be the same as these in @custom-media queries */
 :root {
-  --phoneWidth: (max-width: 684px);
+    --phoneWidth: (max-width: 684px);
-  --tabletWidth: (max-width: 900px);
+    --tabletWidth: (max-width: 900px);
-  --mediumWidth: (max-width: 1200px);
+    --mediumWidth: (max-width: 1200px);
 }

themes/maik-blog/assets/scss/syntax_highlighting.scss

@@ -1,403 +1,403 @@
 /* Background */
 .chroma {
-  color: #f8f8f2;
+    color: #f8f8f2;
-  background-color: #272822;
+    background-color: #272822;
-
+
-  /* Other */
+    /* Other */
-  .x {
+    .x {
-  }
+    }
-
+
-  /* Error */
+    /* Error */
-  .err {
+    .err {
-    color: #960050;
+        color: #960050;
-    background-color: #1e0010;
+        background-color: #1e0010;
-  }
+    }
-
+
-  /* LineTableTD */
+    /* LineTableTD */
-  .lntd {
+    .lntd {
-    vertical-align: top;
+        vertical-align: top;
-    padding: 0;
+        padding: 0;
-    margin: 0;
+        margin: 0;
-    border: 0;
+        border: 0;
-  }
+    }
-
+
-  /* LineTable */
+    /* LineTable */
-  .lntable {
+    .lntable {
-    border-spacing: 0;
+        border-spacing: 0;
-    padding: 0;
+        padding: 0;
-    margin: 0;
+        margin: 0;
-    border: 0;
+        border: 0;
-    width: auto;
+        width: auto;
-    overflow: auto;
+        overflow: auto;
-    display: block;
+        display: block;
-  }
+    }
-
+
-  /* LineHighlight */
+    /* LineHighlight */
-  .hl {
+    .hl {
-    display: block;
+        display: block;
-    width: 100%;
+        width: 100%;
-    background-color: #ffffcc;
+        background-color: #ffffcc;
-  }
+    }
-
+
-  /* LineNumbersTable */
+    /* LineNumbersTable */
-  .lnt {
+    .lnt {
-    margin-right: 0.4em;
+        margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
+        padding: 0 0.4em 0 0.4em;
-    color: #7f7f7f;
+        color: #7f7f7f;
-  }
+    }
-
+
-  /* LineNumbers */
+    /* LineNumbers */
-  .ln {
+    .ln {
-    margin-right: 0.4em;
+        margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
+        padding: 0 0.4em 0 0.4em;
-    color: #7f7f7f;
+        color: #7f7f7f;
-  }
+    }
-
+
-  /* Keyword */
+    /* Keyword */
-  .k {
+    .k {
-    color: #66d9ef;
+        color: #66d9ef;
-  }
+    }
-
+
-  /* KeywordConstant */
+    /* KeywordConstant */
-  .kc {
+    .kc {
-    color: #66d9ef;
+        color: #66d9ef;
-  }
+    }
-
+
-  /* KeywordDeclaration */
+    /* KeywordDeclaration */
-  .kd {
+    .kd {
-    color: #66d9ef;
+        color: #66d9ef;
-  }
+    }
-
+
-  /* KeywordNamespace */
+    /* KeywordNamespace */
-  .kn {
+    .kn {
-    color: #f92672;
+        color: #f92672;
-  }
+    }
-
+
-  /* KeywordPseudo */
+    /* KeywordPseudo */
-  .kp {
+    .kp {
-    color: #66d9ef;
+        color: #66d9ef;
-  }
+    }
-
+
-  /* KeywordReserved */
+    /* KeywordReserved */
-  .kr {
+    .kr {
-    color: #66d9ef;
+        color: #66d9ef;
-  }
+    }
-
+
-  /* KeywordType */
+    /* KeywordType */
-  .kt {
+    .kt {
-    color: #66d9ef;
+        color: #66d9ef;
-  }
+    }
-
+
-  /* Name */
+    /* Name */
-  .n {
+    .n {
-  }
+    }
-
+
-  /* NameAttribute */
+    /* NameAttribute */
-  .na {
+    .na {
-    color: #a6e22e;
+        color: #a6e22e;
-  }
+    }
-
+
-  /* NameBuiltin */
+    /* NameBuiltin */
-  .nb {
+    .nb {
-  }
+    }
-
+
-  /* NameBuiltinPseudo */
+    /* NameBuiltinPseudo */
-  .bp {
+    .bp {
-  }
+    }
-
+
-  /* NameClass */
+    /* NameClass */
-  .nc {
+    .nc {
-    color: #a6e22e;
+        color: #a6e22e;
-  }
+    }
-
+
-  /* NameConstant */
+    /* NameConstant */
-  .no {
+    .no {
-    color: #66d9ef;
+        color: #66d9ef;
-  }
+    }
-
+
-  /* NameDecorator */
+    /* NameDecorator */
-  .nd {
+    .nd {
-    color: #a6e22e;
+        color: #a6e22e;
-  }
+    }
-
+
-  /* NameEntity */
+    /* NameEntity */
-  .ni {
+    .ni {
-  }
+    }
-
+
-  /* NameException */
+    /* NameException */
-  .ne {
+    .ne {
-    color: #a6e22e;
+        color: #a6e22e;
-  }
+    }
-
+
-  /* NameFunction */
+    /* NameFunction */
-  .nf {
+    .nf {
-    color: #a6e22e;
+        color: #a6e22e;
-  }
+    }
-
+
-  /* NameFunctionMagic */
+    /* NameFunctionMagic */
-  .fm {
+    .fm {
-  }
+    }
-
+
-  /* NameLabel */
+    /* NameLabel */
-  .nl {
+    .nl {
-  }
+    }
-
+
-  /* NameNamespace */
+    /* NameNamespace */
-  .nn {
+    .nn {
-  }
+    }
-
+
-  /* NameOther */
+    /* NameOther */
-  .nx {
+    .nx {
-    color: #a6e22e;
+        color: #a6e22e;
-  }
+    }
-
+
-  /* NameProperty */
+    /* NameProperty */
-  .py {
+    .py {
-  }
+    }
-
+
-  /* NameTag */
+    /* NameTag */
-  .nt {
+    .nt {
-    color: #f92672;
+        color: #f92672;
-  }
+    }
-
+
-  /* NameVariable */
+    /* NameVariable */
-  .nv {
+    .nv {
-  }
+    }
-
+
-  /* NameVariableClass */
+    /* NameVariableClass */
-  .vc {
+    .vc {
-  }
+    }
-
+
-  /* NameVariableGlobal */
+    /* NameVariableGlobal */
-  .vg {
+    .vg {
-  }
+    }
-
+
-  /* NameVariableInstance */
+    /* NameVariableInstance */
-  .vi {
+    .vi {
-  }
+    }
-
+
-  /* NameVariableMagic */
+    /* NameVariableMagic */
-  .vm {
+    .vm {
-  }
+    }
-
+
-  /* Literal */
+    /* Literal */
-  .l {
+    .l {
-    color: #ae81ff;
+        color: #ae81ff;
-  }
+    }
-
+
-  /* LiteralDate */
+    /* LiteralDate */
-  .ld {
+    .ld {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralString */
+    /* LiteralString */
-  .s {
+    .s {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringAffix */
+    /* LiteralStringAffix */
-  .sa {
+    .sa {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringBacktick */
+    /* LiteralStringBacktick */
-  .sb {
+    .sb {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringChar */
+    /* LiteralStringChar */
-  .sc {
+    .sc {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringDelimiter */
+    /* LiteralStringDelimiter */
-  .dl {
+    .dl {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringDoc */
+    /* LiteralStringDoc */
-  .sd {
+    .sd {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringDouble */
+    /* LiteralStringDouble */
-  .s2 {
+    .s2 {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringEscape */
+    /* LiteralStringEscape */
-  .se {
+    .se {
-    color: #ae81ff;
+        color: #ae81ff;
-  }
+    }
-
+
-  /* LiteralStringHeredoc */
+    /* LiteralStringHeredoc */
-  .sh {
+    .sh {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringInterpol */
+    /* LiteralStringInterpol */
-  .si {
+    .si {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringOther */
+    /* LiteralStringOther */
-  .sx {
+    .sx {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringRegex */
+    /* LiteralStringRegex */
-  .sr {
+    .sr {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringSingle */
+    /* LiteralStringSingle */
-  .s1 {
+    .s1 {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralStringSymbol */
+    /* LiteralStringSymbol */
-  .ss {
+    .ss {
-    color: #e6db74;
+        color: #e6db74;
-  }
+    }
-
+
-  /* LiteralNumber */
+    /* LiteralNumber */
-  .m {
+    .m {
-    color: #ae81ff;
+        color: #ae81ff;
-  }
+    }
-
+
-  /* LiteralNumberBin */
+    /* LiteralNumberBin */
-  .mb {
+    .mb {
-    color: #ae81ff;
+        color: #ae81ff;
-  }
+    }
-
+
-  /* LiteralNumberFloat */
+    /* LiteralNumberFloat */
-  .mf {
+    .mf {
-    color: #ae81ff;
+        color: #ae81ff;
-  }
+    }
-
+
-  /* LiteralNumberHex */
+    /* LiteralNumberHex */
-  .mh {
+    .mh {
-    color: #ae81ff;
+        color: #ae81ff;
-  }
+    }
-
+
-  /* LiteralNumberInteger */
+    /* LiteralNumberInteger */
-  .mi {
+    .mi {
-    color: #ae81ff;
+        color: #ae81ff;
-  }
+    }
-
+
-  /* LiteralNumberIntegerLong */
+    /* LiteralNumberIntegerLong */
-  .il {
+    .il {
-    color: #ae81ff;
+        color: #ae81ff;
-  }
+    }
-
+
-  /* LiteralNumberOct */
+    /* LiteralNumberOct */
-  .mo {
+    .mo {
-    color: #ae81ff;
+        color: #ae81ff;
-  }
+    }
-
+
-  /* Operator */
+    /* Operator */
-  .o {
+    .o {
-    color: #f92672;
+        color: #f92672;
-  }
+    }
-
+
-  /* OperatorWord */
+    /* OperatorWord */
-  .ow {
+    .ow {
-    color: #f92672;
+        color: #f92672;
-  }
+    }
-
+
-  /* Punctuation */
+    /* Punctuation */
-  .p {
+    .p {
-  }
+    }
-
+
-  /* Comment */
+    /* Comment */
-  .c {
+    .c {
-    color: #75715e;
+        color: #75715e;
-  }
+    }
-
+
-  /* CommentHashbang */
+    /* CommentHashbang */
-  .ch {
+    .ch {
-    color: #75715e;
+        color: #75715e;
-  }
+    }
-
+
-  /* CommentMultiline */
+    /* CommentMultiline */
-  .cm {
+    .cm {
-    color: #75715e;
+        color: #75715e;
-  }
+    }
-
+
-  /* CommentSingle */
+    /* CommentSingle */
-  .c1 {
+    .c1 {
-    color: #75715e;
+        color: #75715e;
-  }
+    }
-
+
-  /* CommentSpecial */
+    /* CommentSpecial */
-  .cs {
+    .cs {
-    color: #75715e;
+        color: #75715e;
-  }
+    }
-
+
-  /* CommentPreproc */
+    /* CommentPreproc */
-  .cp {
+    .cp {
-    color: #75715e;
+        color: #75715e;
-  }
+    }
-
+
-  /* CommentPreprocFile */
+    /* CommentPreprocFile */
-  .cpf {
+    .cpf {
-    color: #75715e;
+        color: #75715e;
-  }
+    }
-
+
-  /* Generic */
+    /* Generic */
-  .g {
+    .g {
-  }
+    }
-
+
-  /* GenericDeleted */
+    /* GenericDeleted */
-  .gd {
+    .gd {
-    color: #f92672;
+        color: #f92672;
-  }
+    }
-
+
-  /* GenericEmph */
+    /* GenericEmph */
-  .ge {
+    .ge {
-    font-style: italic;
+        font-style: italic;
-  }
+    }
-
+
-  /* GenericError */
+    /* GenericError */
-  .gr {
+    .gr {
-  }
+    }
-
+
-  /* GenericHeading */
+    /* GenericHeading */
-  .gh {
+    .gh {
-  }
+    }
-
+
-  /* GenericInserted */
+    /* GenericInserted */
-  .gi {
+    .gi {
-    color: #a6e22e;
+        color: #a6e22e;
-  }
+    }
-
+
-  /* GenericOutput */
+    /* GenericOutput */
-  .go {
+    .go {
-  }
+    }
-
+
-  /* GenericPrompt */
+    /* GenericPrompt */
-  .gp {
+    .gp {
-  }
+    }
-
+
-  /* GenericStrong */
+    /* GenericStrong */
-  .gs {
+    .gs {
-    font-weight: bold;
+        font-weight: bold;
-  }
+    }
-
+
-  /* GenericSubheading */
+    /* GenericSubheading */
-  .gu {
+    .gu {
-    color: #75715e;
+        color: #75715e;
-  }
+    }
-
+
-  /* GenericTraceback */
+    /* GenericTraceback */
-  .gt {
+    .gt {
-  }
+    }
-
+
-  /* GenericUnderline */
+    /* GenericUnderline */
-  .gl {
+    .gl {
-  }
+    }
-
+
-  /* TextWhitespace */
+    /* TextWhitespace */
-  .w {
+    .w {
-  }
+    }
 }

themes/maik-blog/i18n/en.toml

@@ -25,14 +25,14 @@ other = "Oops, page not found…"
 # posts/single.html
 #
 [readingTime]
-one   = "One minute"
+one = "One minute"
 other = "{{ .Count }} minutes"
 
 [tableOfContents]
 other = "Table of Contents"
 
 [wordCount]
-one   = "One Word"
+one = "One Word"
 other = "{{ .Count }} Words"
 
 [post]
@@ -44,4 +44,4 @@ present = "Present"
 skillsDeveloped = "Skills developed"
 viewSource = "View source"
 viewSourceKind = "View {{ . }} source"
-liveDemo = "Live demo"
+liveDemo = "Live demo"

themes/maik-blog/layouts/_default/list.html

@@ -2,7 +2,7 @@
 {{ $paginator := .Paginate .Data.Pages }}
 
 <main class="posts">
-    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+    <div class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "min" 1) }}</div>
 
     <h1>{{ .Title }}</h1>
 

themes/maik-blog/layouts/_default/single.html

@@ -25,7 +25,7 @@
   </div>
 
   <article>
-    <p class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+    <div class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "min" 1) }}</div>
 
     <h1 class="post-title">
       <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>

themes/maik-blog/layouts/partials/breadcrumbs.html

@@ -16,11 +16,14 @@
 {{- $breadcrumbs = after (int .page.IsPage) $breadcrumbs}}
 {{- if ne .page.Type "page"}}
 {{- if lt (default 0 .min) (len $breadcrumbs) }}
-{{- range $index, $breadcrumb := $breadcrumbs }}
+<nav aria-label="breadcrumb" class="breadcrumbs">
-<a href="{{ $breadcrumb.url }}">{{ $breadcrumb.name }}</a>{{ if ne $index (sub (len $breadcrumbs) 1) }}<span> > </span>{{ end }}
+    <ol>
-{{- end }}
+        {{- range $index, $breadcrumb := $breadcrumbs }}
-{{- if and $breadcrumbs .end }}
+        <li>
-{{ .end }}
+            <a href="{{ $breadcrumb.url }}">{{ $breadcrumb.name }}</a>
-{{- end }}
+        </li>
+        {{- end }}
+    </ol>
+</nav>
 {{- end }}
 {{- end }}

themes/maik-blog/layouts/portfolio/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 
 <main class="portfolios">
-    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</p>
+    <div class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" .) }}</div>
 
     <h1>Portfolio</h1>
 

themes/maik-blog/layouts/portfolio/single.html

@@ -20,7 +20,7 @@
   </div>
 
   <article>
-    <p class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+    <div class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "min" 1) }}</div>
 
     <h1 class="portfolio-title">
       <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>

themes/maik-blog/layouts/writeups/list.html

@@ -2,7 +2,7 @@
 {{ $paginator := (.Paginate .RegularPagesRecursive) }}
 
 <main class="posts">
-    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</p>
+    <div class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" .) }}</div>
 
     <h1>{{ .Title }}</h1>
 
@@ -19,14 +19,14 @@
         <div class="post">
             <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
 
-            <p class="post-subtitle">
+            <div class="post-subtitle">
                 {{/*  {{- with .Params.Subtitle }}
                 {{ . | markdownify }}
                 <br>
                 {{- end }}  */}}
 
                 {{ partial "breadcrumbs.html" (dict "page" . "min" 0) }}
-            </p>
+            </div>
 
             <div class="post-meta">
                 {{- if .Date }}

themes/maik-blog/theme.toml

@@ -1,14 +1,24 @@
 name = "maik-blog"
 description = "A simple theme for my blog."
-tags = ["blog", "clean", "dark", "light", "monochromatic", "personal", "responsive"]
+tags = [
+  "blog",
+  "clean",
+  "dark",
+  "light",
+  "monochromatic",
+  "personal",
+  "responsive",
+  "technical",
+  "highlighting",
+]
 features = ["blog", "shortcode", "syntax highlighting"]
 min_version = 0.30
 
 [author]
-  name = "Maik de Kruif"
+name = "Maik de Kruif"
-  homepage = "https://maik.dev/"
+homepage = "https://maik.dev/"
 
 [original]
-  name = "hello-friend"
+name = "hello-friend"
-  homepage = "https://github.com/panr/hugo-theme-hello-friend"
+homepage = "https://github.com/panr/hugo-theme-hello-friend"
-  repo = "https://github.com/panr/hugo-theme-hello-friend"
+repo = "https://github.com/panr/hugo-theme-hello-friend"