middleware and css fixes for older browsers

7 files changed, 139 insertions, 134 deletions

diff --git a/middleware/oldbrowsermiddleware.py b/middleware/oldbrowsermiddleware.py
new file mode 100644
index 00000000..91ce3b05
--- /dev/null
+++ b/middleware/oldbrowsermiddleware.py
@@ -0,0 +1,37 @@
+import re
+class OldBrowserMiddleware:
+    def __init__(self, get_response):
+        self.get_response = get_response
+
+    def __call__(self, request):
+        user_agent = request.META.get('HTTP_USER_AGENT', '').lower()
+        old_browser = False
+        onclick = True
+        browser_patterns = [
+            'msie [1-8]',
+            'firefox/[1-3]\.',
+            'chrome/[1-9]\.',
+            'safari/[1-5]\.',
+            'opera/[1-9]\.',
+            'classilla'
+        ]
+        onclick_patterns = [
+            'classilla'
+        ]
+        for pattern in browser_patterns:
+            if re.search(pattern, user_agent):
+                old_browser = True
+                break
+        
+        for pattern in onclick_patterns:
+            if re.search(pattern, user_agent):
+                onclick = False
+                break
+        
+        request.old_browser = old_browser
+        request.onclick = onclick
+        response = self.get_response(request)
+        print("old_browser: ", request.old_browser)
+        print("onclick: ", request.onclick)
+        return response
+        
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index 4ccda5a6..412b2358 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -3,7 +3,7 @@ body {
     background-repeat: repeat;
     background-attachment: fixed;
     background-position: center;
-    font-family: serif;
+    font-family: 'Times New Roman', Times, serif;
     padding: 0;
     margin: 0;
     min-height: calc(100vh);
@@ -29,8 +29,24 @@ h1, h2, h3, h4, h5, h6, p, a, li, span, label, footer, .table {
     color: #cecece;
 }
 
+p {
+    font-size: 16px;
+}
+
+h2 {
+    font-size: 24px;
+}
+
 a {
     color: #8278ed;
+    font-size: inherit;
+}
+
+.anavdef {
+    color: #8278ed;
+    font-size: 16px;
+    font-family: serif;
+    text-decoration: underline;
 }
 
 fieldset, legend {
@@ -38,36 +54,16 @@ fieldset, legend {
 }
 
 .content {
-    padding: 9px 20px 20px 20px;
+    padding: 9px 10px 20px 20px;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
-.title:visited {
-    color: #cecece;
-}
-
-.title > h1 {
-    font-size: 1.2rem;
-    font-weight: bold;
-    margin-top: 0;
-}
-
-.title {
-    display: block;
-}
-
-.title > img {
-    width: 10rem;
-    height: 3.23rem;
-    display: block;
-    margin: 0px auto 10px auto;
-    pointer-events: none;
-}
-
 .alert {
     background-color: #0c1221;
     padding: 20px;
+    *padding: 20px;
+    _padding: 20px;
     border: 1px solid #cecece;
 }
 
@@ -162,16 +158,6 @@ fieldset {
     overflow-y: auto;
 }
 
-.errorbox {
-    background-color: #191919;
-    padding: 20px;
-    border: 1px solid #ffd4bd;
-}
-
-.errorbox > h1 {
-    margin-top: 0;
-}
-
 #captcha {
     display: flex;
     flex-direction: row;
@@ -286,18 +272,16 @@ summary {
     border-right: 2px solid #00007C;
     border-bottom: 2px solid #00007C;
     position: relative;
-    padding: 2px 10px 5px 10px;
+    padding: 5px 10px 5px 10px;
     text-align: center;
-}
-
-.navitem a {
-    color: #FFFFFF;
-    text-decoration: none;
     font-size: 12px;
     font-family: 'TopNavbar', serif;
+    text-decoration: none;
+    cursor: pointer;
 }
 
-.new{
+.new::before {
+    content: url('../images/gifs/new.gif');
     position: absolute;
     top: -9px;
     right: -10px;
@@ -315,24 +299,36 @@ summary {
 }
 
 .ad {
-    border: solid 1px #cecece78;
+    border: solid 1px #cecece;
     padding: 10px;
+    _padding: 10px;
+    *padding: 10px;
     position: relative;
 }
 
-.ad::before {
-    content: 'Advertisement';
+.ad-label {
+    color: black;
     display: block;
     font-size: 10px;
     position: absolute;
-    top: 0;
-    right: 0;
-    background-color: #ffffffc4;
+    top: 0px;
+    background-color: #ffffff;
     padding: 2px 5px;
+    _padding: 2px 5px;
+    *padding: 2px 5px;
     border-radius: 0 0 0 5px;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
+.ad-banner {
+    right: 0px;
+    transform: translateX(22px);
+}
+
+.ad-big {
+    right: 0px;
+}
+
 .file {
     padding: 4px 0px;
     display: flex;
diff --git a/templates/blog/home.html b/templates/blog/home.html
index 2118f3ba..02897092 100644
--- a/templates/blog/home.html
+++ b/templates/blog/home.html
@@ -5,9 +5,9 @@
     <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">About</a> page. If you
+      more about me, please visit my <a class="anavdef" href="#">About</a> page. If you
       would like to connect with me, please visit my
-      <a href="/contact">Contact</a> page. Please use the sidebar to navigate
+      <a class="anavdef" href="#">Contact</a> page. Please use the sidebar to navigate
       the site.
     </p>
     <p>
@@ -37,7 +37,7 @@
                   <img class="ac2" src="{% static 'images/gifs/hand.gif' %}"/>
                 {% endif %}
               </td>
-              <td style="color: white; vertical-align: top;">
+              <td style="color: white; vertical-align: top; font-size: 16px;">
                 <b>{{ announcement.created_at | date:"M d, Y" }}</b> 
                 <hr>
                 {{ announcement.content }}
@@ -57,7 +57,7 @@
   <br />
   {% load ad %}
   <div class="ad">
-    <img src="{{'banner'|ad }}" alt="Ad" width="100%" height="auto" />
+    <img src="{{'banner'|ad }}" alt="Ad" style="width: 680px; height: 83px;" border="0"/>
   </div>
   {% if recent_posts %}
   <h3 style="margin-bottom: 0px"><em>Recent Posts</em></h3>
@@ -65,14 +65,14 @@
   <ul>
     {% for post in recent_posts %}
     <li>
-      <h2 style="margin-bottom: 12px">
-        <a href="{% url 'blog:post' post.slug %}">{{ post.title }}</a>
+      <h2 style="margin-bottom: 12px;">
+        <a style="font-size: 24px;" class="anavdef" href="{% url 'blog:post' post.slug %}">{{ post.title }}</a>
       </h2>
-      <p style="line-height: 1.6em">
+      <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
-          <a href="#">{{ post.category }}</a></em
+          ><a class="anavdef" href="#">{{ post.author }}</a> in
+          <a class="anavdef" href="#">{{ post.category }}</a></em
         >
       </p>
       <div class="article-body">
@@ -80,10 +80,11 @@
       </div>
       <p>
         <em
-          ><a href="{% url 'blog:post' post.slug %}">Click here</a> to continue
+          ><a class="anavdef" href="{% url 'blog:post' post.slug %}">Click here</a> to continue
           reading...</em
         >
       </p>
+      <br>
     </li>
     {% endfor %}
   </ul>
diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index 77ec5e68..5fc4afbc 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -36,27 +36,28 @@
   </head>
   <body>
     <div class="header"></div>
-    <center>
-      <div style="width: 1000px;" align="right">
-        <table>
-        <tr>
-          <td class="navitem">
-            <a href="{% url 'dev_status:repo' 'thatcomputerscientist' %}">Source Code</a>
-            <img class="new" src="{% static 'images/gifs/new.gif' %}" border="0"/>
-          </td>
-          <td></td>
-          {% if user.is_authenticated %}
-          <td class="navitem"><a href="{% url 'users:logout' %}">Logout</a></td>
-          {% endif %}
-        </tr>
-        </table>
-          <hr />
-      </div>
+    <div style="width: 1000px; margin-left: auto; margin-right: auto;" align="right">
+      {% 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 %}
+      {% if user.is_authenticated %}
+        {% 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 %}
+      {% endif %}
       <table style="table-layout: fixed; width: 1000px;">
-        <td width="25%" style="vertical-align:top;">{% include 'blog/partials/sidebar.html' %}</td>
-        <td style="vertical-align:top;"><div class="content">{% block content %} {% endblock %}</div></td>
+        <td width="250px" style="vertical-align:top;">{% include 'blog/partials/sidebar.html' %}</td>
+        <td width="750px" style="vertical-align:top;"><div class="content">{% 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">
@@ -79,12 +80,18 @@
               {% endfor %}
             </tr>
           </table>
-          <br />
-          <br />
-          &copy; {% now "Y" %} That Computer Scientist. Source code available on
-          <a href="https://github.com/luciferreeves/thatcomputerscientist"
-            >GitHub</a
-          >.
+          <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>
diff --git a/templates/blog/partials/sb2.html b/templates/blog/partials/sb2.html
deleted file mode 100644
index c3aa04f6..00000000
--- a/templates/blog/partials/sb2.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div class="content">
-    {% block content %}
-    {% endblock %}
-  </div>
-  {% if not request.path.includes('blog-admin') %}
-  <div class="sidebar sidebar-bg-light-red sidebar-lg">
-    <h3>Recent Posts</h3>
-    <hr>
-    <ul>
-      {% for post in recent_posts %}
-      <li>
-        <a href="{% url 'blog:post' post.slug %}">{{ post.title }}</a>
-        by <em><a href="#">{{ post.author.username }}</a></em>  on {{ post.date|date:"F j, Y" }}.
-      </li>
-      {% endfor %}
-    </ul>
-    <br>
-    <h3>Archives</h3>
-    <hr>
-    <ul>
-      {% for archive in archives %}
-      <li>
-        <a href="#">{{ archive | date:"F Y" }}</a>
-      </li>
-      {% endfor %}
-    </ul>
-    <br>
-    <h3>Categories</h3>
-    <hr>
-    <ul>
-      {% for category in categories %}
-      <li>
-        <a href="#">{{ category.name }}</a>
-      </li>
-      {% endfor %}
-    </ul>
-  </div>
\ No newline at end of file
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index 09b32f1f..a5feda2e 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -38,14 +38,14 @@
             {% endif %}
             <div>
                 <ul class="sidenav">
-                    <li class="sidenavitem"><a href="/">Home</a></li>
-                    <li class="sidenavitem"><a href="/about">About</a></li>
-                    <li class="sidenavitem"><a href="/contact">Contact</a></li>
-                    <li class="sidenavitem"><a href="/blog">Blog</a></li>
+                    <li class="sidenavitem"><a class="anavdef" href="{% url 'blog:home' %}">Home</a></li>
+                    <li class="sidenavitem"><a class="anavdef" href="#">About</a></li>
+                    <li class="sidenavitem"><a class="anavdef" href="#">Contact</a></li>
+                    <li class="sidenavitem"><a class="anavdef" href="#">Blog</a></li>
                     {% if user.is_authenticated %}
-                        <li class="sidenavitem"><a href="{% url 'blog:account' %}">My Account</a></li>
+                        <li class="sidenavitem"><a class="anavdef" href="{% url 'blog:account' %}">My Account</a></li>
                     {% else %}
-                        <li class="sidenavitem"><a href="/register">Register</a></li>
+                        <li class="sidenavitem"><a class="anavdef" href="{% url 'blog:register' %}">Register</a></li>
                     {% endif %}
                 </ul>
             </div>
@@ -61,7 +61,7 @@
             <ul>
                 {% for archive in archives %}
                 <li>
-                <a href="#">{{ archive | date:"F Y" }}</a>
+                <a class="anavdef" href="#">{{ archive | date:"F Y" }}</a>
                 </li>
                 {% endfor %}
             </ul>
@@ -70,7 +70,7 @@
             <ul>
                 {% for category in categories %}
                 <li>
-                <a href="#">{{ category.name }}</a>
+                <a class="anavdef" href="#">{{ category.name }}</a>
                 </li>
                 {% endfor %}
             </ul>
@@ -81,14 +81,14 @@
             <nav>
                 <ul class="sidenav">
                     {% if user.is_superuser %}
-                        <li class="sidenavitem"><a href="{% url 'admin:index' %}">Admin Area</a></li>
+                        <li class="sidenavitem"><a class = "anavdef" href="{% url 'admin:index' %}">Admin Area</a></li>
                     {% endif %}
-                    <li class="sidenavitem"><a href="{% url 'blog-admin:users' %}">Manage Users</a></li>
-                    <li class="sidenavitem"><a href="{% url 'blog-admin:posts' %}">Manage Posts</a></li>
-                    <li class="sidenavitem"><a href="{% url 'blog-admin:comments' %}">Manage Comments</a></li>
-                    <li class="sidenavitem"><a href="{% url 'blog-admin:categories' %}">Manage Categories</a></li>
-                    <li class="sidenavitem"><a href="{% url 'blog-admin:tags' %}">Manage Tags</a></li>
-                    <li class="sidenavitem"><a href="{% url 'blog-admin:new' %}">Create New Post</a></li>
+                    <li class="sidenavitem"><a class = "anavdef" href="{% url 'blog-admin:users' %}">Manage Users</a></li>
+                    <li class="sidenavitem"><a class = "anavdef" href="{% url 'blog-admin:posts' %}">Manage Posts</a></li>
+                    <li class="sidenavitem"><a class = "anavdef" href="{% url 'blog-admin:comments' %}">Manage Comments</a></li>
+                    <li class="sidenavitem"><a class = "anavdef" href="{% url 'blog-admin:categories' %}">Manage Categories</a></li>
+                    <li class="sidenavitem"><a class = "anavdef" href="{% url 'blog-admin:tags' %}">Manage Tags</a></li>
+                    <li class="sidenavitem"><a class = "anavdef" href="{% url 'blog-admin:new' %}">Create New Post</a></li>
                 </ul>
             </nav>
         {% endif %}
diff --git a/thatcomputerscientist/settings.py b/thatcomputerscientist/settings.py
index 36932259..8d95e329 100644
--- a/thatcomputerscientist/settings.py
+++ b/thatcomputerscientist/settings.py
@@ -62,6 +62,7 @@ MIDDLEWARE = [
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
     'whitenoise.middleware.WhiteNoiseMiddleware',
+    'middleware.oldbrowsermiddleware.OldBrowserMiddleware',
 ]
 
 CONFIGURED_SUBDOMAINS = {