835 lines
No EOL
20 KiB
HTML
835 lines
No EOL
20 KiB
HTML
<!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> |