Uninstall container queries, convert campaign page to use group classes

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/block_with_aside.html

@@ -1,22 +1,17 @@
 {% comment %}
-  This component uses @container queries to determine if a pre-existing cta or signup block is set
-  and if so reduces the columns to the mobile / single column view
-
   [&.block-with-aside_+_.block-with-aside] - Will add a margin to space out these specific blocks from each other
   The blocks inside content will determine their own margin bottom for vertical spacing
+
+  group-[.has-sidebar] - If the parent has a sidebar like CTA or Signup Block then apply styles to convert this into a single column
 {% endcomment %}
 
-<section class="block-with-aside tw-@container [&.block-with-aside_+_.block-with-aside]:tw-mt-7">
-  {# When the container is larger than 723px (2/3) then we use container queries to apply these styles #}
-  <div class="tw-grid tw-grid-cols-1 @[723px]:tw-grid-cols-3 @[723px]:[&_aside]:tw-col-start-3 @[723px]:[&_aside]:tw-ml-[34px] tw-gap-4 @[723px]:tw-gap-7">
-    <div class="tw-col-span-2 max-large:tw-col-span-1">
+<section class="block-with-aside [&.block-with-aside_+_.block-with-aside]:tw-mt-7">
+  <div class="tw-grid tw-grid-cols-1 large:tw-grid-cols-3 tw-gap-4 large:tw-gap-7 group-[.has-sidebar]:tw-grid-cols-1 group-[.has-sidebar]:tw-gap-4 ">
+    <div class="tw-col-span-1 large:tw-col-span-2 group-[.has-sidebar]:tw-col-span-1">
       {{ value.content }}
     </div>
-    <aside class="tw-row-start-1">
+    <aside class="tw-row-start-1 large:tw-col-start-3 large:tw-ml-[34px] group-[.has-sidebar]:tw-ml-0 group-[.has-sidebar]:tw-col-start-1">
       {{ value.aside }}
     </aside>
   </div>
 </section>
-
-
-{#@[689px]:tw-grid-cols-3#}

network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html

@@ -22,9 +22,9 @@
         <div class="tw-row">
           <div class="cms tw-pb-4
             {% if page.cta and page.specific.narrowed_page_content == False %}
-              large:tw-w-7/12 tw-px-4
+              large:tw-w-7/12 tw-px-4 tw-group tw-has-sidebar
             {% elif page.signup and page.specific.narrowed_page_content == False %}
-              large:tw-w-7/12 tw-px-4
+              large:tw-w-7/12 tw-px-4 tw-group tw-has-sidebar
             {% else %}
               tw-w-full tw-px-4
             {% endif %}"

package-lock.json

@@ -1510,11 +1510,6 @@
         "unist-util-find-all-after": "^3.0.2"
       }
     },
-    "@tailwindcss/container-queries": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.0.tgz",
-      "integrity": "sha512-t1GeJ9P8ual160BvKy6Y1sG7bjChArMaK6iRXm3ZYjZGN2FTzmqb5ztsTDb9AsTSJD4NMHtsnaI2ielrXEk+hw=="
-    },
     "@tailwindcss/forms": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.1.tgz",

package.json

@@ -72,7 +72,6 @@
   "dependencies": {
     "@glidejs/glide": "^3.4.1",
     "@sentry/browser": "^6.2.1",
-    "@tailwindcss/container-queries": "^0.1.0",
     "@tailwindcss/forms": "^0.5.1",
     "@tailwindcss/line-clamp": "^0.4.0",
     "autoprefixer": "^10.4.2",

tailwind.config.js

@@ -58,7 +58,6 @@ module.exports = {
     ...glyphPlugins,
     require("@tailwindcss/forms")({ strategy: "class" }),
     require("@tailwindcss/line-clamp"),
-    require('@tailwindcss/container-queries'),
   ],
   theme: {
     extend: {