Big Overhaul: Major Changes for Migrating to a Clean Code and Style

8 files changed, 643 insertions, 431 deletions

diff --git a/blog/context_processors.py b/blog/context_processors.py
index 4df11416..563321de 100644
--- a/blog/context_processors.py
+++ b/blog/context_processors.py
@@ -1,9 +1,10 @@
-from .models import Post, Category
+from .models import Post, Category, Comment
 
 def recent_posts():
     recent_posts = Post.objects.filter(is_public=True).order_by('-date')[:5]
     for post in recent_posts:
         post.excerpt = post.body.split('>')[1].split('<')[0]
+        post.num_comments = Comment.objects.filter(post=post).count()
     return recent_posts
 
 def categories(request):
diff --git a/middleware/globalmetamiddleware.py b/middleware/globalmetamiddleware.py
new file mode 100644
index 00000000..4a98dc02
--- /dev/null
+++ b/middleware/globalmetamiddleware.py
@@ -0,0 +1,21 @@
+# Middleware to add global meta tags to the HTML head
+
+class GlobalMetaMiddleware:
+    def __init__(self, get_response):
+        self.get_response = get_response
+
+    def __call__(self, request):
+        request.meta = {
+            # Default General Meta Tags
+            'title': 'That Computer Scientist',
+            'description': 'Welcome to the home of That Computer Scientist. I am Kumar Priyansh. This is my personal website where I share all of my thoughts, ideas, and experiences.',
+            'image': 'https://thatcomputerscientist.com/static/images/logo/logo.png',
+            'url': '{}://{}{}'.format(request.scheme, request.get_host(), request.path),
+            
+            # Robots Meta Tags
+            'robots': 'index, follow',
+        }
+
+        response = self.get_response(request)
+
+        return response
diff --git a/static/css/main.css b/static/css/main.css
index 66766c11..84a0cea5 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,16 +1,221 @@
 body {
+    background: black;
     background-image: url("../images/site/backgound.jpeg");
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
     background-size: cover;
-    /* font-family: 'Times New Roman', Times, serif; */
-    padding: 0;
-    margin: 0;
-    min-height: calc(100vh);
-    text-align: center;
+    font-size: 11px;
+    font-family: Verdana,Helvetica,Arial,Sans-Serif;
+    margin: 0px auto 0px;
+    padding: 0px;
+    color: #dddddd;
+}
+
+a {
+    color: #a591ee;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+h2 {
+    color: white;
+    font-size: 11px;
+    font-weight: bold;
+    margin: 0px;
+    text-transform: uppercase;
+    padding-bottom: 10px;
+    border-bottom: solid 1px #dddddd;
+    margin-bottom: 15px;
+}
+
+input {
+    padding: 5px 10px;
+    border: none;
+    outline: none;
+    border-radius: 5px;
+    font-size: 11px;
+}
+
+.button {
+    background-color: #3E4245;
+    border-radius: 5px;
+    color: #dddddd;
+    cursor: pointer;
+    display: inline-block;
+    padding: 5px 10px;
+    outline: none;
+    border: none;
+    text-decoration: none;
+    font-size: 11px;
+    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
+    background: -moz-linear-gradient(90deg, #3E4245 0%, #2E3131 100%);
+    background: -webkit-linear-gradient(90deg, #3E4245 0%, #2E3131 100%);
+    background: linear-gradient(90deg, #3E4245 0%, #2E3131 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3E4245",endColorstr="#2E3131",GradientType=1);
+}
+
+.button-special {
+    background-color: #8663e5;
+    background: -moz-linear-gradient(90deg, #8663e5 0%, #6735c6 100%);
+    background: -webkit-linear-gradient(90deg, #8663e5 0%, #6735c6 100%);
+    background: linear-gradient(90deg, #8663e5 0%, #6735c6 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8663e5",endColorstr="#6735c6",GradientType=1);
+}
+
+.mtsbitem {
+    margin-top: 40px;
+}
+
+.mtctitem {
+    margin-top: 20px;
+}
+
+.error {
+    color: #fa3737;
+}
+
+.ac {
+    margin-right: 5px;
+    height: 12px;
+    width: 30px;
+}
+
+.ac2 {
+    margin-right: 5px;
+    width: 30px;
+    height: 14px;
+}
+
+.post-actions {
+    text-transform: uppercase;
+    font-size: 11px;
+    font-weight: bold;
+    margin: 10px 0px 20px 0px;
+    padding: 0px;
+}
+
+#wrap {
+    width: 1000px;
+    margin: auto;
+    text-align: left;
+}
+
+#header {
+    background-image: url("../images/site/Banner.gif");
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 333px;
+    margin: auto;
+}
+
+#navbar {
+    text-align: right;
+    margin-bottom: 20px;
+}
+
+#navbar ul {
+    margin: 0px;
+    padding: 0px;
+}
+
+#navbar li {
+    display: inline;
+    margin: 0px;
+    padding: 0px;
+    list-style-type: none;
 }
 
+#navbar a {
+    text-decoration: none;
+    color: white;
+}
+
+#navigation-area ul, #archives-area ul, #categories-area ul, #admin-area ul, #announcements ul {
+    margin: 0px;
+    padding: 0px;
+}
+
+#navigation-area li, #archives-area li, #categories-area li, #admin-area li, #announcements li {
+    display: block;
+    margin: 0px;
+    padding: 0px;
+    list-style-type: none;
+}
+
+#navigation-area a, #archives-area a, #categories-area a, #admin-area a, #announcements a {
+    text-decoration: none;
+    color: #a591ee;
+}
+
+#navigation-area a:hover, #archives-area a:hover, #categories-area a:hover, #admin-area a:hover, #announcements a:hover {
+    text-decoration: underline;
+}
+
+#navigation-area img, #archives-area img, #categories-area img {
+    width: 24px;
+    vertical-align:middle;
+}
+
+#admin-area img {
+    width: 14px;
+    vertical-align:middle;
+}
+
+#navigation-area span, #archives-area span, #categories-area span, #admin-area span, #announcements span {
+    margin-right: 10px;
+}
+
+#sidebar {
+    float: left;
+    margin: 0px;
+    padding: 0px;
+    width: 250px;
+    height: 100%;
+    display: inline;
+}
+
+#content {
+    float: left;
+    margin: 0px;
+    padding: 0px 0px 0px 20px;
+    width: 730px;
+    height: 100%;
+    display: inline;
+}
+
+#login-form div {
+    margin: 0px 0px 15px 0px;
+    padding: 0px;
+}
+
+#login-form span {
+    display: inline-block;
+    width: 70px;
+}
+
+#recent-posts h1 {
+    margin: 0px;
+    padding: 0px;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+#recent-posts a {
+    color: #91b3ee;
+    /* color: #56a6a1; */
+}
+
+#recent-posts h1 a {
+    color: #91b3ee;
+}
+
+
+
+/* 
 .main {
     padding: 10px;
 }    
@@ -24,23 +229,14 @@ body {
     background-size: 338px 169px;
 }
 
-.header {
-    background-image: url("../images/site/Banner.gif");
-    background-repeat: no-repeat;
-    background-position: center;
-    width: 1000px;
-    height: 333px;
-    margin: auto;
-}
-
 .sidebar {
     overflow-y: auto;
     margin-top: -10px;
-}
+} */
 
 /* COLORS SECTION ACCORIDING TO DARK MODE */
 
