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

reordering

This commit is contained in:
reverend 2021-03-10 00:58:20 +01:00
parent d46d74faf0
commit fbe649ad92
2 changed files with 22 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/05_Molecules/teaser/_teaser.styl
View File

@ -8,27 +8,19 @@
RV-Fan(--image-height, --image-width)
RV-BoxShadow()
RV-BoxShadow--drop(--shadow-color)
+RV-Element('Image')
RV-Fan__Base(--image-height, --image-width)
+RV-Element('Preview')
RV-FlexRow()
RV-FlexRow--vertical()
RV-Fan__Surface(--image-height, --image-width)
RV-Spacing__Inner--medium()
+RV-Squash()
RV-FlexRow()
RV-FlexRow--vertical()
RV-Spacing__Inner--medium()
+RV-Element('Text')
color text-color
flex 1
RV-ContentCrop()
RV-ContentCrop__Text()
RV-ContentCrop__Text--fade()
.RV-Text
height 100%
+RV-Element('Headline')
font-family sans-serif
@ -37,11 +29,14 @@
+RV-Element('Buttons')
RV-FlexRow__Item()
RV-FlexRow__Item--content()
RV-Spacing__Inner--small()
+RV-Squash()
RV-FlexRow__Item--content()
RV-Spacing__Inner--small()
RV-FlexRow()
RV-FlexRow--horizontal()
RV-FlexRow()
RV-FlexRow--horizontal()
padding 0
RV-Fan--auto(--image-height, --image-width)
+RV-Squash()
RV-Fan--auto(--image-height, --image-width)
RV-BoxShadow--drop(--shadow-color)

17
components/05_Molecules/teaser/teaser.hbs
View File

@ -1,19 +1,20 @@
<div class="RV-Teaser">
<div class="RV-Teaser__Image">
<div class="RV-ContentCrop">
<img class="RV-Image RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%" src="{{ path '/images/landscape.jpeg' }}"/>
</div>
<img class="RV-Image RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%" src="{{ path '/images/landscape.jpeg' }}"/>
</div>
<div class="RV-Teaser__Preview">
<div class="RV-Teaser__Headline">
<h2>This is a headline for a teaser it is indeed dear reader</h2>
</div>
<div class="RV-Teaser__Text">
<div class="RV-Text">
Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
<div class="RV-Truncation">
<div class="RV-Truncation__Cutter">
<p class="RV-Truncation__Content">
Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
</p>
</div>
</div>
</div>
<div class="RV-Teaser__Buttons">