diff --git a/public/rcss.css b/public/rcss.css index d4bb3c7..13a83aa 100644 --- a/public/rcss.css +++ b/public/rcss.css @@ -1,167 +1,25 @@ -.RV-Spacing__Outer--small { - margin: 10px; - --outer-spacing: 10px; -} -.RV-Spacing__Outer--medium { - margin: 25px; - --outer-spacing: 25px; -} -.RV-Spacing__Outer--large { - margin: 35px; - --outer-spacing: 35px; -} -.RV-Spacing__Inner--small { - padding: 10px; - gap: 10px; - column-gap: 10px; - --inner-spacing: 10px; -} -.RV-Spacing__Inner--medium { - padding: 25px; - gap: 25px; - column-gap: 25px; - --inner-spacing: 25px; -} -.RV-Spacing__Inner--large { - padding: 35px; - gap: 35px; - column-gap: 35px; - --inner-spacing: 35px; -} -.RV-BoxShadow { - --color: #6b5690; - position: relative; - float: left; - background-color: #fff; -} -.RV-BoxShadow:before, -.RV-BoxShadow:after { - content: ''; - position: absolute; - z-index: -2; -} -.RV-BoxShadow--simple { - box-shadow: 0 0 10px 3px var(--color); -} -.RV-BoxShadow--liftedCorners:before, -.RV-BoxShadow--liftedCorners:after { - bottom: 15px; - left: 10px; - width: 50%; - height: 20%; - box-shadow: 0 15px 8px var(--color); - transform: rotate(-5deg); -} -.RV-BoxShadow--liftedCorners:after { - right: 10px; - left: auto; - transform: rotate(5deg); -} -.RV-BoxShadow--levitating { - box-shadow: var(--color) 0px 1px 1px 0px inset, var(--color) 0px 40px 80px -15px, var(--color) 0px 30px 60px -30px; -} -.RV-BoxShadow--stacked { - --color: 107, 86, 144; - box-shadow: rgba(var(--color), 0.4) 0px 5px, rgba(var(--color), 0.3) 0px 10px, rgba(var(--color), 0.2) 0px 15px, rgba(var(--color), 0.1) 0px 20px, rgba(var(--color), 0.05) 0px 25px; -} -.RV-BoxShadow--drop { - position: relative; - box-shadow: 0 1px 4px var(--color); -} -.RV-BoxShadow--drop:after { - box-shadow: 0 0 40px var(--color); - bottom: 0px; - left: 10%; - right: 10%; - width: 80%; - height: 50%; - border-radius: 100%; -} -.RV-Iconized--extraSmall .RV-Iconized__Icon { - width: 1em; - height: 1em; - position: relative; - top: 0.125em; -} -.RV-Iconized--small { - top: -0.25em; -} -.RV-Iconized--small .RV-Iconized__Icon { - width: 1.5em; - height: 1.5em; - position: relative; - top: 0.45em; -} -.RV-Iconized--medium { - top: -0.5em; -} -.RV-Iconized--medium .RV-Iconized__Icon { - width: 2em; - height: 2em; - position: relative; - top: 0.625em; -} -.RV-Iconized--large { - top: -1.03073em; -} -.RV-Iconized--large .RV-Iconized__Icon { - width: 3em; - height: 3em; - position: relative; - top: 1.15573em; -} -.RV-Iconized--huge { - top: -2.05em; -} -.RV-Iconized--huge .RV-Iconized__Icon { - width: 5em; - height: 5em; - position: relative; - top: 2.175em; -} -.RV-Iconized__Icon { - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; - gap: 0; -} -.RV-Sizes--half { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 50%; - width: 50%; -} -.RV-Sizes--third { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 33.333333333333336%; - width: 33.333333333333336%; -} -.RV-Sizes--quarter { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 25%; - width: 25%; -} -.RV-Sizes--fixedSize { - flex-grow: 0; - flex-shrink: 0; - width: min-content; - flex-basis: 100px; -} -.RV-Sizes--content { - flex-grow: 0; - flex-shrink: 0; - width: max-content; - flex-basis: max-content; -} .RV-ContentCrop { display: block; overflow: hidden; + height: calc(100% - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); + width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); +} +.RV-ContentCrop .RV-Image { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.RV-ContentCrop .RV-Text { + overflow: hidden; + display: block; + position: relative; + text-overflow: ellipsis; + background-color: #fff; + line-height: 1.1; + max-height: 334.40000000000003px; + padding: 0; + margin: 0; } .RV-ContentCrop--bottom .RV-Image * { object-position: bottom; @@ -191,35 +49,21 @@ bottom: 0; right: 0; } -.RV-ContentCrop__Image .RV-Image *, -.RV-ContentCrop__Image .RV-Image { +.RV-ContentCrop--circle { + border-radius: 50%; width: 100%; - height: 100%; - object-fit: cover; - display: block; -} -.RV-ContentCrop__Text { - --cc: 'text'; -} -.RV-ContentCrop__Text .RV-Text { - overflow: hidden; - display: block; - text-overflow: ellipsis; - line-height: 1.1; + padding-top: 100%; position: relative; - background-color: #fff; - max-height: 88%; - padding: 0; - margin: 0; } -.RV-ContentCrop__Text .RV-Text * { - margin: 0; - padding-bottom: 17.6px; +.RV-ContentCrop--circle .RV-Image *, +.RV-ContentCrop--circle div { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; } -.RV-ContentCrop__Text .RV-Text *:last-child { - padding-bottom: unset; -} -.RV-ContentCrop__Text--ellipsis:after { +.RV-ContentCrop__--ellipsis:after { position: relative; display: block; bottom: 1.2em; @@ -230,7 +74,7 @@ background-color: #fff; padding: 0 2px; } -.RV-ContentCrop__Text--fade:after { +.RV-ContentCrop__--fade:after { background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); display: block; content: ' '; @@ -245,34 +89,8 @@ width: 100%; } .RV-FullWidthContent__Item { - --cc: 'text'; width: 100%; } -.RV-FullWidthContent__Item .RV-Text { - overflow: hidden; - display: block; - text-overflow: ellipsis; - line-height: 1.1; - position: relative; - background-color: #fff; - max-height: 88%; - padding: 0; - margin: 0; -} -.RV-FullWidthContent__Item .RV-Text * { - margin: 0; - padding-bottom: 17.6px; -} -.RV-FullWidthContent__Item .RV-Text *:last-child { - padding-bottom: unset; -} -.RV-FullWidthContent__Item .RV-Image *, -.RV-FullWidthContent__Item .RV-Image { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} .RV-FlexRow { display: flex; height: 100%; @@ -296,6 +114,8 @@ right: 0; border: none; gap: 0; + --inner-spacing: 0px; + --outer-spacing: 0px; gap: 0px; } .RV-FlexRow--breakPoint *:first-child:nth-last-child(1), @@ -413,12 +233,6 @@ flex-grow: 5; flex-shrink: 1; } -.RV-FlexRow__Item--fixedSize { - flex-grow: 0; - flex-shrink: 0; - width: min-content; - flex-basis: var(--width); -} .RV-FlexRow__Item--narrower { flex-grow: 1; flex-shrink: 5; @@ -427,30 +241,27 @@ flex-grow: 0; flex-shrink: 0; flex-basis: 50%; - width: 50%; } .RV-FlexRow__Item--third { flex-grow: 0; flex-shrink: 0; flex-basis: 33.333333333333336%; - width: 33.333333333333336%; } .RV-FlexRow__Item--quarter { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; - width: 25%; } .RV-FlexRow__Item--content { flex-grow: 0; flex-shrink: 0; - width: max-content; flex-basis: max-content; } .RV-FlexGrid { --item-height: 300px; --item-width: 300px; display: grid; + grid-template-columns: repeat(auto-fill, var(--item-width)); } .RV-FlexGrid--autoWidth { grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); @@ -469,23 +280,34 @@ column-width: var(--item-width); } .RV-FlexGrid--masonry .RV-FlexGrid__Item { + display: inline-block; + height: unset; margin-bottom: var(--inner-spacing); } -.RV-FlexGrid--masonry .RV-FlexGrid__Item * { - margin-bottom: unset; +.RV-FlexGrid--masonry .RV-FlexGrid__Item > * { + height: auto; +} +.RV-FlexGrid__Item { + height: calc(var(--item-height) - calc(2*var(--inner-spacing))); +} +.RV-FlexGrid__Item > * { + height: 100%; + width: 100%; } .RV-Fan { --base-height: 280px; --base-width: 320px; + --inner-spacing: 0px; display: flex; + position: relative; } .RV-Fan--fullWidth { flex-flow: row wrap; } .RV-Fan--fullWidth .RV-Fan__Surface { - width: calc(100% - var(--base-width)); - min-width: var(--base-width); - height: var(--base-height); + min-width: calc(calc(var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); + width: calc(calc(100% - var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); + height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); } .RV-Fan--fullWidth .RV-Fan__Base { flex-grow: 1; @@ -498,97 +320,238 @@ width: max-content; } .RV-Fan--vertical .RV-Fan__Surface { - width: var(--base-width); + width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); min-height: var(--base-height); } .RV-Fan--horizontal { flex-direction: row; } .RV-Fan--horizontal .RV-Fan__Surface { - min-width: var(--base-width); - height: var(--base-height); + min-width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); + height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); } .RV-Fan--auto { flex-flow: row wrap; } .RV-Fan--auto .RV-Fan__Surface { - width: calc(100% - var(--base-width)); - min-width: var(--base-width); - height: var(--base-height); + min-width: calc(calc(var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); + width: calc(calc(100% - var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); + height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); } .RV-Fan__Surface { - --cc: 'text'; display: block; overflow: hidden; -} -.RV-Fan__Surface .RV-Text { + height: calc(100% - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); + width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); overflow: hidden; - display: block; - text-overflow: ellipsis; - line-height: 1.1; - position: relative; - background-color: #fff; - max-height: 88%; - padding: 0; - margin: 0; + height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); + width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); } -.RV-Fan__Surface .RV-Text * { - margin: 0; - padding-bottom: 17.6px; -} -.RV-Fan__Surface .RV-Text *:last-child { - padding-bottom: unset; -} -.RV-Fan__Surface .RV-Image *, .RV-Fan__Surface .RV-Image { width: 100%; height: 100%; object-fit: cover; display: block; } +.RV-Fan__Surface .RV-Text { + overflow: hidden; + display: block; + position: relative; + text-overflow: ellipsis; + background-color: #fff; + line-height: 1.1; + max-height: 334.40000000000003px; + padding: 0; + margin: 0; +} .RV-Fan__Surface--fixedWidth { - max-width: var(--base-width); + max-width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); } .RV-Fan__Surface--fixedHeight { - height: var(--base-height); + height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); } .RV-Fan__Base { - height: var(--base-height); - width: var(--base-width); + height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); + width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); flex: 0 0 auto; } .RV-Alignment { display: grid; } .RV-Alignment--top { - display: grid; align-content: start; } .RV-Alignment--bottom { - display: grid; align-content: end; } .RV-Alignment--left { - display: grid; justify-content: start; } .RV-Alignment--right { - display: grid; justify-content: end; } -.RV-Alignment--center { - display: grid; +.RV-Alignment--horizontalCenter { justify-content: center; } -.RV-Alignment--center { - display: grid; +.RV-Alignment--verticalCenter { align-items: center; } .RV-Alignment--center { - display: grid; - justify-content: center; - display: grid; align-items: center; + justify-content: center; +} +.RV-Dummy--square { + height: 350px; + width: 350px; +} +.RV-Dummy--portrait { + height: 350px; + width: 150px; +} +.RV-Dummy--landscape { + width: 350px; + height: 150px; +} +.RV-Dummy--red { + background-color: #d8583e; +} +.RV-Spacing__Outer--small { + margin: 10px; + --outer-spacing: 10px; +} +.RV-Spacing__Outer--medium { + margin: 25px; + --outer-spacing: 25px; +} +.RV-Spacing__Outer--large { + margin: 35px; + --outer-spacing: 35px; +} +.RV-Spacing__Inner--small { + padding: 10px; + gap: 10px; + column-gap: 10px; + --inner-spacing: 10px; +} +.RV-Spacing__Inner--medium { + padding: 25px; + gap: 25px; + column-gap: 25px; + --inner-spacing: 25px; +} +.RV-Spacing__Inner--large { + padding: 35px; + gap: 35px; + column-gap: 35px; + --inner-spacing: 35px; +} +.RV-BoxShadow { + --color: #6b5690; + position: relative; + background-color: #fff; +} +.RV-BoxShadow:before, +.RV-BoxShadow:after { + content: ''; + position: absolute; + z-index: -2; +} +.RV-BoxShadow--simple { + box-shadow: 0 0 10px 3px var(--color); +} +.RV-BoxShadow--liftedCorners:before, +.RV-BoxShadow--liftedCorners:after { + bottom: 15px; + left: 10px; + width: 50%; + height: 20%; + box-shadow: 0 15px 8px var(--color); + transform: rotate(-5deg); +} +.RV-BoxShadow--liftedCorners:after { + right: 10px; + left: auto; + transform: rotate(5deg); +} +.RV-BoxShadow--levitating { + box-shadow: var(--color) 0px 1px 1px 0px inset, var(--color) 0px 40px 80px -15px, var(--color) 0px 30px 60px -30px; +} +.RV-BoxShadow--stacked { + --color: 107, 86, 144; + box-shadow: rgba(var(--color), 0.4) 0px 5px, rgba(var(--color), 0.3) 0px 10px, rgba(var(--color), 0.2) 0px 15px, rgba(var(--color), 0.1) 0px 20px, rgba(var(--color), 0.05) 0px 25px; +} +.RV-BoxShadow--drop { + position: relative; + box-shadow: 0 1px 4px var(--color); +} +.RV-BoxShadow--drop:after { + box-shadow: 0 0 40px var(--color); + bottom: 0px; + left: 10%; + right: 10%; + width: 80%; + height: 50%; + border-radius: 100%; +} +.RV-BoxShadow--solid { + border: 8px solid var(--color); + border-radius: 14px; + padding: 8px; + margin: -8px; +} +.RV-Iconized--extraSmall .RV-Iconized__Icon { + width: 1em; + height: 1em; + position: relative; + top: 0.125em; +} +.RV-Iconized--small { + top: -0.25em; +} +.RV-Iconized--small .RV-Iconized__Icon { + width: 1.5em; + height: 1.5em; + position: relative; + top: 0.45em; +} +.RV-Iconized--medium { + top: -0.5em; +} +.RV-Iconized--medium .RV-Iconized__Icon { + width: 2em; + height: 2em; + position: relative; + top: 0.625em; +} +.RV-Iconized--large { + top: -1.03073em; +} +.RV-Iconized--large .RV-Iconized__Icon { + width: 3em; + height: 3em; + position: relative; + top: 1.15573em; +} +.RV-Iconized--huge { + top: -2.05em; +} +.RV-Iconized--huge .RV-Iconized__Icon { + width: 5em; + height: 5em; + position: relative; + top: 2.175em; +} +.RV-Iconized__Icon { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; + gap: 0; + --inner-spacing: 0px; + --outer-spacing: 0px; } * { margin: 0; @@ -599,4 +562,6 @@ right: 0; border: none; gap: 0; + --inner-spacing: 0px; + --outer-spacing: 0px; }