Merge branch 'box-hider' into 'develop'

fix: improvements to CSS responsiveness

See merge request R3/howto-cards!196

assets/css/landing.css

@@ -18,6 +18,11 @@
     display: grid;
     grid-template-columns: 5fr 1fr;
 }
+@media (max-width: 1080px) {
+    .container {
+        grid-template-columns: 5fr 0fr;
+    }
+}
 .container > .left-inner-container {
     grid-column: 1;
     height: 100%;
@@ -27,7 +32,13 @@
     align-content: flex-start;
     padding-right: 10px;
     border: solid 1px rgba(0,0,0,0);
-    border-right: solid 2px rgba(240, 240, 240, 0.7);
+    border-right: solid 2px rgba(240, 240, 240, 0.7);    
+}
+@media (max-width: 1080px) {
+    .container > .left-inner-container {
+        border: none;
+        padding-right: 0px;
+    }
 }
 .full-bleed {
     width: 100%;
@@ -45,6 +56,11 @@
     border-radius: 0px 20px 20px 0;
     padding-left: 5px;
 }
+@media (max-width: 1080px) {
+    .container > .right-inner-container {
+        display: none;
+    }
+}
 .droppable {
     background: #eee;
     border: solid 1px var(--secondary-color);
@@ -72,6 +88,14 @@
     width: 160px;
     min-height: 100px;
 }
+@media (max-width: 10px) {
+    .card {
+        width: 100%;
+        grid-template-columns: 3fr 5fr;
+        display: grid;
+        height: 60px;
+    }
+}
 .card.card-dragged {
     height: 80px;
 }
@@ -82,6 +106,14 @@
     background-color: white;
     transition: background-color var(--animation-time) linear, border-style var(--animation-time) linear;
 }
+@media (max-width: 10px) {
+    .card > .card-header {
+        display: grid;
+        grid-template-rows: 2fr 2fr;
+        border-radius: var(--border-radius) 0px 0px var(--border-radius);
+        min-height: 100px;
+    }
+}
 .card > .card-header:hover {
     border-color: var(--primary-color);
     background-color: var(--primary-color);
@@ -112,6 +144,13 @@
     background-color: white;
     font-size: 15px;
 }
+@media (max-width: 10px) {
+    .card > .card-content {
+        display: flex;
+        border-radius: 0 var(--border-radius) var(--border-radius) 0px;
+        min-height: 100px;
+    }
+}
 .card > .card-content.card-dragged {
     opacity: 0;
     background: rgba(255,255,255,0.0);
@@ -142,6 +181,14 @@
     vertical-align: middle;
     font-size: 14pt;
 }
+@media (max-width: 10px) {
+    .card > .card-header > .card-title {
+        border-radius: 0px 0px 0px var(--border-radius);
+        height: 15px;
+        padding: 0 0 5px 0;
+        font-size: unset;
+    }
+}
 /* ==================================================== */
 /*    Pinned cards                                      */
 /* ==================================================== */
@@ -216,6 +263,12 @@ div.search-bar {
     margin-left: 20%;
     display: flex;
 }
+@media (max-width: 1080px) {
+    div.search-bar {
+        margin-left: 3%;
+        width: 100%;
+    }
+}
 .search-bar > input {
     width: 100%;
     margin: 0px 0px 40px 0px;
@@ -252,6 +305,12 @@ div.search-bar {
     text-align: center;
     cursor: pointer;
 }
+@media (max-width: 1080px) { 
+    .indicator {
+        top: 40px;
+        right: 20px;
+    }
+}
 .indicator > i {
     font-size: 36px;
 }
@@ -283,4 +342,4 @@ div.search-bar {
     border-width: 5px;
     border-style: solid;
     border-color: transparent transparent transparent var(--tooltip-bg);
-}
\ No newline at end of file
+}