diff --git a/assets/css/abstracts/grid.css b/assets/css/abstracts/grid.css index 82a8ab8b..b7066ba1 100644 --- 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 index b33e4e15..1264c00e 100644 --- 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 index 1cbf4597..288dbb64 100644 --- 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 new file mode 100644 index 00000000..8840b69b --- /dev/null +++ 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 index 1d0b73cf..d610ad99 100644 --- 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 new file mode 100644 index 00000000..7238380c --- /dev/null +++ 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 index 5284c8d0..23c70d0c 100644 --- a/home.hbs +++ b/home.hbs @@ -1,23 +1,22 @@ -{{!< default}} - -
+{{!< default}}
{{#match @custom.hero_description}} - {{> "hero"}} + {{> "hero"}} {{/match}}

These Are the Latest Posts

-
+
{{#foreach posts from="1" to="6"}} - {{> "cards/card-base"}} + {{> "cards/card-base"}} {{/foreach}} -
+

Check It Out. I'm Online

- + + +

What I'm Listening To

+
+
+

A Crumb Coat of the Mind

+

18 tracks / 1 hour, 17 minutes

+
+
    +
  1. Dune - Kikagaku Moyo
    2. +
  2. I Won't Be There - Skinshape
    3. +
  3. Staring At The Sun - Wooden Shjips
    4. +
  4. Snow Days (feat. Real Estate) - Real Estate
    5. +
  5. Spitting Off the Edge of the World (feat. Perfume Genius) - Yeah Yeah Yeahs
    6. +
  6. Paprika - Japanese Breakfast
    7. +
  7. Dopamine - DIIV
    8. +
  8. Locket - Crumb
    9. +
  9. Not Strong Enough - boygenius
    10. +
  10. Wasted Acres - Grizzly Bear
    11. +
+
    +
  1. Mind Fields - No Vacation
    2. +
  2. Big Sis - SALES
    3. +
  3. Show Me How - Men I Trust
    4. +
  4. Elbow Pain - Glue Trip
    5. +
  5. Redbone - Childish Gambino
    6. +
  6. Idaho Alien - Youth Lagoon
    7. +
  7. Psychos - Jenny Lewis
    8. +
  8. Love Again - Meltt
    9. +
+
+ + + +
+
+
+
+ +
+
+

The Good Posts Keep On Rollin'

{{#foreach posts from="7" to="12"}} - {{> "cards/card-base"}} + {{> "cards/card-base"}} {{/foreach}}

A Short History of This Site

-

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’ve racked up {{pagination.total}} posts and {{total_members}} members. If you’re the type who is interested in building things on the web or just randomly likes to sign up for things, consider subscribing. It’s free, spamless, and you can unsub at any time.

+

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’ve racked up + {{pagination.total}} posts and {{total_members}} members. If you’re the type who is interested in + building things on the web or just randomly likes to sign up for things, consider subscribing. It’s free, spamless, and you can unsub at any time.

Let's Keep Things Topical

- {{#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}}
- +

A Smidge More Posts

- {{#foreach posts from="13" to="18"}} + {{#foreach posts from="13" to="18"}} {{> "cards/card-base"}} - {{/foreach}} -
+ {{/foreach}}
-
- -{{pagination}} + +
+ {{pagination}} \ No newline at end of file diff --git a/partials/cards/card-tag.hbs b/partials/cards/card-tag.hbs index a3a82eda..e3e43ddc 100644 --- a/partials/cards/card-tag.hbs +++ b/partials/cards/card-tag.hbs @@ -54,8 +54,7 @@ {{/if}}
-

{{count.posts}}

-

{{name}}

+

{{name}}{{count.posts}}

\ No newline at end of file