-h1, h2, h3, h4, h5, h6, p, a, li, span, label, footer, .table {
+/* h1, h2, h3, h4, h5, h6, p, a, li, span, label, footer, .table {
     color: #cecece;
 }
 
@@ -222,10 +418,10 @@ input[type = 'submit'] {
     border-collapse: collapse;
     width: 100%;
     margin-top: 10px;
-}
+} */
 
 /* Add borders to all cells */
-.table, .table th, .table td {
+/* .table, .table th, .table td {
     border: 1px solid #cecece;
 }
 
@@ -343,15 +539,6 @@ summary {
     cursor: pointer;
 }
 
-.new::before {
-    content: url('../images/gifs/new.gif');
-    position: absolute;
-    top: -9px;
-    right: -10px;
-    width: 30px !important;
-    height: 15px !important;
-}
-
 .topnav > li > a {
     color: #feffcf;
     display: inline-block;
@@ -483,15 +670,5 @@ pre {
     margin: 0;
 }
 
-.ac {
-    margin-right: 5px;
-    height: 12px;
-    width: 30px;
-}
-
-.ac2 {
-    margin-right: 5px;
-    width: 30px;
-    height: 14px;
-}
 
+ */
diff --git a/templates/blog/home.html b/templates/blog/home.html
index 77091b82..586b1a05 100644
--- a/templates/blog/home.html
+++ b/templates/blog/home.html
@@ -1,101 +1,78 @@
 {% extends 'blog/partials/base.html' %} {% block content %}
 {% load static %}
-<div class="main">
-
-  <div class="area">
-    <p class="titlebar">Welcome</p>
-    <div class="area-content">
-      <p>
-        Welcome to the home of That Computer Scientist. This is my personal
-        website where I share all of my thoughts, ideas, and experiences. To know
-        more about me, please visit my <a href="#">About</a> page. If you
-        would like to connect with me, please visit my
-        <a href="#">Contact</a> page. Please use the sidebar to navigate
-        the site.
-      </p>
-      <p>
-        This website is a work in progress. I am currently working on adding more
-        features to this website. I aim to build a retro looking personal website,
-        where I will share my articles and Ideas, which will be built entirely
-        around the idea of "collaborative writing" — where anyone can write new
-        articles or edit existing ones.
-      </p>
-    </div>
-  </div>
-  
-  <br />
+<div id="welcome">
+  <h2>Welcome</h2>
+  <p>
+    Welcome to the home of That Computer Scientist. This is my personal
+    website where I share all of my thoughts, ideas, and experiences. To know
+    more about me, please visit my <a href="#">About</a> page. If you
+    would like to connect with me, please visit my
+    <a href="#">Contact</a> page. Please use the sidebar to navigate
+    the site.
+  </p>
+  <p>
+    This website is a work in progress. I am currently working on adding more
+    features to this website. I aim to build a retro looking personal website,
+    where I will share my articles and Ideas, and will host some cool features and tools.
+  </p>
+  <img src="{% static 'images/gifs/construction.gif' %}" style="height:auto; width: 100%;">
+</div>
 
+<div id="fake-banner-ad" class="mtctitem">
+  <h2>Advertisement</h2>
   {% load ad %}
-  <div class="ad">
-    <img src="{{'banner'|ad }}" alt="Ad" style="width: 698px; height: 90px;" border="0"/>
-  </div>
-
-  <br />
-
-  <div style="text-align:center;">
-    <img src="{% static 'images/gifs/construction.gif' %}" style="height:28px; width: 702px;">
-  </div>
-  
-  <br />
+  <img src="{{'banner'|ad }}" alt="Ad" style="width: 100%; height: auto;" border="0"/>
+</div>
 
+{% if announcements is not None %}
+<div id="announcements" class="mtctitem">
+  <h2><img src = "{% static 'images/gifs/update.gif' %}" style="height: 14px; width: auto;"></h2>
+  <marquee behavior="scroll" direction="up" height="250" width="720" scrollamount="2" scrolldelay="10" onmouseover="this.stop()" onmouseout="this.start()">
+    <ul style="width: 720px;">
+      {% for announcement in announcements %}
+      <li>
+        <span>
+          {% if announcement.is_new %}
+            <img class="ac" src="{% static 'images/gifs/new_announcement.gif' %}"/>
+          {% else %}
+            <img class="ac2" src="{% static 'images/gifs/hand.gif' %}"/>
+          {% endif %}
+        </span>
+        <span>
+          <b>{{ announcement.created_at | date:"M d, Y" }}</b>: {{ announcement.content | safe }}
+        </span>
+      </li>
+      <br><br>
+      {% endfor %}
+    </ul>
+  </marquee>
+</div>
+{% endif %}
 
-  {% if announcements is not None %}
-    <div class="area">
-      <p class="titlebar"> <img src = "{% static 'images/gifs/update.gif' %}" style="height: 14px; width: auto;" class="updates"></p>
-      <div class="area-content">
-        <marquee behavior="scroll" direction="up" height="250" width="720" scrollamount="2" scrolldelay="10" onmouseover="this.stop()" onmouseout="this.start()">
-          <ul class="announcements">
-            {% for announcement in announcements %}
-            <li style="margin-bottom: 20px;">
-              <table>
-                <tr>
-                  <td width="30px" style="vertical-align: top;">
-                    {% if announcement.is_new %}
-                      <img class="ac" src="{% static 'images/gifs/new_announcement.gif' %}"/>
-                    {% else %}
-                      <img class="ac2" src="{% static 'images/gifs/hand.gif' %}"/>
-                    {% endif %}
-                  </td>
-                  <td style="color: white; vertical-align: top; font-size: 16px;">
-                    <b>{{ announcement.created_at | date:"M d, Y" }}</b> 
-                    <hr>
-                    <div style="width: 675px;">{{ announcement.content | safe }}</div>
-                  </td>
-                </tr>
-              </table>
-            </li>
-            {% endfor %}
-          </ul>
-        </marquee>
+{% if recent_posts %}
+<div id="recent-posts" class="mtctitem">
+  <h2>Recent Posts</h2>
+  {% for post in recent_posts %}
+    <div class="post" style="clear: both;">
+      <h1>
+        <a href="{% url 'blog:post' post.slug %}">{{ post.title }}</a>
+      </h1>
+      <p>
+        Posted on <em><u>{{ post.date | date:"M d, Y" }}</u></em> by
+        <em><a href="#">{{ post.author }}</a> in</em>
+        <em><a href="#">{{ post.category }}</a></em>
+      </p>
+      {% url 'ignis:post_image' post.id as cover_url %}
+      <p style="overflow:auto; text-align: justify; text-justify: inter-word; font-size: 13px; margin-bottom: 0px;">
+        <img src="{% url 'ignis:post_image' post.id %}.png" alt="Cover image for {{ post.title }}" style="float: left; margin-right: 10px; margin-bottom: 10px; width: 200px; height: auto;">
+        {{ post.excerpt | safe }}
+      </p>
+      <div class="post-actions">
+        <a href="{% url 'blog:post' post.slug %}">Continue Reading</a> | <a href="{% url 'blog:post' post.slug %}#comments">{{ post.num_comments }} Comments</a>
       </div>
     </div>
-    <br />
-  {% endif %}
-
-  
-  {% if recent_posts %}
-  <div class="area">
-    <p class="titlebar">Recent Posts</p>
-    <div class="area-content">
-      {% for post in recent_posts %}
-        <h2 style="margin-bottom: 12px;">
-          <a style="font-size: 24px;" href="{% url 'blog:post' post.slug %}">{{ post.title }}</a>
-        </h2>
-        <p style="margin-bottom: 16px; margin-top: 16px;">
-          Posted on <em><u>{{ post.date | date:"M d, Y" }}</u></em> by
-          <em><a href="#">{{ post.author }}</a> in</em>
-          <em><a href="#">{{ post.category }}</a></em>
-        </p>
-        <div class="article-body">
-          <p>{{ post.excerpt | safe }}</p>
-        </div>
-        <p>
-          <em><a href="{% url 'blog:post' post.slug %}">Click here</a> to continue reading...</em>
-        </p>
-      {% endfor %}
-    </div>
-  </div>
-  {% endif %}
-
+  {% endfor %}
 </div>
+{% endif %}
+
 {% endblock %}
diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index b558d6fb..5c8ba715 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -5,114 +5,111 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description"content="Welcome to the home of That Computer Scientist. I am Kumar Priyansh. This is my personal website where I share all of my thoughts, ideas, and experiences."/>
+    <meta name="description"content="{{ request.meta.description }}" />
+    <meta name="image" content="{{ request.meta.image }}" />
+    <meta name="url" content="{{ request.meta.url }}" />
+    <meta name="title" content="{{ request.meta.title }}" />
+    <meta property="og:title" content="{{ request.meta.title }}" />
+    <meta property="og:description" content="{{ request.meta.description }}" />
+    <meta property="og:image" content="{{ request.meta.image }}" />
+    <meta property="og:url" content="{{ request.meta.url }}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="{{ request.meta.title }}" />
+    <meta name="twitter:description" content="{{ request.meta.description }}" />
+    <meta name="twitter:image" content="{{ request.meta.image }}" />
+    <meta name="robots" content="{{ request.meta.robots }}" />
     <title>That Computer Scientist - {{ title }}</title>
     <link preload rel="stylesheet" href="{% static 'css/fonts.css' %}" />
     <link preload rel="stylesheet" href="{% static 'css/main.css' %}" />
-    {% if not request.old_browser %}
-      <style>
-        .sbtn {
-          background-repeat: no-repeat;
-          background-position: center;
-          background-size: contain;
-          height: 28px;
-          width: 48px;
-          background-image: url('/static/images/gifs/search_static.jpg');
-          position: relative;
-          top: -2px;
-        }
-        .sbtn:hover {
-            background-image: url('/static/images/gifs/search.gif');
-        }
-      </style>
-    {% endif %}
     <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}"/>
     <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}"/>
     <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}"/>
     <link rel="manifest" href="{% static 'images/favicons/site.webmanifest' %}"/>
   </head>
   <body>
