diff --git a/static/js/navigation.js b/static/js/navigation.js
index dade96d..03ab386 100644
--- a/static/js/navigation.js
+++ b/static/js/navigation.js
@@ -1,12 +1,12 @@
+const nav = document.querySelector('nav');
+const button = document.querySelector('.nav-toggle');
+
let navRotate = 0;
let increment = 45;
function toggleNav() {
- let nav = document.querySelector('nav');
- let button = document.querySelector('.nav-toggle');
-
navRotate += increment;
- button.style.transform = `rotate(${navRotate}deg)`;
+ button.querySelector('svg').style.transform = `rotate(${navRotate}deg)`;
if (nav.classList.contains('open')) {
document.querySelector('body').style.overflow = 'auto';
diff --git a/static/js/title.js b/static/js/title.js
new file mode 100644
index 0000000..98d5003
--- /dev/null
+++ b/static/js/title.js
@@ -0,0 +1,31 @@
+const title = document.querySelector('h1');
+const titleHeight = title.offsetHeight;
+let titleText = title.textContent;
+let letterOffset = 0;
+let timeOffset = 10;
+
+title.textContent = '';
+title.style.height = titleHeight + 'px';
+title.style.opacity = "1";
+
+titleText.split('').forEach((letter) => {
+ let span = document.createElement('span');
+
+ span.textContent = letter;
+ span.style.left = letterOffset + 'px';
+ span.style.transform = 'translateY(100%)';
+
+ title.append(span);
+
+ setTimeout(() => {
+ span.style.transform = '';
+ }, timeOffset);
+
+ letterOffset += span.offsetWidth;
+ timeOffset += 100;
+});
+
+setTimeout(() => {
+ title.textContent = '';
+ title.textContent = titleText;
+}, timeOffset + 500);
diff --git a/static/sass/styles.sass b/static/sass/styles.sass
index 2e54ba2..59fd603 100644
--- a/static/sass/styles.sass
+++ b/static/sass/styles.sass
@@ -13,6 +13,7 @@ $font-mono: 'IBM Plex Mono', monospace
@import "styles/table"
@import "styles/art-block"
@import "styles/button-array"
+@import "styles/back-button"
*
font-family: $font
@@ -27,6 +28,13 @@ $font-mono: 'IBM Plex Mono', monospace
html
font-size: 1rem
background-color: $light
+ color: $dark
+ transition: background 0.1s ease-in-out
+
+@media (prefers-color-scheme: dark)
+ html
+ background-color: $dark
+ color: $light
body
margin: 0
@@ -34,40 +42,8 @@ body
min-height: 100vh
display: flex
flex-direction: column
- color: $dark
-
-.back
- padding: 0
- width: 3rem
- height: 3rem
-
- display: flex
- justify-content: center
- align-items: center
-
- position: fixed
- right: 1.3rem
- bottom: 1.3rem
-
- border: 0 solid transparent
- border-radius: 50%
- background: $dark
- box-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.4)
-
- cursor: pointer
- z-index: 10
-
- svg
- display: block
- width: 1.4rem
- height: 1.4rem
- color: $light
-
- &:hover
- text-decoration: none
.scroll
- width: 0
height: 0.3rem
position: fixed
@@ -90,15 +66,17 @@ header
background-color: $dark
color: $light
+
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2)
- z-index: 2
overflow: hidden
+ z-index: 2
img
width: 100%
height: 100%
position: absolute
- inset: 0
+ top: 0
+ left: 0
object-fit: cover
h1
@@ -148,14 +126,23 @@ main
h1
margin: 0 0 0.5rem 0
+ position: relative
font-size: 2.5rem
color: $accent
+ overflow: hidden
+ opacity: 0
+
+ span
+ position: absolute
+ transition: transform 0.5s cubic-bezier(.18,.89,.32,1.28)
a
color: $accent
text-decoration: none
- &:hover
+
+ &:hover, &:focus-visible
text-decoration: underline
+ outline: 0 solid transparent
.article
margin: 0 0 0.5rem 0
@@ -166,8 +153,6 @@ main
position: relative
text-decoration: none
- background: $light
- color: $dark
h2
margin: 0 0.5rem 0.2rem 0
@@ -177,8 +162,8 @@ main
white-space: nowrap
text-overflow: ellipsis
- background: inherit
- color: inherit
+ background: $light
+ color: $dark
overflow: hidden
transition: color 0.1s ease-in-out
@@ -191,8 +176,8 @@ main
font-size: 1rem
white-space: nowrap
- background: inherit
- color: inherit
+ background: $light
+ color: $dark
transition: color 0.1s ease-in-out
z-index: +1
@@ -212,9 +197,24 @@ main
transition: background 0.1s ease-in-out
&:hover
- color: $accent
text-decoration: none
+ h2, p
+ color: $accent
+
+@media (prefers-color-scheme: dark)
+ .article
+ h2
+ background: $dark
+ color: $light
+
+ p
+ background: $dark
+ color: $light
+
+ &::after
+ border-top: 1px $light dotted
+
@media (max-width: 600px)
.article
h2
diff --git a/static/sass/styles/art-block.sass b/static/sass/styles/art-block.sass
index 79a911e..fc5e79b 100644
--- a/static/sass/styles/art-block.sass
+++ b/static/sass/styles/art-block.sass
@@ -13,7 +13,6 @@
width: 100%
height: 100%
position: relative
- background: $light
border-radius: $radius
img
diff --git a/static/sass/styles/back-button.sass b/static/sass/styles/back-button.sass
new file mode 100644
index 0000000..514eaaa
--- /dev/null
+++ b/static/sass/styles/back-button.sass
@@ -0,0 +1,39 @@
+.back
+ padding: 0
+ width: 3rem
+ height: 3rem
+
+ display: flex
+ justify-content: center
+ align-items: center
+
+ position: fixed
+ right: 1.3rem
+ bottom: 1.3rem
+
+ outline: 0.5rem solid $light
+ border: 0 solid transparent
+ border-radius: 50%
+ background: $dark
+
+ transition: transform 0.2s ease-in-out
+ cursor: pointer
+ z-index: 10
+
+ svg
+ display: block
+ width: 1.4rem
+ height: 1.4rem
+ color: $light
+
+ &:hover, &:focus-visible
+ text-decoration: none
+ transform: translateY(-0.2rem)
+
+@media (prefers-color-scheme: dark)
+ .back
+ outline-color: $dark
+ background: $light
+
+ svg
+ color: $dark
diff --git a/static/sass/styles/button-array.sass b/static/sass/styles/button-array.sass
index a300fdb..17826df 100644
--- a/static/sass/styles/button-array.sass
+++ b/static/sass/styles/button-array.sass
@@ -3,6 +3,10 @@
flex-wrap: wrap
justify-content: start
+ font-size: 0.9rem
+ font-family: $font-mono
+ text-decoration: none
+
p
margin: 0 0.2rem 0 0
padding: 0 0.5rem
@@ -11,9 +15,7 @@
display: flex
align-items: center
-
- font-size: 0.9rem
- font-family: $font-mono
+ font-family: inherit
background: $dark
color: $light
@@ -30,24 +32,31 @@
justify-content: center
align-items: center
- font-size: 0.9rem
- font-family: $font-mono
- text-decoration: none
+ font-family: inherit
background-color: $accent
color: $dark
border: 0 solid transparent
border-radius: $radius
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
+ // transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
svg
width: 1.1rem
height: 1.1rem
- color: inherit
&:hover, &:focus-visible
text-decoration: none
- background-color: $dark
- color: $light
- outline: none
+ background-color: transparent
+ color: $dark
+ outline: 0 solid transparent
+
+@media (prefers-color-scheme: dark)
+ .button-array
+ p
+ background: $light
+ color: $dark
+
+ button, a
+ &:hover, &:focus-visible
+ color: $light
\ No newline at end of file
diff --git a/static/sass/styles/footer.sass b/static/sass/styles/footer.sass
index db7cf14..aa4fc1b 100644
--- a/static/sass/styles/footer.sass
+++ b/static/sass/styles/footer.sass
@@ -6,23 +6,17 @@ footer
flex-direction: column
justify-content: center
align-items: center
+ text-align: center
+ font-size: 0.9rem
- background-color: $light
- color: $dark
-
- p
+ p, a
margin: 0
- font-size: 0.9rem
- text-align: center
- color: inherit
a
- margin: 0
- font-size: 0.9rem
-
text-decoration: none
color: $accent
cursor: pointer
- &:hover
+ &:hover, &:focus-visible
text-decoration: underline
+ outline: 0 solid transparent
diff --git a/static/sass/styles/markdown.sass b/static/sass/styles/markdown.sass
index 4749535..feffe98 100644
--- a/static/sass/styles/markdown.sass
+++ b/static/sass/styles/markdown.sass
@@ -45,3 +45,15 @@
padding: 0 0.6rem
font-style: italic
border-left: 0.2rem solid $accent
+@media (prefers-color-scheme: dark)
+ .markdown
+ code
+ background-color: $light
+ color: $dark
+
+ pre
+ border: 1px solid $light
+
+ > code
+ background-color: $dark
+ color: $light
diff --git a/static/sass/styles/navigation.sass b/static/sass/styles/navigation.sass
index f4269f0..67cabc0 100644
--- a/static/sass/styles/navigation.sass
+++ b/static/sass/styles/navigation.sass
@@ -15,7 +15,6 @@ nav
border-radius: 0
background-color: $dark
- color: $light
opacity: 0
transform: translateY(-1rem)
@@ -80,13 +79,13 @@ nav
width: 3rem
height: 3rem
+ outline: 0.5rem solid $light
border: 0 solid transparent
border-radius: 50%
background: $dark
color: $light
- box-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.4)
- transition: all 0.2s ease-in-out
+ transition: transform 0.2s ease-in-out, outline-color 0.2s ease-in-out
cursor: pointer
z-index: 9999
@@ -95,7 +94,19 @@ nav
width: 1.4rem
height: 1.4rem
color: inherit
+ transition: transform 0.2s ease-in-out
&.open
+ outline-color: $dark
background: $light
color: $dark
+
+ &:hover, &:focus-visible
+ text-decoration: none
+ transform: translateY(-0.2rem)
+
+@media (prefers-color-scheme: dark)
+ .nav-toggle
+ outline-color: $dark
+ background-color: $light
+ color: $dark
diff --git a/static/sass/styles/table.sass b/static/sass/styles/table.sass
index 7b66679..c7d31ab 100644
--- a/static/sass/styles/table.sass
+++ b/static/sass/styles/table.sass
@@ -33,3 +33,18 @@
.table table
th, td
padding: 0.25rem
+
+@media (prefers-color-scheme: dark)
+ .table
+ border: 1px solid $light
+
+ table
+ tr
+ border-bottom: 1px solid $light
+
+ th, td
+ border-right: 1px solid $light
+
+ th
+ background: $light
+ color: $dark
diff --git a/templates/base.html b/templates/base.html
index 8deb8c7..13a22b8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -31,5 +31,6 @@
{% compress js %}
+
{% endcompress %}