Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3255119 by mherchel, andy-blum: Olivero: Use CSS custom properties to for the grid related variables

merge-requests/1589/head
Lauri Eskola 2021-12-22 16:36:07 +02:00
parent 3eb8a34460
commit 4715bbc9c0
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
30 changed files with 314 additions and 693 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
core/themes/olivero/css/base/variables.css
View File

@ -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.
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: 0.9375rem; /* 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);
--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. */
}
/* 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);
@media (min-width: 43.75rem) {
/* 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));
:root {
--grid-col-count: 14;
--grid-gap: var(--sp2);
}
}
/* 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: 62.5rem) {
:root {
--scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
}
}
@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);

91
core/themes/olivero/css/base/variables.pcss.css
View File

@ -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);
--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. */
/* 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);
@media (--md) {
--grid-col-count: 14;
--grid-gap: var(--sp2);
}
/* 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));
@media (--lg) {
--scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
}
/* 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 (--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));

29
core/themes/olivero/css/components/content-moderation.css
View File

@ -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)
}
}

15
core/themes/olivero/css/components/content-moderation.pcss.css
View File

@ -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;
}
}

64
core/themes/olivero/css/components/embedded-media.css
View File

@ -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);
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--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);
}
[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);
}
}

23
core/themes/olivero/css/components/embedded-media.pcss.css
View File

@ -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))));
}
}

4
core/themes/olivero/css/components/header-navigation.css
View File

@ -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)
}
}

4
core/themes/olivero/css/components/header-navigation.pcss.css
View File

@ -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)));
}
}

4
core/themes/olivero/css/components/header-search-wide.css
View File

@ -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 */

4
core/themes/olivero/css/components/header-search-wide.pcss.css
View File

@ -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 */

35
core/themes/olivero/css/components/header-site-branding.css
View File

@ -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%);
}

16
core/themes/olivero/css/components/header-site-branding.pcss.css
View File

@ -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));
}
}

46
core/themes/olivero/css/components/node-teaser.css
View File

@ -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);

24
core/themes/olivero/css/components/node-teaser.pcss.css
View File

@ -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 {

60
core/themes/olivero/css/components/wide-image.css
View File

@ -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)
}
}

30
core/themes/olivero/css/components/wide-image.pcss.css
View File

@ -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));
}
}

16
core/themes/olivero/css/layout/grid.css
View File

@ -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))
}
}

17
core/themes/olivero/css/layout/grid.pcss.css
View File

@ -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));
}
}

26
core/themes/olivero/css/layout/layout-builder-fourcol-section.css
View File

@ -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)
}
}

16
core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
View File

@ -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);
}
}
}

26
core/themes/olivero/css/layout/layout-builder-threecol-section.css
View File

@ -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);
}
}

20
core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css
View File

@ -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));
}
}
}

60
core/themes/olivero/css/layout/layout-builder-twocol-section.css
View File

@ -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);
}
}

40
core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css
View File

@ -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);
}
}
}

119
core/themes/olivero/css/layout/layout-content-narrow.css
View File

@ -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)
}
}

56
core/themes/olivero/css/layout/layout-content-narrow.pcss.css
View File

@ -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)));
}
}
}

14
core/themes/olivero/css/layout/layout.css
View File

@ -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 {

4
core/themes/olivero/css/layout/layout.pcss.css
View File

@ -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 {

12
core/themes/olivero/css/layout/region-content-below.css
View File

@ -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"]

8
core/themes/olivero/css/layout/region-content-below.pcss.css
View File

@ -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),