Import more files from theme; use cdns

config.toml

@@ -1,28 +1,41 @@
-# The URL the site will be built for
 base_url = "https://mat.services"
 title = "mat.services"
+description = "the personal website of matthew ess"
+
+default_language = "en"
 
-# Whether to automatically compile all Sass files in the sass directory
 compile_sass = true
 
-# Whether to build a search index to be used later on by a JavaScript library
 build_search_index = false
 
+generate_feed = true
+
 theme = "apollo"
 
 [markdown]
-# Whether to do syntax highlighting
 highlight_code = true
+render_emoji = false
+external_links_target_blank = true
+external_links_no_referrer = true
 
 [extra]
 theme = "auto"
 favicon = "/favicon.svg"
-stylesheets = ["extra.css"]
+stylesheets = []
+
+use_cdn = true
+cdns = [
+    "https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.min.css",
+    "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard-std-dynamic-subset.min.css",
+    "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/variable/pretendardvariable-std.min.css",
+    "https://cdn.jsdelivr.net/gh/codex-src/iA-Fonts@master/iA%20Writer%20Quattro/Webfonts/index.min.css",
+    "https://cdn.jsdelivr.net/gh/codex-src/iA-Fonts@master/iA%20Writer%20Quattro/Variable/index.min.css",
+]
 
 menu = [
-    { name = "/posts", url = "/posts", external = false },
+    { name = "/posts", url = "/posts" },
-    { name = "/projects", url = "/projects", external = false },
+    { name = "/projects", url = "/projects" },
-    { name = "/about", url = "/about", external = false },
+    { name = "/about", url = "/about" },
     { name = "git", url = "https://git.mat.services/explore/repos", external = true },
 ]
 

sass/extra.scss

