first
This commit is contained in:
owoctober
commit
f2f4d4699a
251 changed files with 83645 additions and 0 deletions
BIN
JBB-25-Mix-Tape.png
Normal file
BIN
JBB-25-Mix-Tape.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
JBB-Uno.png
Normal file
BIN
JBB-Uno.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
MOON.JPG
Normal file
BIN
MOON.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 586 KiB |
BIN
NSBADGE.png
Normal file
BIN
NSBADGE.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
Untitled1470_20250616162158.png
Normal file
BIN
Untitled1470_20250616162158.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 775 KiB |
225
aboutme.html
Normal file
225
aboutme.html
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>alien hospital</title>
|
||||
<!-- The style.css file allows you to change the look of your web pages.
|
||||
If you include the next line in all your web pages, they will all share the same look.
|
||||
This makes it easier to make new pages for your site. -->
|
||||
<link rel="alternate" type="application/rss+xml"
|
||||
href="/feed.xml" title="RSS">
|
||||
<style>
|
||||
|
||||
body {
|
||||
color: #fff;
|
||||
background-image: url('/MOON.JPG');
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 26px;
|
||||
background-color: #000;
|
||||
width: 100px;
|
||||
}
|
||||
.bg {
|
||||
margin-left: 10px;
|
||||
margin-top: 90px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.spacebg {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.about {
|
||||
position: absolute;
|
||||
margin-left: 130px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
a:hover {
|
||||
webkit-filter: blur(1px);
|
||||
filter: blur(1px);
|
||||
}
|
||||
.kin {
|
||||
position: absolute;
|
||||
margin-left: 650px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.etc {
|
||||
color: #000;
|
||||
border: 8px #260040 groove;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
margin-left: 350px;
|
||||
margin-top: 0px;
|
||||
padding: 4px;
|
||||
height: 240px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
width: 858px;
|
||||
height: 650px;
|
||||
background-image: url('/stars5.gif');
|
||||
margin: 0 auto;
|
||||
z-index: 99;
|
||||
bottom: 29px;
|
||||
border: 1px white solid;
|
||||
overflow: hidden;
|
||||
box-shadow: 20px 2px 2px #d5b6e3 ;
|
||||
}
|
||||
|
||||
.imgav {
|
||||
position: absolute;
|
||||
top: 10;
|
||||
left: 60;
|
||||
}
|
||||
|
||||
|
||||
.navlink{
|
||||
background-color: white;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
margin: 8px 5px 8px;
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
width: 700px;
|
||||
height:300px;
|
||||
padding: 5px;
|
||||
border: 8px #260040 groove;
|
||||
position: absolute;
|
||||
margin-top: 300px;
|
||||
margin-left: 65px;
|
||||
color: #000;
|
||||
overflow-y: scroll;
|
||||
background-color: white;
|
||||
}
|
||||
.mywork {
|
||||
position: absolute;
|
||||
margin-left: 55px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
.sitemap {
|
||||
position: absolute;
|
||||
margin-left: 250px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.photoart{
|
||||
position: absolute;
|
||||
margin-left: 350px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
button:a {
|
||||
color: #000;
|
||||
}
|
||||
.journal {
|
||||
position: absolute;
|
||||
margin-left: 200px;
|
||||
margin-top: 220px;
|
||||
}
|
||||
.collections {
|
||||
|
||||
position: absolute;
|
||||
margin-left: 90px;
|
||||
margin-top: 330px;
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
background-color: #000;
|
||||
width: 180px;
|
||||
height: 650px; z-index: 1;
|
||||
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.secrets {
|
||||
position: absolute;
|
||||
margin-left: 570px;
|
||||
margin-top: 380px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.updated {
|
||||
height: 100px;
|
||||
width: 180px;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
}
|
||||
.tg {border-collapse:collapse;border-spacing:0;}
|
||||
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
|
||||
.roomtransition {
|
||||
position: absolute;
|
||||
margin-left: 700px;
|
||||
margin-top: 250px;
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<center><div class="header"><a href="/homepage">back</a></div> </center>
|
||||
<div class="container"><div class="imgav"><img src="https://i.ibb.co/dwQJbRhH/Untitled1243.png" width="250px" style="border: 8px #260040 inset;">
|
||||
</div>
|
||||
<div class="etc"><center><h3>Agnes</h3><table class="tg"><thead>
|
||||
<tr>
|
||||
<th>🛸</th>
|
||||
<th>👽</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Age</td>
|
||||
<td>mid 20s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pronouns</td>
|
||||
<td>it/its, zhe/zhers</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Location</td>
|
||||
<td>USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TV</td>
|
||||
<td>Babylon 5, The Orville, Doom Patrol, Star Trek (DS9/LWD), <br>Charmed, Farscape, Doctor Who, US Ghosts, <br>Yellowjackets, Severance</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Music</td>
|
||||
<td>Bloc Party, Depeche Mode, Pet Shop Boys, Doechii, Nova Twins,<br>Megan Thee Stallion, Kele Okereke, Soft Cell, Tears for Fears, Placebo, IAMX, Purity Ring</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Other media</td>
|
||||
<td>The Sims 3, Palia, Star Trek Online, Monster Prom, <br>Little Weirds (Jenny Slate), Lifeform (Jenny Slate), Madagascar franchise, I Saw The TV Glow, The Batman, Palia</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></center></div>
|
||||
|
||||
<div class="mainbox"><p>My name is Aggie and I like making websites! I've been on the internet since age six and coding since age nine, though I was much better at it back then somehow. I've had a lot of other sites on here -- notably Symphonic Surgery-- but I decided to rebuild to a quieter area with less eyes on me so I can truly express myself without anxiety. I love the internet, and I hate the internet, and I have a complicated relationship with the internet...</p>
|
||||
<p>I love writing, it's my whole life, and I also love drawing, and I also love creating-in-general. I like making video games, I like making zines, I like making really bad experimental electronic music, I love sculpting, I love creating things that don't fit into one specific vibe or label. I like doing things and coming up with things and learning and making and discovering and exploring. Outside of creativity, I also have a passion for theology and science, particularly marine biology and deep sea fish. </p><p>I'm severely disabled, physically developmentally and emotionally. I'm level 2 autistic and mostly housebound/do most things with a caregiver. Fiction and the internet are my primary coping mechanisms, so I talk about that a lot here.</p><p>
|
||||
Overall, I want this website to be... a scrapbook, I guess? A time capsule? A family heirloom? A virtual nest? Something like that. I miss the internet I grew up with, even if that internet was difficult on its own.
|
||||
<p></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
778
aboutww.html
Normal file
778
aboutww.html
Normal file
|
|
@ -0,0 +1,778 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- Change your site title: (It is shown in the tab) -->
|
||||
<title>ALIENH0SP1T4L</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 -->
|
||||
<!-- =============================================== -->
|
||||
|
||||
<header>
|
||||
<div class="header-image">
|
||||
<img src="https://i.ibb.co/d4wzWNJw/tumblr-9521a9fc973bc72adeebdf473bee6653-94ca1a4f-540.png" alt="" />
|
||||
</div>
|
||||
<div class="header-content">
|
||||
<div class="header-title"></div>
|
||||
|
||||
<!-- NAVIGATION -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/homepage">Home</a></li>
|
||||
<li><a href="/about">About Me</a></li>
|
||||
<li><a href="/shrines">Shrines</a></li>
|
||||
<li><a href="/resources">Resources</a></li>
|
||||
<li>
|
||||
<strong>More</strong>
|
||||
<ul>
|
||||
<li><a href="/paint">Games - Paint</a></li>
|
||||
<li><a href="/kidpix">Games - Kidpix</a></li>
|
||||
<li><a href="/secrets">Well of Secrets</a></li>
|
||||
<li><a href="/fanworks">Archive of My Fanworks</a></li>
|
||||
<li><a href="/links">Even More Links!</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<!-- =============================================== -->
|
||||
<!-- LEFT SIDEBAR -->
|
||||
<!-- =============================================== -->
|
||||
|
||||
<aside class="left-sidebar">
|
||||
|
||||
|
||||
<div class="sidebar-section">
|
||||
<h3><u>name</u></h3>
|
||||
Aggie
|
||||
<h3><u>age</u></h3>
|
||||
24
|
||||
<h3><u>location</u></h3>
|
||||
midwestern USA
|
||||
<h3><u>pronouns</u></h3>
|
||||
it/its, zhe/zhers, xe/xers, she/hers
|
||||
<h3><u>identity</u></h3>
|
||||
xenogender fictoromantic lesbian
|
||||
<h3><u>fictional partners</u></h3>
|
||||
the negative spirit (doom patrol (TV only))
|
||||
<h3><u>alterhumanity</u></h3>
|
||||
<li>lysella (the orville)</li>
|
||||
<li>jen regan (extraordinary)</li>
|
||||
<li>sleepy merp (star trek: lower decks)</li>
|
||||
<li>anna sheridan (babylon 5)</li>
|
||||
<li>rinna khev (star trek online)</li>
|
||||
<li>nurse tup (the second best hospital in the galaxy)</li>
|
||||
<li>jess day (new girl)</li>
|
||||
<li>van palmer (yellowjackets)</li>
|
||||
<li>non-canon negative spirit (doom patrol TV)</li>
|
||||
<li>binturong & anteater</li>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section"> </div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-title"></div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-title">add my button</div>
|
||||
<div class="site-button">
|
||||
<a href="https://alienhospital.neocities.org/" target="_blank"><img src="https://i.ibb.co/qFkKvXyg/buttno2.gif" alt="alienhospita"></a>
|
||||
<textarea><a href="https://alienhospital.neocities.org/" target="_blank"><img src="https://i.ibb.co/qFkKvXyg/buttno2.gif" alt="alienhospital"></a></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<!-- =============================================== -->
|
||||
<!-- RIGHT SIDEBAR -->
|
||||
<!-- =============================================== -->
|
||||
|
||||
<aside class="right-sidebar">
|
||||
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=aliens" defer></script>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<h3><u>favorite TV shows</u></h3>
|
||||
Babylon 5, The Orville, Doom Patrol, Star Trek (DS9/LWD), Charmed, Farscape, Doctor Who, US Ghosts, Yellowjackets, Severance
|
||||
<h3><u>favorite games</u></h3>
|
||||
The Sims 3, Palia, Star Trek Online, Monster Prom, Game Development
|
||||
<h3><u>favorite movies & books</u></h3>
|
||||
little weirds (jenny slate), lifeform (jenny slate), madagascar franchise, i saw the tv glow, the batman, encanto
|
||||
<h3><u>favorite music</u></h3>
|
||||
bloc party!!!, depeche mode, pet shop boys, soft cell, tears for fears, doechii, purity ring, the antlers, ghost quartet, iamx, placebo, fiona apple
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-title"></div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-title"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<iframe src="https://free.timeanddate.com/clock/i9vopxc0/n126/tt0/tw0/tm1/ts1/ta1/tb4" frameborder="0" width="126" height="34"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-title"></div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main id="content"> <!-- Do NOT remove the ID here -->
|
||||
|
||||
|
||||
|
||||
<!-- =============================================== -->
|
||||
<!-- MAIN CONTENT -->
|
||||
<!-- =============================================== -->
|
||||
|
||||
|
||||
<section>
|
||||
|
||||
<center><img src="https://i.ibb.co/ZRfYtg7t/welcome5.gif">
|
||||
<p>My name is Aggie and I like making websites! I've been on the internet since age six and coding since age nine, though I was much better at it back then somehow. I've had a lot of other sites on here -- notably Symphonic Surgery-- but I decided to rebuild to a quieter area with less eyes on me so I can truly express myself without anxiety. I love the internet, and I hate the internet, and I have a complicated relationship with the internet...</p>
|
||||
<p>I love writing, it's my whole life, and I also love drawing, and I also love creating-in-general. I like making video games, I like making zines, I like making really bad experimental electronic music, I love sculpting, I love creating things that don't fit into one specific vibe or label. I like doing things and coming up with things and learning and making and discovering and exploring. Outside of creativity, I also have a passion for theology and science, particularly marine biology and deep sea fish. </p><p>I'm severely disabled, physically developmentally and emotionally. I'm level 2 autistic and mostly housebound/do most things with a caregiver. Fiction and the internet are my primary coping mechanisms, so I talk about that a lot here.</p><p>
|
||||
Overall, I want this website to be... a scrapbook, I guess? A time capsule? A family heirloom? A virtual nest? Something like that. I miss the internet I grew up with, even if that internet was difficult on its own.
|
||||
<p>
|
||||
|
||||
|
||||
</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;
|
||||
font-weight: 900;
|
||||
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;
|
||||
background: var(--background-color);
|
||||
background-image: url("https://i.ibb.co/214VBwsN/pkg50004.jpg");
|
||||
|
||||
}
|
||||
|
||||
::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 header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(--sidebar-width) auto var(--sidebar-width);
|
||||
/* 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;
|
||||
}
|
||||
|
||||
#statuscafe {
|
||||
padding: .8em;
|
||||
|
||||
border: 7px double darkblue;
|
||||
}
|
||||
|
||||
#statuscafe a {
|
||||
|
||||
color:darkblue;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#statuscafe-username {
|
||||
margin-bottom: .5em; color:darkblue;
|
||||
|
||||
}
|
||||
#statuscafe-content {
|
||||
margin: 0 1em 0.5em 1em;
|
||||
color:darkblue;
|
||||
|
||||
}
|
||||
/* -------------------------------------------------------- */
|
||||
/* 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>
|
||||
BIN
ala.png
Normal file
BIN
ala.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
241
badges.html
Normal file
241
badges.html
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>alien hospital</title>
|
||||
<!-- The style.css file allows you to change the look of your web pages.
|
||||
If you include the next line in all your web pages, they will all share the same look.
|
||||
This makes it easier to make new pages for your site. -->
|
||||
<link rel="alternate" type="application/rss+xml"
|
||||
href="/feed.xml" title="RSS">
|
||||
<style>
|
||||
|
||||
body {
|
||||
background-image: url('/MOON.JPG');
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 26px;
|
||||
background-color: #fff;
|
||||
width: 100px;
|
||||
}
|
||||
.bg {
|
||||
margin-left: 10px;
|
||||
margin-top: 90px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.spacebg {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.about {
|
||||
position: absolute;
|
||||
margin-left: 130px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
a:hover {
|
||||
webkit-filter: blur(1px);
|
||||
filter: blur(1px);
|
||||
}
|
||||
.kin {
|
||||
position: absolute;
|
||||
margin-left: 650px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 750px;
|
||||
height: 600px;
|
||||
font-family: arial;
|
||||
border: 8px #260040 groove;
|
||||
font-size: 19px;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
overflow-y: scroll;
|
||||
padding: 5px;
|
||||
box-shadow: 20px 6px 2px -5px #d5b6e3 ;
|
||||
|
||||
}
|
||||
.etc {
|
||||
color: #000;
|
||||
border: 8px #260040 groove;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
margin-left: 350px;
|
||||
margin-top: 0px;
|
||||
padding: 4px;
|
||||
height: 240px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
width: 858px;
|
||||
height: 650px;
|
||||
background-image: url('/stars5.gif');
|
||||
margin: 0 auto;
|
||||
z-index: 99;
|
||||
bottom: 29px;
|
||||
border: 1px white solid;
|
||||
overflow: hidden;
|
||||
box-shadow: 20px 2px 2px #d5b6e3 ;
|
||||
}
|
||||
|
||||
.imgav {
|
||||
position: absolute;
|
||||
top: 10;
|
||||
left: 60;
|
||||
}
|
||||
|
||||
|
||||
.navlink{
|
||||
background-color: white;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
margin: 8px 5px 8px;
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
width: 700px;
|
||||
height:300px;
|
||||
padding: 5px;
|
||||
border: 8px #260040 groove;
|
||||
position: absolute;
|
||||
margin-top: 300px;
|
||||
margin-left: 65px;
|
||||
color: #000;
|
||||
overflow-y: scroll;
|
||||
background-color: white;
|
||||
}
|
||||
.mywork {
|
||||
position: absolute;
|
||||
margin-left: 55px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
.sitemap {
|
||||
position: absolute;
|
||||
margin-left: 250px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.photoart{
|
||||
position: absolute;
|
||||
margin-left: 350px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #000;
|
||||
}
|
||||
button:a {
|
||||
color: #000;
|
||||
}
|
||||
.journal {
|
||||
position: absolute;
|
||||
margin-left: 200px;
|
||||
margin-top: 220px;
|
||||
}
|
||||
.collections {
|
||||
|
||||
position: absolute;
|
||||
margin-left: 90px;
|
||||
margin-top: 330px;
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
background-color: #000;
|
||||
width: 180px;
|
||||
height: 650px; z-index: 1;
|
||||
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.secrets {
|
||||
position: absolute;
|
||||
margin-left: 570px;
|
||||
margin-top: 380px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.updated {
|
||||
height: 100px;
|
||||
width: 180px;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
}
|
||||
.tg {border-collapse:collapse;border-spacing:0;}
|
||||
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
|
||||
.roomtransition {
|
||||
position: absolute;
|
||||
margin-left: 700px;
|
||||
margin-top: 250px;
|
||||
}
|
||||
* {box-sizing: border-box;}
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
cursor: crosshair;
|
||||
}
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.image-container {
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.preview {
|
||||
font-family: 'symphonyfont';
|
||||
font-weight: 900;
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<center><div class="header"><a href="/homepage">back</a></div> </center>
|
||||
<div class="container"><div class="inner"><h2>Fandom Badges</h2>
|
||||
Badges I've earned in various fandom events. <hr><a href="https://femslashfete.dreamwidth.org/">femslashfete:</a><br><img src="https://64.media.tumblr.com/40f357f299456844f903ad7bf27df56a/02b47ce67b92eb7b-7b/s250x400/f458de0526738b3e3d8349aa495200fc1acbbff5.png" alt="femslashfete badge: soiree of the season: 10 fills"><img src="https://64.media.tumblr.com/514bce29bf71193be736199a78aa0cbd/02b47ce67b92eb7b-e1/s250x400/42d980bdf1a358ea766a25c83f8afcd9126fbf47.png" alt="femslashfete badge: a raucous revelry: 25 fills"><br><a href="https://elasticella.dreamwidth.org/90500.html">fresh femslash salad bar:</a> <br>2025: <img src="https://i.ibb.co/FkRWYvzb/image.png" alt="image" border="0"> 2024: <img src="https://i.ibb.co/4nc2Q2pN/image.png" alt="image" border="0"><br><br>
|
||||
<a href="https://www.tumblr.com/julybreakbingo">July Break Bingo:</a>
|
||||
<br>(at request of the reward creators, please do not reupload, alter or steal these!)<br>
|
||||
<br>2025:<br>
|
||||
<img src="/JBB-Uno.png" width="200px"><img src="/JBB-25-Mix-Tape.png" width="200px">
|
||||
<br>
|
||||
<br>
|
||||
<a href="https://elasticella.dreamwidth.org/94253.html?view=1016621&posted=1#cmt1016621">Hotties Haunting the Narrative</a> 2025:<br>
|
||||
<img src="https://64.media.tumblr.com/3a678a37f1761efd6435dbb19e44e027/ccc0fa30dd935a3e-12/s250x400/6d653e5025cb3cf39658528c71cce08728134392.png">
|
||||
<hr>
|
||||
Certificates I got for supporting <a href="https://fujocoded.com/">fujocoded</a>! Please don't steal these pretty pretty please<br><img src="/shipbadge.png" width="450px"><br>Doom Patrol (TV)<br><img src="/wm.png" width="450px"><br><img src="https://file.garden/aJzQmzrHVB4BLKwu/solara%20certificate.png" width="450px">The Orville (TV)
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
BIN
bgs/bag.png
Normal file
BIN
bgs/bag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 416 KiB |
BIN
bgs/headergif.gif
Normal file
BIN
bgs/headergif.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
bgs/ring.png
Normal file
BIN
bgs/ring.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
258
blog.html
Normal file
258
blog.html
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>alien hospital</title>
|
||||
<!-- The style.css file allows you to change the look of your web pages.
|
||||
If you include the next line in all your web pages, they will all share the same look.
|
||||
This makes it easier to make new pages for your site. -->
|
||||
<link rel="alternate" type="application/rss+xml"
|
||||
href="/feed.xml" title="RSS">
|
||||
<style>
|
||||
|
||||
body {
|
||||
background-image: url('/MOON.JPG');
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 26px;
|
||||
background-color: #fff;
|
||||
width: 100px;
|
||||
}
|
||||
.bg {
|
||||
margin-left: 10px;
|
||||
margin-top: 90px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.spacebg {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.about {
|
||||
position: absolute;
|
||||
margin-left: 130px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
a:hover {
|
||||
webkit-filter: blur(1px);
|
||||
filter: blur(1px);
|
||||
}
|
||||
.kin {
|
||||
position: absolute;
|
||||
margin-left: 650px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.entry {
|
||||
width: 550px;
|
||||
height: 180px;
|
||||
padding: 1%;
|
||||
border: 4px double navy;
|
||||
overflow: scroll;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.members {
|
||||
|
||||
width: 650px;
|
||||
height: 650px;
|
||||
margin: 0 auto;
|
||||
overflow: scroll;
|
||||
border: 8px double navy;
|
||||
padding: 0.8%;
|
||||
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 750px;
|
||||
height: 600px;
|
||||
font-family: arial;
|
||||
border: 8px #260040 groove;
|
||||
font-size: 19px;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
overflow-y: scroll;
|
||||
padding: 5px;
|
||||
box-shadow: 20px 6px 2px -5px #d5b6e3 ;
|
||||
|
||||
}
|
||||
.etc {
|
||||
color: #000;
|
||||
border: 8px #260040 groove;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
margin-left: 350px;
|
||||
margin-top: 0px;
|
||||
padding: 4px;
|
||||
height: 240px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
width: 858px;
|
||||
height: 650px;
|
||||
background-image: url('/stars5.gif');
|
||||
margin: 0 auto;
|
||||
z-index: 99;
|
||||
bottom: 29px;
|
||||
border: 1px white solid;
|
||||
overflow: hidden;
|
||||
box-shadow: 20px 2px 2px #d5b6e3 ;
|
||||
}
|
||||
|
||||
.imgav {
|
||||
position: absolute;
|
||||
top: 10;
|
||||
left: 60;
|
||||
}
|
||||
|
||||
|
||||
.navlink{
|
||||
background-color: white;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
margin: 8px 5px 8px;
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
width: 700px;
|
||||
height:300px;
|
||||
padding: 5px;
|
||||
border: 8px #260040 groove;
|
||||
position: absolute;
|
||||
margin-top: 300px;
|
||||
margin-left: 65px;
|
||||
color: #000;
|
||||
overflow-y: scroll;
|
||||
background-color: white;
|
||||
}
|
||||
.mywork {
|
||||
position: absolute;
|
||||
margin-left: 55px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
.sitemap {
|
||||
position: absolute;
|
||||
margin-left: 250px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.photoart{
|
||||
position: absolute;
|
||||
margin-left: 350px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #000;
|
||||
}
|
||||
button:a {
|
||||
color: #000;
|
||||
}
|
||||
.journal {
|
||||
position: absolute;
|
||||
margin-left: 200px;
|
||||
margin-top: 220px;
|
||||
}
|
||||
.collections {
|
||||
|
||||
position: absolute;
|
||||
margin-left: 90px;
|
||||
margin-top: 330px;
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
background-color: #000;
|
||||
width: 180px;
|
||||
height: 650px; z-index: 1;
|
||||
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.secrets {
|
||||
position: absolute;
|
||||
margin-left: 570px;
|
||||
margin-top: 380px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.updated {
|
||||
height: 100px;
|
||||
width: 180px;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
}
|
||||
.tg {border-collapse:collapse;border-spacing:0;}
|
||||
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
|
||||
.roomtransition {
|
||||
position: absolute;
|
||||
margin-left: 700px;
|
||||
margin-top: 250px;
|
||||
}
|
||||
* {box-sizing: border-box;}
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
cursor: crosshair;
|
||||
}
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.image-container {
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.preview {
|
||||
font-family: 'symphonyfont';
|
||||
font-weight: 900;
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<center><div class="header"><a href="/homepage">back</a></div> </center>
|
||||
<div class="container"><div class="inner"> <section>
|
||||
<h1>
|
||||
Journal </h1>
|
||||
<center>
|
||||
|
||||
|
||||
<h3>no TWs are used here. this is my space to rant, vent, and post any thoughts i have; smaller update microblog coming soon. read with caution.</h3>
|
||||
<a href='https://mapmyvisitors.com/web/1bya2' title='Visit tracker'><img src='https://mapmyvisitors.com/map.png?cl=ffffff&w=70&t=n&d=GdbOn3DJn3TT3VEbumDeHyqnlFDIBuPVQW5-8Cee33U' width="5px"></a> <!-- deal with it lmao i wanna know whos reading my shit -->
|
||||
<script src="//rss.bloople.net/?url=https%3A%2F%2Falienhospital.dreamwidth.org%2Fdata%2Frss&showtitle=false&type=js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
240
blorbeaux.html
Normal file
240
blorbeaux.html
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>agnes's blorbos</title>
|
||||
<style>
|
||||
body {
|
||||
background-image: url('https://file.garden/aJzQmzrHVB4BLKwu/pinkhrtsbg.gif');
|
||||
font-family: Monospace;
|
||||
font-size: 18px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'interstellarsymphonic-regular';
|
||||
src: url(https://file.garden/aJzQmzrHVB4BLKwu/interstellarsymphonic-regular.woff);
|
||||
}
|
||||
.container {
|
||||
height: 950px;
|
||||
width: 950px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.blorbo1 {
|
||||
border: 9px groove #03fc7b;
|
||||
overflow: scroll;
|
||||
width: 650px;
|
||||
height: 355px;
|
||||
margin: 0 auto;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/patternd192.gif');
|
||||
box-shadow: 15px 15px hotpink;
|
||||
|
||||
}
|
||||
|
||||
.inner {
|
||||
background-color: white;
|
||||
width: 600px;
|
||||
height: 230px;
|
||||
overflow: scroll;
|
||||
margin: 0 auto;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
.blorboinner {
|
||||
background-color: white;
|
||||
width: 290px;
|
||||
height: auto;
|
||||
overflow: scroll;
|
||||
margin: 0 auto;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
h3 {
|
||||
font-family: 'interstellarsymphonic-regular';
|
||||
border: 5px outset #03fc7b;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/dkld.jpg');
|
||||
}
|
||||
|
||||
.claire {
|
||||
border: 9px groove #03fc7b;
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 280px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/patternd192.gif');
|
||||
box-shadow: 15px 15px hotpink;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.lauralee {
|
||||
border: 9px groove #03fc7b;
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 280px;
|
||||
margin-top:705px;
|
||||
margin-left: 0px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/patternd192.gif');
|
||||
box-shadow: 15px 15px hotpink;
|
||||
|
||||
}
|
||||
|
||||
.morden {
|
||||
border: 9px groove #03fc7b;
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 280px;
|
||||
margin-top:1065px;
|
||||
margin-left: 0px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/patternd192.gif');
|
||||
box-shadow: 15px 15px hotpink;
|
||||
|
||||
}
|
||||
hr {
|
||||
border: 5px #03fc7b dotted;
|
||||
box-shadow: 5px 5px 5px hotpink;
|
||||
width: 250px;
|
||||
}
|
||||
.container img {
|
||||
width: 50%;
|
||||
border: 5px outset #f20085;
|
||||
box-shadow: 8px 8px 4px #8aff9f;
|
||||
}
|
||||
#blorbo img {
|
||||
width: 50%;
|
||||
border: 5px outset #f20085;
|
||||
box-shadow: 8px 8px 4px #8aff9f;
|
||||
}
|
||||
.alara {
|
||||
border: 9px groove #03fc7b;
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 280px;
|
||||
margin-left: 500px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/patternd192.gif');
|
||||
box-shadow: 15px 15px hotpink;
|
||||
|
||||
}
|
||||
.tns {
|
||||
border: 9px groove #03fc7b;
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 280px;
|
||||
margin-left: 500px;
|
||||
margin-top: 350px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/patternd192.gif');
|
||||
box-shadow: 15px 15px hotpink;
|
||||
|
||||
}
|
||||
.teleya {
|
||||
border: 9px groove #03fc7b;
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 280px;
|
||||
margin-top:350px;
|
||||
margin-left: 0px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/patternd192.gif');
|
||||
box-shadow: 15px 15px hotpink;
|
||||
|
||||
}
|
||||
.isabel {
|
||||
border: 9px groove #03fc7b;
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 280px;
|
||||
margin-left: 500px;
|
||||
margin-top: 705px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/patternd192.gif');
|
||||
box-shadow: 15px 15px hotpink;
|
||||
|
||||
|
||||
}
|
||||
.anna {
|
||||
border: 9px groove #03fc7b;
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 280px;
|
||||
margin-left: 500px;
|
||||
margin-top: 1065px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/patternd192.gif');
|
||||
box-shadow: 15px 15px hotpink;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.yang {
|
||||
border: 9px groove #03fc7b;
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 280px;
|
||||
margin-left: 500px;
|
||||
margin-top: 1428px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/patternd192.gif');
|
||||
box-shadow: 15px 15px hotpink;
|
||||
}
|
||||
|
||||
.dureena {
|
||||
border: 9px groove #03fc7b;
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 280px;
|
||||
margin-top:1428px;
|
||||
margin-left: 0px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background: url('https://file.garden/aJzQmzrHVB4BLKwu/patternd192.gif');
|
||||
box-shadow: 15px 15px hotpink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body> <a href="/homepage"
|
||||
><center><img
|
||||
src="https://file.garden/aJzQmzrHVB4BLKwu/3X7GCY2ORNMFXJ3PTRWN6YTPC7F5ULIT.gif"
|
||||
/></a></center>
|
||||
<div class="container">
|
||||
|
||||
<div class="blorbo1">
|
||||
<h3>BLORBOS!!</h3>
|
||||
<div class="inner">I have, throughout my entire time in fandom, typically only been able to get attached to a piece of media if there is at least one specific character I can get attached to and unhealthily obsess over. Fictional characters bring me a lot of comfort, and analyzing the mind, thoughts and personalities of fictonal characters is a favorite pasttime of mine, and makes sense, considering I'm fictosexual (though these characters are not all necessarily characters I'm attracted to, just characters I like to obsess over).
|
||||
|
||||
I tend to like characters who are alien, literally or metaphorically or both; monsters, literally or metaphorically or both; devout or devoted; awkward and shy; obsessive; quirky; loud & rough; competent, though this is by no means exclusive. Here are a bunch of characters I consider "blorbos". </div>
|
||||
</div><br><hr>
|
||||
<div class="claire"><img src="https://file.garden/aJzQmzrHVB4BLKwu/claire.png" class="id"><div class="blorboinner"><strong>Name:</strong> Claire Finn<br><strong>Source:</strong> The Orville<br><strong>Ships:</strong> Claire/Isaac, Claire/Timmis, Claire/Alara</div>
|
||||
</div> <div class="alara" id="blorbo"><img src="https://file.garden/aJzQmzrHVB4BLKwu/alara.png"><div class="blorboinner"><strong>Name:</strong> Alara Kitan<br><strong>Source:</strong> The Orville<br><strong>Ships:</strong>Alara/Solana, Alara/Kelly, Alara/Talla, Alara/Claire</div></div>
|
||||
<div class="teleya" id="blorbo"><img src="https://file.garden/aJzQmzrHVB4BLKwu/teleya.png"><div class="blorboinner"><strong>Name:</strong> Teleya<br><strong>Source:</strong> The Orville<br><strong>Ships:</strong>Teleya/Kelly, Teleya/any female character</div></div>
|
||||
<div class="tns" id="blorbo"><img src="https://file.garden/aJzQmzrHVB4BLKwu/VAL.png"><div class="blorboinner"><strong>Name:</strong> Valentina Vostok<br><strong>Source:</strong> Doom Patrol TV<br><strong>Ships: </strong>Valentina/Her spirit</div></div>
|
||||
<div class="lauralee" id="blorbo"><img src="https://file.garden/aJzQmzrHVB4BLKwu/laura%20flee.png"><div class="blorboinner"><strong>Name:</strong> Laura Lee<br><strong>Source:</strong> Yellowjackets<br><strong>Ships: </strong>Laura Lee/Lottie, Laura Lee/Yellowjackets Enesemble</div></div><div class="isabel" id="blorbo"><img src="https://file.garden/aJzQmzrHVB4BLKwu/isa3bel.png"><div class="blorboinner"><strong>Name:</strong> Isabel Feathers<br><strong>Source:</strong> Doom Patrol<br><strong>Ships: </strong>Isabel/Laura</div></div><div class="morden" id="blorbo"><img src="https://file.garden/aJzQmzrHVB4BLKwu/morden.png"><div class="blorboinner"><strong>Name:</strong> Morden<br><strong>Source:</strong> Babylon 5<br><strong>Ships: </strong>Morden/Anna</div></div>
|
||||
<div class="anna" id="blorbo"><img src="https://file.garden/aJzQmzrHVB4BLKwu/annaaa.png"><div class="blorboinner"><strong>Name:</strong> Anna Sheridan<br><strong>Source:</strong> Babylon 5<br><strong>Ships: </strong>Morden/Anna, Anna/Liz, Anna/Delenn</div></div>
|
||||
<div class="dureena" id="blorbo"><img src="https://file.garden/aJzQmzrHVB4BLKwu/dureeena.png"><div class="blorboinner"><strong>Name:</strong> Dureena Nafeel<br><strong>Source:</strong> Crusade (1999)<br><strong>Ships: </strong>Dureena/Sarah</div></div><div class="yang" id="blorbo"><img src="https://file.garden/aJzQmzrHVB4BLKwu/yang.png"><div class="blorboinner"><strong>Name:</strong> Mr. Yang<br><strong>Source:</strong> Psych (2006)<br><strong>Ships: </strong>Yang/Shawn</div></div>
|
||||
</body>
|
||||
</html>
|
||||
405
blorbo.html
Normal file
405
blorbo.html
Normal file
|
|
@ -0,0 +1,405 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>alien hospital</title>
|
||||
<!-- The style.css file allows you to change the look of your web pages.
|
||||
If you include the next line in all your web pages, they will all share the same look.
|
||||
This makes it easier to make new pages for your site. -->
|
||||
<link rel="alternate" type="application/rss+xml"
|
||||
href="/feed.xml" title="RSS">
|
||||
<style>
|
||||
|
||||
body {
|
||||
background-image: url('/MOON.JPG');
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 26px;
|
||||
background-color: #fff;
|
||||
width: 100px;
|
||||
}
|
||||
.bg {
|
||||
margin-left: 10px;
|
||||
margin-top: 90px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.spacebg {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.about {
|
||||
position: absolute;
|
||||
margin-left: 130px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
a:hover {
|
||||
webkit-filter: blur(1px);
|
||||
filter: blur(1px);
|
||||
}
|
||||
.kin {
|
||||
position: absolute;
|
||||
margin-left: 650px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 750px;
|
||||
height: 600px;
|
||||
font-family: arial;
|
||||
border: 8px #260040 groove;
|
||||
font-size: 19px;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
overflow-y: scroll;
|
||||
padding: 5px;
|
||||
box-shadow: 20px 6px 2px -5px #d5b6e3 ;
|
||||
|
||||
}
|
||||
.etc {
|
||||
color: #000;
|
||||
border: 8px #260040 groove;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
margin-left: 350px;
|
||||
margin-top: 0px;
|
||||
padding: 4px;
|
||||
height: 240px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
width: 858px;
|
||||
height: 650px;
|
||||
background-image: url('/stars5.gif');
|
||||
margin: 0 auto;
|
||||
z-index: 99;
|
||||
bottom: 29px;
|
||||
border: 1px white solid;
|
||||
overflow: hidden;
|
||||
box-shadow: 20px 2px 2px #d5b6e3 ;
|
||||
}
|
||||
|
||||
.imgav {
|
||||
position: absolute;
|
||||
top: 10;
|
||||
left: 60;
|
||||
}
|
||||
|
||||
|
||||
.navlink{
|
||||
background-color: white;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
margin: 8px 5px 8px;
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
width: 700px;
|
||||
height:300px;
|
||||
padding: 5px;
|
||||
border: 8px #260040 groove;
|
||||
position: absolute;
|
||||
margin-top: 300px;
|
||||
margin-left: 65px;
|
||||
color: #000;
|
||||
overflow-y: scroll;
|
||||
background-color: white;
|
||||
}
|
||||
.mywork {
|
||||
position: absolute;
|
||||
margin-left: 55px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
.sitemap {
|
||||
position: absolute;
|
||||
margin-left: 250px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.photoart{
|
||||
position: absolute;
|
||||
margin-left: 350px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #000;
|
||||
}
|
||||
button:a {
|
||||
color: #000;
|
||||
}
|
||||
.journal {
|
||||
position: absolute;
|
||||
margin-left: 200px;
|
||||
margin-top: 220px;
|
||||
}
|
||||
.collections {
|
||||
|
||||
position: absolute;
|
||||
margin-left: 90px;
|
||||
margin-top: 330px;
|
||||
}
|
||||
.entry {
|
||||
width: 550px;
|
||||
height: 180px;
|
||||
padding: 1%;
|
||||
margin: 0 auto;
|
||||
border: 4px double navy;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
aside {
|
||||
background-color: #000;
|
||||
width: 180px;
|
||||
height: 650px; z-index: 1;
|
||||
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.secrets {
|
||||
position: absolute;
|
||||
margin-left: 570px;
|
||||
margin-top: 380px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.updated {
|
||||
height: 100px;
|
||||
width: 180px;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
}
|
||||
.tg {border-collapse:collapse;border-spacing:0;}
|
||||
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
|
||||
.roomtransition {
|
||||
position: absolute;
|
||||
margin-left: 700px;
|
||||
margin-top: 250px;
|
||||
}
|
||||
* {box-sizing: border-box;}
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
cursor: crosshair;
|
||||
}
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.image-container {
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.preview {
|
||||
font-family: 'symphonyfont';
|
||||
font-weight: 900;
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<center><div class="header"><a href="/homepage">back</a></div> </center>
|
||||
<div class="container"><div class="inner"><center> <h1> blorbo from my shows</h1>
|
||||
|
||||
<a href="https://www.hellomei.dev/blorbos">inspired by this page!</a><br>
|
||||
I have, throughout my entire time in fandom, typically only been able to get attached to a piece of media if there is at least one specific character I can get attached to and unhealthily obsess over. Fictional characters bring me a lot of comfort, and analyzing the mind, thoughts and personalities of fictonal characters is a favorite pasttime of mine, and makes sense, considering I'm fictosexual (though these characters are not all necessarily characters I'm attracted to, just characters I like to obsess over). <br><br>I tend to like characters who are alien, literally or metaphorically or both; monsters, literally or metaphorically or both; devout or devoted; awkward and shy; obsessive; quirky; loud & rough; competent, though this is by no means exclusive.
|
||||
|
||||
<p><h2>blorbos of all time</h2></center>
|
||||
|
||||
My love for these characters hasn't diminished at all for 5+ years. These are the only male characters I still care deeply about, honestly.
|
||||
<br><br><div class="entry">
|
||||
<center>
|
||||
<i>THE NEGATIVE SPIRIT (DOOM PATROL TV)</i><br>
|
||||
<img src="https://i.ibb.co/1tDPg4r9/66529bc5.jpg" alt="66529bc5" border="0" width="150px"><br>the love of my entire life. we've been together since april 11, 2019 and i'm really really deeply abnormal about them to incomprehensibly vast levels of abnormal (seriously you don't even Know). the blorbo of all blorbos, my everything, the eternal number one spot of my heart.... i saw them say "torture" and it was over for me.. i have a longer page about this <a href="/tnsmylove">here</a> hehe</div><div class="entry">
|
||||
<center>
|
||||
<i>TOVAN KHEV (STAR TREK: ONLINE)</i><br>
|
||||
<img src="https://i.ibb.co/Vp5KPVqM/16804c0b.jpg" alt="66529bc5" border="0" width="150px"><br>the character i have loved longer than pretty much any other character. his expansion came out in i think may of 2013, and i started playing in august, shortly after my twelfth birthday. my love for him has not died for the past 14 years!!! he is so loyal and sweet and caring but also badass and complex in my mind & he is so so important to me...</div><div class="entry"> <center>
|
||||
<i>MR. MORDEN (BABYLON 5)</i><br>
|
||||
<img src="https://i.ibb.co/TBgr59dw/c5b7d0fa.jpg" alt="66529bc5" border="0" width="150px"><br>i started watching babylon 5 when i was 11, shortly after me and my father went to the 20th anniversary reunion panel at phoenix comic con. i decided to see what it was all about, and got hooked.<br><br>despite a definite initial attraction to morden, my obsession with him did not take hold until 2022; before that i would be in and out of babylon 5 fandom, but when i fell in love with him the obsession took a firm hold. he's such a fascinating rat zombie undead evil corrosive bastard, and i love to pull his brain apart with my teeth heart emoji. i am thinking about him constantly and just all the time. </div>
|
||||
|
||||
<center><h2>current blorbos</h2>
|
||||
these characters i'm obsessed with at the moment, but may pass in the future.
|
||||
<div class="current">
|
||||
<table class="tg" style="undefined;table-layout: fixed; width: 496px"><colgroup>
|
||||
<col style="width: 126px">
|
||||
<col style="width: 102px">
|
||||
<col style="width: 116px">
|
||||
<col style="width: 152px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tg-0pky">Image</th>
|
||||
<th class="tg-0pky">Name</th>
|
||||
<th class="tg-0pky">Source</th>
|
||||
<th class="tg-c3ow">Notes</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/yFH5YjVn/5a25be28.jpg" alt="Image" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Alara <br>Kitan</td>
|
||||
<td class="tg-0pky">The Orville</td>
|
||||
<td class="tg-c3ow">One of my ultimate blorbos. She's disabled! She's insecure! She has a hard relationship with her family!!!</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/93nWcdy9/9b969c35.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Kaylon<br>Primary</td>
|
||||
<td class="tg-0pky">The Orville</td>
|
||||
<td class="tg-c3ow">BIG FAMILY GUY GAVE THIS ROBOT PTSD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/ycgLBbKd/79ee145e.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Charly Burke</td>
|
||||
<td class="tg-0pky">The Orville</td>
|
||||
<td class="tg-c3ow">suicidal dyke rights SHE SHOULD HAVE BEEN ALLOWED TO KILL</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/VW18FTvt/45736ed6.jpg" alt="Image" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Kelly Grayson</td>
|
||||
<td class="tg-0pky">The Orville</td>
|
||||
<td class="tg-c3ow">extremely shippable, extreme blorbo material. she has done nothing wrong & this show is nothing without her.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/vxbxHKF4/6143d7bb.jpg" alt="Image" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Teleya</td>
|
||||
<td class="tg-0pky">The Orville</td>
|
||||
<td class="tg-c3ow">GOD FORBID WOMEN HAVE HOBBIES LIKE RELIGIOUS EXTREMISM OR MURDER</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/rGRth23Q/784be9ca.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Laura Lee</td>
|
||||
<td class="tg-0pky">Yellowjackets</td>
|
||||
<td class="tg-c3ow">religious dyke representation (<- to me)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/F457P49K/b0e3d123.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Valentina<br>Vostok</td>
|
||||
<td class="tg-0pky">Doom Patrol (TV)</td>
|
||||
<td class="tg-c3ow">the most interesting side character ever made & she was GAY & FUCKED THAT ALIEN</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/XkWPZnD3/ea7d7e20.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Amber Gemstone</td>
|
||||
<td class="tg-0pky">The Righteous Gemstones</td>
|
||||
<td class="tg-c3ow">i need to watch season 4 but she is everything to me i need her to shoot me rn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/wr2wbDhd/402b2f12.jpg" alt="Image" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Elouisa</td>
|
||||
<td class="tg-0pky">Palia</td>
|
||||
<td class="tg-c3ow">My precious schizophrenic representation MILF. I love her dearly. Say no bad words about her or else.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/xtp2WzZy/d7d001cc.jpg" width="100" height="106"></td>
|
||||
<td class="tg-0pky">Isabel Feathers<br>/Immortus</td>
|
||||
<td class="tg-0pky">Doom Patrol (TV)</td>
|
||||
<td class="tg-0pky">i would listen to her talk about herself all day and all night</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/N29cb0C4/ed26a2fa.jpg" width="100" height="106"></td>
|
||||
<td class="tg-0pky">Van Palmer</td>
|
||||
<td class="tg-0pky">Yellowjackets</td>
|
||||
<td class="tg-0pky">SHE IS THE HEART OF EVERYTHINGNGNGGNGNGNG<br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0lax"><img src="https://i.ibb.co/7dR3Sdb2/43d486cd.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0lax">Dr. Vlam</td>
|
||||
<td class="tg-0lax">Second Best Hospital In The Galaxy</td>
|
||||
<td class="tg-0lax">she can go crazy obsessive on me any day</td>
|
||||
</tr>
|
||||
</tbody></table></div>
|
||||
|
||||
<br><h2>long-term blorbos</h2>
|
||||
these are characters i've loved for a very long time. i may not actively discuss them, but i still love them lots!
|
||||
|
||||
<div class="current">
|
||||
<table class="tg" style="undefined;table-layout: fixed; width: 368px"><colgroup>
|
||||
<col style="width: 111px">
|
||||
<col style="width: 75px">
|
||||
<col style="width: 74px">
|
||||
<col style="width: 108px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tg-0pky">Name</th>
|
||||
<th class="tg-0pky">Image</th>
|
||||
<th class="tg-0pky">Source</th>
|
||||
<th class="tg-0pky">Notes</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/twRSt24Y/8806965a.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Bill Cipher</td>
|
||||
<td class="tg-0pky">Gravity Falls</td>
|
||||
<td class="tg-0pky">I was obsessed with this guy at 14, as were many people my age. Love him lots even now!</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/0p4mxf7x/bf5af12d.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Phoebe Halliwell</td>
|
||||
<td class="tg-0pky">Charmed</td>
|
||||
<td class="tg-0pky">I too am a reckless girl who can see the future and kick ass.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/bjDx47qc/f39be9a9.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Vislor Turlough</td>
|
||||
<td class="tg-0pky">Doctor Who</td>
|
||||
<td class="tg-0pky">If you projected your school trauma onto Turlough in 2017, clap your hands.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/8nsfHfZV/42a31d42.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Skipper</td>
|
||||
<td class="tg-0pky">Penguins<br>Of<br>Madag-<br>ascar</td>
|
||||
<td class="tg-0pky">I once did an hour long video essay on why he is subtextually gay.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/yFSptH7B/06d6115a.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Shev Akria</td>
|
||||
<td class="tg-0pky">Star Trek<br>Comics 2015</td>
|
||||
<td class="tg-0pky">He's so emo and angsty and tries so hard and I lovehate him and need to see him suffer <3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/Cs8QPRwg/5ee3ffa6.jpg" width="100" height="100"></td>
|
||||
<td class="tg-0pky">Jadzia Dax</td>
|
||||
<td class="tg-0pky">Star Trek<br>Deep Space Nine</td>
|
||||
<td class="tg-0pky">I AM A DYKE</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0pky"><img src="https://i.ibb.co/cKp3srx0/2dce20d6.jpg" width="100" height="99"></td>
|
||||
<td class="tg-0pky">Dureena Nafeel</td>
|
||||
<td class="tg-0pky">Crusade</td>
|
||||
<td class="tg-0pky">I'm so in love with her I can barely think. She stole my heart - LITERALLY!</td>
|
||||
</tr>
|
||||
</tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
48
blrobo.html
Normal file
48
blrobo.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The web site of alienhospital</title>
|
||||
<!-- The style.css file allows you to change the look of your web pages.
|
||||
If you include the next line in all your web pages, they will all share the same look.
|
||||
This makes it easier to make new pages for your site. -->
|
||||
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
<div class="box"> <center>NEGATIVE SPACE: A DOOM PATROL FAN GAME</center><br>
|
||||
|
||||
A Doom Patrol fan-game made with Bitsy. TV based but takes the Negative Spirit lore introduced in Way's comics run (and the name Mercurius from previous comic runs, even though I.. dislike that name personally) and... goes wild with it. more information <a href="https://spirit.alien.hospital/hc">here.</a> Play as the Negative Spirit after returning to their dimension in Vacay Patrol, coming back to find their home has changed for the worse since they left. Featuring!
|
||||
|
||||
<li>-Music from someone who doesn't know music</li>
|
||||
|
||||
<li>-Art from someone who doesn't know art</li>
|
||||
|
||||
<li>-Vague season 3 timeline placement</li>
|
||||
<br><br>
|
||||
some notes not indicated on the linked page:<br>
|
||||
<li>-in one of the comics, the spirits state that the negative space is "obverse to the positive place" - interpreted here as a sister dimension to the negative space.</li>
|
||||
<br><br><big><big><a href="/negativespace">PLAY HERE!</a></big></big><br><br><a href="/homepage">home</a></div>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
background: #000;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
font-family: monospace;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 0 auto;
|
||||
width: 450px;
|
||||
padding: 1%;
|
||||
height: 450px;
|
||||
overflow: scroll;
|
||||
border: 2px blue inset;
|
||||
}
|
||||
|
||||
#alara img {
|
||||
border: 5px hotpink inset;
|
||||
</style>
|
||||
</html>
|
||||
BIN
bulltown.png
Normal file
BIN
bulltown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
button (6).gif
Normal file
BIN
button (6).gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
230
buttons.html
Normal file
230
buttons.html
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>alien hospital</title>
|
||||
<!-- The style.css file allows you to change the look of your web pages.
|
||||
If you include the next line in all your web pages, they will all share the same look.
|
||||
This makes it easier to make new pages for your site. -->
|
||||
<link rel="alternate" type="application/rss+xml"
|
||||
href="/feed.xml" title="RSS">
|
||||
<style>
|
||||
|
||||
body {
|
||||
background-image: url('/MOON.JPG');
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 26px;
|
||||
background-color: #fff;
|
||||
width: 100px;
|
||||
}
|
||||
.bg {
|
||||
margin-left: 10px;
|
||||
margin-top: 90px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.spacebg {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.about {
|
||||
position: absolute;
|
||||
margin-left: 130px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
a:hover {
|
||||
webkit-filter: blur(1px);
|
||||
filter: blur(1px);
|
||||
}
|
||||
.kin {
|
||||
position: absolute;
|
||||
margin-left: 650px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 750px;
|
||||
height: 600px;
|
||||
font-family: arial;
|
||||
border: 8px #260040 groove;
|
||||
font-size: 19px;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
overflow-y: scroll;
|
||||
padding: 5px;
|
||||
box-shadow: 20px 6px 2px -5px #d5b6e3 ;
|
||||
|
||||
}
|
||||
.etc {
|
||||
color: #000;
|
||||
border: 8px #260040 groove;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
margin-left: 350px;
|
||||
margin-top: 0px;
|
||||
padding: 4px;
|
||||
height: 240px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
width: 858px;
|
||||
height: 650px;
|
||||
background-image: url('/stars5.gif');
|
||||
margin: 0 auto;
|
||||
z-index: 99;
|
||||
bottom: 29px;
|
||||
border: 1px white solid;
|
||||
overflow: hidden;
|
||||
box-shadow: 20px 2px 2px #d5b6e3 ;
|
||||
}
|
||||
|
||||
.imgav {
|
||||
position: absolute;
|
||||
top: 10;
|
||||
left: 60;
|
||||
}
|
||||
|
||||
|
||||
.navlink{
|
||||
background-color: white;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
margin: 8px 5px 8px;
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
width: 700px;
|
||||
height:300px;
|
||||
padding: 5px;
|
||||
border: 8px #260040 groove;
|
||||
position: absolute;
|
||||
margin-top: 300px;
|
||||
margin-left: 65px;
|
||||
color: #000;
|
||||
overflow-y: scroll;
|
||||
background-color: white;
|
||||
}
|
||||
.mywork {
|
||||
position: absolute;
|
||||
margin-left: 55px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
.sitemap {
|
||||
position: absolute;
|
||||
margin-left: 250px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.photoart{
|
||||
position: absolute;
|
||||
margin-left: 350px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #000;
|
||||
}
|
||||
button:a {
|
||||
color: #000;
|
||||
}
|
||||
.journal {
|
||||
position: absolute;
|
||||
margin-left: 200px;
|
||||
margin-top: 220px;
|
||||
}
|
||||
.collections {
|
||||
|
||||
position: absolute;
|
||||
margin-left: 90px;
|
||||
margin-top: 330px;
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
background-color: #000;
|
||||
width: 180px;
|
||||
height: 650px; z-index: 1;
|
||||
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.secrets {
|
||||
position: absolute;
|
||||
margin-left: 570px;
|
||||
margin-top: 380px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.updated {
|
||||
height: 100px;
|
||||
width: 180px;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
}
|
||||
.tg {border-collapse:collapse;border-spacing:0;}
|
||||
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
|
||||
.roomtransition {
|
||||
position: absolute;
|
||||
margin-left: 700px;
|
||||
margin-top: 250px;
|
||||
}
|
||||
* {box-sizing: border-box;}
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
cursor: crosshair;
|
||||
}
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.image-container {
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.preview {
|
||||
font-family: 'symphonyfont';
|
||||
font-weight: 900;
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<center><div class="header"><a href="/homepage">back</a></div> </center>
|
||||
<div class="container"><div class="inner"><h2>Button Wall</h2>
|
||||
Websites I enjoy, friends, mutuals, etc.<br><br><a href="https://eunoia.sayitditto.net/buttons/"><img src="/buttons/eunoia.png"></a><a href="https://serpentinemalign.neocities.org/"><img src="/buttons/smbutton.png"></a><a href="https://bulltown.neocities.org/ulnks/"><img src="/bulltown.png"/></a><a href="https://maevedarcy.neocities.org/"><img src="/maeve.png" height="31px"></a><a href="https://linkyblog.neocities.org/"><img src="https://file.garden/aJzQmzrHVB4BLKwu/linkybanner.png"></a><a href="https://hellomei.dev"><img src="https://file.garden/aJzQmzrHVB4BLKwu/hellomei.gif"></a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
BIN
buttons/eunoia.png
Normal file
BIN
buttons/eunoia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
buttons/smbutton.png
Normal file
BIN
buttons/smbutton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
charlyburke-824545.jpg
Normal file
BIN
charlyburke-824545.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
140
clique.html
Normal file
140
clique.html
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cliques!</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<center>
|
||||
|
||||
</center>
|
||||
</div>
|
||||
<center>
|
||||
<h2
|
||||
style="background-color: white; width:750px;"
|
||||
>
|
||||
<a href="/homepage.html">HOME</a> | <a href="/homepage">BACK HOME</a>
|
||||
</h2>
|
||||
</center>
|
||||
<div class="container">
|
||||
<p><center><h1></center><br>
|
||||
|
||||
<center>Welcome to Galactic Cliques! These are a small-but-growing list of internet cliques to join. :)<br><br>
|
||||
|
||||
<strong>What's a clique??</strong><br>A clique is a list of people who put a code on their site that shows off something they like, something about them, something dear to them, etc. See <a href="https://cliqued.wings.nu/">cliqued</a> for more!</strong> For ours, you can claim something even if someone else has already claimed it.
|
||||
<br>
|
||||
|
||||
<br>
|
||||
|
||||
Current cliques:<br>
|
||||
<b> The Alien In Me</b> - What fictional alien would you be? Claim one!<br>
|
||||
<br><br>Are you a fan of Star Trek or Star Wars, or something similar? Do you have a favorite kind of alien? Show off your love for them with this clique!
|
||||
<br><br>
|
||||
🛸 If I was in <a href="https://alien.hospital/clique">[source media name]</a>, I'd be a(n) [alien type]. 🛸 <br>
|
||||
<textarea rows="3" cols="20">🛸 If I was in <a href="https://alien.hospital/clique">[source media name]</a>, I'd be a(n) [alien type]. 🛸</textarea><br><br>Example:<br>🛸 If I was in <a href="https://alien.hospital/clique">Star Trek</a>, I'd be a Caitian. 🛸<br><br>
|
||||
<b> Additional Tags</b> - What AO3 tag would you be?<br><br>If you have a favorite fanfiction trope, concept, tag, etc, it can become your tag!<br><br>
|
||||
<img src="https://file.garden/ZRcocrUQNGkxIJor/ao3e.png"> Additional <a href="https://alien.hospital/clique">Tags:</a> [tag]<br><textarea rows="3" cols="20"> <img src="https://file.garden/ZRcocrUQNGkxIJor/ao3e.png"> Additional <a href="https://alien.hospital/clique">Tags:</a> [tag]</textarea><br><br>
|
||||
Example:<br> <img src="https://file.garden/ZRcocrUQNGkxIJor/ao3e.png"> Additional <a href="https://alien.hospital/clique">Tags:</a> Character Study
|
||||
</center>
|
||||
</div>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
background-image: url('https://file.garden/ZRcocrUQNGkxIJor/flowr1.jpg');
|
||||
font-family: Monospace;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
overflow: scroll;
|
||||
border: 3px yellow double;
|
||||
width: 550px;
|
||||
background-color: #fff;
|
||||
height: 90px;
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.clown {
|
||||
top:0px;
|
||||
left: 0px;
|
||||
position:absolute;
|
||||
height:90px;
|
||||
}
|
||||
.charlyy {
|
||||
top:0px; right: 0px;
|
||||
position:absolute;
|
||||
}
|
||||
.longbox {
|
||||
position: absolute;
|
||||
overflow: scroll;
|
||||
border: 3px yellow double;
|
||||
width: 550px;
|
||||
background-color: #fff;
|
||||
height: 350px;
|
||||
margin-top: 320px;
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.firstbox {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border: 3px yellow double;
|
||||
width: 310px;
|
||||
height: 250px;
|
||||
margin-left: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.two {
|
||||
position: absolute;
|
||||
overflow: scroll;
|
||||
border: 3px yellow double;
|
||||
width: 310px;
|
||||
background-color: #fff;
|
||||
height: 250px;
|
||||
margin-left: 390px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.container {
|
||||
background-color: white;
|
||||
width: 780px;
|
||||
height: 780px;
|
||||
overflow: scroll;
|
||||
border: 15px double white;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.boxybox{
|
||||
background: #fff;
|
||||
width: 350px;
|
||||
height: 490px;
|
||||
border: 3px yellow double;
|
||||
position: absolute;
|
||||
padding: 1%;
|
||||
overflow: scroll;
|
||||
left: 390px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.factboxy {
|
||||
background: #fff;
|
||||
width: 300px;
|
||||
height: 490px;
|
||||
border: 3px yellow double;
|
||||
position: absolute;
|
||||
padding: 1%;
|
||||
overflow: scroll;
|
||||
right:390px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
text-shadow: 3px 3px 3px lightblue;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
641
cliques.html
Normal file
641
cliques.html
Normal file
|
|
@ -0,0 +1,641 @@
|
|||
<!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>
|
||||
<center>Welcome to Galactic Cliques! These are a small-but-growing list of internet cliques to join. :)<br><br>
|
||||
|
||||
<strong>What's a clique??</strong><br>A clique is a list of people who put a code on their site that shows off something they like, something about them, something dear to them, etc. See <a href="https://cliqued.wings.nu/">cliqued</a> for more!</strong> For ours, you can claim something even if someone else has already claimed it.
|
||||
<br>
|
||||
|
||||
<br>
|
||||
<hr>
|
||||
|
||||
Current cliques:<br>
|
||||
<b>Extraterrestrial Aspects</b> - What fictional alien would you be? Claim one!<br>
|
||||
<br>Are you a fan of Star Trek or Star Wars, or something similar? Do you have a favorite kind of alien? Show off your love for them with this clique!
|
||||
<br><br>
|
||||
🛸 Extraterrestrial Aspects: <a href="https://alien.hospital/cliques">[insert alien type]</a> 🛸 <br>
|
||||
<textarea rows="3" cols="20">🛸 🛸 Extraterrestrial Aspects: <a href="https://alien.hospital/cliques">[insert alien type]</a> 🛸</textarea>
|
||||
<br> <br>Example: <br> 🛸 Extraterrestrial Aspects: <a href="https://alien.hospital/cliques">Caitian (Star Trek)</a> 🛸<br><hr>
|
||||
<b> Additional Tags</b> - What AO3 tag would you be?<br><br>If you have a favorite fanfiction trope, concept, tag, etc, it can become your tag!<br><br>
|
||||
<img src="https://i.ibb.co/KpMnG9hg/ao3e.png"> Additional <a href="https://alien.hospital/cliques">Tags:</a> [tag]<br><textarea rows="3" cols="20"> <img src="https://i.ibb.co/KpMnG9hg/ao3e.png"> Additional <a href="https://alien.hospital/cliques">Tags:</a> [tag]</textarea><br><br>
|
||||
Example:<br> <img src="https://i.ibb.co/KpMnG9hg/ao3e.png"> Additional <a href="https://symphony.surgery/cliques/home">Tags:</a> Character Study
|
||||
</center>
|
||||
</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("https://i.ibb.co/214VBwsN/pkg50004.jpg");
|
||||
|
||||
}
|
||||
|
||||
::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 {
|
||||
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>
|
||||
32
codetest.html
Normal file
32
codetest.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
#workskin .userstuff {
|
||||
background-image: URL(https://i.ibb.co/QjxS9CF0/54cbfbe9153a0a387b51924f8e2524c22a9d4a72.jpg);
|
||||
border: 5px solid outset;
|
||||
font-family: Times New Roman;
|
||||
font-weight: 900;
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
#workskin .chapter {
|
||||
display: hidden;
|
||||
|
||||
}
|
||||
|
||||
#workskin h1 {
|
||||
background: #000;
|
||||
border: 3px solid;
|
||||
font-family: Times New Roman;
|
||||
width: 550px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#workskin .nav {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#workskin .userstuff a {
|
||||
color: #fff;
|
||||
}
|
||||
BIN
collections.png
Normal file
BIN
collections.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 848 KiB |
BIN
collections/b1.png
Normal file
BIN
collections/b1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 450 KiB |
BIN
collections/b2.png
Normal file
BIN
collections/b2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 466 KiB |
BIN
collections/b3.png
Normal file
BIN
collections/b3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
BIN
collections/b4.png
Normal file
BIN
collections/b4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 291 KiB |
BIN
collections/c1.png
Normal file
BIN
collections/c1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
BIN
collections/c2.png
Normal file
BIN
collections/c2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 439 KiB |
BIN
collections/cd1.png
Normal file
BIN
collections/cd1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
BIN
collections/cd2.png
Normal file
BIN
collections/cd2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
BIN
collections/cows/1.png
Normal file
BIN
collections/cows/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
collections/cows/2.png
Normal file
BIN
collections/cows/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
BIN
collections/cows/3.png
Normal file
BIN
collections/cows/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
BIN
collections/cows/4.png
Normal file
BIN
collections/cows/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
collections/cows/5.png
Normal file
BIN
collections/cows/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
BIN
collections/cows/6.png
Normal file
BIN
collections/cows/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
collections/cows/7.png
Normal file
BIN
collections/cows/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
collections/cows/8.png
Normal file
BIN
collections/cows/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
BIN
collections/cows/9.png
Normal file
BIN
collections/cows/9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
collections/dvd1.png
Normal file
BIN
collections/dvd1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
BIN
collections/dvd2.png
Normal file
BIN
collections/dvd2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
835
collections/media.html
Normal file
835
collections/media.html
Normal file
|
|
@ -0,0 +1,835 @@
|
|||
<!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>
|
||||
663
collections/misc.html
Normal file
663
collections/misc.html
Normal file
|
|
@ -0,0 +1,663 @@
|
|||
<!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>
|
||||
misc collections
|
||||
</h1>
|
||||
|
||||
<a href="/collections/media">Media collection page here!</a> It was too long for this one.<br><br>
|
||||
these are transparent versions of things in my room!<br>
|
||||
|
||||
<center><h1 id="cows">cows</h1>
|
||||
<br><br><img src="/collections/cows/1.png" width="150px">
|
||||
<img src="/collections/cows/2.png" width="150px">
|
||||
<img src="/collections/cows/3.png" width="150px">
|
||||
<img src="/collections/cows/4.png" width="150px">
|
||||
<img src="/collections/cows/5.png" width="150px">
|
||||
<img src="/collections/cows/6.png" width="150px">
|
||||
<img src="/collections/cows/7.png" width="150px">
|
||||
<img src="/collections/cows/8.png" width="150px">
|
||||
<img src="/collections/cows/9.png" width="150px">
|
||||
|
||||
<hr>
|
||||
|
||||
<h1 id="toys">toys</h1>
|
||||
<br><br><img src="/collections/toys/1.png" width="150px">
|
||||
<img src="/collections/toys/2.png" width="150px">
|
||||
<img src="/collections/toys/3.png" width="150px">
|
||||
<img src="/collections/toys/4.png" width="150px">
|
||||
<img src="/collections/toys/5.png" width="150px">
|
||||
<img src="/collections/toys/6.png" width="150px">
|
||||
<img src="/collections/toys/7.png" width="150px">
|
||||
<img src="/collections/toys/8.png" width="150px">
|
||||
<img src="/collections/toys/9.png" width="150px">
|
||||
<img src="/collections/toys/10.png" width="150px">
|
||||
<img src="/collections/toys/11.png" width="150px">
|
||||
|
||||
|
||||
</center>
|
||||
|
||||
</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>
|
||||
BIN
collections/r1.png
Normal file
BIN
collections/r1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
BIN
collections/r2.png
Normal file
BIN
collections/r2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 KiB |
BIN
collections/r3.png
Normal file
BIN
collections/r3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
BIN
collections/r4.png
Normal file
BIN
collections/r4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
BIN
collections/r5.png
Normal file
BIN
collections/r5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
BIN
collections/toys/1.png
Normal file
BIN
collections/toys/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
collections/toys/10.png
Normal file
BIN
collections/toys/10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
BIN
collections/toys/11.png
Normal file
BIN
collections/toys/11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
BIN
collections/toys/2.png
Normal file
BIN
collections/toys/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
BIN
collections/toys/3.png
Normal file
BIN
collections/toys/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
BIN
collections/toys/4.png
Normal file
BIN
collections/toys/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
BIN
collections/toys/5.png
Normal file
BIN
collections/toys/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
BIN
collections/toys/6.png
Normal file
BIN
collections/toys/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
BIN
collections/toys/7.png
Normal file
BIN
collections/toys/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
BIN
collections/toys/8.png
Normal file
BIN
collections/toys/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
BIN
collections/toys/9.png
Normal file
BIN
collections/toys/9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 271 KiB |
56
drawbox.html
Normal file
56
drawbox.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DRAWBOX</title>
|
||||
<style>
|
||||
* {box-sizing: border-box;}
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
cursor: crosshair;
|
||||
}
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.image-container {
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>DRAWBOX</h1>
|
||||
<canvas id="drawboxcanvas" width="500" height="500"></canvas>
|
||||
<br>
|
||||
<div onclick="change_color(this)" style="background:red" class="stroke-color"></div>
|
||||
<div onclick="change_color(this)" style="background:blue" class="stroke-color"></div>
|
||||
|
||||
<button onclick="Restore()">Undo</button>
|
||||
<button onclick="Clear()">Clear</button>
|
||||
|
||||
<input type="color" oninput="stroke_color = this.value">
|
||||
<input type="range" min="1" max="100" oninput="stroke_width = this.value">
|
||||
|
||||
<button id="submit">Submit drawing</button>
|
||||
<p id="status"></p>
|
||||
|
||||
|
||||
<h1>Submitted Drawings ☻</h1>
|
||||
<div id="gallery">Loading images...</div>
|
||||
|
||||
|
||||
<script src="drawbox.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
198
drawbox.js
Normal file
198
drawbox.js
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
/*
|
||||
|
||||
FILL IN THESE VARIABLES BASED ON THE GUIDE AT https://drawbox.nekoweb.org
|
||||
|
||||
IF YOU HAVE ANY QUESTION, SUGGESTIONS, OR NEED HELP, PLEASE EMAIL ME AT drawbox@jhorn.net OR @MONKEYBATION on DISCORD
|
||||
|
||||
/`·.¸
|
||||
/¸...¸`:·
|
||||
¸.·´ ¸ `·.¸.·´)
|
||||
: © ):´; ¸ {
|
||||
`·.¸ `· ¸.·´\`·¸)
|
||||
`\\´´\¸.·´
|
||||
|
||||
*/
|
||||
const GOOGLE_FORM_ID = "1FAIpQLSf_FBSe2K4lPEO3VHQCVSfkc6-lFe33O-dbp9cj6IjXQKTaOg";
|
||||
const ENTRY_ID = "entry.1334848810";
|
||||
const GOOGLE_SHEET_ID = "1nnNEU2B9tSyhp-gkxa_ug2M78WwLa2SdT7ZtgQbFYGc";
|
||||
const DISPLAY_IMAGES = true;
|
||||
|
||||
/*
|
||||
|
||||
DONT EDIT BELOW THIS POINT IF YOU DONT KNOW WHAT YOU ARE DOING.
|
||||
|
||||
*/
|
||||
|
||||
const CLIENT_ID = "b4fb95e0edc434c";
|
||||
const GOOGLE_SHEET_URL = "https://docs.google.com/spreadsheets/d/" + GOOGLE_SHEET_ID + "/export?format=csv";
|
||||
const GOOGLE_FORM_URL = "https://docs.google.com/forms/d/e/" + GOOGLE_FORM_ID + "/formResponse";
|
||||
|
||||
let canvas = document.getElementById("drawboxcanvas");
|
||||
let context = canvas.getContext("2d");
|
||||
context.fillStyle = "white";
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
let restore_array = [];
|
||||
let start_index = -1;
|
||||
let stroke_color = "black";
|
||||
let stroke_width = "2";
|
||||
let is_drawing = false;
|
||||
|
||||
function change_color(element) {
|
||||
stroke_color = element.style.background;
|
||||
}
|
||||
|
||||
function start(event) {
|
||||
is_drawing = true;
|
||||
context.beginPath();
|
||||
context.moveTo(getX(event), getY(event));
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function draw(event) {
|
||||
if (!is_drawing) return;
|
||||
context.lineTo(getX(event), getY(event));
|
||||
context.strokeStyle = stroke_color;
|
||||
context.lineWidth = stroke_width;
|
||||
context.lineCap = "round";
|
||||
context.lineJoin = "round";
|
||||
context.stroke();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function stop(event) {
|
||||
if (!is_drawing) return;
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
is_drawing = false;
|
||||
restore_array.push(context.getImageData(0, 0, canvas.width, canvas.height));
|
||||
start_index++;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function getX(event) {
|
||||
return event.pageX
|
||||
? event.pageX - canvas.offsetLeft
|
||||
: event.targetTouches[0].pageX - canvas.offsetLeft;
|
||||
}
|
||||
|
||||
function getY(event) {
|
||||
return event.pageY
|
||||
? event.pageY - canvas.offsetTop
|
||||
: event.targetTouches[0].pageY - canvas.offsetTop;
|
||||
}
|
||||
|
||||
canvas.addEventListener("touchstart", start, false);
|
||||
canvas.addEventListener("touchmove", draw, false);
|
||||
canvas.addEventListener("touchend", stop, false);
|
||||
canvas.addEventListener("mousedown", start, false);
|
||||
canvas.addEventListener("mousemove", draw, false);
|
||||
canvas.addEventListener("mouseup", stop, false);
|
||||
canvas.addEventListener("mouseout", stop, false);
|
||||
|
||||
function Restore() {
|
||||
if (start_index <= 0) {
|
||||
Clear();
|
||||
} else {
|
||||
start_index--;
|
||||
restore_array.pop();
|
||||
context.putImageData(restore_array[start_index], 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
function Clear() {
|
||||
context.fillStyle = "white";
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
restore_array = [];
|
||||
start_index = -1;
|
||||
}
|
||||
|
||||
context.drawImage = function() {
|
||||
console.warn("noo >:(");
|
||||
};
|
||||
|
||||
document.getElementById("submit").addEventListener("click", async function () {
|
||||
const submitButton = document.getElementById("submit");
|
||||
const statusText = document.getElementById("status");
|
||||
|
||||
submitButton.disabled = true;
|
||||
statusText.textContent = "Uploading...";
|
||||
|
||||
const imageData = canvas.toDataURL("image/png");
|
||||
const blob = await (await fetch(imageData)).blob();
|
||||
const formData = new FormData();
|
||||
formData.append("image", blob, "drawing.png");
|
||||
|
||||
try {
|
||||
const response = await fetch("https://api.imgur.com/3/image", {
|
||||
method: "POST",
|
||||
headers: { Authorization: `Client-ID ${CLIENT_ID}` },
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!data.success) throw new Error("Imgur upload failed");
|
||||
|
||||
const imageUrl = data.data.link;
|
||||
console.log("Uploaded image URL:", imageUrl);
|
||||
|
||||
const googleFormData = new FormData();
|
||||
googleFormData.append(ENTRY_ID, imageUrl);
|
||||
|
||||
await fetch(GOOGLE_FORM_URL, {
|
||||
method: "POST",
|
||||
body: googleFormData,
|
||||
mode: "no-cors",
|
||||
});
|
||||
|
||||
statusText.textContent = "Upload successful!";
|
||||
alert("Image uploaded and submitted successfully ☻");
|
||||
location.reload();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
statusText.textContent = "Error uploading image.";
|
||||
alert("Error uploading image or submitting to Google Form.");
|
||||
} finally {
|
||||
submitButton.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchImages() {
|
||||
if (!DISPLAY_IMAGES) {
|
||||
console.log("Image display is disabled.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(GOOGLE_SHEET_URL);
|
||||
const csvText = await response.text();
|
||||
const rows = csvText.split("\n").slice(1);
|
||||
|
||||
const gallery = document.getElementById("gallery");
|
||||
gallery.innerHTML = "";
|
||||
rows.reverse().forEach((row) => {
|
||||
const columns = row.split(",");
|
||||
if (columns.length < 2) return;
|
||||
|
||||
const timestamp = columns[0].trim();
|
||||
const imgUrl = columns[1].trim().replace(/"/g, "");
|
||||
|
||||
if (imgUrl.startsWith("http")) {
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("image-container");
|
||||
|
||||
div.innerHTML = `
|
||||
<img src="${imgUrl}" alt="drawing">
|
||||
<p>${timestamp}</p>
|
||||
`;
|
||||
gallery.appendChild(div);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching images:", error);
|
||||
document.getElementById("gallery").textContent = "Failed to load images.";
|
||||
}
|
||||
}
|
||||
|
||||
fetchImages();
|
||||
241
drawboxx.html
Normal file
241
drawboxx.html
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>alien hospital</title>
|
||||
<!-- The style.css file allows you to change the look of your web pages.
|
||||
If you include the next line in all your web pages, they will all share the same look.
|
||||
This makes it easier to make new pages for your site. -->
|
||||
<link rel="alternate" type="application/rss+xml"
|
||||
href="/feed.xml" title="RSS">
|
||||
<style>
|
||||
|
||||
body {
|
||||
background-image: url('/MOON.JPG');
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 26px;
|
||||
background-color: #fff;
|
||||
width: 100px;
|
||||
}
|
||||
.bg {
|
||||
margin-left: 10px;
|
||||
margin-top: 90px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.spacebg {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.about {
|
||||
position: absolute;
|
||||
margin-left: 130px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
a:hover {
|
||||
webkit-filter: blur(1px);
|
||||
filter: blur(1px);
|
||||
}
|
||||
.kin {
|
||||
position: absolute;
|
||||
margin-left: 650px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 750px;
|
||||
height: 600px;
|
||||
font-family: arial;
|
||||
border: 8px #260040 groove;
|
||||
font-size: 19px;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
overflow-y: scroll;
|
||||
padding: 5px;
|
||||
box-shadow: 20px 6px 2px -5px #d5b6e3 ;
|
||||
|
||||
}
|
||||
.etc {
|
||||
color: #000;
|
||||
border: 8px #260040 groove;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
margin-left: 350px;
|
||||
margin-top: 0px;
|
||||
padding: 4px;
|
||||
height: 240px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
width: 858px;
|
||||
height: 650px;
|
||||
background-image: url('/stars5.gif');
|
||||
margin: 0 auto;
|
||||
z-index: 99;
|
||||
bottom: 29px;
|
||||
border: 1px white solid;
|
||||
overflow: hidden;
|
||||
box-shadow: 20px 2px 2px #d5b6e3 ;
|
||||
}
|
||||
|
||||
.imgav {
|
||||
position: absolute;
|
||||
top: 10;
|
||||
left: 60;
|
||||
}
|
||||
|
||||
|
||||
.navlink{
|
||||
background-color: white;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
margin: 8px 5px 8px;
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
width: 700px;
|
||||
height:300px;
|
||||
padding: 5px;
|
||||
border: 8px #260040 groove;
|
||||
position: absolute;
|
||||
margin-top: 300px;
|
||||
margin-left: 65px;
|
||||
color: #000;
|
||||
overflow-y: scroll;
|
||||
background-color: white;
|
||||
}
|
||||
.mywork {
|
||||
position: absolute;
|
||||
margin-left: 55px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
.sitemap {
|
||||
position: absolute;
|
||||
margin-left: 250px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.photoart{
|
||||
position: absolute;
|
||||
margin-left: 350px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #000;
|
||||
}
|
||||
button:a {
|
||||
color: #000;
|
||||
}
|
||||
.journal {
|
||||
position: absolute;
|
||||
margin-left: 200px;
|
||||
margin-top: 220px;
|
||||
}
|
||||
.collections {
|
||||
|
||||
position: absolute;
|
||||
margin-left: 90px;
|
||||
margin-top: 330px;
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
background-color: #000;
|
||||
width: 180px;
|
||||
height: 650px; z-index: 1;
|
||||
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.secrets {
|
||||
position: absolute;
|
||||
margin-left: 570px;
|
||||
margin-top: 380px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.updated {
|
||||
height: 100px;
|
||||
width: 180px;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
}
|
||||
.tg {border-collapse:collapse;border-spacing:0;}
|
||||
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
|
||||
.roomtransition {
|
||||
position: absolute;
|
||||
margin-left: 700px;
|
||||
margin-top: 250px;
|
||||
}
|
||||
* {box-sizing: border-box;}
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
cursor: crosshair;
|
||||
}
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.image-container {
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<center><div class="header"><a href="/homepage">back</a></div> </center>
|
||||
<div class="container"><div class="inner"> <h1><center>DRAWBOX</h1></center>
|
||||
<canvas id="drawboxcanvas" width="500" height="500"></canvas>
|
||||
<br>
|
||||
<div onclick="change_color(this)" style="background:red" class="stroke-color"></div>
|
||||
<div onclick="change_color(this)" style="background:blue" class="stroke-color"></div>
|
||||
|
||||
<button onclick="Restore()">Undo</button>
|
||||
<button onclick="Clear()">Clear</button>
|
||||
|
||||
<input type="color" oninput="stroke_color = this.value">
|
||||
<input type="range" min="1" max="100" oninput="stroke_width = this.value">
|
||||
|
||||
<button id="submit">Submit drawing</button>
|
||||
<p id="status"></p>
|
||||
|
||||
|
||||
<h1>Submitted Drawings ☻</h1>
|
||||
<div id="gallery">Loading images...</div>
|
||||
|
||||
|
||||
<script src="drawbox.js"></script></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
dressup/bg.jpg
Normal file
BIN
dressup/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
BIN
dressup/britneyshirt.png
Normal file
BIN
dressup/britneyshirt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
BIN
dressup/cshirt.png
Normal file
BIN
dressup/cshirt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
dressup/cshirt2.png
Normal file
BIN
dressup/cshirt2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
dressup/dadshirt.png
Normal file
BIN
dressup/dadshirt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
dressup/dmshirts.png
Normal file
BIN
dressup/dmshirts.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
261
dressup/fjf.html
Normal file
261
dressup/fjf.html
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||
<link rel="canonical" href="https://html5-templates.com/" />
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<script src="/dressup/script.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<title>Windows Template</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="desktop">
|
||||
<div class="window" data-title="First">
|
||||
Window content
|
||||
</div>
|
||||
<div class="window" data-title="Second">
|
||||
Second Window
|
||||
</div>
|
||||
<div class="window closed" data-title="Third">
|
||||
Third window starts closed
|
||||
</div>
|
||||
<div class="window" data-title="Welcome">
|
||||
<h1>Free Windows Template</h1>
|
||||
<p>Minimize the windows to the taskbar, make them full screen or close them.</p>
|
||||
<p>Drag the title bar to move the windows or resize them from the bottom right corner.</p>
|
||||
<hr />
|
||||
<p><strong>You can download and edit this template freely as long as you leave a visible link to HTML5-Templates.com</strong></p>
|
||||
</div>
|
||||
|
||||
<div id="taskbar">
|
||||
</div>
|
||||
|
||||
<div id="icons">
|
||||
<a class="openWindow" data-id="0">Open first</a>
|
||||
<a class="openWindow" data-id="1">Open second</a>
|
||||
<a class="openWindow" data-id="2">Open third</a>
|
||||
<a class="openWindow" data-id="3">Welcome screen</a>
|
||||
</div>
|
||||
<a href="https://html5-templates.com/" rel="nofollow" target="_blank" id="templateLink">© HTML5-Templates.com</a>
|
||||
<!-- You can use this template freely if you leave a visible link to HTML5-Templates.com -->
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
|
||||
body{line-height:1}
|
||||
h1 {font-size: 1.5em;margin-bottom: 10px;}
|
||||
p{font-size: 1em;line-height: 1.3em;margin-bottom: 10px;}
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
|
||||
nav ul{list-style:none}
|
||||
blockquote,q{quotes:none}
|
||||
blockquote:before,blockquote:after,q:before,q:after{content:none}
|
||||
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
|
||||
ins{background-color:#ff9;color:#000;text-decoration:none}
|
||||
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
|
||||
del{text-decoration:line-through}
|
||||
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
|
||||
table{border-collapse:collapse;border-spacing:0}
|
||||
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
|
||||
input,select{vertical-align:middle}
|
||||
|
||||
#desktop {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #CCC;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.window {
|
||||
position: absolute;
|
||||
border: 2px solid #000;
|
||||
background: #EEE;
|
||||
border-radius: 5px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.window.closed {
|
||||
display: none;
|
||||
}
|
||||
.window.minimizedWindow {
|
||||
display: none;
|
||||
}
|
||||
.window.fullSizeWindow {
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
left: 0 !important;
|
||||
border-radius: 0;
|
||||
bottom: 32px !important;
|
||||
}
|
||||
.fullSizeWindow .ui-resizable-handle {
|
||||
display: none;
|
||||
}
|
||||
.windowHeader {
|
||||
background-color: #b7b7e0;
|
||||
text-align: right;
|
||||
border-bottom: 2px solid #000;
|
||||
padding: 2px;
|
||||
cursor: move;
|
||||
height: 28px;
|
||||
}
|
||||
.activeWindow .windowHeader {
|
||||
background-color: #8888d6;
|
||||
}
|
||||
.windowHeader > span {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border: 2px solid #000;
|
||||
margin-left: 4px;
|
||||
font-size: 19px;
|
||||
padding: 2px 10px;
|
||||
font-family: "Arial Black", Gadget, sans-serif;
|
||||
border-radius: 5px;
|
||||
line-height: 20px;
|
||||
width: 12px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.windowHeader > span:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
.windowHeader > span.winclose:hover {
|
||||
background: #f15454;
|
||||
}
|
||||
.windowHeader > span > span {
|
||||
display: inline-block;
|
||||
height: 8px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 10px;
|
||||
}
|
||||
.winminimize > span {
|
||||
border-bottom: 3px solid #000;
|
||||
}
|
||||
.winmaximize > span {
|
||||
border: 2px solid #000;
|
||||
border-top: 3px solid #000;
|
||||
}
|
||||
.winmaximize > span:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
.fullSizeWindow .winmaximize > span:nth-child(1) {
|
||||
margin: 2px 0 0 -4px;
|
||||
}
|
||||
.fullSizeWindow .winmaximize > span:nth-child(2) {
|
||||
display: inline-block;
|
||||
top: 3px;
|
||||
left: 12px;
|
||||
}
|
||||
.wincontent {
|
||||
padding: 10px;
|
||||
min-width: 200px;
|
||||
min-height: 140px;
|
||||
border: 2px solid #000;
|
||||
margin: 2px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
.windowHeader > strong {
|
||||
float: left;
|
||||
margin: 0px 3px 0 10px;
|
||||
line-height: 29px;
|
||||
font-size: 17px;
|
||||
}
|
||||
.taskbarPanel {
|
||||
display: inline-block;
|
||||
border: 2px solid #000;
|
||||
border-radius: 5px;
|
||||
line-height: 24px;
|
||||
margin: 2px 0 0 10px;
|
||||
font-size: 17px;
|
||||
padding: 0 10px;
|
||||
background: #CCC;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
.taskbarPanel.activeTab {
|
||||
background: #FFF;
|
||||
}
|
||||
.taskbarPanel.minimizedTab {
|
||||
background: #AAA;
|
||||
}
|
||||
.taskbarPanel.minimizedTab:hover {
|
||||
background: #DDD;
|
||||
}
|
||||
.taskbarPanel.closed {
|
||||
display: none;
|
||||
}
|
||||
#taskbar {
|
||||
position: absolute;
|
||||
height: 32px;
|
||||
border-top: 2px solid #000;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #EEE;
|
||||
}
|
||||
#icons {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
#icons a {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
#icons a:hover {
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
}
|
||||
#templateLink {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
color: #30478c;
|
||||
}
|
||||
|
||||
/*Demo styles BEGIN*/
|
||||
#window0 { top: 20px; left: 240px;}
|
||||
#window1 { top: 400px; left: 120px;}
|
||||
#window2 { top: 250px; left: 300px;}
|
||||
#window3 { top: 125px; left: 420px;}
|
||||
#window0 .wincontent { width: 660px; height: 400px; }
|
||||
#window1 .wincontent { width: 500px; height: 300px; }
|
||||
#window2 .wincontent { width: 400px; height: 350px; }
|
||||
#window3 .wincontent { width: 400px; height: 350px; }
|
||||
@media screen and (max-width:960px){
|
||||
#window0 { left: 10px; }
|
||||
#window3 { left: 50px; }
|
||||
}
|
||||
@media screen and (max-width:770px){
|
||||
#window0 .wincontent { width: 460px; }
|
||||
#window2 { left: 100px; }
|
||||
#window1 { top: 190px; left: -5px; }
|
||||
}
|
||||
@media screen and (max-width:540px){
|
||||
#window0 .wincontent { width: 230px; height: 200px; }
|
||||
#window3 .wincontent {
|
||||
width: 275px;
|
||||
height: auto;
|
||||
}
|
||||
#window3 { top: 9px; left: 10px; }
|
||||
#window2 { left: -118px; }
|
||||
#window1 .wincontent { width: auto; height: 300px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
</html>
|
||||
BIN
dressup/hat1.png
Normal file
BIN
dressup/hat1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
dressup/hat2.png
Normal file
BIN
dressup/hat2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
BIN
dressup/hat3.png
Normal file
BIN
dressup/hat3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
BIN
dressup/hat4.png
Normal file
BIN
dressup/hat4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
dressup/heartglasses.png
Normal file
BIN
dressup/heartglasses.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
dressup/heartie.png
Normal file
BIN
dressup/heartie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
BIN
dressup/image1.png
Normal file
BIN
dressup/image1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 765 KiB |
BIN
dressup/purpleshades.png
Normal file
BIN
dressup/purpleshades.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
dressup/rainbowtie.png
Normal file
BIN
dressup/rainbowtie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
145
dressup/script.js
Normal file
145
dressup/script.js
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
/*################################################################################
|
||||
##################################################################################
|
||||
########## ###########
|
||||
########## ###########
|
||||
########## Windows Template by ###########
|
||||
########## https://html5-templates.com/ ###########
|
||||
########## ###########
|
||||
########## All rights reserved. ###########
|
||||
########## ###########
|
||||
##################################################################################
|
||||
################################################################################*/
|
||||
|
||||
var i = 0,
|
||||
minimizedWidth = new Array,
|
||||
minimizedHeight = new Array,
|
||||
windowTopPos = new Array,
|
||||
windowLeftPos = new Array,
|
||||
panel,
|
||||
id;
|
||||
|
||||
function adjustFullScreenSize() {
|
||||
$(".fullSizeWindow .wincontent").css("width", (window.innerWidth - 32));
|
||||
$(".fullSizeWindow .wincontent").css("height", (window.innerHeight - 98));
|
||||
}
|
||||
function makeWindowActive(thisid) {
|
||||
$(".window").each(function() {
|
||||
$(this).css('z-index', $(this).css('z-index') - 1);
|
||||
});
|
||||
$("#window" + thisid).css('z-index',1000);
|
||||
$(".window").removeClass("activeWindow");
|
||||
$("#window" + thisid).addClass("activeWindow");
|
||||
|
||||
$(".taskbarPanel").removeClass('activeTab');
|
||||
|
||||
$("#minimPanel" + thisid).addClass("activeTab");
|
||||
}
|
||||
|
||||
function minimizeWindow(id){
|
||||
windowTopPos[id] = $("#window" + id).css("top");
|
||||
windowLeftPos[id] = $("#window" + id).css("left");
|
||||
|
||||
$("#window" + id).animate({
|
||||
top: 800,
|
||||
left: 0
|
||||
}, 200, function() { //animation complete
|
||||
$("#window" + id).addClass('minimizedWindow');
|
||||
$("#minimPanel" + id).addClass('minimizedTab');
|
||||
$("#minimPanel" + id).removeClass('activeTab');
|
||||
});
|
||||
}
|
||||
|
||||
function openWindow(id) {
|
||||
if ($('#window' + id).hasClass("minimizedWindow")) {
|
||||
openMinimized(id);
|
||||
} else {
|
||||
makeWindowActive(id);
|
||||
$("#window" + id).removeClass("closed");
|
||||
$("#minimPanel" + id).removeClass("closed");
|
||||
}
|
||||
}
|
||||
function closeWindwow(id) {
|
||||
$("#window" + id).addClass("closed");
|
||||
$("#minimPanel" + id).addClass("closed");
|
||||
}
|
||||
|
||||
function openMinimized(id) {
|
||||
$('#window' + id).removeClass("minimizedWindow");
|
||||
$('#minimPanel' + id).removeClass("minimizedTab");
|
||||
makeWindowActive(id);
|
||||
|
||||
$('#window' + id).animate({
|
||||
top: windowTopPos[id],
|
||||
left: windowLeftPos[id]
|
||||
}, 200, function() {
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
$(".window").each(function() { // window template
|
||||
$(this).css('z-index',1000)
|
||||
$(this).attr('data-id', i);
|
||||
minimizedWidth[i] = $(this).width();
|
||||
minimizedHeight[i] = $(this).height();
|
||||
windowTopPos[i] = $(this).css("top");
|
||||
windowLeftPos[i] = $(this).css("left");
|
||||
$("#taskbar").append('<div class="taskbarPanel" id="minimPanel' + i + '" data-id="' + i + '">' + $(this).attr("data-title") + '</div>');
|
||||
if ($(this).hasClass("closed")) { $("#minimPanel" + i).addClass('closed'); }
|
||||
$(this).attr('id', 'window' + (i++));
|
||||
$(this).wrapInner('<div class="wincontent"></div>');
|
||||
$(this).prepend('<div class="windowHeader"><strong>' + $(this).attr("data-title") + '</strong><span title="Minimize" class="winminimize"><span></span></span><span title="Maximize" class="winmaximize"><span></span><span></span></span><span title="Close" class="winclose">x</span></div>');
|
||||
});
|
||||
|
||||
$("#minimPanel" + (i-1)).addClass('activeTab');
|
||||
$("#window" + (i-1)).addClass('activeWindow');
|
||||
|
||||
$( ".wincontent" ).resizable(); // resizable
|
||||
$( ".window" ).draggable({ cancel: ".wincontent" }); // draggable
|
||||
|
||||
|
||||
$(".window").mousedown(function(){ // active window on top (z-index 1000)
|
||||
makeWindowActive($(this).attr("data-id"));
|
||||
});
|
||||
|
||||
$(".winclose").click(function(){ // close window
|
||||
closeWindwow($(this).parent().parent().attr("data-id"));
|
||||
});
|
||||
|
||||
$(".winminimize").click(function(){ // minimize window
|
||||
minimizeWindow($(this).parent().parent().attr("data-id"));
|
||||
});
|
||||
|
||||
$(".taskbarPanel").click(function(){ // taskbar click
|
||||
id = $(this).attr("data-id");
|
||||
if ($(this).hasClass("activeTab")) { // minimize if active
|
||||
minimizeWindow($(this).attr("data-id"));
|
||||
} else {
|
||||
if ($(this).hasClass("minimizedTab")) { // open if minimized
|
||||
openMinimized(id);
|
||||
} else { // activate if inactive
|
||||
makeWindowActive(id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(".openWindow").click(function(){ // open closed window
|
||||
openWindow($(this).attr("data-id"));
|
||||
});
|
||||
|
||||
$(".winmaximize").click(function(){
|
||||
if ($(this).parent().parent().hasClass('fullSizeWindow')) { // minimize
|
||||
|
||||
$(this).parent().parent().removeClass('fullSizeWindow');
|
||||
$(this).parent().parent().children(".wincontent").height(minimizedHeight[$(this).parent().parent().attr("data-id")]);
|
||||
$(this).parent().parent().children(".wincontent").width(minimizedWidth[$(this).parent().parent().attr("data-id")]);
|
||||
} else { // maximize
|
||||
$(this).parent().parent().addClass('fullSizeWindow');
|
||||
|
||||
minimizedHeight[$(this).parent().parent().attr('data-id')] = $(this).parent().parent().children(".wincontent").height();
|
||||
minimizedWidth[$(this).parent().parent().attr('data-id')] = $(this).parent().parent().children(".wincontent").width();
|
||||
|
||||
adjustFullScreenSize();
|
||||
}
|
||||
});
|
||||
adjustFullScreenSize();
|
||||
});
|
||||
BIN
dressup/wig.png
Normal file
BIN
dressup/wig.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
158
dressup2.html
Normal file
158
dressup2.html
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The web site of alienhospital</title>
|
||||
<!-- The style.css file allows you to change the look of your web pages.
|
||||
If you include the next line in all your web pages, they will all share the same look.
|
||||
This makes it easier to make new pages for your site. -->
|
||||
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
.dragme {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#fieldheader {
|
||||
width: 930px;
|
||||
font-size:15px;
|
||||
font-family: "Comic Sans MS", sans-serif;
|
||||
color: #FFFFFF/*white 0*/;
|
||||
text-align: center;
|
||||
border-radius: 25px 25px 0 0;
|
||||
padding: 10px 0;
|
||||
margin: 10px auto 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
#field {
|
||||
height: 500px;
|
||||
width: 930px;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
align-content: right;
|
||||
}
|
||||
|
||||
#fieldfooter {
|
||||
|
||||
width: 930px;
|
||||
font-size:15px;
|
||||
font-family: "Comic Sans MS", sans-serif;
|
||||
color: #FFFFFF/*white 0*/;
|
||||
text-align: center;
|
||||
border-radius: 0 0 25px 25px;
|
||||
padding: 10px 0;
|
||||
margin: 0 auto 10px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<center><a href="/homepage">home</a><br>
|
||||
this does not work on mobile devices. <br><br>
|
||||
<div id="field" style="background:url('/dressup/bg.jpg'); height: 900px; width: 930px; text-align: right;">
|
||||
<!-- hats -->
|
||||
|
||||
<div class="dragme">
|
||||
<img src="/dressup/hat1.png" width="100px" style="margin-right: -50px;">
|
||||
</div>
|
||||
<div class="dragme">
|
||||
<img src="/dressup/hat2.png" width="100px" style="margin-right: -50px;">
|
||||
</div>
|
||||
<div class="dragme">
|
||||
<img src="/dressup/hat3.png" width="100px" style="margin-right: -50px;">
|
||||
</div>
|
||||
|
||||
<div class="dragme">
|
||||
<img src="/dressup/hat4.png" width="100px" style="margin-right: -50px;">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="dragme">
|
||||
<img src="/dressup/heartglasses.png" width="100px" style="margin-right: -50px;">
|
||||
</div>
|
||||
|
||||
<div class="dragme">
|
||||
<img src="/dressup/purpleshades.png" width="100px" style="margin-right: -50px;">
|
||||
</div>
|
||||
<div class="dragme">
|
||||
<img src="/dressup/wig.png" width="230px" style="margin-right: -50px;">
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
<!-- bowties -->
|
||||
<div class="dragme">
|
||||
<img src="/dressup/rainbowtie.png" width="100px" style="margin-right: -75px;">
|
||||
</div>
|
||||
<div class="dragme">
|
||||
<img src="/dressup/heartie.png" width="100px" style="margin-right: -50px;">
|
||||
</div>
|
||||
|
||||
|
||||
<!-- shirts --> <br><br><br><br><br><br><br><br>
|
||||
<div class="dragme">
|
||||
<img src="/dressup/dmshirts.png" width="300px" style="margin-left: -75px;">
|
||||
</div>
|
||||
<div class="dragme">
|
||||
<img src="/dressup/dadshirt.png" width="300px" style="margin-right: -75px;">
|
||||
</div>
|
||||
<div class="dragme">
|
||||
<img src="/dressup/cshirt2.png" width="300px" style="margin-right: -75px;">
|
||||
</div>
|
||||
|
||||
<div class="dragme">
|
||||
<img src="/dressup/britneyshirt.png" width="300px" style="margin-right: -75px;">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="fieldfooter" style="background-color: darkred;"><a href="https://sillybeanies.neocities.org/fun/dressups/dressupindex">code source!!</a></div>
|
||||
<script>
|
||||
|
||||
$(function() {
|
||||
$( ".dragme" ).draggable({
|
||||
containment: 'parent',
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
background-image: url('https://i.ibb.co/m50KTwSN/rob-laughter-WW1js-In-Xgw-M-unsplash.jpg');
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#tns {
|
||||
margin: 0 auto;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.dragme {
|
||||
position: relative;
|
||||
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#draggable {
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
100
dressuptns.html
Normal file
100
dressuptns.html
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The web site of alienhospital</title>
|
||||
<!-- The style.css file allows you to change the look of your web pages.
|
||||
If you include the next line in all your web pages, they will all share the same look.
|
||||
This makes it easier to make new pages for your site. -->
|
||||
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<center><a href="/homepage">home</a><br>
|
||||
<div id="tns"><img src="/dressup/image1.png" width="400px"></div>
|
||||
|
||||
<h1 style="color: white;"> dress up the spirit!!</h1></center>
|
||||
|
||||
<div id="draggable">
|
||||
<img src="/dressup/heartglasses.png" width="150px" class="dragme"> <img src="/dressup/purpleshades.png" width="150px" class="dragme"> <img src="/dressup/rainbowtie.png" width="150px" class="dragme"> <img src="/dressup/heartie.png" width="150px" class="dragme"><img src="/dressup/hat1.png" width="150px" class="dragme"> <img src="/dressup/hat2.png" width="100px" class="dragme"> <img src="/dressup/hat3.png" width="100px" class="dragme"> <img src="/dressup/hat4.png" width="100px" class="dragme">
|
||||
<div id="shirt" class="dragme"><img src="/dressup/dmshirt.png" width="385px" class="dragme"></div>
|
||||
<script>
|
||||
function startDrag(e) {
|
||||
// determine event object
|
||||
if (!e) {
|
||||
var e = window.event;
|
||||
}
|
||||
if(e.preventDefault) e.preventDefault();
|
||||
|
||||
// IE uses srcElement, others use target
|
||||
var targ = e.target ? e.target : e.srcElement;
|
||||
|
||||
if (targ.className != 'dragme') {return};
|
||||
// calculate event X, Y coordinates
|
||||
offsetX = e.clientX;
|
||||
offsetY = e.clientY;
|
||||
|
||||
// assign default values for top and left properties
|
||||
if(!targ.style.left) { targ.style.left='0px'};
|
||||
if (!targ.style.top) { targ.style.top='0px'};
|
||||
|
||||
// calculate integer values for top and left
|
||||
// properties
|
||||
coordX = parseInt(targ.style.left);
|
||||
coordY = parseInt(targ.style.top);
|
||||
drag = true;
|
||||
|
||||
// move div element
|
||||
document.onmousemove=dragDiv;
|
||||
return false;
|
||||
|
||||
}
|
||||
function dragDiv(e) {
|
||||
if (!drag) {return};
|
||||
if (!e) { var e= window.event};
|
||||
var targ=e.target?e.target:e.srcElement;
|
||||
// move div element
|
||||
targ.style.left=coordX+e.clientX-offsetX+'px';
|
||||
targ.style.top=coordY+e.clientY-offsetY+'px';
|
||||
return false;
|
||||
}
|
||||
function stopDrag() {
|
||||
drag=false;
|
||||
}
|
||||
window.onload = function() {
|
||||
document.onmousedown = startDrag;
|
||||
document.onmouseup = stopDrag;
|
||||
}
|
||||
</script>
|
||||
</div></div>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
background-image: url('https://i.ibb.co/m50KTwSN/rob-laughter-WW1js-In-Xgw-M-unsplash.jpg');
|
||||
background-size: cover;
|
||||
|
||||
}
|
||||
|
||||
#tns {
|
||||
margin: 0 auto;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.dragme {
|
||||
position: relative;
|
||||
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#draggable {
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
BIN
elouisasitebutton.png
Normal file
BIN
elouisasitebutton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
19
entermyworld.html
Normal file
19
entermyworld.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The web site of alienhospital</title>
|
||||
<!-- The style.css file allows you to change the look of your web pages.
|
||||
If you include the next line in all your web pages, they will all share the same look.
|
||||
This makes it easier to make new pages for your site. -->
|
||||
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ENTER THE ALIEN HOSPITAL?</h1>
|
||||
|
||||
CREDITS:
|
||||
<br>
|
||||
<a href="https://sketchfab.com/3d-models/uss-orville-ecv-197wip-8588a0617f434ceaa335b7958b4f02c5">orville model</a>: This work is based on "USS Orville (ECV-197)(WIP)" (https://sketchfab.com/3d-models/uss-orville-ecv-197wip-8588a0617f434ceaa335b7958b4f02c5) by Nightshade3325 (https://sketchfab.com/nightshade3325) licensed under CC-BY-NC-4.0 (http://creativecommons.org/licenses/by-nc/4.0/)
|
||||
</body>
|
||||
</html>
|
||||
167
essays/bfe.html
Normal file
167
essays/bfe.html
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>alien</title>
|
||||
<style>
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-image: url('/stars5.gif');
|
||||
}
|
||||
|
||||
.sitemap {
|
||||
border: 3px solid;
|
||||
padding: 5px;
|
||||
width: 600px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
height: 600px;
|
||||
font-size: 19px;
|
||||
font-family: times;
|
||||
margin: 0 auto;
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #000;
|
||||
}
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
}
|
||||
#fuck {
|
||||
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
|
||||
font-style: italic;
|
||||
font-size:2em;
|
||||
font-weight:bold;
|
||||
color: #fff;
|
||||
-webkit-animation: pop 1s ease-in-out infinite alternate;
|
||||
animation: pop 1s ease-in-out infinite alternate;
|
||||
-moz-animation: pop 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pop {
|
||||
from {
|
||||
transform:scale(0.95)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform:scale(1)
|
||||
}
|
||||
|
||||
to {
|
||||
transform:scale(0.95)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes pop {
|
||||
from {
|
||||
-webkit-transform:scale(0.95)
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform:scale(1)
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform:scale(0.95)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body><br><center><a href="/homepage" style="color:#fff;">home</a>
|
||||
<h1>Agnes's Super Duper Unofficial Guide To Multifandom Exchanges</h1></div>
|
||||
<div class="sitemap"><p>ON FANDOM EXCHANGE NORMS</p>
|
||||
<p>I haven't been doing fanwork exchanges for very long. I did my first this January, Candy Hearts Exchange, and then immediately launched into High Adrenaline Exchange (the one where you have two weeks to write 10 thousand words). I have, since then, apparently made the missteps of:</p>
|
||||
<p>-Including a reason for why I defaulted in an email (my tablet pen broke)</p>
|
||||
<p>-asking dumb questions/having memory issues about rules</p>
|
||||
<p>Exchange norms in fandom spaces are. Interesting. Now, let me say this: I am completely, 100% of the opinion that most people in exchange spaces mean well and just want everybody to have a good time. But Bangs, Fests, and Exchanges (as it is called on the anonymous fan forum Fail Fandom Anon) is big (2k members in the main discord server for the topic, I believe), and there are bound to be issues in any big space. Most of them arise from people unaware of unspoken exchange norms/etiquette. Recently in the the topic of unspoken exchange norms came up in aforementioned discord server, and it got me thinking about how there's no big write-up of fandom exchange norms for people new to the exchange scene —- something I massively would've benefitted from in my early days. I thought about doing one, but I came across some issues in the process of actually planning this out.</p>
|
||||
<p>First, like I said, I've only been doing exchanges for a very short period of time. When I first got into exchanges, I had a massive hyperfixation on them, where they were all I thought about every single day. I ate, slept, breathed exchanges and did as many as I possibly could, pre-planned nominations and 3k-word-long letters months before exchanges began, and a lot of other subjectively-unhinged behavior surrounding exchanges. But this still does not compare to someone who has been hanging out in BFE spaces for multiple years. How much did I really know?</p>
|
||||
<p>And then I realized: yes, BFE spaces are big, like I said before. Exchange spaces are massive, and there are multiple subpockets of the multifandom exchange scene, too—-apparently Minecraft Youtube fandom had its own giant Battleship exchange recently—-so how could I possibly come up with a guide to all of it? It would be impossible to write up a comprehensive guide that would help every single person, which was the original vision I had.</p>
|
||||
<p>I realized that if I wanted to go through with this project, I would have to make it clear that it's not comprehensive and is highly subjective because it is based on my own personal experiences and mindset. It is not entirely based on that - like, I'm not just making this stuff up based on nothing; it would incorporate all my months of experience in BFE spaces as well as (many, many) conversations I've had with seasoned BFE participants about exchange conduct, etiquette, and norms - but it still would be, you know, one person's passion project. But I thought that might still be doable, you know?</p>
|
||||
<p>SO, long 500 word introduction aside, here's…</p>
|
||||
<p><strong>Agnes's Super Duper Unofficial Guide To <del>Not Getting Yourself Flamed On Anonymous Fandom Forums</del> MultiFandom Exchange Norms & Etiquette</strong></p>
|
||||
<p>Here are some terms it might help you to know when going through exchange spaces.</p>
|
||||
<p><strong>anon, anon period</strong>: Most exchanges require works to be anonymous for a certain period of time, beginning at the moment of which you receive your assignment to the end of the anon period/start of the creator reveals phase. The exchange interface will automatically do this for you. <strong>This means that until the creator reveals phase, you cannot discuss who your recipient is or what you're writing for them in a public space.</strong></p>
|
||||
<p><strong>beta</strong>: someone who reads over your work before you post it to check for spelling and grammar errors, and sometimes characterization, etc.</p>
|
||||
<p><strong>recipient, recip</strong>: Who you're assigned to write for.</p>
|
||||
<p><strong>deanoning</strong>: since 99.9% of exchanges have an anon period (see above), discussing your works, offers, or recipient in a public space is referred to as deanoning, and is very, very frowned upon, as anonyminity is most of the time central to exchange functionality.</p>
|
||||
<p><strong>noms, nominations:</strong> Refers to the nomination phase, which is when we add fandoms, ships, characters, and freeform tags to a tagset that will be the basis of the exchange. Think of it like a database - the requests you make in an exchange can take any tag from this database, but most of the time, it does <strong>not</strong> take tags from outside of this specific database (tagset), so in order to request something in an exchange, you must nominate the tag into the tagset. I go into how you do this later. (Hint: many exchanges are themed, meaning they will only accept nominations of a certain eligibility. Be sure to check!)</p>
|
||||
<p><strong>disambugating</strong>: generally, when nominating things, most exchanges require you to <strong>disambugate</strong> your nominations. This typically means adding the fandom they're from in parentheses after the ship/character/applicable freeform tag. Some examples: Heinz Doofenshmirtz (Phineas & Ferb), Phineas Flynn/Isabella Garcia-Shapiro (Phineas & Ferb), Worldbuilding: O.W.C.A Recruitment (Phineas & Ferb), Waterbending (AtLA).</p>
|
||||
<p><strong>nominations query</strong>: When nominating, sometimes the exchange mods will need to ask questions about certain nominations, or inform the nominators of some issue with their submission. Since nominations are always anonymous, they typically do this via a Dreamwidth (or whatever social media they run the info off of) post called a Nom Query post.</p>
|
||||
<p><strong>signups</strong>: The period in which you can sign up to the exchange.</p>
|
||||
<p><strong>requests</strong>: The things you want to receive in an exchange. You input these requests on the first part of the signup form, which will usually be customized to the specifics of each exchange. You can request pretty much anything, as long as it is in the tagset and relevant to the exchange theme (if applicable). Some exchanges have a fandom minimum, which means you must request a certain amount of unique fandoms to be garuanteed a gift. Some will not require you to request multiple fandoms and will allow a single fandom signup, and sometimes exchanges will withhold gift gaurantees from single fandom signups. The ao3 interface allows a maximum of ten requests.</p>
|
||||
<p><strong>DNW</strong>: Stands for "do not wants"—a list of things you do not want to receive in a gift that your creator <strong>must</strong> 100% avoid including.</p>
|
||||
<p><strong>DNM</strong>: do not match request. A request made to the mods of an exchange typically by email that you do not match with a certain participant(s). <strong>You never have to include a reason, and most mods will prefer that you don't include a reason. All good mods take every DNM request seriously.</strong> You can do this for any reason. Many mods will ask what you wish them to do if your DNM request tries to treat you or pick up your pinch hit (e.g. tell them you've DNMed them). Not all exchanges allow these.</p>
|
||||
<p><strong>matching</strong>: Exchanges match you with a recipient based on your offers. You are matched to a gifter based on your requests.</p>
|
||||
<p><strong>unmatchable</strong>: This means no one wants what you're offering. Mods will typically contact you via the email you signed up to Ao3 for and ask if you want to add any offers. They typically have a limited response period before they move on and send out assignments (commonly 12 or 24 hours), so be sure to check the email you signed up for frequently.</p>
|
||||
<p><strong>pinch hits, PH</strong>: If you are sent for an <strong>initial pinch hit</strong>, this means no one offered what you requested. Do not fear, someone will pick your pinch hit up eventually! People very fequently pick up new fandoms for exchange PHs. This is neutral. When your pinch hit is claimed, it means someone has offered to write your pinch hit! To claim a pinch hit, you typically comment on a Dreamwidth post (comments are screened in these cases, so only the mods can see them) with your ao3 name and email address, OR you email them with the same information. <strong>Post-deadline pinch hits</strong> are pinch hits that have come out after the assignment due date, and the exchange will not typically reveal gifts until all pinch hits have been turned in. They are given their own due dates. <strong>Emergency pinch hits</strong> typically mean (I think) the gift did not fulfill an exchange requirement for whatever reason (common ones: gift included a DNW, was spitefic, did not include requested character/ship/freeform, was below minimum, was incomplete, was deleted, did not fit exchange theme enough).</p>
|
||||
<p><strong>minimum</strong>: The minimum amount of words required for your gift. For example, a 500 word minimum means your gift must be 500 words or more. Art minimums vary, but common ones are that it must be of a quality and effort level you'd be happy to receive as a gift yourself. Other medium minimums (what a tongue twister!) vary as well. <strong>High minimum exchanges</strong> are exchanges that typically have minimums of 5 thousand or 10 thousand words. <strong>Low minimum exchanges</strong> typically refer to exchanges with minimums under 1000 words, but especially ones with a minimum of 300-500 words. Maximums are not common but do happen sometimes, like with drabble exchanges.</p>
|
||||
<p><strong>permissions statement</strong>: A statement in your profile that says what people can or cannot do with your work. For example: "You may podfic or create fanart as long as you link back to me", "Do not redistribute", "Do not feed to generative AI".</p>
|
||||
<p><strong>recursive fandom</strong>: Fanworks of fanworks. Like writing a fic about a fic or original fannish piece you or someone else wrote.</p>
|
||||
<p><strong>offers</strong>: what you are willing to write as a gift for someone else in the exchange you're participating in. These are secret! You can view how many people have signed up to offer a specific fandom, but you cannot view specifically who. In addition, discussing what you plan to offer is typically considered de-anoning.</p>
|
||||
<p><strong>assignment, mint</strong>: The request that you are assigned to write! You will be assigned a request based on your offers. You can write anything your requester has asked for, even if you matched on only one request.</p>
|
||||
<p><strong>reveals, collection opens:</strong> This is when gifts are revealed! <strong>Before this point, gifts are unviewable.</strong> This means you cannot read them or see who wrote them until the collection opens and reveals are done.</p>
|
||||
<p><strong>gift shaking</strong>: You can, however, see WHAT YOUR GIFT CONTAINS. Sort of. An overview. This can be done one of two ways: on the gift page via <a href="https://greasyfork.org/en/scripts/475546-ao3-shake-gift">a userscript</a>, or by going to fandoms on the collection page, scrolling down until you find one of the fandoms you requested, and looking at the filters tab under fandom, relationship, character, or additional tag. The second method will not work if you have requested fandoms that have multiple works for them in the collection. Neither method will work if the exchange is moderated and your gift has not been accepted into the collection yet.</p>
|
||||
<p><strong>treat, treating, treated, extra gift:</strong> Gifts made for you by someone who was not assigned as your main gifter. You cannot tell what is the main assignment and what is a treat unless the author has indicated it is a treat on the work page.</p>
|
||||
<p><strong>gift guarantee</strong>: If an exchange has a gift guarantee, it means that if you do not have a gift in the collection by the time of reveals, reveals will be delayed until you are assigned a <strong>pinch hitter.</strong> Treats often do not count for gift guarantees; you typically must have an Officially Assigned Gifter before reveals can be done, even if someone has already treated you.</p>
|
||||
<p><strong>EAD, exchanges after dark</strong>: The "main" and largest exchange Discord server.</p>
|
||||
<p><strong>creator reveals</strong>: The end of the anon period. You can say the work you posted is yours now! Yay!</p>
|
||||
<p><strong>AO3 app</strong>: an external website, <a href="https://autoao3app.fandom.tools/#/">https://autoao3app.fandom.tools/#/</a>, that allows you to easily search for, bookmark and sort through exchange and prompt meme requests.</p>
|
||||
<p><strong>prompt meme</strong>: A different kind of collection challenge where you leave prompts and people can claim them. We won't be going into this much.</p>
|
||||
<p><strong>podfic</strong>: An audio-only medium in which an actor or podficcer records themselves reading a fic out loud.</p>
|
||||
<p><strong>mediums</strong>: The medium in which you can create a gift. Different exchanges have different allowed mediums. [Fic in a Box](<a href="https://ficinabox.dreamwidth.org/">https://ficinabox.dreamwidth.org/</a>), for example, allows an insane amount of mediums. Fic is the default in most cases, but art, comics, and podfic are commonly included as well.</p>
|
||||
<p><strong>defaulting</strong>: If you cannot complete your assignment FOR ANY REASON, you hit the default button on the AO3 interface. **You do not have to explain why you default and mods prefer that you do not explain.** Assignments that are defaulted on will be sent out for pinch hits. Some exchanges have a deadline where, if you default by that time, you must complete a gift or request in order to participate in the next round, but this is not that common.</p>
|
||||
<p><strong>extension</strong>: If you need an extension (extra time to complete an assignment), you may ask the mods for an extension (via email or comment-screened Dreamwidth post), but <strong>not all exchanges grant them</strong>. Read the rules first before requesting.</p>
|
||||
<p><strong>FFA, fail fandom anon</strong>: a Dreamwidth community where anonymous discussions are had about fandom, and which BFE participants commonly frequent and create threads for. It's anonymous, so.. you can imagine the kind of things that go on there.</p>
|
||||
<p><strong>Dreamwidth</strong>: an online journaling service and Livejournal code fork that is where information for many exchanges are hosted.</p>
|
||||
<p><strong>letter</strong>: a letter of likes, interests, thoughts on requests, etc that you can include in your signup to allow your gifter to get a better idea of what you'd like in a gift. Commonly hosted on Dreamwidth Tumblr or Google docs, but I like to use notion.</p>
|
||||
<h1 id="etiquette">Etiquette</h1>
|
||||
<ul>
|
||||
<li><p>Never harass another participant, especially over their interests. This is a good way to get yourself banned and hated on in FFA.</p>
|
||||
</li>
|
||||
<li><p>ODAO, meaning Optional Details are Optional—-your recipient may include a list of things they like, or a letter, but these are optional and as a creator you are not bound by them. You are only required to not include any of their DNWs.</p>
|
||||
</li>
|
||||
<li><p>Additionally, as a requester, do not attempt to "box in" or force your creator to make a specific kind of work by utilizing your DNWs (e.g. no DNW that's, like, "DNW fics where Perry the Platypus isn't carrying Doof's hybrid babies").</p>
|
||||
</li>
|
||||
<li><p>When you need a clarification on a recipient's DNW or likes or something, you <strong>must</strong> ask through the mods via email. They will contact your recipient for you. You cannot contact the recipient directly, unless it is an exchange with no anon period. This is deanoning and Bad.</p>
|
||||
</li>
|
||||
<li><p>Kinkshaming is never cool; see first entry. Also referred to as KINKTOMATO/YKINMKATO (Your Kink Is Not My Kink And That's Okay).</p>
|
||||
</li>
|
||||
<li><p>Don't Like, Don't Read. Simple as.</p>
|
||||
</li>
|
||||
<li><p>Never say something in your signup like, "This is ordered by which fandoms I'd like to receive most!" When you signup you are open to receiving anything in your signup equally. If you don't want something, don't request it.</p>
|
||||
</li>
|
||||
<li><p>Never say something in your DNW section like, "DNW: Phineas/Ferb (eww!!)" or "DNW: Hanahaki (ugh i HATE that trope)" or "DNW: piss kink (ew who could ever be into that LOL)". Basically, don't judge. Actually, don't explain why you DNW something at all.</p>
|
||||
</li>
|
||||
<li><p>Typically most exchanges ask that you ask questions about the exchange on Dreamwidth or email, and not over Discord.</p>
|
||||
</li>
|
||||
<li><p>Don't, like, trauma dump to mods, and don't lie to them. They receive a lot of weird emails, don't be that guy.</p>
|
||||
</li>
|
||||
<li><p>Don't get in over your head or overwhelmed by signing up for too many exchanges.</p>
|
||||
</li>
|
||||
<li><p>NEVER sign up for an exchange with the intention of defaulting so you get a gift without making something. Ever. If you default later, that's fine, but doing so with this deliberate intention is another good way to get banned.</p>
|
||||
</li>
|
||||
<li><p>Don't try to pick up a PH for the same exchange if you've already defaulted on your original assignment. This is one I learned recently.</p>
|
||||
</li>
|
||||
<li><p>If nominating a recursive fandom, you should check that the creator of the piece allows recursive works in their permissions statement.</p>
|
||||
</li>
|
||||
<li><p>Don't use generative AI. Ever. Also don't trace or steal art.</p>
|
||||
</li>
|
||||
<li><p>And most importantly: <strong>READ THE RULES. READ THEM FIRST. READ THE RULES THEN READ THEM AGAIN. THEN READ THEM ONE MORE TIME.</strong></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>That's all I can think of for now. I was also going to include a technical guide to using the interface but I fear I am too lazy.</p>
|
||||
<p>Anyway, as you can see, exchange norms are pretty complex, and I've DEFINTIELY forgotten a few things, too! But I hope this helps someone out there.</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
93
essays/directory.html
Normal file
93
essays/directory.html
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>alien</title>
|
||||
<style>
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-image: url('/stars5.gif');
|
||||
}
|
||||
|
||||
.sitemap {
|
||||
border: 3px solid;
|
||||
padding: 5px;
|
||||
width: 600px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
height: 600px;
|
||||
font-size: 19px;
|
||||
font-family: times;
|
||||
margin: 0 auto;
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #000;
|
||||
}
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
}
|
||||
#fuck {
|
||||
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
|
||||
font-style: italic;
|
||||
font-size:2em;
|
||||
font-weight:bold;
|
||||
color: #fff;
|
||||
-webkit-animation: pop 1s ease-in-out infinite alternate;
|
||||
animation: pop 1s ease-in-out infinite alternate;
|
||||
-moz-animation: pop 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pop {
|
||||
from {
|
||||
transform:scale(0.95)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform:scale(1)
|
||||
}
|
||||
|
||||
to {
|
||||
transform:scale(0.95)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes pop {
|
||||
from {
|
||||
-webkit-transform:scale(0.95)
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform:scale(1)
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform:scale(0.95)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body><br><center><a href="/homepage" style="color:#fff;">home</a>
|
||||
<h1>Essays</h1></div>
|
||||
<div class="sitemap"><br><a href="/essays/tumblrbrain">On Deconstructing "Tumblr Brain" & Learning How To Fucking Have Fun With Media</a>
|
||||
<br>
|
||||
|
||||
| Content warnings: Mentions of child abuse, abuse, and incest.
|
||||
<br><br><a href="/essays/housebound">Houseboundedness & the Small Web</a>
|
||||
|
||||
<br/> <br/>
|
||||
<a href="/essays/bfe">Agnes's Super Duper Unofficial Guide To Multifandom Exchanges</a>
|
||||
<p></p> </div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
672
essays/dni.html
Normal file
672
essays/dni.html
Normal file
|
|
@ -0,0 +1,672 @@
|
|||
<!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 -->
|
||||
<!-- =============================================== -->
|
||||
|
||||
<header>
|
||||
<div class="header-image">
|
||||
<img src="https://i.ibb.co/d4wzWNJw/tumblr-9521a9fc973bc72adeebdf473bee6653-94ca1a4f-540.png" alt="" />
|
||||
</div>
|
||||
<div class="header-content">
|
||||
<div class="header-title"></div>
|
||||
|
||||
<!-- NAVIGATION -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/homepage">Home</a></li>
|
||||
<li><a href="/about">About Me</a></li>
|
||||
<li><a href="/shrines">Shrines</a></li>
|
||||
<li><a href="/resources">Resources</a></li>
|
||||
<li>
|
||||
<strong>More</strong>
|
||||
<ul>
|
||||
<li><a href="/paint">Games - Paint</a></li>
|
||||
<li><a href="/kidpix">Games - Kidpix</a></li>
|
||||
<li><a href="/secrets">Well of Secrets</a></li>
|
||||
<li><a href="/fanworks">Archive of My Fanworks</a></li>
|
||||
<li><a href="/links">Even More Links!</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<main id="content"> <!-- Do NOT remove the ID here -->
|
||||
|
||||
|
||||
|
||||
<!-- =============================================== -->
|
||||
<!-- MAIN CONTENT -->
|
||||
<!-- =============================================== -->
|
||||
|
||||
|
||||
<section>
|
||||
<h1>
|
||||
Do Not Interact: People Who Say "Do Not Interact"
|
||||
</h1>
|
||||
|
||||
On Tumblr & Small web "DNI" lists & performative activism.<br><hr>
|
||||
<center><p>I first saw ‘dni’-type lists pop up on Tumblr around the end of 2016, but it probably started a bit earlier than that. I remember when people would put ‘read my links byf’ on their promo posts (back before we had pinned posts and you could only view a person’s blog via their actual HTML page theme). I remember making my first one. In fact, the archive of one of my old blogs still has my old one up, in which a 15 year old me lists all of his triggers plainly and openly for all to see.</p>
|
||||
<p>I don’t remember seeing DNIs quite so widespread until the past couple of years, but over time they went from "BYF (before you follow)s" - “a way to display information people might need to know before interacting with you” (for example, maybe that you don’t often get social cues and need a bit of help with that, or maybe that you work a lot so might reply a bit late) to “a way to display your stances on discourse-related topics”, to what they are now, which is… basically a list of every group said individual hates, oftentimes including phrases of wishing violence against those groups. And some of these groups definitely deserve hatred, but seeing ‘racist/transphobe/homophobe’ and ‘fan of [fictional ship between adults that has a slight age gap]’ listed on the same page as if violent bigotry and enjoying a tv show are equally bad is very odd to me. This nonchalant comparison, whether intentional or not, says a lot to me about how many individuals view activism.</p>
|
||||
<p>Also: they don't Work. But I think most people with DNI pages do know that. It's not about usefulness, or explaining boundaries---oftentimes it is not about bigotry at all, not at the core, not <i>really</i>. It's about Looking Unproblematic. It's performative.</p>
|
||||
<p>Yay: I stand in solidarity with trans people, including and especially transgender women. Yay: I will always support the transgender community unconditionally. Maybe not yay: a page where you beg transphobes to not interact with you & liken disagreements over fiction to real world atrocities and prejudices that cause genuine life-destroying harm.</P>
|
||||
<p>These days, most social media has a block button that is extremely easy to utilize. I think most app distributors require a blocking feature in order to have social media apps listed. You Can Just Block People. You can also report them if they break the sites TOS.</p>
|
||||
<p>But on here... I have seen an increasing amount of DNI pages posted to websites on Neocities, and I honestly think that having them kind of… misses the <em>point </em>of having your own personal website, in a way.</p>
|
||||
<p> Tumblr and Twitter are cesspools of drama. But not only that, they are also full of phenomenons very concerning and upsetting, such as rampant racism, ableism, and transmisogyny that is encouraged by not only the userbase but also the staff of the websites themselves. And what is done about it? What is done to help the trans women who have been banned from Tumblr, removing their entire platforms which many used to sustain themselves financially? What is done to help the Black individuals who were banned from that site and labelled terrorists for discussing Black life? What do we have to say to all of that? A lot of people make meaningful commentary and keep the memory fresh, some donate and help, and that is wonderful and I do not intend to downplay or not acknowledge that--yet I still feel that not enough people fit that category, and the racism and transphobia can frequently drown it out. So what is the overwhelming response to these things, even when they are widespread across my Tumblr dash and everyone is talking about them---what do most of the people talking about it have to say? Pretty much just "Friendly reminder my blog is not a safe space for TERFs." And like, it shouldn't be. But that cannot be <i>all</i> that you do. You have to make your presence safe for marginalized individuals by showing up for them, welcoming helping and supporting them when they struggle. It's a good sentiment, but it cannot stop there. On Neocities, a place for hosting personal websites, I think it would be much more efficient to create a page listing what you do support and why, and phrase that positively. When all the focus is on a reminder that the Bad People exist, it can be kind of depressing; "Hey, did you know people out there want you dead? I'd like to ask them to not view my page!!" vs. "I will always support queer people, disabled people, people of color etc. no matter what." is a big difference, I think.
|
||||
|
||||
<p>Also... Neocities isn't focused on interpersonal interaction. It's a great option to have the social media aspect, but it's optional - the focus is on individual personal sites. Even if you use the social media aspect frequently, there's a great "block site" button you can use for bigots and harmful people.</p>
|
||||
<p>And, honestly, those people probably aren’t even going to read your DNI page/section. I know it sucks that we can’t do much else to rid the small web of bigots—I’m reminded of a certain webring with a queerphobia requirement that I very much loathe—-but, unless there’s content that violates the Neocities terms of service, there’s not much else you can do. But you know what you can do? Block them and donate to a Black trans woman's transition fund, even a few dollars helps. Block them and check up on your transfem friend and ask her if she wants to hang out or if she needs anything. Block them, then go read about how you can be more caring to the disabled & create a more accessible environment, either IRL or online. At least do something. Please do something.
|
||||
<p>(An aside: I’m on Neocities because I want a place to put my eccentricities without fear of being told I’m an embarrassment, or I’m in the wrong for doing something harmless, or I’m cringe for not going to the club, or I’m a bad person because I think my 21 year old OC and 47 year old OC should kiss a little. DNI pages that go past bigotry & real life harm can foster an environment similar to mainstream social media, where there are "in-groups" and where people who are <i>genuinely</i> different from the norm get ostracized).
|
||||
<p>Neocities is a network of mostly unrelated independent personal websites with an optional social feed that is mainly used for website updates. People use their sites for all sorts of things, and Yes, you CAN put whatever you want on your site - that’s the point - but in the personal website sphere, I just have to ask: if you’re spending your time here coding "don't look at me" pages rather than focusing on independence, creativity, passion, supporting marginalized individuals, and so on and so forth - is Neocities really the right website for you? Maybe you’d prefer Carrd instead.</p></center>
|
||||
</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: Times;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
background: var(--background-color);
|
||||
background-image: url("https://i.ibb.co/214VBwsN/pkg50004.jpg");
|
||||
|
||||
}
|
||||
|
||||
::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>
|
||||
91
essays/housebound.html
Normal file
91
essays/housebound.html
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>alien</title>
|
||||
<style>
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-image: url('/stars5.gif');
|
||||
}
|
||||
|
||||
.sitemap {
|
||||
border: 3px solid;
|
||||
padding: 5px;
|
||||
width: 600px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
height: 600px;
|
||||
font-size: 19px;
|
||||
font-family: times;
|
||||
margin: 0 auto;
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #000;
|
||||
}
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
}
|
||||
#fuck {
|
||||
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
|
||||
font-style: italic;
|
||||
font-size:2em;
|
||||
font-weight:bold;
|
||||
color: #fff;
|
||||
-webkit-animation: pop 1s ease-in-out infinite alternate;
|
||||
animation: pop 1s ease-in-out infinite alternate;
|
||||
-moz-animation: pop 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pop {
|
||||
from {
|
||||
transform:scale(0.95)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform:scale(1)
|
||||
}
|
||||
|
||||
to {
|
||||
transform:scale(0.95)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes pop {
|
||||
from {
|
||||
-webkit-transform:scale(0.95)
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform:scale(1)
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform:scale(0.95)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body><br><center><a href="/homepage" style="color:#fff;">home</a>
|
||||
<h1>Houseboundedness & the Small Web</h1></div>
|
||||
<div class="sitemap"><p><span style="font-weight: 400;">I recently joined the Melonland forums, and I’m enjoying myself there. It’s a community full of likeminded individuals who have the same interests as me, and I am always deeply appreciative of internet communities that value kindness and discussion. But as I scrolled around the forums and the site, I noticed a common theme - unplug and go outside. The forums even close on Mondays to encourage people to do that! Which… is a great idea in theory, and I 100% understand why it is implemented, but as a housebound individual who is sometimes even bedbound, it did get me thinking about disability representation and accommodation in the small web.</span></p>
|
||||
<p><span style="font-weight: 400;">See, in theory, I love the idea that the internet should not be your whole life. And I do believe getting outside in the real world is extremely important. But I would like people to understand this: not everyone is capable of leaving the house, not everyone is capable of getting out of bed. The internet is my only connection to the world outside of my house. I love the fucking internet. I love the people I have met on the internet and the community I have formed. Many other friends I have are in a similar boat, too disabled to do a lot of things outside of the house. The internet has </span><i><span style="font-weight: 400;">many </span></i><span style="font-weight: 400;">downsides. A lot of them. But for many people it is a lifeline, a tool, a freedom.</span></p>
|
||||
<p><span style="font-weight: 400;">This idea that using the internet too much stains you somehow confuses me. At times it can remind me of the way my Christian aunt talks about “not getting distracted by Earthly things” and tells me “don’t enjoy things too much or you’re sinning”. The internet’s existence is not the problem. The problem is, of course, capitalism. It’s been talked about to death, the commodification of the internet and the focus on profit above literally anything else driving authentic communities to their graves. The problem, on a more micro level, is also that the internet being everywhere these days means a lot of bigots are around to infect it. But if you wouldn’t make the argument that learning is bad because some people learn chemistry or engineering to make weapons, why argue that the internet is a blemish just because terrible people use it? There are also a lot of </span><i><span style="font-weight: 400;">cool </span></i><span style="font-weight: 400;">people on the internet! What about them?</span></p>
|
||||
<p><span style="font-weight: 400;">I joined small web spaces to get more into web dev, self hosting, small game development, etc; computer hobbies are the one of the only hobbies accessible to me as a disabled person who often can’t leave its bed. So it is a little hurtful that a common message among abled or even non-housebound disabled webmasters is now “Unplug! Go outside! Make friends in the real world!” </span></p>
|
||||
<p><span style="font-weight: 400;">So I propose this instead: </span><i><span style="font-weight: 400;">adding on</span></i><span style="font-weight: 400;"> to the encouragement to unplug. Giving suggestions to people who can’t leave their house or bed - things to do besides scrolling mainstream social media or contributing to the “wider web”. Encourage them to diversify the websites they spend time on if they cannot go outside, or to try a new hobby if that’s accessible, or to spend time talking to a beloved friend, or call their pets up for a cuddle, or… you get the idea. I’ll pull a few things from Sky Stanton’s </span><i><span style="font-weight: 400;"><a href="https://theduckopera.medium.com/the-severe-me-bedbound-activity-masterlist-part-1-e61612b7a357">The Bedbound Activities Guide,</a> </span></i><span style="font-weight: 400;">but meditation is a great one you can do anywhere, you can also make gratitude lists, fantasize and daydream, if you can use devices, go on </span><a href="http://itch.io"><span style="font-weight: 400;">itch.io</span></a><span style="font-weight: 400;"> and check out some indie art/games/books! You don’t have to make going outside the end all be all of Healthy Internet Usage.</span></p>
|
||||
<p><span style="font-weight: 400;">There are more housebound and bedbound people than you think.</span></p>
|
||||
<p></p> </div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
88
essays/tumblrbrain.html
Normal file
88
essays/tumblrbrain.html
Normal file
File diff suppressed because one or more lines are too long
645
fanart.html
Normal file
645
fanart.html
Normal file
|
|
@ -0,0 +1,645 @@
|
|||
<!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><center><a href="/homepage">home</a></center>
|
||||
<h1>Fanart Gallery
|
||||
</h1>
|
||||
<img src="https://64.media.tumblr.com/a750395fd709c8d1a94dc49383f4aa31/c00628549a2ed437-51/s1280x1920/d0f41534b78952f2a81cba4fa6ef4749d0cb1364.pnj" width="500px"><img src="https://file.garden/aJzQmzrHVB4BLKwu/Untitled1645_20251022062326.png" width="500px">
|
||||
<img src="https://file.garden/aJzQmzrHVB4BLKwu/Untitled1620_20251010042639.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/qMz77s8D/Untitled1296-20250324022205.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/bjW8cPDs/Untitled1289-20250323201622.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/XrhLbjnB/Untitled1267-20250313200927.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/MyX4bM6H/Untitled1263-20250313005956.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/tT5hVtLG/Untitled1255-20250311010227.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/q3VGxGWT/Untitled1047-20250105190214.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/2YLw77bH/Untitled1029-20250103170208.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/LDK56Vb8/SPOILER-Untitled1022-20250102210521.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/fY1Tm5C5/Untitled1021-20250102174046.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/R4kprbLW/Untitled1017-20250101224237.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/SwjBgQ55/tumblr-7dc6851f6e34e92887d3ac4022d661d2-16bf3ff0-540.jpg" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/Nn3cTfxD/Untitled1210-20250226011135.png" width="500px" border="0">
|
||||
<img src="https://i.ibb.co/21ST1QyK/Untitled837.png" width="500px" border="0">
|
||||
<img src="https://file.garden/aJzQmzrHVB4BLKwu/Untitled1600_20250913164912.png" width="500px"><img src="https://i.ibb.co/Ngpf9rS4/Untitled1459-20250602040200.png" alt="Untitled1459-20250602040200" border="0" width="500px"><img src="https://file.garden/aJzQmzrHVB4BLKwu/Untitled1538_20250720002146.png" width="500px">
|
||||
|
||||
</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>
|
||||
632
fanworks.html
Normal file
632
fanworks.html
Normal file
|
|
@ -0,0 +1,632 @@
|
|||
<!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>
|
||||
<a href="/fic/directory">Fanfic Archive</a><br>
|
||||
<a href="/fanart">Fanart Archive</a>
|
||||
|
||||
</h1>
|
||||
</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>
|
||||
BIN
fanworks.png
Normal file
BIN
fanworks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
27
feed.xml
Normal file
27
feed.xml
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<rss version="2.0">
|
||||
<channel>
|
||||
<title>AgnestheAlien</title>
|
||||
<description>Agnes the Alien's blog</description>
|
||||
<link>https://galaxy.alien.town/</link>
|
||||
<lastBuildDate>
|
||||
Sun, 09 Nov 2025 13:17:21 +0000</lastBuildDate>
|
||||
<ttl>5</ttl>
|
||||
|
||||
|
||||
<item>
|
||||
<title>head tattoos and etc</title>
|
||||
<description>I got my head tattooed today! [Screenshot 2025-11-12 234231.png] It's the first of three sessions so far. The other side of my head will have this ima</description>
|
||||
<pubDate>Thu, 13 Nov 2025 04:59:36 +0000</pubDate>
|
||||
<link>https://galaxy.alien.town/articles/5</link>
|
||||
<guid>https://galaxy.alien.town/articles/5</guid>
|
||||
</item>
|
||||
<item>
|
||||
<title>early november 2025</title>
|
||||
<description> I've been focused on self-hosting quite a bit; I got another instance of otwarchive up, at Symphony, which is multifandom and for my friends/friends</description>
|
||||
<pubDate>Sun, 09 Nov 2025 13:17:21 +0000</pubDate>
|
||||
<link>https://galaxy.alien.town/articles/3</link>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
89
fic/b5/cosmos.html
Normal file
89
fic/b5/cosmos.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<title>whispering cosmos (talking right through me) - ToothpasteCheesecake - Babylon 5 (TV 1993)</title>
|
||||
<style type="text/css">
|
||||
p.message { text-align: center; }
|
||||
.meta h1 { font-size: 1.5em; text-align: center; }
|
||||
.meta h2 { font-size: 1.25em; text-align: center; }
|
||||
.meta h2 { page-break-before: always; }
|
||||
.meta .byline { text-align: center; }
|
||||
.meta dl.tags { border: 1px solid; padding: 1em; }
|
||||
.meta dd { margin: -1em 0 0 10em; }
|
||||
.meta .endnote-link { font-size: .8em; }
|
||||
/* List child related works under the labeling dt */
|
||||
#afterword .meta dd { margin: 1em 0 0 1em; }
|
||||
#chapters { font-family: "Nimbus Roman No9 L", "Times New Roman", serif; padding: 1em; }
|
||||
.userstuff { font-family: "Nimbus Roman No9 L", "Times New Roman", serif; padding: 1em; }
|
||||
/* Invisible headings to help Calibre make a Table of Contents */
|
||||
.toc-heading { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="preface">
|
||||
<h2 class="toc-heading">Preface</h2>
|
||||
|
||||
<p class="message">
|
||||
<b>whispering cosmos (talking right through me)</b><br/>
|
||||
Posted originally on the <a href="http://archiveofourown.org/">Archive of Our Own</a> at <a href="http://archiveofourown.org/works/55322680">http://archiveofourown.org/works/55322680</a>.
|
||||
</p>
|
||||
|
||||
<div class="meta">
|
||||
<dl class="tags">
|
||||
<dt>Rating:</dt>
|
||||
<dd><a href="http://archiveofourown.org/tags/Teen%20And%20Up%20Audiences">Teen And Up Audiences</a></dd>
|
||||
<dt>Archive Warning:</dt>
|
||||
<dd><a href="http://archiveofourown.org/tags/No%20Archive%20Warnings%20Apply">No Archive Warnings Apply</a></dd>
|
||||
<dt>Category:</dt>
|
||||
<dd><a href="http://archiveofourown.org/tags/F*s*M">F/M</a></dd>
|
||||
<dt>Fandom:</dt>
|
||||
<dd><a href="http://archiveofourown.org/tags/Babylon%205%20(TV%201993)">Babylon 5 (TV 1993)</a></dd>
|
||||
<dt>Relationship:</dt>
|
||||
<dd><a href="http://archiveofourown.org/tags/Mr*d*%20Morden*s*Anna%20Sheridan">Mr. Morden/Anna Sheridan</a></dd>
|
||||
<dt>Characters:</dt>
|
||||
<dd><a href="http://archiveofourown.org/tags/Mr*d*%20Morden%20(Babylon%205)">Mr. Morden (Babylon 5)</a>, <a href="http://archiveofourown.org/tags/Anna%20Sheridan%20(Babylon%205)">Anna Sheridan (Babylon 5)</a></dd>
|
||||
|
||||
<dt>Language:</dt>
|
||||
<dd>English</dd>
|
||||
|
||||
<dt>Stats:</dt>
|
||||
<dd>
|
||||
Published: 2024-04-19
|
||||
Words: 670
|
||||
Chapters: 1/1
|
||||
</dd>
|
||||
</dl>
|
||||
<h1>whispering cosmos (talking right through me)</h1>
|
||||
<div class="byline">by <a rel="author" href="http://archiveofourown.org/users/ToothpasteCheesecake/pseuds/ToothpasteCheesecake">ToothpasteCheesecake</a></div>
|
||||
<p>Summary</p>
|
||||
<blockquote class="userstuff"><p>And then she asks him the dreaded thing, the shell of his past he just cannot shed: “And you were really her friend?”</p></blockquote>
|
||||
|
||||
<p>Notes</p>
|
||||
<blockquote class="userstuff"><p>Since this scene was written from Anna's POV and I always found Morden's actions there REALLY interesting, I tried writing it from his POV. Its 5am</p></blockquote>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="chapters" class="userstuff">
|
||||
<h2 class="toc-heading">whispering cosmos (talking right through me)</h2>
|
||||
<div class="userstuff">
|
||||
<p> </p><p>At a time when they were both different people—too alien, too similar, too familiar, too far gone---there was a Something there. A force of energy that pulsated when she held his hand, an array of obstacles between their hearts that formed connecting pathways beneath the rubble. Dr. Morden had found this insurmountable.</p><p> </p><p>There had been a Something. She walked into his quarters on Station Prime with an evolving mission, a determination to succeed in their trip to the Rim, a fascination with the boundaries of the unknown. Was he a dead civilization to her? One of many lost worlds to dive into, excavate, and study? Something so dangerous even after death that it can only be weaponized? On second thought, the weaponization was only on his shoulders, his work for New Technologies. Whatever lured Sheridan to dead planets---it was purer than he ever could be, purer than he would ever want to be.</p><p> </p><p>Or was he something endangered, on the brink of extinction, something that she had to Save and Fix and Keep? Dr. Morden was never something to be kept. He refuses to entertain the idea that she simply wanted him to want him, that it was just her own loneliness that anchored her to his cause. It would make her seem human, and she is no longer human. </p><p> </p><p>They are unrecognizable now, scorched beyond recognition and puppeted lifelessly over surgical tables like burnt corpses. Mr. Morden does not find this insurmountable—he doesn't feel anything at all.</p><p> </p><p>He tells her about herself because he has to, because this is his inverted divine purpose, and because he is addicted to the striking, druglike euphoria of obeying. This Anna doesn't understand—she shivers when he touches her palm, she sees no value in the past, finds dead civilizations worthless. He sees the past now as something to learn from, to analyze, to figure out what kills and what doesn't and what factors lead to their ruin. It's, hm — important to understand how it happens, how things die out. Exactly when the body starves and suffocates and what it feels like to starve and suffocate and how the younger races can avoid—or embrace, in their stupidity—the same actions. </p><p> </p><p>This Anna only questions him, and not in the way Sheridan used to question him; when this Anna asks for an explanation, she spits it out with vitriol towards the former resident of her body, unable to parse the person that Sheridan had been. Sheridan had been good, and his associates cannot translate the concept of good. He feels himself getting angry and angrier as the facts spill out of his mouth, spit out like broken teeth or rotten, rotten food. </p><p> </p><p>Anna has the one thing his associates refuse him: the privilege of forgetting. And she thinks her former self a fool.</p><p> </p><p>“It's not your place to make judgment,” he snaps, but something sick embedded in his mind forces him back into composure. “There's no point to it,” he finishes. </p><p> </p><p>And then she asks him the dreaded thing, the shell of his past he just cannot shed: “And you were really her friend?”</p><p> </p><p>Mr. Morden looks away, just as he had long ago under the harassing gaze of the ISN reporters—he cannot look at her. There had been a Something between them—something that turned them into nothingness, little organic capsules of void. They ruined each other, and now they must rebuild.</p><p> </p><p>“Not a very good one,” he says, facing the wall and finally, finally looking back, “but yes, I was.” </p><p> </p><p>They have to finish getting her ready for John. They have to commit now.</p><p> </p><p>She asked him if humans can connect with each other the way she had connected to her machine. He must look at it the same way, he knows, to serve them better. They can influence him, but it doesn't matter now. All connection is machinery, clusters of glitching and sparking circuits that rest beneath both of their grins. It's all they have.</p><p> </p><p> </p><p> </p><p> </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="afterword">
|
||||
<h2 class="toc-heading">Afterword</h2>
|
||||
|
||||
|
||||
<p class="message">Please <a href="http://archiveofourown.org/works/55322680/comments/new">drop by the Archive and comment</a> to let the creator know if you enjoyed their work!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1945
fic/b5/enlightenment.html
Normal file
1945
fic/b5/enlightenment.html
Normal file
File diff suppressed because it is too large
Load diff
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue