almost working site

assets/css/lore.css

@@ -0,0 +1,192 @@
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
+body {
+  background-color: black;
+  color: white;
+}
+
+.light {
+  color: black !important;
+  background: white !important;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+}
+
+.title {
+  font-size: 5vh;
+  margin: 0;
+  text-align: center;
+  padding: 30px 0 0 0;
+}
+
+.toggle {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+.subtitle {
+  font-size: 3vh;
+  bottom: 50px;
+  text-align: center;
+}
+
+sub {
+  font-size: 1vh;
+}
+
+.center {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  padding: 90px 0 0 0;
+}
+
+a {
+  text-decoration: none;
+  color: white;
+}
+
+body.light a {
+  color: black;
+}
+
+#box {
+  position: absolute;
+  z-index: 999;
+  border: 25px solid white;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  -webkit-transition: border-color 0.5s ease-in-out;
+  transition: border-color 0.5s ease-in-out;
+}
+
+body.light #box {
+  position: absolute;
+  z-index: 999;
+  border: 25px solid black;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  -webkit-transition: border-color 0.5s ease-in-out;
+  transition: border-color 0.5s ease-in-out;
+}
+
+.monty:hover {
+  color: #ff6d62;
+}
+
+.monty:hover ~ #box {
+  border-color: #ff6d62;
+}
+
+.monty::-moz-selection {
+  color: white;
+  background-color: #ff6d62;
+}
+
+.monty::selection {
+  color: white;
+  background-color: #ff6d62;
+}
+
+body.light .monty::-moz-selection {
+  color: black;
+  background-color: #ff877c;
+}
+
+body.light .monty::selection {
+  color: black;
+  background-color: #ff877c;
+}
+
+.ryden:hover {
+  color: #a8fd77;
+}
+
+.ryden:hover ~ #box {
+  border-color: #a8fd77;
+}
+
+.ryden::-moz-selection {
+  color: white;
+  background-color: #a8fd77;
+}
+
+.ryden::selection {
+  color: white;
+  background-color: #a8fd77;
+}
+
+body.light .ryden::-moz-selection {
+  color: black;
+  background-color: #c2ff91;
+}
+
+body.light .ryden::selection {
+  color: black;
+  background-color: #c2ff91;
+}
+
+.thaldrin:hover {
+  color: #ff995d;
+}
+
+.thaldrin:hover ~ #box {
+  border-color: #ff995d;
+}
+
+.thaldrin::-moz-selection {
+  color: white;
+  background-color: #ff995d;
+}
+
+.thaldrin::selection {
+  color: white;
+  background-color: #ff995d;
+}
+
+body.light .thaldrin::-moz-selection {
+  color: black;
+  background-color: #ffb377;
+}
+
+body.light .thaldrin::selection {
+  color: black;
+  background-color: #ffb377;
+}
+
+.monty {
+  font-size: 6vh;
+}
+
+.ryden {
+  font-size: 6vh;
+}
+
+.thaldrin {
+  font-size: 6vh;
+}
+/*# sourceMappingURL=lore.css.map */

assets/css/lore.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "lore.scss"
+    ],
+    "names": [],
+    "file": "lore.css"
+}

assets/css/lore.scss

@@ -0,0 +1,112 @@
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
+$accent-color: red;
+
+body {
+	background-color: rgb(0, 0, 0);
+	color: rgb(255, 255, 255);
+	//font-size: 3vw;
+}
+
+.light {
+	color: black !important;
+	background: white !important;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	font-family: 'Roboto', sans-serif;
+}
+.title {
+	//font-family: 'Source Sans Pro', sans-serif !important;
+	font-size: 5vh;
+	margin: 0;
+	//bottom: 5px;
+	//	height: 1%;
+	text-align: center;
+	padding: 30px 0 0 0;
+}
+.toggle {
+	cursor: grab;
+}
+.subtitle {
+	//font-family: 'Source Sans Pro', sans-serif !important;
+	font-size: 3vh;
+	bottom: 50px;
+	//height: 1%;
+	text-align: center;
+}
+sub {
+	font-size: 1vh;
+}
+
+.center {
+	//height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 90px 0 0 0;
+}
+a {
+	text-decoration: none;
+	color: white;
+}
+
+body.light a {
+	color: black;
+}
+
+#box {
+	position: absolute;
+	z-index: 999;
+	border: 25px solid white;
+	box-sizing: border-box;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	pointer-events: none;
+	transition: border-color 0.5s ease-in-out;
+}
+
+body.light #box {
+	position: absolute;
+	z-index: 999;
+	border: 25px solid black;
+	box-sizing: border-box;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	pointer-events: none;
+	transition: border-color 0.5s ease-in-out;
+}
+
+$accents: ("monty": #ff6d62, "ryden": #a8fd77, "thaldrin": #ff995d);
+$links: ('monty', 'ryden', 'thaldrin');
+$time: 2s;
+@each $link, $color in $accents {
+	.#{$link}:hover {
+		color: $color;
+
+		& ~ #box {
+			border-color: $color;
+		}
+	}
+	.#{$link}::selection {
+		color: white;
+		background-color: $color;
+	}
+	body.light .#{$link}::selection {
+		//color: $color + 9a;
+		color: black;
+		background-color: $color + 26;
+	}
+}
+@each $link in $links {
+	.#{$link} {
+		font-size: 6vh;
+	}
+}

