From bc7de097653163871d569b588217e33596ba229a Mon Sep 17 00:00:00 2001
From: Indrajith K L
Date: Mon, 31 Oct 2022 18:55:14 +0530
Subject: * Article Layout Changes * Style Fixes
---
src/_includes/assets/css/styles.css | 119 +++++++++++++++++++++++++++---------
src/_includes/posts.njk | 14 ++---
src/css/styles.css | 2 +-
src/posts/big-list-game-dev.njk | 59 +++++++++---------
4 files changed, 129 insertions(+), 65 deletions(-)
(limited to 'src')
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
--
cgit v1.2.3