Changeset 36044 for main/trunk/model-interfaces-dev

Timestamp:

2022-02-03T12:21:55+13:00 (2 years ago)

Author:

cstephen

Message:

Add basic small-screen layout

File:

• main/trunk/model-interfaces-dev/wmtb/styles/gs-wmtb-custom.css (modified) (3 diffs)

main/trunk/model-interfaces-dev/wmtb/styles/gs-wmtb-custom.css

@@ -61 +61 @@
 
 
-/* Mobile settings
-Hardcoded values copied from weebly site theme's variables.less file called in header.less */
-@media screen and (max-width: 1024px) { /* bp-small-max */
-
-    /*
-      body { overflow: auto; }
-    */
-
-    :root {
-        --height-header: 93px;
-    }
-
-    /* Maybe undo any changes made below for full-screen version so mobile unaffected*/
-    /*
-    div.crop-bg {
-    height: 100px;
-    background-position: center 20%;
-    }
-
-    .crop-bg div.container {
-    padding: 100px 0;
-    }
-   */
-}
-
-
 /* Want to have the full size bg banner image on the main page listing the Pou-s,
 but on each Pou landing page and each collection landing page, want a vertically
@@ -106 +80 @@
 }
 
-/* 
-   Non-mobile settings.
- */
-@media screen and (min-width: 1025px) { /* bp-small */
-    div.crop-bg {
-        height: 230px; /* You must set a specified height */
-        background-position: center -100px; /* OR: center OR: center 20% */
-        /*display: block;*/ /* div with bg image needs to change from display: table-cell
-                to display: block when cropping bg image, as table-cell setting
-                overrides height customisation */
-    }
-
-    /* Restyle .container *descendant* of .crop-bg:
-       Padding can not be 100px as it is when .full-bg is in effect,
-       and should be no greater than 95px for .crop-bg, else there
-       appears a bottom border of sorts under the cropped image. */ 
-    /* .crop-bg div.container {
-        padding: 50px 0;
-    } */
-
-    /* Override: padding had made the login/search/browse nav buttons unavailable */
-    .banner-wrap .crop-bg .container {
-        padding: 0px;
-    }
-
-    #gs_content {
-        max-width: 70vw;
-    }
-}
 
 a, span#addNewMD, span#clearSaved {
@@ -379 +324 @@
     padding-top:0.2rem;
 }
+
+/* Non-mobile settings. */
+@media screen and (min-width: 1025px) { /* bp-small */
+    div.crop-bg {
+        height: 230px; /* You must set a specified height */
+        background-position: center -100px; /* OR: center OR: center 20% */
+        /*display: block;*/ /* div with bg image needs to change from display: table-cell
+                to display: block when cropping bg image, as table-cell setting
+                overrides height customisation */
+    }
+
+    /* Restyle .container *descendant* of .crop-bg:
+       Padding can not be 100px as it is when .full-bg is in effect,
+       and should be no greater than 95px for .crop-bg, else there
+       appears a bottom border of sorts under the cropped image. */ 
+    /* .crop-bg div.container {
+        padding: 50px 0;
+    } */
+
+    /* Override: padding had made the login/search/browse nav buttons unavailable */
+    .banner-wrap .crop-bg .container {
+        padding: 0px;
+    }
+
+    #gs_content {
+        max-width: 70vw;
+    }
+}
+
+/* Mobile settings
+Hardcoded values copied from weebly site theme's variables.less file called in header.less */
+@media screen and (max-width: 1024px) { /* bp-small-max */
+
+    /*
+      body { overflow: auto; }
+    */
+
+    :root {
+        --height-header: 93px;
+    }
+
+    div.outer.collectionDisplay {
+        display: grid;
+        grid-template-columns: none;
+        grid-template-rows: auto 1fr;
+    }
+
+    #rightSidebar {
+        display: none;
+    }
+
+    /* Maybe undo any changes made below for full-screen version so mobile unaffected*/
+    /*
+    div.crop-bg {
+    height: 100px;
+    background-position: center 20%;
+    }
+
+    .crop-bg div.container {
+    padding: 100px 0;
+    }
+   */
+}