Restored Main Page from the Archived Branch

5 files changed, 225 insertions, 3 deletions

diff --git a/blog/static/css/main.css b/blog/static/css/main.css
new file mode 100644
index 00000000..6b23e412
--- /dev/null
+++ b/blog/static/css/main.css
@@ -0,0 +1,142 @@
+/* making a sidebar layout with 20% sidebar */
+body {
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    min-height: calc(100vh - 16px);
+    background-color: #fafafa;
+    padding: 0;
+    min-width: calc(100vw - 16px);
+    font-family: serif;
+}
+
+.sidebar {
+    background-color: #bad9ff;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border: 1px solid #191919;
+}
+
+.main {
+    flex: 1;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.title:visited {
+    color: #000;
+}
+
+.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: #ffd4bd;
+    padding: 20px;
+    border: 1px solid #191919;
+}
+
+lebel, input, textarea, select {
+    display: block;
+    margin: 5px 0px;
+    font-family: serif;
+    font-size: 16px;
+}
+
+input[type = 'submit'] {
+    margin-top: 10px;
+}
+
+fieldset {
+    border: 1px solid #191919;
+    padding: 10px 20px;
+}
+
+nav > ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+nav > ul > li {
+    margin: 5px 0;
+}
+
+.center {
+    text-align: center;
+}
+
+.login-box {
+    padding: 20px;
+    border: 1px solid #191919;
+}
+
+.login-box > p {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+.error {
+    color: red;
+}
+
+.success {
+    color: green;
+}
+
+.account {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.ac-sidebar {
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.ac-main {
+    flex: 1;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.errorbox {
+    background-color: #ffd4bd;
+    padding: 20px;
+    border: 1px solid #191919;
+}
+
+.errorbox > h1 {
+    margin-top: 0;
+}
+
+/* Optimize for phones */
+@media only screen and (max-width: 480px) {
+    body {
+        flex-direction: column;
+    }
+
+    .account {
+        flex-direction: column;
+    }
+}
diff --git a/blog/static/images/logo.png b/blog/static/images/logo.png
new file mode 100644
index 00000000..56366c3d
--- /dev/null
+++ b/blog/static/images/logo.png
diff --git a/blog/templates/home.html b/blog/templates/home.html
index 7f246ce9..6b120d0b 100644
--- a/blog/templates/home.html
+++ b/blog/templates/home.html
@@ -1,3 +1,28 @@
-<h1>Hello, world!</h1>
-<hr>
-<p>This website is under construction and will be available soon.</p>
\ No newline at end of file
+{% extends 'partials/base.html' %} {% block content %}
+<div class="main">
+  <div class="alert">
+    <h1 class="center">That Computer Scientist</h1>
+    <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
+      would like to connect with me, please visit my
+      <a href="/contact">Contact</a> page. Please use the sidebar to navigate
+      the site.
+    </p>
+  </div>
+  <br />
+  <div class="alert" style="background-color: rgb(223, 255, 243)">
+    <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>
+  <section>
+    <h2>Recent Posts</h2>
+  </section>
+</div>
+{% endblock %}
diff --git a/blog/templates/partials/base.html b/blog/templates/partials/base.html
new file mode 100644
index 00000000..6357140c
--- /dev/null
+++ b/blog/templates/partials/base.html
@@ -0,0 +1,19 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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."
+    />
+    <title>That Computer Scientist - {{ title }}</title>
+    <link preload rel="stylesheet" href="{% static 'css/main.css' %}" />
+  </head>
+  <body>
+    {% include 'partials/sidebar.html' %}
+    {% block content %} {% endblock %}
+  </body>
+</html>
diff --git a/blog/templates/partials/sidebar.html b/blog/templates/partials/sidebar.html
new file mode 100644
index 00000000..d285b5ae
--- /dev/null
+++ b/blog/templates/partials/sidebar.html
@@ -0,0 +1,36 @@
+{% load static %}
+<div class="sidebar">
+    <a href="/" class="title">
+        <img src="{% static 'images/logo.png' %}" alt="That Computer Scientist Logo" width="10rem" height="3.23rem">
+    <!-- Login Box -->
+    </a>
+        <div class="login-box">
+            <p>Welcome, username!</p>
+            <a href="/logout">Logout</a>
+        </div>
+        <form method="post" onsubmit="event.preventDefault();">
+            <fieldset>
+                <legend>Login Area</legend>
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" placeholder="Username" autocomplete="off">
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" placeholder="Password">
+                <p class="error">Demo Error</p>
+                <input type="submit" value="Login">
+            </fieldset>
+        </form>
+    <br>
+    <fieldset>
+        <legend>Navigation</legend>
+        <nav>
+            <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="/about">About</a></li>
+                <li><a href="/contact">Contact</a></li>
+                <li><a href="/blog">Blog</a></li>
+                <li><a href="/account">My Account</a></li>
+                <li><a href="/register">Register</a></li>
+            </ul>
+        </nav>
+    </fieldset>
+</div>
\ No newline at end of file