Added async JS loader and new ranni-dark-moon theme

Also added a canvas for custom JS effects. You can test an example by adding the class "stars" to the <body>
askmarkio · Jun 17, 2022 · 79a6ba2 · 79a6ba2
1 parent 44a1086
commit 79a6ba2
Show file tree

Hide file tree

Showing 24 changed files with 532 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ Please feel free to fork and make your own changes!
 - Converted to CSS Flex
 - Fully responsive
 - Support for multiple `bookmarks` containers, allowing more links
-- Added Date/Time with JS
+- Added Date/Time with JS async loader
 - Added fade-in on page load
 - Fixed HTML validation issues
 - Re-organised images into their own folder
@@ -32,14 +32,18 @@ ELDEN RING Press Start `<html lang="en" class="default eldenring-start">`
 
 ![startpage elden ring](screenshots/startpage-eldenring.jpg)
 
-ELDEN RING Lady Ranni `<html lang="en" class="default eldenring-ranni">`
+ELDEN RING Lady Ranni `<html lang="en" class="default eldenring-ranni">` and if you're feeling adventurous `<body class="fade-in ripples">`
 
 ![startpage ranni the witch](screenshots/startpage-ranni.jpg)
 
 ELDEN RING Pot Boy `<html lang="en" class="default eldenring-potboy">`
 
 ![startpage potboy](screenshots/startpage-potboy.jpg)
 
