more flexible control size using em

css/reveal.css

@@ -240,7 +240,8 @@ body {
   left: auto;
   z-index: 1;
   color: #fff;
-  pointer-events: none; }
+  pointer-events: none;
+  font-size: 10px; }
   .reveal .controls button {
     position: absolute;
     padding: 0;
@@ -255,6 +256,7 @@ body {
     transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
     z-index: 2;
     pointer-events: auto;
+    font-size: inherit;
     visibility: hidden;
     opacity: 0;
     -webkit-appearance: none;
@@ -265,71 +267,68 @@ body {
     position: absolute;
     top: 0;
     left: 0;
-    width: 32px;
-    height: 6px;
-    border-radius: 3px;
+    width: 2.6em;
+    height: 0.5em;
+    border-radius: 0.25em;
     background-color: currentColor;
     transition: all 0.15s ease, background-color 0.8s ease;
-    -webkit-transform-origin: 3px 50%;
-            transform-origin: 3px 50%;
+    -webkit-transform-origin: 0.25em 50%;
+            transform-origin: 0.25em 50%;
     will-change: transform; }
   .reveal .controls .pagination-arrow {
     position: relative;
-    width: 46px;
-    height: 46px; }
+    width: 3.6em;
+    height: 3.6em; }
     .reveal .controls .pagination-arrow:before {
-      -webkit-transform: translateX(7px) translateY(20px) rotate(44deg);
-              transform: translateX(7px) translateY(20px) rotate(44deg); }
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }
     .reveal .controls .pagination-arrow:after {
-      -webkit-transform: translateX(7px) translateY(20px) rotate(-44deg);
-              transform: translateX(7px) translateY(20px) rotate(-44deg); }
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }
     .reveal .controls .pagination-arrow:hover:before {
-      -webkit-transform: translateX(7px) translateY(20px) rotate(40deg);
-              transform: translateX(7px) translateY(20px) rotate(40deg); }
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(40deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(40deg); }
     .reveal .controls .pagination-arrow:hover:after {
-      -webkit-transform: translateX(7px) translateY(20px) rotate(-40deg);
-              transform: translateX(7px) translateY(20px) rotate(-40deg); }
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-40deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(-40deg); }
     .reveal .controls .pagination-arrow:active:before {
-      -webkit-transform: translateX(7px) translateY(20px) rotate(36deg);
-              transform: translateX(7px) translateY(20px) rotate(36deg); }
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(36deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(36deg); }
     .reveal .controls .pagination-arrow:active:after {
-      -webkit-transform: translateX(7px) translateY(20px) rotate(-36deg);
-              transform: translateX(7px) translateY(20px) rotate(-36deg); }
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-36deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(-36deg); }
   .reveal .controls .navigate-left {
-    right: 82px;
-    bottom: 18px;
+    right: 6.4em;
+    bottom: 3.2em;
     -webkit-transform: translateX(-10px);
             transform: translateX(-10px); }
-    .reveal .controls .navigate-left .pagination-arrow {
-      -webkit-transform: translateY(-50%);
-              transform: translateY(-50%); }
   .reveal .controls .navigate-right {
     right: 0;
-    bottom: 18px;
+    bottom: 3.2em;
     -webkit-transform: translateX(10px);
             transform: translateX(10px); }
     .reveal .controls .navigate-right .pagination-arrow {
-      -webkit-transform: translateY(-50%) rotate(180deg);
-              transform: translateY(-50%) rotate(180deg); }
+      -webkit-transform: rotate(180deg);
+              transform: rotate(180deg); }
     .reveal .controls .navigate-right.highlight {
       -webkit-animation: bounce-right 2s 50 both ease-out;
               animation: bounce-right 2s 50 both ease-out; }
   .reveal .controls .navigate-up {
-    right: 18px;
-    bottom: 82px;
+    right: 1.4em;
+    bottom: 6.4em;
     -webkit-transform: translateY(-10px);
             transform: translateY(-10px); }
     .reveal .controls .navigate-up .pagination-arrow {
       -webkit-transform: translateX(-50%) rotate(90deg);
               transform: translateX(-50%) rotate(90deg); }
   .reveal .controls .navigate-down {
-    right: 18px;
+    right: 3.2em;
     bottom: 0;
     -webkit-transform: translateY(10px);
             transform: translateY(10px); }
     .reveal .controls .navigate-down .pagination-arrow {
-      -webkit-transform: translateX(-50%) rotate(-90deg);
-              transform: translateX(-50%) rotate(-90deg); }
+      -webkit-transform: rotate(-90deg);
+              transform: rotate(-90deg); }
     .reveal .controls .navigate-down.highlight {
       -webkit-animation: bounce-down 2s 50 both ease-out;
               animation: bounce-down 2s 50 both ease-out; }

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;