From 9d4f318af64fca7e8d0c8b5a45c39a23d56ad66d Mon Sep 17 00:00:00 2001 From: opi Date: Thu, 2 Jul 2015 13:59:44 +0200 Subject: [PATCH] Fix some responsive issue on homepage. --- assets/home.css | 8 ++++++++ local.css | 24 ++++++++++++++++-------- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/assets/home.css b/assets/home.css index 96717f5..d3bf66f 100644 --- a/assets/home.css +++ b/assets/home.css @@ -16,6 +16,14 @@ h1.title {display: none;} text-align: right; margin-top: 1em; } +@media screen and (max-width: 45em) { + #logo-home-subtext-fr, + #logo-home-subtext-en { + font-size: 1.3em; + text-align: center; + } +} + #logo-home-subtext-fr { } #logo-home-subtext-en { diff --git a/local.css b/local.css index b33de8f..c7c2ebc 100644 --- a/local.css +++ b/local.css @@ -357,22 +357,28 @@ main .header a { } main .feedlink a { - text-decoration: none; + text-decoration: none; + /*color: #ffa430;*/ } main .feedlink { - text-align: right; - margin-top: -2.8em; - min-height: 2.8em; + float: right; + text-align: left; + margin-top: -3.5em; +} +@media screen and (max-width: 400px) { + main .feedlink { + float: none; + margin-top: -2em; + margin-bottom: 2em; + } } main .feedlink .feedbutton { font-size: 0.8em; - color: #57075f !important; background: transparent; border: none; } main .feedlink .feedbutton:hover { - color: #57075f !important; background: transparent; text-decoration: underline; } @@ -435,8 +441,9 @@ main .footnotes { .progress-bar-wrapper { margin: 2em auto; height: 85px; - width: 600px; + max-width: 600px; background: lightGrey url(assets/progress_bar.png) top left repeat-x; + background-size: 16.666667% 300%; border: 1px solid #ccc; border-bottom: 0; position: relative; @@ -445,6 +452,7 @@ main .footnotes { position: absolute; height: 85px; background: grey url(assets/progress_bar.png) left -85px repeat-x; + background-size: 16.666667% 300%; z-index: 2; /* animate progress bar */ -webkit-animation: progress-bar 1.5s; @@ -452,7 +460,7 @@ main .footnotes { animation: progress-bar 1.5s; } .progress-bar-wrapper .progress-bar-promises { - background: grey url(assets/progress_bar.png) left bottom repeat-x; + background-position: left bottom; z-index: 1; } -- 2.39.5