Improve collapsable code to be reusable

content/posts/liveoverflow-minecraft-server.md

@@ -25,7 +25,6 @@ During one of his earlier videos, LiveOverflow challenged his viewers to find th
 
 In LiveOverflow's eighth video, [he told his viewers that the server has been opened to the public](https://youtu.be/QradKmQ27JY?t=1246). I immediately started looking for ways to find it. After researching for a while, I found multiple ways to find it, but I thought they would all take a fair bit of time (I'll get back to this later). So, instead of spending time actually learning stuff, I rewatched his videos to see if there would be a clue in there. Luckily it worked out. In [one video](https://youtu.be/Hmmr1oLt-V8?t=28) he blurred the IP inside the terminal, but forgot about the terminal title bar :smile:. I notified him of this, as it was obviously unintended, and the IP was changed shortly after, as many people apparently found it.
 
-
 {{< figure src="/img/posts/liveoverflow-minecraft-server/first_ip_screenshot.png" title="Screenshot of video containing the IP address" >}}
 
 ### IP change
@@ -36,7 +35,7 @@ During my research, I came across masscan. This is a piece of software that lets
 
 I got to work and wrote a script that scans the IP range in which the old IP was located. It starts by using masscan to scan the entire range of IP addresses, and saves it to a file to use later. I then read this file, and request basic Minecraft server information like its MOTD, players and favicon. This information was saved in another file, in which, I could easily search for LiveOverflow. In the end, the new IP only had one digit changed.
 
-{{< code language="python" title="scan.py" isCollapsed="true" >}}
+{{< collapsible-block badge="python" title="scan.py" isCollapsed="true" >}}
 
 ```py
 import masscan
@@ -261,7 +260,7 @@ print(len(current_servers))
 print(len(valid_servers))
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 _This code is copied from a Jupyter Notebook, so it's not the most efficient and may not even work, the [here for the Github Gist of the Notebook](https://gist.github.com/maikka39/8019e2f1a45e1021fff05bd1e1688e14)_
 

content/writeups/adventofctf/2020/challenge_13.md

@@ -117,7 +117,7 @@ Let's try to use the previous attack but with the flag file:
 
 We get a big error:
 
-{{< code language="html" title="Error message" >}}
+{{< collapsible-block badge="html" title="Error message" >}}
 
 ```html
 <br />
@@ -183,7 +183,7 @@ line: 3 in <b>/var/www/html/index.php</b> on line <b>40</b><br />
 <b>/var/www/html/index.php</b> on line <b>43</b><br />
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 We probably got it because PHP is actually handling the PHP file as a PHP file 😀. This means we have to get it in some other way.
 

content/writeups/adventofctf/2020/challenge_16.md

@@ -74,7 +74,7 @@ This means the server is most likely using either Jinja2 of Twig.
 
 Now that we found the vulnerability, we can start exploiting it. Let's start by getting the config. We can try to get it by entering `{{config}}` or `{{config.items()}}` as the emoji.
 
-{{< code language="python" title="Result" >}}
+{{< collapsible-block badge="python" title="Result" >}}
 
 ```python
 dict_items([
@@ -224,7 +224,7 @@ dict_items([
 ])
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 If we take a look at it we find an item called 'flag' but it looks like it is encrypted in some way:
 
@@ -282,7 +282,7 @@ The source of the server is probably `app.py` as it's the default for flask appl
 config.__class__.__init__.__globals__['os'].popen('cat app.py').read()
 ```
 
-{{< code language="python" title="app.py" >}}
+{{< collapsible-block badge="python" title="app.py" >}}
 
 ```python
 import random
@@ -332,7 +332,7 @@ if __name__ == '__main__':
 
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 When looking at the file, we see that the flag variable is set to the output of the `magic` function:
 

content/writeups/adventofctf/2020/challenge_17.md

@@ -154,7 +154,7 @@ To get the subclasses, we first have to convert `''.__class__.__mro__[1].__subcl
 
 After submitting this, we get the following result:
 
-{{< code language="text" title="Result" >}}
+{{< collapsible-block badge="text" title="Result" >}}
 
 ```js
 [
@@ -643,7 +643,7 @@ After submitting this, we get the following result:
 ]
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 In this result we find the following class: `<class 'os._wrap_close'>`. This is the `os` module and it is on index `127`. We can verify it's index by getting it from the submodules list using the following input:
 
@@ -680,7 +680,7 @@ Now let's grab the contents of `app.py`:
 {{ [[[""|attr("\x5f\x5fclass\x5f\x5f")|attr("\x5f\x5fmro\x5f\x5f")][0][1]|attr("\x5f\x5fsubclasses\x5f\x5f")()][0][127]|attr("\x5f\x5finit\x5f\x5f")|attr("\x5f\x5fglobals\x5f\x5f")][0]["popen"]("cat app\x2epy")|attr("read")() }}
 ```
 
-{{< code language="python" title="app.py" >}}
+{{< collapsible-block badge="python" title="app.py" >}}
 
 ```py
 import random
@@ -732,7 +732,7 @@ if __name__ == '__main__':
     app.run(host='0.0.0.0', port=8000)
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 ## Magic function
 

content/writeups/adventofctf/2020/challenge_22.md

@@ -80,7 +80,7 @@ Alas, we get the cat picture again. That's weird. There might be a filter on the
 
 Using the same decoding method, we get the following result:
 
-{{< code language="php" title="index.php" >}}
+{{< collapsible-block badge="php" title="index.php" >}}
 
 ```html
 <!DOCTYPE html>
@@ -92,7 +92,12 @@ Using the same decoding method, we get the following result:
         <meta name="description" content="" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
+        <link
+            rel="stylesheet"
+            href="style.css"
+            type="text/css"
+            media="screen"
+        />
         <link
             rel="stylesheet"
             href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
@@ -136,7 +141,9 @@ Using the same decoding method, we get the following result:
                                         <?php
                     if (!isset($_GET["image"])) {
                     ?>
-                    <a href="/index.php?image=cat.jpg">Is this santa?</a>
+                                        <a href="/index.php?image=cat.jpg"
+                                            >Is this santa?</a
+                                        >
                                         <?php
                     } else {
                         $path = $_GET["image"];
@@ -147,7 +154,9 @@ Using the same decoding method, we get the following result:
                         echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'" width="100%"/>';
                                         } ?>
                                     </div>
-                  <div class="card-footer text-center">Almost there</div>
+                                    <div class="card-footer text-center">
+                                        Almost there
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -158,20 +167,31 @@ Using the same decoding method, we get the following result:
                                         <div class="col-md-2">
                                             <img src="/logo.png" />
                                         </div>
-                    <div class="col-md-9 offset-md-1 align-middle">
+                                        <div
+                                            class="col-md-9 offset-md-1 align-middle"
+                                        >
                                             <p class="text-center">
                                                 <span class="align-middle">
-                          The Advent of CTF is brought to you by
+                                                    The Advent of CTF is brought
-                          <a href="http://www.novi.nl">NOVI Hogeschool</a>. It
+                                                    to you by
-                          is built by
+                                                    <a href="http://www.novi.nl"
+                                                        >NOVI Hogeschool</a
+                                                    >. It is built by
                                                     <a
                                                         href="https://twitter.com/credmp/"
                                                         class="icoTwitter"
                                                         title="Twitter"
-                            ><i class="fab fa-twitter"></i> @credmp</a
+                                                        ><i
-                          >. If you are looking for a Dutch Cyber Security
+                                                            class="fab fa-twitter"
+                                                        ></i>
+                                                        @credmp</a
+                                                    >. If you are looking for a
+                                                    Dutch Cyber Security
                                                     Bachelor degree or bootcamp,
-                          <a href="https://www.novi.nl">check us out</a>.
+                                                    <a
+                                                        href="https://www.novi.nl"
+                                                        >check us out</a
+                                                    >.
                                                 </span>
                                             </p>
                                         </div>
@@ -187,7 +207,7 @@ Using the same decoding method, we get the following result:
 </html>
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 Just the PHP part:
 

content/writeups/adventofctf/2020/challenge_24.md

@@ -97,7 +97,7 @@ In [3]: pickle.loads(base64.b64decode("gAN9cQAoWAUAAABib2FyZHEBXXECKF1xAyhYAQAAA
 
 This time our board is quite a bit larger:
 
-{{< code language="py" title="Board" >}}
+{{< collapsible-block badge="py" title="Board" >}}
 
 ```py
 {
@@ -179,7 +179,7 @@ This time our board is quite a bit larger:
 }
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 We can see that a `chain` value has been added. From the title of this challenge, we can say that this is the blockchain that we likely have to bypass.
 
@@ -230,7 +230,7 @@ We can see that, to verify the game, the function loops through all the blocks i
 
 To crack this, we can simply reverse this algorithm. To do this, I grabbed the script from the HTML source, and added a crack method like so:
 
-{{< code language="py" title="solve.py" >}}
+{{< collapsible-block badge="py" title="solve.py" >}}
 
 ```python
 import hashlib
@@ -304,7 +304,7 @@ if __name__ == "__main__":
     print(export_base64(game))
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 After running this script, we get the following result:
 

content/writeups/adventofctf/2020/challenge_4.md

@@ -36,7 +36,7 @@ Visit <https://04.adventofctf.com> to start the challenge.
 
 When opening the website we're (for the first time) not provided with a login form. It is still authentication though as we are greeted with a message: "If you have access to it the special present will be shown below:". Also, I noticed the URL changed after about five seconds. That hints at some javascript, so let's open the sources tab in devtools. We find `login.js`.
 
-{{< code language="js" title="login.js" >}}
+{{< collapsible-block badge="js" title="login.js" >}}
 
 ```js
 function startup() {
@@ -93,7 +93,7 @@ startup();
 check();
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 This looks like some obfuscated code. So I started with de-obfuscating the code. After a few minutes of reading the code, I remembered to always start at the output. And after looking at the `check()` function I found out I had wasted my time.
 

content/writeups/adventofctf/2020/challenge_6.md

@@ -72,7 +72,7 @@ As you can see the string is escaped and the result of this query will have the
 
 When submitting it I got the following result:
 
-{{< code language="text" title="Result" >}}
+{{< collapsible-block badge="text" title="Result" >}}
 
 ```markdown
 | id                                                 | Description   | Proof        |
@@ -244,7 +244,7 @@ When submitting it I got the following result:
 | secrets                                            | 2--------     | 3-------     |
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 ## Solution
 

content/writeups/google-ctf/2021/beginners-quest/3.md

@@ -92,7 +92,7 @@ When opening the source, we also find the following comment:
 
 To solve this challenge, I came up with the following script:
 
-{{< code language="js" title="solve.js" >}}
+{{< collapsible-block badge="js" title="solve.js" >}}
 
 ```js
 function controlCar(scanArray) {
@@ -151,7 +151,7 @@ function controlCar(scanArray) {
 }
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 It starts off by initializing some global variables if the game is running for the first time (or after a restart). After which, it check if there are still moves in the queue. If so, it grabs the last item out of the queue and returns it.
 

content/writeups/google-ctf/2021/beginners-quest/4.md

@@ -43,7 +43,7 @@ You’re taking a stroll in the lab, when Dr. Klostermann is calling your name:
 
 [attachment.zip](/files/writeups/google-ctf/2021/beginners-quest/4/attachment.zip)
 
-{{< code language="c" title="chal.c" isCollapsed="true" >}}
+{{< collapsible-block badge="c" title="chal.c" isCollapsed="true" >}}
 
 ```c
 #include <stdbool.h>
@@ -208,7 +208,7 @@ int main(void)
 }
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 ## Recon
 
@@ -308,7 +308,7 @@ for set_mask, clr_mask in zip(set_masks, clr_masks):
 print(flag.strip())
 ```
 
-{{< code language="py" title="Full code" isCollapsed="true" >}}
+{{< collapsible-block badge="py" title="Full code" isCollapsed="true" >}}
 
 ```py
 set_mask_str = "gpio_set_mask"
@@ -343,7 +343,7 @@ for set_mask, clr_mask in zip(set_masks, clr_masks):
 print(flag.strip())
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 ## Solution
 

content/writeups/google-ctf/2021/beginners-quest/5.md

@@ -50,7 +50,7 @@ As you and Gökhan are leaving the crates to enter a car, you spot the tough guy
 
 [attachment.zip](/files/writeups/google-ctf/2021/beginners-quest/5/attachment.zip)
 
-{{< code language="py" title="RoboCaller1337.py" isCollapsed="true" >}}
+{{< collapsible-block badge="py" title="RoboCaller1337.py" isCollapsed="true" >}}
 
 ```py
 import random
@@ -103,9 +103,9 @@ if __name__ == "__main__":
     main()
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
-{{< code language="txt" title="robo_numbers_list.txt" isCollapsed="true" >}}
+{{< collapsible-block badge="txt" title="robo_numbers_list.txt" isCollapsed="true" >}}
 
 ```txt
 263-170-6234
@@ -734,7 +734,7 @@ if __name__ == "__main__":
 446-996-9104
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 ## Recon
 
@@ -793,7 +793,7 @@ for a,b in zip(key, secret):
 print(flag)
 ```
 
-{{< code language="py" title="Full code" isCollapsed="true" >}}
+{{< collapsible-block badge="py" title="Full code" isCollapsed="true" >}}
 
 ```py
 from mt19937predictor import MT19937Predictor
@@ -816,7 +816,7 @@ for a,b in zip(key, secret):
 print(flag)
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 ## Solution
 

content/writeups/google-ctf/2021/beginners-quest/6.md

@@ -50,7 +50,7 @@ After having climbed through the window, you wait for a while on the ground. The
 
 [attachment.zip](/files/writeups/google-ctf/2021/beginners-quest/6/attachment.zip)
 
-{{< code language="txt" title="encodings" isCollapsed="true" >}}
+{{< collapsible-block badge="txt" title="encodings" isCollapsed="true" >}}
 
 ```text
 I made a super secret encoder. I remember using:
@@ -64,15 +64,15 @@ I made a super secret encoder. I remember using:
 I also use gzip and zlib (to compress the stuff) and I like hiding things in files...
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
-{{< code language="txt" title="chall.txt" isCollapsed="true" >}}
+{{< collapsible-block badge="txt" title="chall.txt" isCollapsed="true" >}}
 
 ```txt
 File is too large to display here.
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 ## Recon
 
@@ -336,7 +336,7 @@ for line in data:
     print(line)
 ```
 
-{{< code language="text" title="output" >}}
+{{< collapsible-block badge="text" title="output" >}}
 
 ```text
 nyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyya~
@@ -776,7 +776,7 @@ nyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyya~
 nyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyya~
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 ### nya~
 
@@ -903,7 +903,7 @@ CTF{pl34s3_n0_m04r}
 
 As for most ctf problems, I've written a script that executes all the step automatically and returns the flag.
 
-{{< code language="py" title="solve.py" isCollapsed="true" >}}
+{{< collapsible-block badge="py" title="solve.py" isCollapsed="true" >}}
 
 ```py
 # pip install brainfuck-interpreter
@@ -1065,7 +1065,7 @@ flag = brainfuck.evaluate(brainfuck_code)
 print(flag)
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 ## Solution
 

content/writeups/google-ctf/2021/beginners-quest/7.md

@@ -42,7 +42,7 @@ Nowak is very impressed by your skills. You and him sit down by a table, and you
 
 [attachment.zip](/files/writeups/google-ctf/2021/beginners-quest/7/attachment.zip)
 
-{{< code language="python" title="chall.py" isCollapsed="true" >}}
+{{< collapsible-block badge="python" title="chall.py" isCollapsed="true" >}}
 
 ```py
 from Crypto.Util.number import *
@@ -63,7 +63,7 @@ print(n)
 #21034814455172467787319632067588541051616978031477984909593707891829600195022041640200088624987623056713604514239406145871910044808006741636513624835862657042742260288941962019533183418661144639940608960169440421588092324928046033370735375447302576018460809597788053566456538713152022888984084306297869362373871810139948930387868426850576062496427583397660227337178607544043400076287217521751017970956067448273578322298078706011759257235310210160153287198740097954054080553667336498134630979908988858940173520975701311654172499116958019179004876438417238730801165613806576140914402525031242813240005791376093215124477
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 ## Recon
 

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

@@ -3,7 +3,7 @@ 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."
+description = "In the Curling challenge, we join Bow Ninecandle to learn how to use the curl command for sending web requests. The silver tasks include sending basic requests, handling self-signed certificates, posting data, and more. Afterwards, we use our knowledge to solve extra tasks involving file paths and redirects, completing the challenge for the gold medal!"
 cover = "img/writeups/holiday-hack-challenge/2024/act1/curling/cover.png"
 tags = [
     "Holiday Hack Challenge",

content/writeups/holiday-hack-challenge/2024/act1/frosty-keypad.md

@@ -3,7 +3,7 @@ author = "Maik de Kruif"
 title = "Frosty Keypad"
 subtitle = "Act 1 - SANS Holiday Hack Challenge 2024"
 date = 2024-11-24T18:23:54+01:00
-description = "In the fourth challenge of the Holiday Hack Challenge 2024, we'll explore how to use curl using the Linux manpages."
+description = "In this challenge, we help Morcel Nougat recover a shredded document by decoding clues from a book and using an old-school telephone keypad. After enabling a hidden flashlight, we script a solution to bypass rate limits and crack the final code, solving both the Silver and Gold challenges!"
 cover = "img/writeups/holiday-hack-challenge/2024/act1/frosty-keypad/cover.png"
 tags = [
     "Holiday Hack Challenge",

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

@@ -3,7 +3,7 @@ author = "Maik de Kruif"
 title = "Elf Connect"
 subtitle = "Prologue - SANS Holiday Hack Challenge 2024"
 date = 2024-11-21T14:23:34+01:00
-description = "Let's play our first game of the Holiday Hack Challenge. To win, we'll have to use the DevTools to read some code, and figure out how the scoring mechanism works."
+description = "In Elf Connect, we help Angel Candysalt solve a word-matching puzzle. After earning the silver medal by finding groups of related words, we dig into the game’s code using DevTools. By analyzing the scoring logic, we bypass the normal gameplay and directly trigger the gold medal with a simple code execution in the browser console!"
 cover = "img/writeups/holiday-hack-challenge/2024/prologue/elf-connect/cover.png"
 tags = [
     "Holiday Hack Challenge",
@@ -98,7 +98,7 @@ Object.keys(wordSets).map((round) =>
 
 This might look a little complicated, so let me explain it for you. We start by looping over `wordSets`, this contains all the words for a specific round. We then look at the correct sets, and map the four indices to the actual word in the list. If we execute this code, we get the following output:
 
-{{< code language="json" title="Results" isCollapsed="true" >}}
+{{< collapsible-block badge="json" title="Results" isCollapsed="true" >}}
 
 ```json
 [
@@ -129,7 +129,7 @@ This might look a little complicated, so let me explain it for you. We start by
 ]
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 This just get us the correct answer though, and we'll need more for gold.
 

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

@@ -3,7 +3,7 @@ author = "Maik de Kruif"
 title = "Elf Minder"
 subtitle = "Prologue - SANS Holiday Hack Challenge 2024"
 date = 2024-11-21T15:18:53+01:00
-description = "On to our second game of the Holiday Hack Challenge. This time we'll have to find some routes."
+description = "In Elf Minder, we guide an elf through twelve levels of maze-like puzzles. Silver is straightforward; solve the puzzles normally. For gold, we inspect the game’s code with DevTools and find hidden admin controls. By enabling them, we can clear obstacles and draw a path directly to the finish. Alternatively, we manipulate springs to bounce the elf straight to the end. Both methods secure the gold medal!"
 cover = "img/writeups/holiday-hack-challenge/2024/prologue/elf-minder/cover.png"
 tags = [
     "Holiday Hack Challenge",
@@ -113,7 +113,7 @@ From the hint given in the conversation with the elf Poinsettia, we got the foll
 
 A good starting point here would be to first figure out how the springs work.
 
-{{< code language="js" title="guide.js (getSpringTarget)" isCollapsed="true" >}}
+{{< collapsible-block badge="js" title="guide.js (getSpringTarget)" isCollapsed="true" >}}
 
 ```js
 getSpringTarget(springCell) {
@@ -157,7 +157,7 @@ getSpringTarget(springCell) {
 }
 ```
 
-{{< /code >}}
+{{< /collapsible-block >}}
 
 In one of the source files, `guide.js`, there is a function called `getSpringTarget`. This function, as the name suggests, returns the location where the elf should go after encountering a spring.
 

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

@@ -3,7 +3,7 @@ author = "Maik de Kruif"
 title = "Holiday Hack Orientation"
 subtitle = "Prologue - SANS Holiday Hack Challenge 2024"
 date = 2024-11-21T13:46:55+01:00
-description = "An easy start of the Holiday Hack Challenge 2024."
+description = "In the Holiday Hack Orientation, we meet Jingle Ringford, who introduces us to the 2024 SANS Holiday Hack Challenge. Our first task is simple; enter the correct answer in the “First Terminal” to unlock the gold medal and begin the adventure!"
 cover = "img/writeups/holiday-hack-challenge/2024/prologue/orientation/cover.png"
 tags = [
     "Holiday Hack Challenge",

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

@@ -71,31 +71,3 @@ a.button {
         padding: 14px 24px;
     }
 }
-
-.code-toolbar {
-    margin-bottom: 20px;
-
-    .toolbar-item a {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding: 3px 8px;
-        margin-bottom: 5px;
-        background: $light-background-secondary;
-        text-decoration: none;
-        text-align: center;
-        font-size: 13px;
-        font-weight: 500;
-        border-radius: 8px;
-        border: 1px solid transparent;
-        appearance: none;
-        cursor: pointer;
-        outline: none;
-
-        .dark-theme & {
-            background: $dark-background-secondary;
-            color: inherit;
-        }
-    }
-}

themes/maik-blog/assets/scss/_collapsible-block.scss

@@ -1,4 +1,4 @@
-.collapsable-code {
+.collapsible-block {
     position: relative;
     width: 100%;
     margin: 40px 0;
@@ -8,41 +8,50 @@
         visibility: hidden;
     }
 
-    .highlight,
+    &__content {
-    .code-toolbar .highlight {
         max-height: 80vh;
         overflow: auto;
 
-        transition: max-height 0.15s ease;
+        transition: max-height 0.15s ease, padding-top 0.15s ease,
+            padding-bottom 0.15s ease;
 
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 10px;
+
+        background-color: lighten($light-background-secondary, 5%);
+
+        .dark-theme & {
+            background-color: darken($dark-background-secondary, 6%);
+        }
+
+        padding: 0 1em;
+
+        &:has(> :last-child:nth-child(1)),
+        &:not(:has(*)) {
+            padding: 1em;
+        }
+
+        &:has(.highlight) {
+            padding: 0 !important;
+        }
     }
 
     input[type="checkbox"]:checked {
-        ~ .highlight,
+        ~ .collapsible-block__content {
-        ~ .code-toolbar .highlight {
             max-height: 0;
 
-            padding: 0;
+            padding-top: 0;
+            padding-bottom: 0;
             border-top: none;
             overflow: hidden;
         }
 
-        ~ .code-toolbar {
-            padding: 0;
-            border-top: none;
-
-            .toolbar {
-                display: none;
-            }
-        }
-
         ~ label {
             border-radius: 10px;
+            transition: border-radius 0.15s ease 0.1s;
         }
 
-        ~ label .collapsable-code__toggle:after {
+        ~ label .collapsible-block__toggle:after {
             content: attr(data-label-expand);
         }
     }
@@ -59,6 +68,7 @@
         min-height: 30px;
         margin: 0;
         cursor: pointer;
+        transition: border-radius 0s ease 0s;
 
         .dark-theme & {
             background: $dark-background-secondary;
@@ -79,7 +89,7 @@
         }
     }
 
-    &__language {
+    &__badge {
         background: $light-background;
         color: $light-color;
         border-radius: 10px;
@@ -112,8 +122,4 @@
         margin-bottom: 0;
         border-radius: 0;
     }
-
-    .code-toolbar {
-        margin: 0;
-    }
 }

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

@@ -304,8 +304,9 @@ pre {
 }
 
 blockquote {
+    position: relative;
     border-left: 2px solid;
-    margin: 40px;
+    margin: 20px 40px;
     padding: 10px 20px;
 
     @media #{$media-size-phone} {
@@ -315,12 +316,12 @@ blockquote {
 
     &:before {
         content: "”";
-        font-family: Georgia, serif;
+        // font-family: Georgia, serif;
         font-display: auto;
         font-size: 3.875rem;
         position: absolute;
         left: -40px;
-        top: -20px;
+        top: -13px;
     }
 
     p:first-of-type {

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

@@ -16,5 +16,5 @@
 @import "portfolios";
 @import "footer";
 @import "sharing-buttons";
-@import "code";
+@import "collapsible-block";
 @import "masonry";

themes/maik-blog/layouts/shortcodes/code.html

@@ -1,17 +0,0 @@
-{{ $id := delimit (shuffle (seq 1 9)) "" }}
-
-{{ if .Get "language" }}
-<div class="collapsable-code">
-  <input id="{{ .Get "id" | default $id }}" type="checkbox" {{ if ( eq ( .Get "isCollapsed" ) "true" ) -}} checked
-    {{- end }} />
-  <label for="{{ .Get "id" | default $id }}">
-    <span class="collapsable-code__language">{{ .Get "language" }}</span>
-    {{ if .Get "title" }}<span class="collapsable-code__title">{{ .Get "title" | markdownify }}</span>{{ end }}
-    <span class="collapsable-code__toggle" data-label-expand="{{ .Get "expand" | default "△" }}"
-      data-label-collapse="{{ .Get "collapse" | default "▽" }}"></span>
-  </label>
-  {{ .Inner | markdownify }}
-</div>
-{{ else }}
-{{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.Permalink }}
-{{ end }}

themes/maik-blog/layouts/shortcodes/collapsible-block.html

@@ -0,0 +1,17 @@
+{{ $id := delimit (shuffle (seq 1 9)) "" }}
+
+<div class="collapsible-block">
+  <input id="{{ .Get "id" | default $id }}" type="checkbox" {{ if ( eq ( .Get "isCollapsed" ) "true" ) -}} checked
+    {{- end }} />
+  <label for="{{ .Get "id" | default $id }}">
+    {{- with .Get "badge" }}
+    <span class="collapsible-block__badge">{{ . }}</span>
+    {{- end }}
+    {{ if .Get "title" }}<span class="collapsible-block__title">{{ .Get "title" | markdownify }}</span>{{ end }}
+    <span class="collapsible-block__toggle" data-label-expand="{{ .Get "expand" | default "△" }}"
+      data-label-collapse="{{ .Get "collapse" | default "▽" }}"></span>
+  </label>
+  <div class="collapsible-block__content">
+    {{ .Inner | markdownify }}
+  </div>
+</div>