Minor UI changes

* Put wrapper for margins * Constrain avatar * Smaller Post titles

Minor UI changes
0988a6f0 · Nikos Roussos · e6d7a28a · 0988a6f0 · 0988a6f0 · 0988a6f0
Commit 0988a6f0 authored 9 years ago by Nikos Roussos
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -62,13 +62,23 @@ body {
  
 .container {
    margin-top: 20px;
-    width: 800px;
+    max-width: 800px;
 }
  
 a {
    color: #f06;
 }
  
+img {
+    display: block;
+    margin: auto;
+    max-width: 90%;
+}
+
+.wrapper {
+    margin-bottom: 20px;
+}
+
 a:hover,
 a:active,
 a:visited {
@@ -81,5 +91,11 @@ a.text-muted {
 }
  
 .avatar {
+    margin: auto;
+    max-width: 180px;
    margin-bottom: 15px;
 }
+
+.lead {
+    padding-left: 10px;
+}
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,22 +16,28 @@
  </head>
  
  <body>
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12 text-center">
-          <p class="avatar">
-            <a href="/">
-              <img src="/static/img/avatar.png" alt="{{ author }}" class="avatar img-circle" />
-            </a>
-          </p>
-          <a href="/index.html">About</a> &bull;
-          <a href="/blog.html">Blog</a> &bull;
-          <a href="/feed.xml" target="_blank">Feed</a>
+    <div class="wrapper">
+
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 text-center">
+            <p class="avatar">
+              <a href="/">
+                <img src="/static/img/avatar.jpg" alt="{{ author }}" class="avatar img-circle" />
+              </a>
+            </p>
+            <h3>
+              <a href="/index.html">About</a> &bull;
+              <a href="/blog.html">Blog</a> &bull;
+              <a href="/feed.xml" target="_blank">Feed</a>
+            </h3>
+          </div>
        </div>
      </div>
-    </div>
  
-    {% block content %}{% endblock content %}
+      {% block content %}{% endblock content %}
+
+    </div>
  
    <script src="/static/js/lib/jquery-1.11.2.min.js"></script>
    <script src="/static/js/lib/bootstrap.min.js"></script>

--- a/templates/blog.html
+++ b/templates/blog.html
@@ -4,7 +4,7 @@
  
 {% block content %}
  <div class="container">
-    <h3>{{ title }}</h3>
+    <p class="lead">{{ title }}</p>
  
    <table class="table table-responsive">
      {% for post in posts %}

--- a/templates/post.html
+++ b/templates/post.html
@@ -4,9 +4,9 @@
  <div class="container">
    <div class="row">
      <div class="col-md-12">
-        <h2>
+        <h3>
          <a href="/{{ link }}">{{ title }}</a>
-        </h2>
+        </h3>
        <small>
          {% for tag in tags %}
            <a href="/tag/{{ tag }}/">#{{ tag }}</a>