Merge 87c0f63 into 395c460

liqd · Oct 21, 2019 · 9768932 · 9768932
2 parents 395c460 + 87c0f63
commit 9768932
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 19 deletions.
diff --git a/apps/contrib/templates/a4_candy_contrib/includes/filter_and_sort.html b/apps/contrib/templates/a4_candy_contrib/includes/filter_and_sort.html
@@ -3,13 +3,13 @@
 <div class="filter-bar form-inline mb-2" role="group" aria-label="{% trans 'Filter bar '%}">
     {% for field in filter.form %}
         {% if field.name != 'ordering' %}
-        <div class="mr-1">
+        <div class="mr-1 mt-2 mt-sm-0">
             {{ field }}
         </div>
         {% endif %}
     {% endfor %}
 
-    <div class="ml-auto">
+    <div class="ml-auto mt-2 mt-sm-0">
         {{ filter.form.ordering }}
     </div>
 </div>
diff --git a/apps/contrib/templates/a4_candy_contrib/includes/map_filter_and_sort.html b/apps/contrib/templates/a4_candy_contrib/includes/map_filter_and_sort.html
@@ -22,7 +22,7 @@
     {% endfor %}
 
     {% if mode != 'map' %}
-        <div class="ml-auto">
+        <div class="ml-sm-auto mt-2 mt-sm-0">
             {{ filter.form.ordering }}
         </div>
     {% endif %}

diff --git a/liqd_product/assets/scss/_base.scss b/liqd_product/assets/scss/_base.scss
@@ -75,19 +75,44 @@ h6 {
 
 @media screen and (max-width: $breakpoint-md-down) {
     h1 {
-        font-size: $mobile-headline-size*$font-size-xxxl;
+        font-size: $mobile-headline-size*$font-size-xxl;
     }
 
     h2 {
-        font-size: $mobile-headline-size*$font-size-xxl;
+        font-size: $mobile-headline-size*$font-size-xl;
     }
 
-    h3 {
-        font-size: $mobile-headline-size*$font-size-xl;
+    h3,
+    h4,
+    h5 {
+        font-size: $font-size-md;
+    }
+}
+
+@media screen and (max-width: $breakpoint-xs-down) {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        line-height: 1.1;
+        margin-bottom: 0.5 * $spacer;
+        margin-top: 1 * $spacer;
+    }
+
+    h1 {
+        font-size: $font-size-md;
+    }
+
+    h2 {
+        font-size: $font-size-base;
     }
 
-    h4 {
-        font-size: $mobile-headline-size*$font-size-lg;
+    h3,
+    h4,
+    h5 {
+        font-size: $font-size-sm;
     }
 }
 

diff --git a/liqd_product/assets/scss/_variables.scss b/liqd_product/assets/scss/_variables.scss
@@ -69,7 +69,7 @@ $mobile-headline-size: 0.7 !default;
 
 $shadow: rgba(#000, 0.25) !default;
 
-$spacer: 1em !default;
+$spacer: 1rem !default;
 $r-spacer: 1rem !default;
 $padding: 1rem !default;
 

diff --git a/liqd_product/assets/scss/components/_button.scss b/liqd_product/assets/scss/components/_button.scss
@@ -284,3 +284,9 @@
         @extend .btn--secondary;
     }
 }
+
+@media screen and (max-width: $breakpoint-xs-down) {
+    .btn {
+        font-size: $font-size-sm;
+    }
+}
diff --git a/liqd_product/assets/scss/components/_cms.scss b/liqd_product/assets/scss/components/_cms.scss
@@ -52,6 +52,10 @@
 .cms__text {
     font-size: $font-size-md;
     font-family: $font-family-base;
+
+    @media screen and (max-width: $breakpoint-xs-down) {
+        font-size: $font-size-sm;
+    }
 }
 
 .cms__text--serif {

diff --git a/liqd_product/assets/scss/components/_label.scss b/liqd_product/assets/scss/components/_label.scss
@@ -38,3 +38,10 @@
     background-color: $feedback-color-accepted;
     color: contrast-color($feedback-color-accepted);
 }
+
+@media screen and (max-width: $breakpoint-xs-down) {
+    .label--big {
+        padding: 0.2em 0.7em;
+        font-size: $font-size-xs;
+    }
+}
diff --git a/liqd_product/assets/scss/components/_main_header.scss b/liqd_product/assets/scss/components/_main_header.scss
@@ -11,7 +11,7 @@
 .main-header__brand-img {
     padding-top: 0.5 * $padding;
     display: block;
-    height: 2rem;
+    height: 2.5rem;
     width: auto;
 }
 

diff --git a/liqd_product/assets/scss/components/_organisation_header.scss b/liqd_product/assets/scss/components/_organisation_header.scss
@@ -1,8 +1,7 @@
 .organisation-header__logo-box {
     display: inline-block;
-    margin-right: $spacer;
-    margin-bottom: -2em;
-    padding: $padding;
+    margin: $spacer $spacer (-$spacer) 0;
+    padding: 0.5*$padding;
     vertical-align: middle;
 
     background-color: $body-bg;
@@ -14,7 +13,7 @@
 
 .organisation-header__logo-img {
     display: block;
-    height: 2rem;
+    height: 3rem;
     width: auto;
 }
 
@@ -40,8 +39,8 @@
 }
 
 @media screen and (min-width: $breakpoint) {
-    .organisation-header__logo-img {
-        height: 3rem;
+    .organisation-header__logo-box {
+        padding: $padding;
     }
 
     .organisation-header__nav {

diff --git a/liqd_product/templates/a4dashboard/includes/project_list_item.html b/liqd_product/templates/a4dashboard/includes/project_list_item.html
@@ -11,15 +11,15 @@
         </div>
         <div class="lr-bar list-item--has-image__body">
             <div class="lr-bar__left">
-                <h2 class="list-item__title">
+                <h3 class="list-item__title">
                     {{ project.name }}
                     {% if project.has_finished %}
                         <span class="label label--primary">{% trans "Finished" %}</span>
                     {% endif %}
                     {% if not project.is_public %}
                         <span class="label label--secondary">{% trans 'private' %}</span>
                     {% endif %}
-                </h2>
+                </h3>
             </div>
             <div class="lr-bar__right">
                 <div class="btn-group">