-    <div class="header"></div>
-    <div style="width: 1000px; margin-left: auto; margin-right: auto;" align="right">
-      <td style="text-align: right">
-      <table style="vertical-align: middle; border-spacing: 12px; border-collapse: separate;{% if not request.old_browser %} margin-bottom: -8px;{% endif %} width: auto; display: inline-table;">
-        <tr>
-          <td>
-          {% if not request.onclick or not request.old_browser %}
-            <a class="navitem {% if not request.old_browser %}new{% endif %}" href="{% url 'dev_status:repo' 'thatcomputerscientist' %}">
-              Source Code
-            </a>
-          {% else %}
-            <button class="navitem {% if not request.old_browser %}new{% endif %}" onclick="window.location.href='{% url 'dev_status:repo' 'thatcomputerscientist' %}'">
-              Source Code
-            </button>
-          {% endif %}
-          </td>
+    <div id="wrap">
+      <div id="header"></div>
+      
+      <div id="navbar">
+        <ul>
+          <li><a class="button" href="{% url 'dev_status:repo' 'thatcomputerscientist' %}">Source Code</a></li>
           {% if user.is_authenticated %}
-          <td>
-            {% if not request.onclick or not request.old_browser %}
-              <a class="navitem" href="{% url 'users:logout' %}">
-                Logout
-              </a>
-            {% else %}
-              <button class="navitem" onclick="window.location.href='{% url 'users:logout' %}'">Logout</button>
-            {% endif %}
-          </td>
+          <li><a class="button button-special" href="{% url 'users:logout' %}">Logout</a></li>
           {% endif %}
