* Article Published

* Adds Twitter Share Button
* Style Changes

2 files changed, 186 insertions, 38 deletions

diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css
index c65f12d..67f071f 100644
--- a/src/_includes/assets/css/styles.css
+++ b/src/_includes/assets/css/styles.css
@@ -770,6 +770,10 @@ select {
   visibility: visible;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -823,6 +827,21 @@ select {
   margin-bottom: 1rem;
 }
 
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.-my-5 {
+  margin-top: -1.25rem;
+  margin-bottom: -1.25rem;
+}
+
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -851,6 +870,10 @@ select {
   margin-bottom: 1.25rem;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
 .mt-auto {
   margin-top: auto;
 }
@@ -859,10 +882,6 @@ select {
   margin-left: auto;
 }
 
-.mt-5 {
-  margin-top: 1.25rem;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -919,6 +938,10 @@ select {
   margin-top: 2rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -983,6 +1006,14 @@ select {
   width: 3rem;
 }
 
+.w-1 {
+  width: 0.25rem;
+}
+
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .max-w-5xl {
   max-width: 64rem;
 }
@@ -995,10 +1026,6 @@ select {
   max-width: 36rem;
 }
 
-.max-w-4xl {
-  max-width: 56rem;
-}
-
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1011,6 +1038,14 @@ select {
   flex-shrink: 1;
 }
 
+.table-auto {
+  table-layout: auto;
+}
+
+.table-fixed {
+  table-layout: fixed;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -1113,6 +1148,14 @@ select {
   overflow: hidden;
 }
 
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1155,6 +1198,10 @@ select {
   border-right-width: 0px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-dashed {
   border-style: dashed;
 }
@@ -1168,6 +1215,21 @@ select {
   border-color: transparent;
 }
 
+.border-main-dark-brown-2 {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 39 42 / var(--tw-border-opacity));
+}
+
+.border-blue-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(96 165 250 / var(--tw-border-opacity));
+}
+
+.border-lightish-50 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 236 214 / var(--tw-border-opacity));
+}
+
 .bg-main-cream-white-2 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 238 231 / var(--tw-bg-opacity));
@@ -1208,6 +1270,11 @@ select {
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
+.bg-lightish-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 236 214 / var(--tw-bg-opacity));
+}
+
 .bg-darkish-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(84 78 104 / var(--tw-bg-opacity));
@@ -1278,6 +1345,36 @@ select {
   background-color: rgb(255 139 167 / var(--tw-bg-opacity));
 }
 
+.bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1371,6 +1468,10 @@ select {
   padding-left: 0.25rem;
 }
 
+.text-left {
+  text-align: left;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1383,6 +1484,10 @@ select {
   text-align: justify;
 }
 
+.indent-8 {
+  text-indent: 2rem;
+}
+
 .font-supply-regular {
   font-family: supplyRegular, sans-serif;
 }
@@ -1415,16 +1520,16 @@ select {
   line-height: 1.75rem;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1450,6 +1555,10 @@ select {
   font-weight: 500;
 }
 
+.uppercase {
+  text-transform: uppercase;
+}
+
 .italic {
   font-style: italic;
 }
@@ -1583,6 +1692,16 @@ select {
   color: rgb(89 74 78 / var(--tw-text-opacity));
 }
 
+.text-blue-100 {
+  --tw-text-opacity: 1;
+  color: rgb(219 234 254 / var(--tw-text-opacity));
+}
+
+.text-blue-50 {
+  --tw-text-opacity: 1;
+  color: rgb(239 246 255 / var(--tw-text-opacity));
+}
+
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1606,6 +1725,12 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .outline {
   outline-style: solid;
 }
@@ -1770,6 +1895,11 @@ pre[class*="language-"] {
   cursor: help;
 }
 
+.article-intro::first-letter {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
 .hover\:bg-indigo-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(67 56 202 / var(--tw-bg-opacity));
@@ -1785,6 +1915,11 @@ 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));
@@ -1897,4 +2032,10 @@ pre[class*="language-"] {
     font-size: 1.5rem;
     line-height: 2rem;
   }
+}
+
+@media (min-width: 1024px) {
+  .lg\:rounded-lg {
+    border-radius: 0.5rem;
+  }
 }
\ No newline at end of file
diff --git a/src/_includes/posts.njk b/src/_includes/posts.njk
index 0245970..c660276 100644
--- a/src/_includes/posts.njk
+++ b/src/_includes/posts.njk
@@ -1,30 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-{% include "./partials/head.njk" %}
-</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">
-            <article class="flex flex-col my-4">
-                <div class="flex flex-col justify-start p-6 ">
-                    <div>
-                        <p class="text-3xl bg-rose font-medium text-center text-darkish-200">{{title}}</p>
-                        <p class="text-lg text-darkish-100 text-center">{{date | dateFilter}}</p>
-                    </div>
-                    <div class="mt-10 text-xl font-supply-regular text-justify text-darkish-300">
-                        {{content | safe}}
+    <head>
+        {% include "./partials/head.njk" %}
+    </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">
+                <article class="flex flex-col my-4">
+                    <div class="flex flex-col justify-start p-6 ">
+                        <div>
+                            <p class="text-3xl bg-rose font-medium text-center text-darkish-200">{{title}}</p>
+                            <p class="text-lg text-darkish-100 text-center">{{date | dateFilter}}</p>
+                        </div>
+                        <div class="mt-10 text-xl font-supply-regular text-justify text-darkish-300">
+                            {{content | safe}}
+                        </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">
+                            <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>
-            </article>
-            <div class="flex flex-col my-4">
-                <a class="flex flex-col justify-start" href="/posts">back to posts</a>    
-            </div>     
-        </section>
-        
-        
-    </main>
-    {% include "./partials/footer.njk" %}
-</body>
+            </section>
+
+        </main>
+        {% include "./partials/footer.njk" %}
+    </body>
 </html>
\ No newline at end of file