ContentCrop for Fan Layout

This commit is contained in:
reverend 2021-01-03 17:00:55 +01:00
parent 80bed0b6c7
commit 7093252248
4 changed files with 68 additions and 58 deletions

View File

@ -28,7 +28,7 @@ RV-ContentCrop__Text--fade(background-color=white)
top -25% top -25%
width 100% width 100%
height 25% height 25%
z-index -10 z-index 10
RV-ContentCrop__Text--ellipsis(background-color=white) RV-ContentCrop__Text--ellipsis(background-color=white)
&:after &:after
@ -49,7 +49,6 @@ RV-ContentCrop__Text(line-height=1.1, background-color=white)
text-overflow ellipsis text-overflow ellipsis
// Determining the max line count and caclulating the height // Determining the max line count and caclulating the height
line-height line-height line-height line-height
z-index -20
position relative position relative
background-color background-color background-color background-color
max-height floor(100% / line-height / 16) * line-height * 16 max-height floor(100% / line-height / 16) * line-height * 16
@ -130,19 +129,7 @@ RV-ContentCrop__Image()
object-fit cover object-fit cover
display block display block
RV-ContentCrop(line-height=1.1, prefix='&') RV-ContentCrop--shorthands()
// Heuristic, just to be safe
line-height = line-height * 1.1
background-color = white
display block
overflow hidden
RV-ContentCrop__Image()
RV-ContentCrop__Text(line-height)
RV-ContentCrop__Shapes()
&--left &--left
RV-ContentCrop--left() RV-ContentCrop--left()
@ -158,5 +145,20 @@ RV-ContentCrop(line-height=1.1, prefix='&')
&--center &--center
RV-ContentCrop--center() RV-ContentCrop--center()
RV-ContentCrop__Shapes()
RV-ContentCrop(line-height=1.1, prefix='&')
// Heuristic, just to be safe
line-height = line-height * 1.1
background-color = white
display block
overflow hidden
RV-ContentCrop__Image()
RV-ContentCrop__Text(line-height)
.RV-ContentCrop .RV-ContentCrop
RV-ContentCrop() RV-ContentCrop()
RV-ContentCrop--shorthands()

View File

@ -48,6 +48,7 @@ RV-Fan(base_height, base_width, prefix='&')
{prefix}__Surface {prefix}__Surface
RV-ContentCrop() RV-ContentCrop()
RV-ContentCrop__Text--fade()
.RV-Fan .RV-Fan
RV-Fan(280px, 320px) RV-Fan(280px, 320px)

View File

@ -1,24 +1,27 @@
<div class="RV-Fan__Container RV-Fan__Container--horizontal"> <div class="RV-Fan__Container RV-Fan__Container--horizontal">
<div class="red RV-Fan__Base"></div> <div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface"> <div class="green RV-Fan__Surface">
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur. <div class="RV-Text"> <p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam. Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p> Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
</div> </div>
</div> </div>
<br><br> <br><br>
<div class="RV-Fan__Container RV-Fan__Container--auto"> <div class="RV-Fan__Container RV-Fan__Container--auto">
<div class="red RV-Fan__Base"></div> <div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface"> <div class="green RV-Fan__Surface">
<div class="RV-Text">
<p>Some content here</p> <p>Some content here</p>
<p>More conthent over here</p> <p>More conthent over here</p>
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur. <p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam. Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p> Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
</div> </div>
</div> </div>
@ -27,25 +30,29 @@ Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repelle
<div class="RV-Fan__Container RV-Fan__Container--auto RV-Fan__Container--fullWidth"> <div class="RV-Fan__Container RV-Fan__Container--auto RV-Fan__Container--fullWidth">
<div class="red RV-Fan__Base"></div> <div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface"> <div class="green RV-Fan__Surface">
<div class="RV-Text">
<p>Some content here</p> <p>Some content here</p>
<p>More conthent over here</p> <p>More conthent over here</p>
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur. <p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam. Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p> Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
</div> </div>
</div> </div>
<br><br> <br><br>
<div class="RV-Fan__Container RV-Fan__Container--vertical"> <div class="RV-Fan__Container RV-Fan__Container--vertical">
<div class="red RV-Fan__Base"></div> <div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface"> <div class="green RV-Fan__Surface">
<div class="RV-Text">
<p>Some content here</p> <p>Some content here</p>
<p>More conthent over here</p> <p>More conthent over here</p>
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur. <p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam. Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p> Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
</div> </div>
</div> </div>

View File

@ -1,8 +1,8 @@
<div class="RV-ImageGrid"> <div class="RV-ImageGrid">
<ul class="RV-ImageGrid__Container"> <ul class="RV-ImageGrid__Container">
<li class="RV-ImageGrid__Item"><img src="{{path '/images/hasi01.png'}}" alt=""></li> <li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi01.png'}}" alt=""></div></li>
<li class="RV-ImageGrid__Item"><img src="{{path '/images/hasi02.jpeg'}}" alt=""></li> <li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi02.jpeg'}}" alt=""></div></li>
<li class="RV-ImageGrid__Item"><img src="{{path '/images/hasi03.jpeg'}}" alt=""></li> <li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi03.jpeg'}}" alt=""></div></li>
<li class="RV-ImageGrid__Item RV-ImageGrid__Item"><img src="{{path '/images/hasi04.png'}}" alt=""></li> <li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi04.png'}}" alt=""></div></li>
</ul> </ul>
</div> </div>