-        </tr>
-      </table>
-      </td>
-      <hr>
-    </div>
-    <div class="content" style="
-    width: 1010px;
-    margin: 0 auto;
-    box-sizing: border-box;
-    padding: 10px 0px 20px 0px;
-">
-      <center>
-        <table style="table-layout: fixed; width: 1000px; text-align:left;">
-          <td width="250px" style="vertical-align:top;">{% include 'blog/partials/sidebar.html' %}</td>
-          <td width="750px" style="vertical-align:top;"><div>{% block content %} {% endblock %}</div></td>
-        </table>
-      </center>
-    </div>
-    <div style="width: 1000px; margin: 0px auto 40px auto">
-      <hr style="margin: 2rem 0" />
-      <footer style="text-align: center">
-          <center>
-          <table>
-            <tr>
-              {% load ad %} {% for i in '12345789'|make_list %}
-              <td style="padding: 0 2px">
-                <img src="{{'buttons'|ad }}" alt="Ad" style="width: 88px; height: 31px;" />
-              </td>
-              {% endfor %}
-            </tr>
-          </table>
-          <table>
-            <tr>
-              {% for i in '12345'|make_list %}
-              <td style="padding: 0 2px">
-                <img src="{{'buttons'|ad }}" alt="Ad" style="width: 88px; height: 31px;" />
-              </td>
-              {% endfor %}
-            </tr>
-          </table>
-          <div style="width: 600px; margin-left: auto; margin-right: auto; !important">
-            <hr>
-            <p>&copy; {% now "Y" %} That Computer Scientist. Source code available on
-            <a href="https://github.com/luciferreeves/thatcomputerscientist"
-              >GitHub</a
-            >.</p>
-            <p>
-              <b>PS:</b> The ads shown on this website are fake and purely for
-              aesthetic purposes. I do not earn any money from them, neither clicking
-              them will redirect you to any other website.
-            </p>
-          </div>
-        </center>
-        </footer>
+        </ul>
+      </div>
+      
+      <div id="main-section">
+        <div id="sidebar">
+          {% include 'blog/partials/sidebar.html' %}
+        </div>
+        <div id="content">
+          {% block content %} {% endblock %}
+        </div>
+      </div>
+
+      <div id="footer">
+        <hr style="margin: 2rem 0" />
+        <center>
+          {% load ad %} {% for i in '12345789'|make_list %}
+            <span><img src="{{'buttons'|ad }}" alt="Ad" style="width: 88px; height: 31px;" /></span>
+          {% endfor %}
+          <br />
+          {% for i in '12345'|make_list %}
+            <span><img src="{{'buttons'|ad }}" alt="Ad" style="width: 88px; height: 31px;" /></span>
+          {% endfor %}
+          <br />
+        <center>
+        <p style="text-align: center; margin-top: 1rem">&copy; {% now "Y" %} That Computer Scientist. Source code available on
+          <a href="https://github.com/luciferreeves/thatcomputerscientist"
+            >GitHub
+          </a>.
+        </p>
+        <p style="text-align: center">
+          <b>PS:</b> The ads shown on this website are fake and purely for
+          aesthetic purposes. I do not earn any money from them, neither clicking
+          them will redirect you to any other website.
+        </p>
+      </div>
+      
+      {% comment %} <div style="width: 1000px; margin: 0px auto 40px auto">
+        <hr style="margin: 2rem 0" />
+        <footer style="text-align: center">
+            <center>
+            <table>
+              <tr>
+                {% load ad %} {% for i in '12345789'|make_list %}
+                <td style="padding: 0 2px">
+                  <img src="{{'buttons'|ad }}" alt="Ad" style="width: 88px; height: 31px;" />
+                </td>
+                {% endfor %}
+              </tr>
+            </table>
+            <table>
+              <tr>
+                {% for i in '12345'|make_list %}
+                <td style="padding: 0 2px">
+                  <img src="{{'buttons'|ad }}" alt="Ad" style="width: 88px; height: 31px;" />
+                </td>
+                {% endfor %}
+              </tr>
+            </table>
+            <div style="width: 600px; margin-left: auto; margin-right: auto; !important">
+              <hr>
+              <p>&copy; {% now "Y" %} That Computer Scientist. Source code available on
+              <a href="https://github.com/luciferreeves/thatcomputerscientist"
+                >GitHub</a
+              >.</p>
+              <p>
+                <b>PS:</b> The ads shown on this website are fake and purely for
+                aesthetic purposes. I do not earn any money from them, neither clicking
+                them will redirect you to any other website.
+              </p>
+            </div>
+          </center>
+          </footer>
+        </div> {% endcomment %}
+
       </div>
   </body>
 </html>
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index cc6c11d2..264c651c 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -1,212 +1,252 @@
 {% load static %}
