improve position of language switcher

Tweak styles at mid-widths to prevent overlap

regen css

2 files changed, 10 insertions, 8 deletions

diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css
index 9ae305053..581e9c53f 100644
--- a/assets/css/alaveteli-org.css
+++ b/assets/css/alaveteli-org.css
@@ -1,5 +1,5 @@
 .image-replacement{text-indent:-1000%;white-space:nowrap;overflow:hidden}.container{max-width:63.333333333em;padding:0 1em;margin:0 auto;position:relative}.unstyled-list,.unstyled,.site-nav ul{margin-left:0;padding-left:0;list-style:none outside none}.inline-list{margin-left:-0.5em;margin-bottom:0}.inline-list li{display:inline-block;margin-left:0.5em}.text--center{text-align:center}html{background-color:#333;height:100%;min-height:100%}body{background-color:transparent}.no-svg .site-title{background-image:url("../img/alaveteli-logo.png")}.hero,.what-is-alaveteli,.how-does-it-work,.features,.get-started,.about__intro,.deployments__intro{padding:2em 0}@media (min-width: 40em){.hero,.what-is-alaveteli,.how-does-it-work,.features,.get-started,.about__intro,.deployments__intro{padding:3.5em 0}}
-.hero,.how-does-it-work,.get-started,.about__intro,.deployments__intro{background-color:#333;color:#fff}.hero a,.how-does-it-work a,.get-started a,.about__intro a,.deployments__intro a{color:#fff;border-bottom:1px dotted rgba(255,255,255,0.3)}.hero a:hover,.how-does-it-work a:hover,.get-started a:hover,.about__intro a:hover,.deployments__intro a:hover,.hero a:active,.how-does-it-work a:active,.get-started a:active,.about__intro a:active,.deployments__intro a:active,.hero a:focus,.how-does-it-work a:focus,.get-started a:focus,.about__intro a:focus,.deployments__intro a:focus{border-color:rgba(255,255,255,0.6);background-color:#863c83;text-decoration:none}.hero .button,.how-does-it-work .button,.get-started .button,.about__intro .button,.deployments__intro .button{color:#fff;border:1px solid rgba(255,255,255,0.3);width:100%;margin-bottom:1em}@media (min-width: 30em){.hero .button,.how-does-it-work .button,.get-started .button,.about__intro .button,.deployments__intro .button{width:auto;margin-bottom:0}}.hero .button:hover,.how-does-it-work .button:hover,.get-started .button:hover,.about__intro .button:hover,.deployments__intro .button:hover,.hero .button:active,.how-does-it-work .button:active,.get-started .button:active,.about__intro .button:active,.deployments__intro .button:active,.hero .button:focus,.how-does-it-work .button:focus,.get-started .button:focus,.about__intro .button:focus,.deployments__intro .button:focus{background-color:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.1)}.what-is-alaveteli__grid-unit,.features__grid-unit,.get-started__grid-unit{display:inline-block;vertical-align:top}.grid-row:before,.grid-row:after{content:" ";display:table}.grid-row:after{clear:both}.grid-row{*zoom:1}h1,h2,h4,h5,h6{font-weight:700}h3{font-weight:600}.button{display:inline-block;padding:0.4em 2.4em;border:1px solid #e4e3dd;vertical-align:middle;border-radius:7px;text-align:center}.button:hover,.button:active,.button:focus{background-color:#3a3a3a;border-color:rgba(255,255,255,0.2);text-decoration:none}@media (min-width: 47.5em){.nav-position{position:absolute;top:0.4em;left:180px}}@media (min-width: 56.88889em){.nav-position{left:240px;top:0.35em}}
+.hero,.how-does-it-work,.get-started,.about__intro,.deployments__intro{background-color:#333;color:#fff}.hero a,.how-does-it-work a,.get-started a,.about__intro a,.deployments__intro a{color:#fff;border-bottom:1px dotted rgba(255,255,255,0.3)}.hero a:hover,.how-does-it-work a:hover,.get-started a:hover,.about__intro a:hover,.deployments__intro a:hover,.hero a:active,.how-does-it-work a:active,.get-started a:active,.about__intro a:active,.deployments__intro a:active,.hero a:focus,.how-does-it-work a:focus,.get-started a:focus,.about__intro a:focus,.deployments__intro a:focus{border-color:rgba(255,255,255,0.6);background-color:#863c83;text-decoration:none}.hero .button,.how-does-it-work .button,.get-started .button,.about__intro .button,.deployments__intro .button{color:#fff;border:1px solid rgba(255,255,255,0.3);width:100%;margin-bottom:1em}@media (min-width: 30em){.hero .button,.how-does-it-work .button,.get-started .button,.about__intro .button,.deployments__intro .button{width:auto;margin-bottom:0}}.hero .button:hover,.how-does-it-work .button:hover,.get-started .button:hover,.about__intro .button:hover,.deployments__intro .button:hover,.hero .button:active,.how-does-it-work .button:active,.get-started .button:active,.about__intro .button:active,.deployments__intro .button:active,.hero .button:focus,.how-does-it-work .button:focus,.get-started .button:focus,.about__intro .button:focus,.deployments__intro .button:focus{background-color:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.1)}.what-is-alaveteli__grid-unit,.features__grid-unit,.get-started__grid-unit{display:inline-block;vertical-align:top}.grid-row:before,.grid-row:after{content:" ";display:table}.grid-row:after{clear:both}.grid-row{*zoom:1}h1,h2,h4,h5,h6{font-weight:700}h3{font-weight:600}.button{display:inline-block;padding:0.4em 2.4em;border:1px solid #e4e3dd;vertical-align:middle;border-radius:7px;text-align:center}.button:hover,.button:active,.button:focus{background-color:#3a3a3a;border-color:rgba(255,255,255,0.2);text-decoration:none}@media (min-width: 47.5em){.nav-position{position:absolute;top:0.4em;right:80px}}@media (min-width: 52.5em){.nav-position{right:160px}}@media (min-width: 56.88889em){.nav-position{top:0}}
 .site-nav ul{margin-top:0;margin-bottom:0}@media (min-width: 47.5em){.site-nav li{display:inline-block}}.site-nav a{color:#fff;margin-right:0.33em;display:block;padding:0.33em;border-bottom:1px solid rgba(255,255,255,0.1)}@media (min-width: 47.5em){.site-nav a{display:inline-block;border-bottom:none}}@media (min-width: 56.88889em){.site-nav a{font-size:1.125em;margin-right:0.66em}}
 /*! responsive-nav.js 1.0.32 by @viljamis */.js .nav-collapse{clip:rect(0 0 0 0);max-height:0;position:absolute;display:block;overflow:hidden;zoom:1}.nav-collapse.opened{max-height:9999px}.disable-pointer-events{pointer-events:none !important}.nav-toggle{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;position:absolute;top:0.4em;right:5em;display:inline-block;padding:0.3em 0.75em;border:1px solid rgba(255,255,255,0.1);border-radius:5px;color:#fff;font-size:0.875em}@media (min-width: 30em){.nav-toggle{right:10em}}
 @media screen and (min-width: 47.5em){.js .nav-collapse{position:relative}.js .nav-collapse.closed{max-height:none}.nav-toggle{display:none}}.hero{background-color:#974495}.hero h1{display:inline-block;font-weight:600;width:auto;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:0.5em;margin-bottom:0.25em;text-shadow:0px 2px 1px rgba(0,0,0,0.3)}@media (min-width: 56.88889em){.hero h1{font-size:4em}}.hero span{opacity:0.7;display:block}.hero p{font-size:1.125em;max-width:25em}.action-buttons{margin-top:2em}.action-buttons .button{font-weight:600;margin-right:1em}.what-is-alaveteli{position:relative}@media (min-width: 56.88889em){.what-is-alaveteli__items-grid{width:66.666%}}
@@ -24,4 +24,4 @@
 .deployment__title{font-weight:600;font-size:1.3em;margin-bottom:0.1em;padding-top:0.2em}@media (min-width: 56.88889em){.deployment__title{font-size:1.5em}}
 .deployment__country{font-weight:600;font-size:1em;color:#787774;margin-top:0;margin-bottom:0.1em}@media (min-width: 56.88889em){.deployment__country{font-size:1.1em}}
 .deployment__link{margin-top:0;margin-bottom:0.5em;font-size:0.888888889em}.deployment__link a{display:block;text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (min-width: 56.88889em){.deployment__link{font-size:1em}}
-.deployment__description{font-size:0.888888889em;clear:both}.deployment__screenshot{border:1px solid #e4e3dd}.deployment--minor .deployment__title{padding-top:0;font-size:1.1em}.deployment--minor .deployment__country{font-size:1em}.deployment--minor .deployment__link{font-size:0.777777778em}.deployment--major .deployment__screenshot{width:33%;float:left;margin-bottom:1em}.deployment--major .deployment__title,.deployment--major .deployment__country,.deployment--major .deployment__link{margin-left:37%}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}.header-link{padding-left:0.2em;opacity:0;-webkit-transition:opacity 0.2s ease-in-out 0.1s;-moz-transition:opacity 0.2s ease-in-out 0.1s;-ms-transition:opacity 0.2s ease-in-out 0.1s}h2:hover .header-link,h3:hover .header-link,h4:hover .header-link,h5:hover .header-link,h6:hover .header-link{opacity:1}#feedback_form{display:none;border:1px solid #ccc;padding:0.5em;font-size:0.85em;text-align:center}#feedback_form input{margin-right:4px}.ui-dropdown-list{position:absolute;left:160px;top:0.8em}p.ui-dropdown-list-trigger{margin-top:0}.ui-dropdown-list-trigger .current-locale{border:1px solid rgba(255,255,255,0.3);border-radius:3.5px;position:relative;z-index:999}.ui-dropdown-list-trigger .current-locale:after{color:#fff;display:block;position:absolute;content:'';right:5px;top:10px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff}.ui-dropdown-list-trigger .current-locale,.ui-dropdown-list .available-languages a{display:block;width:46px;cursor:pointer;padding:6px 8px;font-size:13px;line-height:13px;color:#fff;font-weight:normal}.ui-dropdown-list .available-languages{display:none;position:absolute;top:25px;margin-top:0;padding:0;z-index:1000}.ui-dropdown-list li{list-style-type:none}.ui-dropdown-list .available-languages a,.ui-dropdown-list .available-languages a:link,.ui-dropdown-list .available-languages a:visited{display:block;background-color:#333}.ui-dropdown-list .available-languages a:hover,.ui-dropdown-list .available-languages a:focus{border-bottom:none;color:#fff}.no-js .ui-dropdown-list .available-languages,.ui-dropdown-list.active .available-languages{display:block}.ui-dropdown-list.active .current-locale{background-color:#863c83;border-color:#632c61;border-bottom-left-radius:0;border-bottom-right-radius:0;color:#fff}.ui-dropdown-list.active .current-locale:after{border-top-color:#fff}
+.deployment__description{font-size:0.888888889em;clear:both}.deployment__screenshot{border:1px solid #e4e3dd}.deployment--minor .deployment__title{padding-top:0;font-size:1.1em}.deployment--minor .deployment__country{font-size:1em}.deployment--minor .deployment__link{font-size:0.777777778em}.deployment--major .deployment__screenshot{width:33%;float:left;margin-bottom:1em}.deployment--major .deployment__title,.deployment--major .deployment__country,.deployment--major .deployment__link{margin-left:37%}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}.header-link{padding-left:0.2em;opacity:0;-webkit-transition:opacity 0.2s ease-in-out 0.1s;-moz-transition:opacity 0.2s ease-in-out 0.1s;-ms-transition:opacity 0.2s ease-in-out 0.1s}h2:hover .header-link,h3:hover .header-link,h4:hover .header-link,h5:hover .header-link,h6:hover .header-link{opacity:1}#feedback_form{display:none;border:1px solid #ccc;padding:0.5em;font-size:0.85em;text-align:center}#feedback_form input{margin-right:4px}.ui-dropdown-list{position:absolute;left:175px;top:0.55em}p.ui-dropdown-list-trigger{margin-top:0}.ui-dropdown-list-trigger .current-locale{border:1px solid rgba(255,255,255,0.3);border-radius:3.5px;position:relative;z-index:999}.ui-dropdown-list-trigger .current-locale:after{color:#fff;display:block;position:absolute;content:'';right:5px;top:10px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff}.ui-dropdown-list-trigger .current-locale,.ui-dropdown-list .available-languages a{display:block;width:46px;cursor:pointer;padding:5px 8px;font-size:13px;line-height:13px;color:#fff;font-weight:normal}.ui-dropdown-list .available-languages{display:none;position:absolute;top:25px;margin-top:0;padding:0;z-index:1000}.ui-dropdown-list li{list-style-type:none}.ui-dropdown-list .available-languages a,.ui-dropdown-list .available-languages a:link,.ui-dropdown-list .available-languages a:visited{display:block;background-color:#333}.ui-dropdown-list .available-languages a:hover,.ui-dropdown-list .available-languages a:focus{border-bottom:none;color:#fff}.no-js .ui-dropdown-list .available-languages,.ui-dropdown-list.active .available-languages{display:block}.ui-dropdown-list.active .current-locale{background-color:#863c83;border-color:#632c61;border-bottom-left-radius:0;border-bottom-right-radius:0;color:#fff}.ui-dropdown-list.active .current-locale:after{border-top-color:#fff}
diff --git a/assets/sass/alaveteli-org.scss b/assets/sass/alaveteli-org.scss
index 27b098088..f23bee183 100644
--- a/assets/sass/alaveteli-org.scss
+++ b/assets/sass/alaveteli-org.scss
@@ -98,11 +98,13 @@ h3 {
     @media (min-width: 47.5em) {
         position: absolute;
         top: 0.4em;
-        left: 180px;
+        right: 80px;
+    }
+    @media (min-width: 52.5em) {
+        right: 160px;
     }
     @media (min-width: $large-screen) {
-        left: 240px;
-        top: 0.35em;
+        top: 0;
     }
 }
 
@@ -897,8 +899,8 @@ h6:hover .header-link {
 /* ui-dropdown-list */
 .ui-dropdown-list {
   position: absolute;
-  left: 160px;
-  top: 0.8em;
+  left: 175px;
+  top: 0.55em;
 }
 
 p.ui-dropdown-list-trigger {
@@ -931,7 +933,7 @@ p.ui-dropdown-list-trigger {
 	display: block;
 	width: 46px;
 	cursor: pointer;
-	padding: 6px 8px;
+	padding: 5px 8px;
 	font-size: 13px;
 	line-height: 13px;
 	color: #fff;