From 640b45ad026ec47a90a0f28a454be7eee67c90b0 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Wed, 10 Mar 2021 00:56:25 +0100
Subject: [PATCH] Including breakpoint in horizontal fan

---
 components/01_Layouts/fan/_fan.styl | 51 ++++++++++++++++-------------
 components/01_Layouts/fan/fan.hbs   | 28 ++++++++--------
 2 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/components/01_Layouts/fan/_fan.styl b/components/01_Layouts/fan/_fan.styl
index cedfd09..ab8ff25 100644
--- a/components/01_Layouts/fan/_fan.styl
+++ b/components/01_Layouts/fan/_fan.styl
@@ -16,29 +16,25 @@
  */
 RV-Fan--horizontal(base-height, base-width)
 	+RV-Block--modifier()
-		flex-direction row
-
-		+RV-Element('Base')
-			//flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
-			flex-basis 'calc(2 * (%s) * 999 - 100% * 999)' % base-width
-			box-sizing border-box
-			flex-shrink 9999
-			flex-grow 1
-			max-width base-width
-			
-			margin 0
-			padding 0
-			--_padding var(--inner-spacing)
-			--_margin var(--outer-spacing)
-			*
-				margin var(--_margin)
-				padding var(--_padding)
-				box-sizing border-box
+		RV-CSSParameter({
+			localBreakPoint: 'calc(2 * %s)' % base-width
+		})
+		RV-BreakPoint(--localBreakPoint)
 
 		+RV-Element('Surface')
-			height base-height
-			box-sizing border-box
-			flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
+			RV-BreakPoint__Item()
+
+		+RV-Element('Base')
+			RV-BreakPoint__Item()
+			+RV-Squash()
+				RV-BreakPoint__Item--outside()
+				
+			flex-basis base-width
+			flex-grow 0
+
+		RV-BreakPoint--horizontal()
+			
+		min-width unset
 
 /*
  * Base above, Surfce below
@@ -53,7 +49,6 @@ RV-Fan--vertical(base-height, base-width)
 		
 		+RV-Element('Surface')
 			width base-width
-			box-sizing border-box
 			min-width initial
 			min-height base-height
 			
@@ -88,6 +83,13 @@ RV-Fan__Base(base-height, base-width)
 		flex-basis base-width
 		flex-shrink 0
 		flex-grow 0
+		
+		height base-height
+		width base-width
+		
+		> *
+			height calc_height()
+			width calc_width()
 
 RV-Fan__Surface--fixedHeight(height)
 	+RV-Element--modifier()
@@ -105,7 +107,12 @@ RV-Fan__Surface(base-height, base-width)
 		box-sizing border-box
 		height base-height
 		flex-basis base-width
+		min-width base-width
 		flex-grow 1
+		
+		> *
+			height calc_height()
+			width calc_width()
 
 /* ############
  * Block Mixin
diff --git a/components/01_Layouts/fan/fan.hbs b/components/01_Layouts/fan/fan.hbs
index 14798e6..182128d 100644
--- a/components/01_Layouts/fan/fan.hbs
+++ b/components/01_Layouts/fan/fan.hbs
@@ -7,22 +7,20 @@
 <br>
 <br>
 <div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow RV-BoxShadow--drop">
-	<div class="RV-Fan__Base RV-Spacing__Inner--small">
-		<div class="RV-ContentCrop">
-			<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
-		</div>
+	<div class="RV-Fan__Base">
+		<img class="RV-Image RV-Spacing__Outer--small RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%" src="{{path '/images/landscape.jpeg'}}"/>
 	</div>
-	<div class="RV-Fan__Surface RV-Spacing__Inner--small">
-		<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.
-			</p>
-			<p>
-				Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
-			</p>
-			<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 class="RV-Fan__Surface">
+		<div class="RV-Spacing__Outer--small">
+			<div class="RV-Truncation">
+				<div class="RV-Truncation__Cutter">
+					<p class="RV-Truncation__Content">
+						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.
+						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>
\ No newline at end of file