Merge pull request #25 from tildeclub/deepend-tildeclub-patch-1

Deepend tildeclub patch 1   adding CSS typing effect to <h1>

404.php

@@ -1,6 +1,6 @@
 <?php include "header.php"; ?>
 
-        <h1>$ ERROR 404</h1>
+        <h1 id="fancyboi">$ ERROR 404</h1>
 
 
 

header24h.php

@@ -20,7 +20,7 @@
 
 	<div class="content">
 
-		<h1>$ recently updated</h1>
+		<h1 id="fancyboi">$ recently updated</h1>
 
         <div class="grid">
                 <div class="row">

index.php

@@ -1,6 +1,6 @@
 <?php include "header.php"; ?>
 
-	<h1>$ welcome to tilde.club</h1>
+	<h1 id="fancyboi">$ welcome to tilde.club</h1>
 
 	<p><a href="/wiki/faq.html">Questions? See the official FAQ.</a></p>
 

style.css

@@ -53,9 +53,6 @@ a:hover {color: #f20;}
 hr {
 	border-color: #fb5;
 }
-.text-center {
-	text-align: center
-}
 .advisory {
 	background: #fc4;
 	color: #222;
@@ -63,25 +60,37 @@ hr {
 	padding: 1em;
 	border-radius: 0.25em;
 }
-@keyframes cursor {
-	from { content: "_"; }
-	to { content: ""; }
-}
-@media not (prefers-reduced-motion: reduce) {
-	h1::after {
-		content: "_";
-		animation-name: cursor;
-		animation-iteration-count: infinite;
-		animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-		animation-duration: 1s;
-	}
-}
 h1 {
 	text-transform: uppercase;
 		color: #fb5;
 		font-family: monospace;
 }
 
+/* THEGOODS */
+#fancyboi::before {
+	content: "$ ";
+}
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes flash {
+		50% { opacity: 0; }
+	}
+	@keyframes reveal {
+		from { width: 2em; } /* Width of ::before */
+		  to { width: 100%; }
+	}
+	#fancyboi {
+		overflow: hidden;
+		white-space: nowrap;
+		animation: reveal 4s linear;
+		text-overflow: "â–ˆ";
+	}
+	#fancyboi::after {
+		content: "â–ˆ";
+		animation: flash 0.5s step-end infinite;
+	}
+}
+/* SDOOGEHT */
+
 .sourceCode {
  color:#008000;
 }
@@ -141,4 +150,3 @@ div.alert-success {
 		display: block;
 	}
 }
-

users/index.php

@@ -7,7 +7,7 @@ $title = 'tilde.club users';
 include __DIR__.'/../header.php';
 ?>
 
-<h1>$ full user list</h1>
+<h1 id="fancyboi">$ full user list</h1>
 
 <div class="grid">
 

wiki/index.php

@@ -3,7 +3,7 @@ $title = "tilde.club wiki";
 include __DIR__."/../header.php";
 ?>
 
-<h1>$ the tilde.club wiki</h1>
+<h1 id="fancyboi">$ the tilde.club wiki</h1>
 
 	<div class="grid">
 		<div class="row">

wiki/wiki.tmpl

@@ -49,7 +49,7 @@ $highlighting-css$
 		<div class="content">
 			$if(title)$
 			<header>
-				<h1 class="title">$$ $title$</h1>
+				<h1 id="fancyboi" class="title">$$ $title$</h1>
 
 				$if(subtitle)$
 				<p class="subtitle">$subtitle$</p>