-<div class="sidebar">
-    {% comment %} Search Area {% endcomment %}
-
-    <div class="area">
-        <div class="area-content area-bg" style="padding-top: 20px; margin-top: 20px;">
-            <form action="#" method="GET">
-                <input type="text" name="q" placeholder="Search..." class="sbox" autocomplete="off">
-                <input type="submit" align="center" class="sbtn" value="{% if request.old_browser %}Search{% else %}{% endif %}">
-            </form>
-            <p><small><a style="color: #e6e670; border-bottom: 1px dashed #f7b885; padding-bottom: 2px; text-decoration: none;" href="#">Advanced Search &gt;</a></small></p>
+{% comment %} Login Area {% endcomment %}
+{% if not user.is_authenticated %}
+<div id="login-area">
+    <h2>Login</h2>
+    <form method="post" action="{% url 'users:login' %}" id="login-form">
+        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" style="display: none;">
+        <div>
+            <span style="width: 70px;">Username:</span>
+            <span style="width: 156px;">
+                <input type="text" style="width: 156px;" id="username" name="username" placeholder="Username" autocomplete="off" value="{{ request.GET.username }}">
+            </span>
+        </div>
+        <div>
+            <span style="width: 70px;">Password:</span>
+            <span style="width: 156px;">
+                <input type="password" style="width: 156px;" id="password" name="password" placeholder="Password" autocomplete="off">
+            </span>
         </div>
