deploy: b56fe21a2b

static/main.css

@@ -102,6 +102,7 @@ header div {
     mask-size: 100% 100%;
     user-select: none;
     transition: .4s;
+    -webkit-user-drag: none;
 }
 
 header ul {
@@ -147,7 +148,7 @@ blockquote, main p {
 }
 
 main h1, main h2 {
-    /* margin-bottom: .2em; */
+    margin-bottom: .2em;
 }
 
 main h2 {
@@ -169,6 +170,7 @@ hr {
     2px 7px 5px rgba(0,0,0,0.3),
     0px -4px 10px rgba(0,0,0,0.3);
     /* margin: .5em 0; */
+    margin-bottom: 1em;
 }
 
 .box {
@@ -297,6 +299,15 @@ header div:first-child {
     gap: 10px;
 }
 
+.youtubeCardHolderHelper {
+    display: flex;
+    justify-content: center;
+}
+
+.hsMusicCard .youtubeCardHolder {
+    width: 50%;
+}
+
 div.hs {
     display: none;
 }
@@ -785,6 +796,8 @@ hs {
 .i88x31 {
     transition: .2s;
     image-rendering: pixelated;
+    width: 88px;
+    height: 31px;
 }
 
 .i88x31.selected {

static/scripts/ccd.js

@@ -5,7 +5,7 @@ document.addEventListener('keydown', function(event) {
   if (event.code === konamiCode[keyIndex]) {
     keyIndex++;
     if (keyIndex === konamiCode.length) {
-        window.location.href = './static/toyourdreams.txt'
+        window.location.href = '/static/toyourdreams.txt'
         keyIndex = 0;
     }
   } else {

static/scripts/tips.js

@@ -0,0 +1,15 @@
+/* This script provides functionality similar to FL Studio's hint panel. */
+
+const elements = document.querySelectorAll('[data-tip]');
+const hint = document.querySelector("#headerSubtitle");
+const hintPanelDefaultText = hint.innerHTML;
+
+elements.forEach(el => {
+    el.addEventListener('mouseenter', function() {
+      hint.innerHTML = `${this.dataset.tip}`;
+    });
+    
+    el.addEventListener('mouseleave', function() {
+      hint.innerHTML = hintPanelDefaultText;
+    });
+})