801 lines
No EOL
23 KiB
HTML
801 lines
No EOL
23 KiB
HTML
<!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>
|
||
<link rel="stylesheet" href="https://fandomr.ing/onionring/onionring.css">
|
||
|
||
</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">
|
||
<a href="https://www.imood.com/users/alienhospital"><img src="https://moods.imood.com/display/uname-alienhospital/imood.gif" alt="The current mood of alienhospital at www.imood.com" border="0"></a>
|
||
</div>
|
||
|
||
<div class="sidebar-section">
|
||
<iframe src="https://www3.cbox.ws/box/?boxid=3546360&boxtag=8LrbMS" width="100%" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
|
||
</div>
|
||
|
||
<div class="sidebar-section">
|
||
<form method="post" action="https://poll.pollcode.com/17118689"><div style="background-color:#EEEEEE;padding:2px;width:175px;font-family:Arial;font-size:small;color:#000000;"><div style="padding:2px 0px 4px 2px;"><strong>whats the best bloc party album</strong></div><input type="radio" name="answer" value="1" id="answer171186891" style="float:left;" /><label for="answer171186891" style="float:left;width:150px;">silent alarm</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="2" id="answer171186892" style="float:left;" /><label for="answer171186892" style="float:left;width:150px;">intimacy</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="3" id="answer171186893" style="float:left;" /><label for="answer171186893" style="float:left;width:150px;">a weekend in the city</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="4" id="answer171186894" style="float:left;" /><label for="answer171186894" style="float:left;width:150px;">alpha games</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="5" id="answer171186895" style="float:left;" /><label for="answer171186895" style="float:left;width:150px;">four</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="6" id="answer171186896" style="float:left;" /><label for="answer171186896" style="float:left;width:150px;">hymns</label><div style="clear:both;height:2px;"></div><div align="center" style="padding:3px;"><input type="submit" value=" Vote "> <input type="submit" name="view" value=" View "></div><div align="right" style="font-size:10px">pollcode.com <a href="https://pollcode.com/">free polls</a></div></div></form>
|
||
</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>
|
||
<br><br><center>other cool sites!
|
||
<div class="scrolly">
|
||
<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://linkyblog.neocities.org/"><img src="/linkybanner.png"></a> <a href="https://spirit.alien.hospital"><img src="https://i.ibb.co/Pv0Jd5XR/button.png" alt="button" border="0"></a>
|
||
|
||
|
||
</div>
|
||
<img src="https://i.ibb.co/KpMnG9hg/ao3e.png"> Additional <a href="https://alien.hospital/cliques">Tags:</a> Alien/Human Relationship
|
||
</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">
|
||
<a href="https://www.last.fm/user/keegbovo"><img src="https://lastfm-recently-played.vercel.app/api?user=keegbovo" height="auto" width="250px"/></a>
|
||
|
||
</div>
|
||
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-title">Updates</div>
|
||
<div class="updated">June 03, New page: novel excerpts. <br>June 02, 2025. New page: fandom badges.<br>May 28, 2025. Added more to Doom Patrol fic archive. <br>May 23, 2025. TNS shrine updated/improved.<br> May 04. 2025. Site Established & basic pages uploaded<br>
|
||
May 10. TNS dressup page, WIP fanwork archive and tns shrine uploaded<br></div>
|
||
</div>
|
||
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-title">To-Do</div>
|
||
<div class="updated">
|
||
-Update fanfic archive<br>
|
||
-More shrines</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>
|
||
<iframe width="400" height="300" frameborder="0" src="https://cdn.abowman.com/widgets/turtles/?up_waterColor=d0dce5&up_percentWater=0.75&up_groundColor=eeeeee&up_numTurtles=8&up_turtle1LegColor=828250&up_turtle1HeadColor=828250&up_turtle1ShellColor=66663f&up_turtle2LegColor=828250&up_turtle2HeadColor=828250&up_turtle2ShellColor=66663f&up_turtle3LegColor=828250&up_turtle3HeadColor=828250&up_turtle3ShellColor=66663f&up_turtle4LegColor=828250&up_turtle4HeadColor=828250&up_turtle4ShellColor=66663f&up_turtle5LegColor=828250&up_turtle5HeadColor=828250&up_turtle5ShellColor=66663f&up_turtle6LegColor=828250&up_turtle6HeadColor=828250&up_turtle6ShellColor=66663f&up_turtle7LegColor=828250&up_turtle7HeadColor=828250&up_turtle7ShellColor=66663f&up_turtle8LegColor=828250&up_turtle8HeadColor=828250&up_turtle8ShellColor=66663f&up_turtle9LegColor=828250&up_turtle9HeadColor=828250&up_turtle9ShellColor=66663f&up_turtle10LegColor=828250&up_turtle10HeadColor=828250&up_turtle10ShellColor=66663f"></iframe><br><!-- // Begin Current Moon Phase HTML (c) [MoonConnection.com](http://MoonConnection.com) // -->
|
||
|
||
<center> <table cellpadding="0" cellspacing="0" border="0" width="138"> <tr> <td align="center"> <a href="https://www.moonconnection.com" target="mc\_moon\_ph"> <img src="https://www.moonmodule.com/cs/dm/vn.gif" width="138" height="210" border="0" alt="" /></a> <div style="position:relative;width:128px;"> <div style="position:absolute;top:-30px;left:6px;background:#000000;width:116px;text-align:center;"> <a href="https://www.moonconnection.com/moon\_phases.phtml" target="mc\_moon\_ph"> <font color="#7F7F7F" size="1" face="arial,helvetica,sans-serif"> <span style="color:#7F7F7F;font-family:arial,helvetica,sans-serif;font-size:10px;">lunar phase</span> </font> </a> </div> </div> </td> </tr> </table> </center><!-- // end moon phase HTML // -->
|
||
</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>Hi! I'm Aggie. I'm a freakdyke alien in its mid 20s trying to create a little home on the web.</p><p>Here, you will find just about everything--thoughts on fiction, personal writing and artwork, fandom, fictosexuality, alterhumanity, and anything else haunting my mind at the moment.
|
||
<p>
|
||
<center>PICLOG!! <br><a href="https://piclog.blue/profile.php?id=365"><img src="https://piclog.blue/latest.php?id=365"></a>
|
||
<iframe width="314" height="321" scrolling="no" src="https://gifypet.neocities.org/pet/pet.html?name=tns&dob=1746414126&gender=undefined&element=Fire&pet=https%3A%2F%2Fi.ibb.co%2FxtJKZjZM%2Fimage1-Copy.png&map=https%3A%2F%2Fi.ibb.co%2FRTFX5DPc%2Fbackstar-1.gif&background=https%3A%2F%2Fi.ibb.co%2FbRgRHRYk%2Fcloudynite.gif&tablecolor=white&textcolor=white" frameborder="0"></iframe><div id='yume-ring'>
|
||
<script type="text/javascript" src="https://yume-ring.neocities.org/onionring-variables.js"></script>
|
||
<script type="text/javascript" src="https://yume-ring.neocities.org/onionring-widget2.js"></script>
|
||
</div>
|
||
|
||
<div id='fandomring'>
|
||
<script type="text/javascript" src="https://fandomr.ing/onionring/onionring-variables.js"></script>
|
||
<script type="text/javascript" src="https://fandomr.ing/onionring/onionring-widget.js"></script>
|
||
|
||
</div>
|
||
|
||
<div style="width: fit-content; border: 2px outset; text-align:center; background-image: url('https://i.ibb.co/XfyPJWWh/cloudynite.gif'); color: #fff;">
|
||
<p style="margin: 0; padding: 0.1em; border: 2px inset; color: #fff;"><img src="https://i.ibb.co/HTxfB4j8/stars.gif" width="35px"><br>This site is a member of <a href="https://alien.hospital/starburst/join" style="color:#fff;">Starburst Ring.</a></p>
|
||
<div style="display: flex">
|
||
<a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset; color: #fff;" href="https://webri.ng/webring/starburstring/previous?via=https%3A%2F%2Falien.hospital">prev </a>
|
||
<a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset; color: #fff;" href="https://webri.ng/webring/starburstring/random?via=https%3A%2F%2Falien.hospital">random</a>
|
||
<a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset; color: #fff;" href="https://webri.ng/webring/starburstring/next?via=https%3A%2F%2Falien.hospital">next </a>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="anticensorselfship69">
|
||
<script type="text/javascript" src="https://anticensorselfship.neocities.org/onionring-variables.js"></script>
|
||
<script type="text/javascript" src="https://anticensorselfship.neocities.org/onionring-widget.js"></script>
|
||
</div>
|
||
|
||
</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;
|
||
}
|
||
|
||
.scrolly {
|
||
|
||
width: 150px;
|
||
height: 100px;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
.updated {
|
||
height: 150px;
|
||
width: 180px;
|
||
overflow: scroll;
|
||
|
||
}
|
||
|
||
#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> |