assets/css/main.css

@@ -19,6 +19,8 @@ body {
 .title {
   font-size: 13vh;
   margin: 0;
+  cursor: -webkit-grab;
+  cursor: grab;
 }
 
 sub {

assets/css/main.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "main.scss"
     ],

assets/css/main.scss

@@ -23,6 +23,7 @@ body {
 	//font-family: 'Source Sans Pro', sans-serif !important;
 	font-size: 13vh;
 	margin: 0;
+	cursor: grab;
 }
 sub {
 	font-size: 1vh;
@@ -44,7 +45,6 @@ body.light a {
 	color: black;
 }
 
-
 #box {
 	position: absolute;
 	z-index: 999;

assets/css/portfolio.css

@@ -0,0 +1,192 @@
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
+body {
+  background-color: black;
+  color: white;
+}
+
+.light {
+  color: black !important;
+  background: white !important;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+}
+
+.title {
+  font-size: 5vh;
+  margin: 0;
+  text-align: center;
+  padding: 30px 0 0 0;
+}
+
+.toggle {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+.subtitle {
+  font-size: 3vh;
+  bottom: 50px;
+  text-align: center;
+}
+
+sub {
+  font-size: 1vh;
+}
+
+.center {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  padding: 90px 0 0 0;
+}
+
+a {
+  text-decoration: none;
+  color: white;
+}
+
+body.light a {
+  color: black;
+}
+
+#box {
+  position: absolute;
+  z-index: 999;
+  border: 25px solid white;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  -webkit-transition: border-color 0.5s ease-in-out;
+  transition: border-color 0.5s ease-in-out;
+}
+
+body.light #box {
+  position: absolute;
+  z-index: 999;
+  border: 25px solid black;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  -webkit-transition: border-color 0.5s ease-in-out;
+  transition: border-color 0.5s ease-in-out;
+}
+
+.yiff:hover {
+  color: #ff6d62;
+}
+
+.yiff:hover ~ #box {
+  border-color: #ff6d62;
+}
+
+.yiff::-moz-selection {
+  color: white;
+  background-color: #ff6d62;
+}
+
+.yiff::selection {
+  color: white;
+  background-color: #ff6d62;
+}
+
+body.light .yiff::-moz-selection {
+  color: black;
+  background-color: #ff877c;
+}
+
+body.light .yiff::selection {
+  color: black;
+  background-color: #ff877c;
+}
+
+.thaldrin:hover {
+  color: #ff995d;
+}
+
+.thaldrin:hover ~ #box {
+  border-color: #ff995d;
+}
+
+.thaldrin::-moz-selection {
+  color: white;
+  background-color: #ff995d;
+}
+
+.thaldrin::selection {
+  color: white;
+  background-color: #ff995d;
+}
+
+body.light .thaldrin::-moz-selection {
+  color: black;
+  background-color: #ffb377;
+}
+
+body.light .thaldrin::selection {
+  color: black;
+  background-color: #ffb377;
+}
+
+.homepage:hover {
+  color: #ac9efc;
+}
+
+.homepage:hover ~ #box {
+  border-color: #ac9efc;
+}
+
+.homepage::-moz-selection {
+  color: white;
+  background-color: #ac9efc;
+}
+
+.homepage::selection {
+  color: white;
+  background-color: #ac9efc;
+}
+
+body.light .homepage::-moz-selection {
+  color: black;
+  background-color: #c6b8ff;
+}
+
+body.light .homepage::selection {
+  color: black;
+  background-color: #c6b8ff;
+}
+
+.yiff {
+  font-size: 6vh;
+}
+
+.thaldrin {
+  font-size: 6vh;
+}
+
+.homepage {
+  font-size: 6vh;
+}
+/*# sourceMappingURL=portfolio.css.map */

