Main Website Changes

* Layout and Style Changes

4 files changed, 53 insertions, 32 deletions

diff --git a/src/about.njk b/src/about.njk
index 5b0195f..c889e98 100644
--- a/src/about.njk
+++ b/src/about.njk
@@ -3,12 +3,13 @@ layout: base.njk
 title: About
 ---
 <h2>About Me</h2>
-<div>
+<div class="article">
     <div>
         <img height="100px" src="/images/me.jpg" alt="me"/>
     </div>
-    <p >
-        My Name is Indrajith K L, a Web Developer currently working as a Systems Analyst with 9+ years of experience in various frontend frameworks and libraries like Angular 2+, React, AngularJS (v1.x), JQuery, RequireJS etc.
+    <p>
+        My Name is Indrajith K L, a Web Developer currently working as a Systems Analyst with 9+ years of experience in various frontend frameworks and libraries like <span class="highlight tags">Angular 2+</span>, 
+        <span class="highlight tags">React</span>, <span class="highlight tags">AngularJS (v1.x)</span>, <span class="highlight tags">JQuery</span>, <span class="highlight tags">RequireJS</span> etc.
     </p>
 
     <p >
diff --git a/src/css/styles.css b/src/css/styles.css
index ef8ac05..b59a4e1 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -261,4 +261,22 @@ img {
 
 .tools-container label{
 	font-weight: bold;
+}
+
+p.first-letter::first-letter {
+	font-size: 150%;
+}
+
+.highlight {
+	background: #000000;
+    padding: 2px;
+    color: #ffffff;
+}
+
+.highlight.tags {
+	border-radius: 8px;
+}
+
+.article {
+	line-height: 25px;
 }
\ No newline at end of file
diff --git a/src/index.njk b/src/index.njk
index e5437e9..238517d 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -5,7 +5,7 @@ alternatetitle: "Hello Friend!! My name is Indrajith K L."
 ---
 <div class="text-center">
     <div>
-        <p>
+        <p class="first-letter">
             {{alternatetitle}} I'm a web developer, hobbyist game developer from India, working as a front-end developer.
             This site is where I write about my fun side projects, R&amp;D's, random thoughts, game development etc. Since you are here why don't you read some <a href="/posts" class="text-main-cardheading font-bold">posts</a>.
         </p>
diff --git a/src/posts/big-list-game-dev.njk b/src/posts/big-list-game-dev.njk
index 7e3579d..bb09b12 100644
--- a/src/posts/big-list-game-dev.njk
+++ b/src/posts/big-list-game-dev.njk
@@ -10,38 +10,40 @@
     cover: "/images/open-source.jpg"
 }
 ---
+<div>
 
-<p>
-    <img src="/images/open-source.jpg" width="" alt="">
-</p>
+    <p>
+        <img src="/images/open-source.jpg" width="" alt="">
+    </p>
 
-<p>Welcome to the big list (eventually it will be) of always updating bucket of <span class="font-bold">Open Source Game Development Tools</span>.
+    <p class="first-letter">Welcome to the big list (eventually it will be) of always updating bucket 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>
-<div>
-    <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}}
+    </p>
+    <div>
+        <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>
-                <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 %}
+            {% endfor %}
+        </div>
+    </div>
+    <div class="mt-10">
+        <span>If you want to add a tool or engine to this list or if you have any complaint with this article feel free to drop a mail @ <span class="font-bold">indrajith(at)indrajith(dot)dev</span></span>
     </div>
-</div>
-<div class="mt-10">
-    <span>If you want to add a tool or engine to this list or if you have any complaint with this article feel free to drop a mail @ <span class="font-bold">indrajith(at)indrajith(dot)dev</span></span>
 </div>
\ No newline at end of file