@internetstiftelsen/styleguide 2.22.4 → 2.23.2-beta.0.1

package/src/organisms/hero/_hero--dynamic-headline.scss

@@ -0,0 +1,168 @@
+@charset "UTF-8";
+
+@include organism(hero) {
+	@include m(dynamic-headline) {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		overflow: visible;
+		border-radius: 0;
+
+		@include e(image) {
+			max-height: none;
+			min-height: 0;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: -1;
+
+			@include bp-up(xxl) {
+				object-position: 50% 50%;
+			}
+		}
+
+		@include e(caption) {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			padding: rhythm(3);
+			background-image: none;
+			position: static;
+			z-index: auto;
+			color: $color-snow;
+
+			> h1 {
+				--minFontSize: 22px;
+				--maxFontSize: 200px;
+				--scaler: 10vw;
+
+				font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
+				font-family: $font-family-bold;
+				margin: 0;
+				padding: 0;
+				line-height: 1.2;
+
+				@include bp-up(md) {
+					line-height: 1.1;
+				}
+
+				@include bp-up(lg) {
+					line-height: 1;
+				}
+			}
+
+			@include bp-up(sm-xs) {
+				padding: rhythm(4);
+			}
+
+			@include bp-up(sm) {
+				padding: rhythm(5);
+			}
+
+			@include bp-up(md) {
+				padding: rhythm(7);
+			}
+
+			@include bp-up(lg) {
+				padding: rhythm(8);
+			}
+
+			@include bp-up(xl) {
+				padding: rhythm(10);
+			}
+
+			&::before {
+				display: block;
+				content: attr(data-meta);
+				font-family: $font-family-mono;
+				font-size: 14px !important;
+				text-transform: uppercase;
+
+				@include bp-up(sm-xs) {
+					margin-left: rhythm(0.5);
+				}
+
+				@include bp-up(md) {
+					font-size: 18px !important;
+					margin-left: rhythm(1);
+				}
+
+				@include bp-up(lg) {
+					font-size: 20px !important;
+				}
+
+				@include bp-up(xl) {
+					font-size: 22px !important;
+				}
+
+				@include bp-up(xxl) {
+					font-size: 24px !important;
+				}
+			}
+		}
+
+		@include e(button-continue) {
+			position: relative;
+			z-index: z_index(middleground);
+			align-self: center;
+			transform: scale(1) translateY(0);
+			animation: pulse infinite 1.5s ease;
+			will-change: transform;
+
+			@include bp-up(sm) {
+				animation: pulse2 infinite 1.5s ease;
+			}
+
+			@include bp-up(xl) {
+				animation: pulse3 infinite 1.5s ease;
+			}
+		}
+
+		@keyframes pulse {
+			0% {
+				transform: translateY(0);
+			}
+
+			50% {
+				transform: translateY(-25%);
+			}
+
+			100% {
+				transform: translateY(0);
+			}
+		}
+
+		@keyframes pulse2 {
+			0% {
+				transform: translateY(0) scale(2);
+			}
+
+			50% {
+				transform: translateY(-25%) scale(2);
+			}
+
+			100% {
+				transform: translateY(0) scale(2);
+			}
+		}
+
+		@keyframes pulse3 {
+			0% {
+				transform: translateY(0) scale(3);
+			}
+
+			50% {
+				transform: translateY(-25%) scale(3);
+			}
+
+			100% {
+				transform: translateY(0) scale(3);
+			}
+		}
+
+
+	}
+}

package/src/organisms/hero/_hero.scss

@@ -376,6 +376,22 @@
 		}
 	}
 
+	@include m(video-wide) {
+		width: 100%;
+
+		@include e(video) {
+			width: 100%;
+			object-fit: cover;
+			object-position: 50% center;
+
+			@include bp-up(sm) {
+				min-height: rem(500px);
+				max-height: 50vh;
+			}
+
+		}
+	}
+
 	// Event
 	@include m(event) {
 		width: 100%;

package/src/organisms/hero/hero.config.js

@@ -77,7 +77,7 @@ module.exports = {
 		},
 		{
 			name: 'Event hero with button',
-			status: 'wip',
+			status: 'ready',
 				context: {
 					event_title: 'Framtidsoptimism och problemlösning i en uppkopplad värld',
 					organizer: 'Heja framtiden',
@@ -113,5 +113,14 @@ module.exports = {
 				has_buttons: false,
 			}
 		},
+		{
+			name: 'Dynamic headline',
+			status: 'wip',
+			context: {
+				has_image: true,
+				hero_image: '/assets/images/Reprogramming_ENIAC2.png',
+				heading: 'Datadamer - Kvinnorna som digitaliserade världen',
+			}
+		},
 	]
 }

package/src/structures/_article.scss

@@ -37,10 +37,9 @@
 			> h6,
 			> ul,
 			> ol,
-			> div:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
+			> :not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
 			> .wp-block-iis-card,
 			> .wp-block-image > figure,
-			> figure,
 			> blockquote {
 				&:not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide) {
 					max-width: calc(#{rem(612px)} + #{($indent * 2)});
@@ -75,8 +74,8 @@
 				> ul,
 				> ol,
 				> div:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
+				> figure:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
 				> .wp-block-iis-card,
-				> figure,
 				> blockquote {
 					&:not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide) {
 						max-width: 46.364%;
@@ -103,8 +102,8 @@
 			> ul,
 			> ol,
 			> div:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
+			> figure:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
 			> .wp-block-iis-card,
-			> figure,
 			> blockquote {
 				&:not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide) {
 					margin-right: $grid-margin-right;

package/src/utilities/_hide.scss

@@ -97,3 +97,7 @@
 .u-overflow-hidden {
 	overflow: hidden !important;
 }
+
+.u-overflow-visible {
+	overflow: visible !important;
+}

package/src/utilities/_links.scss

@@ -79,3 +79,14 @@
 		text-decoration: underline;
 	}
 }
+
+// Generate parent element link color classes e.g. .u-color-ruby a
+/// @group Colors
+.u-link-color {
+	@include color_classes (
+		$map: $colors,
+		$separator: '-',
+		$attribute: 'color',
+		$element: 'a'
+	);
+}