Merge pull request #223 from localgovdrupal/feature/379-microsites-st…

…yling Styling updates from #379
localgovdrupal · Jul 21, 2023 · 74c4412 · 74c4412
2 parents b32a6b2 + c4bd4d5
commit 74c4412
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 21 deletions.
diff --git a/css/components/footer.css b/css/components/footer.css
@@ -14,7 +14,7 @@
 }
 
 .microsite-footer__logos .field__items,
-.microsite-footer__housekeeping ul,
+.microsite-footer__housekeeping ul:not(.contextual-links),
 .microsite-footer__copyright,
 .microsite-footer__powered_by {
   display: flex;
@@ -37,7 +37,7 @@
   margin-top: var(--spacing);
 }
 
-.microsite-footer__housekeeping ul {
+.microsite-footer__housekeeping ul:not(.contextual-links) {
   list-style-type: none;
 }
 

diff --git a/css/components/header.css b/css/components/header.css
@@ -30,9 +30,17 @@
 
 .microsite-header__main {
   display: flex;
+  flex-direction: column;
   gap: var(--spacing);
 }
 
+@media screen and (min-width: 768px) {
+  .microsite-header__main {
+    flex-direction: row;
+    align-items: var(--header-items-alignment);
+  }
+}
+
 .microsite-header__logo {
   max-width: var(--header-logo-width);
 }
@@ -80,8 +88,10 @@
   text-decoration: underline;
 }
 
-.microsite-header__off-canvas {
-  margin-left: auto;
+@media screen and (min-width: 768px) {
+  .microsite-header__off-canvas {
+    margin-left: auto;
+  }
 }
 
 @media screen and (min-width: 768px) {
@@ -96,10 +106,6 @@
   font-weight: var(--site-name-font-weight);
 }
 
-.microsite-header__main {
-  align-items: var(--header-items-alignment);
-}
-
 .block-group-content-menulgms-main-menu {
   font-size: var(--menu-main-font-size);
   font-weight: var(--menu-main-font-weight);

diff --git a/css/components/view-events.css b/css/components/view-events.css
@@ -40,23 +40,32 @@
   margin-bottom: 0;
 }
 
+.view-localgov-events-listing {
+  container-type: inline-size;
+  container-name: events-listing;
+}
+
 .view-localgov-events-listing .views-row {
   display: grid;
-  grid-template-columns: min-content 1fr;
-  grid-auto-rows: auto;
-  gap: 0 var(--spacing);
+  gap: var(--spacing);
 }
 
-.view-localgov-events-listing .views-row > * {
-  grid-column: 2;
-}
+@container events-listing (min-width: 35rem) {
+  .view-localgov-events-listing .views-row {
+    display: grid;
+    gap: 0 var(--spacing);
+  }
 
-.view-localgov-events-listing .views-row .views-field-localgov-event-image {
-  grid-row: 1 / span 4;
-  grid-column: 1;
-  order: -1;
-}
+  .views-row > * {
+    grid-column: 2;
+  }
+
+  .views-row .views-field-localgov-event-image {
+    grid-row: 1 / span 4;
+    grid-column: 1;
+  }
 
-.view-localgov-events-listing .views-row .views-field-localgov-event-image .field-content {
-  width: 200px;
+  .views-row .views-field-localgov-event-image .field-content {
+    width: 200px;
+  }
 }