Initial Commit with old site files

This commit is contained in:
Boreal 2024-07-16 20:50:54 -05:00
parent 3ccd376af9
commit ba1d26a028
34 changed files with 1165 additions and 0 deletions

54
blog.html Normal file
View File

@ -0,0 +1,54 @@
<!doctype html>
<html>
<head>
<title>boreal.zip blog</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<style>
.responsive-iframe {
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="blog">
<h3>Blog 7/15/24 4:05 PM</h3>
<p>
Yo! Just added the trinkets page to this site. Its based off the toybox.js created by dante and I found it from ribo.zone. I have a link to the github for the code at the bottom of the trinkets page. My plan it to put fun gifs and adoptables I find there and have them link back to the source I found them from. I can't wait to see it all filled up.
</p>
</div>
<div class="blog">
<h3>Blog 7/14/24 1:43 PM</h3>
<p>
Trying a different site counter. It's still a cute counter but now its unique visitors. Well now that I'm typing this out nothinf is stopping me from doing both so I think im gonna do that.
</p>
</div>
<div class="blog">
<h3>Blog 7/14/24 5:15 AM</h3>
<p>
Still working on the site some more and I made the blog an iframe on the homepage which I realise I've seen before I just never put 2 and 2 together. Finally having a personal site is weird, it is so much more effort than social media which makes me have time to tink about how I sould represent myself and I feel like the its alot more lowkey than social media so Im not really out here expecting people to read this. I feel like calling it a multiplayer journal might be a fun name. Somepoint my music this evening/morning has transitionsed to break core & ambient sutff. This is one of the songs that started getting me hooked.
</p>
<iframe class="responsive-iframe" src="https://www.youtube-nocookie.com/embed/UgP5IZoSEJ4?si=5Jw0czBJr7SiTjnt" title="YouTube video player" frameborder="0" allow="" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div class="blog">
<h3>Blog 7/14/24 4:16 AM</h3>
<p>
Been working on the site most of the last 24hrs. I'm very much
enjoying the tinkering with HTML and CSS. There is something to be
said about being stoned, tired, and alone at 4 in the morning
browsing indie sites and just going with the flow. Multiply that
feeling by 10 when you factor in music like Need 2 by Pinegrove.</br>
Transcendant....
</p>
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/zE_rK8PX83Q?si=xZBvi-c8BmfYA3u1" title="YouTube video player" frameborder="0" allow="" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</body>
</html>

BIN
collectables/img/greg.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
collectables/img/mmzaku.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
collectables/img/wirt.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
collectables/img/world.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

138
collectables/index.html Normal file
View File

@ -0,0 +1,138 @@
<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" />
<link
href="../cyanobacteria.css"
rel="stylesheet"
type="text/css"
media="all"
/>
<title>Boreal's Webzone / Collectables</title>
<style>
.buttonbox {
display: flex; justify-content: center; flex-wrap: wrap; padding: 5px; text-align: center;
}
#toybox {
height: 30vw;
margin: auto;
position: relative;
}
#toybox>* {
padding: 3px;
transition-duration: 0.2s;
}
#toybox>*:hover {
transform: scale(2);
z-index: 30 !important;
image-rendering: pixelated;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header><span>Collectables</span></header>
<section class="full">
<div id="toybox">
<!--
any regular dom element here will get position:absoluted and moved around based on its size
you can add padding etc to modify this size
-->
<a
href="https://web.archive.org/web/20090728080910/http://hk.geocities.com/joesuenhk/profile.html"
>
<img src="./img/mmzaku.gif" />
</a>
<a href="https://99gifshop.neocities.org/">
<img src="./img/world.gif" />
</a>
<a href="https://artwork.neocities.org//">
<img src="./img/wirt.gif" />
</a>
<a href="https://artwork.neocities.org//">
<img src="./img/lowlygif.gif" />
</a>
<a href="https://artwork.neocities.org//">
<img src="./img/greg.gif" />
</a>
</div>
</section>
<section class="full">
<h1>Quiz Results</h1>
<div
style="display: flex; justify-content: center; flex-wrap: wrap;"
>
<a
href="https://casiopea.neocities.org/isopod/isopodquiz.html"
>
<img src="https://i.imgur.com/wXF6sld.png" />
</a>
<a href="https://clownfred.zone/clownquiz">
<img
src="https://clownfred.zone/!Media/CQ/JesterCard1.png"
alt="I am a Jester! Click here to take the clown quiz!"
/>
</a>
</div>
</section>
<section class="full">
<h1>88x31 Buttons</h1>
<h2>Games</h2>
<p>Games that I enjoy and would recommend playing!</p>
<div class="buttonbox">
<img src="../images/buttons/minecraft.gif" alt="Minecraft" />
<img src="../images/buttons/cs.gif" alt="Counter-Strike" />
<img src="../images/buttons/eveonline.gif" alt="EVE Online" />
<img src="https://yesterhost.neocities.org/archive/buttons/button136.gif" alt="DDR Online"/>
</div>
<h2>Silly</h2>
<p>
Some silly buttons I have found in button collections around
the web.
</p>
<div class="buttonbox">
<img src="../images/buttons/desp-anim.gif" alt="Despacito" />
<img src="../images/buttons/majimanow.png" alt="Majima Now" />
<img src="../images/buttons/nedscape_now.gif" alt="Nedscape now"/>
</div>
<h2>Other</h2>
<p>
Statements I support or other things that don't fit in other
sections.
</p>
<div class="buttonbox">
<img src="../images/buttons/elimdrm.gif" alt="Eliminate DRM"/>
<img src="../images/buttons/magic.gif" alt="Magic" />
</div>
</section>
<div class="small"></div>
<div class="small">
<nav>
<a href="../home.html">Back</a>
</nav>
</div>
<div class="small"></div>
</div>
<script src="toybox.js"></script>
<footer>
<span>
Theme based on cyanobacteria.css by
<a href="https://ribo.zone">ribo.zone</a>
<br />
<a href="https://github.com/dantescanline/toybox">Toybox.js</a>
created by
<a href="https://dantescanline.com/">DanteScanline</a>
</span>
</footer>
</body>
</html>

