major UI change

11 files changed, 216 insertions, 147 deletions

diff --git a/static/css/main.css b/static/css/main.css
index 6182d6e9..0fa669e9 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -4,7 +4,7 @@ body {
     background-attachment: fixed;
     background-position: center;
     background-size: cover;
-    font-family: 'Times New Roman', Times, serif;
+    /* font-family: 'Times New Roman', Times, serif; */
     padding: 0;
     margin: 0;
     min-height: calc(100vh);
@@ -39,10 +39,14 @@ h2 {
     font-size: 24px;
 }
 
+a {
+    color: #636eb0;
+}
+
 .anavdef {
-    font-size: 16px;
     text-decoration: none;
-    color: #8278ed;
+    font-size: 14px;
+    font-family: 'TopNavbar', serif; 
 }
 
 .anavdef:hover {
@@ -62,21 +66,23 @@ fieldset {
 }
 
 .titlebar {
-    background: #160e32;
     padding: 8px 0px;
     padding-left: 10px;
     margin-bottom: 0px;
     margin-top: 0px;
-    text-transform: uppercase;
-    font-size: 12px;
-    color: #cecece;
-    font-weight: bold;
-    font-family: Arial, Helvetica, sans-serif;
+    font-size: 14px;
+    color: #fff;
+    background: #06022c;
+    background-image: linear-gradient(to right, #06022c 0%, black 100%);
+    text-transform: capitalize;
 }
 
 .area-content {
     padding: 10px;
-    background: #06080d;
+}
+
+.area-bg {
+    background: #0c0c18;
 }
 
 .content {
@@ -86,7 +92,7 @@ fieldset {
 }
 
 .alert {
-    background-color: #0c1221;
+    background-color: #06080d;
     padding: 20px;
     *padding: 20px;
     _padding: 20px;
@@ -285,13 +291,12 @@ summary {
 
 .navitem {
     display: inline-block;
-    margin-left: 10px;
-    background: #0000FF;
+    background: #016dfe;
     color: #FFFFFF;
-    border-top: 2px solid #6666FF;
-    border-left: 2px solid #6666FF;
-    border-right: 2px solid #00007C;
-    border-bottom: 2px solid #00007C;
+    border-top: 2px solid #4d99ff;
+    border-left: 2px solid #4d99ff;
+    border-right: 2px solid #004eb6;
+    border-bottom: 2px solid #004eb6;
     position: relative;
     padding: 5px 10px 5px 10px;
     text-align: center;
@@ -319,6 +324,45 @@ summary {
     padding: 4px 8px;
 }
 
+.sbox {
+    display: inline-block;
+    background: #050b0f; 
+    padding: 5px 10px; 
+    font-size: 12px; 
+    font-family: 'TopNavbar', serif; 
+    border-bottom: 3px solid #848484;
+    border-right: 3px solid #848484;
+    border-left: 3px solid #424242;
+    border-top: 3px solid #424242;
+    margin: 0px;
+}
+
+.sbox:focus {
+    outline: none;
+}
+
+.sbtn { 
+    outline: 0; 
+    background: #016dfe;
+    cursor: pointer;
+    background-image: url('../images/gifs/search_static.jpg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    height: 27px;
+    width: 48px;
+    display: inline-block;
+    vertical-align: middle;
+    border-top: 2px solid #4d99ff;
+    border-left: 2px solid #4d99ff;
+    border-right: 2px solid #004eb6;
+    border-bottom: 2px solid #004eb6;
+}
+
+.sbtn:hover {
+    background-image: url('../images/gifs/search.gif');
+}
+
 .ad {
     border: solid 1px #cecece;
     padding: 10px;
diff --git a/static/css/old_ports.css b/static/css/old_ports.css
new file mode 100644
index 00000000..054cb461
--- /dev/null
+++ b/static/css/old_ports.css
@@ -0,0 +1,10 @@
+.sbtn {
+    background-image: url('../images/gifs/search_static_32px.jpg');
+}
+.sbtn:hover {
+    background-image: url('../images/gifs/search_32px.gif');
+}
+.searchtable {
+    position: relative;
+    top: 8px;
+}
\ No newline at end of file
diff --git a/static/images/gifs/construction.gif b/static/images/gifs/construction.gif
index 3556ac01..715ed9cc 100644
--- a/static/images/gifs/construction.gif
+++ b/static/images/gifs/construction.gif
diff --git a/static/images/gifs/search.gif b/static/images/gifs/search.gif
new file mode 100644
index 00000000..fa84a87b
--- /dev/null
+++ b/static/images/gifs/search.gif
diff --git a/static/images/gifs/search_32px.gif b/static/images/gifs/search_32px.gif
new file mode 100644
index 00000000..0b8b0b24
--- /dev/null
+++ b/static/images/gifs/search_32px.gif
diff --git a/static/images/gifs/search_static.jpg b/static/images/gifs/search_static.jpg
new file mode 100644
index 00000000..fd7052db
--- /dev/null
+++ b/static/images/gifs/search_static.jpg
diff --git a/static/images/gifs/search_static_32px.jpg b/static/images/gifs/search_static_32px.jpg
new file mode 100644
index 00000000..37401d12
--- /dev/null
+++ b/static/images/gifs/search_static_32px.jpg
diff --git a/static/images/site/icons/research.png b/static/images/site/icons/research.png
new file mode 100644
index 00000000..68bcaede
--- /dev/null
+++ b/static/images/site/icons/research.png
diff --git a/templates/blog/home.html b/templates/blog/home.html
index fea37ce0..eb823b18 100644
--- a/templates/blog/home.html
+++ b/templates/blog/home.html
@@ -1,92 +1,101 @@
 {% extends 'blog/partials/base.html' %} {% block content %}
 {% load static %}
 <div class="main">
-  <div class="alert">
-    <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 class="anavdef" href="#">About</a> page. If you
-      would like to connect with me, please visit my
-      <a class="anavdef" href="#">Contact</a> page. Please use the sidebar to navigate
-      the site.
-    </p>
-    <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 class="area">
+    <p class="titlebar">Welcome</p>
+    <div class="area-content">
+      <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</a> page. If you
+        would like to connect with me, please visit my
+        <a href="#">Contact</a> page. Please use the sidebar to navigate
+        the site.
+      </p>
+      <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>
   </div>
+  
   <br />
-  {% if announcements is not None %}
-  <fieldset>
-    <legend>
-      <img src = "{% static 'images/gifs/update.gif' %}" height="16px" width="80px" class="updates">
-    </legend>
-    <marquee behavior="scroll" direction="up" height="250" scrollamount="2" scrolldelay="10" onmouseover="this.stop()" onmouseout="this.start()">
-      <ul class="announcements">
-        {% for announcement in announcements %}
-        <li style="margin-bottom: 20px;">
-          <table>
-            <tr>
-              <td width="30px" style="vertical-align: top;">
-                {% if announcement.is_new %}
-                  <img class="ac" src="{% static 'images/gifs/new_announcement.gif' %}"/>
-                {% else %}
-                  <img class="ac2" src="{% static 'images/gifs/hand.gif' %}"/>
-                {% endif %}
-              </td>
-              <td style="color: white; vertical-align: top; font-size: 16px;">
-                <b>{{ announcement.created_at | date:"M d, Y" }}</b> 
-                <hr>
-                {{ announcement.content }}
-              </td>
-            </tr>
-          </table>
-        </li>
-        {% endfor %}
-      </ul>
-    </marquee>
-  </fieldset>
+
+  {% load ad %}
+  <div class="ad">
+    <img src="{{'banner'|ad }}" alt="Ad" style="width: 698px; height: 90px;" border="0"/>
+  </div>
+
   <br />
-  {% endif %}
+
   <div style="text-align:center;">
     <img src="{% static 'images/gifs/construction.gif' %}" style="height:28px; width: 702px;">
   </div>
+  
   <br />
-  {% load ad %}
-  <div class="ad">
-    <img src="{{'banner'|ad }}" alt="Ad" style="width: 698px; height: 90px;" border="0"/>
-  </div>
-  {% if recent_posts %}
-  <h3 style="margin-bottom: 0px"><em>Recent Posts</em></h3>
-  <hr />
-  <ul>
-    {% for post in recent_posts %}
-    <li>
-      <h2 style="margin-bottom: 12px;">
-        <a style="font-size: 24px;" class="anavdef" href="{% url 'blog:post' post.slug %}">{{ post.title }}</a>
-      </h2>
-      <p style="margin-bottom: 16px; margin-top: 16px;">
-        Posted on <em><u>{{ post.date | date:"M d, Y" }}</u></em> by
-        <em
-          ><a class="anavdef" href="#">{{ post.author }}</a> in
-          <a class="anavdef" href="#">{{ post.category }}</a></em
-        >
-      </p>
-      <div class="article-body">
-        <p>{{ post.excerpt | safe }}</p>
+
+
+  {% if announcements is not None %}
+    <div class="area">
+      <p class="titlebar"> <img src = "{% static 'images/gifs/update.gif' %}" style="height: 14px; width: auto;" class="updates"></p>
+      <div class="area-content">
+        <marquee behavior="scroll" direction="up" height="250" scrollamount="2" scrolldelay="10" onmouseover="this.stop()" onmouseout="this.start()">
+          <ul class="announcements">
+            {% for announcement in announcements %}
+            <li style="margin-bottom: 20px;">
+              <table>
+                <tr>
+                  <td width="30px" style="vertical-align: top;">
+                    {% if announcement.is_new %}
+                      <img class="ac" src="{% static 'images/gifs/new_announcement.gif' %}"/>
+                    {% else %}
+                      <img class="ac2" src="{% static 'images/gifs/hand.gif' %}"/>
+                    {% endif %}
+                  </td>
+                  <td style="color: white; vertical-align: top; font-size: 16px;">
+                    <b>{{ announcement.created_at | date:"M d, Y" }}</b> 
+                    <hr>
+                    {{ announcement.content }}
+                  </td>
+                </tr>
+              </table>
+            </li>
+            {% endfor %}
+          </ul>
+        </marquee>
       </div>
-      <p>
-        <em
-          ><a class="anavdef" href="{% url 'blog:post' post.slug %}">Click here</a> to continue
-          reading...</em
-        >
-      </p>
-    </li>
-    {% endfor %}
-  </ul>
+    </div>
+    <br />
+  {% endif %}
+
+  
+  {% if recent_posts %}
+  <div class="area">
+    <p class="titlebar">Recent Posts</p>
+    <div class="area-content">
+      {% for post in recent_posts %}
+        <h2 style="margin-bottom: 12px;">
+          <a style="font-size: 24px;" href="{% url 'blog:post' post.slug %}">{{ post.title }}</a>
+        </h2>
+        <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</em>
+          <em><a href="#">{{ post.category }}</a></em>
+        </p>
+        <div class="article-body">
+          <p>{{ post.excerpt | safe }}</p>
+        </div>
+        <p>
+          <em><a href="{% url 'blog:post' post.slug %}">Click here</a> to continue reading...</em>
+        </p>
+      {% endfor %}
+    </div>
+  </div>
   {% endif %}
+
 </div>
 {% endblock %}
diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index 5fc4afbc..18f33d4c 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -5,54 +5,60 @@
     <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."
-    />
+    <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/fonts.css' %}" />
     <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' %}"
-    />
+    {% if request.old_browser %}
+      <link preload rel="stylesheet" href="{% static 'css/old_ports.css' %}" />
+    {% endif %}
+    <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>
     <div class="header"></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="vertical-align: middle; border-spacing: 12px; border-collapse: separate; margin-bottom: -8px;">
+        <tr>
+          <td style="padding: 0px;">
+            <form action="#" method="GET">
+              <table style="vertical-align: middle;" class="searchtable">
+                <tr>
+                  <td>
+                    <input type="text" name="q" placeholder="Search..." class="sbox" autocomplete="off">
+                  </td>
+                  <td>
+                    <button type="submit" align="center" class="sbtn"></button>
+                  </td>
+                </tr>
+              </table>
+            </form>
+          </td>
+          <td>
+          {% 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 %}
+          </td>
+          <td>
+          {% 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 %}
+          </td>
+        </tr>
+      </table>
+      <hr>
       <table style="table-layout: fixed; width: 1000px;">
         <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>
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index b3d8d4f1..dc036d3f 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -4,7 +4,7 @@
     {% if not user.is_authenticated %}
     <div class="area">
         <p class="titlebar">Login</p>
-        <div class="area-content">
+        <div class="area-content area-bg">
             <form method="post" action="{% url 'users:login' %} ">
                 {% csrf_token %}
                 <label for="username">Username</label>
@@ -32,7 +32,6 @@
     {% endif %}
 
     <br>
-
     {% comment %} Navigation Area {% endcomment %}
     <div class="area">
         {% if user.is_authenticated %}
@@ -40,7 +39,7 @@
         {% else %}
             <p class="titlebar">Navigation</p>
         {% endif %}
-        <div class="area-content">
+        <div class="area-content area-bg">
             <table style="table-layout: fixed; width: 230px;">
                 <tr>
                     <td width="24px">
@@ -86,19 +85,20 @@
     <br>
 
     {% comment %} Load Fake Ad {% endcomment %}
-
-    <div class="ad">
-        {% load ad %}
-        <img src="{{ "big" | ad }}" alt="Advertisement" style="width: 100%; height: auto;">
+    <div class="area">
+        <p class="titlebar">Advertisement</p>
+        <div class="area-content area-bg">
+            {% load ad %}
+            <img src="{{ "big" | ad }}" alt="Advertisement" style="width: 100%; height: auto;">
+        </div>
     </div>
 
     <br>
-
     {% comment %} Archives {% endcomment %}
 
     <div class="area">
         <p class="titlebar">Archives</p>
-        <div class="area-content">
+        <div class="area-content area-bg">
             <table style="table-layout: fixed; width: 230px;">
                 {% for archive in archives %}
                 <tr>
@@ -118,7 +118,7 @@
 
     <div class="area">
         <p class="titlebar">Categories</p>
-        <div class="area-content">
+        <div class="area-content area-bg">
             <table style="table-layout: fixed; width: 230px;">
                 {% for category in categories %}
                 <tr>
@@ -138,7 +138,7 @@
     <br>
     <div class="area">
         <p class="titlebar">Admin</p>
-        <div class="area-content">
+        <div class="area-content area-bg">
             <table style="table-layout: fixed; width: 230px;">
                 {% if user.is_superuser %}
                     <tr>