-    </div>
+        <div>
+            <input type="hidden" name="next" value="{{ request.path }}" style="display: none;">
+            <input class="button button-special" type="submit" value="Login">
+        </div>
+    </form>
+    {% for message in messages %}
+        {% if 'loginError' in message.tags %}
+            {% if message.message == "EVERR" and request.GET.username %}
+            <form method="post" action="{% url 'users:sendverificationemail' %}" >
+                <p class="message {{message.tags}}">
+                    Your email is unverified. Please check your inbox for a verification email or to request a new verification email by clicking{% csrf_token %}<input type="hidden" name="username" value="{{ request.GET.username }}"><input style="display: inline; background: none; border: none; color: blue; text-decoration: underline; cursor: pointer; margin: 0;" type="submit" value="here.">
+                </p>
+                </form>
+            {% else %}
+            <p class="message {{message.tags}}">{{message.message}}</p>
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+</div>
+{% endif %}
 
-    <br>
+<div id="search-area" {% if not user.is_authenticated %}class="mtsbitem"{% endif %}>
+    <h2>Search</h2>
+    <form action="#" method="GET">
+        <input type="text" name="q" placeholder="Search..." autocomplete="off" style="width: 166px;">
+        <input type="submit" align="center" class="button button-special" value="Search" style="width: 60px;">
+    </form>
+</div>
 
-    {% comment %} Login Area {% endcomment %}
-    {% if not user.is_authenticated %}
-    <div class="area">
-        <p class="titlebar">Login</p>
-        <div class="area-content area-bg">
-            <form method="post" action="{% url 'users:login' %} ">
-                {% csrf_token %}
-                <label for="username">Username</label>
-                <input type="text" id="username" name="username" placeholder="Username" autocomplete="off" value="{{ request.GET.username }}" required>
-                <label for="password">Password</label>
-                <input type="password" id="password" name="password" placeholder="Password" autocomplete="off" required>
-                <input type="hidden" name="next" value="{{ request.path }}">
-                <input type="submit" value="Login">
-            </form>
-            {% for message in messages %}
-                {% if 'loginError' in message.tags %}
-                    {% if message.message == "EVERR" and request.GET.username %}
-                    <form method="post" action="{% url 'users:sendverificationemail' %}" >
-                        <p class="{{message.tags}}">
-                            Your email is unverified. Please check your inbox for a verification email or to request a new verification email by clicking{% csrf_token %}<input type="hidden" name="username" value="{{ request.GET.username }}"><input style="display: inline; background: none; border: none; color: blue; text-decoration: underline; cursor: pointer; margin: 0;" type="submit" value="here.">
-                        </p>
-                        </form>
-                    {% else %}
-                    <p class="{{message.tags}}">{{message.message}}</p>
-                    {% endif %}
-                {% endif %}
-            {% endfor %}
-        </div>
-    </div>
-    <br>
+<div id="navigation-area" class="mtsbitem">
+    {% if user.is_authenticated %}
+        <h2>Hello, {{ user.username }}!</h2>
+    {% else %}
+        <h2>Navigation</h2>
     {% endif %}
-
-    {% comment %} Navigation Area {% endcomment %}
-    <div class="area">
+    <ul>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/news.gif' %}" alt="Home" border="0">
+            </span>
+            <span>
+                <a href="{% url 'blog:home' %}">
+                    Home
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/book.gif' %}" alt="About" border="0">
+            </span>
+            <span>
+                <a href="#">
+                    About
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/email.gif' %}" alt="Contact" border="0">
+            </span>
+            <span>
+                <a href="#">
+                    Contact
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/pencil.gif' %}" alt="Blog" border="0">
+            </span>
+            <span>
+                <a href="#">
+                    Blog
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/windows.gif' %}" alt="Repositories" border="0">
+            </span>
+            <span>
+                <a href="{% url 'dev_status:home' %}">
+                    Repositories
+                </a>
+            </span>
+        </li>
         {% if user.is_authenticated %}
