diff options
Diffstat (limited to 'albums.html')
| -rw-r--r-- | albums.html | 168 |
1 files changed, 83 insertions, 85 deletions
diff --git a/albums.html b/albums.html index 06f89b4..ec425f3 100644 --- a/albums.html +++ b/albums.html @@ -1,88 +1,86 @@ --- -layout: default +layout: main title: albums --- - <style> - body { - /* background-color: black; */ - } - main { - margin: 2.5vw; - display: grid; - grid-template-columns: repeat(5, 18vw); - grid-gap: 15px; - } - div { - display: none; - position: fixed; - top: 50%; - left: 50%; - margin-left: -20em; - margin-top: -20em; - z-index: 1; - width: 40em; - height: auto; - } - img { - width: 100%; - height: auto; - } - a img:hover:target { - width: 200%; - height: auto; - } - img:hover + div { - display: block; - border: 2px solid white; - } - </style> -<main> - <img src="assets/albums/1989.jpg" alt="Taylor Swift - 1989"> - <div id="1989"><img src="assets/albums/1989.jpg" alt="Taylor Swift - 1989"></div> - <img src="assets/albums/random-access-memories.jpg" alt="Daft Punk - Random Access Memories"> - <div id="random-access-memories"><img src="assets/albums/random-access-memories.jpg" alt="Daft Punk - Random Access Memories"></div> - <img src="assets/albums/blurryface.jpg" alt="Twenty One Pilots - Blurryface"> - <div id="blurryface"><img src="assets/albums/blurryface.jpg" alt="Twenty One Pilots - Blurryface"></div> - <img src="assets/albums/death-of-a-bachelor.jpg" alt="Panic! at the Disco - Death of a Bachelor"> - <div id="death-of-a-bachelor"><img src="assets/albums/death-of-a-bachelor.jpg" alt="Panic! at the Disco - Death of a Bachelor"></div> - <img src="assets/albums/american-idiot.jpg" alt="Green Day - American Idiot"> - <div id="american-idiot"><img src="assets/albums/american-idiot.jpg" alt="Green Day - American Idiot"></div> - <img src="assets/albums/funeral.jpg" alt="Arcade Fire - Funeral"> - <div id="funeral"><img src="assets/albums/funeral.jpg" alt="Arcade Fire - Funeral"></div> - <img src="assets/albums/the-suburbs.jpg" alt="Arcade Fire - The Suburbs"> - <div id="the-suburbs"><img src="assets/albums/the-suburbs.jpg" alt="Arcade Fire - The Suburbs"></div> - <img src="assets/albums/mellon-collie.jpg" alt="The Smashing Pumpkins - Mellon Collie and the Infinite Sadness"> - <div id="mellon-collie"><img src="assets/albums/mellon-collie.jpg" alt="The Smashing Pumpkins - Mellon Collie and the Infinite Sadness"></div> - <img src="assets/albums/deathconsciousness.jpg" alt="Have A Nice Life - Deathconsciousness"> - <div id="deathconsciousness"><img src="assets/albums/deathconsciousness.jpg" alt="Have A Nice Life - Deathconsciousness"></div> - <img src="assets/albums/let-them-be-alien.jpg" alt="Lebanon Hanover - Let Them Be Alien"> - <div id="let-them-be-alien"><img src="assets/albums/let-them-be-alien.jpg" alt="Lebanon Hanover - Let Them Be Alien"></div> - <img src="assets/albums/lungs.jpg" alt="Florence and the Machine - Lungs"> - <div id="lungs"><img src="assets/albums/lungs.jpg" alt="Florence and the Machine - Lungs"></div> - <img src="assets/albums/dance-fever.jpg" alt="Florence and the Machine - Dance Fever"> - <div id="dance-fever"><img src="assets/albums/dance-fever.jpg" alt="Florence and the Machine - Dance Fever"></div> - <img src="assets/albums/laurel-hell.jpg" alt="Mitski - Laurel Hell"> - <div id="laurel-hell"><img src="assets/albums/laurel-hell.jpg" alt="Mitski - Laurel Hell"></div> - <img src="assets/albums/electra-heart.jpg" alt="Marina and the Diamonds - Electra Heart"> - <div id="electra-heart"><img src="assets/albums/electra-heart.jpg" alt="Marina and the Diamonds - Electra Heart"></div> - <img src="assets/albums/food-house.jpg" alt="Food House - Food House"> - <div id="food-house"><img src="assets/albums/food-house.jpg" alt="Food House - Food House"></div> - <img src="assets/albums/HARDCORE-HEAVEN.jpg" alt="Alice Gas - HARDCORE HEAVEN"> - <div id="hardcore-heaven"><img src="assets/albums/HARDCORE-HEAVEN.jpg" alt="Alice Gas - HARDCORE HEAVEN"></div> - <img src="assets/albums/swvwv.jpg" alt="Brian David Gilbert - Songs With Videos Without Videos"> - <div id="swvwv"><img src="assets/albums/swvwv.jpg" alt="Brian David Gilbert - Songs With Videos Without Videos"></div> - <img src="assets/albums/biyaaheysf.jpg" alt="Machine Girl - ...BECAUSE I'M YOUNG ARROGANT AND HATE EVERYTHING YOU STAND FOR"> - <div id="biyaaheysf"><img src="assets/albums/biyaaheysf.jpg" alt="Machine Girl - ...BECAUSE I'M YOUNG ARROGANT AND HATE EVERYTHING YOU STAND FOR"></div> - <img src="assets/albums/celeste.jpg" alt="Lena Raine - Celeste Soundtrack"> - <div id="celeste"><img src="assets/albums/celeste.jpg" alt="Lena Raine - Celeste Soundtrack"></div> - <img src="assets/albums/octopath.jpg" alt="Yasunori Nishiki - Octopath Traveler Soundtrack"> - <div id="octopath"><img src="assets/albums/octopath.jpg" alt="Yasunori Nishiki - Octopath Traveler Soundtrack"></div> - <!-- <img src="assets/albums/undertale.jpg" alt="Toby Fox - Undertale Soundtrack"> - <div id="undertale"><img src="assets/albums/undertale.jpg" alt="Toby Fox - Undertale Soundtrack"></div> --> - <!-- <img src="assets/albums/a-moon-shaped-pool.jpg" alt="Radiohead - A Moon Shaped Pool"> - <div id="a-moon-shaped-pool"><img src="assets/albums/a-moon-shaped-pool.jpg" alt="Radiohead - A Moon Shaped Pool"></div> --> - <!-- <img src="assets/albums/hamilton.jpg" alt="Lin-Manuel Miranda - Hamilton Soundtrack"> - <div id="hamilton"><img src="assets/albums/hamilton.jpg" alt="Lin-Manuel Miranda - Hamilton Soundtrack"></div> - <img src="assets/albums/inception.jpg" alt="Hans Zimmer - Inception Soundtrack"> - <div id="inception"><img src="assets/albums/inception.jpg" alt="Hans Zimmer - Inception Soundtrack"></div> --> -</main> +<style> +body { + /* background-color: black; */ +} +main { + margin: 2.5vw; + display: grid; + grid-template-columns: repeat(5, 18vw); + grid-gap: 15px; +} +div { + display: none; + position: fixed; + top: 50%; + left: 50%; + margin-left: -20em; + margin-top: -20em; + z-index: 1; + width: 40em; + height: auto; +} +img { + width: 100%; + height: auto; +} +a img:hover:target { + width: 200%; + height: auto; +} +img:hover + div { + display: block; + border: 2px solid white; +} +</style> +<img src="/files/covers/albums/1989.jpg" alt="Taylor Swift - 1989"> +<div id="1989"><img src="/files/covers/albums/1989.jpg" alt="Taylor Swift - 1989"></div> +<img src="/files/covers/albums/random-access-memories.jpg" alt="Daft Punk - Random Access Memories"> +<div id="random-access-memories"><img src="/files/covers/albums/random-access-memories.jpg" alt="Daft Punk - Random Access Memories"></div> +<img src="/files/covers/albums/blurryface.jpg" alt="Twenty One Pilots - Blurryface"> +<div id="blurryface"><img src="/files/covers/albums/blurryface.jpg" alt="Twenty One Pilots - Blurryface"></div> +<img src="/files/covers/albums/death-of-a-bachelor.jpg" alt="Panic! at the Disco - Death of a Bachelor"> +<div id="death-of-a-bachelor"><img src="/files/covers/albums/death-of-a-bachelor.jpg" alt="Panic! at the Disco - Death of a Bachelor"></div> +<img src="/files/covers/albums/american-idiot.jpg" alt="Green Day - American Idiot"> +<div id="american-idiot"><img src="/files/covers/albums/american-idiot.jpg" alt="Green Day - American Idiot"></div> +<img src="/files/covers/albums/funeral.jpg" alt="Arcade Fire - Funeral"> +<div id="funeral"><img src="/files/covers/albums/funeral.jpg" alt="Arcade Fire - Funeral"></div> +<img src="/files/covers/albums/the-suburbs.jpg" alt="Arcade Fire - The Suburbs"> +<div id="the-suburbs"><img src="/files/covers/albums/the-suburbs.jpg" alt="Arcade Fire - The Suburbs"></div> +<img src="/files/covers/albums/mellon-collie.jpg" alt="The Smashing Pumpkins - Mellon Collie and the Infinite Sadness"> +<div id="mellon-collie"><img src="/files/covers/albums/mellon-collie.jpg" alt="The Smashing Pumpkins - Mellon Collie and the Infinite Sadness"></div> +<img src="/files/covers/albums/deathconsciousness.jpg" alt="Have A Nice Life - Deathconsciousness"> +<div id="deathconsciousness"><img src="/files/covers/albums/deathconsciousness.jpg" alt="Have A Nice Life - Deathconsciousness"></div> +<img src="/files/covers/albums/let-them-be-alien.jpg" alt="Lebanon Hanover - Let Them Be Alien"> +<div id="let-them-be-alien"><img src="/files/covers/albums/let-them-be-alien.jpg" alt="Lebanon Hanover - Let Them Be Alien"></div> +<img src="/files/covers/albums/lungs.jpg" alt="Florence and the Machine - Lungs"> +<div id="lungs"><img src="/files/covers/albums/lungs.jpg" alt="Florence and the Machine - Lungs"></div> +<img src="/files/covers/albums/dance-fever.jpg" alt="Florence and the Machine - Dance Fever"> +<div id="dance-fever"><img src="/files/covers/albums/dance-fever.jpg" alt="Florence and the Machine - Dance Fever"></div> +<img src="/files/covers/albums/laurel-hell.jpg" alt="Mitski - Laurel Hell"> +<div id="laurel-hell"><img src="/files/covers/albums/laurel-hell.jpg" alt="Mitski - Laurel Hell"></div> +<img src="/files/covers/albums/electra-heart.jpg" alt="Marina and the Diamonds - Electra Heart"> +<div id="electra-heart"><img src="/files/covers/albums/electra-heart.jpg" alt="Marina and the Diamonds - Electra Heart"></div> +<img src="/files/covers/albums/food-house.jpg" alt="Food House - Food House"> +<div id="food-house"><img src="/files/covers/albums/food-house.jpg" alt="Food House - Food House"></div> +<img src="/files/covers/albums/HARDCORE-HEAVEN.jpg" alt="Alice Gas - HARDCORE HEAVEN"> +<div id="hardcore-heaven"><img src="/files/covers/albums/HARDCORE-HEAVEN.jpg" alt="Alice Gas - HARDCORE HEAVEN"></div> +<img src="/files/covers/albums/swvwv.jpg" alt="Brian David Gilbert - Songs With Videos Without Videos"> +<div id="swvwv"><img src="/files/covers/albums/swvwv.jpg" alt="Brian David Gilbert - Songs With Videos Without Videos"></div> +<img src="/files/covers/albums/biyaaheysf.jpg" alt="Machine Girl - ...BECAUSE I'M YOUNG ARROGANT AND HATE EVERYTHING YOU STAND FOR"> +<div id="biyaaheysf"><img src="/files/covers/albums/biyaaheysf.jpg" alt="Machine Girl - ...BECAUSE I'M YOUNG ARROGANT AND HATE EVERYTHING YOU STAND FOR"></div> +<img src="/files/covers/albums/celeste.jpg" alt="Lena Raine - Celeste Soundtrack"> +<div id="celeste"><img src="/files/covers/albums/celeste.jpg" alt="Lena Raine - Celeste Soundtrack"></div> +<img src="/files/covers/albums/octopath.jpg" alt="Yasunori Nishiki - Octopath Traveler Soundtrack"> +<div id="octopath"><img src="/files/covers/albums/octopath.jpg" alt="Yasunori Nishiki - Octopath Traveler Soundtrack"></div> +<!-- <img src="/files/covers/albums/undertale.jpg" alt="Toby Fox - Undertale Soundtrack"> +<div id="undertale"><img src="/files/covers/albums/undertale.jpg" alt="Toby Fox - Undertale Soundtrack"></div> --> +<!-- <img src="/files/covers/albums/a-moon-shaped-pool.jpg" alt="Radiohead - A Moon Shaped Pool"> +<div id="a-moon-shaped-pool"><img src="/files/covers/albums/a-moon-shaped-pool.jpg" alt="Radiohead - A Moon Shaped Pool"></div> --> +<!-- <img src="/files/covers/albums/hamilton.jpg" alt="Lin-Manuel Miranda - Hamilton Soundtrack"> +<div id="hamilton"><img src="/files/covers/albums/hamilton.jpg" alt="Lin-Manuel Miranda - Hamilton Soundtrack"></div> +<img src="/files/covers/albums/inception.jpg" alt="Hans Zimmer - Inception Soundtrack"> +<div id="inception"><img src="/files/covers/albums/inception.jpg" alt="Hans Zimmer - Inception Soundtrack"></div> --> |