Made some cool animations and stuff

tuxcord/members.json

@@ -35,6 +35,7 @@
 	},
 	{
 		"name": "Spamix",
+		"pfp": "spamix.png",
 		"website": "https://decompil.in"
 	}
 

tuxcord/static/index.css

@@ -1,5 +1,6 @@
 :root {
-	--accent: #28ebb5
+	--accent: #28ebb5;
+	--accent2: #3a7dff;
 }
 body {
 	background: #000000;
@@ -31,37 +32,68 @@ hr {
 }
 #ascii-clippy {
 	position: absolute;
-	top: 10px;
-	left: 650px;
+	top: 75px;
+	left: 861px;
 	font-size: 10px;
-	transform: rotate(-0.3rad);
+	transform: rotate(-36deg);
+	animation: rotate 2s linear infinite;
+	animation-play-state: paused;
+	width: 40px;
+}
+#ascii-clippy:hover {
+	animation-play-state: running;
+}
+#ascii-exclamation {
+	display: none;
+	position: absolute;
+	left: 548px;
+  	top: 11px;
+}
+#ascii-tuxcord:hover {
+	#ascii-exclamation {
+		display: inline;
+	}
 }
 a {
 	text-decoration: none;
 	color: var(--accent);
 }
+a:hover {
+	text-decoration: bold;
+	color: var(--accent2);
+}
 
 #member img {
 	width: 100px;
 	border-radius: 50%;
 }
-#member img:hover {
-    	filter: drop-shadow(0 0 3px #202020);
-}
 #member-role {
 	color: #888888;
 }
 #members {
 	display: grid;
-	grid-template-columns: auto auto auto auto;
+	grid-template-columns: auto auto auto auto auto;
 }
 #members div {
 	padding: 10px;
-	border-bottom: 1px solid var(--accent);
+	border-bottom: 1px solid white;
 	text-align: center;
 	margin: 20px;
 }
 #member:hover {
-	transform: scale(1.2);
+	animation-name: grow;
+	border-bottom: 1px solid white;
+	animation-duration: 1s;
 	background: #222222;
 }
+#member:active {
+	background: #666666;
+}
+@keyframes grow {
+  	from {transform: scale(1);}
+  	to {transform: scale(1.2);}
+}
+@keyframes rotate {
+	from { transform: rotate(-36deg); }
+	to { transform: rotate(324deg); }
+}

tuxcord/templates/header.html

@@ -1,13 +1,20 @@
-
 <pre>
-<a href="/" class="no-spin">
-          __                                          __                      __      
+	<a id='ascii-tuxcord' href="/" class="no-spin">
+	  __                                          __                      __      
 ---------/\ \__                                      /\ \                    /\ \__   
 ---------\ \ ,_\  __  __  __  _   ___    ___   _ __  \_\ \        ___      __\ \ ,_\  
 ----------\ \ \/ /\ \/\ \/\ \/'\ /'___\ / __`\/\`'__\/'_` \      /'_ `\  /'__`\ \ \/  
 -----------\ \ \_\ \ \_\ \/>  &lt;//\ \__//\ \L\ \ \ \//\ \L\ \  __/\ \/\ \/\  __/\ \ \_ 
 ------------\ \__\\ \____//\_/\_\ \____\ \____/\ \_\\ \___,_\/\_\ \_\ \_\ \____\\ \__\
--------------\/__/ \/___/ \//\/_/\/____/\/___/  \/_/ \/__,_ /\/_/\/_/\/_/\/____/ \/__/</a>
-					                  A friendly Linux community.
+-------------\/__/ \/___/ \//\/_/\/____/\/___/  \/_/ \/__,_ /\/_/\/_/\/_/\/____/ \/__/
+							  A friendly Linux community.
 
+<span id='ascii-exclamation'>
+	 __     
+	/\ \    
+	\ \ \   
+	 \ \ \  
+	  \ \_\ 
+	   \/\_\
+	    \/_/</span></a>
 </pre>

tuxcord/tuxcord/urls.py

@@ -25,7 +25,7 @@ def members_grid():
         members_object = json.load(members_file)
         for member in members_object:
             members_grid_html += f'''
-            {f'<a href="{member["website"]}">' if "website" in member else ''}
+            {f'<a href="{member["website"]}" target="_blank">' if "website" in member else ''}
                 <div id="member">
                     <span id='member-image'><img src="/static/{member["pfp"] if "pfp" in member else 'generic.png'}"></span>
                     <br/>