Add dark mode feature

.github/workflows/test.yml

@@ -0,0 +1,12 @@
+name: Run tests
+on: ["pull_request"]
+jobs:
+  run-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Git repository
+        uses: actions/checkout@v3
+      - name: Install npm dependencies
+        run: npm install
+      - name: Make sure code is formatted
+        run: npx prettier --check .

.gitignore

@@ -1,3 +1,6 @@
 # Hugo stuff.
 /resources/_gen/
 .hugo_build.lock
+
+# NodeJS
+node_modules/

.prettierignore

@@ -0,0 +1,5 @@
+build
+coverage
+*.md
+*.html
+*.json

.prettierrc.json

@@ -0,0 +1 @@
+{}

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "prettier": "^2.8.4"
+  }
+}

themes/makedeb/assets/scss/404.scss

@@ -1,9 +1,9 @@
 .four-o-four {
-	padding: 2em 1em 0;
+  padding: 2em 1em 0;
 
-	p {
-		font-size: 2em;
-		text-align: center;
-		line-height: 1.3em;
-	}
+  p {
+    font-size: 2em;
+    text-align: center;
+    line-height: 1.3em;
+  }
 }

themes/makedeb/assets/scss/content-section.scss

@@ -1,62 +1,67 @@
 @import "variables";
 
 .content-section {
-	margin: 2em;
-
-	.header {
-		display: flex;
-		align-items: end;
-		padding-bottom: 1em;
-
-		h1 {
-			font-size: 2em;
-			padding-right: 0.3em;
-		}
-
-		.rss-icon {
-			color: darken($light-grey, 20%);
-			width: auto;
-			height: 1.4em;
-			transition-property: color;
-			transition-duration: 0.2s;
-		}
-
-		.rss-icon:hover {
-			color: $orange;
-		}
-	}
-
-	.post-card {
-		height: auto;
-		border: solid;
-		border-color: darken($silver, 10%);
-		border-width: 0.15em;
-		background-color: $silver;
-		border-radius: 0.2em;
-		padding: 1em 0.5em;
-		margin-bottom: 0.5em;
-		display: flex;
-		flex-direction: column;
-
-		.date {
-			font-size: 0.9em;
-			padding-bottom: 0.5em;
-			color: lighten($dark-grey, 40%);
-		}
-
-		.title {
-			font-size: 1.4em;
-			padding-bottom: 0.5em;
-		}
-
-		.title, .read-more {
-			color: $dark-grey;
-			transition: color 0.2s;
-			width: fit-content;
-		}
-
-		.title:hover, .read-more:hover {
-			color: $orange;
-		}
-	}
+  margin: 2em;
+
+  .header {
+    display: flex;
+    align-items: end;
+    padding-bottom: 1em;
+
+    h1 {
+      font-size: 2em;
+      padding-right: 0.3em;
+    }
+
+    .rss-icon {
+      color: darken($light-grey, 20%);
+      width: auto;
+      height: 1.4em;
+      transition-property: color;
+      transition-duration: 0.2s;
+    }
+
+    .rss-icon:hover {
+      color: $orange;
+    }
+  }
+
+  .post-card {
+    height: auto;
+    border: solid;
+    border-color: darken($silver, 10%);
+    border-width: 0.15em;
+    @extend .themeBackgroundColor;
+    background-color: $silver;
+    border-radius: 0.2em;
+    padding: 1em 0.5em;
+    margin-bottom: 0.5em;
+    display: flex;
+    flex-direction: column;
+
+    .date {
+      font-size: 0.9em;
+      padding-bottom: 0.5em;
+      @extend .postContentDateColor;
+      color: lighten($dark-grey, 40%);
+    }
+
+    .title {
+      font-size: 1.4em;
+      padding-bottom: 0.5em;
+    }
+
+    .title,
+    .read-more {
+      color: $dark-grey;
+      @extend .themeBackgroundColor;
+      transition: color 0.2s;
+      width: fit-content;
+    }
+
+    .title:hover,
+    .read-more:hover {
+      color: $orange;
+    }
+  }
 }

themes/makedeb/assets/scss/footer.scss

@@ -3,76 +3,82 @@
 $footer-max-width: 1230px;
 
 footer {
-	height: 100%;
-	padding: 0.8em 0;
-	font-size: 1.1em;
-	background-color: $dark-grey;
-	display: flex;
-	justify-content: space-between;
+  height: 100%;
+  padding: 0.8em 0;
+  font-size: 1.1em;
+  @extend .themeHeaderHrColor;
+  background-color: $dark-grey;
+  display: flex;
+  justify-content: space-between;
 
-	@media (max-width: $footer-max-width) {
-		flex-direction: column;
-	}
+  @media (max-width: $footer-max-width) {
+    flex-direction: column;
+  }
 
-	p {
-		color: $light-grey;
-		width: fit-content;
-		line-height: 1.2em;
-		text-align: center;
-		padding: 0;
-	}
+  p {
+    color: $light-grey;
+    width: fit-content;
+    line-height: 1.2em;
+    text-align: center;
+    padding: 0;
+  }
 
-	.copyright, .generation-info, .links {
-		align-self: center;
-	}
+  .copyright,
+  .generation-info,
+  .links {
+    align-self: center;
+  }
 
-	@media (max-width: $footer-max-width) {
-		.copyright, .generation-info, .links {
-			padding: 0 0.5em;
-		}
+  @media (max-width: $footer-max-width) {
+    .copyright,
+    .generation-info,
+    .links {
+      padding: 0 0.5em;
+    }
 
-		.generation-info, .links {
-			padding-top: 0.5em;
-		}
-	}
-
-	.copyright {
-		@media (min-width: $footer-max-width) {
-			margin-left: 0.7em;
-		}
-	}
+    .generation-info,
+    .links {
+      padding-top: 0.5em;
+    }
+  }
 
-	.generation-info {
-		a {
-			color: $light-orange;
-			transition: color 0.2s;
-		}
+  .copyright {
+    @media (min-width: $footer-max-width) {
+      margin-left: 0.7em;
+    }
+  }
 
-		a:hover {
-			color: $orange;
-		}
-
-		@media (max-width: $footer-max-width) {
-			display: none;
-		}
-	}
+  .generation-info {
+    a {
+      color: $light-orange;
+      transition: color 0.2s;
+    }
 
-	.links {
-		text-align: center;
+    a:hover {
+      color: $orange;
+    }
 
-		a {
-			color: $light-grey;
-			margin-right: 1em;
-			transition-property: color;
-			transition-duration: 0.2s;
+    @media (max-width: $footer-max-width) {
+      display: none;
+    }
+  }
 
-			@media (max-width: $footer-max-width) {
-				margin: 0 0.5em;
-			}
-		}
+  .links {
+    text-align: center;
 
-		a:hover {
-			color: $light-orange;
-		}
-	}
+    a {
+      color: $light-grey;
+      margin-right: 1em;
+      transition-property: color;
+      transition-duration: 0.2s;
+
+      @media (max-width: $footer-max-width) {
+        margin: 0 0.5em;
+      }
+    }
+
+    a:hover {
+      color: $light-orange;
+    }
+  }
 }

themes/makedeb/assets/scss/generic-page.scss

@@ -1,3 +1,3 @@
 .generic-page {
-    padding: 1em;
-}
+  padding: 1em;
+}