responsive: base ok

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -34,6 +34,9 @@ $mdi-font-path: './mdi/fonts/';
       @content;
     }
   }
+	&.tapped{
+		@content;
+	}
 }
 
 aside.messages{
@@ -524,6 +527,9 @@ header[role="banner"]{
 			  display: none;
 	    }
 			padding: 1em 0 0;
+			h2{
+				padding: 0.5em 1em 0!important;
+			}
 		}
     h2{
       margin:0;
@@ -1228,9 +1234,11 @@ article.node--type-frontpage{
 			>li{
 				flex: 0 1 48%;
 				margin:0 0 0.5em 0;
+				filter: drop-shadow(0 0 3px #aaa);
 				>article{
 					width:100%;
 					height:auto;
+					box-shadow: none;
 					>section.images{
 						height: auto;
 						>figure{
@@ -1417,6 +1425,16 @@ article.card{
 
       }
     }
+
+		@include col-mediaquery-max(3){
+			width:23px;
+			>*{
+				>span.btn, >a{
+					font-size:1.2em;
+				}
+			}
+		}
+
     .tool.flags{
       .tool-content{
         ul{
@@ -1526,6 +1544,18 @@ article.card{
     >.col{
       flex-basis: 50%;
     }
+		@include col-mediaquery-max(3){
+			flex-flow: column;
+			width: 100%;
+			height: 100%;
+			overflow-y: auto;
+			>.col-right{
+				flex:0 0 auto;
+			}
+			>.col-left{
+				flex:0 0 100%;
+			}
+		}
     section.col-right{
       >*:not(nav.tools){
         position: relative;
@@ -1610,7 +1640,11 @@ article.card{
         }
         div.tool-content{
           min-width: $column_width *2 - $navtool_width - 10px;
+					@include col-mediaquery-max(3){
+						min-width: 80vw;
+					}
         }
+
       }
       section.tool.samples{
         div.tool-content{
@@ -1708,6 +1742,20 @@ article.card{
   }
 }
 
+// vuejs-modale hack as maxWidth and maxHeight does not work :(
+@include col-mediaquery-min(3){
+	.vm--modale-card{
+		max-width: 850px;
+		max-height: 610px;
+	  left: 50% !important;
+	  top: 50% !important;
+	  transform: translate(-50%, -50%) !important;
+	}
+}
+.vm--overlay{
+	background: rgba(0, 0, 0, 0.5)!important;
+}
+
 //  _____ _                   _   _
 // |_   _| |_  ___ _ __  __ _| |_(_)__ _ _  _ ___
 //   | | | ' \/ -_) '  \/ _` |  _| / _` | || / -_)