agnes/alienhospital
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
alienhospital/collections/media.html

835 lines
20 KiB
HTML
Raw Normal View History

first
2025-12-23 10:56:17 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Change your site title: (It is shown in the tab) -->
<title>AL13NH0SP1T4L</title>
<!-- Change your site description: (It is shown in Google results) -->
<meta content="My personal website!" name="description" />
<!-- Setting character encoding and viewport size. Do not remove. -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- FavIcon (small image in tab), change to any image you want: -->
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- CSS: -->
<!-- You will have to change this to "../style.css" if this HTML file is in a subfolder, to "../../style.css" if this HTML file is in 2 subfolders, etc. -->
<link href="./style.css" rel="stylesheet" />
<script>
// Template generated with petrapixel's layout generator.
// (Please do not remove this credit.)
console.log("%c Template generated with petrapixel's layout generator.", "font-size: 14pt;");
console.log("%c https://petrapixel.neocities.org/coding/layout-generator", "font-size: 14pt;");
</script>
</head>
<body>
<!-- The next line is a skip-to-content link for keyboard users. Do not remove it! -->
<a href="#content" id="skip-to-content-link">Skip to content</a>
<div class="layout">
<!-- =============================================== -->
<!-- HEADER -->
<!-- =============================================== -->
<main id="content"> <!-- Do NOT remove the ID here -->
<!-- =============================================== -->
<!-- MAIN CONTENT -->
<!-- =============================================== -->
<section>
<a href="/homepage">homepage</a>
<h1 id="top">Media Collection!</h1><br>
a collection of all my physical media! a lot of this is repetitive as i'm very monotropic. 95% of this is stuff i bought at yard sales, flea markets, thrift stores, etc, or were gifted to me from other people's collections.<br> last updated May 11, 2025; I need to do another room search soon because I know there are more unlisted.
<p><h1>Navigation!</h1></p>
Music
<li><a href="#cass">cassettes</a></li>
<li><a href="#vinyl">vinyl</a></li>
<li><a href="#cd">CDs</a></li>
<br>
<a href="#dvds">On DVD/etc</a><br>
<a href="#books">Books - WIP!</a> <br>
<a href="#comics">Comics</a>
<br><hr><br>
<div id="cass"><h1>music</h1>Cassettes:<br>
<img src="/collections/c1.png" width="500px"><img src="/collections/c2.png" width="200px"><br>
<li>Violator - Depeche Mode</li>
<li>101 - Depeche Mode</li>
<li>Some Great Reward - Depeche Mode</li>
<li>Cosmic Thing - the B52s</li>
<li>Greatest Hits - Donna Summer</li>
<li>The Best Of Culture Club</li></div>
<br><br>
<div id="vinyl">Vinyl: <br>
<img src="/collections/r1.png" width="500px">
<img src="/collections/r2.png" width="500px">
<img src="/collections/r5.png" width="500px">
<img src="/collections/r3.png" width="500px"><br>
<img src="/collections/r4.png" width="200px">
<li>Doom Patrol Season One Soundtrack (my most prized possession)</li>
<li>Lay Your Hands On Me - Thompson Twins</li>
<li>Playing the Angel - Depeche Mode</li>
<li>Shrines - Purity Ring</li>
<li>Speak & Spell - Depeche Mode</li>
<li>Construction Time Again - Depeche Mode</li>
<li>Silent Alarm Live - Bloc Party</li>
<li>Seven and the Ragged Tiger - Duran Duran</li>
<li>A Broken Frame - Depeche Mode</li>
<li>Spirit - Depeche Mode</li>
<li>Violator - Depeche Mode</li>
<li>The Punishment of Luxury - OMD</li>
<li>Four - Bloc Party</li>
<li> Speak & Spell: the 12" Singles Collection</li></div>
<br>Not Pictured:<br> Blasphemous Rumors Single - Depeche Mode<br>
Pony - Orville Peck<br>
Greatest Hits - Queen<br>
Greatest Hits - The Cure<br>
<div id="cd">CDs:
<br><img src="/collections/cd1.png"><br>
<img src="/collections/cd2.png"><br>
<li>Pet Shop Boys Discography: Complete Singles Collection</li>
<li>A Weekend in the City - Bloc Party</li>
<li>Intimacy - Bloc Party (my ultimate favorite album ever)</li>
<li>Catching up With Depeche Mode</li>
<li>Go On... - Mr Mister</li>
<li>Cosmic Thing - the B52s</li>
<li>Best of the Smiths, vol 2 (not sure why I have this one. I don't listen to the Smiths.)</li>
<li>Hourglass - Dave Gahan</li>
<li>Blasphemous Rumors Single - Depeche Mode</li>
<li>Silent Alarm Live - Bloc Party</li>
<li>Exciter - Depeche Mode</li>
<li>Tidal - Fiona Apple</li>
<li>Construction Time Again - Depeche Mode</li>
<li>Speak & Spell - Depeche Mode</li>
<li>Spandau Ballet - the 12 Inch Remixes</li>
<li>Depeche Mode - the Best Of</li>
<li>Violator - Depeche Mode</li>
<li>[A CD of live Depeche Mode shows and Depeche Mode B sides given to me by a family friend]</li>
<li>Tears for Fears - Greatest Hits 82-92</li>
<li>INXS - Greatest Hits</li>
<li>The Punishment of Luxury - OMD</li>
<li>Ultra - Depeche Mode</li>
<li>Music for the Masses - Depeche Mode</li>
<li> Kick - INXS</li>
<li>Not pictured: <br>Alpha Games - Bloc Party</li>
Babylon 5 vol 1 - Christopher Franke <br>
Babylon 5 vol 2 - Christopher Franke <br>
</div>
<br><br>
<div id="dvds"><h1>On DVD</h1>
<br><img src="/collections/dvd1.png">
<img src="/collections/dvd2.png">
<br>
<li>Doctor Who: the Black Guardian trilogy</li>
<li>Doctor who: the Five Doctors</li>
<li>Venom (2018)</li>
<li>Depeche Mode: DVD Collector's Box</li>
<li>Community: Season One (unwatched)</li>
<li>Magic Mike & Magic Mike XXL</li>
<li>The Nice Guys (2016)</li>
<li>Star Trek (2009)</li>
<li>Doom Patrol: Season Three</li>
<li>Doom Patrol: Season One</li>
<li>Doom Patrol: Season Two (Blu-Ray copy)</li>
<li>Doom Patrol: Season Two (again)</li>
<li>Magic Mike (again) (I had a Matt Bomer obsession once, can you tell?)</li>
<li>Babylon 5: Season One</li>
<li>Star Trek: Prodigy: Season One</li>
<li>Quantum Leap: Season Two (unwatched)</li>
<li>Quantum Leap: Season One (unwatched)</li>
<li>Will & Grace: Season One</li>
<li>Will & Grace: Season Two</li>
<li>Babylon 5: The Road Home (2023)</li>
<li>Star Trek: Lower Decks: Season 3</li>
<li>Crusade: Season One</li>
<li>Orphan Black: Season Three</li>
<li>Orphan Black: Season Two</li>
<li>To add pictures of: Stargirl seasons 1-2, Doctor Who: the Eccleston and Tennant years</li>
<br>Not Pictured: The Untamed Complete Series, Babylon 5: the Movies Collection, Babylon 5 Seasons 2-5, Glee Season One, Community season 1, The Orville season 1<br>
</div>
<div id="comics"><h1>Comics</h1>
i'm not much of a comics fan, mostly these are owned because i love different adaptions of these universes, but....<br>
<img src="/collections/com1.png"><br>
<img src="/collections/com2.png"><br>
<li>Unstoppable Doom Patrol #4</li>
<li>Unstoppable Doom Patrol #2</li>
<li>Unstoppable Doom Patrol #1</li>
<li>The Doom Patrol #13</li>
<li>Lower Decks #3</li>
<li>Doctor Who - Twelve Adventures Year Three #10</li>
<li>Pollack's Doom Patrol #83</li>
<li>Pollack's Doom Patrol #69 (nice)</li>
<li>Kupperberg's Doom Patrol #14</li>
<li>Kupperberg's Doom Patrol #3</li>
<li>Kupperberg's Doom Patrol #9</li>
<li>The Doom Patrol Annual #1</li>
<li>Way's Doom Patrol - Vol 1</li>
</div>
<br><br>
<div id="books">
<h1>Books</h1>
I have lots of these. This is an incomplete collection; still a WIP.
<br><img src="/collections/b1.png" width="500px"><br>
<img src="/collections/b2.png" width="500px"><br>
<img src="/collections/b4.png" width="500px"><br>
<img src="/collections/b3.png" width="200px"><br>
<li>Irish Fairy and Folk Tales</li>
<li>Babylon 5: Clark's Law</li>
<li>Classics, But Make It Gay (Nova and Mali)</li>
<li>Babylon 5: The Scripts of JMS vol 5</li>
<li>Doctor Who: K9 and Company (Terrence Dudley)</li>
<li>Babylon 5: The Scripts of JMS vol 3</li>
<li>Babylon 5: Legions of Fire: The Long Night of Centauri Prime (Peter David)</li>
<li>Babylon 5: In the Beginning</li>
<li>Peter Davison: Is there Life Outside The Box?</li>
<li>All Creatures Great and Small (James Herriot)</li>
<li>A Practical Handbook for the Actor</li>
<li>The Fifth Doctor Sourcebook</li>
<li>The Sixth Doctor Sourcebook</li>
<li>Doctor Who Character Encyclopedia</li>
<li>Doctor Who Annual 1982</li>
<li>Doctor Who Annual 1983</li>
<li>Whographica</li>
<li>Babylon 5: Passing of the Technomages: Invoking Darknes (Jeanne Cavelos)</li>
<li>Babylon 5: The Shadow Within (Jeanne Cavelos) <i>my Fav Book Ever</i></li>
<li>Babylon 5: The Scripts of JMS vol 4</li>
<li>Babylon 5: The Touch of Your Shadow, The Whisper of Your Name (Neal Barrett Jr)</li>
<li>Babylon 5: Dark Genesis: The Birth of the Psi Corps (J. Gregory Keyes)</li>
<li>Babylon 5: Passing of the Technomages: Summoning Light (Jeanne Cavelos)</li>
<li>Babylon 5: Final Reckoning: The Fate of Bester (J. Gregory Keyes</li>
<li>Babylon 5: Accusations (Lois Tilton)</li>
<li>Babylon 5: Voices (John Vornholt)</li>
<li>Babylon 5: Legions of Fire: Armies of Light and Dark (Peter David)</li>
<li>Babylon 5: Legions of Fire: Out of the Darkness</li>
<li>Doctor Who & the Talons of Weng-Chiang (Terrence Dicks)</li>
<li>Doctor Who & the Genesis of the Daleks (Terrence Dicks)</li>
<li>Doctor Who & the Revenge of the Cybermen (Terrence Dicks)</li>
<li>Doctor Who & the Tomb of the Cybermen (Gerry Davis)</li>
<li>Doctor Who & the Auton Invasion (Terrence Dicks)</li>
<li>[Illegible]</li>
<li>Doctor Who & the Tenth Planet (Gerry Davis)</li>
<li>Doctor Who & the Dinosaur Invasion (Malcom Hulke)</li>
<li>Doctor Who & the Zarbi (Bill Strutton)</li>
<li>Doctor Who & the Masque of Mandragora (Philip Hinchcliffe)</li>
<li>Doctor Who & the Android Invasion (Terrence Dicks)</li>
<li>Doctor Who & the Ice Warriors (Brian Hayles)</li>
<li>Doctor Who & the Enemy of the World (Ian Marter)</li>
<li>Doctor Who & the Invasion of Earth (Terrence Dicks)</li>
<li>Doctor Who & the Cybermen (Gerry Davis)</li>
<li>Doctor Who & the Three Doctors (Terrence Dicks)</li>
<li>Doctor Who & the Cave Monsters (Malcolm Hulke)</li>
<li>Doctor Who - Logopolis (Cristopher H. Bidmead)</li>
<li>Doctor Who & an Unearthly Child (Terrance Dicks)</li>
<li>Doctor Who & the Day of the Daleks (Terrance Dicks)</li>
<li>Doctor Who & the Seeds of Doom (Philip Hinchcliffe)</li>
<li>Doctor Who - The Dominators (Ian Marter)</li>
<li>Doctor Who & the Loch Ness Monster (Terrance Dicks)</li>
<li>Doctor Who & the Curse of Peladon (Brian Hayles)</li>
<li>Doctor Who & the Daleks (David Whitaker)</li>
<li>Doctor Who & the Terror of the Autons</li>
Not pictured:
<li>Little Weirds (Jenny Slate)</li>
<li>House of Leaves (Mark Z. Danielewski) - Unread</li>
<li>Babylon 5 at 20</li>
<li>Babylon 5: the scripts of J. Michael Straczynski vol. 7, 8, 10, 11</li>
<li>Crusade: What the Hell Happened? (J. Michael Straczynski)</li>
<li>The Long Way to a Small Angry Planet (Becky Chambers)</li>
<br>
<a href="#top">Back to top!</a>
</section>
</main>
<!-- Closing .layout: -->
</div>
<!-- Add any additional Javascript code (<script></script>) here. -->
</body>
<style>
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */
/* Variables are used like this: var(--text-color) */
:root {
/* Background Colors: */
--background-color: #ffffff;
--content-background-color: #ffffff;
--sidebar-background-color: #ffffff;
/* Text Colors: */
--text-color: #000000;
--sidebar-text-color: #2500dd;
--link-color: #000d63;
--link-color-hover: #5e00ec;
/* Text: */
--font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
--heading-font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
--font-size: 18px;
/* Other Settings: */
--margin: 25px;
--padding: 24px;
--border: 10px inset #001457;
--round-borders: 0px;
--sidebar-width: 300px;
}
/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-size: var(--font-size);
margin: 0;
padding: var(--margin);
color: var(--text-color);
font-family: var(--font);
line-height: 1.2;
font-weight: 900;
background: var(--background-color);
background-image: url("/stars5.gif");
}
::selection {
/* (Text highlighted by the user) */
background: rgba(0, 0, 0, 0.2);
}
mark {
/* Text highlighted by using the <mark> element */
text-shadow: 1px 1px 4px var(--link-color);
background-color: inherit;
color: var(--text-color);
}
/* Links: */
a {
text-decoration: underline;
}
a,
a:visited {
color: var(--link-color);
}
a:hover,
a:focus {
color: var(--link-color-hover);
text-decoration: none;
}
/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */
.layout {
width: 1200px;
display: grid;
grid-gap: var(--margin);
grid-template: "header" auto "main" auto "footer" auto / auto;
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}
main {
grid-area: main;
overflow-y: auto;
padding: var(--padding);
background: var(--content-background-color);
border: var(--border);
border-radius: var(--round-borders);
}
/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */
header {
grid-area: header;
font-size: 1.2em;
border: var(--border);
border-radius: var(--round-borders);
background: var(--content-background-color);
}
.header-content {
padding: var(--padding);
}
.header-title {
font-family: var(--heading-font);
font-size: 1.5em;
font-weight: bold;
}
.header-image img {
width: 100%;
height: auto;
}
/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */
aside {
grid-area: aside;
border: var(--border);
border-radius: var(--round-borders);
overflow: hidden;
background: var(--sidebar-background-color);
padding: var(--padding);
color: var(--sidebar-text-color);
}
.left-sidebar {
grid-area: leftSidebar;
}
.right-sidebar {
grid-area: rightSidebar;
}
.sidebar-title {
font-weight: bold;
font-size: 1.2em;
font-family: var(--heading-font);
}
.sidebar-section:not(:last-child) {
margin-bottom: 3em;
}
.sidebar-section ul,
.sidebar-section ol {
padding-left: 1.5em;
}
.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
margin-top: 10px;
}
/* Sidebar Blockquote: */
.sidebar-section blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
overflow: hidden;
}
.sidebar-section blockquote > *:first-child {
margin-top: 0;
}
.sidebar-section blockquote > *:last-child {
margin-bottom: 0;
}
/* Site Button: */
.site-button {
display: flex;
flex-direction: column;
align-items: center;
}
.site-button textarea {
font-family: monospace;
font-size: 0.7em;
}
/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */
nav {
margin-bottom: 3em;
}
nav .sidebar-title {
margin-bottom: 0.5em;
}
nav ul {
margin: 0 -5px;
padding: 0;
list-style: none;
user-select: none;
}
nav ul li {
margin-bottom: 0;
}
nav > ul li > a,
nav > ul li > strong {
display: inline-block;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 5px 10px;
}
nav > ul li > a.active,
nav > ul li > details.active summary {
font-weight: bold;
}
nav ul summary {
cursor: pointer;
}
nav ul ul li > a {
padding-left: 30px;
}
/* NAVIGATION IN HEADER */
header nav {
margin-bottom: 0;
}
header nav ul {
display: flex;
flex-wrap: wrap;
margin: 0;
}
header nav ul li {
position: relative;
}
header nav ul li:first-child > a {
padding-left: 0;
}
header nav ul li:last-child > a {
padding-right: 0;
}
/* Subnavigation (Drop-Down): */
header nav ul ul {
background: var(--content-background-color);
display: none;
position: absolute;
top: 100%;
left: 10px;
padding: 0.5em;
z-index: 1;
border: var(--border);
min-width: 100%;
box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}
header nav ul li:hover ul,
header nav ul li:focus-within ul {
display: block;
}
header nav ul li strong {
color: var(--link-color);
text-decoration: underline;
font-weight: normal;
}
header nav ul ul li a {
display: block;
padding-left: 0;
padding-right: 0;
}
/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */
main {
line-height: 1.5;
}
main a,
main a:visited {
color: var(--link-color);
}
main a:hover,
main a:focus {
color: var(--link-color-hover);
text-decoration-style: wavy;
}
main p,
main .image,
main .full-width-image,
main .two-columns {
margin: 0.75em 0;
}
main ol,
main ul {
margin: 0.5em 0;
padding-left: 1.5em;
}
main ol li,
main ul li {
margin-bottom: 0.2em;
line-height: 1.3;
}
main ol {
padding-left: 2em;
}
main blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
}
main pre {
margin: 1em 0 1.5em;
}
main code {
text-transform: none;
}
main center {
margin: 1em 0;
padding: 0 1em;
}
main hr {
border: 0;
border-top: var(--border);
margin: 1.5em 0;
}
/* HEADINGS: */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
font-family: var(--heading-font);
margin-bottom: 0;
line-height: 1.5;
}
main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
margin-top: 0;
}
main h1 {
font-size: 1.5em;
}
main h2 {
font-size: 1.4em;
}
main h3 {
font-size: 1.3em;
}
main h4 {
font-size: 1.2em;
}
main h5 {
font-size: 1.1em;
}
main h6 {
font-size: 1em;
}
/* COLUMNS: */
.two-columns {
display: flex;
}
.two-columns > * {
flex: 1 1 0;
margin: 0;
}
.two-columns > *:first-child {
padding-right: 0.75em;
}
.two-columns > *:last-child {
padding-left: 0.75em;
}
/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */
.image {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.full-width-image {
display: block;
width: 100%;
height: auto;
}
.images {
display: flex;
width: calc(100% + 5px + 5px);
margin-left: -5px;
margin-right: -5px;
}
.images img {
width: 100%;
height: auto;
padding: 5px;
margin: 0;
overflow: hidden;
}
/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */
/* please do not remove this. */
#skip-to-content-link {
position: fixed;
top: 0;
left: 0;
display: inline-block;
padding: 0.375rem 0.75rem;
line-height: 1;
font-size: 1.25rem;
background-color: var(--content-background-color);
color: var(--text-color);
transform: translateY(-3rem);
transition: transform 0.1s ease-in;
z-index: 99999999999;
}
#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
transform: translateY(0);
}
/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */
/* CSS Code for devices < 800px */
@media (max-width: 800px) {
body {
font-size: 14px;
}
.layout {
width: 100%;
grid-template: "header" auto "rightSidebar" auto "main" auto "leftSidebar" auto "footer" auto / 1fr;
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}
aside {
border-bottom: 1px solid;
padding: 9px;
font-size: 0.9em;
}
nav {
padding: 0;
}
nav > ul {
padding-top: 0.5em;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 0.5em;
}
main {
max-height: none;
padding: 15px;
}
.images {
flex-wrap: wrap;
}
.images img {
width: 100%;
}
#skip-to-content-link {
font-size: 1rem;
}
}
</style>
</html>
Reference in a new issue Copy permalink