fix: show active on dark theme

config/_default/hugo.toml

@@ -55,7 +55,7 @@ dateformMonth = "Jan, 2006"
 
 # 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."
-keywords = "Devloper, Software Engineer, Software Developer, Maik, Computer Science, Portfolio, Blog, Maik de Kruif"
+keywords = "Developer, Software Engineer, Software Developer, Maik, Computer Science, Portfolio, Blog, Maik de Kruif"
 images = [""]
 
 genre = "Blog"
@@ -64,7 +64,7 @@ rssLimit = 15
 
 showReadingTimeInList = false
 
-homeSubtitle = "Software Engineering, Linux and Cyber Security"
+homeSubtitle = "Software Engineer and Cyber Security Specialist"
 
 # Prefix of link to the git commit detail page. GitInfo must be enabled.
 gitUrl = "https://github.com/maikka39/Personal-Website/commit/"
@@ -131,9 +131,9 @@ image = "/img/home/portrait.png"
 twitter = "@maik_dev"
 
 # Wallets
-[[params.wallets]]
-name = "XMR"
-address = "83cfsXGHPaW81hKJtAPYZEgbfFqANMTXXRwghsBpjf5oTDRV3BnCC4jFno8tLTnF4C6gJzGjPEmpvjntXaiGBB7kVitkDKi"
+# [[params.wallets]]
+# name = "XMR"
+# address = "83cfsXGHPaW81hKJtAPYZEgbfFqANMTXXRwghsBpjf5oTDRV3BnCC4jFno8tLTnF4C6gJzGjPEmpvjntXaiGBB7kVitkDKi"
 
 # Social icons
 [[params.social]]

content/about.md

@@ -2,7 +2,7 @@
 author = "Maik de Kruif"
 title = "About"
 date = 2021-11-19T12:26:01+01:00
-description = "Ever since I was a little kid, I've loved coding. From the moment of writing my first program in Python and manipulating it to produce the desired output, I have been obsessed with the idea of writing software to solve practical problems. Programming is like a never-ending puzzle where you continuously have to come up with a new way to solve it."
+description = "I’m a passionate coder with a strong foundation in programming. With a love for solving practical problems through software development, I am driven to continuously explore new ways to create innovative solutions. My personal side-projects and exploration of cybersecurity further enhance my skills and dedication to building powerful and impactful applications."
 images = []
 tags = [
     "aboutme",
@@ -10,12 +10,9 @@ tags = [
 categories = [
     "me",
 ]
+toc = false
 +++
 
 Ever since I was a little kid, I've loved coding. From the moment of writing my first program in Python and manipulating it to produce the desired output, I have been obsessed with the idea of writing software to solve practical problems. Programming is like a never-ending puzzle where you continuously have to come up with a new way to solve it.
 
-Outside of my job, I run a small business with a couple of friends where we develop drone shows. I'm responsible for both designing and writing the control software as well as creating and designing the actual drones.
-
-When I get home after work/school, I tend to either continue writing code for some personal side-projects, or play around with cyber-security related stuff. This is what keeps me up at night, a never-ending thirst to create beautiful, powerful things and share them with the world.
-
-Skills/Interests: Python, Java, Scala, JavaScript, Node, CSS, HTML, Git, SQL, MongoDB, Apache, Nginx, Docker.
+When I get home after work, I tend to either continue writing code for some personal side-projects, or play around with cyber-security related stuff. Occasionally, I can also be found working on electronics projects. This is what keeps me up at night, a never-ending thirst to create beautiful, powerful things and share them with the world.

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

@@ -109,98 +109,3 @@
         margin: 0 5px;
     }
 }