@@ -1,43 +0,0 @@
-// Logo
-div.brand>* {
-  padding: 0 0.25em;
-}
-
-div.brand:hover img.logo {
-  filter: brightness(0) invert(1);
-}
-
-img.logo {
-  border: none;
-  height: 0.75em;
-  width: 0.75em;
-  padding-right: 0.25em;
-}
-
-// Nav links
-nav a {
-  margin-left: 0.7em;
-}
-
-// Footer
-.content {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-div.inner {
-  flex-grow: 1;
-}
-
-header,
-footer {
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-footer {
-  margin: 2em;
-  color: grey;
-  font-size: 0.75em;
-}

sass/main.scss

@@ -0,0 +1,141 @@
+@import "../themes/apollo/sass/parts/_code.scss";
+@import "../themes/apollo/sass/parts/_header.scss";
+@import "../themes/apollo/sass/parts/_image.scss";
+@import "../themes/apollo/sass/parts/misc.scss";
+@import "../themes/apollo/sass/parts/table.scss";
+@import "../themes/apollo/sass/parts/tags.scss";
+
+:root {
+  /* Used for: block comment, hr, ... */
+  --border-color: var(--bg-1);
+
+  /* Fonts */
+  --text-font: 'iA Writer Quattro';
+  --header-font: 'Pretendard Std';
+  --code-font: 'Fira Code';
+
+  @supports(font-variation-settings: normal) {
+    /* Variable fonts */
+    --text-font: 'iA Writer Quattro var';
+    --header-font: 'Pretendard Std Variable';
+    --code-font: 'Fira Code VF';
+  }
+}
+
+html {
+  background-color: var(--bg-0);
+  color: var(--text-0);
+  font-family: var(--text-font);
+  line-height: 1.6em;
+}
+
+.content {
+  max-width: 944px;
+  margin: 0 auto;
+  padding: 0 24px;
+  word-wrap: break-word;
+}
+
+@media all and (min-width:640px) {
+  html {
+    font-size: 16.5px;
+  }
+}
+
+@media all and (min-width:720px) {
+  html {
+    font-size: 17px;
+  }
+}
+
+@media all and (min-width:960px) {
+  html {
+    font-size: 18px;
+  }
+}
+
+div.brand>* {
+  padding: 0 0.25em;
+}
+
+div.brand:hover img.logo {
+  filter: brightness(0) invert(1);
+}
+
+img.logo {
+  border: none;
+  height: 0.75em;
+  width: 0.75em;
+  padding-right: 0.25em;
+}
+
+// Nav links
+nav a {
+  margin-left: 0.7em;
+  font-family: var(--code-font);
+}
+
+// Footer
+.content {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+div.inner {
+  flex-grow: 1;
+}
+
+header,
+footer {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+footer {
+  margin: 2em;
+  color: grey;
+  font-size: 0.75em;
+}
+
+// Different sized headers
+h1 {
+  font-size: 1.5rem;
+  margin-top: 1.5em;
+}
+
+h2 {
+  font-size: 1.4rem;
+  margin-top: 1.4em;
+}
+
+h3 {
+  font-size: 1.3rem;
+  margin-top: 1.3em;
+}
+
+h4 {
+  font-size: 1.2rem;
+  margin-top: 1.2em;
+}
+
+h5 {
+  font-size: 1.1rem;
+  margin-top: 1.1em;
+}
+
+h6 {
+  font-size: 1rem;
+  margin-top: 1em;
+}
+
+// Code fonts
+pre,
+code {
+  font-family: var(--code-font);
+}
+
+// Page title width
+.page-header {
+  max-width: 720px;
+}

sass/theme/dark.scss

@@ -3,7 +3,7 @@
   --text-1: rgba(255, 255, 255, 60%);
 
   --bg-0: #121212;
-  --bg-1: rgba(255, 255, 255, 5%);
+  --bg-1: rgba(255, 255, 255, 15%);
 
   --primary-color: lightcoral;
   --hover-color: white;

sass/theme/light.scss

@@ -3,7 +3,7 @@
   --text-1: rgba(0, 0, 0, 66%);
 
   --bg-0: #fff;
-  --bg-1: #f2f2f2;
+  --bg-1: rgba(169, 169, 169, 30%);
 
   --primary-color: lightcoral;
   --hover-color: white;

templates/partials/header.html

@@ -0,0 +1,52 @@
+{% import "macros/macros.html" as post_macros %}
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  {# Site title #}
+  {% set current_path = current_path | default(value="/") %}
+  {% if current_path == "/" %}
+  <title>
+    {{ config.title | default(value="Home") }}
+  </title>
+  {% else %}
+  <title>
+    {{ page.title | default(value=config.title) | default(value="Post") }}
+  </title>
+  {% endif %}
+
+  {# Favicon #}
+  {% if config.extra.favicon %}
+  {% set favicon_ext = config.extra.favicon | split(pat=".") | last %}
+  <link rel="icon" type="image/{{ favicon_ext }}" href={{ config.extra.favicon }} />
+  {% endif %}
+
+  {# Font from cdn or disk #}
+  {% if config.extra.use_cdn | default(value=false) %}
+  {% for cdn in config.extra.cdns %}
+  <link href={{ cdn }} rel="stylesheet">
+  {% endfor %}
+  {% else %}
+  {% endif %}
+  <link href={{ get_url(path="fonts.css" ) }} rel="stylesheet" />
+
+  {# RSS #}
+  <link rel="alternate" type="application/atom+xml" title="{{ config.title }}" href="{{ get_url(path="atom.xml",
+    trailing_slash=false) }}">
+
+  {# Theme #}
+  <link rel="stylesheet" type="text/css" href="{{ get_url(path="theme/light.css") }}" />
+  <link rel="stylesheet" type="text/css" href="{{ get_url(path="theme/dark.css") }}"
+    media="(prefers-color-scheme: dark)" />
+
+  <link rel="stylesheet" type="text/css" media="screen" href={{ get_url(path="main.css" ) }} />
+
+
+  {% if config.extra.stylesheets %}
+  {% for stylesheet in config.extra.stylesheets %}
+  <link rel="stylesheet" href="{{ get_url(path=stylesheet) }}">
+  {% endfor %}
+  {% endif %}
+</head>