From 26c5261d71dcd9613b2e0f9fcfcd913d7478bd5a Mon Sep 17 00:00:00 2001 From: reverend Date: Tue, 19 Jan 2021 23:38:14 +0100 Subject: [PATCH] Refactoring (WIP) --- .../01_Layouts/contentCrop/_contentCrop.styl | 82 +++++++++++-------- .../01_Layouts/contentCrop/contentCrop.hbs | 37 +++++---- 2 files changed, 66 insertions(+), 53 deletions(-) diff --git a/components/01_Layouts/contentCrop/_contentCrop.styl b/components/01_Layouts/contentCrop/_contentCrop.styl index 5379544..d1d2c5f 100644 --- a/components/01_Layouts/contentCrop/_contentCrop.styl +++ b/components/01_Layouts/contentCrop/_contentCrop.styl @@ -39,8 +39,18 @@ RV-ContentCrop--square() RV-ContentCrop--circle() +RV-Block__Modifier--name('circle') - RV-ContentCrop__Square() 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-CSSParameter({ @@ -81,15 +91,6 @@ RV-ContentCrop--3to2() +RV-Block__Modifier--name('3to2') 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-Element__Modifier--name('fade') &:after @@ -116,39 +117,45 @@ RV-ContentCrop__Text--ellipsis(background-color=white) background-color background-color 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) - line-height = calc(line-height * 1.1) +RV-ContentCrop(line-height=1.1, height=350px) background-color = white display block 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-CSSParameter({ + + }) + line-height = 1.1 - RV-ContentCrop(line-height) + height = 350px + + RV-ContentCrop(line-height, height) +RV-Element() RV-ContentCrop__Image() @@ -180,6 +187,9 @@ RV-ContentCrop(line-height=1.1) +RV-Block__Modifier() RV-ContentCrop--square() + +RV-Block__Modifier() + RV-ContentCrop--circle() + +RV-Block__Modifier() RV-ContentCrop--1to2() diff --git a/components/01_Layouts/contentCrop/contentCrop.hbs b/components/01_Layouts/contentCrop/contentCrop.hbs index 4fb1557..8301832 100644 --- a/components/01_Layouts/contentCrop/contentCrop.hbs +++ b/components/01_Layouts/contentCrop/contentCrop.hbs @@ -1,12 +1,12 @@ -

Square

-
-
- + +
+
+
-
+
-

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.

+

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.


@@ -23,7 +23,7 @@
-

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.

+

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.


@@ -41,7 +41,7 @@

Some Text

More Text

-

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.

+

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.


@@ -57,7 +57,7 @@

-

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.

+

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.


@@ -65,31 +65,34 @@
-
+
+ +


-
- +
+ +
-

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.

+

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.

-
+
-
+
@@ -103,14 +106,14 @@
-
+
-
+