now that's what i call music

royalfig · Jul 28, 2023 · 163532f · 163532f
1 parent b3c5ff8
commit 163532f
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 67 deletions.
diff --git a/assets/css/abstracts/grid.css b/assets/css/abstracts/grid.css
@@ -36,13 +36,26 @@
 }
 
 .sm-home-grid {
-  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
   grid-column: content;
   gap: var(--spacing-06);
   margin-block: var(--spacing-04);
 }
 
+.sm-music-grid {
+  grid-template-columns: 1fr;
+  grid-column: content;
+  gap: var(--spacing-06);
+  margin-block: var(--spacing-04);
+  overflow: hidden;
+  background-color: hsl(var(--surface-dark));
+  border-radius: var(--radius);
+
+  @media (--tablet) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
 .sm-social-media-container {
   grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
 }
@@ -58,22 +71,3 @@
       [end];
   }
 }
-
-/* TODO move to separate file */
-.sm-home-header {
-  grid-column: content;
-  margin-block: var(--spacing-22) var(--spacing-02);
-  font-weight: 400;
-}
-
-.sm-home-history {
-  grid-column: content;
-
-  a {
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration-color: hsl(var(--color-1));
-    }
-  }
-}
diff --git a/assets/css/components/card.css b/assets/css/components/card.css
@@ -58,12 +58,12 @@
   font-family: var(--ui-typeface);
   font-size: var(--xx-small);
   font-weight: 500;
+  line-height: 1;
   color: hsl(var(--color-1-light));
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-expand);
   background-color: hsl(var(--color-1));
   border-radius: var(--radius);
-  line-height: 1;
 
   &.code {
     color: hsl(var(--color-2-light));
@@ -316,23 +316,6 @@
   height: 100%;
 }
 
-.sm-tag-card-count {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  font-size: var(--h1);
-  font-size: 75cqi;
-  font-weight: 900;
-  font-variant: tabular-nums;
-  line-height: 1;
-  color: hsl(var(--surface));
-  text-align: right;
-  text-transform: uppercase;
-  letter-spacing: -0.05em;
-  transition: color var(--transition);
-  translate: -10% 20%;
-}
-
 .sm-tag-card-text {
   position: absolute;
   right: var(--spacing-04);
@@ -347,6 +330,11 @@
   transform-origin: right;
   rotate: 90deg;
   translate: 0 100%;
+
+  span {
+    margin-inline-start: 5px;
+    color: hsl(var(--color-2));
+  }
 }
 
 .sm-card-social-media {

diff --git a/assets/css/index.css b/assets/css/index.css
@@ -16,6 +16,7 @@
 @import 'layout/footer.css';
 
 /* Pages" */
+@import 'pages/home.css';
 @import 'pages/post.css';
 @import 'pages/post-content.css';
 @import 'pages/author.css';

diff --git a/assets/css/pages/home.css b/assets/css/pages/home.css
@@ -0,0 +1,81 @@
+.sm-home-header {
+  grid-column: content;
+  margin-block: var(--spacing-22) var(--spacing-02);
+  font-weight: 400;
+}
+
+.sm-home-history {
+  grid-column: content;
+
+  a {
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration-color: hsl(var(--color-1));
+    }
+  }
+}
+
+.sm-music-grid {
+  align-items: center;
+
+  h3 {
+    margin: 0;
+    font-family: var(--body-typeface);
+    font-size: var(--h4);
+    font-style: italic;
+    font-weight: 400;
+  }
+
+  p {
+    margin-block-end: var(--spacing-04);
+    font-family: var(--ui-typeface);
+    font-size: var(--xx-small);
+    font-weight: 300;
+    color: hsl(var(--element-light) / 80%);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-expand);
+  }
+
+  ol {
+    min-height: 12rem;
+    margin-block-end: var(--spacing-04);
+    font-size: var(--small);
+  }
+
+  .sm-music-iframe {
+    height: 100%;
+  }
+
+  iframe {
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+
+    @media (--tablet) {
+      height: 100%;
+      aspect-ratio: unset;
+    }
+  }
+}
+
+.sm-music-text {
+  padding: var(--spacing-04);
+}
+
+.sm-music-pager-controls {
+  gap: var(--spacing-02);
+  justify-content: flex-start;
+
+  .sm-circle-icon-button {
+    border: 1px solid hsl(var(--element-light) / 80%);
+  }
+}
+
+.sm-music-page {
+  display: none;
+
+  &.sm-music-active {
+    display: block;
+  }
+}
diff --git a/assets/js/app/app.js b/assets/js/app/app.js
@@ -10,6 +10,7 @@ import writeAuthorWebsite from './authorWebsite';
 import toc from './toc';
 import animateOnScroll from './homePageAnimation';
 import toggleShareMenu from './toggleShareMenu';
