From 0ddc2a20b20b2cee78db9c1ea524ab99dfeead7c Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Fri, 21 Jul 2023 13:25:33 +0100 Subject: [PATCH] Add darkmode Prettier titles --- static/js/navigation.js | 8 +-- static/js/title.js | 31 ++++++++++ static/sass/styles.sass | 84 ++++++++++++++-------------- static/sass/styles/art-block.sass | 1 - static/sass/styles/back-button.sass | 39 +++++++++++++ static/sass/styles/button-array.sass | 31 ++++++---- static/sass/styles/footer.sass | 16 ++---- static/sass/styles/markdown.sass | 12 ++++ static/sass/styles/navigation.sass | 17 +++++- static/sass/styles/table.sass | 15 +++++ templates/base.html | 1 + templates/footer.html | 2 +- templates/views/article.html | 2 +- templates/views/articles.html | 2 +- templates/views/index.html | 2 +- 15 files changed, 187 insertions(+), 76 deletions(-) create mode 100644 static/js/title.js create mode 100644 static/sass/styles/back-button.sass 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 %} diff --git a/templates/footer.html b/templates/footer.html index 377ae8f..8754827 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -1,2 +1,2 @@ Website source -

Designed by meeee

+

Designed by meeee

diff --git a/templates/views/article.html b/templates/views/article.html index fa6e58f..59ea3d8 100644 --- a/templates/views/article.html +++ b/templates/views/article.html @@ -9,7 +9,7 @@
{{ article.title }}

{{ article.title }}

-

{{ article.date }}

+

{{ article.date|date:"jS M, Y" }}

{% endblock %} diff --git a/templates/views/articles.html b/templates/views/articles.html index 90646b7..741e0ae 100644 --- a/templates/views/articles.html +++ b/templates/views/articles.html @@ -4,7 +4,7 @@ {% for article in articles %}

{{ article.title }}

-

{{ article.date|date:"jS M, Y" }}

+

{{ article.date|timesince }}

 {% endfor %} {% endblock %} diff --git a/templates/views/index.html b/templates/views/index.html index 219d86c..8cc146e 100644 --- a/templates/views/index.html +++ b/templates/views/index.html @@ -2,7 +2,7 @@ {% load static %} {% block content %} -

Hello, stranger!

+

Leggy Land!!!!!!

About Meeeeee

My name is Fluffy, I'm an 18-year-old nerd, who likes to code and tinker with computers!

FluffyBean