update some text, add theme switcher and icons

2 weeks ago · fb30c69718
parent d26aa19abd
commit fb30c69718
6 changed files with 71 additions and 14 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,9 +4,11 @@ dist-newstyle
 _cache
 _site
 stack.yaml.lock
+
 film/
 fonts/
 images/
 posts/
 publications/
 files/
+font-awesome/
--- a/README.md
+++ b/README.md
@ -0,0 +1 @@
+Hakyll source code for my personal site.
--- a/css/default.scss
+++ b/css/default.scss
@ -1,29 +1,50 @@
@import url(/fonts/fonts.css);

-$bg-color: #F3F8F1;
-$primary-color: #D7263D;
-$secondary-color: #984EA3;
+$themes: (
+  "light": (
+    "background": #F3F8F1,
+    "primary": #D7263D,
+    "secondary": #984EA3,
+    "text": black
+  ),
+  "dark": (
+    "primary": #88d498,
+    "secondary": #db5375,
+    "background": #161616,
+    "text": white
+  )
+);
+
+@each $theme-name, $properties in $themes {
+  body[data-theme="#{$theme-name}"] {
+    // define a css variable for each property
+    @each $name, $property in $properties {
+      --#{$name}: #{$property};
+    }
+  }
+}

 html {
  font-family: "SpaceGrotesk";
-  background-color: $bg-color;
 }

 a {
-  color: $primary-color;
+  color: var(--primary);
  text-decoration: none;
 }

 a:hover {
-  color : $secondary-color;
+  color : var(--secondary);
 }

 a:visited {
-    color: $secondary-color;
+  color: var(--secondary);
 }

 body {
  font-size: 1.6rem;
+  color: var(--text);
+  background-color: var(--background);
 }

 header {
@ -37,11 +58,23 @@ nav {
 nav a {
  font-size: 1.8rem;
  font-weight: bold;
-  color: black;
+  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
 }

+#btn-switch {
+  	background: none;
+	color: inherit;
+	border: none;
+	font: inherit;
+	cursor: pointer;
+}
+
+#btn-switch:hover {
+  color : var(--secondary);
+}
+
 h1 {
  font-size: 2.4rem;
 }
@ -58,7 +91,7 @@ article .header {

 .logo a {
  font-weight: bold;
-  color: #000;
+  color: var(--text);
  text-decoration: none;
 }

--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@ title: Home

 <p>
 My name is (R)ostyslav Hnaty(shyn), but I go by Rosty. 
-I am a second year PhD student at Arizona State University.
+I am a third year PhD student at the <a href="https://vader.lab.asu.edu/#/">VADER (Visual Analytics and Data Exploration Research) Lab</a> at Arizona State University.
 </p>

 <p>
--- a/site.hs
+++ b/site.hs
@ -16,7 +16,7 @@ main :: IO ()
 main = hakyllWith config $ do
  -- Static directories

-  match ("fonts/*" .||. "images/*" .||. "files/*" .||. "film/*") $ do
+  match ("fonts/*" .||. "images/*" .||. "files/*" .||. "film/*" .||. "font-awesome/**") $ do
    route idRoute
    compile copyFileCompiler

--- a/templates/default.html
+++ b/templates/default.html
@ -6,18 +6,39 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>rshyn.site</title>
        <link rel="stylesheet" href="/css/default.css" />
+        <!-- search for more icons at https://fontawesome.com/search?o=r&m=free -->
+        <link href="/font-awesome/css/fontawesome.css" rel="stylesheet" />
+        <link href="/font-awesome/css/brands.css" rel="stylesheet" />
+        <link href="/font-awesome/css/solid.css" rel="stylesheet" />
+        <script>
+            // check for dark mode preference, add functionality to theme switcher
+            document.addEventListener("DOMContentLoaded", function() {
+                const btn = document.getElementById("btn-switch");
+                const bdy = document.querySelector("body");
+
+                if (window.matchMedia('(prefers-color-scheme: dark)')) {
+                    bdy.dataset.theme = "dark";
+                }
+
+                btn.addEventListener("click", function () {
+                    bdy.dataset.theme = (bdy.dataset.theme === "light") ? "dark" : "light";
+                });
+            });
+        </script>
    </head>
-    <body>
+    <body data-theme="light">
        <header>
            <div class="logo">
                <a href="/">rshyn.site</a>
            </div>
            <nav>
                <a href="/">Home</a>
-                <a href="/gallery.html">Photos</a>
+                <a href="/gallery.html" title="Photo gallery">Photos</a>
+                <a href="https://github.com/rostyhn" title="Github"><i class="fa-brands fa-github"></i></a>
+                <a href="https://git.rshyn.site" title="Self-hosted Gitea instance"><i class="fa-brands fa-git-alt"></i></a>
+                <button id="btn-switch" title="Switch light / dark mode"><i class="fa-solid fa-circle-half-stroke"></i></button>
            </nav>
        </header>
-
        <main role="main">
            <h1>$title$</h1>
            $body$