-            <p class="titlebar">Hello, {{ user.username }}!</p>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/setup.gif' %}" alt="My Account" border="0">
+            </span>
+            <span>
+                <a href="{% url 'blog:account' %}">
+                    My Account
+                </a>
+            </span>
+        </li>
         {% else %}
-            <p class="titlebar">Navigation</p>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/mouse.gif' %}" alt="Register" border="0">
+            </span>
+            <span>
+                <a href="{% url 'blog:register' %}">
+                    Register
+                </a>
+            </span>
+        </li>
         {% endif %}
-        <div class="area-content area-bg">
-            <table style="table-layout: fixed; width: 230px;">
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/news.gif' %}" alt="Home" border="0" class="icon">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class="anavdef" href="{% url 'blog:home' %}">Home</a></td>
-                </tr>
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/book.gif' %}" alt="About" border="0" class="icon">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class="anavdef" href="#">About</a></td>
-                </tr>
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/email.gif' %}" alt="Contact" border="0" class="icon">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class="anavdef" href="#">Contact</a></td>
-                </tr>
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/pencil.gif' %}" alt="Blog" border="0" class="icon">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class="anavdef" href="#">Blog</a></td>
-                </tr>
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/windows.gif' %}" alt="Repositories" border="0" class="icon">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class="anavdef" href="{% url 'dev_status:home' %}">Repositories</a></td>
-                </tr>
-                <tr>
-                    {% if user.is_authenticated %}
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/setup.gif' %}" alt="My Account" border="0" class="icon">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class="anavdef" href="{% url 'blog:account' %}">My Account</a></td>
-                    {% else %}
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/mouse.gif' %}" alt="My Account" border="0" class="icon">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class="anavdef" href="{% url 'blog:register' %}">Register</a></td>
-                    {% endif %}
-                </tr>
-            </table>
-        </div>
-    </div>
-
-    <br>
-
-    {% comment %} Load Fake Ad {% endcomment %}
-    <div class="area">
-        <p class="titlebar">Advertisement</p>
-        <div class="area-content area-bg">
-            {% load ad %}
-            <img src="{{ "big" | ad }}" alt="Advertisement" style="width: 100%; height: auto;">
-        </div>
-    </div>
-
-    <br>
-    {% comment %} Archives {% endcomment %}
-
-    <div class="area">
-        <p class="titlebar">Archives</p>
-        <div class="area-content area-bg">
-            <table style="table-layout: fixed; width: 230px;">
-                {% for archive in archives %}
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/cabinet.gif' %}" alt="Archive" border="0" class="icon">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class="anavdef" href="#">{{ archive | date:"F Y" }}</a></td>
-                </tr>
-                {% endfor %}
-            </table>
-        </div>
-    </div>
-
-    <br>
-
-    {% comment %} Categories {% endcomment %}
+    </ul>
+</div>
 
-    <div class="area">
-        <p class="titlebar">Categories</p>
-        <div class="area-content area-bg">
-            <table style="table-layout: fixed; width: 230px;">
-                {% for category in categories %}
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/books.gif' %}" alt="Archive" border="0" class="icon">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class="anavdef" href="#">{{ category }}</a></td>
-                </tr>
-                {% endfor %}
-            </table>
-        </div>
-    </div>
+<div id="fake-ad-area" class="mtsbitem">
+    <h2>Advertisement</h2>
+    {% load ad %}
+        <img src="{{ "big" | ad }}" alt="Advertisement" style="width: 100%; height: auto;">
+</div>
 
-    {% comment %} Admin Section {% endcomment %}
+<div id="archives-area" class="mtsbitem">
+    <h2>Archives</h2>
+    <ul>
+        {% for archive in archives %}
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/cabinet.gif' %}" alt="Archive" border="0">
+            </span>
+            <span>
+                <a href="#">
+                    {{ archive | date:"F Y" }}
+                </a>
+            </span>
+        </li>
+        {% endfor %}
+    </ul>
+</div>
 
