diff --git a/core/themes/olivero/css/base/variables.css b/core/themes/olivero/css/base/variables.css
index 678751daf913945444f3a7b747a8e1974c771277..6c23c928127fea7c9b6b2ee578e814bbe9d1b691 100644
--- a/core/themes/olivero/css/base/variables.css
+++ b/core/themes/olivero/css/base/variables.css
@@ -4,16 +4,31 @@
* https://www.drupal.org/node/3084859
* @preserve
*/
-/*
- Custom CSS properties.
- These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
+/*
+ Global CSS custom properties.
*/
+
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+/* stylelint-disable */
+
:root {
--font-sans: "metropolis", sans-serif;
--font-serif: "Lora", "georgia", serif;
- /* Typography */
+ /* Typography helpers. */
--font-size-base: 1rem;
--font-size-l: 1.125rem;
--font-size-s: 0.875rem;
@@ -22,68 +37,73 @@
--line-height-base: 1.6875rem;
--line-height-s: 1.125rem;
- /* Layout */
+ /* Layout helpers. */
--max-width: 84.375rem;
- --max-bg-color: 98.125rem;
+ --max-bg-color: 98.125rem; /* Width to which the background color extends to. */
--sp: 1.125rem;
--content-left: 5.625rem;
- --container-padding: var(--sp);
- --container-padding-nav: var(--sp2);
--site-header-height-wide: var(--sp10);
+ --container-padding: var(--sp); /* Inline padding on .container elements. */
+}
+
+@media (min-width: 75rem) {
+
+:root {
+ --container-padding: var(--sp2);
+}
+ }
+
+:root {
/* Drupal administrative toolbar heights and width. */
--toolbar-height: 2.4375rem;
--toolbar-tray-height: 2.5rem;
--toolbar-tray-vertical-width: 14.9375rem;
- /*
- Grid helpers.
+ /**
+ * Grid helpers.
+ *
+ * These variables help authors apply widths and negative margins to break items out of
+ * the grid, while still conforming to the larger grid system.
+ */
+ --scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/
+ --grid-col-count: 6;
+ --grid-gap: var(--sp);
+ --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
+ --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
+ --grid-col-width: calc((var(--grid-full-width) - var(--grid-gap-count)*var(--grid-gap))/var(--grid-col-count)); /* Width of a grid column. */
+}
- These variables help authors apply widths and negative margins to break items out of
- the grid, while still conforming to the larger grid system.
+@media (min-width: 43.75rem) {
- Note we cannot change the values of these custom properties within media queries,
- as they are processed by postcss/postcss-custom-properties (for IE11 compatibility),
- which does not support that functionality. Therefore, we need a separate custom
- property for each breakpoint. ðŸ˜
- */
+:root {
+ --grid-col-count: 14;
+ --grid-gap: var(--sp2);
+}
+ }
- --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
+@media (min-width: 62.5rem) {
- /* Grid gap across various breakpoints. */
- --grid-gap: var(--sp);
- --grid-gap--md: var(--sp2);
- --grid-gap--lg: var(--grid-gap--md);
- --grid-gap--nav: var(--grid-gap--md);
- --grid-gap--max: var(--grid-gap--md);
+:root {
+ --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
+}
+ }
- /* Column counts at various breakpoints. */
- --grid-col-count: 6;
- --grid-col-count--md: 14;
- --grid-col-count--lg: var(--grid-col-count--md);
- --grid-col-count--nav: var(--grid-col-count--md);
- --grid-col-count--max: var(--grid-col-count--md);
-
- /* Count of grid-gaps at various breakpoints. */
- --grid-gap-count: calc(var(--grid-col-count) - 1);
- --grid-gap-count--md: calc(var(--grid-col-count--md) - 1);
- --grid-gap-count--lg: var(--grid-gap-count--md);
- --grid-gap-count--nav: var(--grid-gap-count--md);
- --grid-gap-count--max: var(--grid-gap-count--md);
-
- /* Width of the entire grid at various breakpoints. */
- --grid-full-width: calc(100vw - var(--sp2));
- --grid-full-width--md: var(--grid-full-width);
- --grid-full-width--lg: calc(var(--grid-full-width) - var(--scrollbar-width));
- --grid-full-width--nav: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
- --grid-full-width--max: calc(var(--max-width) - var(--sp4));
-
- /* Width of a grid column at various breakpoints */
- --grid-col-width: calc((var(--grid-full-width) - var(--grid-gap-count)*var(--grid-gap))/var(--grid-col-count));
- --grid-col-width--md: calc((var(--grid-full-width--md) - var(--grid-gap-count--md)*var(--grid-gap--md))/var(--grid-col-count--md));
- --grid-col-width--lg: calc((var(--grid-full-width--lg) - var(--grid-gap-count--lg)*var(--grid-gap--lg))/var(--grid-col-count--lg));
- --grid-col-width--nav: calc((var(--grid-full-width--nav) - var(--grid-gap-count--nav)*var(--grid-gap--nav))/var(--grid-col-count--nav));
- --grid-col-width--max: calc((var(--grid-full-width--max) - var(--grid-gap-count--max)*var(--grid-gap--max))/var(--grid-col-count--max));
+@media (min-width: 75rem) {
+
+:root {
+ --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
+}
+ }
+
+@media (min-width: 90rem) {
+
+:root {
+ --grid-full-width: calc(var(--max-width) - var(--sp4));
+}
+ }
+
+:root {
/* Layout helpers */
--sp0-25: calc(var(--sp)*0.25);
diff --git a/core/themes/olivero/css/base/variables.pcss.css b/core/themes/olivero/css/base/variables.pcss.css
index 61ad00b4d303918fe9813c172fb74a7e915fe641..2e6f116b0d2dc40e855e7805e87ccd24f0398e68 100644
--- a/core/themes/olivero/css/base/variables.pcss.css
+++ b/core/themes/olivero/css/base/variables.pcss.css
@@ -1,13 +1,16 @@
/*
- Custom CSS properties.
-
- These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
+ Global CSS custom properties.
*/
+
+@import "./media-queries.pcss.css";
+
+/* stylelint-disable */
+
:root {
--font-sans: "metropolis", sans-serif;
--font-serif: "Lora", "georgia", serif;
- /* Typography */
+ /* Typography helpers. */
--font-size-base: 16px;
--font-size-l: 18px;
--font-size-s: 14px;
@@ -16,68 +19,52 @@
--line-height-base: 27px;
--line-height-s: 18px;
- /* Layout */
+ /* Layout helpers. */
--max-width: 1350px;
- --max-bg-color: 1570px;
+ --max-bg-color: 1570px; /* Width to which the background color extends to. */
--sp: 18px;
--content-left: 90px;
- --container-padding: var(--sp);
- --container-padding-nav: var(--sp2);
--site-header-height-wide: var(--sp10);
+ --container-padding: var(--sp); /* Inline padding on .container elements. */
+
+ @media (--nav) {
+ --container-padding: var(--sp2);
+ }
/* Drupal administrative toolbar heights and width. */
--toolbar-height: 39px;
--toolbar-tray-height: 40px;
--toolbar-tray-vertical-width: 239px;
- /*
- Grid helpers.
-
- These variables help authors apply widths and negative margins to break items out of
- the grid, while still conforming to the larger grid system.
-
- Note we cannot change the values of these custom properties within media queries,
- as they are processed by postcss/postcss-custom-properties (for IE11 compatibility),
- which does not support that functionality. Therefore, we need a separate custom
- property for each breakpoint. ðŸ˜
- */
-
- --scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
-
- /* Grid gap across various breakpoints. */
- --grid-gap: var(--sp);
- --grid-gap--md: var(--sp2);
- --grid-gap--lg: var(--grid-gap--md);
- --grid-gap--nav: var(--grid-gap--md);
- --grid-gap--max: var(--grid-gap--md);
-
- /* Column counts at various breakpoints. */
+ /**
+ * Grid helpers.
+ *
+ * These variables help authors apply widths and negative margins to break items out of
+ * the grid, while still conforming to the larger grid system.
+ */
+ --scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/
--grid-col-count: 6;
- --grid-col-count--md: 14;
- --grid-col-count--lg: var(--grid-col-count--md);
- --grid-col-count--nav: var(--grid-col-count--md);
- --grid-col-count--max: var(--grid-col-count--md);
-
- /* Count of grid-gaps at various breakpoints. */
- --grid-gap-count: calc(var(--grid-col-count) - 1);
- --grid-gap-count--md: calc(var(--grid-col-count--md) - 1);
- --grid-gap-count--lg: var(--grid-gap-count--md);
- --grid-gap-count--nav: var(--grid-gap-count--md);
- --grid-gap-count--max: var(--grid-gap-count--md);
-
- /* Width of the entire grid at various breakpoints. */
- --grid-full-width: calc(100vw - var(--sp2));
- --grid-full-width--md: var(--grid-full-width);
- --grid-full-width--lg: calc(var(--grid-full-width) - var(--scrollbar-width));
- --grid-full-width--nav: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
- --grid-full-width--max: calc(var(--max-width) - var(--sp4));
-
- /* Width of a grid column at various breakpoints */
- --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
- --grid-col-width--md: calc((var(--grid-full-width--md) - (var(--grid-gap-count--md) * var(--grid-gap--md))) / var(--grid-col-count--md));
- --grid-col-width--lg: calc((var(--grid-full-width--lg) - (var(--grid-gap-count--lg) * var(--grid-gap--lg))) / var(--grid-col-count--lg));
- --grid-col-width--nav: calc((var(--grid-full-width--nav) - (var(--grid-gap-count--nav) * var(--grid-gap--nav))) / var(--grid-col-count--nav));
- --grid-col-width--max: calc((var(--grid-full-width--max) - (var(--grid-gap-count--max) * var(--grid-gap--max))) / var(--grid-col-count--max));
+ --grid-gap: var(--sp);
+ --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
+ --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
+ --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); /* Width of a grid column. */
+
+ @media (--md) {
+ --grid-col-count: 14;
+ --grid-gap: var(--sp2);
+ }
+
+ @media (--lg) {
+ --scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
+ }
+
+ @media (--nav) {
+ --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
+ }
+
+ @media (--grid-max) {
+ --grid-full-width: calc(var(--max-width) - var(--sp4));
+ }
/* Layout helpers */
--sp0-25: calc(0.25 * var(--sp));
diff --git a/core/themes/olivero/css/components/content-moderation.css b/core/themes/olivero/css/components/content-moderation.css
index 3bba060bc0243a4808f7d2c04e82fc74dedf9169..e36f7369c13b71e31fb5fe07b0fd394c2c4e1280 100644
--- a/core/themes/olivero/css/components/content-moderation.css
+++ b/core/themes/olivero/css/components/content-moderation.css
@@ -110,15 +110,15 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-left: calc(var(--grid-col-width--md)*-2 + var(--grid-gap--md)*-2)
+ margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2)
}
[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-right: calc(var(--grid-col-width--md)*-2 + var(--grid-gap--md)*-2)
+ margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2)
}
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
- width: calc(var(--grid-col-width--md)*14 + var(--grid-gap--md)*13);
+ width: calc(var(--grid-col-count)*var(--grid-col-width) + var(--grid-gap-count)*var(--grid-gap));
margin-top: var(--sp2);
margin-bottom: var(--sp4)
}
@@ -127,30 +127,15 @@
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+ margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+ margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
- width: calc(var(--grid-col-width--lg)*12 + var(--grid-gap--lg)*11)
- }
- }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
- }
-
-[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
- }
-
-.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
- width: calc(var(--grid-col-width--nav)*12 + var(--grid-gap--nav)*11)
+ width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
}
}
@@ -165,6 +150,6 @@
}
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
- width: calc(var(--grid-col-width--max)*10 + var(--grid-gap--max)*11)
+ width: calc(var(--grid-col-width)*10 + var(--grid-gap)*11)
}
}
diff --git a/core/themes/olivero/css/components/content-moderation.pcss.css b/core/themes/olivero/css/components/content-moderation.pcss.css
index f22346f23cf4957a66cf6480b0c4e676629cc476..99ba9d8d969eb568f359ead86e530cba86b220ec 100644
--- a/core/themes/olivero/css/components/content-moderation.pcss.css
+++ b/core/themes/olivero/css/components/content-moderation.pcss.css
@@ -49,23 +49,18 @@
}
@media (--grid-md) {
- width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md));
+ width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
margin-block: var(--sp2) var(--sp4);
- margin-inline-start: calc(-2 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
+ margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap)));
}
@media (--lg) {
- width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));
- margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
- }
-
- @media (--nav) {
- width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));
- margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
+ width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+ margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
@media (--grid-max) {
- width: calc(10 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));
+ width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap));
margin-inline-start: 0;
}
}
diff --git a/core/themes/olivero/css/components/embedded-media.css b/core/themes/olivero/css/components/embedded-media.css
index d940ac710af5289e4201c162df5234dec837ceb2..638530fbc5d96977aef99a1deedab6737b622b29 100644
--- a/core/themes/olivero/css/components/embedded-media.css
+++ b/core/themes/olivero/css/components/embedded-media.css
@@ -136,16 +136,21 @@ figcaption {
/* Pull out of grid if nested in content narrow layout. */
+.layout--content-narrow .align-right,
+.layout--pass--content-narrow > * .align-right {
+ /* @todo this can be simplified. */
+}
+
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
- margin-right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
+ margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
- margin-left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
+ margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
}
}
@@ -153,12 +158,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
- margin-right: calc(var(--grid-col-width--lg)*-2 + var(--grid-gap--lg)*-2);
+ margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
- margin-left: calc(var(--grid-col-width--lg)*-2 + var(--grid-gap--lg)*-2);
+ margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
}
}
@@ -166,12 +171,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
- margin-right: calc(var(--grid-col-width--nav)*-3 + var(--grid-gap--nav)*-3);
+ margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
- margin-left: calc(var(--grid-col-width--nav)*-3 + var(--grid-gap--nav)*-3);
+ margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
}
}
@@ -179,12 +184,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
- margin-right: calc(var(--grid-col-width--max)*-3 + var(--grid-gap--max)*-3);
+ margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
- margin-left: calc(var(--grid-col-width--max)*-3 + var(--grid-gap--max)*-3);
+ margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
}
}
@@ -250,51 +255,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"]
.layout--pass--content-narrow > * .align-left {
- margin-left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
- }
-
-[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"]
-.layout--pass--content-narrow > * .align-left {
- margin-right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
- }
- }
-
-@media (min-width: 62.5rem) {
-
-[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"]
-.layout--pass--content-narrow > * .align-left {
- margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1);
- }
-
-[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"]
-.layout--pass--content-narrow > * .align-left {
- margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1);
- }
- }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"]
-.layout--pass--content-narrow > * .align-left {
- margin-left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1);
- }
-
-[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"]
-.layout--pass--content-narrow > * .align-left {
- margin-right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1);
- }
- }
-
-@media (min-width: 90rem) {
-
-[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"]
-.layout--pass--content-narrow > * .align-left {
- margin-left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1);
+ margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
}
[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"]
.layout--pass--content-narrow > * .align-left {
- margin-right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1);
+ margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
}
}
diff --git a/core/themes/olivero/css/components/embedded-media.pcss.css b/core/themes/olivero/css/components/embedded-media.pcss.css
index 8e0c54c51f95ae57472f979f81364ffee40abc52..b17cacf357a4df33f98bd6da7d5cc8dfe4e33b5d 100644
--- a/core/themes/olivero/css/components/embedded-media.pcss.css
+++ b/core/themes/olivero/css/components/embedded-media.pcss.css
@@ -47,20 +47,21 @@ figcaption {
/* Pull out of grid if nested in content narrow layout. */
.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
+ /* @todo this can be simplified. */
@media (--grid-md) {
- margin-inline-end: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
+ margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
}
@media (--lg) {
- margin-inline-end: calc(-2 * ((var(--grid-col-width--lg) + var(--grid-gap--lg))));
+ margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
}
@media (--nav) {
- margin-inline-end: calc(-3 * ((var(--grid-col-width--nav) + var(--grid-gap--nav))));
+ margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
}
@media (--grid-max) {
- margin-inline-end: calc(-3 * ((var(--grid-col-width--max) + var(--grid-gap--max))));
+ margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
}
}
@@ -86,19 +87,7 @@ figcaption {
.layout--content-narrow .align-left,
.layout--pass--content-narrow > * .align-left {
@media (--grid-md) {
- margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
- }
-
- @media (--lg) {
- margin-inline-start: calc(-1 * ((var(--grid-col-width--lg) + var(--grid-gap--lg))));
- }
-
- @media (--nav) {
- margin-inline-start: calc(-1 * ((var(--grid-col-width--nav) + var(--grid-gap--nav))));
- }
-
- @media (--grid-max) {
- margin-inline-start: calc(-1 * ((var(--grid-col-width--max) + var(--grid-gap--max))));
+ margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
}
}
diff --git a/core/themes/olivero/css/components/header-navigation.css b/core/themes/olivero/css/components/header-navigation.css
index 6154aa66126c44da89f35c7dcb46e284f89a8957..a0522503054e22072409df23dd8fd87139d1d9de 100644
--- a/core/themes/olivero/css/components/header-navigation.css
+++ b/core/themes/olivero/css/components/header-navigation.css
@@ -224,7 +224,7 @@ body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .he
body.is-always-mobile-nav .header-nav {
overflow: auto;
- max-width: calc(var(--grid-col-width--nav)*7 + var(--grid-gap--nav)*7);
+ max-width: calc(var(--grid-col-width)*7 + var(--grid-gap)*7);
transition: transform 0.2s, visibility 0.2s;
border-top-width: var(--sp11)
}
@@ -241,7 +241,7 @@ body.is-always-mobile-nav .header-nav {
}
body.is-always-mobile-nav .header-nav {
- max-width: calc(100vw - var(--max-width) - var(--content-left) + var(--grid-col-width--max)*7 + var(--grid-gap--max)*7)
+ max-width: calc(100vw - var(--max-width) - var(--content-left) + var(--grid-col-width)*7 + var(--grid-gap)*7)
}
}
diff --git a/core/themes/olivero/css/components/header-navigation.pcss.css b/core/themes/olivero/css/components/header-navigation.pcss.css
index 2e3814fc8e3b3595e08a313b3f145a3832d5c2f6..2cf9759342068ac0e81204f1c37c65a308c8e301 100644
--- a/core/themes/olivero/css/components/header-navigation.pcss.css
+++ b/core/themes/olivero/css/components/header-navigation.pcss.css
@@ -123,14 +123,14 @@ body.is-always-mobile-nav {
& .header-nav {
@media (--nav) {
overflow: auto;
- max-width: calc((7 * (var(--grid-col-width--nav) + var(--grid-gap--nav))));
+ max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
padding-inline-end: var(--sp);
transition: transform 0.2s, visibility 0.2s;
border-top-width: var(--sp11);
}
@media (--grid-max) {
- max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width--max) + var(--grid-gap--max)))));
+ max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap)))));
padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
}
}
diff --git a/core/themes/olivero/css/components/header-search-wide.css b/core/themes/olivero/css/components/header-search-wide.css
index 1498a14015fc28b50106387af6c24e7a90c4f8bb..24cc9b555fde4ab7b0b889615517adb13adb9dbe 100644
--- a/core/themes/olivero/css/components/header-search-wide.css
+++ b/core/themes/olivero/css/components/header-search-wide.css
@@ -319,8 +319,8 @@
.block-search-wide__grid {
display: grid;
- grid-template-columns: repeat(var(--grid-col-count--md), 1fr);
- grid-column-gap: var(--grid-gap--md);
+ grid-template-columns: repeat(var(--grid-col-count), 1fr);
+ grid-column-gap: var(--grid-gap);
}
/* Override specificity from container-inline.module.css */
diff --git a/core/themes/olivero/css/components/header-search-wide.pcss.css b/core/themes/olivero/css/components/header-search-wide.pcss.css
index d7c346812142369a1f97ffdba5646a5e6aebcb43..f98b0a629d8bc36a845d88b70746660ce4c1d7c6 100644
--- a/core/themes/olivero/css/components/header-search-wide.pcss.css
+++ b/core/themes/olivero/css/components/header-search-wide.pcss.css
@@ -176,8 +176,8 @@
.block-search-wide__grid {
display: grid;
- grid-template-columns: repeat(var(--grid-col-count--md), 1fr);
- grid-column-gap: var(--grid-gap--md);
+ grid-template-columns: repeat(var(--grid-col-count), 1fr);
+ grid-column-gap: var(--grid-gap);
}
/* Override specificity from container-inline.module.css */
diff --git a/core/themes/olivero/css/components/header-site-branding.css b/core/themes/olivero/css/components/header-site-branding.css
index 9beff6257ac27e4c40be41c33d417ebe4fdc4bd1..e6948ffecd61d07de450ef80e4f2929685a2eabb 100644
--- a/core/themes/olivero/css/components/header-site-branding.css
+++ b/core/themes/olivero/css/components/header-site-branding.css
@@ -53,8 +53,8 @@
display: flex;
flex-shrink: 1;
align-items: flex-end;
- min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding));
- min-height: var(--sp3);
+ min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)); /* Span minimum of 2 column widths. */
+ min-height: var(--sp3); /* Negative margin to break out of .container element. */
padding-top: 0;
padding-bottom: var(--sp0-5);
@@ -72,6 +72,7 @@
@media (min-width: 43.75rem) {
.site-branding {
+ min-width: calc(var(--grid-col-width)*4 + var(--grid-gap)*4 + var(--container-padding)); /* Span minimum of 4 column widths. */
min-height: var(--sp6);
padding-bottom: var(--sp)
}
@@ -80,51 +81,27 @@
@media (min-width: 62.5rem) {
.site-branding {
- min-width: calc(var(--grid-col-width--lg)*2 + var(--grid-gap--lg)*2 + var(--container-padding))
+ min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)) /* Span minimum of 2 column widths. */
}
}
@media (min-width: 75rem) {
[dir="ltr"] .site-branding {
- margin-left: calc(var(--container-padding-nav)*-1)
+ margin-left: calc(var(--container-padding)*-1)
}
[dir="rtl"] .site-branding {
- margin-right: calc(var(--container-padding-nav)*-1)
- }
-
-[dir="ltr"] .site-branding {
- padding-left: var(--container-padding-nav)
- }
-
-[dir="rtl"] .site-branding {
- padding-right: var(--container-padding-nav)
- }
-
-[dir="ltr"] .site-branding {
- padding-right: var(--container-padding-nav)
- }
-
-[dir="rtl"] .site-branding {
- padding-left: var(--container-padding-nav)
+ margin-right: calc(var(--container-padding)*-1)
}
.site-branding {
- min-width: calc(var(--grid-col-width--nav)*2 + var(--grid-gap--nav)*2 + var(--container-padding-nav));
min-height: var(--site-header-height-wide);
padding-top: 0;
padding-bottom: 0
}
}
-@media (min-width: 90rem) {
-
-.site-branding {
- min-width: calc(var(--grid-col-width--max)*2 + var(--grid-gap--max)*2 + var(--container-padding-nav))
-}
- }
-
[dir="rtl"] .site-branding {
background-image: linear-gradient(-160deg, var(--color--blue-50) 0%, #0d7ab8 78.66%);
}
diff --git a/core/themes/olivero/css/components/header-site-branding.pcss.css b/core/themes/olivero/css/components/header-site-branding.pcss.css
index ecd5f37984ca535699ed45a96288e7b0b91f08f8..7e995b2f7affd3993bcae14bcba49a7719173da3 100644
--- a/core/themes/olivero/css/components/header-site-branding.pcss.css
+++ b/core/themes/olivero/css/components/header-site-branding.pcss.css
@@ -9,9 +9,9 @@
display: flex;
flex-shrink: 1;
align-items: flex-end;
- min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding));
+ min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
min-height: var(--sp3);
- margin-inline: calc(-1 * var(--container-padding)) var(--sp);
+ margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
padding-block: 0 var(--sp0-5);
padding-inline-start: var(--container-padding);
padding-inline-end: var(--container-padding);
@@ -24,25 +24,19 @@
}
@media (--md) {
+ min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
min-height: var(--sp6);
padding-block-end: var(--sp);
}
@media (--lg) {
- min-width: calc((2 * var(--grid-col-width--lg)) + (2 * var(--grid-gap--lg)) + var(--container-padding));
+ min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
}
@media (--nav) {
- min-width: calc((2 * var(--grid-col-width--nav)) + (2 * var(--grid-gap--nav)) + var(--container-padding-nav));
min-height: var(--site-header-height-wide);
- margin-inline-start: calc(-1 * var(--container-padding-nav));
+ margin-inline-start: calc(-1 * var(--container-padding));
padding-block: 0;
- padding-inline-start: var(--container-padding-nav);
- padding-inline-end: var(--container-padding-nav);
- }
-
- @media (--grid-max) {
- min-width: calc((2 * var(--grid-col-width--max)) + (2 * var(--grid-gap--max)) + var(--container-padding-nav));
}
}
diff --git a/core/themes/olivero/css/components/node-teaser.css b/core/themes/olivero/css/components/node-teaser.css
index b87157cd8b31c0e27a0059b402d951a2183ea78e..1b32f4d0d6ef296b93f6bfa672e3d9aea0282ed1 100644
--- a/core/themes/olivero/css/components/node-teaser.css
+++ b/core/themes/olivero/css/components/node-teaser.css
@@ -102,35 +102,19 @@
@media (min-width: 62.5rem) {
.node--view-mode-teaser .primary-image img {
- width: var(--grid-col-width--lg);
- height: var(--grid-col-width--lg)
- }
- }
-
-@media (min-width: 75rem) {
-
-.node--view-mode-teaser .primary-image img {
- width: var(--grid-col-width--nav);
- height: var(--grid-col-width--nav)
- }
- }
-
-@media (min-width: 90rem) {
-
-.node--view-mode-teaser .primary-image img {
- width: var(--grid-col-width--max);
- height: var(--grid-col-width--max)
+ width: var(--grid-col-width);
+ height: var(--grid-col-width)
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .node--view-mode-teaser .primary-image {
- left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+ left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .node--view-mode-teaser .primary-image {
- right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+ right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
.node--view-mode-teaser .primary-image {
@@ -140,28 +124,6 @@
}
}
-@media (min-width: 75rem) {
-
-[dir="ltr"] .node--view-mode-teaser .primary-image {
- left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
- }
-
-[dir="rtl"] .node--view-mode-teaser .primary-image {
- right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
- }
- }
-
-@media (min-width: 90rem) {
-
-[dir="ltr"] .node--view-mode-teaser .primary-image {
- left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
- }
-
-[dir="rtl"] .node--view-mode-teaser .primary-image {
- right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
- }
- }
-
.node--view-mode-teaser .node__title {
margin: 0;
margin-bottom: var(--sp1);
diff --git a/core/themes/olivero/css/components/node-teaser.pcss.css b/core/themes/olivero/css/components/node-teaser.pcss.css
index e20b39260772dc490e9f4f174bfbd4839c6b1cde..ed08687927679bd2c6d5bdb90946ff722ba284bf 100644
--- a/core/themes/olivero/css/components/node-teaser.pcss.css
+++ b/core/themes/olivero/css/components/node-teaser.pcss.css
@@ -65,35 +65,17 @@
border-radius: 50%;
@media (--lg) {
- width: var(--grid-col-width--lg);
- height: var(--grid-col-width--lg);
- }
-
- @media (--nav) {
- width: var(--grid-col-width--nav);
- height: var(--grid-col-width--nav);
- }
-
- @media (--grid-max) {
- width: var(--grid-col-width--max);
- height: var(--grid-col-width--max);
+ width: var(--grid-col-width);
+ height: var(--grid-col-width);
}
}
@media (--lg) {
position: absolute;
inset-block-start: 0;
- inset-inline-start: calc(-1 * ((var(--grid-col-width--lg) + var(--grid-gap--lg))));
+ inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
margin: 0;
}
-
- @media (--nav) {
- inset-inline-start: calc(-1 * ((var(--grid-col-width--nav) + var(--grid-gap--nav))));
- }
-
- @media (--grid-max) {
- inset-inline-start: calc(-1 * ((var(--grid-col-width--max) + var(--grid-gap--max))));
- }
}
& .node__title {
diff --git a/core/themes/olivero/css/components/wide-image.css b/core/themes/olivero/css/components/wide-image.css
index 1090ff48356ec94aa82a576350014d3c4ae8cb7c..1652d64bf8fd17bcf8081d9a91adf28f51f32a87 100644
--- a/core/themes/olivero/css/components/wide-image.css
+++ b/core/themes/olivero/css/components/wide-image.css
@@ -47,15 +47,15 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .wide-image {
- margin-left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
+ margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .wide-image {
- margin-right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
+ margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
.wide-image {
- width: calc(var(--grid-col-width--md)*14 + var(--grid-gap--md)*13);
+ width: calc(var(--grid-col-count)*var(--grid-col-width) + var(--grid-gap-count)*var(--grid-gap));
margin-top: var(--sp2);
margin-bottom: var(--sp4)
}
@@ -64,45 +64,15 @@
@media (min-width: 62.5rem) {
[dir="ltr"] .wide-image {
- margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+ margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .wide-image {
- margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+ margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
.wide-image {
- width: calc(var(--grid-col-width--lg)*12 + var(--grid-gap--lg)*11)
-}
- }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .wide-image {
- margin-left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
- }
-
-[dir="rtl"] .wide-image {
- margin-right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
- }
-
-.wide-image {
- width: calc(var(--grid-col-width--nav)*12 + var(--grid-gap--nav)*11)
-}
- }
-
-@media (min-width: 90rem) {
-
-[dir="ltr"] .wide-image {
- margin-left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
- }
-
-[dir="rtl"] .wide-image {
- margin-right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
- }
-
-.wide-image {
- width: calc(var(--grid-col-width--max)*12 + var(--grid-gap--max)*11)
+ width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
}
}
@@ -111,28 +81,14 @@
@media (min-width: 62.5rem) {
.sidebar-grid .wide-image {
- width: calc(var(--grid-col-width--lg)*9 + var(--grid-gap--lg)*8)
-}
- }
-
-@media (min-width: 75rem) {
-
-.sidebar-grid .wide-image {
- width: calc(var(--grid-col-width--nav)*9 + var(--grid-gap--nav)*8)
+ width: calc(var(--grid-col-width)*9 + var(--grid-gap)*8)
}
}
@media (min-width: 81.25rem) {
.sidebar-grid .wide-image {
- width: calc(var(--grid-col-width--nav)*10 + var(--grid-gap--nav)*9)
-}
- }
-
-@media (min-width: 90rem) {
-
-.sidebar-grid .wide-image {
- width: calc(var(--grid-col-width--max)*10 + var(--grid-gap--max)*9)
+ width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9)
}
}
diff --git a/core/themes/olivero/css/components/wide-image.pcss.css b/core/themes/olivero/css/components/wide-image.pcss.css
index 74f95016160903fe7d783ab37ee1a3bf1aece3fe..241338708cd6a202e5671266698b942c33520415 100644
--- a/core/themes/olivero/css/components/wide-image.pcss.css
+++ b/core/themes/olivero/css/components/wide-image.pcss.css
@@ -12,43 +12,25 @@
margin-inline-end: 0;
@media (--grid-md) {
- width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md));
+ width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
margin-block: var(--sp2) var(--sp4);
- margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
+ margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
}
@media (--lg) {
- width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));
- margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
- }
-
- @media (--nav) {
- width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));
- margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
- }
-
- @media (--grid-max) {
- width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));
- margin-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));
+ width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+ margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
}
/* Ensure that image doesn't overlap sidebar. */
.sidebar-grid .wide-image {
@media (--lg) {
- width: calc(9 * var(--grid-col-width--lg) + 8 * var(--grid-gap--lg));
- }
-
- @media (--nav) {
- width: calc(9 * var(--grid-col-width--nav) + 8 * var(--grid-gap--nav));
+ width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap));
}
@media (--xl) {
- width: calc(10 * var(--grid-col-width--nav) + 9 * var(--grid-gap--nav));
- }
-
- @media (--grid-max) {
- width: calc(10 * var(--grid-col-width--max) + 9 * var(--grid-gap--max));
+ width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
}
}
diff --git a/core/themes/olivero/css/layout/grid.css b/core/themes/olivero/css/layout/grid.css
index 3041568acc143dcfcd3b8756c4f75fa2b770d632..318dd2ac3b5ef723b3a1cdf3d68de982963d3769 100644
--- a/core/themes/olivero/css/layout/grid.css
+++ b/core/themes/olivero/css/layout/grid.css
@@ -36,14 +36,6 @@
display: block;
}
-@media (min-width: 43.75rem) {
-
-.grid-full {
- grid-template-columns: repeat(var(--grid-col-count--md), minmax(0, 1fr));
- grid-column-gap: var(--grid-gap--md)
-}
- }
-
/*
If the .grid-full is nested within the following, apply the appropriate number of columns.
- .layout--content-narrow class.
@@ -54,7 +46,7 @@
.layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full {
- grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr))
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
}
}
@@ -62,7 +54,7 @@
.layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full {
- grid-template-columns: repeat(calc(var(--grid-col-count--lg) - 6), minmax(0, 1fr))
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr))
}
}
@@ -76,7 +68,7 @@
.layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full {
- grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr))
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
}
}
@@ -84,6 +76,6 @@
.layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full {
- grid-template-columns: repeat(calc(var(--grid-col-count--md) - 4), minmax(0, 1fr))
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr))
}
}
diff --git a/core/themes/olivero/css/layout/grid.pcss.css b/core/themes/olivero/css/layout/grid.pcss.css
index 7880c392b54d8d17875e28e7642e114a1ad16019..c4b586e175f1a582bb79e3713a545f17a962eff2 100644
--- a/core/themes/olivero/css/layout/grid.pcss.css
+++ b/core/themes/olivero/css/layout/grid.pcss.css
@@ -15,11 +15,6 @@
& .grid-full .grid-full {
display: block;
}
-
- @media (--grid-md) {
- grid-template-columns: repeat(var(--grid-col-count--md), minmax(0, 1fr));
- grid-column-gap: var(--grid-gap--md);
- }
}
/*
@@ -30,13 +25,11 @@
.layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full {
@media (--grid-md) {
- -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 2) ];
- grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr));
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
}
@media (--lg) {
- -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--lg) - 6) ];
- grid-template-columns: repeat(calc(var(--grid-col-count--lg) - 6), minmax(0, 1fr));
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr));
}
}
@@ -48,12 +41,10 @@
.layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full {
@media (--grid-md) {
- -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 2) ];
- grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr));
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
}
@media (--lg) {
- -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 4) ];
- grid-template-columns: repeat(calc(var(--grid-col-count--md) - 4), minmax(0, 1fr));
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
}
}
diff --git a/core/themes/olivero/css/layout/layout-builder-fourcol-section.css b/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
index 7253ae22cac971bcd9de20e21a9b19bcea598807..9ddc38d98b5f1bbd2e295fd0d99fa627b7f33338 100644
--- a/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
@@ -36,7 +36,7 @@
@media (min-width: 43.75rem) {
.layout--fourcol-section > .layout__region {
- flex-basis: calc(50% - var(--grid-gap--md)*0.5);
+ flex-basis: calc(50% - var(--grid-gap)*0.5);
flex-grow: 0;
flex-shrink: 0;
margin-bottom: 0
@@ -51,27 +51,27 @@
@media (min-width: 43.75rem) {
.layout--fourcol-section > .layout__region--first,
.layout--fourcol-section > .layout__region--second {
- margin-bottom: var(--grid-gap--md);
+ margin-bottom: var(--grid-gap);
}
[dir="ltr"] .layout--fourcol-section > .layout__region--first,[dir="ltr"]
.layout--fourcol-section > .layout__region--third {
- margin-right: calc(var(--grid-gap--md)*0.5)
+ margin-right: calc(var(--grid-gap)*0.5)
}
[dir="rtl"] .layout--fourcol-section > .layout__region--first,[dir="rtl"]
.layout--fourcol-section > .layout__region--third {
- margin-left: calc(var(--grid-gap--md)*0.5)
+ margin-left: calc(var(--grid-gap)*0.5)
}
[dir="ltr"] .layout--fourcol-section > .layout__region--second,[dir="ltr"]
.layout--fourcol-section > .layout__region--fourth {
- margin-left: calc(var(--grid-gap--md)*0.5)
+ margin-left: calc(var(--grid-gap)*0.5)
}
[dir="rtl"] .layout--fourcol-section > .layout__region--second,[dir="rtl"]
.layout--fourcol-section > .layout__region--fourth {
- margin-right: calc(var(--grid-gap--md)*0.5)
+ margin-right: calc(var(--grid-gap)*0.5)
}
}
@@ -82,7 +82,7 @@
@media (min-width: 62.5rem) {
.layout--fourcol-section > .layout__region {
- flex-basis: calc(25% - var(--grid-gap--md)*0.75);
+ flex-basis: calc(25% - var(--grid-gap)*0.75);
}
.layout--fourcol-section > .layout__region--first,
@@ -91,24 +91,24 @@
}
[dir="ltr"] .layout--fourcol-section > .layout__region--first {
- margin-right: calc(var(--grid-gap--md)*0.5)
+ margin-right: calc(var(--grid-gap)*0.5)
}
[dir="rtl"] .layout--fourcol-section > .layout__region--first {
- margin-left: calc(var(--grid-gap--md)*0.5)
+ margin-left: calc(var(--grid-gap)*0.5)
}
.layout--fourcol-section > .layout__region--second,
.layout--fourcol-section > .layout__region--third {
- margin-left: calc(var(--grid-gap--md)*0.5);
- margin-right: calc(var(--grid-gap--md)*0.5);
+ margin-left: calc(var(--grid-gap)*0.5);
+ margin-right: calc(var(--grid-gap)*0.5);
}
[dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
- margin-left: calc(var(--grid-gap--md)*0.5)
+ margin-left: calc(var(--grid-gap)*0.5)
}
[dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
- margin-right: calc(var(--grid-gap--md)*0.5)
+ margin-right: calc(var(--grid-gap)*0.5)
}
}
diff --git a/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css b/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
index cd7a73583110252385dd5f1903ca98a0338a1a12..012c2437cbe94cbdfaa59ef66a882d6fe9e2c962 100644
--- a/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
+++ b/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
@@ -14,7 +14,7 @@
margin-block-end: var(--grid-gap);
@media (--md) {
- flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
flex-grow: 0;
flex-shrink: 0;
margin-block-end: 0;
@@ -25,24 +25,24 @@
@media (--md) {
& > .layout__region--first,
& > .layout__region--second {
- margin-block-end: var(--grid-gap--md);
+ margin-block-end: var(--grid-gap);
}
& > .layout__region--first,
& > .layout__region--third {
- margin-inline-end: calc(var(--grid-gap--md) * 0.5);
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
}
& > .layout__region--second,
& > .layout__region--fourth {
- margin-inline-start: calc(var(--grid-gap--md) * 0.5);
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
}
}
/* Four column layout. */
@media (--lg) {
& > .layout__region {
- flex-basis: calc(25% - (var(--grid-gap--md) * 0.75));
+ flex-basis: calc(25% - (var(--grid-gap) * 0.75));
}
& > .layout__region--first,
@@ -51,16 +51,16 @@
}
& > .layout__region--first {
- margin-inline-end: calc(var(--grid-gap--md) * 0.5);
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
}
& > .layout__region--second,
& > .layout__region--third {
- margin-inline: calc(var(--grid-gap--md) * 0.5);
+ margin-inline: calc(var(--grid-gap) * 0.5);
}
& > .layout__region--fourth {
- margin-inline-start: calc(var(--grid-gap--md) * 0.5);
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
}
}
}
diff --git a/core/themes/olivero/css/layout/layout-builder-threecol-section.css b/core/themes/olivero/css/layout/layout-builder-threecol-section.css
index 9a670c2f66ce9aa535eff65e9b5bbd9a38577105..9caf4ff712f47b253e60a461c1eee778016ac5bb 100644
--- a/core/themes/olivero/css/layout/layout-builder-threecol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-threecol-section.css
@@ -44,51 +44,51 @@
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--threecol-section > .layout__region--first {
- margin-right: calc(var(--grid-gap--md)*0.5)
+ margin-right: calc(var(--grid-gap)*0.5)
}
[dir="rtl"] .layout--threecol-section > .layout__region--first {
- margin-left: calc(var(--grid-gap--md)*0.5)
+ margin-left: calc(var(--grid-gap)*0.5)
}
.layout--threecol-section > .layout__region--second {
- margin-left: calc(var(--grid-gap--md)*0.5);
- margin-right: calc(var(--grid-gap--md)*0.5);
+ margin-left: calc(var(--grid-gap)*0.5);
+ margin-right: calc(var(--grid-gap)*0.5);
}
[dir="ltr"] .layout--threecol-section > .layout__region--third {
- margin-left: calc(var(--grid-gap--md)*0.5)
+ margin-left: calc(var(--grid-gap)*0.5)
}
[dir="rtl"] .layout--threecol-section > .layout__region--third {
- margin-right: calc(var(--grid-gap--md)*0.5)
+ margin-right: calc(var(--grid-gap)*0.5)
}
.layout--threecol-section--25-50-25 > .layout__region--first,
.layout--threecol-section--25-50-25 > .layout__region--third {
- flex-basis: calc(25% - var(--grid-gap--md)*0.5);
+ flex-basis: calc(25% - var(--grid-gap)*0.5);
}
.layout--threecol-section--25-50-25 > .layout__region--second {
- flex-basis: calc(50% - var(--grid-gap--md));
+ flex-basis: calc(50% - var(--grid-gap));
}
.layout--threecol-section--25-25-50 > .layout__region--first,
.layout--threecol-section--25-25-50 > .layout__region--second {
- flex-basis: calc(25% - var(--grid-gap--md)*0.5);
+ flex-basis: calc(25% - var(--grid-gap)*0.5);
}
.layout--threecol-section--25-25-50 > .layout__region--third {
- flex-basis: calc(50% - var(--grid-gap--md));
+ flex-basis: calc(50% - var(--grid-gap));
}
.layout--threecol-section--50-25-25 > .layout__region--first {
- flex-basis: calc(50% - var(--grid-gap--md));
+ flex-basis: calc(50% - var(--grid-gap));
}
.layout--threecol-section--50-25-25 > .layout__region--second,
.layout--threecol-section--50-25-25 > .layout__region--third {
- flex-basis: calc(25% - var(--grid-gap--md)*0.5);
+ flex-basis: calc(25% - var(--grid-gap)*0.5);
}
.layout--threecol-section--33-34-33 > .layout__region--first,
.layout--threecol-section--33-34-33 > .layout__region--second,
.layout--threecol-section--33-34-33 > .layout__region--third {
- flex-basis: calc(33.33% - var(--grid-gap--md)*0.667);
+ flex-basis: calc(33.33% - var(--grid-gap)*0.667);
}
}
diff --git a/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css b/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css
index b9bb2c4b059b21f29077c6758b952ed58155d09d..afb669c67e921be1a26804d97b3a6fcb899e24ac 100644
--- a/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css
+++ b/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css
@@ -24,48 +24,48 @@
@media (--lg) {
.layout--threecol-section {
& > .layout__region--first {
- margin-inline-end: calc(var(--grid-gap--md) * 0.5);
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
}
& > .layout__region--second {
- margin-inline: calc(var(--grid-gap--md) * 0.5);
+ margin-inline: calc(var(--grid-gap) * 0.5);
}
& > .layout__region--third {
- margin-inline-start: calc(var(--grid-gap--md) * 0.5);
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
}
}
.layout--threecol-section--25-50-25 {
& > .layout__region--first,
& > .layout__region--third {
- flex-basis: calc(25% - (var(--grid-gap--md) * 0.5));
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
}
& > .layout__region--second {
- flex-basis: calc(50% - var(--grid-gap--md));
+ flex-basis: calc(50% - var(--grid-gap));
}
}
.layout--threecol-section--25-25-50 {
& > .layout__region--first,
& > .layout__region--second {
- flex-basis: calc(25% - (var(--grid-gap--md) * 0.5));
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
}
& > .layout__region--third {
- flex-basis: calc(50% - var(--grid-gap--md));
+ flex-basis: calc(50% - var(--grid-gap));
}
}
.layout--threecol-section--50-25-25 {
& > .layout__region--first {
- flex-basis: calc(50% - var(--grid-gap--md));
+ flex-basis: calc(50% - var(--grid-gap));
}
& > .layout__region--second,
& > .layout__region--third {
- flex-basis: calc(25% - (var(--grid-gap--md) * 0.5));
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
}
}
@@ -73,7 +73,7 @@
& > .layout__region--first,
& > .layout__region--second,
& > .layout__region--third {
- flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.667));
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
}
}
}
diff --git a/core/themes/olivero/css/layout/layout-builder-twocol-section.css b/core/themes/olivero/css/layout/layout-builder-twocol-section.css
index f7179d5af736324add40eb85e8dbba9aaef42716..1f3d68644dc71d98fe627a013f3ada65aa27e879 100644
--- a/core/themes/olivero/css/layout/layout-builder-twocol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-twocol-section.css
@@ -44,108 +44,108 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {
- margin-right: calc(var(--grid-gap--md)*0.5)
+ margin-right: calc(var(--grid-gap)*0.5)
}
[dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {
- margin-left: calc(var(--grid-gap--md)*0.5)
+ margin-left: calc(var(--grid-gap)*0.5)
}
.layout--twocol-section--50-50 > .layout__region--first {
- flex-basis: calc(50% - var(--grid-gap--md)*0.5);
+ flex-basis: calc(50% - var(--grid-gap)*0.5);
}
[dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
- margin-left: calc(var(--grid-gap--md)*0.5)
+ margin-left: calc(var(--grid-gap)*0.5)
}
[dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {
- margin-right: calc(var(--grid-gap--md)*0.5)
+ margin-right: calc(var(--grid-gap)*0.5)
}
.layout--twocol-section--50-50 > .layout__region--second {
- flex-basis: calc(50% - var(--grid-gap--md)*0.5);
+ flex-basis: calc(50% - var(--grid-gap)*0.5);
}
[dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
- margin-right: calc(var(--grid-gap--md)*0.3333)
+ margin-right: calc(var(--grid-gap)*0.3333)
}
[dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {
- margin-left: calc(var(--grid-gap--md)*0.3333)
+ margin-left: calc(var(--grid-gap)*0.3333)
}
.layout--twocol-section--33-67 > .layout__region--first {
- flex-basis: calc(33.33% - var(--grid-gap--md)*0.3333);
+ flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
}
[dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
- margin-left: calc(var(--grid-gap--md)*0.6666)
+ margin-left: calc(var(--grid-gap)*0.6666)
}
[dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {
- margin-right: calc(var(--grid-gap--md)*0.6666)
+ margin-right: calc(var(--grid-gap)*0.6666)
}
.layout--twocol-section--33-67 > .layout__region--second {
- flex-basis: calc(66.66% - var(--grid-gap--md)*0.6666);
+ flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
}
[dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
- margin-right: calc(var(--grid-gap--md)*0.6666)
+ margin-right: calc(var(--grid-gap)*0.6666)
}
[dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first {
- margin-left: calc(var(--grid-gap--md)*0.6666)
+ margin-left: calc(var(--grid-gap)*0.6666)
}
.layout--twocol-section--67-33 > .layout__region--first {
- flex-basis: calc(66.66% - var(--grid-gap--md)*0.6666);
+ flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
}
[dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
- margin-left: calc(var(--grid-gap--md)*0.3333)
+ margin-left: calc(var(--grid-gap)*0.3333)
}
[dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second {
- margin-right: calc(var(--grid-gap--md)*0.3333)
+ margin-right: calc(var(--grid-gap)*0.3333)
}
.layout--twocol-section--67-33 > .layout__region--second {
- flex-basis: calc(33.33% - var(--grid-gap--md)*0.3333);
+ flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
}
[dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
- margin-right: calc(var(--grid-gap--md)*0.25)
+ margin-right: calc(var(--grid-gap)*0.25)
}
[dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {
- margin-left: calc(var(--grid-gap--md)*0.25)
+ margin-left: calc(var(--grid-gap)*0.25)
}
.layout--twocol-section--25-75 > .layout__region--first {
- flex-basis: calc(25% - var(--grid-gap--md)*0.25);
+ flex-basis: calc(25% - var(--grid-gap)*0.25);
}
[dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
- margin-left: calc(var(--grid-gap--md)*0.75)
+ margin-left: calc(var(--grid-gap)*0.75)
}
[dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second {
- margin-right: calc(var(--grid-gap--md)*0.75)
+ margin-right: calc(var(--grid-gap)*0.75)
}
.layout--twocol-section--25-75 > .layout__region--second {
- flex-basis: calc(75% - var(--grid-gap--md)*0.75);
+ flex-basis: calc(75% - var(--grid-gap)*0.75);
}
[dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
- margin-right: calc(var(--grid-gap--md)*0.75)
+ margin-right: calc(var(--grid-gap)*0.75)
}
[dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {
- margin-left: calc(var(--grid-gap--md)*0.75)
+ margin-left: calc(var(--grid-gap)*0.75)
}
.layout--twocol-section--75-25 > .layout__region--first {
- flex-basis: calc(75% - var(--grid-gap--md)*0.75);
+ flex-basis: calc(75% - var(--grid-gap)*0.75);
}
[dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
- margin-left: calc(var(--grid-gap--md)*0.25)
+ margin-left: calc(var(--grid-gap)*0.25)
}
[dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second {
- margin-right: calc(var(--grid-gap--md)*0.25)
+ margin-right: calc(var(--grid-gap)*0.25)
}
.layout--twocol-section--75-25 > .layout__region--second {
- flex-basis: calc(25% - var(--grid-gap--md)*0.25);
+ flex-basis: calc(25% - var(--grid-gap)*0.25);
}
}
diff --git a/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css b/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css
index 59014f16f6d3fdcf7dbb75087c46d23cf43238a5..ea05bc6a6044293e284755bbbc33d245a04368c7 100644
--- a/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css
+++ b/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css
@@ -24,61 +24,61 @@
@media (--md) {
.layout--twocol-section--50-50 {
& > .layout__region--first {
- flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
- margin-inline-end: calc(var(--grid-gap--md) * 0.5);
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
}
& > .layout__region--second {
- flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
- margin-inline-start: calc(var(--grid-gap--md) * 0.5);
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
}
}
.layout--twocol-section--33-67 {
& > .layout__region--first {
- flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.3333));
- margin-inline-end: calc(var(--grid-gap--md) * 0.3333);
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+ margin-inline-end: calc(var(--grid-gap) * 0.3333);
}
& > .layout__region--second {
- flex-basis: calc(66.66% - (var(--grid-gap--md) * 0.6666));
- margin-inline-start: calc(var(--grid-gap--md) * 0.6666);
+ flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+ margin-inline-start: calc(var(--grid-gap) * 0.6666);
}
}
.layout--twocol-section--67-33 {
& > .layout__region--first {
- flex-basis: calc(66.66% - (var(--grid-gap--md) * 0.6666));
- margin-inline-end: calc(var(--grid-gap--md) * 0.6666);
+ flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+ margin-inline-end: calc(var(--grid-gap) * 0.6666);
}
& > .layout__region--second {
- flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.3333));
- margin-inline-start: calc(var(--grid-gap--md) * 0.3333);
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+ margin-inline-start: calc(var(--grid-gap) * 0.3333);
}
}
.layout--twocol-section--25-75 {
& > .layout__region--first {
- flex-basis: calc(25% - (var(--grid-gap--md) * 0.25));
- margin-inline-end: calc(var(--grid-gap--md) * 0.25);
+ flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+ margin-inline-end: calc(var(--grid-gap) * 0.25);
}
& > .layout__region--second {
- flex-basis: calc(75% - (var(--grid-gap--md) * 0.75));
- margin-inline-start: calc(var(--grid-gap--md) * 0.75);
+ flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+ margin-inline-start: calc(var(--grid-gap) * 0.75);
}
}
.layout--twocol-section--75-25 {
& > .layout__region--first {
- flex-basis: calc(75% - (var(--grid-gap--md) * 0.75));
- margin-inline-end: calc(var(--grid-gap--md) * 0.75);
+ flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+ margin-inline-end: calc(var(--grid-gap) * 0.75);
}
& > .layout__region--second {
- flex-basis: calc(25% - (var(--grid-gap--md) * 0.25));
- margin-inline-start: calc(var(--grid-gap--md) * 0.25);
+ flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+ margin-inline-start: calc(var(--grid-gap) * 0.25);
}
}
}
diff --git a/core/themes/olivero/css/layout/layout-content-narrow.css b/core/themes/olivero/css/layout/layout-content-narrow.css
index 5b392b301d9d0346bb91f190428b3829957e85fb..6b02444f0fc42c20253f03afa67307c03bc8271d 100644
--- a/core/themes/olivero/css/layout/layout-content-narrow.css
+++ b/core/themes/olivero/css/layout/layout-content-narrow.css
@@ -90,55 +90,22 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"] .layout--content-narrow .text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
- left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
+ left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"] .layout--content-narrow .text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
- right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
- }
- }
-
-@media (min-width: 62.5rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"] .layout--content-narrow .text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
- left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
- }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"] .layout--content-narrow .text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
- right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
- }
- }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"] .layout--content-narrow .text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
- left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
- }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"] .layout--content-narrow .text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
- right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
- }
- }
-
-@media (min-width: 90rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"] .layout--content-narrow .text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
- left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
- }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"] .layout--content-narrow .text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
- right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
+ right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
}
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
- left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
+ left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
- right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
+ right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
@@ -155,39 +122,6 @@
}
}
-@media (min-width: 62.5rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
- left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
- }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
- right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
- }
- }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
- left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
- }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
- right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
- }
- }
-
-@media (min-width: 90rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
- left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
- }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
- right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
- }
- }
-
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote,[dir="ltr"] .layout--content-narrow .text-content blockquote,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote {
@@ -199,37 +133,16 @@
}
.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
- width: calc(var(--grid-col-width--md)*10 + var(--grid-gap--md)*9);
+ width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9);
margin-top: var(--sp3);
margin-bottom: var(--sp3)
}
}
-@media (min-width: 62.5rem) {
-
-.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
- width: calc(var(--grid-col-width--lg)*10 + var(--grid-gap--lg)*9)
- }
- }
-
-@media (min-width: 75rem) {
-
-.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
- width: calc(var(--grid-col-width--nav)*10 + var(--grid-gap--nav)*9)
- }
- }
-
-@media (min-width: 90rem) {
-
-.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
- width: calc(var(--grid-col-width--max)*10 + var(--grid-gap--max)*9)
- }
- }
-
@media (min-width: 43.75rem) {
.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
- width: calc(var(--grid-col-width--md)*10 + var(--grid-gap--md)*9);
+ width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9);
margin-top: var(--sp3);
margin-bottom: var(--sp3)
}
@@ -238,29 +151,15 @@
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"] .layout--content-narrow .text-content pre,[dir="ltr"] .layout--pass--content-narrow > *.text-content pre,[dir="ltr"] .layout--pass--content-narrow > * .text-content pre {
- margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+ margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"] .layout--content-narrow .text-content pre,[dir="rtl"] .layout--pass--content-narrow > *.text-content pre,[dir="rtl"] .layout--pass--content-narrow > * .text-content pre {
- margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+ margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
}
.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
- width: calc(var(--grid-col-width--lg)*12 + var(--grid-gap--lg)*11)
- }
- }
-
-@media (min-width: 75rem) {
-
-.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
- width: calc(var(--grid-col-width--nav)*12 + var(--grid-gap--nav)*11)
- }
- }
-
-@media (min-width: 90rem) {
-
-.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
- width: calc(var(--grid-col-width--max)*12 + var(--grid-gap--max)*11)
+ width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
}
}
diff --git a/core/themes/olivero/css/layout/layout-content-narrow.pcss.css b/core/themes/olivero/css/layout/layout-content-narrow.pcss.css
index 825b5ffb041b589853d7a36b745e79c517e1e967..25e271247014ff4388782cbba2d51075ba09ec03 100644
--- a/core/themes/olivero/css/layout/layout-content-narrow.pcss.css
+++ b/core/themes/olivero/css/layout/layout-content-narrow.pcss.css
@@ -54,79 +54,35 @@
& blockquote {
&:before {
@media (--grid-md) {
- inset-inline-start: calc(-1 * (var(--grid-col-width--md) + var(--grid-gap--md)));
- }
-
- @media (--lg) {
- inset-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
- }
-
- @media (--nav) {
- inset-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
- }
-
- @media (--grid-max) {
- inset-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));
+ inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
}
&:after {
@media (--grid-md) {
- inset-inline-start: calc(-1 * (var(--grid-col-width--md) + var(--grid-gap--md)));
+ inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
width: var(--sp);
height: calc(100% - 45px);
margin-inline-start: 2px;
}
-
- @media (--lg) {
- inset-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
- }
-
- @media (--nav) {
- inset-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
- }
-
- @media (--grid-max) {
- inset-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));
- }
}
@media (--grid-md) {
- width: calc(10 * var(--grid-col-width--md) + 9 * var(--grid-gap--md));
+ width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
margin-block: var(--sp3);
padding-inline-start: 0;
}
-
- @media (--lg) {
- width: calc(10 * var(--grid-col-width--lg) + 9 * var(--grid-gap--lg));
- }
-
- @media (--nav) {
- width: calc(10 * var(--grid-col-width--nav) + 9 * var(--grid-gap--nav));
- }
-
- @media (--grid-max) {
- width: calc(10 * var(--grid-col-width--max) + 9 * var(--grid-gap--max));
- }
}
& pre {
@media (--grid-md) {
- width: calc(10 * var(--grid-col-width--md) + 9 * var(--grid-gap--md));
+ width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
margin-block: var(--sp3);
}
@media (--lg) {
- width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));
- margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
- }
-
- @media (--nav) {
- width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));
- }
-
- @media (--grid-max) {
- width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));
+ width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+ margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
}
}
diff --git a/core/themes/olivero/css/layout/layout.css b/core/themes/olivero/css/layout/layout.css
index 6c82f8f8d6bd1579101d81b0fb8f6eec0fe1a200..941dfec0a65eb650dd7c8dec9b1a10788cb2208d 100644
--- a/core/themes/olivero/css/layout/layout.css
+++ b/core/themes/olivero/css/layout/layout.css
@@ -27,17 +27,9 @@
width: 100%;
max-width: var(--max-width);
padding-left: var(--container-padding);
- padding-right: var(--container-padding)
+ padding-right: var(--container-padding);
}
-@media (min-width: 75rem) {
-
-.container {
- padding-left: var(--container-padding-nav);
- padding-right: var(--container-padding-nav)
-}
- }
-
.page-wrapper {
max-width: var(--max-bg-color);
background: var(--color--white);
@@ -57,11 +49,11 @@
@media (min-width: 75rem) {
[dir="ltr"] .main-content {
- margin-right: auto
+ margin-right: auto;
}
[dir="rtl"] .main-content {
- margin-left: auto
+ margin-left: auto;
}
.main-content {
diff --git a/core/themes/olivero/css/layout/layout.pcss.css b/core/themes/olivero/css/layout/layout.pcss.css
index e4eac76d5a268798ff362ecf5d4c6733ed4f31d9..170778c727d8489e5f58b66a4eb67f5917be50f1 100644
--- a/core/themes/olivero/css/layout/layout.pcss.css
+++ b/core/themes/olivero/css/layout/layout.pcss.css
@@ -9,10 +9,6 @@
width: 100%;
max-width: var(--max-width);
padding-inline: var(--container-padding);
-
- @media (--nav) {
- padding-inline: var(--container-padding-nav);
- }
}
.page-wrapper {
diff --git a/core/themes/olivero/css/layout/region-content-below.css b/core/themes/olivero/css/layout/region-content-below.css
index 27eb5c890cec1d091eaaad3db6c3aea6e5d2814e..096f8c5774794bf66d55789d33acb8788224d154 100644
--- a/core/themes/olivero/css/layout/region-content-below.css
+++ b/core/themes/olivero/css/layout/region-content-below.css
@@ -31,15 +31,15 @@
}
[dir="ltr"] .region--content-below > * {
- margin-right: var(--grid-gap--md)
+ margin-right: var(--grid-gap)
}
[dir="rtl"] .region--content-below > * {
- margin-left: var(--grid-gap--md)
+ margin-left: var(--grid-gap)
}
.region--content-below > * {
- flex-basis: calc(50% - var(--grid-gap--md)/2);
+ flex-basis: calc(50% - var(--grid-gap)/2);
flex-grow: 1;
flex-shrink: 0
}
@@ -57,17 +57,17 @@
@media (min-width: 43.75rem) {
.region--content-below > * {
- flex-basis: calc(33.33% - var(--grid-gap--md)*0.667)
+ flex-basis: calc(33.33% - var(--grid-gap)*0.667)
}
[dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"]
.region--content-below > *:last-child {
- margin-right: var(--grid-gap--md)
+ margin-right: var(--grid-gap)
}
[dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"]
.region--content-below > *:last-child {
- margin-left: var(--grid-gap--md)
+ margin-left: var(--grid-gap)
}
[dir="ltr"] .region--content-below > *:nth-child(3n),[dir="ltr"]
diff --git a/core/themes/olivero/css/layout/region-content-below.pcss.css b/core/themes/olivero/css/layout/region-content-below.pcss.css
index 6d16436bb956ac0485b1a6c29e6de6d1e5a8abf1..8fbc8373f750ecec69500130810521a54c14aac6 100644
--- a/core/themes/olivero/css/layout/region-content-below.pcss.css
+++ b/core/themes/olivero/css/layout/region-content-below.pcss.css
@@ -11,10 +11,10 @@
flex-wrap: wrap;
& > * {
- flex-basis: calc(50% - (var(--grid-gap--md) / 2));
+ flex-basis: calc(50% - (var(--grid-gap) / 2));
flex-grow: 1;
flex-shrink: 0;
- margin-inline-end: var(--grid-gap--md);
+ margin-inline-end: var(--grid-gap);
&:nth-child(2n),
&:last-child {
@@ -25,11 +25,11 @@
@media (--md) {
& > * {
- flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.667));
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
&:nth-child(2n),
&:last-child {
- margin-inline-end: var(--grid-gap--md);
+ margin-inline-end: var(--grid-gap);
}
&:nth-child(3n),