more flexible control size using em

1 files changed, 15 insertions, 17 deletions

diff --git a/css/reveal.scss b/css/reveal.scss
index a5e9560..9c80a22 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -248,14 +248,14 @@ body {
 }
 
 .reveal .controls {
-	$size: 46px;
-	$length: floor($size * 0.7);
-	$thickness: 6px;
-	$angle: 44deg;
+	$size: 3.6em;
+	$length: 2.6em;
+	$thickness: 0.5em;
+	$angle: 45deg;
 	$angleHover: 40deg;
 	$angleActive: 36deg;
 	$spacing: 12px;
-	$innerSpacing: 18px;
+	$innerSpacing: 1.4em;
 
 	@mixin arrowTransform( $angle ) {
 		&:before {
@@ -276,6 +276,7 @@ body {
 	z-index: 1;
 	color: #fff;
 	pointer-events: none;
+	font-size: 10px;
 
 	button {
 		position: absolute;
@@ -291,6 +292,7 @@ body {
 					transform 0.2s ease;
 		z-index: 2; // above slides
 		pointer-events: auto;
+		font-size: inherit;
 
 		visibility: hidden;
 		opacity: 0;
@@ -333,21 +335,17 @@ body {
 
 	.navigate-left {
 		right: $size + $innerSpacing*2;
-		bottom: $innerSpacing;
+		bottom: $innerSpacing + $size/2;
 		transform: translateX( -10px );
-
-		.pagination-arrow {
-			transform: translateY(-50%);
-		}
 	}
 
 	.navigate-right {
 		right: 0;
-		bottom: $innerSpacing;
+		bottom: $innerSpacing + $size/2;
 		transform: translateX( 10px );
 
 		.pagination-arrow {
-			transform: translateY(-50%) rotate( 180deg );
+			transform: rotate( 180deg );
 		}
 
 		&.highlight {
@@ -357,7 +355,7 @@ body {
 
 	.navigate-up {
 		right: $innerSpacing;
-		bottom: $size + $innerSpacing*2;
+		bottom: $innerSpacing*2 + $size;
 		transform: translateY( -10px );
 
 		.pagination-arrow {
@@ -366,12 +364,12 @@ body {
 	}
 
 	.navigate-down {
-		right: $innerSpacing;
+		right: $innerSpacing + $size/2;
 		bottom: 0;
 		transform: translateY( 10px );
 
 		.pagination-arrow {
-			transform: translateX(-50%) rotate( -90deg );
+			transform: rotate( -90deg );
 		}
 
 		&.highlight {
@@ -380,7 +378,7 @@ body {
 	}
 
 	// Back arrow style: "faded":
-	// Strongly deemphasizes backwards navigation in favor of drawing
+	// Deemphasize backwards navigation arrows in favor of drawing
 	// attention to forwards navigation
 	&[data-controls-back-arrows="faded"] .navigate-left.enabled,
 	&[data-controls-back-arrows="faded"] .navigate-up.enabled {
@@ -392,7 +390,7 @@ body {
 	}
 
 	// Back arrow style: "hidden":
-	// Never shows any arrows for backwards navigation
+	// Never show arrows for backwards navigation
 	&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
 	&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
 		opacity: 0;