aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--blog/context_processors.py14
-rw-r--r--blog/views.py4
-rw-r--r--static/css/main.css162
-rw-r--r--static/images/banner.pngbin0 -> 237640 bytes
-rw-r--r--static/images/bg.jpegbin0 -> 131609 bytes
-rw-r--r--templates/blog/home.html47
-rw-r--r--templates/blog/partials/base.html75
-rw-r--r--templates/blog/partials/sidebar.html19
-rw-r--r--templates/blog/register.html2
-rw-r--r--templates/blog_admin/edit_post.html2
-rw-r--r--templates/blog_admin/new_post.html2
-rw-r--r--thatcomputerscientist/settings.py4
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
Binary files differ
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
Binary files differ
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'
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 09:31:54 +0000