have some fun with bootlegger logo

catskull · Jun 9, 2024 · 21af9b7 · 21af9b7
1 parent 2538ce2
commit 21af9b7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -7,5 +7,5 @@
 			<li><a href="/feed.xml">atom</a></li>
 		</ul>
 	</nav>
-	<img onclick="this.style.display='none'" src="/assets/img/bootlegger.png" aria-hidden="true" id="spinner">
+	<img onclick="this.classList.length ? this.style.display='none' : this.classList.add('explode')" src="/assets/img/bootlegger.png" aria-hidden="true" id="spinner">
 </footer>
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -48,6 +48,8 @@ footer {
 	padding-left: 0.5em;
 	padding-right: 0.5em;
 	border-top: 1px solid;
+	border-right: 1px solid;
+	border-radius: 0 10px 0 0;
 
 	nav > ul{
 		padding-inline-start: 0;
@@ -109,13 +111,41 @@ footer {
 	position: fixed;
 	bottom: 10px;
 	right: 10px;
+	width: 150px;
+	height: 150px;
 	animation: rotate 10s linear infinite;
-	@keyframes rotate {
-	  to {
-	    transform: rotate(360deg);
-	  }
+}
+
+.explode {
+	animation: rotate 3s linear infinite, explode 10s forwards !important;
+}
+
+.explode:hover {
+	opacity: 25%;
+	animation: rotate 3s linear infinite, explode 10s forwards !important;
+}
+
+@keyframes explode {
+	from {
+		bottom: 10px;
+		right: 10px;
+		width: 150px;
+		height: 150px;
+	}
+	to {
+		bottom: calc(50% - 300px);
+		right: calc(50% - 300px);
+		width: 600px;
+		height: 600px;
 	}
 }
 
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
 @import "mobile";
 @import "theme";