diff --git a/public/rcss.css b/public/rcss.css index 0076c49..26f0057 100644 --- a/public/rcss.css +++ b/public/rcss.css @@ -31,7 +31,9 @@ .RV-FlexGrid__Container { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-rows: repeat(auto-fill, 300px); + grid-auto-rows: 300px; } .RV-FlexGrid__Container--sameHeight { grid-auto-rows: 1fr; } .RV-FlexGrid__Container--spacing { @@ -66,26 +68,235 @@ word-break: break-all; } .RV-ContentCrop__Container img { - width: inherit; - height: inherit; - object-fit: cover; - object-position: center; } + width: 100%; + height: 100%; + object-fit: cover; } .RV-ContentCrop__Container--left img { object-position: left; } -.RV-ContentCrop__Container--right img { - object-position: right; } +.RV-ContentCrop__Container--center img { + object-position: center; } .RV-ContentCrop__Container--top img { object-position: top; } .RV-ContentCrop__Container--bottom img { - object-position: bottom; } + object-position: botom; } + +.RV-ContentCrop__Container--center img { + object-position: center; } .RV-Fan__Container { display: flex; } .RV-Fan__Container--horizontal { flex-direction: row; } .RV-Fan__Container--vertical { - flex-direction: column; } + flex-direction: column; + width: max-content; } + +.RV-Fan__Base { + height: 280px; + width: 320px; + flex: 0 0 auto; } + +.RV-Fan__Surface, .RV-Fan__Surface * { + overflow: hidden; + word-break: break-all; } + +.RV-Fan__Surface img { + width: 100%; + height: 100%; + object-fit: cover; } + +.RV-Fan__Surface--left img { + object-position: left; } + +.RV-Fan__Surface--center img { + object-position: center; } + +.RV-Fan__Surface--top img { + object-position: top; } + +.RV-Fan__Surface--bottom img { + object-position: botom; } + +.RV-Fan__Surface--center img { + object-position: center; } + +.RV-Fan__Container--horizontal .RV-Fan__Surface { + height: 280px; } + +.RV-Fan__Container--vertical .RV-Fan__Surface { + width: 320px; } + +.RV-FullWidthContent__Container { + width: 100%; } + +.RV-FullWidthContent__Item { + width: 100%; } + .RV-FullWidthContent__Item, .RV-FullWidthContent__Item * { + overflow: hidden; + word-break: break-all; } + .RV-FullWidthContent__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + .RV-FullWidthContent__Item--left img { + object-position: left; } + .RV-FullWidthContent__Item--center img { + object-position: center; } + .RV-FullWidthContent__Item--top img { + object-position: top; } + .RV-FullWidthContent__Item--bottom img { + object-position: botom; } + .RV-FullWidthContent__Item--center img { + object-position: center; } + +.RV-BoxShadow { + position: relative; + float: left; + width: 40%; + margin: 2em 10px 4em; + background: #fff; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } + .RV-BoxShadow:before, .RV-BoxShadow:after { + content: ""; + position: absolute; + z-index: -2; } + .RV-BoxShadow--simple { + box-shadow: 0 0 20px #6b5690; } + .RV-BoxShadow--raised:after { + box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } + .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { + bottom: 15px; + left: 10px; + width: 50%; + height: 20%; + max-width: 300px; + box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); + transform: rotate(-3deg); } + .RV-BoxShadow--liftedCorners:after { + right: 10px; + left: auto; + transform: rotate(3deg); } + +.RV-ElementList__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; } + +.RV-ElementList__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; } + +.RV-Spacing__Outer--small { + margin: 10px; } + +.RV-Spacing__Outer--medium { + margin: 25px; } + +.RV-Spacing__Outer--large { + margin: 35px; } + +.RV-Spacing__Inner--small { + padding: 10px; + gap: 10px; } + +.RV-Spacing__Inner--medium { + padding: 25px; + gap: 25px; } + +.RV-Spacing__Inner--large { + padding: 35px; + gap: 35px; } + +.RV-ImageGrid__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; } + +.RV-ImageGrid__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; } + +.RV-ImageGrid__Container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-rows: repeat(auto-fill, 300px); + grid-auto-rows: 300px; } + .RV-ImageGrid__Container--sameHeight { + grid-auto-rows: 1fr; } + .RV-ImageGrid__Container--spacing { + gap: 10px; } + +.RV-ImageGrid__Item * { + text-align: unset; + display: flex; + flex-direction: row; } + +.RV-ImageGrid__Item--fixedSize { + flex: 0 0; + width: min-content; } + +.RV-ImageGrid__Item--center { + text-align: center; } + .RV-ImageGrid__Item--center * { + justify-content: center; } + +.RV-ImageGrid__Item--left { + text-align: left; } + .RV-ImageGrid__Item--left * { + justify-content: flex-start; } + +.RV-ImageGrid__Item--right { + text-align: right; } + .RV-ImageGrid__Item--right * { + justify-content: flex-end; } + +.RV-ImageGrid__Container { + padding: 25px; + gap: 25px; } + +.RV-ImageGrid__Item, .RV-ImageGrid__Item * { + overflow: hidden; + word-break: break-all; } + +.RV-ImageGrid__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + +.RV-ImageGrid__Item--left img { + object-position: left; } + +.RV-ImageGrid__Item--center img { + object-position: center; } + +.RV-ImageGrid__Item--top img { + object-position: top; } + +.RV-ImageGrid__Item--bottom img { + object-position: botom; } + +.RV-ImageGrid__Item--center img { + object-position: center; } + +.RV-ImageGrid__Item img { + object-position: center; }