optimize loading

royalfig · Aug 5, 2023 · c424094 · c424094
1 parent 9c4aea3
commit c424094
Show file tree

Hide file tree

Showing 5 changed files with 224 additions and 191 deletions.
diff --git a/assets/css/components/playlist.css b/assets/css/components/playlist.css
@@ -24,7 +24,7 @@
   }
 
   h3 {
-    margin: 0;
+    margin-block: 0 var(--spacing-01);
     font-family: var(--body-typeface);
     font-size: var(--h4);
     font-style: italic;
@@ -50,6 +50,8 @@
   }
 
   li::before {
+    display: inline-block;
+    width: 24px;
     margin-inline-end: var(--spacing-01);
     font-variant-numeric: tabular-nums;
     content: counter(li, decimal-leading-zero) '.';
@@ -58,8 +60,9 @@
   }
 
   .sm-active::before {
-    color: hsl(var(--color-1));
+    color: var(--color, hsl(var(--color-1)));
     content: '▶️';
+    translate: 1px 0;
   }
 
   .sm-playlist-iframe {
@@ -210,7 +213,7 @@
   input {
     width: 100%;
     height: 5px;
-    accent-color: hsl(var(--color-1));
+    accent-color: var(--color, hsl(var(--color-1)));
   }
 }
 

diff --git a/assets/js/app/app.js b/assets/js/app/app.js
@@ -10,7 +10,7 @@ import writeAuthorWebsite from './authorWebsite';
 import toc from './toc';
 import animateOnScroll from './homePageAnimation';
 import toggleShareMenu from './toggleShareMenu';
-import { createPlaylist } from './musicPages';
+import createPlaylist from './playlist';
 
 initClickHandler();
 determineColorModeSupport();

diff --git a/assets/js/app/musicPages.js b/assets/js/app/musicPages.js