212
collectables/toybox.js Normal file
View File

@ -0,0 +1,212 @@
// toybox.js by Dante Scanline 2022
// UNIVERSAL PUBLIC DOMAIN LICENSE - This code and everything else in the universe is in the public domain
/// ------------
// CONFIGURATION VARIABLES, please change these!
const BUBBLE_IN = true; //makes the toys come in one at a time
const BUBBLE_DELAY = 250; // if bubbling in, how much time in miliseconds between each new toy. bigger number is slowe
const PUSH_SPEED = 3; // base amount that toys push each other, bigger number means quicker stronger pushing
const RANDOM_START_OFFSET = 200; // random distance from center in pixels where toys are spawned inside off
/// ------------
let toyContainer;
let items = []; // array of dom elements
// FisherYates knuth shuffle
function shuffle(array) {
let currentIndex = array.length,
randomIndex;
// While there remain elements to shuffle.
while (currentIndex != 0) {
// Pick a remaining element.
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex],
array[currentIndex],
];
}
return array;
}
// reenable items sequentially for bubbling
function reEnable(index) {
if (index > items.length - 1) {
return;
}
items[index].domElement.style.display = "initial";
setTimeout(() => {
reEnable(index + 1);
}, BUBBLE_DELAY);
}
// the object, with width height from DOM and then a position we set :)
class Toy {
constructor(domElement) {
this.domElement = domElement;
this.domElement.style.position = "absolute";
let rect = toyContainer.getBoundingClientRect();
this.x = rect.width / 2 + 100 - Math.random() * 200;
this.y = rect.height / 2 + 100 - Math.random() * 200;
this.visualX = this.x;
this.visualY = this.y;
this.updateSize();
this.updatePosition();
}
updatePosition() {
this.visualX += (this.x - this.visualX) * 0.1;
this.visualY += (this.y - this.visualY) * 0.1;
this.domElement.style.left = `${this.x}px`;
this.domElement.style.top = `${this.y}px`;
}
updateSize() {
this.width = this.domElement.clientWidth;
if (this.width == 0 || this.width == undefined) {
console.error("no size for element yet");
}
this.height = this.domElement.clientHeight;
if (this.width < 65 || this.height < 65) {
this.domElement.style["z-index"] = "20";
}
this.domElement.style.marginLeft = `${-this.width / 2}px`;
this.domElement.style.marginTop = `${-this.height / 2}px`;
// this.domElement.style.transform = `translate(${-this.width / 2}px, ${-this.height / 2}px)`
}
pointOverlaps(xx, yy) {
return (
xx > this.x - this.width / 2 &&
xx < this.x + this.width / 2 &&
yy > this.y - this.height / 2 &&
yy < this.y + this.height / 2
);
}
toyOverlaps(otherToy) {
const corners = [
[otherToy.x - otherToy.width / 2, otherToy.y - otherToy.height / 2],
[otherToy.x + otherToy.width / 2, otherToy.y - otherToy.height / 2],
[
otherToy.x - otherToy.height / 2,
otherToy.y + otherToy.height / 2,
],
[otherToy.x + otherToy.width / 2, otherToy.y + otherToy.height / 2],
];
// check if the other toys corners are inside our rect
for (let i = 0; i < corners.length; i++) {
let pair = corners[i];
if (this.pointOverlaps(pair[0], pair[1])) {
return true;
}
}
// edge case, where we are fit entirely inside the other rect, so check one of our points on them
return otherToy.pointOverlaps(this.x, this.y);
}
getPushed(otherToy) {
let distance = PUSH_SPEED;
let centerX = this.x;
let centerY = this.y;
let otherCenterX = otherToy.x;
let otherCenterY = otherToy.y;
let angle = Math.atan2(centerY - otherCenterY, centerX - otherCenterX);
let finalStrength = distance;
// if the toy pushing us is roughly bigger than us, get pushed more to help offset some biasing
if (
otherToy.width + otherToy.height >
(this.width + this.height) * 1.3
) {
finalStrength *= 3;
}
this.x += Math.cos(angle) * finalStrength;
this.y += Math.sin(angle) * finalStrength;
this.updatePosition();
}
}
document.addEventListener("DOMContentLoaded", init);
function init() {
toyContainer = document.querySelector("#toybox");
let nodes = Array.from(toyContainer.childNodes);
nodes = nodes.filter((node) => node.nodeType == 1);
nodes = shuffle(nodes); // help prevent biases
for (let i = 0; i < nodes.length; i++) {
items.push(new Toy(nodes[i]));
if (BUBBLE_IN) {
if (i > 3) {
items[i].domElement.style.display = "none";
}
}
}
if (BUBBLE_IN) {
reEnable(3);
}
requestAnimationFrame(main);
}
function main() {
items.map((item) => item.updateSize());
for (let i = 0; i < items.length; i++) {
const itemA = items[i];
for (let k = 0; k < items.length; k++) {
if (i == k) continue;
const itemB = items[k];
if (itemA.toyOverlaps(itemB)) {
itemB.getPushed(itemA);
}
}
}
let rect = toyContainer.getBoundingClientRect();
for (let i = 0; i < items.length; i++) {
const itemA = items[i];
if (itemA.x - itemA.width / 2 < 0) {
itemA.x += 10;
itemA.updatePosition();
}
if (itemA.y - itemA.height / 2 < 0) {
itemA.y += 10;
itemA.updatePosition();
}
if (itemA.x + itemA.width / 2 > rect.width) {
itemA.x -= 10;
itemA.updatePosition();
}
if (itemA.y + itemA.height / 2 > rect.height) {
itemA.y -= 5;
itemA.updatePosition();
}
}
requestAnimationFrame(main);
}

