rostyhn/rshyn-site
1
0
Fork 0
Code Releases Activity

update some text, add theme switcher and icons

Browse Source
This commit is contained in:
Rostyslav Hnatyshyn
2024-09-23 01:56:23 -07:00
parent d26aa19abd
commit fb30c69718
6 changed files with 71 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2
View File
@@ -4,9 +4,11 @@ dist-newstyle
_cache _cache
_site _site
stack.yaml.lock stack.yaml.lock
film/ film/
fonts/ fonts/
images/ images/
posts/ posts/
publications/ publications/
files/ files/
font-awesome/
README.md
+1
View File
@@ -0,0 +1 @@
Hakyll source code for my personal site.
css/default.scss
+42 -9
View File
@@ -1,29 +1,50 @@
@import url(/fonts/fonts.css); @import url(/fonts/fonts.css);
$bg-color: #F3F8F1; $themes: (
$primary-color: #D7263D; "light": (
$secondary-color: #984EA3; "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 { html {
font-family: "SpaceGrotesk"; font-family: "SpaceGrotesk";
background-color: $bg-color;
} }
a { a {
color: $primary-color; color: var(--primary);
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color : $secondary-color; color : var(--secondary);
} }
a:visited { a:visited {
color: $secondary-color; color: var(--secondary);
} }
body { body {
font-size: 1.6rem; font-size: 1.6rem;
color: var(--text);
background-color: var(--background);
} }
header { header {
@@ -37,11 +58,23 @@ nav {
nav a { nav a {
font-size: 1.8rem; font-size: 1.8rem;
font-weight: bold; font-weight: bold;
color: black; color: var(--text);
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
} }
#btn-switch {
background: none;
color: inherit;
border: none;
font: inherit;
cursor: pointer;
}
#btn-switch:hover {
color : var(--secondary);
}
h1 { h1 {
font-size: 2.4rem; font-size: 2.4rem;
} }
@@ -58,7 +91,7 @@ article .header {
.logo a { .logo a {
font-weight: bold; font-weight: bold;
color: #000; color: var(--text);
text-decoration: none; text-decoration: none;
} }
index.html
+1 -1
View File
@@ -4,7 +4,7 @@ title: Home
<p> <p>
My name is (R)ostyslav Hnaty(shyn), but I go by Rosty. 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>
<p> <p>
site.hs
+1 -1
View File
@@ -16,7 +16,7 @@ main :: IO ()
main = hakyllWith config $ do main = hakyllWith config $ do
-- Static directories -- Static directories
match ("fonts/*" .||. "images/*" .||. "files/*" .||. "film/*") $ do match ("fonts/*" .||. "images/*" .||. "files/*" .||. "film/*" .||. "font-awesome/**") $ do
route idRoute route idRoute
compile copyFileCompiler compile copyFileCompiler
templates/default.html
+24 -3
View File
@@ -6,18 +6,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>rshyn.site</title> <title>rshyn.site</title>
<link rel="stylesheet" href="/css/default.css" /> <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> </head>
<body> <body data-theme="light">
<header> <header>
<div class="logo"> <div class="logo">
<a href="/">rshyn.site</a> <a href="/">rshyn.site</a>
</div> </div>
<nav> <nav>
<a href="/">Home</a> <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> </nav>
</header> </header>
<main role="main"> <main role="main">
<h1>$title$</h1> <h1>$title$</h1>
$body$ $body$