Major visual overhaul

12 files changed, 171 insertions, 160 deletions

diff --git a/blog/context_processors.py b/blog/context_processors.py
index 605fc0c5..7d2f7da0 100644
--- a/blog/context_processors.py
+++ b/blog/context_processors.py
@@ -1,13 +1,13 @@
 from .models import Post, Category
 
-def recent_posts(request):
-    recent_posts = Post.objects.filter(is_public=True).order_by('-date')[:5]
-    return {'recent_posts': recent_posts}
+def recent_posts():
+    recent_posts = Post.objects.filter(is_public=True).order_by('-date')[1:6]
+    return recent_posts
 
-def categories(request):
+def categories():
     categories = Category.objects.all()
-    return {'categories': categories}
+    return categories
 
-def archives(request):
+def archives():
     archives = Post.objects.filter(is_public=True).dates('date', 'month', order='DESC')
-    return {'archives': archives}
+    return archives
diff --git a/blog/views.py b/blog/views.py
index 45db0370..28d693f1 100644
--- a/blog/views.py
+++ b/blog/views.py
@@ -10,12 +10,14 @@ from string import ascii_letters, digits
 import base64
 import json
 from .models import Post, Comment
+from .context_processors import recent_posts, categories, archives
 
 # Create your views here.
 
 def home(request):
     last_post = Post.objects.filter(is_public=True).order_by('-date')[0]
-    return render(request, 'blog/home.html', {'title': 'Home', 'last_post': last_post})
+    first_paragraph = last_post.body.split('<p>')[1].split('</p>')[0]
+    return render(request, 'blog/home.html', {'title': 'Home', 'last_post': last_post, 'first_paragraph': first_paragraph, 'recent_posts': recent_posts(), 'categories': categories(), 'archives': archives()})
 
 def account(request):
     user = request.user