BIN
cursor.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 480 B

285
cyanobacteria.css Normal file
View File

@ -0,0 +1,285 @@
@font-face {
font-family: "Orbitron";
src: url(../fonts/Orbitron-Regular.ttf) format("truetype");
}
@font-face {
font-family: "Roboto";
src: url(../fonts/Roboto-Regular.ttf) format("truetype");
}
/* start light mode styling */
:root {
--text: darkslategrey;
--border: lightgrey;
--accent: teal;
--bg: #dce3e1;
--gradientTop: white;
--gradientBottom: rgb(240, 248, 255, 0.8);
}
header {
background: url("***light mode banner image***");
}
/* end light mode styling */
/* start dark mode styling */
@media (prefers-color-scheme: dark) {
:root {
--text: #cdd6f4;
--border: #585b70;
--accent: #f38ba8;
--bg: #1e1e2e;
--gradientBottom: #11111b;
--gradientTop: #313244;
a:link {
color: #f38ba8;
}
}
header {
background: url("https://images.freeimages.com/images/large-previews/913/sea-3-1188161.jpg");
}
}
/* end dark mode styling */
* {
box-sizing: border-box;
}
body {
padding: 10px;
font-family: "Orbitron", sans-serif;
color: var(--text);
/* page background pattern */
background-color: var(--gradientTop);
background-image: linear-gradient(
30deg,
var(--bg) 12%,
transparent 12.5%,
transparent 87%,
var(--bg) 87.5%,
var(--bg)
),
linear-gradient(
150deg,
var(--bg) 12%,
transparent 12.5%,
transparent 87%,
var(--bg) 87.5%,
var(--bg)
),
linear-gradient(
30deg,
var(--bg) 12%,
transparent 12.5%,
transparent 87%,
var(--bg) 87.5%,
var(--bg)
),
linear-gradient(
150deg,
var(--bg) 12%,
transparent 12.5%,
transparent 87%,
var(--bg) 87.5%,
var(--bg)
),
linear-gradient(
60deg,
var(--bg) 25%,
transparent 25.5%,
transparent 75%,
var(--bg) 75%,
var(--bg)
),
linear-gradient(
60deg,
var(--bg) 25%,
transparent 25.5%,
transparent 75%,
var(--bg) 75%,
var(--bg)
);
background-size: 20px 35px;
background-position:
0 0,
0 0,
10px 18px,
10px 18px,
0 0,
10px 18px;
}
.container {
max-width: 70rem;
margin: 5vw auto 12px auto;
border: 6px ridge var(--border);
outline: 3px solid var(--gradientTop);
outline-offset: 4px;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
padding: 5px;
gap: 5px;
/* container background pattern */
background-color: var(--gradientBottom);
opacity: 1;
background-size: 10px 10px;
background-image: repeating-linear-gradient(
45deg,
var(--bg) 0,
var(--bg) 5px,
var(--gradientBottom) 0,
var(--gradientBottom) 50%
);
}
/* these control the column widths */
.small {
flex: 1 1 9%;
}
.large {
flex: 1 1 82%;
}
.full {
flex: 1 1 100%;
}
.half {
flex: 1 1 49%;
}
header {
background-size: cover;
background-position: center;
width: 100%;
height: 120px; /* change banner height here*/
border: 2px ridge var(--border);
border-radius: 5px;
position: relative;
}
header span {
font-size: 2.5rem;
position: absolute;
bottom: 0;
right: 10px;
margin: 10px;
font-weight: bold;
text-shadow:
1px 1px var(--text),
-1px 1px var(--text),
1px -1px var(--accent),
-1px -1px var(--accent);
color: var(--gradientTop);
}
nav {
border: 2px ridge var(--border);
border-radius: 5px;
padding: 5px;
background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}
nav div {
text-align: center;
font-size: 1.25rem;
margin: 5px 5px 10px 5px;
}
nav a {
display: block;
margin: 5px;
background: linear-gradient(to right, var(--bg), var(--gradientBottom));
border-radius: 5px;
padding: 2px 7px;
text-decoration: none;
}
nav a:link,
nav a:visited {
color: var(--text);
}
nav a:hover,
nav a:focus {
background: linear-gradient(
to right,
var(--bg),
var(--gradientBottom),
var(--gradientTop)
);
}
/* optional button styling like in the preview */
div.small > img {
display: block;
margin: 5px auto;
border: 2px ridge var(--border);
border-radius: 5px;
}
section {
border: 2px ridge var(--border);
border-radius: 5px;
background: linear-gradient(var(--gradientTop), var(--gradientBottom));
padding: 5px;
}
footer {
text-align: center;
margin-bottom: 1vw;
font-size: 0.8rem;
}
footer a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Orbitron", sans-serif;
margin: 5px;
line-height: 1.2;
}
h1 {
font-size: 1.4rem;
letter-spacing: 2px;
font-weight: normal;
text-align: center;
border-bottom: 2px ridge var(--border);
padding-bottom: 5px;
}
h2 {
font-size: 1.25rem;
font-weight: normal;
text-align: center;
}
h3 {
font-size: 1.1rem;
}
h4 {
font-size: 1rem;
color: var(--accent);
padding-left: 12px;
}
p {
font-family: "Roboto", sans-serif;
margin: 5px;
line-height: 1.2;
text-indent: 1em;
}
/* prevents overflow on smaller screens */
img {
max-width: 100%;
margin-top: 0.25em;
}
pre {
overflow-x: auto;
}
ul,
ol {
font-family: "Roboto";
}
a:hover,
a:focus {
font-style: italic;
}
a:visited {
color: var(--accent);
}

