* Article Layout Changes

* Style Fixes

4 files changed, 129 insertions, 65 deletions

diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css
index 67f071f..8cd32c5 100644
--- a/src/_includes/assets/css/styles.css
+++ b/src/_includes/assets/css/styles.css
@@ -827,21 +827,31 @@ select {
   margin-bottom: 1rem;
 }
 
-.my-10 {
-  margin-top: 2.5rem;
-  margin-bottom: 2.5rem;
-}
-
 .my-0 {
   margin-top: 0px;
   margin-bottom: 0px;
 }
 
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
 .-my-5 {
   margin-top: -1.25rem;
   margin-bottom: -1.25rem;
 }
 
+.-mx-6 {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+
+.-mx-8 {
+  margin-left: -2rem;
+  margin-right: -2rem;
+}
+
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -926,6 +936,10 @@ select {
   margin-bottom: 0.75rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .ml-0 {
   margin-left: 0px;
 }
@@ -938,8 +952,12 @@ select {
   margin-top: 2rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
+.ml-10 {
+  margin-left: 2.5rem;
+}
+
+.ml-7 {
+  margin-left: 1.75rem;
 }
 
 .block {
@@ -962,6 +980,10 @@ select {
   display: table;
 }
 
+.inline-table {
+  display: inline-table;
+}
+
 .grid {
   display: grid;
 }
@@ -1002,22 +1024,30 @@ select {
   width: 0.5rem;
 }
 
+.w-1 {
+  width: 0.25rem;
+}
+
 .w-12 {
   width: 3rem;
 }
 
-.w-1 {
-  width: 0.25rem;
+.w-auto {
+  width: auto;
 }
 
-.max-w-4xl {
-  max-width: 56rem;
+.min-w-full {
+  min-width: 100%;
 }
 
 .max-w-5xl {
   max-width: 64rem;
 }
 
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .max-w-md {
   max-width: 28rem;
 }
@@ -1144,6 +1174,10 @@ select {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1270,14 +1304,14 @@ select {
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
-.bg-lightish-50 {
+.bg-darkish-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 236 214 / var(--tw-bg-opacity));
+  background-color: rgb(84 78 104 / var(--tw-bg-opacity));
 }
 
-.bg-darkish-100 {
+.bg-lightish-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(84 78 104 / var(--tw-bg-opacity));
+  background-color: rgb(255 236 214 / var(--tw-bg-opacity));
 }
 
 .bg-darkish-50 {
@@ -1375,6 +1409,11 @@ select {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1400,6 +1439,10 @@ select {
   padding: 2.5rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1440,6 +1483,11 @@ select {
   padding-bottom: 3rem;
 }
 
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .pt-3 {
   padding-top: 0.75rem;
 }
@@ -1520,16 +1568,16 @@ select {
   line-height: 1.75rem;
 }
 
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1555,6 +1603,10 @@ select {
   font-weight: 500;
 }
 
+.font-light {
+  font-weight: 300;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -1622,6 +1674,11 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .text-darkish-300 {
   --tw-text-opacity: 1;
   color: rgb(13 43 69 / var(--tw-text-opacity));
@@ -1915,11 +1972,6 @@ pre[class*="language-"] {
   color: rgb(13 43 69 / var(--tw-text-opacity));
 }
 
-.hover\:underline:hover {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
-}
-
 .focus\:border-indigo-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
@@ -1950,6 +2002,11 @@ pre[class*="language-"] {
     grid-column: span 2 / span 2;
   }
 
+  .sm\:-mx-6 {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+  }
+
   .sm\:overflow-hidden {
     overflow: hidden;
   }
@@ -2035,7 +2092,13 @@ pre[class*="language-"] {
 }
 
 @media (min-width: 1024px) {
-  .lg\:rounded-lg {
-    border-radius: 0.5rem;
+  .lg\:-mx-8 {
+    margin-left: -2rem;
+    margin-right: -2rem;
+  }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/_includes/posts.njk b/src/_includes/posts.njk
index c660276..8eedbbc 100644
--- a/src/_includes/posts.njk
+++ b/src/_includes/posts.njk
@@ -5,8 +5,8 @@
     </head>
     <body class="flex h-screen flex-col font-supply-regular bg-main-cream-white-2">
         {% include "./partials/header.njk" %}
-        <main class="container mx-auto max-w-5xl p-8">
-            <section class="w-full flex flex-col items-center px-3">
+        <main class="container mx-auto w-full p-8">
+            <section class="flex-col items-center px-3">
                 <article class="flex flex-col my-4">
                     <div class="flex flex-col justify-start p-6 ">
                         <div>
@@ -18,16 +18,16 @@
                         </div>
                     </div>
                 </article>
-                <div class="flex flex-col text-left text-xs">
-                    <span class="text-left">If you found this article useful, spread the word by sharing this link 👉
-                        <span class="w-1 text-left absolute ml-2 my-0">
+                <div class="flex flex-col text-xs text-center">
+                    <span>If you found this article useful, spread the word by sharing this link 👉
+                        <span class="w-1 absolute ml-2 my-0">
                             <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-via="indrajithKLIS" data-hashtags="#gamedev #indiegamedev #gametools" data-show-count="false">Tweet</a>
                             <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                         </span>
                     </span>
                 </div>
-                <div class="flex flex-col my-4">
-                    <a class="flex flex-col justify-start" href="/posts">back to posts</a>
+                <div class="my-4">
+                    <a class="justify-start bg-main-red rounded-md p-3 text-main-cream-white-1" href="/posts"><span class="absolute">{% feather "arrow-left" %}</span> <span class="ml-7">back to posts</span></a>
                 </div>
             </section>
 
diff --git a/src/css/styles.css b/src/css/styles.css
index 3cbd164..e6e85cd 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -138,4 +138,4 @@ pre[class*="language-"] {
 .article-intro::first-letter {
 	font-size: 2rem;
     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 921daea..9fadb58 100644
--- a/src/posts/big-list-game-dev.njk
+++ b/src/posts/big-list-game-dev.njk
@@ -12,52 +12,53 @@ title: Big List of Open Source Game Development Tools
     introduce your own functionality in the tools/engine you are using.
 </p>
 
-<p class="mt-5">Welcome to the big list (eventually it will be) of always updating list of<span class="font-bold">Open Source Game Development Tools</span>.
+<p class="mt-5">Welcome to the big list (eventually it will be) of always updating list of <span class="font-bold">Open Source Game Development Tools</span>.
     Here you find not only Game Engines but other open source tools and utilities that will help you
     in developing your dream game/prototypes.
 </p>
-<p class="mt-5">
-    <div class="overflow-x-auto relative shadow-md lg:rounded-lg border-main-dark-brown-2">
-        <table class="mx-auto max-w-4xl w-full text-sm text-left table-auto">
-            <thead class="text-xs uppercase bg-main-normal-brown border-b border-main-dark-brown-2">
+<div class="mt-5">
+    <div class="overflow-auto">
+        <table class="min-w-full">
+            <thead class="border-b">
                 <tr>
-                    <th scope="col" class="py-3 px-6 bg-lightish-50">
-                    Tool
-                </th>
-                    <th scope="col" class="py-3 px-6 text-main-cream-white-1">
-                    Tool Type
-                </th>
-                    <th scope="col" class="py-3 px-6 bg-lightish-50">
-                    Supported Graphics
-                </th>
-                    <th scope="col" class="py-3 px-6 text-main-cream-white-1">
-                    OS Supported
-                </th>
-                    <th scope="col" class="py-3 px-6 bg-lightish-50">
-                    Link
-                </th>
+                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                                Tool
+                            </th>
+                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                                Tool Type
+                            </th>
+                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                                Supported Graphics
+                            </th>
+                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                                OS Supported
+                            </th>
+                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                                Link
+                            </th>
                 </tr>
             </thead>
             <tbody>
                 {% for tool in gtools.gameTools%}
-                    <tr class="bg-main-normal-brown border-b border-main-dark-brown-2">
-                        <th scope="row" class="py-4 px-6 font-medium whitespace-nowrap bg-lightish-50">{{tool.toolName}}
-                        </th>
-                        <td class="py-4 px-6 text-main-cream-white-1">
+                    <tr class="border-b">
+                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
+                            {{tool.toolName}}
+                        </td>
+                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                             {{tool.type}}
                         </td>
-                        <td class="py-4 px-6 bg-lightish-50">
+                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                             {{tool.graphics}}
                         </td>
-                        <td class="py-4 px-6 text-main-cream-white-1">
+                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                             {{tool.os}}
                         </td>
-                        <td class="py-4 px-6 bg-lightish-50">
-                            <a href={{tool.link}} class="font-medium hover:underline">{{tool.link}}</a>
+                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
+                            {{tool.link}}
                         </td>
                     </tr>
                 {% endfor %}
             </tbody>
         </table>
     </div>
-</p>
+</div>
\ No newline at end of file