Add darkmode

Prettier titles

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';

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);

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
+        background: $light
-        color: inherit
+        color: $dark
 
         overflow: hidden
         transition: color 0.1s ease-in-out
@@ -191,8 +176,8 @@ main
         font-size: 1rem
         white-space: nowrap
 
-        background: inherit
+        background: $light
-        color: inherit
+        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

static/sass/styles/art-block.sass

@@ -13,7 +13,6 @@
             width: 100%
             height: 100%
             position: relative
-            background: $light
             border-radius: $radius
 
         img

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

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-family: inherit
-        font-size: 0.9rem
-        font-family: $font-mono
 
         background: $dark
         color: $light
@@ -30,24 +32,31 @@
         justify-content: center
         align-items: center
 
-        font-size: 0.9rem
+        font-family: inherit
-        font-family: $font-mono
-        text-decoration: none
 
         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
+            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
-            outline: none

static/sass/styles/footer.sass

@@ -6,23 +6,17 @@ footer
     flex-direction: column
     justify-content: center
     align-items: center
-
-    background-color: $light
-    color: $dark
-
-    p
-        margin: 0
-        font-size: 0.9rem
     text-align: center
-        color: inherit
+    font-size: 0.9rem
+
+    p, a
+        margin: 0
 
     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

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

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

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

templates/base.html

@@ -31,5 +31,6 @@
     {% compress js %}
         <script src="{% static 'js/navigation.js' %}" defer></script>
         <script src="{% static 'js/scroll.js' %}" defer></script>
+        <script src="{% static 'js/title.js' %}" defer></script>
     {% endcompress %}
 </html>

templates/footer.html

@@ -1,2 +1,2 @@
 <a href="https://github.com/Fluffy-Bean/Fluffys-website">Website source</a>
-<p style="margin-left: 0.5rem">Designed by meeee</p>
+<p>Designed by meeee</p>

templates/views/article.html

@@ -9,7 +9,7 @@
     <header>
         <img src="{{ article.thumb.url }}" alt="{{ article.title }}">
         <h1>{{ article.title }}</h1>
-        <p>{{ article.date }}</p>
+        <p>{{ article.date|date:"jS M, Y" }}</p>
     </header>
 {% endblock %}
 

templates/views/articles.html

@@ -4,7 +4,7 @@
     {% for article in articles %}
         <a href="{% url 'articles:detail' slug=article.slug %}" class="article">
             <h2>{{ article.title }}</h2>
-            <p>{{ article.date|date:"jS M, Y" }}</p>
+            <p>{{ article.date|timesince }}</p>
         </a>
     {% endfor %}
 {% endblock %}

templates/views/index.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 {% block content %}
-    <h1>Hello, stranger!</h1>
+    <h1 class="fancy">Leggy&nbsp;Land!!!!!!</h1>
     <h2>About Meeeeee</h2>
     <p>My name is Fluffy, I'm an 18-year-old nerd, who likes to code and tinker with computers!</p>
     <img src="{% static 'images/sneak.png' %}" alt="FluffyBean" style="width:11rem;float:right;" width="178" height="126">