From def52944bf915be1426304a27aad86c07d699427 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Sun, 16 Sep 2018 23:55:06 +0200
Subject: [PATCH] CSS tweaks for embeds, videos and iframe

---
 src/styles/_utils.sass                | 47 ++++++++-------------------
 src/styles/components/_jumbotron.sass |  5 ++-
 2 files changed, 17 insertions(+), 35 deletions(-)

diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass
index 790ab1f4..191a0f63 100644
--- a/src/styles/_utils.sass
+++ b/src/styles/_utils.sass
@@ -130,7 +130,6 @@
 	transform: translate(-50%, -50%)
 
 =input-generic
-	// padding: 5px 5px 5px 0
 	color: $color-text-dark
 	background-color: transparent
 
@@ -361,16 +360,15 @@
 
 =node-details-description
 	+clearfix
-	color: darken($color-text-dark, 5%)
-	font:
-		weight: 300
-		size: 1.2em
-
+	color: $color-text
+	font-size: 1.33em
 	word-break: break-word
 
 	+media-xs
 		font-size: 1.1em
 
+	/* Style links without a class. Usually regular
+	 * links in a comment or node description. */
 	a:not([class])
 		color: $color-text-dark-primary
 		text-decoration: underline
@@ -383,11 +381,6 @@
 		line-height: 1.5em
 		word-wrap: break-word
 
-	h1, h2, h3, h4, h5, h6
-		padding:
-			top: 20px
-			right: 20px
-
 	blockquote
 		background-color: lighten($color-background-light, 5%)
 		box-shadow: inset 5px 0 0 $color-background
@@ -408,10 +401,10 @@
 	img,
 	p img,
 	ul li img
+		@extend .d-block
+		@extend .mx-auto
+		@extend .my-3
 		max-width: 100%
-		padding:
-			bottom: 25px
-			top: 25px
 
 		&.emoji
 			display: inline-block
@@ -424,25 +417,13 @@
 			font-size: 1.5em
 
 	/* e.g. YouTube embed */
-	iframe
-		height: auto
-		margin: 15px auto
+	iframe, video
 		max-width: 100%
-		min-height: 500px
-		width: 100%
+		@extend .mx-auto
 
-	+media-sm
-		iframe
-			min-height: 314px
-	+media-xs
-		iframe
-			min-height: 314px
-
-	iframe[src^="https://www.youtube"]
-		+media-xs
-			iframe
-				min-height: 420px
-		min-height: 500px
+	.embed-responsive,
+	video
+		@extend .my-3
 
 	iframe[src^="https://w.soundcloud"]
 		min-height: auto
@@ -570,9 +551,7 @@
 
 /* Bootstrap's img-responsive class */
 =img-responsive
-	display: block
-	max-width: 100%
-	height: auto
+	@extend .img-fluid
 
 /* Set the color for a specified property
  * 1: $property: e.g. background-color
diff --git a/src/styles/components/_jumbotron.sass b/src/styles/components/_jumbotron.sass
index 7775bb8d..4c84a02a 100644
--- a/src/styles/components/_jumbotron.sass
+++ b/src/styles/components/_jumbotron.sass
@@ -3,7 +3,10 @@
 	@extend .d-flex
 	@extend .mb-0
 	@extend .rounded-0
-	background-size: cover
+	background:
+		position: center
+		repeat: no-repeat
+		size: cover
 	margin-bottom: 0
 	padding-top: 10em
 	padding-bottom: 10em