/** * COPYRIGHT 2024 BY ROBERT CURA. ALL RIGHTS RESERVED * AUTHOR: ROBERT CURA * INCEPTION: 2024APR01 * DESCRIPTION: This file contains the common overrides to grid settings **/ /*************************************************************************** * * * GRID OVERRIDES: COMMON AMONG THE SUBTHEMES ie DEFAULTS * *************************************************************************** */ .xrc-paragraph { --xrc-swap-para--padding-top: 0; --xrc-swap-para--padding-right: 0; --xrc-swap-para--padding-bottom: 0; --xrc-swap-para--padding-left: 0; } /*************************************************************************** * * GRID AREA SIZING *************************************************************************** */ /** top right bottom left: 20 6 20 6 **/ /*:root,*/ /*.xrc-grid-ovrd--padd-dflt, xrc-grid-ovrd--padd-dflt*/ :root { --xrc-dflt-grid--container-cols: 6fr repeat(14, 1fr) 6fr; --xrc-dflt-grid--container-rows: 20rem auto auto auto auto auto 20rem; } .xrc-grid-ovrd--padd-dflt, .xrc-grid-ovrd--padd-20-6-20-6 { --xrc-swap-grid--container-cols: 6fr repeat(14, 1fr) 6fr; --xrc-swap-grid--container-rows: 20rem auto auto auto auto auto 20rem; } /** top, right, bottom, left: 0 2 0 2 **/ .xrc-grid-ovrd--padd-0-2-0-2 { --xrc-swap-grid--container-cols: 2fr repeat(14, 1fr) 2fr; /* RC: left 2fr, right 2fr */ --xrc-swap-grid--container-rows: 0rem auto auto auto auto auto 0rem; /* RC: top 0, bottom 0 */ } .xrc-grid-ovrd--padd-2-3-2-3 { --xrc-swap-grid--container-cols: 3fr repeat(14, 1fr) 3fr; /* RC: left 2fr, right 2fr */ --xrc-swap-grid--container-rows: 2rem auto auto auto auto auto 2rem; /* RC: top 0, bottom 0 */ --xrc-swap-x02-grid--gap-cols : 2.0rem; --xrc-swap-x02-grid--gap-rows : 3.0rem; } .xrc-grid-ovrd--padd-9-6-9-6 { --xrc-swap-grid--container-cols: 6fr repeat(14, 1fr) 6fr; /* RC: left 2fr, right 2fr */ --xrc-swap-grid--container-rows: 9rem auto auto auto auto auto 9rem; /* RC: top 0, bottom 0 */ --xrc-swap-x02-grid--gap-cols : 2.0rem; --xrc-swap-x02-grid--gap-rows : 3.0rem; } /*************************************************************************** * * COMMON DEFINITIONS USED FOR CONTENT PARAGRAPHS *************************************************************************** */ /*-------------------------------------------------------------------------- */ /* 1. DEFINE THE GRID AREA MAP /*-------------------------------------------------------------------------- */ .xrc-grid, .xrc-grid--ept > .ept-container { --xrc-swap-grid-template--display : grid; } .xrc-grid--container, .xrc-grid--ept > .ept-container { --xrc-dflt-xval-grid--area : var(--xrc-grid-area-03-small--cols-one-01); --xrc-dflt-xval-grid--cols : 1rem 1fr 1rem; --xrc-dflt-xval-grid--rows : 2rem auto auto auto auto auto 2rem; --xrc-dflt-xval-grid--gap-cols : 1.0rem; --xrc-dflt-xval-grid--gap-rows : 1.5rem; --xrc-dflt-xval-grid--align-items : center; --xrc-dflt-xval-grid--justify-items : center; } /*-------------------------------------------------------------------------- */ /* 2. SWAP THE VALUES /*-------------------------------------------------------------------------- */ .xrc-grid--ept > .ept-container, .xrc-grid--container.xrc-paragraph { --xrc-swap-grid-template--areas : var(--xrc-swap-xval-grid--area, var(--xrc-dflt-xval-grid--area )); --xrc-swap-grid-template--columns : var(--xrc-swap-xval-grid--cols, var(--xrc-dflt-xval-grid--cols )); --xrc-swap-grid-template--rows : var(--xrc-swap-xval-grid--rows, var(--xrc-dflt-xval-grid--rows )); --xrc-swap-grid-template--column-gap : var(--xrc-swap-xval-grid--gap-cols, var(--xrc-dflt-xval-grid--gap-cols )); --xrc-swap-grid-template--row-gap : var(--xrc-swap-xval-grid--gap-rows, var(--xrc-dflt-xval-grid--gap-rows )); --xrc-swap-grid-template--align-items : var(--xrc-swap-xval-grid--align-items, var(--xrc-dflt-xval-grid--align-items )); --xrc-swap-grid-template--justify-items : var(--xrc-swap-xval-grid--justify-items, var(--xrc-dflt-xval-grid--justify-items )); /*--xrc-swap-grid-template--align-content :*/ /*--xrc-swap-grid-template--justify-content:*/ /*--xrc-swap-grid-template--auto-columns :*/ /*--xrc-swap-grid-template--auto-rows :*/ } /*************************************************************************** * * * RESPONSIVE LAYOUT FOR PARAGRAPH * *************************************************************************** */ /*************************************************************************** * * LAYOUT ASSIGNMENTS/DEFINITIONS *************************************************************************** */ /*--------------------------------------------------------------------------** * INSTRUCTIONS FOR ADDING NEW LAYOUT * 1. ADD AN ENTRY IN THE TAXONOMY WITH A DESIRED CLASS-NAME * 2. Add a new area map in the xrc_variables--defaults.css file make sure * to use standard GRID-TEMPLATE-AREA names * 3. Add the area into one of the CSS elements below. This will be used * in the responsive @media items that follow. Sync with the CLASS selector * 4. Format to Use: * --xrc-swap-xval-grid--area: var( .ept-container { /* RC: grid is in ept-container for ept paragraphs */ --xrc-swap-xval-grid--area : var(--xrc-grid-area-16-large--cols-two-left-01); /*--xrc-swap-xval-grid--area-map : var(--xrc-grid-area-16-large--cols-two-left-01);*/ } .xrc-para-ovrd--layout-cols-two-right-01.xrc-grid--container, .xrc-para-ovrd--layout-cols-two-right-01.xrc-grid--ept > .ept-container { /* RC: grid is in ept-container for ept paragraphs */ --xrc-swap-xval-grid--area : var(--xrc-grid-area-16-large--cols-two-right-01); /*--xrc-swap-xval-grid--area-map : var(--xrc-grid-area-16-large--cols-two-right-01);*/ } .xrc-para-ovrd--layout-minimalist-left-01.xrc-grid--container, .xrc-para-ovrd--layout-minimalist-left-01.xrc-grid--ept > .ept-container, .xrc-para-ovrd--minimalist-01.xrc-grid--container, .xrc-para-ovrd--minimalist-01.xrc-grid--ept > .ept-container { --xrc-swap-xval-grid--area : var(--xrc-grid-area-16-wide--minimalist-left-01); /*--xrc-swap-xval-grid--area-map : var(--xrc-grid-area-16-wide--minimalist-left-01);*/ } .xrc-para-ovrd--layout-minimalist-right-01.xrc-grid--container, .xrc-para-ovrd--layout-minimalist-right-01.xrc-grid--ept > .ept-container { --xrc-swap-xval-grid--area : var(--xrc-grid-area-16-wide--minimalist-right-01); /*--xrc-swap-xval-grid--area-map : var(--xrc-grid-area-16-wide--minimalist-right-01);*/ } .xrc-para-ovrd--layout-text-heavy-01.xrc-grid--container, .xrc-para-ovrd--layout-text-heavy-01.xrc-grid--ept > .ept-container { --xrc-swap-xval-grid--area : var(--xrc-grid-area-16-large--cols-two-left-02); /*--xrc-swap-xval-grid--area-map : var(--xrc-grid-area-16-large--cols-two-left-02);*/ } .xrc-para-ovrd--layout-text-heavy-02.xrc-grid--container, .xrc-para-ovrd--layout-text-heavy-02.xrc-grid--ept > .ept-container { --xrc-swap-xval-grid--area : var(--xrc-grid-area-16-large--cols-two-right-02); /*--xrc-swap-xval-grid--area-map : var(--xrc-grid-area-16-large--cols-two-right-02);*/ } .xrc-para-ovrd--layout-xrc-para-type-lead-01.xrc-grid--container, .xrc-para-ovrd--layout-xrc-para-type-lead-01.xrc-grid--ept > .ept-container { --xrc-swap-xval-grid--area : var(--xrc-grid-area-16-wide--para-type-lead-01); /*--xrc-swap-xval-grid--area-map : var(--xrc-grid-area-16-wide--para-type-lead-01);*/ } .xrc-para-ovrd-layout-text-only-01.xrc-grid--container, .xrc-para-ovrd-layout-text-only-01.xrc-grid--ept > .ept-container { --xrc-swap-xval-grid--area : var(--xrc-grid-area-16-wide--para-text-only); } } /*-------------------------------------------------------------------------- */ /* 4. ADJUST THE GRID VALUES FOR RESPONSIVE LAYOUT /*-------------------------------------------------------------------------- */ @media(min-width: 10.00rem) { } /* XRC MOD: KNOWN AS SIZE: XSMALL: 500px */ @media(min-width:31.25rem) { } /* XRC MOD: KNOWN AS SIZE: SMALL: 700px */ @media(min-width:43.75rem) { } /* XRC MOD: KNOWN AS SIZE: MEDIUM: 1000px */ @media(min-width:62.5rem) { /** TRIGGER THE CHANGE IN MAP AREA **/ .xrc-grid.xrc-paragraph, .xrc-grid--ept > .ept-container { /*--xrc-swap-xval-grid--area: var(--xrc-swap-xval-grid--area-map);*/ --xrc-swap-xval-grid--cols: var(--xrc-swap-grid--container-cols); --xrc-swap-xval-grid--rows: var(--xrc-swap-grid--container-rows); } } /* XRC MOD: KNOWN AS SIZE: LARGE: 1200px */ @media(min-width:75rem) { } /* XRC MOD: KNOWN AS SIZE: XLARGE: 1440px */ @media(min-width:90rem) { } /*************************************************************************** * * * XRC-GRID--ITEM CUSTOMIZATIONS * *************************************************************************** */ /*-------------------------------------------------------------------------- */ /* 3. PLACEMENT: ASSIGN THE ELEMENTS OF THE PARAGRAPH TYPE INTO THE GRID /*-------------------------------------------------------------------------- */ /*-------------------------------------------------------------------------- */ /* DEFINE THE ELEMENT ASSIGNMENTS HERE (GRID ITEMS) /*-------------------------------------------------------------------------- */ /*.xrc-grid--ept > .ept-container > h2, .xrc-grid--ept > .ept-container > .xrc-grid-item--ept-image, .xrc-grid--ept > .ept-container > .xrc-grid-item--ept-image-caption, .xrc-grid--item.xrc-grid-item--xrc-para-fldx-title-fmtd, .xrc-grid--item.xrc-grid-item--xrc-para-fldx-image-dflt, .xrc-grid--item.xrc-grid-item--xrc-para-fldx-ovrd-caption { --xrc-swap-grid-item--justify-self : stretch; }*/ .xrc-grid--ept > .ept-container > h2, .xrc-grid-item--xrc-para-fldx-title.xrc-grid--item, .xrc-grid-item--xrc-para-fldx-title-fmtd.xrc-grid--item { --xrc-swap-grid-item--area : xtx1; /*--xrc-swap-grid-item--area : xtx1-start / xtx1-start / xtx1-end / xtx1-end;*/ --xrc-swap-grid-item--align-self : end; } .xrc-grid--ept > .ept-container > .xrc-grid--item.xrc-grid-item--ept-image, .xrc-grid--item.xrc-grid-item--xrc-para-fldx-image-dflt { --xrc-swap-grid-item--area : ximg; /*--xrc-swap-grid-item--area : ximg-start / ximg-start / span ximg-end / span ximg-end;*/ --xrc-swap-grid-item--align-self : stretch; } .xrc-grid--ept > .ept-container > .xrc-grid-item--ept-image-caption, .xrc-grid--item.xrc-grid-item--xrc-para-fldx-text-01, .xrc-grid--item.xrc-grid-item--xrc-para-fldx-ovrd-caption, .xrc-grid--item.xrc-grid-item--xrc-para-fldx-caption-fmtd { --xrc-swap-grid-item--area : xtx2; --xrc-swap-grid-item--align-self : start; } .xrc-grid--ept > .ept-container > .xrc-grid-item--ept-text { --xrc-swap-grid-item--area : xtx2; --xrc-swap-grid-item--align-self : start; } .xrc-grid--ept > .ept-container > .xrc-grid-item--ept-image-gallery { --xrc-swap-grid-item--area : xtx3; --xrc-swap-grid-item--align-self : stretch; } /*-------------------------------------------------------------------------- */ /* LEAD PARAGRAPH CUSTOMIZATIONS (XRC-PARA-TYPE-LEAD-01) /*-------------------------------------------------------------------------- */ .xrc-grid--xrc-para-type-lead-01 .xrc-grid--item.xrc-item--xrc-para-fldx-title-fmtd { --xrc-swap-grid-item--area : xtx1-start / xtx1-start / span xtx2-end / span ximg-end; --xrc-swap-grid-item--align-self : stretch; --xrc-swap-grid-item--justify-self : stretch; --xrc-swap-grid-item--z-index : 2; } .xrc-grid--xrc-para-type-lead-01 .xrc-grid--item.xrc-para-decor--rect-01 { --xrc-swap-grid-item--area : xl01-start / xl01-start / xl01-end / xl01-end; height: 10rem; width: 1rem; background-color: orange; } /*-------------------------------------------------------------------------- */ /* WEBFORM CUSTOMIZATIONS /*-------------------------------------------------------------------------- */ .xrc-grid--ept > .ept-container > .xrc-grid-item--ept-tiles { --xrc-swap-grid-item--area : xtx3; --xrc-swap-grid-item--align-self : start; } .xrc-grid--ept > .ept-container > .xrc-grid-item--ept-webform-form { --xrc-swap-grid-item--area : xtx3; --xrc-swap-grid-item--align-self : start; } /*-------------------------------------------------------------------------- */ /* DESCENDANT ELEMENTS CUSTOMIZATIONS (ALIGNMENTS, WIDTHS, HEIGHTS, ETC.) /*-------------------------------------------------------------------------- */ .xrc-grid--ept > .ept-container > .xrc-grid-item--ept-image img, .xrc-grid--item.xrc-grid-item--xrc-para-fldx-image-dflt img { float: right; max-width: 100%; width: 100%; height: auto; /*aspect-ratio: 1;*/ /* width: 100%; height: 100%;*/ } .xrc-para-ovrd--layout-cols-two-right-01.xrc-grid--ept > .ept-container > .xrc-grid-item--ept-image img, .xrc-para-ovrd--layout-cols-two-right-01 .xrc-grid--item.xrc-grid-item--xrc-para-fldx-image-dflt img { float: left; max-width: 100%; } /** FOR FULL EDGE TO EDGE TREATMENT OF PHOTOGRAPHS **/ .xrc-paragraph.ept-edge-to-edge { width: 100%; height: 100vw; /* RC: THIS WILL FORCE BACKGROUND IMAGE TO FULL SIZE */ } .xrc-grid--panel-01 { display: none; } /*************************************************************************** * * * CUSTOMIZATION OF PARAGRAPH FIELDS * *************************************************************************** */ .xrc-grid-item--ept-text, .xrc-grid-item--xrc-para-fldx-title, .xrc-grid-item--xrc-para-fldx-title-fmtd, .xrc-grid-item--xrc-para-fldx-caption-fmtd { --xrc-swap-grid-item--z-index: 2; /*z-index: 2;*/ } .xrc-grid-item--ept-image, .xrc-grid-item--xrc-para-fldx-image-dflt { --xrc-swap-grid-item--z-index: 0; /*z-index: 1;*/ }