Style and layout tweaks

thoughts/static/thoughts/main.css

@@ -1,23 +1,35 @@
 @charset "UTF-8";
 
-html {
+* {
+    box-sizing: content-box;
+}
+
+body {
     padding: 0;
     margin: 0;
-    width: 100%;
+    width: 100vw;
-    height: 100%;
+    height: 100vh;
+    overflow: hidden;
 
     background: var(--accent-color);
 }
 
-body {
+/* This is the black background box that scrolls */
+#main-wrap {
+    height: 100%;
+    overflow: scroll;
+
     margin: 0 1.5%;
 
     background: var(--background-color);
+}
 
-    min-height: calc(100% - 40px);
+/* This is the invisible column that stores our text */
+#main-content {
+    max-width: 45em;
 
-    /*The height of the footer at the bottom*/
+    padding-left: 30px;
-    padding: 0 0 40px;
+    padding-bottom: 30px;
 
     font-size: 16px;
     color: var(--text-color);
@@ -26,11 +38,6 @@ body {
     -webkit-text-size-adjust: 100%;
 }
 
-.main-wrap {
-    max-width: 36em;
-    margin: 20px 30px;
-}
-
 .thought {
     margin: 20px 0;
 }
@@ -167,6 +174,7 @@ h1 {
     overflow: auto;
     font-size: 14px;
     color: var(--accent-color);
+    font-weight: 100;
     margin-top: 16px;
 }
 
@@ -217,49 +225,65 @@ h1 {
 }
 
 /* Navbar styles */
-#main-nav {
+header#main-header {
-    padding: 4% 30px 15px;
+    padding-top: 4%;
-    font-size: 3rem !important;
-    font-weight: normal;
     margin: 0;
     overflow: auto;
-    white-space: nowrap;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
 }
 
-#main-nav .text {
+#main-header h1 {
-    color: var(--text-color);
-
-    font-family: Georgia, Libre Baskerville, serif;
-}
-
-#main-nav h1 {
     /* Disable browser styles for h1 */
     font-size: inherit;
     font-weight: inherit;
     display: inline;
+    font-size: 3rem;
+    font-weight: normal;
+    color: var(--text-color);
+    font-family: Georgia, Libre Baskerville, serif;
 }
 
-.history-nav {
+#main-header h1 a {
+    color: inherit;
+}
+
+#main-header#header-right {
+    align-self: flex-end;
+}
+
+.nav {
     font-size: 1.1em;
-    margin-top: 30px;
+    line-height: 1.5;
-    margin-bottom: 40px;
+    margin-top: 15px;
+    margin-bottom: 15px;
     display: flex; /* Mostly just removes the horizontal space from whitespace */
+    justify-content: end;
 }
 
-.history-nav .nav-item:not(:last-child)::after {
+.nav .nav-item:not(:last-child)::after {
   content: "•";
   margin-left: 0.7em;
   margin-right: 0.7em;
   text-decoration: none !important;
 }
 
-.history-nav .current-page {
+.nav .current-page {
     font-weight: bold;
 }
 
-.history-nav a, .history-nav a:visited {
+.nav a, .nav a:visited {
+    font-weight: 100;
+
     color: var(--accent-color);
 }
-.history-nav a:hover {
+.nav a:hover {
     text-decoration: underline;
 }
+
+.nav-wrapper {
+    margin-bottom: 40px;
+}

thoughts/templates/thoughts/index.html

@@ -3,12 +3,12 @@
 
 {% block title %}Thoughts{% endblock %}
 
-{% block navigation %}
+<!-- {% block navigation %}
     <h1 class="text" aria-current="page">Thoughts</h1>
     <a  class="text" href="/about">About</a>{% if authenticated %}
     <a  class="text" href="/post">Post</a>
 {% endif %}
-{% endblock %}
+{% endblock %} -->
 
 {% block head %}
     {% if not first_page %}
@@ -40,8 +40,20 @@
 
 {% endblock %}
 
+{% block headerright %}
+    <nav class="nav" id="main-nav" aria-label="Navigation">
+        <span class="nav-item"><a href="/about">About this site</a></span>
+
+        <span class="nav-item"><a href="/search">Search</a></span>
+
+        {% if authenticated %}
+            <span class="nav-item"><a href="/post">Post</a></span>
+        {% endif %}
+    </nav>
+{% endblock %}
+
 {% block main %}
-    <nav class="history-nav top" aria-label="History Navigation">
+    <nav class="nav top" aria-label="History Navigation">
         {% if not is_first_page %}
             <span class="nav-item"><a href="?page={{ previous_page_slug }}">Newer</a></span>
         {% endif %}
@@ -51,8 +63,6 @@
         {% if not is_last_page %}
             <span class="nav-item"><a href="?page={{ next_page_slug }}">Older</a></span>
         {% endif %}
-
-        <span class="nav-item"><a href="/search">Search</a></span>
     </nav>
 
     {% for thought in thoughts %}
@@ -69,24 +79,19 @@
     </div>
     {% endfor %}
 
-    <nav class="history-nav bottom" aria-label="History Navigation">
+    <nav class="nav bottom" aria-label="History Navigation">
         {% if not is_first_page %}
-            <a class="nav-item" href="?page={{ previous_page_slug }}">Older</a>
+            <span class="nav-item"><a href="?page={{ previous_page_slug }}">Newer</a></span>
         {% endif %}
 
-        <span class="current-page nav-item"><span>{{ page.formatted_name }}</span></span>
+        <span class="nav-item"><span class="current-page">{{ page.formatted_name }}</span></span>
 
         {% if not is_last_page %}
-            <a class="nav-item" href="?page={{ previous_page_slug }}">Older</a>
+            <span class="nav-item"><a href="?page={{ next_page_slug }}">Older</a></span>
         {% endif %}
-
-        <a class="nav-item" href="/search">Search</a>
     </nav>
 {% endblock %}
 
-{% block footer %}
-{% endblock %}
-
 {% block scripts %}
     <script>
         const els = document.querySelectorAll(".thought");

thoughts/templates/thoughts/page.html

@@ -38,21 +38,22 @@
     </style>
 </head>
 <body>
-<header>
+<div id="main-wrap">
-    <nav id="main-nav">
+    <main id="main-content">
-        {% block navigation %}{% endblock %}
+        <header id="main-header">
-    </nav>
+            <h1>
-</header>
+                <a class="text" href="/">Thoughts</a>
+            </h1>
+            <div id="header-right">
+                {% block headerright %}
+                {% endblock %}
+            </div>
+        </header>
 
-<main class="main-wrap" id="main-content">
+        {% block main %}
-    {% block main %}
+        {% endblock %}
-    {% endblock %}
+    </main>
-</main>
+</div>
-
-<footer>
-    {% block footer %}
-    {% endblock %}
-</footer>
 
 {% block scripts %}
 {% endblock %}