assets/css/portfolio.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "portfolio.scss"
+    ],
+    "names": [],
+    "file": "portfolio.css"
+}

assets/css/portfolio.scss

@@ -0,0 +1,112 @@
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
+$accent-color: red;
+
+body {
+	background-color: rgb(0, 0, 0);
+	color: rgb(255, 255, 255);
+	//font-size: 3vw;
+}
+
+.light {
+	color: black !important;
+	background: white !important;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	font-family: 'Roboto', sans-serif;
+}
+.title {
+	//font-family: 'Source Sans Pro', sans-serif !important;
+	font-size: 5vh;
+	margin: 0;
+	//bottom: 5px;
+	//	height: 1%;
+	text-align: center;
+	padding: 30px 0 0 0;
+}
+.toggle {
+	cursor: grab;
+}
+.subtitle {
+	//font-family: 'Source Sans Pro', sans-serif !important;
+	font-size: 3vh;
+	bottom: 50px;
+	//height: 1%;
+	text-align: center;
+}
+sub {
+	font-size: 1vh;
+}
+
+.center {
+	//height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 90px 0 0 0;
+}
+a {
+	text-decoration: none;
+	color: white;
+}
+
+body.light a {
+	color: black;
+}
+
+#box {
+	position: absolute;
+	z-index: 999;
+	border: 25px solid white;
+	box-sizing: border-box;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	pointer-events: none;
+	transition: border-color 0.5s ease-in-out;
+}
+
+body.light #box {
+	position: absolute;
+	z-index: 999;
+	border: 25px solid black;
+	box-sizing: border-box;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	pointer-events: none;
+	transition: border-color 0.5s ease-in-out;
+}
+
+$accents: ("yiff": #ff6d62, "thaldrin": #ff995d, "homepage": #ac9efc);
+$links: ('yiff', 'thaldrin', 'homepage');
+$time: 2s;
+@each $link, $color in $accents {
+	.#{$link}:hover {
+		color: $color;
+
+		& ~ #box {
+			border-color: $color;
+		}
+	}
+	.#{$link}::selection {
+		color: white;
+		background-color: $color;
+	}
+	body.light .#{$link}::selection {
+		//color: $color + 9a;
+		color: black;
+		background-color: $color + 26;
+	}
+}
+@each $link in $links {
+	.#{$link} {
+		font-size: 6vh;
+	}
+}

assets/js/lore.js

@@ -0,0 +1 @@
+console.log('Lore Page');

assets/js/main.js

@@ -1,21 +1,9 @@
-/* let portfolio = document.getElementsByClassName('portfolio');
-let art = document.getElementsByClassName('art');
-let lore = document.getElementsByClassName('lore');
-let box = document.getElementById('box');
-
-let links = [ portfolio[0], art[0], lore[0] ];
-
-links.forEach((link) => {
-	setTimeout(() => {
-		link.classList.add('show');
-	}, 3 * 1000);
-});
- */
 let scheme = window.matchMedia(`(prefers-color-scheme: dark)`);
 let theme = window.localStorage.getItem('prefer-light');
 let title = document.getElementsByClassName('title')[0];
 let body = document.getElementsByTagName('body')[0];
-let toggle = document.getElementById('theme-switch');
+let toggle = document.getElementsByClassName('toggle')[0];
+
 if (theme === 'yes') {
 	body.classList.add('light');
 } else if (theme === 'no') {
@@ -31,8 +19,8 @@ if (theme === 'yes') {
 	}
 }
 
-/* toggle.addEventListener('click', (e) => {
-	console.log(e);
+toggle.addEventListener('click', (e) => {
+	//console.log(e);
 	body.classList.toggle('light');
 	if (body.classList.contains('light')) {
 		window.localStorage.setItem('prefer-light', 'yes');
@@ -42,4 +30,3 @@ if (theme === 'yes') {
 		console.log('user likes dark');
 	}
 });
- */