Merge branch 'xmpp-mobile-fixes' into 'master'

Xmpp mobile fixes

See merge request disroot/grav-theme-disroot!4

css/media-queries.css

@@ -217,12 +217,41 @@ Disroot Media Queries
       font-size: 18px;
       line-height: 54px;
    }
+
+   /* clients
+   ------------------------------------*/
+
+   .clients {
+     display: block;
+   }
+
+   .client-item {
+     position: relative;
+     max-width: 60%;
+     min-width: 60%;
+     margin-left: auto;
+     margin-right: auto;
+     margin: none;
+   }
+
+   .client-item br { display: none; }
+   .client-item a { position: relative; display: block; width: 100%; }
+   .client-item .platforms { float: right; }
+   .clients i:first-of-type {
+      margin: 0;
+  }
+   .clients img {
+     height: 2em;
+     width: 2em;
+     margin: 2% 5%;
+     filter: grayscale(40%);
+   }
 }
 
 /* mobile narrow
   ------------------------------------*/
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 640px) {
 
    /* mobile navigation
    ------------------------------------*/
@@ -239,3 +268,13 @@ Disroot Media Queries
       font: 14px/1.9em 'librebaskerville-regular', sans-serif;
       width: 90%;
    }
+   .miniheader {
+       height: 0px;
+       min-height: 0px;
+   }
+   header {
+       height: 0px;
+       max-height: 1px;
+   }
+
+  }

css/style.css

@@ -23,7 +23,6 @@ Disroot Main style Sheet
 ------------------------------------*/
 
 body { background: #fff; color: #555;}
-#content { background: #fff; }
 
 /* Header
 ------------------------------------*/
@@ -90,17 +89,6 @@ header {
     z-index: -999;
 }
 
-@media only screen and (max-width: 640px) {
-          .miniheader {
-              height: 0px;
-              min-height: 0px;
-          }
-          header {
-              height: 0px;
-              max-height: 1px;
-          }
-           }
-
 /* vertically center banner section */
 header:before {
    content: '';
@@ -283,6 +271,9 @@ ul#nav li a:hover .ul#nav li ul {
 /* Buttons
 ------------------------------------*/
 
+.button {
+    font-size: 85%;
+}
 .button1 {
    margin-top: 20px;
    background: #50162D;
@@ -349,12 +340,13 @@ ul#nav li a:hover .ul#nav li ul {
 /* two-col */
 
 .two-col {
+  background-color: #fff;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 20px;
    overflow: hidden;
    transform: skew(0deg, -1deg) translateY(-40px);
-   margin-top: -40px
+   margin-top: -40px;
 }
 
 .two-col .row {
@@ -397,7 +389,7 @@ ul#nav li a:hover .ul#nav li ul {
 /* fullbar */
 
 .fullbar {
-    padding: 30px;
+    padding: 0px;
     padding-bottom: 80px;
     text-align: center; background: $main-color;
     transform: skew(0deg, 1deg) translateY(-10px);
@@ -455,10 +447,6 @@ ul#nav li a:hover .ul#nav li ul {
 ------------------------------------*/
 
 .clients {
-  /*padding: 0;
-  margin: 0;
-  display: inline-flex;
-  justify-content: center;*/
   position: relative;
   display: flex;
 	display: -webkit-flex;
@@ -495,7 +483,7 @@ ul#nav li a:hover .ul#nav li ul {
 
 .clients h6, .clients i:first-of-type {
   display: inline-block;
-  margin: 0 0 0 20px;
+  margin: 0 0 0 2%;
   padding: 0;
 }
 

templates/modular/clients.html.twig

@@ -3,19 +3,20 @@
     <div class="fullbar" style="background-color:{{ page.header.bgcolor }};">
       <div class="fullbar-content" style="color:{{ page.header.fontcolor }}; text-align:{{ page.header.text_align }};">
           <div class="row">
-               <div class="clients">
+               <div class="clients row">
                    {% for item in page.header.clients %}
-                   <div  class="client-item">
+                   <div class="client-item two columns">
                      <a href="{{ item.link }}" target="_blank">
                         <br>
                         <img src="{{ page.url }}/{{ item.logo }}">
                         <br>
                         <h6>{{ item.title }}</h6>
-                                              <br>
-                        <i class="fa {{ item.platforms[0] }}"></i>
-                        <i class="fa {{ item.platforms[1] }}"></i>
-                        <i class="fa {{ item.platforms[2] }}"></i>
-                        <i class="fa {{ item.platforms[3] }}"></i>
+                        <div class=platforms>
+                          <i class="fa {{ item.platforms[0] }}"></i>
+                          <i class="fa {{ item.platforms[1] }}"></i>
+                          <i class="fa {{ item.platforms[2] }}"></i>
+                          <i class="fa {{ item.platforms[3] }}"></i>
+                        </div>
                      </a>
                      {% if item.text %}
                        <div class="tooltiptext">{{ item.text }}</div>