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

update some text, add theme switcher and icons

Browse Source
master
Rostyslav Hnatyshyn 2 months ago
parent d26aa19abd
commit fb30c69718
6 changed files with 71 additions and 14 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      .gitignore
  2. 1
      README.md
  3. 51
      css/default.scss
  4. 2
      index.html
  5. 2
      site.hs
  6. 27
      templates/default.html

2
.gitignore vendored
Unescape 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/

1
README.md
Unescape View File

@ -0,0 +1 @@
Hakyll source code for my personal site.

51
css/default.scss
Unescape 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;
} }

2
index.html
Unescape 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>

2
site.hs
Unescape 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

27
templates/default.html
Unescape 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$

Write Preview
Loading…
Cancel
Save