aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2016-06-28 13:34:12 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2017-05-16 09:45:37 +0200
commit44a355b6e969d6a1cfbf23cb44079104d4dc6945 (patch)
tree24acfd0bffdae3e38463a84a6b58b4a92bf9910c
parent10545d41cc3d5d18b964d80182676ef6770f11d3 (diff)
downloadfosdem-2018-presentation-44a355b6e969d6a1cfbf23cb44079104d4dc6945.tar
fosdem-2018-presentation-44a355b6e969d6a1cfbf23cb44079104d4dc6945.tar.gz
'controls-placement' -> 'controls-layout', cut back on controls spacing
-rw-r--r--css/reveal.css96
-rw-r--r--css/reveal.scss8
-rw-r--r--js/reveal.js4
3 files changed, 54 insertions, 54 deletions
diff --git a/css/reveal.css b/css/reveal.css
index 3de6695..8ec6bbd 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -201,8 +201,8 @@ body {
.reveal .controls button {
position: absolute;
padding: 0;
- width: 50px;
- height: 50px;
+ width: 52px;
+ height: 52px;
background-color: transparent;
border: 0;
outline: 0;
@@ -223,49 +223,49 @@ body {
position: absolute;
top: 0;
left: 0;
- width: 30px;
- height: 5px;
- border-radius: 2.5px;
+ width: 31px;
+ height: 6px;
+ border-radius: 3px;
background-color: currentColor;
-webkit-transition: all 0.15s ease, background-color 0.8s ease;
transition: all 0.15s ease, background-color 0.8s ease;
- -webkit-transform-origin: 2.5px 50%;
- transform-origin: 2.5px 50%; }
+ -webkit-transform-origin: 3px 50%;
+ transform-origin: 3px 50%; }
.reveal .controls button:before {
- -webkit-transform: translateX(10px) translateY(22.5px) rotate(44deg);
- transform: translateX(10px) translateY(22.5px) rotate(44deg); }
+ -webkit-transform: translateX(10.5px) translateY(23px) rotate(44deg);
+ transform: translateX(10.5px) translateY(23px) rotate(44deg); }
.reveal .controls button:after {
- -webkit-transform: translateX(10px) translateY(22.5px) rotate(-44deg);
- transform: translateX(10px) translateY(22.5px) rotate(-44deg); }
+ -webkit-transform: translateX(10.5px) translateY(23px) rotate(-44deg);
+ transform: translateX(10.5px) translateY(23px) rotate(-44deg); }
.reveal .controls button:hover:before {
- -webkit-transform: translateX(10px) translateY(22.5px) rotate(40deg);
- transform: translateX(10px) translateY(22.5px) rotate(40deg); }
+ -webkit-transform: translateX(10.5px) translateY(23px) rotate(40deg);
+ transform: translateX(10.5px) translateY(23px) rotate(40deg); }
.reveal .controls button:hover:after {
- -webkit-transform: translateX(10px) translateY(22.5px) rotate(-40deg);
- transform: translateX(10px) translateY(22.5px) rotate(-40deg); }
+ -webkit-transform: translateX(10.5px) translateY(23px) rotate(-40deg);
+ transform: translateX(10.5px) translateY(23px) rotate(-40deg); }
.reveal .controls button:active:before {
- -webkit-transform: translateX(10px) translateY(22.5px) rotate(36deg);
- transform: translateX(10px) translateY(22.5px) rotate(36deg); }
+ -webkit-transform: translateX(10.5px) translateY(23px) rotate(36deg);
+ transform: translateX(10.5px) translateY(23px) rotate(36deg); }
.reveal .controls button:active:after {
- -webkit-transform: translateX(10px) translateY(22.5px) rotate(-36deg);
- transform: translateX(10px) translateY(22.5px) rotate(-36deg); }
+ -webkit-transform: translateX(10.5px) translateY(23px) rotate(-36deg);
+ transform: translateX(10.5px) translateY(23px) rotate(-36deg); }
.reveal .controls .navigate-left {
top: 50%;
- left: 18px;
+ left: 20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.reveal .controls .navigate-right {
top: 50%;
- right: 18px;
+ right: 20px;
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg); }
.reveal .controls .navigate-up {
- top: 18px;
+ top: 20px;
left: 50%;
-webkit-transform: translateX(-50%) rotate(90deg);
transform: translateX(-50%) rotate(90deg); }
.reveal .controls .navigate-down {
- bottom: 18px;
+ bottom: 20px;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg); }
@@ -288,38 +288,38 @@ body {
.reveal .controls .enabled:hover,
.reveal .controls .enabled.fragmented:hover {
opacity: 1; }
- .reveal .controls[data-controls-placement="bottom-right"] {
+ .reveal .controls[data-controls-layout="bottom-right"] {
top: auto;
- bottom: 18px;
- right: 18px;
+ bottom: 20px;
+ right: 20px;
left: auto;
-webkit-transform: scale(0.85);
transform: scale(0.85);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%; }
- .reveal .controls[data-controls-placement="bottom-right"] .navigate-left,
- .reveal .controls[data-controls-placement="bottom-right"] .navigate-right,
- .reveal .controls[data-controls-placement="bottom-right"] .navigate-up,
- .reveal .controls[data-controls-placement="bottom-right"] .navigate-down {
+ .reveal .controls[data-controls-layout="bottom-right"] .navigate-left,
+ .reveal .controls[data-controls-layout="bottom-right"] .navigate-right,
+ .reveal .controls[data-controls-layout="bottom-right"] .navigate-up,
+ .reveal .controls[data-controls-layout="bottom-right"] .navigate-down {
top: auto;
left: auto; }
- .reveal .controls[data-controls-placement="bottom-right"] .navigate-left {
- right: 86px;
- bottom: 18px; }
- .reveal .controls[data-controls-placement="bottom-right"] .navigate-right {
+ .reveal .controls[data-controls-layout="bottom-right"] .navigate-left {
+ right: 92px;
+ bottom: 20px; }
+ .reveal .controls[data-controls-layout="bottom-right"] .navigate-right {
right: 0;
- bottom: 18px; }
- .reveal .controls[data-controls-placement="bottom-right"] .navigate-up {
- right: 18px;
- bottom: 86px; }
- .reveal .controls[data-controls-placement="bottom-right"] .navigate-down {
- right: 18px;
+ bottom: 20px; }
+ .reveal .controls[data-controls-layout="bottom-right"] .navigate-up {
+ right: 20px;
+ bottom: 92px; }
+ .reveal .controls[data-controls-layout="bottom-right"] .navigate-down {
+ right: 20px;
bottom: 0; }
@media screen and (max-width: 500px) {
.reveal .controls {
top: auto;
- bottom: 18px;
- right: 18px;
+ bottom: 20px;
+ right: 20px;
left: auto;
-webkit-transform: scale(0.85);
transform: scale(0.85);
@@ -332,16 +332,16 @@ body {
top: auto;
left: auto; }
.reveal .controls .navigate-left {
- right: 86px;
- bottom: 18px; }
+ right: 92px;
+ bottom: 20px; }
.reveal .controls .navigate-right {
right: 0;
- bottom: 18px; }
+ bottom: 20px; }
.reveal .controls .navigate-up {
- right: 18px;
- bottom: 86px; }
+ right: 20px;
+ bottom: 92px; }
.reveal .controls .navigate-down {
- right: 18px;
+ right: 20px;
bottom: 0; } }
.reveal.has-dark-background .controls button:after,
diff --git a/css/reveal.scss b/css/reveal.scss
index f76fb82..42f5d5e 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -236,10 +236,10 @@ body {
*********************************************/
.reveal .controls {
- $size: 50px;
+ $size: 52px;
$length: floor($size * 0.6);
- $spacing: 18px;
- $thickness: 5px;
+ $spacing: 20px;
+ $thickness: 6px;
$angle: 44deg;
$angleHover: 40deg;
$angleActive: 36deg;
@@ -409,7 +409,7 @@ body {
}
}
- &[data-controls-placement="bottom-right"] {
+ &[data-controls-layout="bottom-right"] {
@include bottom-right-controls()
}
diff --git a/js/reveal.js b/js/reveal.js
index 0e8fbab..594093b 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -53,7 +53,7 @@
controls: true,
// Determines where controls appear, "edges" or "bottom-right"
- controlsPlacement: 'bottom-right',
+ controlsLayout: 'bottom-right',
// Specifies the display rules for backwards navigation arrows;
// "deemphasized", "hidden" or "visible"
@@ -1005,7 +1005,7 @@
dom.controls.style.display = config.controls ? 'block' : 'none';
dom.progress.style.display = config.progress ? 'block' : 'none';
- dom.controls.setAttribute( 'data-controls-placement', config.controlsPlacement );
+ dom.controls.setAttribute( 'data-controls-layout', config.controlsLayout );
dom.controls.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
if( config.shuffle ) {