theme: christmas effect

5 files changed, 161 insertions, 2 deletions

diff --git a/themes/plaintext/layouts/_default/baseof.html b/themes/plaintext/layouts/_default/baseof.html
index 2f38a78..fcc943c 100644
--- a/themes/plaintext/layouts/_default/baseof.html
+++ b/themes/plaintext/layouts/_default/baseof.html
@@ -31,6 +31,7 @@
             {{ partial "footer.html" . }}
         </footer>
     </div>
+    <script src="/snow.js"></script>
 </body>
 
 </html>
diff --git a/themes/plaintext/layouts/index.html b/themes/plaintext/layouts/index.html
index da61394..1684fde 100644
--- a/themes/plaintext/layouts/index.html
+++ b/themes/plaintext/layouts/index.html
@@ -1,5 +1,9 @@
 {{ define "main" }}
-<h1>claw0ry.net</h1>
+
+<div class="page-title">
+    <img src="/santa-hat.png" width="16" height="16" alt="santa's hat" />
+    <h1>claw0ry.net</h1>
+</div>
 
 <div class="intro">
     <p>Hi, my name is Mads! *waves*</p>
@@ -31,7 +35,7 @@
         </h2>
         <p class="post-byline">Posted: {{ .Date.Format "02-03-2006" }} | {{ .WordCount }} words</p>
         <div class="post-body">{{ .Summary }}</div>
-        <p><a href="{{ .Permalink }}">Read more »</a></p>
+        <p><a class="read-more" href="{{ .Permalink }}">Read more »</a></p>
     </article>
 
     <hr />
@@ -42,4 +46,5 @@
 
     <hr />
 </section> <!-- end .post-list -->
+
 {{ end }}
diff --git a/themes/plaintext/static/santa-hat.png b/themes/plaintext/static/santa-hat.png
new file mode 100644
index 0000000..0fd02b1
--- /dev/null
+++ b/themes/plaintext/static/santa-hat.png
diff --git a/themes/plaintext/static/snow.js b/themes/plaintext/static/snow.js
new file mode 100644
index 0000000..8a27324
--- /dev/null
+++ b/themes/plaintext/static/snow.js
@@ -0,0 +1,100 @@
+/*!
+// Snow.js - v0.0.3
+// kurisubrooks.com
+*/
+
+// Amount of Snowflakes
+var snowMax = 35;
+
+// Snowflake Colours
+var snowColor = ["#DDD", "#EEE"];
+
+// Snow Entity
+var snowEntity = "&#x2022;";
+
+// Falling Velocity
+var snowSpeed = 0.75;
+
+// Minimum Flake Size
+var snowMinSize = 8;
+
+// Maximum Flake Size
+var snowMaxSize = 24;
+
+// Refresh Rate (in milliseconds)
+var snowRefresh = 50;
+
+// Additional Styles
+var snowStyles = "cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;";
+
+/*
+// End of Configuration
+// ----------------------------------------
+// Do not modify the code below this line
+*/
+
+var snow = [],
+	pos = [],
+	coords = [],
+	lefr = [],
+	marginBottom,
+	marginRight;
+
+function randomise(range) {
+	rand = Math.floor(range * Math.random());
+	return rand;
+}
+
+function initSnow() {
+	var snowSize = snowMaxSize - snowMinSize;
+	marginBottom = document.body.scrollHeight - 5;
+	marginRight = document.body.clientWidth - 15;
+
+	for (i = 0; i <= snowMax; i++) {
+		coords[i] = 0;
+		lefr[i] = Math.random() * 15;
+		pos[i] = 0.03 + Math.random() / 10;
+		snow[i] = document.getElementById("flake" + i);
+		snow[i].style.fontFamily = "inherit";
+		snow[i].size = randomise(snowSize) + snowMinSize;
+		snow[i].style.fontSize = snow[i].size + "px";
+		snow[i].style.color = snowColor[randomise(snowColor.length)];
+		snow[i].style.zIndex = 1000;
+		snow[i].sink = snowSpeed * snow[i].size / 5;
+		snow[i].posX = randomise(marginRight - snow[i].size);
+		snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size);
+		snow[i].style.left = snow[i].posX + "px";
+		snow[i].style.top = snow[i].posY + "px";
+	}
+
+	moveSnow();
+}
+
+function resize() {
+	marginBottom = document.body.scrollHeight - 5;
+	marginRight = document.body.clientWidth - 15;
+}
+
+function moveSnow() {
+	for (i = 0; i <= snowMax; i++) {
+		coords[i] += pos[i];
+		snow[i].posY += snow[i].sink;
+		snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + "px";
+		snow[i].style.top = snow[i].posY + "px";
+
+		if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) {
+			snow[i].posX = randomise(marginRight - snow[i].size);
+			snow[i].posY = 0;
+		}
+	}
+
+	setTimeout("moveSnow()", snowRefresh);
+}
+
+for (i = 0; i <= snowMax; i++) {
+	document.write("<span id='flake" + i + "' style='" + snowStyles + "position:absolute;top:-" + snowMaxSize + "'>" + snowEntity + "</span>");
+}
+
+window.addEventListener('resize', resize);
+window.addEventListener('load', initSnow);
+
diff --git a/themes/plaintext/static/style.css b/themes/plaintext/static/style.css
index e4bdb08..12ecd33 100644
--- a/themes/plaintext/static/style.css
+++ b/themes/plaintext/static/style.css
@@ -72,6 +72,45 @@ table tr td {
     display: inline-block;
 }
 
+/* CHRISTMAS THEME */
+/* RED: #D6001C;
+ * GREEN: #00873E;
+ */
+body {
+    background: #D6001C;
+    color: white;
+}
+
+hr {
+    border-color: #00873E;
+    border-width: 2px;
+}
+
+a,
+a:hover {
+    color: white;
+    font-style: italic;
+}
+
+pre {
+    background: #00873E;
+    overflow-x: auto;
+    padding: 10px;
+    font-size: 14px;
+}
+
+.page-title h1 {
+    margin: 0;
+    display: inline-block;
+}
+
+.post-title a,
+.read-more {
+    color: white;
+    background: #00873E;
+    font-style: normal;
+}
+
 @media (prefers-color-scheme: dark) {
     body {
         background: #212121;
@@ -85,4 +124,18 @@ table tr td {
     a:visited {
         color: #96f;
     }
+
+    /* christmas */
+    a,
+    a:hover,
+    a:visited {
+        color: #D6001C;
+    }
+
+    .post-title a,
+    .read-more,
+    .read-more:hover,
+    .read-more:visited {
+        color: white;
+    }
 }