root/isopod.cool
1
0
Fork 0
Code Releases Activity
isopod.cool/about/music/index.php
will 620200137e make it work on phones tm 
- Rearranged navigation significantly
  - Navbar is now unlimited width on desktop
  - Navbar is now always on top of the screen, even on the landing page
  - Navbar has been replaced with hamburger menu on mobile
- Significant styling alterations to look good on phones tm
  - Most of the credit goes to a certain meta tag.
  - (Appearance on desktop is mostly unchanged)
  - The background on mobile is now 100% image, but darkened to improve contrast
  - Table pages such as /links/ and /stats/ now rearrange on mobile:

    column a                column a  column b
    column b       vs       column a  column b
    column a                column a  column b
    column b                column a  column b

  - font size on landing page scales with device width on tall displays
  - guestbook posts use CSS grid now
- Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though
- Updated /stats/
  - Added some new stats
  - Updated CD collection size
- Updated /about/uses/
  - I now use Nextcloud News instead of Yarr
  - My phone runs Graphene
  - I use Fennec browser on mobile instead of standard Firefox
  - New background as the old one was horrible for contrast
- Added Waxlimbs - For Science! to /about/music/
- The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site
- Corrected various markup issues with the help of validator.w3.org/nu/
- Added alt text to a ton of images
- todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered
- /stuff/ remains unchanged. I'll get to it
- Hopefully that's everything lol
2023-02-26 04:22:38 -07:00

91 lines
5.1 KiB
PHP
Raw Blame History

<!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.2);
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.png);" target="_blank" href="https://findaeden.bandcamp.com/album/spectrum"><span>findaeden - Spectrum</span></a>
<a style="--img: url(covers/funeral.png);" target="_blank" href="https://noisemaster.bandcamp.com/album/funeral-ep"><span>Noisemaker - Funeral EP</span></a>
<a style="--img: url(covers/ultrakill_imperfect_hatred.png);" 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.png);" target="_blank" href="https://theblackkeys.com/?frontpage=true"><span>The Black Keys - El Camino</span></a>
<a style="--img: url(covers/for_science.png);" target="_blank" href="https://waxlimbs.bandcamp.com/album/for-science"><span>Waxlimbs - For Science!</span></a>
<a style="--img: url(covers/triangle_unicode.png);" 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.png);" target="_blank" href="https://caliphate.bandcamp.com/album/unstoppable-force"><span>CALIPHATE - Unstoppable Force</span></a>
<a style="--img: url(covers/walks_of_lung.png);" 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.png);" target="_blank" href="https://vine.bandcamp.com/album/realign"><span>Red Vox - Realign</span></a>
<a style="--img: url(covers/fucked_up_friends_3.png);" 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/synthicate.png);" target="_blank" href="https://newretrowave.bandcamp.com/album/synthicate"><span>LAZERPUNK - Synthicate</span></a>
<a style="--img: url(covers/vast.png);" target="_blank" href="https://waterflame.bandcamp.com/album/vast"><span>Waterflame - Vast</span></a>
<a style="--img: url(covers/tortured_waters.png);" target="_blank" href="https://newretrowave.bandcamp.com/album/tortured-waters"><span>DEADLIFE - Tortured Waters</span></a>
<a style="--img: url(covers/millenialism.png);" target="_blank" href="https://music.businesscasual.biz/album/millennialism"><span>NYSE - MILLENNIALISM</span></a>
<a style="--img: url(covers/concrete_and_gold.png);" target="_blank" href="https://www.foofighters.com/"><span>Foo Fighters - Concrete and Gold</span></a>
<a style="--img: url(covers/revolution_radio.png);" target="_blank" href="https://greenday.com/"><span>Green Day - Revolution Radio</span></a>
<a style="--img: url(covers/the_last_ninja_2_c64_ost.png);" 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.png);" 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.png); --distancefromcenter: -10%;" title="Pictured: Not necessarily the best, but objectively the coolest medium of music storage. Who am I kidding, this just looks cool. The coolest medium of music storage is obviously CDs, on account of the lasers and the ease of making digital backups."></div>
<br>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/chromealert.php'); ?>
</body>
</html>
View git blame Copy permalink