+ELDEN RING Ranni's Dark Moon `<html lang="en" class="default eldenring-ranni-dark-moon">` and for some extra magic `<body class="fade-in stars">`
+
+![startpage potboy](screenshots/startpage-ranni-dark-moon.jpg)
+
 Vapor by [nwvh](https://github.com/nwvh/startpage) `<html lang="en" class="default vapor">`
 
 ![startpage vapor](screenshots/startpage-vapor.jpg)
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -0,0 +1,339 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
+
+/* Themes */
+html.default {
+	--image-path: url(../media/default/cat.gif);
+	--image-aspect-ratio: 1/1;
+	--color-bg: #1e1e2e;
+	--color-fg: #d9e0ee;
+	--color-link: #8f9191;
+	--color-link-visited: #f5c2e7;
+	--color-link-hover: #ff79c6;
+	--color-link-title: #eadbb2;
+	--border-color: #d9e0ee;
+	--border-style: solid;
+	--border-radius: 12px;
+}
+
+html.vapor {
+	--image-path: url(../media/vapor/clouds.gif);
+	--border-color: #ff79c6;
+}
+
+html.eldenring-start {
+	--image-path: url(../media/eldenring/press-start.webp);
+	--image-filter: hue-rotate(calc(var(--hue-rotate) / -1));
+	filter: hue-rotate(var(--hue-rotate));
+	--hue-rotate: -55deg;
+}
+
+html.eldenring-ranni {
+	--image-path: url(../media/eldenring/ranni-the-witch.webp);
+	--image-filter: hue-rotate(calc(var(--hue-rotate) / -1)) saturate(0.4) contrast(1.1);
+	--color-link: #9c97a0;
+	--color-link-title: #eab2b2;
+	--hue-rotate: 5deg;
+	filter: hue-rotate(var(--hue-rotate)) saturate(2);
+}
+
+html.eldenring-ranni-dark-moon {
+	--image-path: url(../media/eldenring/ranni-dark-moon.webp);
+	--image-aspect-ratio: 3/4;
+	--image-filter: hue-rotate(calc(var(--hue-rotate) / -1)) saturate(0.4) contrast(0.9);
+	--color-fg: #bdbfc8;
+	--color-link: #8b8a92;
+	--color-link-visited: #8b82ab;
+	--color-link-hover: #a260f5;
+	--color-link-title: #b7acef;
+	--hue-rotate: -16deg;
+	--canvas-filter: brightness(0.7) contrast(0.84) hue-rotate(20deg) opacity(0.2);
+	filter: hue-rotate(var(--hue-rotate)) saturate(2) contrast(1.2);
+}
+
+html.eldenring-potboy {
+	--image-path: url(../media/eldenring/potboy.gif);
+	--image-filter: hue-rotate(calc(var(--hue-rotate) / -1)) saturate(0.4) contrast(1.1);
+	--color-link: #9c97a0;
+	--color-link-visited: #ffcccc;
+	--color-link-hover: #ff7979;
+	--color-link-title: #eab2b2;
+	--hue-rotate: -15deg;
+	filter: hue-rotate(var(--hue-rotate)) saturate(2);
+}
+
+/* Body and Elements */
+html, body {
+	background: var(--color-bg);
+	color: var(--color-fg);
+	text-align: center;
+	font-family: "Ubuntu";
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+canvas {
+	filter: var(--canvas-filter);
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	z-index: -1;
+	object-fit: cover;
+}
+
+.fade-in {
+	animation: fade-in ease 1s;
+	animation-iteration-count: 1;
+	animation-fill-mode: forwards;
+}
+
+.blur {
+	filter: blur(4px);
+	transition: filter .25s ease-in-out;
+}
+
+.category:hover .blur {
+	filter: blur(0);
+}
+
+#Date {
+	font-family: "Bebas Neue";
+	font-weight: 500;
+	font-size: 40px;
+	min-width: 1px;
+	min-height: 52px;
+	margin: 25px 0;
+}
+
+@media only screen and (max-width: 900px) {
+	#Date {
+		display: flex;
+		align-items: flex-end;
+		height: 110px;
+		margin: 0;
+		position: absolute;
+		right: calc(50% - 430px);
+		top: 0;
+		font-size: 35px;
+		max-width: 170px;
+	}
+}
+
+.border {
+	position: relative;
+	border-radius: var(--border-radius);
+	border-style: var(--border-style);
+	border-color: var(--border-color);
+	overflow: hidden;
+}
+
+.container {
+	display: flex;
+	flex-direction: row;
+	margin: 0 auto;
+	overflow: hidden;
+	position: relative;
+	align-items: center;
+	min-height: 100%;
+	max-width: 1280px;
+}
+
+@media only screen and (max-width: 900px) {
+	.container {
+		flex-direction: column-reverse;
+	}
+}
+
+.left-container {
+	display: flex;
+	flex: 1 0 auto;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	max-width: 360px;
+	width: 280px;
+	margin-left: 50px;
+	-webkit-user-select: none;
+	user-select: none;
+	transition: opacity .25s ease-in-out, visibility .25s ease-in-out;
+}
+
+@media only screen and (max-width: 900px) {
+	.left-container {
+		margin-left: 0;
+		position: absolute;
+		top: 7px;
+		left: calc(50% - 220px);
+		width: 110px;
+	}
+}
+
+@media only screen and (max-width: 500px) {
+	.left-container {
+		visibility: hidden;
+		opacity: 0;
+	}
+}
+
+.right-container {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.about {
+	position: fixed;
+	bottom: 10px;
+	right: 10px;
+	font-size: 10px;
+	opacity: 0.15;
+}
+
+.about a {
+	transition: color .25s ease-in-out;
+}
+
+.image {
+	aspect-ratio: var(--image-aspect-ratio);
+}
+
+@media only screen and (max-width: 900px) {
+	.image {
+		aspect-ratio: 1/1;
+	}
+}
+
+.image, .image a {
+	width: 100%;
+	height: 100%;
+}
+
+.image a {
+	filter: var(--image-filter);
+	display: flex;
+	background-image: var(--image-path);
+	background-size: cover;
+	background-position: center;
+}
+
+.head {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	font-size: 40px;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.category {
+	display: flex;
+	flex-direction: column;
+	width: 25%;
+	flex: 1 1 auto;
+}
+
+@media only screen and (max-width: 1230px) {
+	.category {
+		width: 50%;
+	}
+}
+
+@media only screen and (max-width: 400px) {
+	.category {
+		width: 100%;
+	}
+}
+
+.bookmarks {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+.right-container:hover .bookmarks a {
+	transition: color .25s ease-in-out;
+}
+
+.links {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding-top: 20px;
+	padding-bottom: 10px;
+}
+
+.title {
+	font-size: 20px;
+}
+
+ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+li {
+	font-size: 16px;
+	padding: 5px
+}
+
+p {
+	margin: 0 0 40px;
+}
+
+@media only screen and (max-width: 900px) {
+	p {
+		margin: 40px 0;
+	}
+}
+
+a:link {
+	text-decoration: none;
+	color: var(--color-link);
+}
+
+a:visited {
+	color: var(--color-link-visited);
+}
+
+a:hover {
+	color: var(--color-link-hover);
+}
+
+.title a {
+	color: var(--color-link-title);
+}
+
+.blinking {
+	animation: blinking 1s ease-in-out infinite;
+	opacity: 1;
+}
+
+/* Keyframes */
+@keyframes blinking {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes fade-in {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	 }
+}
diff --git a/assets/js/datetime.js b/assets/js/datetime.js
@@ -0,0 +1,11 @@
+const zeroFill = n => {
+	return ('0' + n).slice(-2);
+}
+
+const interval = setInterval(() => {
+	const now = new Date();
+
+	const dateTime = zeroFill((now.getMonth() + 1)) + '/' + zeroFill(now.getUTCDate()) + '/' + now.getFullYear() + ' ' + zeroFill(now.getHours()) + ':' + zeroFill(now.getMinutes()) + ':' + zeroFill(now.getSeconds());
+
+	document.getElementById("Date").innerHTML = dateTime;
+}, 100);
diff --git a/assets/js/jquery.min.js b/assets/js/jquery.min.js
diff --git a/assets/js/jquery.ripples-config.js b/assets/js/jquery.ripples-config.js
@@ -0,0 +1,5 @@
+$('#startpage').ripples({
+	dropRadius: 50,
+	peturbance: 0.01,
+	resolution: 256,
+});