+import createMusicToggle from './musicPages';
 
 initClickHandler();
 determineColorModeSupport();
@@ -21,3 +22,4 @@ writeAuthorWebsite();
 toc();
 animateOnScroll();
 toggleShareMenu();
+createMusicToggle();
diff --git a/assets/js/app/musicPages.js b/assets/js/app/musicPages.js
@@ -0,0 +1,16 @@
+export default function createMusicToggle() {
+  const musicPages = document.querySelectorAll('.sm-music-page');
+  const musicPageToggles = document.querySelectorAll(
+    '.sm-music-pager-controls > .sm-circle-icon-button',
+  );
+  if (musicPages.length === 0) return;
+
+  musicPageToggles.forEach((toggle) => {
+    // on each click, remove the active class from one page and add it to the other
+    toggle.addEventListener('click', () => {
+      musicPages.forEach((page) => {
+        page.classList.toggle('sm-music-active');
+      });
+    });
+  });
+}
diff --git a/home.hbs b/home.hbs
@@ -1,23 +1,22 @@
-{{!< default}}
-
-<main id="sm-main">
+{{!< default}} <main id="sm-main">
     {{#match @custom.hero_description}}
-        {{> "hero"}}
+    {{> "hero"}}
     {{/match}}
 
     <div class="sm-grid">
         <h2 class="sm-home-header">These Are the Latest Posts</h2>
-        <div class="sm-home-grid">
+        <section class="sm-home-grid">
             {{#foreach posts from="1" to="6"}}
-               {{> "cards/card-base"}}
+            {{> "cards/card-base"}}
             {{/foreach}}
-        </div>
+        </section>
 
         <h2 class="sm-home-header">Check It Out. I'm Online</h2>
-        <div class="sm-home-grid sm-social-media-container">
+        <section class="sm-home-grid sm-social-media-container">
             {{#if @custom.social_media_1_url}}
             <article class="sm-card sm-card-small-square sm-card-social-media {{@custom.social_media_1}}">
-                <a class="sm-flex-v" href="{{@custom.social_media_1_url}}" aria-label="Follow me on {{@custom.social_media_1 }}">
+                <a class="sm-flex-v" href="{{@custom.social_media_1_url}}"
+                    aria-label="Follow me on {{@custom.social_media_1 }}">
                     <svg aria-hidden="true">
                         <use href="#{{@custom.social_media_1}}-icon"></use>
                     </svg>
@@ -26,16 +25,18 @@
             {{/if}}
             {{#if @custom.social_media_2_url}}
             <article class="sm-card sm-card-small-square sm-card-social-media {{@custom.social_media_2}}">
-                <a class="sm-flex-v" href="{{@custom.social_media_2_url}}" aria-label="Follow me on {{@custom.social_media_2 }}">
+                <a class="sm-flex-v" href="{{@custom.social_media_2_url}}"
+                    aria-label="Follow me on {{@custom.social_media_2 }}">
                     <svg aria-hidden="true">
                         <use href="#{{@custom.social_media_2}}-icon"></use>
                     </svg>
                 </a>
             </article>
             {{/if}}
-            {{#if @custom.social_media_3_url}}  
+            {{#if @custom.social_media_3_url}}
             <article class="sm-card sm-card-small-square sm-card-social-media {{@custom.social_media_3}}">
-                <a class="sm-flex-v" href="{{@custom.social_media_3_url}}" aria-label="Follow me on {{@custom.social_media_3 }}">
+                <a class="sm-flex-v" href="{{@custom.social_media_3_url}}"
+                    aria-label="Follow me on {{@custom.social_media_3 }}">
                     <svg aria-hidden="true">
                         <use href="#{{@custom.social_media_3}}-icon"></use>
                     </svg>
@@ -44,44 +45,102 @@
             {{/if}}
             {{#if @custom.social_media_4_url}}
             <article class="sm-card sm-card-small-square sm-card-social-media {{@custom.social_media_4}}">
-                <a class="sm-flex-v" href="{{@custom.social_media_4_url}}" aria-label="Follow me on {{@custom.social_media_4 }}">
+                <a class="sm-flex-v" href="{{@custom.social_media_4_url}}"
+                    aria-label="Follow me on {{@custom.social_media_4 }}">
                     <svg aria-hidden="true">
                         <use href="#{{@custom.social_media_4}}-icon"></use>
                     </svg>
                 </a>
             </article>
             {{/if}}
-        </div>
+        </section>
+
+        <h2 class="sm-home-header">What I'm Listening To</h2>
+        <section class="sm-music-grid">
+            <div class="sm-music-text">
+                <h3>A Crumb Coat of the Mind</h3>
+                <p>18 tracks / 1 hour, 17 minutes</p>
+                <div class="sm-music-pager">
+                    <ol class="sm-music-page sm-music-active">
+                        <li>Dune - Kikagaku Moyo</li>
+                        <li>I Won't Be There - Skinshape</li>
+                        <li>Staring At The Sun - Wooden Shjips</li>
+                        <li>Snow Days (feat. Real Estate) - Real Estate</li>
+                        <li>Spitting Off the Edge of the World (feat. Perfume Genius) - Yeah Yeah Yeahs</li>
+                        <li>Paprika - Japanese Breakfast</li>
+                        <li>Dopamine - DIIV</li>
+                        <li>Locket - Crumb</li>
+                        <li>Not Strong Enough - boygenius</li>
+                        <li>Wasted Acres - Grizzly Bear</li>
+                    </ol>
+                    <ol class="sm-music-page" start="11">
+                        <li>Mind Fields - No Vacation</li>
+                        <li>Big Sis - SALES</li>
+                        <li>Show Me How - Men I Trust</li>
+                        <li>Elbow Pain - Glue Trip</li>
+                        <li>Redbone - Childish Gambino</li>
+                        <li>Idaho Alien - Youth Lagoon</li>
+                        <li>Psychos - Jenny Lewis</li>
+                        <li>Love Again - Meltt</li>
+                    </ol>
+                    <div class="sm-music-pager-controls sm-flex-h">
+                        <button class="sm-circle-icon-button">
+                            <svg aria-hidden="true">
+                                <use href="#sm-left-arrow-icon"></use>
+                            </svg>
+                        </button>
+                        <button class="sm-circle-icon-button">
+                            <svg aria-hidden="true">
+                                <use href="#sm-right-arrow-icon"></use>
+                            </svg>
+                        </button>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="sm-music-iframe">
+                <iframe loading="lazy"
+                    src="https://www.youtube.com/embed/videoseries?list=PLnPe3mrvTpEzNINsV2kNqY_LTeNkdprdL"
+                    frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowfullscreen=""></iframe>
+            </div>
+        </section>
+
 
         <h2 class="sm-home-header">The Good Posts Keep On Rollin'</h2>
         <div class="sm-home-grid">
             {{#foreach posts from="7" to="12"}}
-               {{> "cards/card-base"}}
+            {{> "cards/card-base"}}
             {{/foreach}}
         </div>
 
         <h2 class="sm-home-header">A Short History of This Site</h2>
-        <p class="sm-home-history">I published the first post on this site {{#get "posts" limit="1" order="published_at asc"}}{{#foreach posts}}{{date timeago="true"}}{{/foreach}}{{/get}}. Since then, I&rsquo;ve racked up {{pagination.total}} posts and {{total_members}} members. If you&rsquo;re the type who is interested in building things on the web or just randomly likes to sign up for things, consider <a href="#/portal/signup">subscribing</a>. It&rsquo;s free, spamless, and you can unsub at any time.</p>
+        <p class="sm-home-history">I published the first post on this site {{#get "posts" limit="1" order="published_at
+            asc"}}{{#foreach posts}}{{date timeago="true"}}{{/foreach}}{{/get}}. Since then, I&rsquo;ve racked up
+            {{pagination.total}} posts and {{total_members}} members. If you&rsquo;re the type who is interested in
+            building things on the web or just randomly likes to sign up for things, consider <a
+                href="#/portal/signup">subscribing</a>. It&rsquo;s free, spamless, and you can unsub at any time.</p>
 
         <h2 class="sm-home-header">Let's Keep Things Topical</h2>
         <div class="sm-home-grid">
-        {{#get "tags" include="count.posts" limit="8" order="count.posts desc" filter="visibility:public" as |tags|}}
-        {{log tags}}
+            {{#get "tags" include="count.posts" limit="8" order="count.posts desc" filter="visibility:public" as
+            |tags|}}
+            {{log tags}}
             {{#foreach tags}}
-               {{> "cards/card-tag"}}
+            {{> "cards/card-tag"}}
             {{/foreach}}
-        {{/get}}
+            {{/get}}
         </div>
-        
+
         <h2 class="sm-home-header">A Smidge More Posts</h2>
         <div class="sm-home-grid">
-        {{#foreach posts from="13" to="18"}}
+            {{#foreach posts from="13" to="18"}}
             {{> "cards/card-base"}}
-        {{/foreach}}
-        </div>
+            {{/foreach}}
         </div>
     </div>
-</main>
-
-{{pagination}}
+    </div>
+    </main>
 
+    {{pagination}}