Dark theme support + content update

juliangarnier · Nov 11, 2024 · b659401 · b659401
1 parent 0f3aa35
commit b659401
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 39 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1,4 +1,20 @@
-:root { font-size: 1.125rem; }
+:root {
+  font-size: 1.125rem;
+  --bg0: #FFF;
+  --bg1: rgba(206,206,206,.5);
+  --fg0: #000;
+  --fg1: rgba(0,0,0,.5);
+  --a0: #0076FF;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg0: #000;
+    --bg1: rgba(206,206,206,.125);
+    --fg0: #FFF;
+    --fg1: rgba(206,206,206,.5);
+    --a0: #0076FF;
+  }
+}
 @media (min-width: 600px) { :root { font-size: 1.5rem; } }
 @media (min-width: 900px) { :root { font-size: 1.75rem; } }
 @media (min-width: 1200px) { :root { font-size: 2rem; } }
@@ -7,14 +23,17 @@
   padding: 0;
   box-sizing: border-box;
 }
+body, html {
+  background: var(--bg0);
+  color: var(--fg0);
+}
 body {
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: 100vw;
-  min-height: 100vh;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  background: #FFF;
+  min-height: 100dvh;
+  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
 .messages {
   overflow: auto;
@@ -37,40 +56,25 @@ body {
   border-bottom-left-radius: 0;
 }
 .bubble.left {
-  background: rgba(206,206,206,0.50);
-}
-.bubble:after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: -.5rem;
-  width: .5rem;
-  height: .5rem;
-  background-image: url(../img/corner.svg);
-  background-size: .5rem .5rem;
-  background-position: .5rem 0;
-  background-repeat: no-repeat;
-  transition: background-position .15s ease-in;
-}
-.bubble.cornered:after {
-  background-position: 0 0;
+  background: var(--bg1);
 }
 .bubble span {
-  display: block;
+  display: inline;
 }
 .bubble span.message {
   opacity: 0;
+  line-height: 1.125;
 }
 .bubble a {
-  color: #0076FF;
+  color: var(--a0);
 }
 .bubble .loading {
   position: absolute;
-  width: 2.25rem;
-  font-size: 2rem;
+  white-space: pre;
+  font-size: 1.625rem;
   line-height: 1rem;
 }
 .bubble .loading b {
   display: inline-block;
-  color: rgba(0,0,0,.5);
+  color: var(--fg1);
 }
diff --git a/js/scripts.js b/js/scripts.js
@@ -6,7 +6,7 @@
 
 window.onload = function() {
 
-  var messagesEl = document.querySelector('.messages');
+  var messagesEl = /** @type {HTMLElement} */(document.querySelector('.messages'));
   var typingSpeed = 20;
   var loadingText = '<b>•</b><b>•</b><b>•</b>';
   var messageIndex = 0;
@@ -25,10 +25,11 @@ window.onload = function() {
     'Hey there 👋',
     'I\'m Julian',
     'I design and code things on the web',
-    'I\'m currently accepting freelance work.<br> You can contact me at <a href="mailto:[email protected]">[email protected]</a>',
-    '<a target="_blank" href="https://twitter.com/juliangarnier">twitter.com/juliangarnier</a><br><a target="_blank" href="https://codepen.io/juliangarnier">codepen.io/juliangarnier</a><br><a target="_blank" href="https://github.com/juliangarnier">github.com/juliangarnier</a>',
+    'I\'m currently working on <a href="https://github.com/sponsors/juliangarnier" target="_blank">anime.js v4</a>',
+    'You can find me on <a target="_blank" href="https://x.com/juliangarnier">X</a>, <a target="_blank" href="https://bsky.app/profile/juliangarnier.bsky.social">Bluesky</a> and <a target="_blank" href="https://github.com/juliangarnier">GitHub</a>',
+    'Or contact me directly at <a href="mailto:[email protected]">[email protected]</a>',
     getCurrentTime(),
-    '👀 J.'
+    '~ J.',
   ]
 
   var getFontSize = function() {
@@ -53,7 +54,7 @@ window.onload = function() {
     loadingEl.innerHTML = loadingText;
     bubbleEl.appendChild(loadingEl);
     bubbleEl.appendChild(messageEl);
-    bubbleEl.style.opacity = 0;
+    bubbleEl.style.opacity = `0`;
     return {
       bubble: bubbleEl,
       message: messageEl,
@@ -62,18 +63,23 @@ window.onload = function() {
   }
 
   var getDimentions = function(elements) {
-    return dimensions = {
+    const messageW = elements.message.offsetWidth + 2;
+    const messageH = elements.message.offsetHeight;
+    const messageS = getComputedStyle(elements.bubble);
+    const paddingTop = Math.ceil(parseFloat(messageS.paddingTop));
+    const paddingLeft = Math.ceil(parseFloat(messageS.paddingLeft));
+    return {
       loading: {
         w: '4rem',
         h: '2.25rem'
       },
       bubble: {
-        w: pxToRem(elements.bubble.offsetWidth + 4),
-        h: pxToRem(elements.bubble.offsetHeight)
+        w: pxToRem(messageW + paddingLeft * 2),
+        h: pxToRem(messageH + paddingTop * 2)
       },
       message: {
-        w: pxToRem(elements.message.offsetWidth + 4),
-        h: pxToRem(elements.message.offsetHeight)
+        w: pxToRem(messageW),
+        h: pxToRem(messageH)
       }
     }
   }
@@ -84,11 +90,12 @@ window.onload = function() {
     messagesEl.appendChild(elements.bubble);
     messagesEl.appendChild(document.createElement('br'));
     var dimensions = getDimentions(elements);
+    elements.message.style.display = 'block';
     elements.bubble.style.width = '0rem';
     elements.bubble.style.height = dimensions.loading.h;
     elements.message.style.width = dimensions.message.w;
     elements.message.style.height = dimensions.message.h;
-    elements.bubble.style.opacity = 1;
+    elements.bubble.style.opacity = `1`;
     var bubbleOffset = elements.bubble.offsetTop + elements.bubble.offsetHeight;
     if (bubbleOffset > messagesEl.offsetHeight) {
       var scrollMessages = anime({
@@ -99,7 +106,7 @@ window.onload = function() {
     }
     var bubbleSize = anime({
       targets: elements.bubble,
-      width: ['0rem', dimensions.loading.w],
+      width: ['0ch', dimensions.loading.w],
       marginTop: ['2.5rem', 0],
       marginLeft: ['-2.5rem', 0],
       duration: 800,
@@ -156,7 +163,7 @@ window.onload = function() {
         marginLeft: 0,
         begin: function() {
           if (messageIndex < messages.length) elements.bubble.classList.remove('cornered');
-        }
+        },
       })
     }, loadingDuration - 50);
   }