diff --git a/.eleventy.js b/.eleventy.js index 7a79a76..ae63305 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -11,6 +11,29 @@ module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/_assets/fonts"); eleventyConfig.addPassthroughCopy("./src/_assets/js"); + eleventyConfig.addShortcode("albumtile", function (title, embedLink, coverImage) { + // hugely overcomplicated universal slug method + var slug = title + .toLowerCase() + .trim() + // remove accents + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, '') + // replace invalid characters with spaces + .replace(/[^a-z0-9\s-]/g, ' ') + .trim() + // replace multiple spaces or hyphens with a hyphen + .replace(/[\s-]+/g, '-'); + + return `
+ + + + + ${title} +
` + }); + // make a list of all tags besides "post" and add them to the collection eleventyConfig.addCollection("tagsList", function (collectionApi) { const tagsList = new Set(); diff --git a/src/_includes/styles.css b/src/_includes/styles.css index 599a60e..07a58ca 100644 --- a/src/_includes/styles.css +++ b/src/_includes/styles.css @@ -49,7 +49,8 @@ h3 { margin-bottom: var(--line-padding); } -h4, h5 { +h4, +h5 { margin-top: var(--line-padding); margin-bottom: var(--line-padding); } @@ -143,7 +144,7 @@ nav { margin-bottom: var(--line-padding); } -.link-tiles-grid>a>img, +.link-tiles-grid>a>img, .album-tiles-grid>a>img { background-color: var(--border); width: 100%; @@ -274,18 +275,24 @@ footer { } @keyframes bounce { - 0%, 100% { + + 0%, + 100% { transform: translateY(0); } + 50% { transform: translateY(-5px); } + 75% { transform: translateY(0); } + 100% { transform: translateY(0); - animation-delay: 3s; /* add a 3 second delay before restarting the animation */ + animation-delay: 3s; + /* add a 3 second delay before restarting the animation */ } } @@ -313,7 +320,7 @@ footer { } .gallery>a>img { - box-sizing:border-box; + box-sizing: border-box; background-color: var(--accent-bg); border: 2px solid var(--border); } @@ -327,7 +334,7 @@ footer { margin-bottom: 15px; } -.two-columns *{ +.two-columns * { width: 100%; aspect-ratio: 1/1; object-fit: cover; @@ -342,47 +349,59 @@ footer { /* simple lightbox pulled from https://codepen.io/nebo/pen/ONXejO */ -.trans -{ - transition: all 0.25s ease; +.trans { + transition: all 0.25s ease; } -.lightbox -{ - position: fixed; - width: 100%; - height: 100%; - text-align: center; - top: 0; - left: 0; - background-color: rgba(0,0,0,0.75); - z-index: 999; - opacity: 0; - pointer-events: none; + +.lightbox { + position: fixed; + width: 100%; + height: 100%; + text-align: center; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.75); + z-index: 999; + opacity: 0; + pointer-events: none; } -.lightbox img -{ - max-width: 90%; - max-height: 80%; - position: relative; - top: -100%; - /* Transition */ - transition: all 0.5 ease; + +.lightbox img { + max-width: 90%; + max-height: 80%; + position: relative; + top: -100%; + /* Transition */ + transition: all 0.5 ease; } -.lightbox:target -{ - outline: none; - top: 0; - opacity: 1; - pointer-events: auto; - transition: all 0.2s ease; + +.lightbox:target { + outline: none; + top: 0; + opacity: 1; + pointer-events: auto; + transition: all 0.2s ease; } -.lightbox:target img -{ - top: 0; - top: 50%; - transform: translateY(-50%); + +.lightbox:target img { + top: 0; + top: 50%; + transform: translateY(-50%); } .paragraph-deparagrapher p { margin: 0; +} + +.album-tile-cover-image { + border: 0; + width: 100%; + aspect-ratio: 1; +} + +.album-tile-iframe { + border: 0; + width: 100%; + aspect-ratio: 1; + display: none; } \ No newline at end of file diff --git a/src/lists/albums.md b/src/lists/albums.md index b98f660..f00b2a8 100644 --- a/src/lists/albums.md +++ b/src/lists/albums.md @@ -7,147 +7,124 @@ date: 2023-07-31

albums

- -
-
- - - - - exo - tineidae -
-
- - - - - exile - sabrepulse -
-
- - - - - delancey st. station - pinc louds -
-
- - - - - hyper dimensional expansion beam - the comet is coming -
-
- - - - - twine - taylor deupree & marcus fischer -
-
- - - - - troupeau bleu - cortex -
-
- - - - - gemini - machine girl -
-
- - - - - a letter from slowboat - ryo fukui -
-
- - - - - music tranquilizer - kaoru ono -
-
- - - - - piano - felix rösch -
-
- - - - - zapper - nanoray -
+ {% albumtile + "exo - tineidae", + "https://bandcamp.com/EmbeddedPlayer/album=1662540416/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/", + "/_assets/img/albums/exo.jpg" + -%} + + {% albumtile + "exile - sabrepulse", + "https://bandcamp.com/EmbeddedPlayer/album=2135258317/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/", + "/_assets/img/albums/exile.jpg" + -%} + + {% albumtile + "delancey st. station - pinc louds", + "https://bandcamp.com/EmbeddedPlayer/album=3174957532/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/", + "/_assets/img/albums/delanceyststation.jpg" + -%} + + {% albumtile + "hyper dimensional expansion beam - the comet is coming", + "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_kYZZBgXZRayWvaZrwpA3tOb5C6o_9qoio", + "/_assets/img/albums/hyperdimensionalexpansionbeam.jpg" + -%} + + {% albumtile + "twine - taylor deupree & marcus fischer", + "https://bandcamp.com/EmbeddedPlayer/album=1344380888/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/", + "/_assets/img/albums/twine.jpg" + -%} + + {% albumtile + "troupeau bleu - cortex", + "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_kAvEij43J5GYQaLVdL4hzUKsWSEDHgYdc", + "/_assets/img/albums/troupeaubleu.jpg" + -%} + + {% albumtile + "gemini - machine girl", + "https://bandcamp.com/EmbeddedPlayer/album=1401193641/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/", + "/_assets/img/albums/gemini.jpg" + -%} + + {% albumtile + "a letter from slowboat - ryo fukui", + "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_nKQ0aamXCuH4pX1DBmYj4tIgvB3Bex0iQ", + "/_assets/img/albums/aletterfromslowboat.jpg" + -%} + + {% albumtile + "music tranquilizer - kaoru ono", + "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_l13KkpcJNof8bT38IDALP1zpZilzIvQP4", + "/_assets/img/albums/musictranquilizer.jpg" + -%} + + {% albumtile + "piano - felix rösch", + "https://bandcamp.com/EmbeddedPlayer/album=1734574665/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/", + "/_assets/img/albums/piano.jpg" + -%} + + {% albumtile + "zapper - nanoray", + "https://bandcamp.com/EmbeddedPlayer/album=2586530263/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/", + "/_assets/img/albums/zapper.jpg" + -%}
# soundtracks
-
- - - - - the elder scrolls v: skyrim - jeremy soule -
-
- - - - - persona 5 - shoji meguro -
-
- - - - - night in the woods - alec holowka -
-
- - - - - mirror's edge catalyst - solar fields -
-
- - - - - a hat in time - pascal michael stiefel -
-
- - - - - lisa - widdly 2 diddly -
-
- - - - - final fantasy xiii - masashi hamauzu -
-
- - - - - chicory: a colorful tale - lena raine -
+ {% albumtile + "the elder scrolls v: skyrim - jeremy soule", + "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_mbQxWvaWie-adhtXtm6b2X0qM-2zoRJio", + "/_assets/img/albums/skyrim.jpg" + -%} + + {% albumtile + "persona 5 - shoji meguro", + "https://www.youtube-nocookie.com/embed/videoseries?list=PLZuZrScKjWOMAEEBEGTmAGtmmlg6QY7bC", + "/_assets/img/albums/persona5.jpg" + -%} + + {% albumtile + "night in the woods - alec holowka", + "https://bandcamp.com/EmbeddedPlayer/album=816099561/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/", + "/_assets/img/albums/nightinthewoods.jpg" + -%} + + {% albumtile + "mirror's edge catalyst - solar fields", + "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_mYoJDBgR0t-BCy-Y-K4u3ro0sDVYRoIF0", + "/_assets/img/albums/mirrorsedgecatalyst.jpg" + -%} + + {% albumtile + "a hat in time - pascal michael stiefel", + "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_mJQUNw78Oc2RO3imwBugUq9rchF53rkj4", + "/_assets/img/albums/ahatintime.jpg" + -%} + + {% albumtile + "lisa - widdly 2 diddly", + "https://bandcamp.com/EmbeddedPlayer/album=3091311371/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/", + "/_assets/img/albums/lisa.jpg" + -%} + + {% albumtile + "final fantasy xiii - masashi hamauzu", + "https://www.youtube-nocookie.com/embed/videoseries?controls=0&list=OLAK5uy_mVPS-4XM_sVgQroZkZsFYvTzEuFqwHEIs", + "/_assets/img/albums/finalfantasyxiii.jpg" + -%} + + {% albumtile + "chicory: a colorful tale - lena raine", + "https://bandcamp.com/EmbeddedPlayer/album=709270856/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/", + "/_assets/img/albums/chicory.jpg" + -%}