i am done(?) still got logo and fonts to fix

mohsreg · Oct 23, 2023 · ff1601c · ff1601c
1 parent ff324f1
commit ff1601c
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 20 deletions.
diff --git a/index.css b/index.css
@@ -1,3 +1,6 @@
+:root {
+	--logo-height: 42px;
+}
 @font-face {
 	font-family: "vcr-7";
 	src: url("/font/vcr-7.otf") format("opentype");
@@ -25,6 +28,7 @@ body {
 	flex-direction: column;
 	margin-left: 3em;
 	margin-right: 3em;
+	row-gap: 8px;
 }
 .maintitle {
 	font-size: 5em;
@@ -61,3 +65,89 @@ body {
 		brightness(103%) contrast(101%);
 	/* colour=#6364ff*/
 }
+
+.twitch-logo {
+	height: var(--logo-height);
+	width: auto;
+}
+.youtube-logo {
+	height: var(--logo-height);
+	width: auto;
+}
+.twitter-logo {
+	height: var(--logo-height);
+	width: auto;
+}
+.discord-logo {
+	height: var(--logo-height);
+	width: auto;
+}
+.mastodon-logo {
+	height: var(--logo-height);
+	width: auto;
+}
+
+/*glitch code uwu*/
+
+.stack {
+	display: grid;
+	grid-template-columns: 1fr;
+}
+
+.stack span {
+	font-size: 5em;
+	font-weight: 700;
+	font-family: "vcr-7", sans-serif;
+	grid-row-start: 1;
+	grid-column-start: 1;
+	--stack-height: calc(100% / var(--stacks) - 1px);
+	--inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
+	--clip-top: calc(var(--stack-height) * var(--index));
+	--clip-bottom: calc(var(--stack-height) * var(--inverse-index));
+	clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
+	animation: stack 340ms cubic-bezier(0.46, 0.29, 0, 1.24) 1 backwards
+			calc(var(--index) * 120ms),
+		glitch 2s ease infinite 2s alternate-reverse;
+}
+
+.stack span:nth-child(odd) {
+	--glitch-translate: 8px;
+}
+.stack span:nth-child(even) {
+	--glitch-translate: -8px;
+}
+
+@keyframes stack {
+	0% {
+		opacity: 0;
+		transform: translateX(-50%);
+		text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
+	}
+	60% {
+		opacity: 0.5;
+		transform: translateX(50%);
+	}
+	80% {
+		transform: none;
+		opacity: 1;
+		text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
+	}
+	100% {
+		text-shadow: none;
+	}
+}
+
+@keyframes glitch {
+	0% {
+		text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
+		transform: translate(var(--glitch-translate));
+	}
+	2% {
+		text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
+	}
+	4%,
+	100% {
+		text-shadow: none;
+		transform: none;
+	}
+}
diff --git a/index.html b/index.html
@@ -11,47 +11,45 @@
 				class="avatar_full-body"
 			/>
 			<div class="title">
-				<a class="maintitle">mohsregTV</a>
+				<div class="stack" style="--stacks: 3">
+					<span style="--index: 0">mohsregTV</span>
+					<span style="--index: 1">mohsregTV</span>
+					<span style="--index: 2">mohsregTV</span>
+				</div>
 				<a class="status">The Illest TV Screen</a>
 				<div>
 					<a href="https://twitch.tv/mohsregTV"
 						><img
-							width="24"
-							height="24"
-							src="https://img.icons8.com/material/24/twitch.png"
+							width="480"
+							height="480"
+							src="https://img.icons8.com/material/480/twitch.png"
 							alt="twitch"
 							class="twitch-logo"
 					/></a>
-					<a href="https://youtube.com/@mohsregTV"
-						><img
-							width="24"
-							height="24"
-							src="https://img.icons8.com/material/24/youtube-play--v1.png"
+					<a href="https://youtube.com/@mohsregTV">
+						<img
+							width="480"
+							height="480"
+							src="https://img.icons8.com/material/480/youtube-play--v1.png"
 							alt="youtube-play--v1"
 							class="youtube-logo"
 					/></a>
 					<a href="https://twitter.com/mohsregTV"
 						><img
-							width="24"
-							height="24"
-							src="https://img.icons8.com/material/24/twitter-squared.png"
+							src="https://img.icons8.com/material/96/twitter-squared.png"
 							alt="twitter-squared"
 							class="twitter-logo"
 					/></a>
 					<a href="https://discordapp.com/invite/nc92unZxRr"
 						><img
-							width="24"
-							height="24"
-							src="https://img.icons8.com/material/24/discord-new-logo.png"
-							alt="discord-old-logo"
+							src="https://img.icons8.com/material/480/discord-new-logo.png"
+							alt="discord-new-logo"
 							class="discord-logo"
 					/></a>
 					<a href="https://mastodon.online/@mohsreg"
 						><img
-							width="24"
-							height="24"
-							src="https://img.icons8.com/windows/32/mastodon.png"
-							alt="mastodon"
+							src="https://img.icons8.com/external-tal-revivo-bold-tal-revivo/96/external-mastodon-is-an-online-self-hosted-social-media-and-social-networking-service-logo-bold-tal-revivo.png"
+							alt="external-mastodon-is-an-online-self-hosted-social-media-and-social-networking-service-logo-bold-tal-revivo"
 							class="mastodon-logo"
 					/></a>
 				</div>