-    {% if user.is_staff %}
-    <br>
-    <div class="area">
-        <p class="titlebar">Admin</p>
-        <div class="area-content area-bg">
-            <table style="table-layout: fixed; width: 230px;">
-                {% if user.is_superuser %}
-                    <tr>
-                        <td width="24px">
-                            <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0" style="margin-left: auto; margin-right: auto; display: block; width: 14px; height: auto;">
-                        </td>
-                        <td style="padding-left: 12px; vertical-align: top;"><a class = "anavdef" href="{% url 'admin:index' %}">Admin Area</a></td>
-                    </tr>
-                {% endif %}
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0" style="margin-left: auto; margin-right: auto; display: block; width: 14px; height: auto;">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class = "anavdef" href="{% url 'blog-admin:users' %}">Manage Users</a></td>
-                </tr>
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0" style="margin-left: auto; margin-right: auto; display: block; width: 14px; height: auto;">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class = "anavdef" href="{% url 'blog-admin:posts' %}">Manage Posts</a></td>
-                </tr>
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0" style="margin-left: auto; margin-right: auto; display: block; width: 14px; height: auto;">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class = "anavdef" href="{% url 'blog-admin:comments' %}">Manage Comments</a></td>
-                </tr>
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0" style="margin-left: auto; margin-right: auto; display: block; width: 14px; height: auto;">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class = "anavdef" href="{% url 'blog-admin:categories' %}">Manage Categories</a></td>
-                </tr>
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0" style="margin-left: auto; margin-right: auto; display: block; width: 14px; height: auto;">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class = "anavdef" href="{% url 'blog-admin:tags' %}">Manage Tags</a></td>
-                </tr>
-                <tr>
-                    <td width="24px">
-                        <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0" style="margin-left: auto; margin-right: auto; display: block; width: 14px; height: auto;">
-                    </td>
-                    <td style="padding-left: 12px; vertical-align: top;"><a class = "anavdef" href="{% url 'blog-admin:new-post' %}">Create New Post</a></td>
-                </tr>
-            </table>
-        </div>
-    </div>
-    {% endif %}
+<div id="categories-area" class="mtsbitem">
+    <h2>Categories</h2>
+    <ul>
+        {% for category in categories %}
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/books.gif' %}" alt="Archive" border="0">
+            </span>
+            <span>
+                <a href="#">
+                    {{ category }}
+                </a>
+            </span>
+        </li>
+        {% endfor %}
+    </ul>
 </div>
+
+{% if user.is_staff %}
+<div id="admin-area" class="mtsbitem">
+    <h2>Admin</h2>
+    <ul>
+        {% if user.is_superuser %}
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
+            </span>
+            <span>
+                <a href="{% url 'admin:index' %}">
+                    Admin Area
+                </a>
+            </span>
+        </li>
+        {% endif %}
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
+            </span>
+            <span>
+                <a href="{% url 'blog-admin:users' %}">
+                    Manage Users
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
+            </span>
+            <span>
+                <a href="{% url 'blog-admin:posts' %}">
+                    Manage Posts
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
+            </span>
+            <span>
+                <a href="{% url 'blog-admin:categories' %}">
+                    Manage Categories
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
+            </span>
+            <span>
+                <a href="{% url 'blog-admin:tags' %}">
+                    Manage Tags
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
+            </span>
+            <span>
+                <a href="{% url 'blog-admin:comments' %}">
+                    Manage Comments
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
+            </span>
+            <span>
+                <a href="{% url 'blog-admin:new-post' %}">
+                    Create New Post
+                </a>
+            </span>
+        </li>
+    </ul>
 </div>
+{% endif %}
diff --git a/thatcomputerscientist/settings.py b/thatcomputerscientist/settings.py
index e7edc803..7c7e5623 100644
--- a/thatcomputerscientist/settings.py
+++ b/thatcomputerscientist/settings.py
@@ -28,8 +28,7 @@ BASE_DIR = Path(__file__).resolve().parent.parent
 SECRET_KEY = os.getenv('AUTHORIZATION_STRING')
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = True 
-# if os.getenv('ENVIRONMENT') == 'development' else False
+DEBUG = True if os.getenv('ENVIRONMENT') == 'development' else False
 
 ALLOWED_HOSTS = ["*"]
 CSRF_TRUSTED_ORIGINS = ['https://*.thatcomputerscientist.com', 'http://*.thatcomputerscientist.com']
@@ -70,6 +69,7 @@ MIDDLEWARE = [
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
     'whitenoise.middleware.WhiteNoiseMiddleware',
     'middleware.oldbrowsermiddleware.OldBrowserMiddleware',
+    'middleware.globalmetamiddleware.GlobalMetaMiddleware',
 ]
 
 CONFIGURED_SUBDOMAINS = {
diff --git a/users/views.py b/users/views.py
index 353d91ca..7857bbe7 100644
--- a/users/views.py
+++ b/users/views.py
@@ -21,9 +21,8 @@ def login_user(request):
     next = request.POST.get('next', 'blog:home')
     username = request.POST['username']
     password = request.POST['password']
-    print (username, password)
-    if username == '' or password == '':
-        messages.error(request, 'Please fill in all fields.')
+    if username == '' or password == '' or username is None or password is None:
+        messages.error(request, 'Please fill in all fields.', extra_tags='loginError')
         return HttpResponseRedirect(next + '?username=' + username)
     else: 
         # check if email is verified