Updates Big List of Game Development Tools

* Layout Changes

3 files changed, 160 insertions, 56 deletions

diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
index 0f27845..dde835c 100644
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@@ -2,15 +2,11 @@
     <h1><a class="logo" href="/">indrajith.dev</a></h1>
     <nav>
         <ul>
-            <li><a href="/about" id="about" class="links">About</a></li>
-            |
-            <li><a href="/posts" id="posts" class="links">Posts</a></li>
-            |
-            <li><a href="/timeline" id="cv" class="links">Timeline</a></li>
-            |
-            <li><a href="https://git.indrajith.dev" id="cv" class="links">git</a></li>
-            |
-            <li><a href="/contact" id="cv" class="links">Contact</a></li>
+            <li><a href="/about" class="hvr-wobble-bottom" id="about" class="links">About</a></li>
+            <li><a href="/posts" class="hvr-wobble-bottom" id="posts" class="links">Posts</a></li>
+            <li><a href="/timeline" class="hvr-wobble-bottom" id="cv" class="links">Timeline</a></li>
+            <li><a href="https://git.indrajith.dev" class="hvr-wobble-bottom" id="cv" class="links">git</a></li>
+            <li><a href="/contact" id="cv" class="links hvr-wobble-bottom">Contact</a></li>
         </ul>
 
     </nav>
diff --git a/src/css/styles.css b/src/css/styles.css
index 73aeb0c..cd420a7 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -6,7 +6,8 @@
 	src: url("./fonts/Cotory-rgwd9.ttf");
 }
 
-html,body {
+html,
+body {
 	margin: 0;
 	padding: 0;
 }
@@ -32,20 +33,25 @@ footer {
 .header {
 	text-align: center;
 }
+
 .header nav {
 	display: block;
 }
 
-.header ul, footer ul {
+.header ul,
+footer ul {
 	padding: 0px;
 }
 
 .header ul>li {
 	display: inline-block;
-	padding: 10px;
 	text-align: center;
 }
 
+.header ul>li:not(:last-child):after {
+	content: " | ";
+}
+
 .header ul>li a {
 	text-decoration: none;
 	font-size: 15px;
@@ -89,7 +95,9 @@ table {
 	border-collapse: collapse;
 }
 
-th, tr, td {
+th,
+tr,
+td {
 	border: 1px solid;
 }
 
@@ -115,12 +123,127 @@ table td {
 	margin-bottom: 5px;
 }
 
-@media (max-width:1000px)  {
-    body {
-        font-size: 80%;
-        padding: 3%;
-    }
-    #blog img{
-        max-width: 80%;
-    }
+@media (max-width:1000px) {
+	body {
+		font-size: 80%;
+		padding: 3%;
+	}
+
+	#blog img {
+		max-width: 80%;
+	}
 }
+
+
+/* Wobble Bottom */
+@-webkit-keyframes hvr-wobble-bottom {
+	16.65% {
+		-webkit-transform: skew(-12deg);
+		transform: skew(-12deg);
+	}
+
+	33.3% {
+		-webkit-transform: skew(10deg);
+		transform: skew(10deg);
+	}
+
+	49.95% {
+		-webkit-transform: skew(-6deg);
+		transform: skew(-6deg);
+	}
+
+	66.6% {
+		-webkit-transform: skew(4deg);
+		transform: skew(4deg);
+	}
+
+	83.25% {
+		-webkit-transform: skew(-2deg);
+		transform: skew(-2deg);
+	}
+
+	100% {
+		-webkit-transform: skew(0);
+		transform: skew(0);
+	}
+}
+
+@keyframes hvr-wobble-bottom {
+	16.65% {
+		-webkit-transform: skew(-12deg);
+		transform: skew(-12deg);
+	}
+
+	33.3% {
+		-webkit-transform: skew(10deg);
+		transform: skew(10deg);
+	}
+
+	49.95% {
+		-webkit-transform: skew(-6deg);
+		transform: skew(-6deg);
+	}
+
+	66.6% {
+		-webkit-transform: skew(4deg);
+		transform: skew(4deg);
+	}
+
+	83.25% {
+		-webkit-transform: skew(-2deg);
+		transform: skew(-2deg);
+	}
+
+	100% {
+		-webkit-transform: skew(0);
+		transform: skew(0);
+	}
+}
+
+.hvr-wobble-bottom {
+	display: inline-block;
+	vertical-align: middle;
+	-webkit-transform: perspective(1px) translateZ(0);
+	transform: perspective(1px) translateZ(0);
+	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+	-webkit-transform-origin: 100% 0;
+	transform-origin: 100% 0;
+}
+
+.hvr-wobble-bottom:hover,
+.hvr-wobble-bottom:focus,
+.hvr-wobble-bottom:active {
+	-webkit-animation-name: hvr-wobble-bottom;
+	animation-name: hvr-wobble-bottom;
+	-webkit-animation-duration: 1s;
+	animation-duration: 1s;
+	-webkit-animation-timing-function: ease-in-out;
+	animation-timing-function: ease-in-out;
+	-webkit-animation-iteration-count: 1;
+	animation-iteration-count: 1;
+}
+
+
+.tools-container {
+	--auto-grid-min-size: 16rem;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
+	grid-gap: 1rem;
+}
+
+.tool {
+	border: 1px solid #000000;
+    width: 252px;
+    margin: 10px;
+    padding: 10px;
+	box-shadow: 2px 6px;
+}
+
+.tools-container .tool-name *{
+	font-weight: bold;
+	color: #000000;
+}
+
+.tools-container label{
+	font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/posts/big-list-game-dev.njk b/src/posts/big-list-game-dev.njk
index ac97cb3..ec418da 100644
--- a/src/posts/big-list-game-dev.njk
+++ b/src/posts/big-list-game-dev.njk
@@ -15,41 +15,26 @@
     in developing your dream game/prototypes.
 </p>
 <div>
-    <div>
-        <table>
-            <thead>
-                <tr>
-                    <th scope="col"></th>
-                    <th scope="col">
-                                Tool Type
-                            </th>
-                    <th scope="col">
-                                Supported Graphics
-                            </th>
-                    <th scope="col">
-                                Development Environment
-                            </th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for tool in gtools.gameTools%}
-                    <tr>
-                        <td>
-                            <a href={{tool.link}}>{{tool.toolName}}</a>
-                        </td>
-                        <td>
-                            {{tool.type}}
-                        </td>
-                        <td>
-                            {{tool.graphics}}
-                        </td>
-                        <td>
-                            {{tool.os}}
-                        </td>
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+    <div class="tools-container">
+        {% for tool in gtools.gameTools%}
+            <div class="tool">
+                <div class="tool-name">
+                    <a href={{tool.link}}>{{tool.toolName}}</a>
+                </div>
+                <div class="tool-type mt-10">
+                    <label for="tool-type">Type : </label>
+                    {{tool.type}}
+                </div>
+                <div class="tool-graphics">
+                    <label for="tool-graphics">Graphics Supported : </label>
+                    {{tool.graphics}}
+                </div>
+                <div class="tool-os">
+                    <label for="tool-os">Development OS: </label>
+                    {{tool.os}}
+                </div>
+            </div>
+        {% endfor %}
     </div>
 </div>
 <div class="mt-10">