reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

trying to implement shapes / aspect ratio

Browse Source
This commit is contained in:
reverend 2020-12-27 23:48:50 +01:00
parent 46a428c516
commit 904169cdc6
3 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/01_Layouts/contentCrop/contentCrop.hbs
View File

@ -50,3 +50,11 @@
<div class="full-width RV-ContentCrop">
<div class="portrait red"></div>
</div>
<div class="RV-ContentCrop--square">
<p>You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
</div>
<div class="RV-ContentCrop RV-ContentCrop--square">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
</div>

11
components/10_Examples/imageGrid/_imageGrid.scss
View File

@ -1,5 +1,4 @@
@mixin RV-ImageGrid {
@include RV-ElementList;
@include RV-FlexGrid;
&__Container {
@ -9,6 +8,16 @@
&__Item {
@include RV-ContentCrop;
@include RV-ContentCrop--center;
&--square {
height: 0;
width: 100%;
padding-bottom: 100%;
* {
height: initial;
}
}
}
}

2
components/10_Examples/imageGrid/imageGrid.hbs
View File

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