-
-.pagination {
-    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;
-        }
-    }
-
-    &__buttons {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        a {
-            text-decoration: none;
-            font-weight: bold;
-        }
-    }
-}
-
-.button {
-    position: relative;
-    display: inline-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 {
-        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/_post.scss

@@ -169,9 +169,19 @@
         align-items: center;
         justify-content: center;
 
-        a {
+        ul, ol {
+            list-style-type: none;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 10px;
+        }
+
+        .button a {
             text-decoration: none;
             font-weight: bold;
+            overflow: visible;
         }
     }
 }
@@ -190,15 +200,27 @@
     cursor: pointer;
     appearance: none;
 
+    &:disabled, &[disabled], &.disabled {
+        pointer-events: none;
+    }
+
+    &.active {
+        background: darken($light-background-secondary, 20%);
+    }
+
     .dark-theme & {
         background: $dark-background-secondary;
+
+        &.active {
+            background: lighten($dark-background-secondary, 22%);
+        }
     }
 
     + .button {
         margin-left: 10px;
     }
 
-    a {
+    > * {
         display: flex;
         padding: 8px 16px;
         text-decoration: none;
@@ -207,6 +229,10 @@
         overflow: hidden;
     }
 
+    a {
+        text-decoration: none;
+    }
+
     &__text {
         text-overflow: ellipsis;
         white-space: nowrap;

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

@@ -10,10 +10,6 @@
     <div class="content content-list">{{ .Content }}</div>
     {{- end }}
 
-    {{- if .Paginator.HasPrev }}
-    {{ partial "pagination.html" . }}
-    {{- end }}
-
     <div class="posts-list">
         {{ range $paginator.Pages }}
         <div class="post">

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

@@ -38,12 +38,14 @@
     {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify) "class" "post-cover") }}
     {{- end }}
 
+     {{- if not (eq .Params.toc false) }}
     <aside id="toc" class="{{- if not .Params.toc }}desktop-only{{- end }}">
       <div class="toc-content">
         <div class="toc-title">{{ i18n "tableOfContents" }}</div>
         {{ .TableOfContents }}
       </div>
     </aside>
+    {{- end }}
 
     <div class="post-content">
       {{ .Content }}

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

@@ -16,6 +16,7 @@
                     </a>
                 </span>
             </div>
+            {{- if .Site.Params.wallets }}
             <div class="footer__content__section donations">
                 {{- with .Site.Params.wallets }}
                 {{- range . }}
@@ -24,6 +25,7 @@
                 {{- end }}
                 {{- end }}
             </div>
+            {{- end }}
         </div>
     </div>
 </footer>

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

@@ -1,20 +1,46 @@
 <div class="pagination">
     <div class="pagination__buttons">
-        {{ if .Paginator.HasPrev }}
+        {{- if .Paginator.HasPrev }}
         <span class="button previous">
             <a href="{{ .Paginator.Prev.URL }}">
                 <span class="button__icon">←</span>
-                <span class="button__text">Newer posts</span>
+                <span class="button__text">Previous</span>
             </a>
         </span>
-        {{ end }}
-        {{ if .Paginator.HasNext }}
+        {{- end }}
+        {{- with .Paginator }}
+        {{- $currentPage := .PageNumber }}
+        {{- $totalPages := .TotalPages }}
+        {{- if gt $totalPages 1 }}
+        <ol>
+        {{- range .Pagers }}
+            {{- $isFirst := eq .PageNumber 1 }}
+            {{- $isLast := eq .PageNumber $totalPages }}
+            {{- $inWindow := and (ge .PageNumber (sub $currentPage 2)) (le .PageNumber (add $currentPage 2)) }}
+            {{- $showPrevEllipsis := and (gt $currentPage 4) (eq .PageNumber 2) }}
+            {{- $showNextEllipsis := and (lt $currentPage (sub $totalPages 3)) (eq .PageNumber (sub $totalPages 1)) }}
+            {{- if or $showPrevEllipsis $showNextEllipsis }}
+            <li class="button disabled">
+                <span class="button__text">&hellip;</span>
+            </li>
+             {{- else if or $isFirst $isLast $inWindow }}
+            <li class="button {{- if eq $currentPage .PageNumber }} disabled active{{ end }}">
+                <a href="{{ .URL }}">
+                <span class="button__text">{{ .PageNumber }}</span>
+                </a>
+            </li>
+            {{- end }}
+            {{- end }}
+        </ol>
+        {{- end }}
+        {{- end }}
+        {{- if .Paginator.HasNext }}
         <span class="button next">
             <a href="{{ .Paginator.Next.URL }}">
-                <span class="button__text">Older posts</span>
+                <span class="button__text">Next</span>
                 <span class="button__icon">→</span>
             </a>
         </span>
-        {{ end }}
+        {{- end }}
     </div>
 </div>

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

@@ -10,10 +10,6 @@
     <div class="content content-list">{{ .Content }}</div>
     {{- end }}
 
-    {{- if .Paginator.HasPrev }}
-    {{ partial "pagination.html" . }}
-    {{- end }}
-
     <div class="posts-list masonry">
         {{ range $paginator.Pages }}
         <div class="post">