diff --git a/static/css/main.css b/static/css/main.css
index 35fe5b56..ff2a33bd 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,26 +1,67 @@
-/* making a sidebar layout with 20% sidebar */
 body {
+    background-image: url("../images/bg.jpeg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: center;
+    font-family: serif;
+    padding: 0;
+    margin: 0;
+    min-height: calc(100vh);
+    text-align: center;
+}
+
+.header {
+    background-image: url("../images/banner.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 1000px;
+    height: 300px;
+    margin: auto;
+}
+
+.mc {
     display: inline-flex;
     flex-direction: row;
     flex-wrap: wrap;
-    min-height: calc(100vh);
-    background-color: #fafafa;
-    padding: 0;
-    min-width: calc(100vw - 16px);
-    width: 100%;
-    font-family: serif;
-    margin: 0;
-    padding: 0;
+    width: 1000px;
+    border: solid 1px cecece;
+    padding: 2px;
+    text-align: initial;
 }
 
 .sidebar {
-    padding: 20px;
+    /* padding: 20px; */
     overflow-x: hidden;
     overflow-y: auto;
     min-width: 15rem;
     max-width: 15rem;
 }
 
+/* COLORS SECTION ACCORIDING TO DARK MODE */
+
+h1, h2, h3, h4, h5, h6, p, a, li, span, label, footer, .table {
+    color: #cecece;
+}
+
+a {
+    color: #8278ed;
+}
+/* 
+a:visited {
+    color: #b894dc;
+} */
+
+svg {
+    filter: invert(1);
+}
+
+fieldset, legend {
+    color: #cecece;
+}
+
+
 .sidebar-lg {
     min-width: 20rem;
     max-width: 20rem;
@@ -31,20 +72,20 @@ body {
 }
 
 .sidebar-border {
-    border: 1px solid #191919;
+    border: 1px solid #e6e6e6;
 }
 
 
 .content {
     flex: 1;
-    padding: 20px;
+    padding: 9px 20px 20px 20px;
     overflow-x: hidden;
     overflow-y: auto;
     min-height: calc(100vh - 40px);
 }
 
 .title:visited {
-    color: #000;
+    color: #cecece;
 }
 
 .title > h1 {
@@ -66,9 +107,9 @@ body {
 }
 
 .alert {
-    background-color: #ffd4bd;
+    background-color: #0c1221;
     padding: 20px;
-    border: 1px solid #191919;
+    border: 1px solid #cecece;
 }
 
 lebel, input, textarea, select {
@@ -78,12 +119,17 @@ lebel, input, textarea, select {
     font-size: 16px;
 }
 
+input, textarea {
+    background-color: rgb(17, 17, 17);
+    color: #cecece;
+}
+
 input[type = 'submit'] {
     margin-top: 10px;
 }
 
 fieldset {
-    border: 1px solid #191919;
+    border: 1px solid #cecece;
     padding: 10px 20px;
 }
 
@@ -103,7 +149,7 @@ nav > ul > li {
 
 .login-box {
     padding: 20px;
-    border: 1px solid #191919;
+    border: 1px solid #cecece;
 }
 
 .login-box > p {
@@ -112,7 +158,7 @@ nav > ul > li {
 }
 
 .error {
-    color: red;
+    color: rgb(255, 81, 81);
 }
 
 .success {
@@ -120,16 +166,16 @@ nav > ul > li {
 }
 
 .alert.success {
-    background-color: #d4ffbd;
+    color: #d4ffbd;
     padding: 10px;
-    color: rgb(5, 74, 5);
+    background-color: rgb(5, 74, 5);
     font-weight: bold;
 }
 
 .alert.error {
-    background-color: #ffbdbd;
+    color: #ffbdbd;
     padding: 10px;
-    color: rgb(74, 5, 5);
+    background-color: rgb(74, 5, 5);
     font-weight: bold;
 }
 
@@ -153,19 +199,15 @@ nav > ul > li {
 }
 
 .errorbox {
-    background-color: #ffd4bd;
+    background-color: #191919;
     padding: 20px;
-    border: 1px solid #191919;
+    border: 1px solid #ffd4bd;
 }
 
 .errorbox > h1 {
     margin-top: 0;
 }
 
-.hamburger {
-    display: none;
-}
-
 #captcha {
     display: flex;
     flex-direction: row;
@@ -197,11 +239,11 @@ nav > ul > li {
 
 /* Add borders to all cells */
 .table, .table th, .table td {
-    border: 1px solid #191919;
+    border: 1px solid #cecece;
 }
 
 .table-striped > tbody > tr:nth-child(odd) {
-    background-color: #f2f2f2;
+    background-color: #0000007a;
 }
 
 summary {
@@ -226,18 +268,18 @@ summary {
 }
 
 .label-success {
-    background-color: #d4ffbd;
-    color: rgb(5, 74, 5);
+    color: #d4ffbd;
+    background-color: rgb(5, 74, 5);
 }
 
 .label-error {
-    background-color: #ffbdbd;
-    color: rgb(74, 5, 5);
+    color: #ffbdbd;
+    background-color: rgb(74, 5, 5);
 }
 
 .label-warning {
-    background-color: #ffd4bd;
-    color: rgb(74, 5, 5);
+    color: #ffd4bd;
+    background-color: rgb(74, 5, 5);
 }
 
 .comment {
@@ -272,51 +314,3 @@ summary {
     max-height: 50vh;
     max-width: 100%;
 }
-
-/* Optimize for phones */
-@media only screen and (max-width: 480px) {
-    body {
-        flex-direction: column;
-    }
-
-    .account {
-        flex-direction: column;
-    }
-
-    .sidebar, .sidebar-lg {
-        min-width: calc(100vw - 42px)
-    }
-
-    .hamburger {
-        display: block;
-        position: absolute;
-        right: 20px;
-    }
-    .title > img {
-        position: relative;
-        left: -5.9rem;
-        top: -3px;
-    }
-
-    .lgn-area {
-        display: none;
-    }
-
-    .lgn-area-open {
-        display: block;
-    }
-
-    .table {
-        width: 100%;
-        table-layout: fixed;
-        word-wrap: break-word;
-    }
-
-    .float-right {
-        position: initial;
-    }
-
-    .content {
-        min-height: auto;
-    }
-}
diff --git a/static/images/banner.png b/static/images/banner.png
new file mode 100644
index 00000000..5fd3f5ae
--- /dev/null
+++ b/static/images/banner.png
diff --git a/static/images/bg.jpeg b/static/images/bg.jpeg
new file mode 100644
index 00000000..396e3bca
--- /dev/null
+++ b/static/images/bg.jpeg
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"
               />
diff --git a/thatcomputerscientist/settings.py b/thatcomputerscientist/settings.py
index 68ce13bc..efd01fe3 100644
--- a/thatcomputerscientist/settings.py
+++ b/thatcomputerscientist/settings.py
@@ -88,10 +88,6 @@ TEMPLATES = [
     },
 ]
 
-TEMPLATES[0]['OPTIONS']['context_processors'].append('blog.context_processors.recent_posts')
-TEMPLATES[0]['OPTIONS']['context_processors'].append('blog.context_processors.categories')
-TEMPLATES[0]['OPTIONS']['context_processors'].append('blog.context_processors.archives')
-
 WSGI_APPLICATION = 'thatcomputerscientist.wsgi.application'