From 34b77bcecd6625c134bd3ab1bfd9592fed941495 Mon Sep 17 00:00:00 2001 From: Ben Kurtovic Date: Fri, 16 Dec 2016 23:11:17 -0500 Subject: [PATCH] Make styling responsive. --- static/main.css | 78 +++++++++++++++++++++++++++++++++++++--------------- templates/_base.mako | 21 +++++++------- 2 files changed, 67 insertions(+), 32 deletions(-) diff --git a/static/main.css b/static/main.css index 8229421..445a700 100644 --- a/static/main.css +++ b/static/main.css @@ -1,5 +1,3 @@ -/* MOBILE... */ - @import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700); body { @@ -41,8 +39,6 @@ main, header, footer { } main { - margin: 2em auto; - padding: 0.5em 1.5em; border-width: 1px; border-style: solid; } @@ -54,6 +50,7 @@ header { } footer { + padding: 0.5em 0; font-size: 85%; text-align: center; color: #BABABA; @@ -61,33 +58,56 @@ footer { border-top-style: solid; } -main, header > div, footer > div { - max-width: 1000px; - width: 80%; -} - -header > div { - margin: 0 auto; - padding: 0.5em; -} - -footer > div { +header > div, footer > div { margin: 0 auto; - padding: 1em; } header > div > div { display: inline-block; } -header > div > .left { - text-align: left; - width: 70%; +@media (min-width: 800px) { + main, header > div, footer > div { + max-width: 1000px; + width: 80%; + } + + main { + margin: 2em auto; + padding: 0.5em 1.5em; + } + + footer > div { + padding: 0.5em 1.5em; + } + + header > div > .left { + margin: 0.5em 1.5em 0.5em 0; + } + + header > div > .right { + margin: 0.5em 0; + float: right; + } } -header > div > .right { - text-align: right; - width: 30%; +@media (max-width: 799px) { + main { + margin: 1.5em auto; + padding: 0 1em; + } + + footer > div { + padding: 0.5em 1em; + } + + header > div > div { + margin: 0.5em 1em; + } + + header > div > .left { + margin-bottom: 0em; + } } header a { @@ -103,6 +123,20 @@ header .aligned { vertical-align: middle; } +footer ul { + margin: 0; + padding: 0; +} + +footer ul li { + display: inline-block; + list-style: none; +} + +footer ul li:not(:last-child):after { + content: " \00b7"; +} + #corp-masthead { height: 30px; margin-right: 0.25em; diff --git a/templates/_base.mako b/templates/_base.mako index 3457007..8dfd10e 100644 --- a/templates/_base.mako +++ b/templates/_base.mako @@ -5,13 +5,14 @@ <%block name="title">${g.config.get("corp.name") | h}</%block> - + + % if g.config.get("style"): <% stylesheet = "styles/{}.css".format(g.config.get("style")) %> - + % endif % for size in g.eve.image.corp_widths: - + % endfor @@ -25,8 +26,8 @@ ${g.config.get("corp.name") | h} -
+
+
<%block name="righthead"/>
@@ -44,11 +45,11 @@ <%block name="footer">