feat(footer): use flexbox instead of list for items in the footer

Pelican-Elegant · Jun 29, 2019 · bef7db9 · bef7db9
1 parent 431c4a5
commit bef7db9
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 56 deletions.
diff --git a/static/css/elegant.css b/static/css/elegant.css
@@ -15,8 +15,19 @@ footer {
   border-top: 1px solid rgba(0, 0, 0, 0.2);
   font: 0.8em Calibri, Tahoma, Arial, Sans-Serif;
   margin: 15px 0 0 0;
-  padding: 0;
+  padding: 0 3px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
+  min-height: 40px;
+}
+footer div {
+  margin: 3px 0;
 }
+
 h1,
 h2,
 h3,
@@ -64,39 +75,6 @@ hr {
 .top-menu li a {
   font-weight: bold;
 }
-/* Footer */
-#footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
-  font: 0.8em Calibri, Tahoma, Arial, Sans-Serif;
-  margin: 15px 0 0 0;
-  padding: 0;
-}
-ul.footer-content {
-  list-style: none;
-  margin: -1px 0 0 0;
-  padding: 2px 5px 0;
-  display: table;
-  height: 45px;
-  width: 100%;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-ul.footer-content li {
-  padding-left: 5px;
-  display: table-cell;
-  vertical-align: middle;
-  height: 100%;
-}
-.elegant-power {
-  text-align: right;
-}
-.elegant-license {
-  text-align: left;
-}
-.elegant-subtitle {
-  text-align: left;
-}
 /* comment */
 #comment-message,
 #post-share-links:not(a) {

diff --git a/templates/_includes/footer.html b/templates/_includes/footer.html
@@ -1,28 +1,33 @@
 <footer>
-    <ul class="footer-content">
-        {% from '_includes/_defaults.html' import SITESUBTITLE with context %}
-        {% if SITESUBTITLE %}
-        <li class="elegant-subtitle"><span class="site-name">{{ SITENAME }}</span> - {{ SITESUBTITLE }}</li>
+    {% from '_includes/_defaults.html' import SITESUBTITLE with context %}
+    {% if SITESUBTITLE %}
+    <div>
+        <span class="site-name">{{ SITENAME }}</span> - {{ SITESUBTITLE }}
+    </div>
+    {% endif %}
+
+    {% from '_includes/_defaults.html' import SITE_LICENSE with context %}
+    {% if SITE_LICENSE %}
+    <div>
+        {{ SITE_LICENSE }}
+    </div>
+    {% endif %}
+
+    <div>
+        Powered by: <a href="http://getpelican.com/" title="Pelican Home Page" target="_blank" rel="nofollow">Pelican</a>
+        Theme: <a href="https://elegant.oncrashreboot.com/" title="Theme Elegant Home Page" target="_blank" rel="nofollow">Elegant</a>
+        {% if HOSTED_ON and HOSTED_ON.name %}
+        Hosted on:
+        {% if HOSTED_ON.url %}
+        <a href={{HOSTED_ON.url}} target="_blank" rel="nofollow">
+            {{HOSTED_ON.name}}
+        </a>
+        {% else %}
+        {{HOSTED_ON.name}}
         {% endif %}
-        {% from '_includes/_defaults.html' import SITE_LICENSE with context %}
-        {% if SITE_LICENSE %}
-        <li class="elegant-license">{{ SITE_LICENSE }}</li>
         {% endif %}
-        <li class="elegant-power">
-            Powered by: <a href="http://getpelican.com/" title="Pelican Home Page" target="_blank" rel="nofollow">Pelican</a>
-            Theme: <a href="https://elegant.oncrashreboot.com/" title="Theme Elegant Home Page" target="_blank" rel="nofollow">Elegant</a>
-            {% if HOSTED_ON and HOSTED_ON.name %}
-            Hosted on:
-            {% if HOSTED_ON.url %}
-            <a href={{HOSTED_ON.url}} target="_blank" rel="nofollow">
-                {{HOSTED_ON.name}}
-            </a>
-            {% else %}
-            {{HOSTED_ON.name}}
-            {% endif %}
-            {% endif %}
-        </li>
-    </ul>
+    </div>
+
     {% if AMAZON_ONELINK %}
     <div id="amzn-assoc-ad-{{ AMAZON_ONELINK }}"></div>
     <script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId={{ AMAZON_ONELINK }}">