Add a multi-column theme

MetroWind · Oct 27, 2024 · c444ea7 · c444ea7
1 parent 669feed
commit c444ea7
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 43 deletions.
diff --git a/templates/index.html b/templates/index.html
@@ -11,19 +11,21 @@
   <body>
     <div id="Body">
       {% include "nav.html" %}
-      <header id="BlogTitle">
-        <h1>{{ blog_title }}</h1>
-      </header>
-      <main>
-        <ul id="PostList">
-          {% for post in posts %}
-          <li lang="{{ post.language }}"><hgroup>
-              <h1 class="PostTitle"><a href="{{ url_for("post", post.id) }}">{{ post.title }}</a></h1>
-              <p class="Abstract">{{ post.abstract }}</p>
-          </hgroup></li>
-          {% endfor %}
-        </ul>
-      </main>
+      <div id="ContentWrapper">
+        <header id="BlogTitle">
+          <h1>{{ blog_title }}</h1>
+        </header>
+        <main>
+          <ul id="PostList">
+            {% for post in posts %}
+            <li lang="{{ post.language }}"><hgroup>
+                <h1 class="PostTitle"><a href="{{ url_for("post", post.id) }}">{{ post.title }}</a></h1>
+                <p class="Abstract">{{ post.abstract }}</p>
+            </hgroup></li>
+            {% endfor %}
+          </ul>
+        </main>
+      </div>
       {% include "footer.html" %}
     </div>
   </body>

diff --git a/templates/post.html b/templates/post.html
@@ -12,33 +12,35 @@
   <body>
     <div id="Body">
       {% include "nav.html" %}
-      <header id="BlogTitle">
-        <h1><a href="{{ url_for("index") }}">{{ blog_title }}</a></h1>
-      </header>
-      <main>
-        <article id="Post" lang="{{ post.language }}">
-          <h1>{{ post.title }}</h1>
-          <div id="Metadata">
-            By <span id="Author">{{ post.author }}</span>
-            @<time datetime="{{ post.publish_time_iso8601 }}">
-              {{ post.publish_time_str }}
-            </time>
-            {% if length(post.update_time_str) > 0 %}
-            Updated @<time datetime="{{ post.update_time_iso8601 }}">
-              {{ post.update_time_str }}
-            </time>
-            {% endif %}
-            {% if length(session_user) > 0 %}
-            <a href="{{ url_for("edit-post", post.id) }}">[EDIT]</a>
-            {% endif %}
+      <div id="ContentWrapper">
+        <header id="BlogTitle">
+          <h1><a href="{{ url_for("index") }}">{{ blog_title }}</a></h1>
+        </header>
+        <main id="PostMain">
+          <article id="Post" lang="{{ post.language }}">
+            <h1>{{ post.title }}</h1>
+            <div id="Metadata">
+              By <span id="Author">{{ post.author }}</span>
+              @<time datetime="{{ post.publish_time_iso8601 }}">
+                {{ post.publish_time_str }}
+              </time>
+              {% if length(post.update_time_str) > 0 %}
+              Updated @<time datetime="{{ post.update_time_iso8601 }}">
+                {{ post.update_time_str }}
+              </time>
+              {% endif %}
+              {% if length(session_user) > 0 %}
+              <a href="{{ url_for("edit-post", post.id) }}">[EDIT]</a>
+              {% endif %}
+            </div>
+            <div id="PostBody">{{ post.content }}</div>
+          </article>
+          <hr/>
+          <div id="AfterPost">
+            {{ after_post }}
           </div>
-          <div id="PostBody">{{ post.content }}</div>
-        </article>
-        <hr/>
-        <div id="AfterPost">
-          {{ after_post }}
-        </div>
-      </main>
+        </main>
+      </div>
       {% include "footer.html" %}
     </div>
   </body>

diff --git a/themes/generic/1-styles.css b/themes/generic/1-styles.css
@@ -1,3 +1,8 @@
+*
+{
+    box-sizing: border-box;
+}
+
 body
 {
     line-height: 1.5;
@@ -71,16 +76,19 @@ code, pre
     display: none;
 }
 
-nav
+nav, footer
 {
     display: flex;
-    justify-content: space-between;
     align-items: center;
 }
 
+nav
+{
+    justify-content: space-between;
+}
+
 footer
 {
-    display: flex;
     justify-content: center;
     gap: 4em;
 }

diff --git a/themes/planck-light-columns/info.yaml b/themes/planck-light-columns/info.yaml
@@ -0,0 +1 @@
+parent: planck-light
diff --git a/themes/planck-light-columns/styles.css b/themes/planck-light-columns/styles.css
@@ -0,0 +1,22 @@
+@media (min-width: 700px)
+{
+    nav, footer
+    {
+        position: fixed;
+        width: 100%;
+    }
+
+    main#PostMain, #BlogTitle
+    {
+        max-width: unset;
+    }
+
+    #ContentWrapper
+    {
+        columns: auto 700px;
+        height: calc(100vh - 32px);
+        padding: 64px 32px 32px 32px;
+        max-width: 700px;
+        column-gap: 60px;
+    }
+}
diff --git a/themes/planck/styles.css b/themes/planck/styles.css
@@ -16,7 +16,8 @@ nav, footer
 {
     background-color: var(--color-alt-bg);
     font-size: 80%;
-    padding: 4px 1em;
+    padding: 0px 1em;
+    height: 32px;
 }
 
 a