Whitenoise Poetry
The air is putrid.
but i think i failed idk
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
make little boxes
like this one
with the .poembox tag
(apply it to a div)
here's an example of a blockquote
This is a regular h1 tag without the #title tag
This is a h2 tag
This is a h3 tag
This is a h4 tag
Following is a regular image not embedded into a figure tag
I put the plate infront of him, like I was ordered to. Despite him at first looking disgusted by the human brain on it, I got him to take it in after cutting it into little pieces. To achieve this effect, give a span tag the .highlight tag
This is a details tag
You clicked on it.
If you do decide to use this template, please credit me by providing a link to my site, quaddie.neocities.org.
CSS
:root {
--selection-colour: rgba(64, 64, 64, 0.25);
--background-colour: white;
--text-colour: black;
--title-colour: black;
--extra-colour: rgba(64, 64, 64, 0.25);
--distinction-colour: rgba(64, 64, 64, 0.25);
--link-colour: #a9a5ff;
--highlight-colour: #a9a5ff;
--top: 5%;
--hr-top: 25%;
}
::selection {
background-color: var(--selection-colour);
}
::-moz-selection {
background-color: var(--selection-colour);
}
body {
margin: 0;
font-family: "Rufina";
background: var(--background-colour);
color: var(--text-colour);
line-height: 1.5;
word-break: normal;
hyphens: manual;
font-optical-sizing: auto;
overflow-x: hidden;
}
*, ::before, ::after {
font-kerning: auto;
font-variant-ligatures: common-ligatures contextual;
font-variant-numeric: lining-nums proportional-nums;
font-weight: 400;
}
#container {
position: absolute;
width: 80%;
left: 10%;
top: var(--top);
padding-bottom: 10vh;
}
#title {
font-size: 17px;
text-align: left;
font-weight: 400;
color: var(--title-colour);
border-bottom: 1.5px solid var(--title-colour);
}
#text-container {
width: 100%;
}
.poembox {
position: relative;
width: 80%;
left: 10%;
background: rgba(205, 205, 195, 0.25);
border: 2px solid rgba(160, 160, 160, 0.35);
text-align: center;
font-style: italic;
padding-top: 1vh;
padding-bottom: 1vh;
}
span.highlight {
background: var(--highlight-colour);
color: black;
padding-left: 0.5px;
padding-right: 0.5px;
}
blockquote {
border-left: 5px double var(--extra-colour);
padding-left: 10px;
}
a {
box-shadow: inset 0 0 0 0 var(--extra-colour);
color: var(--extra-colour);
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 700px 0 0 0 #a9a5ff;
}
details {
border-left: 5px double var(--extra-colour);
padding-left: 10px;
}
details[open] > summary {
font-weight: 700;
}
summary:hover {
cursor: pointer;
padding-left: 5px;
text-decoration: underline;
}
details > p {
border-left: 5px double var(--extra-colour);
padding-left: 10px;
}
/* Presentational styles */
a {
color: var(--link-colour);
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
h1 {
margin-top: 0;
}
img {
max-width: 30vmin;
}
figure {
float: left;
width: 30%;
max-width: 30vmin;
}
figure > img {
width: 100%;
transition: 0.4s transform;
border: 5px double var(--extra-colour);
}
figure > img:hover {
transform: scale(1.15);
}
figcaption {
background-color: rgba(205, 205, 195, 0.65);
border-radius: 5px;
padding: 5px;
margin-left: 10px;
text-align: center;
}
HTML
idk just look at the file, you'll get it