Major visual overhaul

6 files changed, 83 insertions, 64 deletions

diff --git a/templates/blog/home.html b/templates/blog/home.html
index 2357a13e..54e4d6b2 100644
--- a/templates/blog/home.html
+++ b/templates/blog/home.html
@@ -1,7 +1,7 @@
 {% extends 'blog/partials/base.html' %} {% block content %}
 <div class="main">
   <div class="alert">
-    <h1 class="center">That Computer Scientist</h1>
+    {% comment %} <h1 class="center">That Computer Scientist</h1> {% endcomment %}
     <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
@@ -12,7 +12,7 @@
     </p>
   </div>
   <br />
-  <div class="alert" style="background-color: rgb(223, 255, 243)">
+  <div class="alert" style="background-color: rgb(13 44 33)">
     <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,
@@ -22,16 +22,51 @@
     </p>
   </div>
     {% if last_post %}
-      <article>
+      <h3 style="margin-bottom: 0px"><em>Recent Posts</em></h3>
+      <hr />
+      <ul>
+      <li>
         <h1 style="margin-bottom: 12px; font-size: 2rem;"><a href="{% url 'blog:post' last_post.slug %}">{{ last_post.title }}</a></h1>
         <p style="line-height: 1.6em;">
             Latest post on <em><u>{{ last_post.date | date:"M d, Y" }}</u></em> by <em><a href="#">{{ last_post.author }}</a> in <a href="#">{{ last_post.category }}</a></em>
         </p>
         <hr>
-        <div class="article-body">{{ last_post.body | safe }}</div>
-        <p><em><a href="{% url 'blog:post' last_post.slug %}#comments">Click here</a></em> to read comments.</p>
+        <div class="article-body">
+          <p>
+            {{ first_paragraph | safe }}
+          </p>
+        </div>
+        <p><em><a href="{% url 'blog:post' last_post.slug %}">Click here</a></em> to read more.</p>
         <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-      </article>
+      </li>
     {% endif %}
+      {% 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:"M d, Y" }}.
+      </li>
+      {% endfor %}
+    </ul>
+    <br />
+    <h3 style="margin-bottom: 0px"><em>Archives</em></h3>
+    <hr />
+    <ul>
+      {% for archive in archives %}
+      <li>
+        <a href="#">{{ archive | date:"F Y" }}</a>
+      </li>
+      {% endfor %}
+    </ul>
+    <br />
+    <h3 style="margin-bottom: 0px"><em>Categories</em></h3>
+    <hr />
+    <ul>
+      {% for category in categories %}
+      <li>
+        <a href="#">{{ category.name }}</a>
+      </li>
+      {% endfor %}
+    </ul>
 </div>
 {% endblock %}
diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index 588f7302..dd0e7819 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -11,48 +11,45 @@
     />
     <title>That Computer Scientist - {{ title }}</title>
     <link preload rel="stylesheet" href="{% static 'css/main.css' %}" />
-    <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' %}">
+    <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>
-    {% include 'blog/partials/sidebar.html' %}
-    <div class="content">
-      {% block content %}
-      {% endblock %}
-    </div>
-    <div class="sidebar sidebar-lg" style="border-left: dotted 1px black;">
-      <h3 style="margin-bottom: 0px;"><em>Recent Posts</em></h3>
+    <div class="header"></div>
+    <div style="width: 1000px; margin: 20px auto;">
       <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 style="margin-bottom: 0px;"><em>Archives</em></h3>
