Improvements to page style

3 files changed, 98 insertions, 61 deletions

diff --git a/mansrht/templates/content.html b/mansrht/templates/content.html
index bc22f65..8bf25c5 100644
--- a/mansrht/templates/content.html
+++ b/mansrht/templates/content.html
@@ -28,73 +28,71 @@
 </div>
 {% endif %}
 <div class="container">
-  <div class="row flex-column-reverse flex-md-row">
-    <div class="col-md-7">
-      {{ content }}
+  <div class="toc">
+    {% if len(toc) != 0 %}
+    <h3>Table of Contents</h3>
+    <ul style="list-style: none; padding-left: 0;">
+      {% macro toc_entry(entry, depth) %}
+      <li>
+        <a href="#{{ entry.id }}">{{ entry.name }}</a>
+        {% if len(entry.children) > 0 %}
+        <ul style="list-style: none; padding-left: {{ depth + 1 }}rem">
+          {% for child in entry.children %}
+            {{ toc_entry(child, depth + 1) }}
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </li>
+      {% endmacro %}
+      {% for entry in toc %}
+        {{ toc_entry(entry, 0) }}
+      {% endfor %}
+    </ul>
+    {% endif %}
+    {# TODO
+    <div class="pull-right" style="margin-bottom: 1rem">
+      <a href="#">Edit page</a>
     </div>
-    <div class="col-md-5">
-      {% if len(toc) != 0 %}
-      <h3>Table of Contents</h3>
-      <ul style="list-style: none; padding-left: 0;">
-        {% macro toc_entry(entry, depth) %}
-        <li>
-          <a href="#{{ entry.id }}">{{ entry.name }}</a>
-          {% if len(entry.children) > 0 %}
-          <ul style="list-style: none; padding-left: {{ depth + 1 }}rem">
-            {% for child in entry.children %}
-              {{ toc_entry(child, depth + 1) }}
-            {% endfor %}
-          </ul>
-          {% endif %}
-        </li>
-        {% endmacro %}
-        {% for entry in toc %}
-          {{ toc_entry(entry, 0) }}
-        {% endfor %}
-      </ul>
-      {% endif %}
-      {# TODO
-      <div class="pull-right" style="margin-bottom: 1rem">
-        <a href="#">Edit page</a>
-      </div>
-      #}
-      <h4>This commit</h4>
-      <div class="clearfix"></div>
-      <div class="card" style="padding: 0.25rem; border: none; border-radius: 0; margin-bottom: 0.5rem">
+    #}
+    <h4>This commit</h4>
+    <div class="clearfix"></div>
+    <div class="card" style="padding: 0.25rem; border: none; border-radius: 0; margin-bottom: 0.5rem">
 <pre class="card-text">commit {{commit.id}}
 Author: {{commit.author.name}} &lt;{{ commit.author.email }}&gt;
 Date:   {{ctime.isoformat()}}
 
 {{commit.message.rstrip("\n")}}</pre>
-      </div>
-      <dl>
-        <dt>Clone this wiki</dt>
-        <dd>
-        {% if wiki %}
-          <a href="ssh://{{repo_uri(wiki.owner.username, wiki.name)}}">{{repo_uri(wiki.owner.username, wiki.name)}}</a><br />
-          <a href="{{root}}/~{{wiki.owner.username}}/{{wiki.name}}">{{root}}/~{{wiki.owner.username}}/{{wiki.name}}</a><br />
-        {% else %}
-          <a href="ssh://{{repo_uri()}}">{{repo_uri()}}</a><br />
-          <a href="{{root}}/root">{{root}}/root</a><br />
-        {% endif %}
-        </dd>
-      </dl>
-      {% if current_user %}
-        <hr />
-        {% if wiki and wiki.owner.username == current_user.username %}
-        <a
-          href="{{ url_for("html.manage_delete",
-            owner_name=wiki.owner.username, wiki_name=wiki.name) }}"
-          class="btn btn-default btn-block"
-        >Manage your wiki</a>
-        {% endif %}
-        {% if is_root %}
-          <a href="/wiki/create" class="btn btn-primary btn-block">
-            Create a wiki {{icon("caret-right")}}
-          </a>
-        {% endif %}
-      {% endif %}
     </div>
+    <dl>
+      <dt>Clone this wiki</dt>
+      <dd>
+      {% if wiki %}
+        <a href="ssh://{{repo_uri(wiki.owner.username, wiki.name)}}">{{repo_uri(wiki.owner.username, wiki.name)}}</a><br />
+        <a href="{{root}}/~{{wiki.owner.username}}/{{wiki.name}}">{{root}}/~{{wiki.owner.username}}/{{wiki.name}}</a><br />
+      {% else %}
+        <a href="ssh://{{repo_uri()}}">{{repo_uri()}}</a><br />
+        <a href="{{root}}/root">{{root}}/root</a><br />
+      {% endif %}
+      </dd>
+    </dl>
+    {% if current_user %}
+      <hr />
+      {% if wiki and wiki.owner.username == current_user.username %}
+      <a
+        href="{{ url_for("html.manage_delete",
+          owner_name=wiki.owner.username, wiki_name=wiki.name) }}"
+        class="btn btn-default btn-block"
+      >Manage your wiki</a>
+      {% endif %}
+      {% if is_root %}
+        <a href="/wiki/create" class="btn btn-primary btn-block">
+          Create a wiki {{icon("caret-right")}}
+        </a>
+      {% endif %}
+    {% endif %}
+  </div>
+  <div class="content">
+    {{ content }}
   </div>
 </div>
 {% endblock %}
diff --git a/mansrht/templates/man.html b/mansrht/templates/man.html
index c4f9cea..e4b2303 100644
--- a/mansrht/templates/man.html
+++ b/mansrht/templates/man.html
@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends "layout-full.html" %}
 {% block body %} 
 {% block content %}{% endblock %}
 {% endblock %}
diff --git a/scss/main.scss b/scss/main.scss
index f2d3feb..5e3da2e 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -17,3 +17,42 @@ h5 {
 .highlight .err {
   border: none !important;
 }
+
+.toc {
+  background: white;
+  padding: 0 1rem;
+  float: right;
+  max-width: 40%;
+  margin-bottom: 1rem;
+
+  @media(max-width: 720px) {
+    float: none;
+    max-width: inherit;
+    padding: 0;
+  }
+}
+
+.alert {
+  position: initial;
+}
+
+.event-row {
+  display: flex;
+  justify-content: space-between;
+  align-content: space-between;
+  align-items: stretch;
+  flex-wrap: wrap;
+  margin-bottom: 0;
+
+  .event {
+    display: flex;
+    flex-direction: column;
+    max-width: calc(50% - 0.5rem);
+    margin: 0;
+    margin-bottom: 1rem !important;
+
+    p {
+      flex-grow: 1;
+    }
+  }
+}