20 files changed, 662 insertions, 0 deletions
diff --git a/santa/bgs/postal_bg_m.gif b/santa/bgs/postal_bg_m.gif
new file mode 100644
index 0000000..99987fa
--- /dev/null
+++ b/santa/bgs/postal_bg_m.gif
diff --git a/santa/brdrs/postal_letter_brdr.png b/santa/brdrs/postal_letter_brdr.png
new file mode 100644
index 0000000..1ce7d69
--- /dev/null
+++ b/santa/brdrs/postal_letter_brdr.png
diff --git a/santa/global.css b/santa/global.css
new file mode 100644
index 0000000..e491c14
--- /dev/null
+++ b/santa/global.css
@@ -0,0 +1,47 @@
+/*
+FONT FACES
+*/
+@TEMP {
+    font-family: '';
+    src: url('');
+}
+
+/*
+ROOTS
+*/
+:root {
+    --bg: #d6d6d6;
+    --accent: #465864;
+    --white: #f0e5d1;
+    --blue: #125484;
+    --red: #d55031;
+}
+
+/*
+MISC
+*/
+html {
+    cursor: url(imgs/postal_cursor_close.png), default;
+    image-rendering: pixelated;
+    text-transform: lowercase;
+}
+
+button:hover, a:hover, a:active, button:active {
+    cursor: url(imgs/postal_cursor_open.png), pointer;
+}
+
+body {
+    font-family: "Times New Roman", Times, serif;
+    color: black;
+    font-size: 14px;
+}
+
+a:link, a:visited {
+    color: var(--red);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+    color: var(--blue);
+}
+\ No newline at end of file
diff --git a/santa/imgs/about.png b/santa/imgs/about.png
new file mode 100644
index 0000000..9ccae20
--- /dev/null
+++ b/santa/imgs/about.png
diff --git a/santa/imgs/grass.png b/santa/imgs/grass.png
new file mode 100644
index 0000000..06805b8
--- /dev/null
+++ b/santa/imgs/grass.png
diff --git a/santa/imgs/grass2.png b/santa/imgs/grass2.png
new file mode 100644
index 0000000..7f98ad5
--- /dev/null
+++ b/santa/imgs/grass2.png
diff --git a/santa/imgs/hoard.png b/santa/imgs/hoard.png
new file mode 100644
index 0000000..ea36a45
--- /dev/null
+++ b/santa/imgs/hoard.png
diff --git a/santa/imgs/home.png b/santa/imgs/home.png
new file mode 100644
index 0000000..414febb
--- /dev/null
+++ b/santa/imgs/home.png
diff --git a/santa/imgs/index.png b/santa/imgs/index.png
new file mode 100644
index 0000000..bc253cb
--- /dev/null
+++ b/santa/imgs/index.png
diff --git a/santa/imgs/links.png b/santa/imgs/links.png
new file mode 100644
index 0000000..0fc6a94
--- /dev/null
+++ b/santa/imgs/links.png
diff --git a/santa/imgs/microblog.png b/santa/imgs/microblog.png
new file mode 100644
index 0000000..3bdd6d0
--- /dev/null
+++ b/santa/imgs/microblog.png
diff --git a/santa/imgs/music.png b/santa/imgs/music.png
new file mode 100644
index 0000000..b380233
--- /dev/null
+++ b/santa/imgs/music.png
diff --git a/santa/imgs/postman.png b/santa/imgs/postman.png
new file mode 100644
index 0000000..9622fed
--- /dev/null
+++ b/santa/imgs/postman.png
diff --git a/santa/imgs/sitemap.png b/santa/imgs/sitemap.png
new file mode 100644
index 0000000..182cab8
--- /dev/null
+++ b/santa/imgs/sitemap.png
diff --git a/santa/imgs/sotw.png b/santa/imgs/sotw.png
new file mode 100644
index 0000000..666c344
--- /dev/null
+++ b/santa/imgs/sotw.png
diff --git a/santa/imgs/woman.png b/santa/imgs/woman.png
new file mode 100644
index 0000000..919aa81
--- /dev/null
+++ b/santa/imgs/woman.png
diff --git a/santa/imgs/writing.png b/santa/imgs/writing.png
new file mode 100644
index 0000000..d055599
--- /dev/null
+++ b/santa/imgs/writing.png
diff --git a/santa/main.css b/santa/main.css
new file mode 100644
index 0000000..0502375
--- /dev/null
+++ b/santa/main.css
@@ -0,0 +1,162 @@
+body {
+    width: 600px;
+    margin: auto;
+    background-image: url(bgs/postal_bg_m.gif);
+}
+
+header, #header, #main, #box {
+    position: relative;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin-top: 20px;
+}
+
+#musicTab {
+    left: -255px;
+    top: 50px;
+    position: fixed;
+    z-index: 2;
+    height: 250px;
+    width: 280px;
+    display: flex;
+    flex-direction: row;
+    
+    border-image-slice: 33 10 10 33 fill;
+    border-image-width: 33px 10px 10px 33px;
+    border-image-outset: 0px 0px 0px 0px;
+    border-image-repeat: stretch stretch;
+    border-image-source: url(brdrs/postal_letter_brdr.png);
+    border-style: solid;
+}
+
+#musicTab:hover {
+    left: 0;
+    animation: pullout 0.5s ease;
+}
+
+@keyframes pullout {
+    0% { left: -255px;}
+    100% { left: 0;}
+}
+
+header {
+    color: black;
+    font-size: 28px;
+    font-weight: 700;
+    text-shadow: 
+        var(--white) 2px 2px, 
+        var(--white) -2px 2px,
+        var(--white) 2px -2px,
+        var(--white) -2px -2px;
+    text-align: center;
+}
+
+/* For nav and content layout */
+#main {
+    width: 100%;
+    display: flex;
+    gap: 6px;
+}
+
+/* For content only layout */
+#box {
+    width: 100%;
+}
+
+/* Used for normal titles */
+h1 {
+    font-size: 15px;
+    font-weight: 700;
+    text-shadow: 
+        var(--white) 1px 1px,
+        var(--white) -1px 1px,
+        var(--white) 1px -1px,
+        var(--white) -1px -1px;
+    background-color: var(--accent);
+    margin-top: 6px;
+    padding: 3px;
+    border: 1px solid black;
+    border-radius: 1px;
+    text-align: center;
+}
+
+h2 {
+    font-size: 16px;
+    font-weight: 100;
+}
+
+h3 {
+    font-weight: 600;
+    font-size: 16px;
+}
+
+/* Used for titles that don't scroll */
+h4 {
+    font-size: 15px;
+    font-weight: 700;
+    text-shadow: 
+        var(--white) 1px 1px,
+        var(--white) -1px 1px,
+        var(--white) 1px -1px,
+        var(--white) -1px -1px;
+    background-color: var(--accent);
+    margin-top: 6px;
+    padding: 3px;
+    border-bottom: 1px solid black;
+    border-radius: 1px;
+    text-align: center;
+    position: sticky;
+    top: 0;
+    margin: 0;
+    margin-bottom: 6px;
+}
+
+.scrollbox {
+    border: 1px solid black;
+    border-radius: 1px;
+    max-height: 200px;
+    overflow: scroll;
+    text-align: center; 
+    margin-top: 0;
+    padding-bottom: 10px;
+    margin-bottom: 12px;
+}
+
+.emph {
+    font-weight: 600;
+    color: var(--accent);
+}
+
+.small {
+    font-size: 12px;
+}
+
+.content {
+    border-image-slice: 33 10 10 33 fill;
+    border-image-width: 33px 10px 10px 33px;
+    border-image-outset: 0px 0px 0px 0px;
+    border-image-repeat: stretch stretch;
+    border-image-source: url(brdrs/postal_tab_brdr.png);
+    border-style: solid;
+    
+    max-width: 600px;
+    min-width: 600px;
+    padding: 8px;
+    margin-bottom: 6px;
+}
+
+.footer {
+    width: 500px;
+    text-align: center;
+    margin-top: 20px;
+    margin-left: 60px;
+    
+    border-image-slice: 33 10 10 33 fill;
+    border-image-width: 33px 10px 10px 33px;
+    border-image-outset: 0px 0px 0px 0px;
+    border-image-repeat: stretch stretch;
+    border-image-source: url(brdrs/postal_letter_brdr.png);
+    border-style: solid;
+}
diff --git a/santa/robots.txt b/santa/robots.txt
new file mode 100644
index 0000000..b09000c
--- /dev/null
+++ b/santa/robots.txt
@@ -0,0 +1,197 @@
+# robots.txt
+# https://owly.fans/robots.txt
+# Page is under FOPL-ZERO
+# https://owly.fans/license/fopl-zero
+
+# Want to know when this page is updated? Follow the RSS!
+# https://owly.fans/rss/robots.xml
+
+# This page is also on git:
+# Please feel free to suggest a change to this file
+# https://github.com/DynTylluan/owly.fans/blob/main/robots.txt (main)
+# https://notabug.org/DynTylluan/owly.fans/src/main/robots.txt (mirror)
+# https://tildegit.org/cass/owly.fans/src/branch/main/robots.txt (mirror)
+
+# AdIdxBot (Bing/Microsoft)
+# Used by Bing Ads for «quality control» for, you guessed it, ads!
+# https://bing.com/webmasters/help/which-crawlers-does-bing-use-8c184ec0
+User-Agent: AdIdxBot
+Disallow: /
+
+# Amazon
+# Used for Alexa - does not cite sources.
+# https://developer.amazon.com/support/amazonbot
+User-Agent: Amazonbot
+Disallow: /
+
+# Anthropic
+# «AI research and products that put safety at the
+# frontier» - no thanks!
+# https://anthropic.com
+User-agent: anthropic-ai
+Disallow: /
+
+# Apple's bot
+# Used for Siri and Spotlight Suggestions. Does not cite its sources.
+# https://support.apple.com/en-us/HT204683
+User-Agent: Applebot
+User-Agent: AppleNewsBot
+Disallow: /
+
+# Claude
+# Used to help AI.
+# https://claude.ai
+User-agent: Claude-Web
+Disallow: /
+
+# Cohere
+# Stupid bot used to help artificial intelligence.
+# https://cohere.com
+User-agent: cohere-ai
+Disallow: /
+
+# Common Crawl bot
+# From what I've leant from reading online, «[t]he majority of ChatGPT's
+# training data comes from the Common Crawl crawler bot».
+# Quote: https://datadome.co/threat-research/how-chatgpt-openai-might-use-your-content-now-in-the-future
+# https://commoncrawl.org/faq
+User-agent: CCBot
+Disallow: /
+
+# EmailSiphon
+# Email harvesting bot, get outta here!
+User-agent: EmailSiphon
+Disallow: /
+
+# FacebookBot
+# Used to «improve language models for our speech recognition technology»,
+# so more AI rubbish that I don't want from a company that I don't like.
+User-Agent: FacebookBot
+User-Agent: meta-externalagent
+Disallow: /
+
+# Google's AdSense/StoreBot bots
+# Go away - I don't want you here.
+# https://developers.google.com/search/docs/crawling-indexing/overview-google-crawlers
+User-Agent: AdsBot-Google-Mobile
+User-Agent: Storebot-Google
+User-Agent: AdsBot-Google
+User-agent: Mediapartners-Google
+Disallow: /
+
+# Google's AI training bot
+# I don't want to have my content used without giving me credit.
+# https://blog.google/technology/ai/an-update-on-web-publisher-controls
+User-agent: Google-Extended
+Disallow: /
+
+# GPTBot is OpenAI's web crawler
+# I do not want it to use my content as it does not cite its sources.
+# https://platform.openai.com/docs/gptbot
+User-agent: GPTBot
+User-agent: ChatGPT-User
+Disallow: /
+
+# ia_archiver
+# In the past, the Internet Archive (https://archive.org) used to have a
+# bot called ia_archiver that you could allow (or disallow) to index your
+# website, sometimes around 2017, this crawler stopped obeying robots.txt.
+
+# Putting ia_archiver and setting it to «Disallow: /» will not work. If
+# you really want your website to not be seen on this archive, you will
+# need to E-Mail info@archive.org.
+# https://blog.archive.org/2017/04/17/robots-txt-meant-for-search-engines-dont-work-well-for-web-archives
+# https://web.archive.org/web/20150322111536/http://archive.org/about/exclude.php
+# https://blog.reputationx.com/block-wayback-machine
+
+# Magpie Crawler
+# Used to download pages and get «indexed and analysed by our system».
+# I don't want to use your service!
+User-agent: magpie-crawler
+Disallow: /
+
+# MindSpider
+# According to cdc.gov, this bot «appears to be ill-behaved», so it is
+# being blocked here.
+# https://www.cdc.gov/robots.txt
+User-agent: MindSpider
+Disallow: /
+
+# Pinterest crawler
+# I don't want my website to be used to «collect rich metadata like the
+# price, description and availability of your products» or however they
+# want to word that rubbish.
+# https://help.pinterest.com/en/business/article/pinterest-crawler
+User-agent: Pinterestbot
+Disallow: /
+
+# This is where I copy Bytemoth
+# I am taking it in good faith that Bytemoth knows what he's doing and that
+# the following bots are for marketers - so I am blocking them.
+# As taken from the following URL: http://bytemoth.nfshost.com/robots.txt
+User-agent: adsbot
+User-agent: AhrefsBot
+User-agent: BLEXBot
+User-agent: dotbot
+User-agent: Pandalytics
+User-agent: SemrushBot
+User-agent: SemrushBot-BA
+User-agent: SemrushBot-BM
+User-agent: SemrushBot-CT
+User-agent: SemrushBot-SA
+User-agent: SemrushBot-SI
+User-agent: SemrushBot-SWA
+User-agent: serpstatbot
+User agent: MTRobot
+User-agent: PageThing
+Disallow: /
+
+
+# Bots that you might like to block
+# There are a few bots that I am okay/don't really care all that much if
+# they index my website, but not everyone might be okay with them, so
+# if you copy this TXT on your website and want to have the bot not index
+# it, simply remove the «#» before the «User-agent» and «Disallow» part.
+
+# DuckDuckGo
+# The search engine website uses the following bots to index sites.
+# https://duckduckgo.com/duckduckbot
+# https://duckduckgo.com/duckduckgo-help-pages/results/duckduckbot
+# https://duckduckgo.com/duckduckgo-help-pages/results/sources
+# User-agent: DuckDuckBot
+# Disallow: /
+
+# Other Google bots
+# Don't like Google? Unmark these.
+# https://developers.google.com/search/docs/crawling-indexing/overview-google-crawlers
+# User-agent: Googlebot
+# User-agent: Googlebot-News
+# User-agent: Googlebot-Image
+# User-agent: Googlebot-Video
+# User-agent: Storebot-Google
+# User-agent: Google-InspectionTool
+# User-agent: GoogleOther
+# User-agent: Google-Extended
+# User-agent: APIs-Google
+# User-agent: AdsBot-Google-Mobile
+# User-agent: AdsBot-Google
+# User-agent: Mediapartners-Google
+# User-agent: FeedFetcher-Google
+# User-agent: GoogleProducer
+# User-agent: GoogleProducer; (+http://goo.gl/7y4SX) 
+# User-agent: google-speakr
+# Disallow: /
+
+# Don't allow any bots
+# If you don't want *any* good bots browsing your website, then unmark
+# this. Please note that there are some bots still that don't obay
+# robots.txt at all, like ia_archiver.
+User-agent: *
+Disallow: /
+
+# Allow all bots
+# If you do, however, want to allow all bots, you should uncheck the
+# following. You can also just *not* have a robots.txt and it'll
+# work all the same.
+# User-agent: *
+# Allow: /
+\ No newline at end of file
diff --git a/santa/sitemap.html b/santa/sitemap.html
new file mode 100644
index 0000000..6d00ec8
--- /dev/null
+++ b/santa/sitemap.html
@@ -0,0 +1,256 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<link rel="stylesheet" href="main.css">
+		<link rel="stylesheet" href="global.css">
+		<title>Merry Christmas, Andie!</title>
+		<style>
+			body {
+				width: auto;
+			}
+			
+			.sitemap {
+				position: relative;
+				width: 80vw;
+				height: 80vh;
+				background-color: var(--white);
+		
+				margin: auto;
+
+				border-image-slice: 33 10 10 33 fill;
+				border-image-width: 33px 10px 10px 33px;
+				border-image-outset: 0px 0px 0px 0px;
+				border-image-repeat: stretch stretch;
+				border-image-source: url(brdrs/postal_letter_brdr.png);
+				border-style: solid;
+			}
+
+			.node {
+				position: absolute;
+				transform: translateX(-50%);
+				text-align: center;
+				z-index: 2;
+			}
+
+			.node img {
+			}
+
+			.node span {
+				display: block;
+				margin-top: 6px;
+				font-size: 14px;
+			}
+
+			.circle {
+				display: inline-block;
+				width: 20px;
+				height: 20px;
+				border-radius: 50%;
+				background: var(--white);
+				border: 1px solid black;
+				transition: background 0.2s, transform 0.2s;
+			}
+
+			.circle:hover {
+				border: 1px solid var(--accent);
+				transform: scale(1.1);
+			}
+
+			.lines {
+				position: absolute;
+				inset: 0;
+				pointer-events: none;
+				width: 100%;
+				height: 100%;
+				overflow: visible;
+			}
+
+			.lines line {
+				stroke: bisque;
+				stroke-width: 10;
+			}
+
+			.postman {
+				position: absolute;
+			}
+		</style>
+	</head>
+	<body>
+		<header>Sitemap</header>
+
+		<br>
+
+		<!--
+			You could, instead of coding in the images, draw a map image with the destinations
+			and paths in it. This way you'll only have to code the nodes onto it (which can be
+			done quickly with the <map> tag and an online generator for quick coord fetching.
+			It might be more practical if you update the map in the future. For this method,
+			see the code for https://publictransit.neocities.org/map-old made by June.
+		-->
+
+		<div class="sitemap">
+			<img style="width: 80vw; height: 80vh;" src="imgs/grass2.png">
+
+			<div class="node" style="top: 20px; left: 100px;">	
+				<img src="imgs/index.png" alt="Index">
+				<br>
+				<a href="index.html" class="circle"></a>
+				<span>Index</span>
+			</div>
+
+			<div class="node" style="top: 50px; left: 320px;">	
+				<img src="imgs/home.png" alt="Home">
+				<br>
+				<a href="home.html" class="circle"></a>
+				<span>Home</span>
+			</div>
+
+			<div class="node" style="top: 20px; left: 550px;">
+				<img src="imgs/about.png" alt="About">
+				<br>
+				<a href="about.html" class="circle"></a>
+				<span>About</span>
+			</div>
+
+			<div class="node" style="top: 20px; left: 800px;">
+				<a href="microblog.html" class="circle"></a>
+				<img src="imgs/microblog.png" alt="Microblog">
+				<span>Microblog</span>
+			</div>
+
+			<div class="node" style="top: 200px; left: 180px;">
+				<a href="links.html" class="circle"></a>
+				<img src="imgs/links.png" alt="Links">
+				<span>Links</span>
+			</div>
+
+			<div class="node" style="top: 370px; left: 300px;">
+				<a href="writing.html" class="circle"></a>
+				<br>
+				<img src="imgs/writing.png" alt="Writing">
+				<span>Writing</span>
+			</div>	
+
+			<div class="node" style="top: 220px; left: 450px;">
+				<img src="imgs/music.png" alt="Music">
+				<a href="music.html" class="circle"></a>
+				<span>Music</span>
+			</div>
+
+			<div class="node" style="top: 220px; left: 700px;">
+				<a href="sotw.html" class="circle"></a>
+				<br>
+				<img src="imgs/sotw.png" alt="sotw">
+				<span>SOTW</span>
+			</div>
+			
+			<div class="node" style="top: 180px; left: 950px;">
+				<a href="hoard.html" class="circle"></a>
+				<img src="imgs/hoard.png" alt="Hoard">
+				<span>Hoard</span>
+			</div>
+			
+			<div class="node" style="top: 370px; left: 880px;">
+				<a href="sitemap.html" class="circle"></a>
+				<img src="imgs/sitemap.png" alt="Sitemap">
+				<span>Sitemap</span>
+			</div>
+
+			<svg class="lines">
+				<!-- first row -->
+				<!-- index to home  -->
+				<line x1="110" y1="115" x2="320" y2="145" />
+				<!-- home to about -->
+				<line x1="320" y1="145" x2="550" y2="150"/>
+				<!-- about to microblog -->
+				<line x1="550" y1="150" x2="730" y2="100"/>
+			
+				<!-- second row -->
+				<!-- index to links -->
+				<line x1="100" y1="115" x2="140" y2="290"/>
+				<!-- about to music -->
+				<line x1="550" y1="150" x2="540" y2="340"/>
+				<!-- sotw to hoard -->
+				<line x1="700" y1="230" x2="950" y2="190"/>
+
+				<!-- third row -->
+				<!-- links to writing -->
+				<line x1="140" y1="290" x2="300" y2="380" />
+				<!-- sotw-hoard to sitemap -->
+				<line x1="825" y1="210" x2="815" y2="450"/>
+				<!-- writing to sitemap -->
+				<line x1="300" y1="380" x2="815" y2="440"/>
+			</svg>
+
+			<div class="postman">
+				<img src="imgs/postman.png">
+			</div>
+
+			<script>
+				// queryselector returns first match so i thought it was faster
+				const postman = document.querySelector(".postman");
+				const container = document.querySelector(".sitemap");
+				
+				let targetX = 0;
+				let targetY = 0;
+
+				let currentX = 0;
+				let currentY = 0;
+
+				let lastTargetX = 0;
+				let lastTargetY = 0;
+
+				const ease = 0.04;
+				const moveThreshold = 0.5;
+
+				// get target mouse position relative to map div
+				document.addEventListener("mousemove", (e) => {
+					const rect = container.getBoundingClientRect();
+					targetX = e.clientX - rect.left;
+					targetY = e.clientY - rect.top;
+				});
+
+				function animate() {
+					const rect = container.getBoundingClientRect();
+					const w = postman.offsetWidth;
+					const h = postman.offsetHeight;
+
+					// center postman onto cursor
+					let tx = targetX - w / 2;
+					let ty = targetY - h / 2;
+					
+					// limit movement to div
+					tx = Math.max(0, Math.min(tx, rect.width - w));
+					ty = Math.max(0, Math.min(ty, rect.height - h));
+
+					// get animation distance
+					const dx = tx - currentX;
+					const dy = ty - currentY;
+				
+					// distance is multiplied by ease factor
+					currentX += dx * ease;
+					currentY += dy * ease;
+
+					// flip image
+					if (dx > 0.1) {
+						postman.style.transform = "scaleX(1)";
+					} else if (dx < -0.1) {
+						postman.style.transform = "scaleX(-1)";
+					}
+					
+					// move!
+					postman.style.left = currentX + "px";
+					postman.style.top = currentY + "px";
+
+					// store target for this frame to use in next frame
+					lastTargetX = targetX;
+					lastTargetY = targetY;
+
+					requestAnimationFrame(animate);
+				}
+
+				animate();
+			</script>
+		</div>
+	</body>
+</html>