-      <hr>
-      <ul>
-        {% for archive in archives %}
-        <li>
-          <a href="#">{{ archive | date:"F Y" }}</a>
-        </li>
-        {% endfor %}
-      </ul>
-      <br>
-      <h3 style="margin-bottom: 0px;"><em>Categories</em></h3>
-      <hr>
-      <ul>
-        {% for category in categories %}
-        <li>
-          <a href="#">{{ category.name }}</a>
-        </li>
-        {% endfor %}
-      </ul>
+    </div>
+    <div class="mc">
+      {% include 'blog/partials/sidebar.html' %}
+      <div class="content">{% block content %} {% endblock %}</div>
+      {% comment %} <div class="sidebar sidebar-lg" style="border-left: dotted 1px black">
+        
+      </div> {% endcomment %}
+    </div>
+    <div style="width: 1000px; margin: 20px auto;">
+      <hr style="margin: 2rem 0;">
+      <footer>
+          &copy; {% now "Y" %} That Computer Scientist. Source code available on <a href="https://github.com/luciferreeves/thatcomputerscientist">GitHub</a>.
+      </footer>
     </div>
   </body>
 </html>
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index 66f4f5d0..8a72ccf4 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -1,12 +1,10 @@
 {% load static %}
-<div class="sidebar sidebar-bg-blue sidebar-border">
-    {% comment %} Hamburger Icon {% endcomment %}
-    <img class="hamburger" src="{% static 'images/icons/notepad_file-2.png' %}" alt="Hamburger Icon" class="hamburger-icon">
+<div class="sidebar">
 
-    <a href="/" class="title">
+    {% comment %} <a href="/" class="title">
         <img src="{% static 'images/logo.png' %}" alt="That Computer Scientist Logo" width="10rem" height="3.23rem">
     <!-- Login Box -->
-    </a>
+    </a> {% endcomment %}
     <div class="lgn-area">
     <div>
         {% if user.is_authenticated %}
@@ -37,7 +35,6 @@
             {% endfor %}
         </fieldset>
         {% endif %}
-        <br>
         <fieldset>
             {% if user.is_authenticated %}
                 <legend>Hello, {{ user.username }}!</legend>
@@ -78,10 +75,6 @@
             </nav>
         {% endif %}
     </div>
-    <hr style="margin: 2rem 0;">
-    <footer>
-        &copy; {% now "Y" %} That Computer Scientist. Source code available on <a href="https://github.com/luciferreeves/thatcomputerscientist">GitHub</a>.
-    </footer>
 </div>
 </div>
 
@@ -94,10 +87,4 @@
             input.value = username;
         });
     }
-
-    const hamburger = document.querySelector('.hamburger');
-    hamburger.addEventListener('click', function() {
-        const lgn_area = document.querySelector('.lgn-area');
-        lgn_area.classList.toggle('lgn-area-open');
-    });
 </script>
diff --git a/templates/blog/register.html b/templates/blog/register.html
index 7bf5da85..d94e545f 100644
--- a/templates/blog/register.html
+++ b/templates/blog/register.html
@@ -57,7 +57,7 @@
             {% endfor %}
         </div>
         <div>
-            <button type="submit" class="btn btn-primary" style="margin-top:10px">Register</button>
+            <input type="submit" class="btn btn-primary" style="margin-top:10px" value="Register">
         </div>
         <br>
         {% for message in messages %}
diff --git a/templates/blog_admin/edit_post.html b/templates/blog_admin/edit_post.html
index c221917d..eafac305 100644
--- a/templates/blog_admin/edit_post.html
+++ b/templates/blog_admin/edit_post.html
@@ -73,7 +73,7 @@
             {% load static %}
             <button class="ql-formula-block">
               <img
-                style="height: 32px; position: relative; top: -6px; left: 4px"
+                style="height: 32px; position: relative; top: -6px; left: 4px; filter: invert(1)"
                 src="{% static 'images/icons/formula.png' %}"
                 alt="Block Formula"
               />
diff --git a/templates/blog_admin/new_post.html b/templates/blog_admin/new_post.html
index 807d9d9a..8b726c13 100644
--- a/templates/blog_admin/new_post.html
+++ b/templates/blog_admin/new_post.html
@@ -73,7 +73,7 @@
             {% load static %}
             <button class="ql-formula-block">
               <img
-                style="height: 32px; position: relative; top: -6px; left: 4px"
+                style="height: 32px; position: relative; top: -6px; left: 4px; filter: invert(1)"
                 src="{% static 'images/icons/formula.png' %}"
                 alt="Block Formula"
               />