diff --git a/thoughts/static/thoughts/main.css b/thoughts/static/thoughts/main.css
index 4d2c119..50cb8fd 100644
--- a/thoughts/static/thoughts/main.css
+++ b/thoughts/static/thoughts/main.css
@@ -1,23 +1,35 @@
@charset "UTF-8";
-html {
+* {
+ box-sizing: content-box;
+}
+
+body {
padding: 0;
margin: 0;
- width: 100%;
- height: 100%;
+ width: 100vw;
+ 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: 0 0 40px;
+ padding-left: 30px;
+ 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 {
- padding: 4% 30px 15px;
- font-size: 3rem !important;
- font-weight: normal;
+header#main-header {
+ padding-top: 4%;
margin: 0;
overflow: auto;
- white-space: nowrap;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: flex-start;
}
-#main-nav .text {
- color: var(--text-color);
-
- font-family: Georgia, Libre Baskerville, serif;
-}
-
-#main-nav h1 {
+#main-header 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;
- margin-bottom: 40px;
+ line-height: 1.5;
+ 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;
+}
diff --git a/thoughts/templates/thoughts/index.html b/thoughts/templates/thoughts/index.html
index 308b469..448f6a5 100644
--- a/thoughts/templates/thoughts/index.html
+++ b/thoughts/templates/thoughts/index.html
@@ -3,12 +3,12 @@
{% block title %}Thoughts{% endblock %}
-{% block navigation %}
+
{% block head %}
{% if not first_page %}
@@ -40,8 +40,20 @@
{% endblock %}
+{% block headerright %}
+
+{% endblock %}
+
{% block main %}
-