26e116971a
New blog posts: - How to Make Youtube Videos Buffer All The Way Like The Old Days (In Firefox) - My Terrible, Horrible, No-Good, Very Bad Distro Hop - Building a Completely Normal Server New journal entries Updated quotes Added Cohost profile to /links/ Added new albums to /music/ Added buttons to webgarden Updated info on my laptop in /uses/ house
97 lines
6.7 KiB
PHP
97 lines
6.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Music</title>
|
|
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
|
|
<style>
|
|
#flex-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
filter: drop-shadow(3px 3px 6px black);
|
|
}
|
|
#flex-container a {
|
|
--columncount: 2;
|
|
position: relative;
|
|
width: calc(var(--bodywidth) / var(--columncount));
|
|
height: calc(var(--bodywidth) / var(--columncount));
|
|
background-image: var(--img);
|
|
background-size: cover;
|
|
transition-duration: 0.5s;
|
|
overflow: hidden;
|
|
}
|
|
#flex-container a:hover {
|
|
z-index: 50;
|
|
box-shadow: 0 0 12px 2px black;
|
|
transform: scale(1.15);
|
|
color: #df1955;
|
|
}
|
|
#flex-container a span {
|
|
background-color: #000000cc;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 5.2rem;
|
|
padding: 0 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
transition-duration: 0.5s;
|
|
box-sizing: border-box;
|
|
}
|
|
#flex-container a:hover span {
|
|
bottom: -5.2rem;
|
|
}
|
|
@media only screen and (max-width: 43rem) {
|
|
#flex-container a {
|
|
--columncount: 1;
|
|
}
|
|
}
|
|
@media only screen and (hover: none) {
|
|
#flex-container a:hover {
|
|
transform: initial;
|
|
z-index: initial;
|
|
box-shadow: initial;
|
|
}
|
|
}
|
|
</style>
|
|
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
|
|
</head>
|
|
|
|
<body>
|
|
<?php include($_SERVER['DOCUMENT_ROOT'] . '/nav.php'); ?>
|
|
<h1>music</h1>
|
|
<h2 id="caption">Albums I like</h2>
|
|
<div id="flex-container">
|
|
<a style="--img: url(covers/spectrum.jpg);" target="_blank" href="https://findaeden.bandcamp.com/album/spectrum" ><span>findaeden - Spectrum</span></a>
|
|
<a style="--img: url(covers/funeral.jpg);" target="_blank" href="https://noisemaster.bandcamp.com/album/funeral-ep" ><span>Noisemaker - Funeral EP</span></a>
|
|
<a style="--img: url(covers/ultrakill_imperfect_hatred.jpg);" target="_blank" href="https://heavenpierceher.bandcamp.com/album/ultrakill-imperfect-hatred"><span>Heaven Pierce Her - ULTRAKILL: Imperfect Hatred</span></a>
|
|
<a style="--img: url(covers/el_camino.jpg);" target="_blank" href="https://theblackkeys.com/?frontpage=true" ><span>The Black Keys - El Camino</span></a>
|
|
<a style="--img: url(covers/for_science.jpg);" target="_blank" href="https://waxlimbs.bandcamp.com/album/for-science" ><span>Waxlimbs - For Science!</span></a>
|
|
<a style="--img: url(covers/peaks_and_valleys.jpg);" target="_blank" href="https://revolutionpeak.bandcamp.com/album/peaks-and-valleys" ><span>Revolution Peak - Peaks and Valleys</span></a>
|
|
<a style="--img: url(covers/triangle_unicode.jpg);" target="_blank" href="https://wearemagonia.bandcamp.com/album/triangle-unicode-lp" ><span>We Are Magonia - Triangle Unicode</span></a>
|
|
<a style="--img: url(covers/unstoppable_force.jpg);" target="_blank" href="https://caliphate.bandcamp.com/album/unstoppable-force" ><span>CALIPHATE - Unstoppable Force</span></a>
|
|
<a style="--img: url(covers/walks_of_lung.jpg);" target="_blank" href="https://patriciataxxon.bandcamp.com/album/walks-of-lung" ><span>Patricia Taxxon - Walks of Lung</span></a>
|
|
<a style="--img: url(covers/realign.jpg);" target="_blank" href="https://vine.bandcamp.com/album/realign" ><span>Red Vox - Realign</span></a>
|
|
<a style="--img: url(covers/american_automatic.jpg);" target="_blank" href="https://en.wikipedia.org/wiki/Kill_Memory_Crash" ><span>Kill Memory Crash - American Automatic</span></a>
|
|
<a style="--img: url(covers/fucked_up_friends_3.jpg);" target="_blank" href="https://tobaxxo.bandcamp.com/album/fucked-up-friends-3" ><span>TOBACCO - Fucked Up Friends 3</span></a>
|
|
<a style="--img: url(covers/audio_video_disco.jpg);" target="_blank" href="https://etjusticepourtous.bandcamp.com/album/audio-video-disco-1" ><span>Justice - Audio, Video, Disco</span></a>
|
|
<a style="--img: url(covers/synthicate.jpg);" target="_blank" href="https://newretrowave.bandcamp.com/album/synthicate" ><span>LAZERPUNK - Synthicate</span></a>
|
|
<a style="--img: url(covers/vast.jpg);" target="_blank" href="https://waterflame.bandcamp.com/album/vast" ><span>Waterflame - Vast</span></a>
|
|
<a style="--img: url(covers/tortured_waters.jpg);" target="_blank" href="https://newretrowave.bandcamp.com/album/tortured-waters" ><span>DEADLIFE - Tortured Waters</span></a>
|
|
<a style="--img: url(covers/spirit_phone.jpg);" target="_blank" href="http://www.neilcic.com/" ><span>Lemon Demon - Spirit Phone</span></a>
|
|
<a style="--img: url(covers/millenialism.jpg);" target="_blank" href="https://music.businesscasual.biz/album/millennialism" ><span>NYSE - MILLENNIALISM</span></a>
|
|
<a style="--img: url(covers/hawaii_part_ii.jpg);" target="_blank" href="https://miraclemusical.bandcamp.com" ><span>ミラクルミュージカル - Hawaii: Part II</span></a>
|
|
<a style="--img: url(covers/concrete_and_gold.jpg);" target="_blank" href="https://www.foofighters.com/" ><span>Foo Fighters - Concrete and Gold</span></a>
|
|
<a style="--img: url(covers/revolution_radio.jpg);" target="_blank" href="https://greenday.com/" ><span>Green Day - Revolution Radio</span></a>
|
|
<a style="--img: url(covers/this_is_all_yours.jpg);" target="_blank" href="https://altjband.com/" ><span>Alt-J - This Is All Yours</span></a>
|
|
<a style="--img: url(covers/the_last_ninja_2_c64_ost.jpg);" target="_blank" href="https://www.youtube-nocookie.com/embed/bjbN2RyZXHI" ><span>Matt Gray - The Last Ninja 2 (C64) OST</span></a>
|
|
<a style="--img: url(covers/aeon_core.jpg);" target="_blank" href="https://perctrax.bandcamp.com/album/aeon-core" ><span>Scalameriya - Aeon Core</span></a>
|
|
</div>
|
|
<div id="leftsidebg" style="background-image: url(bg.jxl), url(bg.jpg); --distancefromcenter: -10%;" title="Fun fact: I own music on vinyl but not a record player!"></div>
|
|
<br>
|
|
|
|
</body>
|
|
</html>
|