@internetstiftelsen/styleguide 2.22.3-beta.0.9 → 2.22.5

package/dist/assets/js/objToQuery.js

@@ -27,12 +27,12 @@ var objToQuery = function objToQuery(obj) {
 
 		if (Array.isArray(value)) {
 			value.forEach(function (subValue) {
-				return query.push(queryKey + '[]=' + subValue);
+				return query.push(queryKey + '[]=' + encodeURIComponent(subValue));
 			});
 		} else if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {
 			query.push(objToQuery(value, exclude, queryKey));
 		} else {
-			query.push(queryKey + '=' + value);
+			query.push(queryKey + '=' + encodeURIComponent(value));
 		}
 	});
 

package/dist/assets/js/youtube.js

@@ -1,5 +1,9 @@
 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports.setupPlayers = setupPlayers;
 function loadYoutubeAPI() {
 	var tag = document.createElement('script');
 	var firstScript = document.getElementsByTagName('script')[0];
@@ -9,10 +13,8 @@ function loadYoutubeAPI() {
 	firstScript.parentNode.insertBefore(tag, firstScript);
 }
 
-function onPlayerReady(el, e) {
-	el.addEventListener('click', function () {
-		e.target.playVideo();
-	});
+function onPlayerReady(el) {
+	el.setAttribute('data-youtube-ready', 'true');
 }
 
 function onPlayerStateChange(el, e) {
@@ -32,16 +34,28 @@ function createCover(el, id) {
 }
 
 function setupYoutubePlayer(el) {
-	var playerEl = document.createElement('div');
+	var playerEl = void 0;
 	var id = el.getAttribute('data-youtube');
 
+	if (el.youtube) {
+		playerEl = el.querySelector('[data-youtube-container]');
+
+		playerEl.parentNode.removeChild(playerEl);
+		el.youtube.destroy();
+		el.youtube = null;
+		el.removeAttribute('data-youtube-ready');
+	}
+
+	playerEl = document.createElement('div');
+
 	if (!el.getElementsByTagName('img').length) {
 		createCover(el, id);
 	}
 
+	playerEl.setAttribute('data-youtube-container', true);
 	el.appendChild(playerEl);
 
-	var player = new YT.Player(playerEl, {
+	el.youtube = new YT.Player(playerEl, {
 		height: '100%',
 		width: '100%',
 		videoId: id,
@@ -59,18 +73,33 @@ function setupYoutubePlayer(el) {
 			}
 		}
 	});
+}
 
-	el.youtube = player;
+function delegateClick(e) {
+	var el = e.target.closest('[data-youtube]');
+
+	if (!el || !el.youtube) {
+		return;
+	}
+
+	el.youtube.playVideo();
 }
 
-window.onYouTubeIframeAPIReady = function () {
-	var players = document.querySelectorAll('[data-youtube]');
+// eslint-disable-next-line import/prefer-default-export
+function setupPlayers(container) {
+	var players = container.querySelectorAll('[data-youtube]');
 
 	if (!players.length) {
 		return;
 	}
 
 	[].forEach.call(players, setupYoutubePlayer);
+}
+
+window.onYouTubeIframeAPIReady = function () {
+	setupPlayers(document);
+
+	document.body.addEventListener('click', delegateClick);
 };
 
 loadYoutubeAPI();

package/dist/components.js

@@ -50,10 +50,4 @@ require('./molecules/glider/glider-hero');
 
 require('./molecules/context-menu/context-menu');
 
-require('./molecules/alert/alert');
-
-require('./molecules/continue-video-guide/continue-video-guide');
-
-require('./organisms/video-guide/video-guide');
-
-require('./organisms/timeline/timeline');
+require('./molecules/alert/alert');

package/dist/molecules/continue-video-guide/continue-video-guide.js

@@ -66,15 +66,15 @@ var ProgressRing = function (_CustomElement2) {
 
 window.customElements.define('progress-ring', ProgressRing);
 
-// Get value from sessionStorage if present
-if (sessionStorage.getItem('InmsCurrentTime')) {
-	var videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
-	var videoDuration = sessionStorage.getItem('InmsDuration');
+// Get value from localStorage if present
+if (localStorage.getItem('InmsCurrentTime')) {
+	var videoCurrentTime = localStorage.getItem('InmsCurrentTime');
+	var videoDuration = localStorage.getItem('InmsDuration');
 	var continueElement = document.querySelector('.js-guide-continue');
 	var progressRing = document.querySelector('progress-ring');
 	var continueLink = document.querySelector('.js-guide-continue-link');
-	var guideURL = sessionStorage.getItem('InmsCurrentGuideURL');
-	var guideImage = sessionStorage.getItem('InmsCurrentGuideImage');
+	var guideURL = localStorage.getItem('InmsCurrentGuideURL');
+	var guideImage = localStorage.getItem('InmsCurrentGuideImage');
 
 	if (videoCurrentTime > 0 && progressRing && continueElement && guideImage && continueLink) {
 		var alternativeText = continueLink.dataset.altText;

package/dist/molecules/glider/glider-hero.js

@@ -13,11 +13,35 @@ if (gliderElementHero) {
 		scrollLock: true,
 		slidesToShow: 1,
 		slidesToScroll: 1,
+		rewind: true,
 		arrows: {
 			prev: '.js-glider-prev',
 			next: '.js-glider-next'
 		}
 	});
 
+	var autoplayDelay = gliderElementHero.dataset.timeout;
+
+	if (autoplayDelay) {
+		var autoplay = setInterval(function () {
+			GliderHero.scrollItem('next');
+		}, autoplayDelay);
+
+		gliderElementHero.addEventListener('mouseover', function () {
+			if (autoplay !== null) {
+				clearInterval(autoplay);
+				autoplay = null;
+			}
+		}, 0);
+
+		gliderElementHero.addEventListener('mouseout', function () {
+			if (autoplay === null) {
+				autoplay = setInterval(function () {
+					GliderHero.scrollItem('next');
+				}, autoplayDelay);
+			}
+		}, 0);
+	}
+
 	module.exports = GliderHero;
 }

package/dist/organisms/timeline/timeline.js

@@ -2,8 +2,6 @@
 
 require('../../assets/js/parallax');
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
 var _require = require('../../assets/js/offset'),
     offsetTop = _require.offsetTop,
     offsetBottom = _require.offsetBottom,
@@ -103,21 +101,22 @@ if (progressBar) {
 }
 
 // DUMMY TIMELINE ITEM OPEN/CLOSE
+/*
 function wrap(el, wrapper) {
 	el.parentNode.insertBefore(wrapper, el);
 	wrapper.classList.add('wrapper');
 	wrapper.appendChild(el);
 }
 
-var timeLineItems = document.querySelectorAll('.js-timeline-item');
-var timeLineItemScrollPosition = 0;
+const timeLineItems = document.querySelectorAll('.js-timeline-item');
+let timeLineItemScrollPosition = 0;
 
-[].forEach.call(timeLineItems, function (timeLineItem) {
-	var timeLineItemLink = timeLineItem.querySelector('a');
-	var timeLineItemClose = timeLineItem.querySelector('.js-timeline-item-close');
-	var timeLineItemBottomClose = timeLineItem.querySelector('.js-timeline-item-bottom-close');
+[].forEach.call(timeLineItems, (timeLineItem) => {
+	const timeLineItemLink = timeLineItem.querySelector('a');
+	const timeLineItemClose = timeLineItem.querySelector('.js-timeline-item-close');
+	const timeLineItemBottomClose = timeLineItem.querySelector('.js-timeline-item-bottom-close');
 
-	timeLineItemLink.addEventListener('click', function () {
+	timeLineItemLink.addEventListener('click', () => {
 		timeLineItemScrollPosition = window.pageYOffset;
 		sessionStorage.setItem('scroll-position', timeLineItemScrollPosition);
 
@@ -126,19 +125,20 @@ var timeLineItemScrollPosition = 0;
 			timeLineItem.closest('.row').classList.add('row-has-open-child');
 
 			// Wrap open timeline item
-			wrap(timeLineItem.querySelector('.wp-block-iis-card'), document.createElement('div'));
+			wrap(timeLineItem.querySelector('.wp-block-iis-timeline-post'),
+				document.createElement('div'));
 		}
 	});
 
-	timeLineItemClose.addEventListener('click', function () {
+	timeLineItemClose.addEventListener('click', () => {
 		timeLineItem.classList.remove('is-open');
 		timeLineItem.closest('.row').classList.remove('row-has-open-child');
 
 		// Destroy generated wrapper
-		var wrapper = timeLineItemClose.nextElementSibling;
-		wrapper.replaceWith.apply(wrapper, _toConsumableArray(wrapper.childNodes));
+		const wrapper = timeLineItemClose.nextElementSibling;
+		wrapper.replaceWith(...wrapper.childNodes);
 
-		var top = sessionStorage.getItem('scroll-position');
+		const top = sessionStorage.getItem('scroll-position');
 		if (top !== null) {
 			window.scrollTo(0, parseInt(top, 10));
 		}
@@ -148,7 +148,8 @@ var timeLineItemScrollPosition = 0;
 		window.dispatchEvent(new CustomEvent('scroll'));
 	});
 
-	timeLineItemBottomClose.addEventListener('click', function () {
+	timeLineItemBottomClose.addEventListener('click', () => {
 		timeLineItemClose.click();
 	});
-});
+});
+*/

package/dist/organisms/video-guide/video-guide.js

@@ -17,6 +17,8 @@ var metadataTrack = trackMetadataElement === null ? '' : trackMetadataElement.tr
 var forwardsButton = document.querySelector('.js-next-chapter');
 var backwardsButton = document.querySelector('.js-previous-chapter');
 var timelinePosts = document.querySelectorAll('.js-timeline-post');
+var navigationButton = document.querySelector('.js-show-timelineposts');
+var timeLinePosts = document.querySelector('.js-timeline-posts');
 var currentChapter = 1;
 var manualStep = false;
 var sourceElement = null;
@@ -35,20 +37,20 @@ if (sourceElement) {
 
 	// Store current time in on page reload
 	window.addEventListener('unload', function () {
-		// Set sessionStorage if video has started playing
+		// Set localStorage if video has started playing
 		if (video.currentTime > 0) {
 			var currentGuideURL = window.location.href;
 			var currentGuideImage = document.querySelector('.js-guide-continue-image').src;
-			sessionStorage.setItem('InmsCurrentTime', video.currentTime);
-			sessionStorage.setItem('InmsDuration', video.duration); // Get totalt duration of video
-			sessionStorage.setItem('InmsCurrentGuideURL', currentGuideURL);
-			sessionStorage.setItem('InmsCurrentGuideImage', currentGuideImage);
+			localStorage.setItem('InmsCurrentTime', video.currentTime);
+			localStorage.setItem('InmsDuration', video.duration); // Get totalt duration of video
+			localStorage.setItem('InmsCurrentGuideURL', currentGuideURL);
+			localStorage.setItem('InmsCurrentGuideImage', currentGuideImage);
 		}
 	});
 
-	// Get value from sessionStorage in present
-	if (sessionStorage.getItem('InmsCurrentTime')) {
-		var videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
+	// Get value from localStorage in present
+	if (localStorage.getItem('InmsCurrentTime')) {
+		var videoCurrentTime = localStorage.getItem('InmsCurrentTime');
 
 		if (videoCurrentTime > 0) {
 			video.currentTime = videoCurrentTime;
@@ -93,10 +95,10 @@ if (sourceElement) {
 			manualStep = false;
 			forwardsButton.removeAttribute('disabled');
 			subtitlesContainer.innerHTML = '';
-			sessionStorage.removeItem('InmsCurrentTime');
-			sessionStorage.removeItem('InmsDuration');
-			sessionStorage.removeItem('InmsCurrentGuideURL');
-			sessionStorage.removeItem('InmsCurrentGuideImage');
+			localStorage.removeItem('InmsCurrentTime');
+			localStorage.removeItem('InmsDuration');
+			localStorage.removeItem('InmsCurrentGuideURL');
+			localStorage.removeItem('InmsCurrentGuideImage');
 		});
 	}
 
@@ -109,13 +111,20 @@ if (sourceElement) {
 			forwardsButton.removeAttribute('disabled');
 			currentChapter = 1;
 			manualStep = false;
-			sessionStorage.removeItem('InmsCurrentTime');
-			sessionStorage.removeItem('InmsDuration');
-			sessionStorage.removeItem('InmsCurrentGuideURL');
-			sessionStorage.removeItem('InmsCurrentGuideImage');
+			localStorage.removeItem('InmsCurrentTime');
+			localStorage.removeItem('InmsDuration');
+			localStorage.removeItem('InmsCurrentGuideURL');
+			localStorage.removeItem('InmsCurrentGuideImage');
 			window.location.href = urlTarget;
 		});
 	}
+
+	if (navigationButton) {
+		navigationButton.addEventListener('click', function () {
+			navigationButton.classList.toggle('is-toggeled');
+			timeLinePosts.classList.toggle('is-visible');
+		});
+	}
 }
 
 function displayChapters() {
@@ -153,7 +162,7 @@ function displayChapters() {
 					});
 
 					// If not set in sessionStorgare, set first cue on forward button on page load
-					if (!sessionStorage.getItem('InmsCurrentTime')) {
+					if (!localStorage.getItem('InmsCurrentTime')) {
 						forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
 					}
 				}, 100);
@@ -253,7 +262,12 @@ function displayChapters() {
 						timelinePost.classList.remove('is-current');
 					});
 
-					document.querySelector('[data-id="' + metadataCueMatch + '"]').classList.add('is-current');
+					var idSelectors = document.querySelectorAll('[data-id="' + metadataCueMatch + '"]');
+
+					[].forEach.call(idSelectors, function (idSelector) {
+						idSelector.classList.add('is-current');
+						idSelector.focus();
+					});
 
 					if (chapterCues) {
 						var chapterStartTime = chapterCues.startTime;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.22.3-beta.0.9",
+	"version": "2.22.5",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -11,14 +11,13 @@
 		"build:fractal": "fractal build",
 		"scss": "sass src/app.scss public/assets/css/app.css",
 		"stylelint": "stylelint 'src/**/*.scss' '!**/vendor/**' '!**/colors/_colors-functions.scss' --fix --cache --cache-location '.stylelintcache'",
-		"autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' public/assets/css/app.css -d public/assets/css/",
 		"cssmin": "postcss --use cssnano -b '' public/assets/css/app.css > public/assets/css/app.min.css",
 		"browserify": "browserify public/assets/js/cjs/app.js -o public/assets/js/scripts.js",
 		"babel": "npx babel src --out-dir public/assets/js/cjs --ignore src/**/*.config.js",
 		"eslint": "eslint --fix src",
 		"uglify": "uglifyjs -o public/assets/js/scripts.js public/assets/js/scripts.js",
 		"imagemin": "imagemin --out-dir=public/assets/img src/**/*.{png,jpg,gif}",
-		"build:css": "npm run stylelint && npm run scss && npm run autoprefixer && npm run cssmin",
+		"build:css": "npm run stylelint && npm run scss && npm run cssmin",
 		"build:js": "npm run eslint && npm run babel && npm run browserify",
 		"build:img": "npm run imagemin",
 		"watch:css": "onchange 'src/**/*.scss' -- npm run build:css",
@@ -45,7 +44,6 @@
 		"@frctl/mandelbrot": "^1.9.2",
 		"@internetstiftelsen/eslint-config": "^0.0.5",
 		"@internetstiftelsen/stylelint-config": "^1.0.0",
-		"autoprefixer": "^10.2.6",
 		"babel-cli": "^6.26.0",
 		"babel-eslint": "^10.0.3",
 		"babel-plugin-syntax-dynamic-import": "^6.18.0",

package/src/app.scss

@@ -66,7 +66,6 @@ $namespace: '';
 @import 'molecules/glider/glider';
 @import 'molecules/glider/glider-course';
 @import 'molecules/glider/glider-hero';
-@import 'molecules/continue-video-guide/continue-video-guide';
 
 // Organisms
 @import 'organisms/header/header';
@@ -86,8 +85,6 @@ $namespace: '';
 @import 'organisms/event-listing-item/event-listing-item';
 @import 'organisms/podcast/podcast-episodes';
 @import 'organisms/podcast/podcast-player';
-@import 'organisms/video-guide/video-guide';
-@import 'organisms/timeline/timeline';
 
 // Structures
 @import 'structures/manifest';

package/src/assets/js/objToQuery.js

@@ -9,11 +9,11 @@ const objToQuery = (obj, exclude = [], parent = null) => {
 		const queryKey = (parent) ? `${parent}[${key}]` : key;
 
 		if (Array.isArray(value)) {
-			value.forEach((subValue) => query.push(`${queryKey}[]=${subValue}`));
+			value.forEach((subValue) => query.push(`${queryKey}[]=${encodeURIComponent(subValue)}`));
 		} else if (typeof value === 'object') {
 			query.push(objToQuery(value, exclude, queryKey));
 		} else {
-			query.push(`${queryKey}=${value}`);
+			query.push(`${queryKey}=${encodeURIComponent(value)}`);
 		}
 	});
 

package/src/assets/js/youtube.js

@@ -7,10 +7,8 @@ function loadYoutubeAPI() {
 	firstScript.parentNode.insertBefore(tag, firstScript);
 }
 
-function onPlayerReady(el, e) {
-	el.addEventListener('click', () => {
-		e.target.playVideo();
-	});
+function onPlayerReady(el) {
+	el.setAttribute('data-youtube-ready', 'true');
 }
 
 function onPlayerStateChange(el, e) {
@@ -30,16 +28,28 @@ function createCover(el, id) {
 }
 
 function setupYoutubePlayer(el) {
-	const playerEl = document.createElement('div');
+	let playerEl;
 	const id = el.getAttribute('data-youtube');
 
+	if (el.youtube) {
+		playerEl = el.querySelector('[data-youtube-container]');
+
+		playerEl.parentNode.removeChild(playerEl);
+		el.youtube.destroy();
+		el.youtube = null;
+		el.removeAttribute('data-youtube-ready');
+	}
+
+	playerEl = document.createElement('div');
+
 	if (!el.getElementsByTagName('img').length) {
 		createCover(el, id);
 	}
 
+	playerEl.setAttribute('data-youtube-container', true);
 	el.appendChild(playerEl);
 
-	const player = new YT.Player(playerEl, {
+	el.youtube = new YT.Player(playerEl, {
 		height: '100%',
 		width: '100%',
 		videoId: id,
@@ -53,18 +63,33 @@ function setupYoutubePlayer(el) {
 			onStateChange: (e) => onPlayerStateChange(el, e),
 		},
 	});
+}
 
-	el.youtube = player;
+function delegateClick(e) {
+	const el = e.target.closest('[data-youtube]');
+
+	if (!el || !el.youtube) {
+		return;
+	}
+
+	el.youtube.playVideo();
 }
 
-window.onYouTubeIframeAPIReady = () => {
-	const players = document.querySelectorAll('[data-youtube]');
+// eslint-disable-next-line import/prefer-default-export
+export function setupPlayers(container) {
+	const players = container.querySelectorAll('[data-youtube]');
 
 	if (!players.length) {
 		return;
 	}
 
 	[].forEach.call(players, setupYoutubePlayer);
+}
+
+window.onYouTubeIframeAPIReady = () => {
+	setupPlayers(document);
+
+	document.body.addEventListener('click', delegateClick);
 };
 
 loadYoutubeAPI();

package/src/assets/video/chapters.vtt

@@ -1,25 +1,25 @@
 WEBVTT
 
 00:00:00.000 --> 00:00:39.000
-1 / 8: Introduktion
+Kapitel 1 / 8: Introduktion
 
 00:00:39.000 --> 00:01:51.500
-2 / 8: Idén om internet
+Kapitel 2 / 8: Idén om internet
 
 00:01:51.500 --> 00:02:53.000
-3 / 8: Arpanet blir till
+Kapitel 3 / 8: Arpanet blir till
 
 00:02:53.000 --> 00:03:27.000
-4 / 8: TCP/IP uppfinns
+Kapitel 4 / 8: TCP/IP uppfinns
 
 00:03:27.000 --> 00:03:56.500
-5 / 8: Sveriges första internetnod
+Kapitel 5 / 8: Sveriges första internetnod
 
 00:03:56.500 --> 00:04:34.000
-6 / 8: Toppdomänen .se registreras
+Kapitel 6 / 8: Toppdomänen .se registreras
 
 00:04:34.000 --> 00:05:17.000
-7 / 8: World Wide Web
+Kapitel 7 / 8: World Wide Web
 
 00:05:17.000 --> 00:06:28.000
-8 / 8: Mosaic - den grafiska webbläsaren
+Kapitel 8 / 8: Mosaic - den grafiska webbläsaren

package/src/assets/video/metadata.vtt

@@ -1,8 +1,11 @@
 WEBVTT
 
-00:00:00.000 --> 00:00:39.000
+00:00:00.000 --> 00:00:25.000
 6513
 
+00:00:25.000 --> 00:00:39.000
+5555
+
 00:00:39.000 --> 00:01:51.500
 1376
 

package/src/atoms/tag/_tag.scss

@@ -11,9 +11,9 @@
 	z-index: z_index(middleground);
 	margin-right: rhythm(1);
 	margin-bottom: rhythm(1);
-	padding: rhythm(0.5) rhythm(2);
+	padding: rhythm(1) rhythm(2);
 	font-size: $small-text;
-	line-height: 1.8;
+	line-height: 1;
 	text-decoration: none;
 	text-transform: uppercase;
 

package/src/brandbook/internetstiftelsen/bildman/303/251r/bildman/303/251r.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	status: 'ready',
+	label: 'Bildmanér',
+	title: 'Bildmanér'
+}

package/src/brandbook/internetstiftelsen/tonalitet och spr/303/245kbruk/tonalitet och spr/303/245kbruk.config.js"

@@ -0,0 +1,5 @@
+module.exports = {
+	status: 'ready',
+	label: 'Tonalitet och språkbruk',
+	title: 'Tonalitet och språkbruk'
+}

package/src/components.js

@@ -24,6 +24,3 @@ import './molecules/glider/glider-course';
 import './molecules/glider/glider-hero';
 import './molecules/context-menu/context-menu';
 import './molecules/alert/alert';
-import './molecules/continue-video-guide/continue-video-guide';
-import './organisms/video-guide/video-guide';
-import './organisms/timeline/timeline';

package/src/configurations/_wordpress.scss

@@ -339,3 +339,12 @@ div.aligncenter {
 	border-radius: $border-radius;
 	overflow: hidden;
 }
+
+.wp-block-graph {
+	padding-top: rhythm(4);
+	margin-top: rhythm(4);
+
+	& + & {
+		margin-top: -#{rhythm(3)};
+	}
+}

package/src/configurations/grid/_grid.scss

@@ -1,5 +1,7 @@
 @charset 'UTF-8';
 
+@use "sass:math";
+
 // Grid only
 //
 // Includes relevant variables and mixins for the flexbox grid
@@ -83,15 +85,15 @@
 	}
 
 	@include bp-up(sm) {
-		$bp-gap: $gap * 1.25;
-
 		margin: rhythm($margin * 1.25) 0 0;
 
 		&:not(.asymmetric-reversed) {
+			$bp-gap: $gap * 1.25;
 			@include make-asymmetric-cols($bp-gap);
 		}
 
 		&.asymmetric-reversed {
+			$bp-gap: math.div($gap, 2);
 			@include make-asymmetric-cols($bp-gap, true);
 		}
 	}
@@ -103,30 +105,32 @@
 	}
 
 	@include bp-up(lg) {
-		$bp-gap: $gap * 1.5;
+
 
 		margin: rhythm($margin * 1.5) 0 0;
 
 		&:not(.asymmetric-reversed) {
+			$bp-gap: $gap * 1.5;
 			@include make-asymmetric-cols($bp-gap);
 		}
 
 		&.asymmetric-reversed {
+			$bp-gap: $gap;
 			@include make-asymmetric-cols($bp-gap, true);
 			margin-bottom: calc(180px);
 		}
 	}
 
 	@include bp-up(xl) {
-		$bp-gap: $gap * 2;
-
 		margin: rhythm($margin * 2) 0 0;
 
 		&:not(.asymmetric-reversed) {
+			$bp-gap: $gap * 2;
 			@include make-asymmetric-cols($bp-gap);
 		}
 
 		&.asymmetric-reversed {
+			$bp-gap: $gap;
 			@include make-asymmetric-cols($bp-gap, true);
 			margin-bottom: calc(216px);
 		}