/** * COPYRIGHT 2024 BY ROBERT CURA. ALL RIGHTS RESERVED * AUTHOR: ROBERT CURA * INCEPTION: 2024MAR21 * DESCRIPTION: X05 Paragraph Overrides to GRID FRAMEWORK **/ /*************************************************************************** * * * X01 CUSTOMIZATION FOR PARAGRAPHS * *************************************************************************** */ /*.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; }*/ /*************************************************************************** * * COMMON DEFINITIONS USED FOR CONTENT PARAGRAPHS *************************************************************************** */ /*-------------------------------------------------------------------------- */ /* 1. DEFINE THE GRID AREA MAP /*-------------------------------------------------------------------------- */ /*.xrc-grid.xrc-paragraph, .xrc-grid--ept > .ept-container { --xrc-swap-grid-template--display : grid; }*/ /*.xrc-grid--container.xrc-paragraph, .xrc-grid--ept > .ept-container { --xrc-swap-xval-grid--area : var(--xrc-grid-area-03-small--cols-one-01); --xrc-swap-xval-grid--cols : 1rem 1fr 1rem; --xrc-swap-xval-grid--rows : 2rem auto auto auto auto auto 2rem; --xrc-swap-xval-grid--gap-cols : 1.0rem; --xrc-swap-xval-grid--gap-rows : 1.5rem; --xrc-swap-xval-grid--align-items : center; --xrc-swap-xval-grid--justify-items : center; }*/ /*.xrc-grid--ept > .ept-container, .xrc-grid.xrc-paragraph { --xrc-swap-grid-template--display : grid; } .xrc-grid--ept > .ept-container, .xrc-grid.xrc-paragraph { --xrc-swap-x01-grid--area : var(--xrc-grid-area-03-small--cols-one-01); --xrc-swap-x01-grid--cols : 1rem 1fr 1rem; --xrc-swap-x01-grid--rows : 2rem auto auto auto auto auto 2rem; --xrc-swap-x01-grid--gap-cols : 1.0rem; --xrc-swap-x01-grid--gap-rows : 1.5rem; --xrc-swap-x01-grid--align-items : center; --xrc-swap-x01-grid--justify-items : center; }*/ /*-------------------------------------------------------------------------- */ /* 2. SWAP THE VALUES /*-------------------------------------------------------------------------- */ /*.xrc-grid--ept > .ept-container, .xrc-grid--container.xrc-paragraph { --xrc-swap-grid-template--columns : var(--xrc-swap-x01-grid--cols); --xrc-swap-grid-template--rows : var(--xrc-swap-x01-grid--rows); --xrc-swap-grid-template--areas : var(--xrc-swap-x01-grid--area); --xrc-swap-grid-template--column-gap : var(--xrc-swap-x01-grid--gap-cols); --xrc-swap-grid-template--row-gap : var(--xrc-swap-x01-grid--gap-rows); --xrc-swap-grid-template--align-items : var(--xrc-swap-x01-grid--align-items); --xrc-swap-grid-template--justify-items : var(--xrc-swap-x01-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 : }*/ /*-------------------------------------------------------------------------- */ /* 3. PLACEMENT: ASSIGN THE ELEMENTS OF THE PARAGRAPH TYPE INTO THE GRID /*-------------------------------------------------------------------------- */ /*.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-start / xtx1-start / xtx1-end / xtx1-end; --xrc-swap-grid-item--align-self : end; } .xrc-grid--ept > .ept-container > .xrc-grid-item--ept-image, .xrc-grid--item.xrc-grid-item--xrc-para-fldx-image-dflt { --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-ovrd-caption { --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 : 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%; } .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%; }*/ /*************************************************************************** * * 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. * 4. Format to Use: * --xrc-swap-x01-grid--area-map: var( .ept-container { RC: grid is in ept-container for ept paragraphs --xrc-swap-x01-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-x01-grid--area-map : var(--xrc-grid-area-16-large--cols-two-right-01); } .xrc-para-ovrd--minimalist-01.xrc-grid--container, .xrc-para-ovrd--minimalist-01.xrc-grid--ept > .ept-container { --xrc-swap-x01-grid--area-map : var(--xrc-grid-area-16-wide--minimalist-left-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-x01-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-x01-grid--area-map : var(--xrc-grid-area-16-large--cols-two-right-02); }*/ /*-------------------------------------------------------------------------- */ /* LAYOUT ADJUSTMENTS. /* :ROOT TAKES PRECEDENCE IF NO OTHER SPECIFICATIONS ARE PRESENT. /*-------------------------------------------------------------------------- */ /*************************************************************************** * * RESPONSIVE LAYOUT FOR PARAGRAPH *************************************************************************** */ /*-------------------------------------------------------------------------- */ /* 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) { /* :root{ --xrc-swap-xval-grid--cols: var(--xrc-dflt-grid--container-cols); --xrc-swap-xval-grid--rows: var(--xrc-dflt-grid--container-rows); } -------------------------------------------------------------------------- REDEFINE MAP OF AREA /*-------------------------------------------------------------------------- :root { --xrc-swap-x01-grid--cols : var(--xrc-dflt-grid--container-cols); --xrc-swap-x01-grid--rows : var(--xrc-dflt-grid--container-rows); } .xrc-grid-ovrd--padd-0-2-0-2.xrc-grid.xrc-grid--container, .xrc-grid-ovrd--padd-0-2-0-2.xrc-grid--ept > .ept-container { --xrc-swap-xval-grid--cols: var(--xrc-swap-grid--container-cols); --xrc-swap-xval-grid--rows: var(--xrc-swap-grid--container-rows); }*/ /* .xrc-grid.xrc-paragraph, .xrc-grid--ept > .ept-container { --xrc-swap-xval-grid--area : var(--xrc-swap-x01-grid--area-map); --xrc-swap-xval-grid--cols : var(--xrc-dflt-grid--container-cols); --xrc-swap-xval-grid--rows : var(--xrc-dflt-grid--container-rows); --xrc-swap-xval-grid--gap-cols : 1.0rem; --xrc-swap-xval-grid--gap-rows : 1.5rem; --xrc-swap-x01-grid--cols : 3fr repeat(14, 1fr) 3fr; --xrc-swap-x01-grid--rows : 6rem auto auto auto auto auto 6rem; }*/ } /* XRC MOD: KNOWN AS SIZE: LARGE: 1200px */ @media(min-width:75rem) { /* .xrc-grid--ept > .ept-container, .xrc-grid.xrc-paragraph { --xrc-swap-x01-grid--cols : var(--xrc-swap-x01-grid--cols); --xrc-swap-x01-grid--rows : var(--xrc-swap-x01-grid--rows); --xrc-swap-x01-grid--cols : 1fr repeat(14, 1fr) 1fr; }*/ } /* XRC MOD: KNOWN AS SIZE: XLARGE: 1440px */ @media(min-width:90rem) { }