Upload files to "/"
This commit is contained in:
commit
42ca5c1303
2 changed files with 668 additions and 0 deletions
662
promptgenerator.html
Normal file
662
promptgenerator.html
Normal file
|
|
@ -0,0 +1,662 @@
|
|||
<!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>
|
||||
mega writing prompt generator
|
||||
</h1>
|
||||
geared towards but not exclusive to fanfiction! has lyric prompts, AU prompts, single word prompts, obscure word prompts.<br>
|
||||
<button onClick="newQuote()">give me a writing prompt</button><br><br>
|
||||
<div id="quoteDisplay"> </div>
|
||||
<script src="/promptgenerator.js"></script></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 {
|
||||
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>
|
||||
6
promptgenerator.js
Normal file
6
promptgenerator.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue