Switch to SASS

.eleventy.js

@@ -1,3 +1,4 @@
+import * as sass from "sass";
 import { DateTime } from "luxon";
 import Image from "@11ty/eleventy-img";
 import pluginRss from "@11ty/eleventy-plugin-rss";
@@ -71,6 +72,15 @@ export default function (eleventyConfig) {
 		return tocHtml;
 	});
 
+	eleventyConfig.addShortcode("inlineSass", function (scssFilePath) {
+		return sass.compile(scssFilePath,
+			{
+				loadPaths: ["node_modules"],
+				silenceDeprecations: ["color-functions", "global-builtin", "import"],
+				style: "compressed",
+			}).css;
+	});
+
 	/* Reload on CSS changes, since 11ty doesn't see them */
 	eleventyConfig.addWatchTarget("style");
 	eleventyConfig.addWatchTarget("assets");

_includes/layout.html

@@ -25,15 +25,11 @@
 		{% set keywords = "techblog, programming, graphics, webdev, japan" %}
 	{% endif %}
 	<meta name="keywords" content="{{ keywords }}">
-	
+
 	<style>
-		{% include 'node_modules/sakura.css/css/normalize.css' %}
-		{% include 'node_modules/sakura.css/css/sakura-vader.css' %}
-		{% include 'node_modules/prism-themes/themes/prism-gruvbox-dark.min.css' %}
-		{% include 'style/base.css' %}
-		{% include 'style/card.css' %}
+		{% inlineSass 'style/base.scss' %}
 	</style>
-
+	
 	<!-- Twitter Tags -->
 	<meta name="twitter:card" content="summary" />
 	<meta name="twitter:creator" content="@FrostKiwiOne" />

about.md

@@ -3,7 +3,7 @@ layout: layout.html
 ---
 <blockquote class="profile_wrapper">
 	<div class="img_wrapper">
-		<img class="profile" src="/assets/profile.jpg">
+		<img src="/assets/profile.jpg">
 	</div>
 	<div class="text_wrapper">
 		<p>