diff options
| author | Johannes Löthberg <johannes@kyriasis.com> | 2014-10-10 17:01:48 +0200 |
|---|---|---|
| committer | Johannes Löthberg <johannes@kyriasis.com> | 2014-10-10 17:01:48 +0200 |
| commit | 1f1ece8634df80a52ddcbfb1881e0ac30822e444 (patch) | |
| tree | d43a3ac008437d8b4ed406977d011d26d22bec42 | |
| parent | 2491b2ad2bb67daf1ca26523e89f6bac90cea2e8 (diff) | |
| download | website-1f1ece8634df80a52ddcbfb1881e0ac30822e444.tar.xz | |
make footer contact info a flexbox for nicer wrapping
| -rw-r--r-- | partials/footer.html | 30 | ||||
| -rw-r--r-- | src/style.css | 19 |
2 files changed, 35 insertions, 14 deletions
diff --git a/partials/footer.html b/partials/footer.html index 33a4998..2178294 100644 --- a/partials/footer.html +++ b/partials/footer.html @@ -1,16 +1,22 @@ <footer> -<p id="copy"> - © <span itemprop="copyrightYear">2014</span> - by <span itemprop="copyrightHolder">Johannes Löthberg</span> - <br /> - You can find me on: - <span id="contact-info"> - <a rel="me" href="mailto:johannes@kyriasis.com">Email</a> - <a rel="me" href="https://twitter.com/kyriasis">Twitter</a> - <a rel="me" href="https://plus.google.com/+JohannesLothberg">Google+</a> - <a rel="me" href="sms:+46739525259">SMS</a> - </span> -</p> +<div id="foot-left"> + <p id="copy"> + © <span itemprop="copyrightYear">2014</span> + by <span itemprop="copyrightHolder">Johannes Löthberg</span> + </p> + + <div id="contact-info-wrapper"> + <p> + You can find me on: + </p> + <div id="contact-info"> + <a rel="me" href="mailto:johannes@kyriasis.com">Email</a> + <a rel="me" href="https://twitter.com/kyriasis">Twitter</a> + <a rel="me" href="https://plus.google.com/+JohannesLothberg">Google+</a> + <a rel="me" href="sms:+46739525259">SMS</a> + </div> + </div> +</div> <a id="emblem" href='http://www.catb.org/hacker-emblem/'> <img src='resources/glider.png' alt='hacker emblem' /> diff --git a/src/style.css b/src/style.css index 203c56b..0f74dd3 100644 --- a/src/style.css +++ b/src/style.css @@ -118,16 +118,31 @@ footer { align-content: flex-start; } footer p { + margin: 0; + padding: 0; +} + +footer #foot-left { flex: 1; - margin-top: 0; - padding-top: 0; color: #333; + margin-bottom: 1rem; } + +footer #contact-info-wrapper { + display: flex; + flex-wrap: wrap; +} + +footer #contact-info-wrapper p { + padding-right: 0.25rem; +} + footer a { text-decoration: none; font-size: 14px; color: #447; } + footer #emblem { flex: 1; flex-basis: 40px; |