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

Refactoring (WIP)

Browse Source
This commit is contained in:
reverend 2021-01-19 23:38:14 +01:00
parent db22e2c5a5
commit 26c5261d71
2 changed files with 66 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
components/01_Layouts/contentCrop/_contentCrop.styl
View File

@ -39,8 +39,18 @@ RV-ContentCrop--square()
RV-ContentCrop--circle() RV-ContentCrop--circle()
+RV-Block__Modifier--name('circle') +RV-Block__Modifier--name('circle')
RV-ContentCrop__Square()
border-radius 50% border-radius 50%
width 100%
padding-top 100%
position relative
.RV-Image *,
div
position absolute
top 0
left 0
bottom 0
right 0
RV-ContentCrop--XtoY(x=1, y=1) RV-ContentCrop--XtoY(x=1, y=1)
RV-CSSParameter({ RV-CSSParameter({
@ -81,15 +91,6 @@ RV-ContentCrop--3to2()
+RV-Block__Modifier--name('3to2') +RV-Block__Modifier--name('3to2')
RV-ContentCrop__XtoY(3, 2) RV-ContentCrop__XtoY(3, 2)
RV-ContentCrop__Image()
+RV-Element--name('Image')
.RV-Image *, .RV-Image
width 100%
height 100%
object-fit cover
display block
RV-ContentCrop__Text--fade(background-color=white) RV-ContentCrop__Text--fade(background-color=white)
+RV-Element__Modifier--name('fade') +RV-Element__Modifier--name('fade')
&:after &:after
@ -116,39 +117,45 @@ RV-ContentCrop__Text--ellipsis(background-color=white)
background-color background-color background-color background-color
padding 0 2px padding 0 2px
RV-ContentCrop__Text(line-height=1.1, background-color=white)
+RV-Element--name('Text')
--cc 'text'
& .RV-Text
overflow hidden
display block
text-overflow ellipsis
// Determining the max line count and caclulating the height
line-height line-height
position relative
background-color background-color
max-height floor(100% / line-height / 16) * line-height * 16
padding 0
margin 0
*
margin 0
padding-bottom line-height * 16px
*:last-child
padding-bottom unset
RV-ContentCrop(line-height=1.1, height=350px)
RV-ContentCrop(line-height=1.1)
line-height = calc(line-height * 1.1)
background-color = white background-color = white
display block display block
overflow hidden overflow hidden
height calc_height()
width calc_width()
.RV-Image
width 100%
height 100%
object-fit cover
display block
.RV-Text
overflow hidden
display block
position relative
text-overflow ellipsis
background-color background-color
line-height line-height
max-height floor(height / (line-height * 16)) * (line-height * 16)
padding 0
margin 0
+RV-Block('RV-ContentCrop') +RV-Block('RV-ContentCrop')
RV-CSSParameter({
})
line-height = 1.1 line-height = 1.1
RV-ContentCrop(line-height) height = 350px
RV-ContentCrop(line-height, height)
+RV-Element() +RV-Element()
RV-ContentCrop__Image() RV-ContentCrop__Image()
@ -180,6 +187,9 @@ RV-ContentCrop(line-height=1.1)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-ContentCrop--square() RV-ContentCrop--square()
+RV-Block__Modifier()
RV-ContentCrop--circle()
+RV-Block__Modifier() +RV-Block__Modifier()
RV-ContentCrop--1to2() RV-ContentCrop--1to2()

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

@ -1,12 +1,12 @@
<h2>Square</h2>
<div class="square RV-ContentCrop"> <div class="RV-Dummy__Square RV-ContentCrop">
<div class="RV-Image"><img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div> <img class="RV-Image" src="{{path '/images/hasi05.png'}}"/>
</div> </div>
<br> <br>
<div class="square RV-ContentCrop RV-ContentCrop--ellipsis"> <div class="RV-Dummy__Square RV-ContentCrop RV-ContentCrop--ellipsis">
<div class="RV-Text"> <div class="RV-Text">
<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> <p>You could see there was text coming out of her eyes, text coming out of her wherever. . 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>
</div> </div>
<br> <br>
@ -23,7 +23,7 @@
<div class="landscape RV-ContentCrop RV-ContentCrop--ellipsis"> <div class="landscape RV-ContentCrop RV-ContentCrop--ellipsis">
<div class="RV-Text"> <div class="RV-Text">
<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> <p>You could see there was text coming out of her eyes, text coming out of her wherever. . 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>
</div> </div>
<br> <br>
@ -41,7 +41,7 @@
<div class="RV-Text"> <div class="RV-Text">
<p>Some Text</p> <p>Some Text</p>
<p>More Text</p> <p>More Text</p>
<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> <p>You could see there was text coming out of her eyes, text coming out of her wherever. . 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>
</div> </div>
<br> <br>
@ -57,7 +57,7 @@
</div> </div>
<br> <br>
<div class="ull-width RV-ContentCrop RV-ContentCrop--ellipsis"> <div class="ull-width RV-ContentCrop RV-ContentCrop--ellipsis">
<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> <p>You could see there was text coming out of her eyes, text coming out of her wherever. . 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>
<br> <br>
<div class="full-width RV-ContentCrop"> <div class="full-width RV-ContentCrop">
@ -65,31 +65,34 @@
</div> </div>
<div> <div>
<div class="RV-ContentCrop RV-ContentCrop--square"> <div class="RV-ContentCrop RV-ContentCrop--square">
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div> <div class="RV-ContentCrop__Image">
<img class="RV-Image" src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
</div>
</div> </div>
</div> </div>
<br><br> <br><br>
<div> <div>
<div class="RV-ContentCrop RV-ContentCrop--circle"> <div class="RV-ContentCrop RV-ContentCrop--circle">
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div> <div class="RV-ContentCrop__Image">
<img class="RV-Image" src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
</div>
</div> </div>
</div> </div>
<div class="RV-ContentCrop--square"> <div class="RV-ContentCrop--square">
<div> <div>
<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> <p>You could see there was text coming out of her eyes, text coming out of her wherever. . 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>
</div> </div>
<div> <div>
<div class="RV-ContentCrop RV-ContentCrop--1to2"> <div class="RV-ContentCrop RV-ContentCrop__Image RV-ContentCrop--1to2">
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div> <div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div> </div>
</div> </div>
<div> <div>
<div class="RV-ContentCrop RV-ContentCrop--2to1"> <div class="RV-ContentCrop RV-ContentCrop__Image RV-ContentCrop--2to1">
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div> <div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div> </div>
@ -103,14 +106,14 @@
</div> </div>
<div> <div>
<div class="RV-ContentCrop RV-ContentCrop--16to9"> <div class="RV-ContentCrop RV-ContentCrop__Image RV-ContentCrop--16to9">
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div> <div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div> </div>
</div> </div>
<div> <div>
<div class="RV-ContentCrop RV-ContentCrop--3to2"> <div class="RV-ContentCrop RV-ContentCrop__Image RV-ContentCrop--3to2">
<div class="RV-Image"> <div class="RV-Image">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
</div> </div>