Responsive footer, take 2. Done #538 @2.5

diff --git a/less/102-footer.less b/less/102-footer.less
index ece8796b41f53381c38ecda08e5612c6ab59f452..248cd8e9401ddc7fa3091474db885dd7935ba74f 100644 (file)
--- a/less/102-footer.less
+++ b/less/102-footer.less
@@ -31,16 +31,23 @@ footer.site {
                padding: 40px;
        }
        @media @m900 {
-               justify-content: flex-start;
-       }
-       @media @m768 {
+               justify-content: center;
+               text-align: center;
                padding: 30px;
        }
+       @media (max-width: 400px) {
+               padding: 30px 20px;
+       }
 
        // Footer containers
        & > div {
                flex-grow: 1;
                padding-right: 20px; // so elements don't get too close when layout shrinks
+
+               @media @m900 {
+                       padding-right: 0;
+               }
+
                &:last-of-type {
                        padding-right: 0;
                }
@@ -56,6 +63,10 @@ footer.site {
 
                @media @m900 {
                        flex-basis: 100%;
+
+                       img     {
+                               max-width: 120px;
+                       }
                }
        }
 
@@ -65,6 +76,12 @@ footer.site {
                font-style: normal;
                font-size: 14px;
                line-height: 32/14;
+
+               @media @m900 {
+                       font-size: 12px;
+                       margin: 35px 0;
+                       line-height: 1.5;
+               }
        }
 
        .footer-social {
@@ -77,6 +94,14 @@ footer.site {
                        padding: 0 0 0 40px;
                        text-align: left;
                }
+               @media @m1024 {
+                       order: 0; // Back to original order
+               }
+               @media @m900 {
+                       text-align: center;
+                       padding-left: 0;
+                       margin-top: 30px;
+               }
        }
 
        .workshop {
@@ -88,6 +113,11 @@ footer.site {
                        padding-left: 40px;
                        text-align: left;
                }
+               @media @m900 {
+                       text-align: center;
+                       padding-left: 0;
+                       margin-top: 30px;
+               }
        }
        .workshop-link {
                .rounded-button();
@@ -103,6 +133,9 @@ footer.site {
                @media @m1024 {
                        .longarrow-button(20px, 54px, 16px, 0);
                }
+               @media @m900 {
+                       .longarrow-button(15px, 20px, 11px, 1px);
+               }
        }
 }
 
@@ -118,6 +151,14 @@ footer.site {
        font-size: 27px;
        line-height: 60px;
        text-align: center;
+
+       @media @m900 {
+               font-size: 22px;
+               line-height: 42px;
+               width: 40px;
+               height: 40px;
+       }
+
        &:hover {
                color: #fff;
        }
@@ -136,10 +177,12 @@ footer.site {
        flex-grow: 2;
 
        @media @m900 {
-               padding-left: 40px;
-               padding-right: 0;
+               padding: 0 20px !important;
                flex-grow: 0 !important;
-               margin-top: 20px;
+               text-align: left;
+       }
+       @media (max-width: 400px) {
+               padding: 0 10px !important;
        }
 
        .menu-title {
@@ -164,13 +207,10 @@ footer.legal {
        flex-wrap: nowrap;
 
        @media @m900 {
-               padding-right: 45px;
-       }
-       @media @m768 {
-               padding-left: 70px;
-       }
-       @media @m640 {
-               flex-wrap: wrap;
+               padding: 20px 50px;
+               font-size: 12px;
+               display: block;
+               text-align: center;
        }
 }
 
@@ -180,11 +220,12 @@ footer.legal {
        white-space: nowrap;
        padding-left: 30px;
 
-       @media @m640 {
+       @media @m900 {
+               text-align: center;
                order: 0; // back to source order
                padding-left: 0;
+               flex-basis: 100%;
                padding-bottom: 20px;
-               text-align: left;
        }
 
        a {
@@ -202,6 +243,13 @@ footer.legal {
                border-radius: 100%;
                transition: all 0.25s;
 
+               @media @m900 {
+                       font-size: 12px;
+                       width: 40px;
+                       height: 40px;
+                       line-height: 40px;
+               }
+
                &.active, &:hover {
                        color: #8aaa43;
                }

diff --git a/less/105-mmenu.less b/less/105-mmenu.less
index bbfa915e3e0fcf829f04a26ea6c7361881720d90..9b5de0f73ae427cdfe82bd26522d14666dba0659 100644 (file)
--- a/less/105-mmenu.less
+++ b/less/105-mmenu.less
@@ -156,6 +156,9 @@ html.mm-front #mm-blocker {
                color: #a5acb2;\r
                line-height: 60px;\r
                padding: 0;\r
+               font-size: 27px;\r
+               width: 54px;\r
+               height: 54px;\r
                &:hover {\r
                        text-shadow: none;\r
                        color: #fff;\r