26
elements.css Normal file
View File

@ -0,0 +1,26 @@
/*
Don't use this file to edit your site style! Create a different CSS file for that.
This file defines how custom elements (like sitebox) will look like.
Setting CSS that breaks main nekoweb site on purpose is prohibited and may result in ban and site deletion!
*/
/* Must start with ".site-box". Change how your website will appear on main nekoweb site: https://lune.dimden.dev/405a44b7e5.png */
.site-box {
text-align: center;
background-image: url(/static/assets/cookiebox.png); /* Only nekoweb URLs allowed, use full url to your site like https://example.nekoweb.org/images/coolbg.png */
background-repeat: no-repeat;
color: #b08271;
font-size: 12px;
}
.site-box > a > p {
color: var(--darkbrown);
font-weight: bold;
}
.site-box > a > span {
color: var(--darkbrown);
}
/* Style for your 'Follow on Nekoweb' button (<iframe src="https://nekoweb.org/frame/follow" frameborder="0" width="170" height="28"></iframe>) */
.follow {
}

BIN
fonts/Orbitron-Regular.ttf Normal file

Binary file not shown.

BIN
fonts/Roboto-Regular.ttf Normal file

Binary file not shown.

133
home.html Normal file
View File

@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Boreal's Webzone / Home</title>
<link
href="cyanobacteria.css"
rel="stylesheet"
type="text/css"
media="all"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<style>
.responsive-iframe {
position: relative;
justify-content: center;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<span>Boreal's Webzone</span>
</header>
<div class="small">
<nav>
<h1>Navigation</h1>
<a href="https://borealzip.atabook.org">Guestbook</a>
<a href="./collectables">Collectables</a>
<a href="./sitewall.html">Other Sites</a>
<br />
<h4 style="display: flex; justify-content: center">Community AD</h4>
<div style="display: flex; justify-content: center">
<iframe
width="180"
height="180"
style="border: none"
src="https://dimden.neocities.org/navlink/"
name="neolink"
></iframe>
</div>
</nav>
</div>
<section class="half">
<h1>Welcome to my internet zone!</h1>
<p>
This is my site dedicated to experiencing the web like it's the 90s. I
grew up as Web 1.0 was starting to fade out in favor of 2.0 and with
the misuse and misappropriation of 3.0 I decided to go back and try
something tried and true.
</p>
<br />
<h1>Blog</h1>
<iframe
height="750"
class="responsive-iframe"
src="./blog.html"
name="blogframe"
frameborder="0"
></iframe>
</section>
<div class="small">
<nav>
<img src="./images/avator250x250.png" alt="Boreal's Avatar" />
<h1></h1>
<div style="display: flex; justify-content: center; flex-wrap: wrap">
<img
src="https://88by31.neocities.org/web/linux_powered.gif"
alt="Linux Powered"
/>
<br />
<img
src="https://88by31.neocities.org/web/009button.gif"
alt="I use Firefox"
/>
<br />
<img
src="https://88by31.neocities.org/drugs/legal.gif"
alt="legalize Weed"
/>
<br />
<img
src="https://88by31.neocities.org/now/piracy.gif"
alt="Pro Piracy"
/>
<br />
<img src="./images/buttons/gunpla88x31.png" alt="Gunpla" />
<br />
<img src="./images/dablinkie.gif" alt="dablinkie" />
</div>
</nav>
</div>
</div>
<footer>
<span>
Theme based on cyanobacteria.css by
<a href="https://ribo.zone">ribo.zone</a>
<br />
<!-- Start of CuterCounter Code -->
<a href="https://www.cutercounter.com/" target="_blank">
<img
src="https://www.cutercounter.com/hits.php?id=humxppqaq&nd=6&style=21"
border="0"
alt="Unique Visitors"
/>
</a>
<!-- End of CuterCounter Code -->
<br />
<!-- Start of CuterCounter Code -->
<a href="https://www.cutercounter.com/" target="_blank">
<img
src="https://www.cutercounter.com/hits.php?id=hxppqac&nd=6&style=15"
border="0"
alt="Visits"
/>
</a>
<!-- End of CuterCounter Code -->
</span>
</footer>
</body>
</html>

BIN
images/avator250x250.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 401 B

BIN
images/buttons/blinchik.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
images/buttons/cs.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
images/buttons/elimdrm.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 299 B

BIN
images/buttons/magic.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
images/dablinkie.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

22
index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>Boreal's Webzone / Landing</title>
<link
href="cyanobacteria.css"
rel="stylesheet"
type="text/css"
media="all"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
</head>
<body>
<div class="container">
<header></header>
<section class="small">
<h2><a href="./home.html">ENTER SITE</a></h2>
</section>
</div>
</body>
</html>

12
not_found.html Normal file
View File

@ -0,0 +1,12 @@
<!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>Not found.</title>
</head>
<body>
Page was not found.
</body>
</html>

7
prettier.json Normal file
View File

@ -0,0 +1,7 @@
{
"useTabs": true,
"tabWidth": 4,
"html": {
"htmlWhitespaceSensitivity": "ignore"
}
}

46
sitewall.html Normal file
View File

@ -0,0 +1,46 @@
<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" />
<link
href="./cyanobacteria.css"
rel="stylesheet"
type="text/css"
media="all"
/>
<title>Boreal's Webzone / Collectables</title>
</head>
<body>
<div class="container">
<header><span>Other Sites</span></header>
<section class="full">
<h1>Resources</h1>
<a href="https://nekoweb.org/"><img src="https://nekoweb.org/assets/buttons/button5.gif"/></a>
<a href="https://32bit.cafe/"><img src="https://32bit.cafe/linktous/32b-win9x.png"/></a>
<a href="https://99gifshop.neocities.org/"><img src="https://99gifshop.neocities.org/img/88x31.3.png"/></a>
</section>
<section class="full">
<h1>Neighbors</h1>
<a href="https://ribo.zone/"><img src="https://ribo.zone/88x31/site/ribozone.gif"/></a>
</section>
<div class="small"></div>
<div class="small">
<nav>
<a href="./home.html">Back</a>
</nav>
</div>
<div class="small"></div>
</div>
<footer>
<span>
Theme based on cyanobacteria.css by
<a href="https://ribo.zone">ribo.zone</a>
</span>
</footer>
</body>
</html>

136
style.css Normal file
View File

@ -0,0 +1,136 @@
@font-face {
font-family: "Orbitron";
src: url(fonts/Orbitron-Regular.ttf) format("truetype");
}
@font-face {
font-family: "Roboto";
src: url(fonts/Roboto-Regular.ttf) format("truetype");
}
/* start light mode styling */
:root {
--text: darkslategrey;
--border: lightgrey;
--accent: teal;
--bg: #dce3e1;
--gradientTop: white;
--gradientBottom: rgb(240, 248, 255, 0.8);
}
header {
background: url("***light mode banner image***");
}
/* end light mode styling */
/* start dark mode styling */
@media (prefers-color-scheme: dark) {
:root {
--text: #cdd6f4;
--border: #585b70;
--accent: #f38ba8;
--bg: #1e1e2e;
--gradientBottom: #11111b;
--gradientTop: #313244;
a:link {
color: #f38ba8;
}
}
header {
background: url("https://images.freeimages.com/images/large-previews/913/sea-3-1188161.jpg");
}
}
/* end dark mode styling */
* {
box-sizing: border-box;
}
body {
padding-right: 40px;
padding: 0px;
font-family: "Orbitron", sans-serif;
color: var(--text);
/* optional button styling like in the preview */
div.small > img {
display: block;
margin: 5px auto;
border: 2px ridge var(--border);
border-radius: 5px;
}
div {
padding-bottom: 50px
}
section {
border: 2px ridge var(--border);
border-radius: 5px;
background: linear-gradient(var(--gradientTop), var(--gradientBottom));
padding: 5px;
}
footer {
text-align: center;
margin-bottom: 5vw;
font-size: 0.8rem;
}
footer a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Orbitron", sans-serif;
margin: 5px;
line-height: 1.2;
}
h1 {
font-size: 1.4rem;
letter-spacing: 2px;
font-weight: normal;
text-align: center;
border-bottom: 2px ridge var(--border);
padding-bottom: 5px;
}
h2 {
font-size: 1.25rem;
font-weight: normal;
text-align: center;
}
h3 {
font-size: 1.1rem;
}
h4 {
font-size: 1rem;
color: var(--accent);
padding-left: 12px;
}
p {
font-family: "Roboto", sans-serif;
margin: 5px;
line-height: 1.2;
text-indent: 1em;
}
/* prevents overflow on smaller screens */
img {
max-width: 100%;
margin-top: 0.25em;
}
pre {
overflow-x: auto;
}
ul,
ol {
font-family: "Roboto";
}
a:hover,
a:focus {
font-style: italic;
}
a:visited {
color: var(--accent);
}

94
template.html Normal file
View File

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<title> * Your Site Here * </title>
<link href="cyanobacteria.css" rel="stylesheet" type="text/css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<div class="container">
<header>
<span>site name here</span>
</header>
<div class="small">
<nav>
<div>navigation</div>
<a href="">link</a>
<a>link</a>
<a>link</a>
<a>link</a>
<a>link</a>
<a>link</a>
<a>link</a>
<a>longer link</a>
<a>an even longer link</a>
<a>last link</a>
</nav>
<!-- optional spot for styled button outside the navigation box -->
<img src="">
</div>
<section class="half">
<h1>welcome to my homepage!</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>
<strong>This is strong,</strong>
this is normal, and
<em>this is emphasized!</em>
<a href="#">This is a link.</a>
<sup>This is superscript;</sup>
<sub>this is subscript.</sub>
<code>This is code.</code>
<s>This is strikethrough.</s>
</p>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2
<ul>
<li>Nested list</li>
</ul>
</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Unordered list item 1</li>
<li>Unordered list item 2
<ul>
<li>Nested list</li>
</ul>
</li>
<li>Unordered list item 3</li>
</ol>
</section>
<section class="small">
<h2>another section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis orci at sodales convallis. Proin luctus vehicula dolor, id ultrices diam eleifend eu. Donec tincidunt tellus tellus, in maximus lorem fermentum ac. Phasellus sagittis nisi in ante pretium, eget molestie est pellentesque. Ut tincidunt ultricies porta.</p>
</section>
<section class="full">
<h2>full width section</h2>
</section>
<section class="half">
<h2>half width section</h2>
</section>
<section class="half">
<h2>half width section</h2>
</section>
</div>
<footer>
<span>cyanobacteria.css by <a href="https://ribo.zone">ribo.zone</a></span>
</footer>
</body>
</html>