blob: ca11b1cbeafdab4920e3a04f714becb55dc62af8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<!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'); bg(false, -10); ?>
<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/with_teeth.jpg);" target="_blank" href="https://www.nin.com/" ><span>Nine Inch Nails - With Teeth</span></a>
<a style="--img: url(covers/two_house.jpg);" target="_blank" href="https://foodhouse.bandcamp.com/album/two-house" ><span>Food House - two house</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/raw_data_feel.jpg);" target="_blank" href="https://everythingeverything.bandcamp.com/album/raw-data-feel" ><span>Everything Everything - Raw Data Feel</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>
<br>
</body>
</html>
|
