daniel/emacs
1
2
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity

ox-reveal update

Browse Source
This commit is contained in:
Daniel Weschke
2022-04-25 18:47:51 +02:00
parent 2ff6f7e396
commit 2db1c0afe0
84 changed files with 15869 additions and 5383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scripts/reveal.js/css/layout.scss
View File

@@ -16,7 +16,7 @@
box-sizing: border-box;
}
// Text that auto-fits it's container
// Text that auto-fits its container
.reveal .r-fit-text {
display: inline-block; // https://github.com/rikschennink/fitty#performance
white-space: nowrap;

82
scripts/reveal.js/css/reveal.scss
View File

@@ -1,3 +1,5 @@
@use "sass:math";
/**
* reveal.js
* http://revealjs.com
@@ -31,6 +33,16 @@ html.reveal-full-page {
color: #000;
}
// Force the presentation to cover the full viewport when we
// enter fullscreen mode. Fixes sizing issues in Safari.
.reveal-viewport:fullscreen {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
}
/*********************************************
* VIEW FRAGMENTS
@@ -247,11 +259,11 @@ $controlsArrowAngleActive: 36deg;
@mixin controlsArrowTransform( $angle ) {
&:before {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( $angle );
}
&:after {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( -$angle );
}
}
@@ -300,11 +312,11 @@ $controlsArrowAngleActive: 36deg;
left: 0;
width: $controlArrowLength;
height: $controlArrowThickness;
border-radius: $controlArrowThickness/2;
border-radius: $controlArrowThickness*0.5;
background-color: currentColor;
transition: all 0.15s ease, background-color 0.8s ease;
transform-origin: floor(($controlArrowThickness/2)*10)/10 50%;
transform-origin: math.div(floor(($controlArrowThickness*0.5)*10), 10) 50%;
will-change: transform;
}
@@ -326,7 +338,7 @@ $controlsArrowAngleActive: 36deg;
.navigate-left {
right: $controlArrowSize + $controlArrowSpacing*2;
bottom: $controlArrowSpacing + $controlArrowSize/2;
bottom: $controlArrowSpacing + $controlArrowSize*0.5;
transform: translateX( -10px );
&.highlight {
@@ -336,7 +348,7 @@ $controlsArrowAngleActive: 36deg;
.navigate-right {
right: 0;
bottom: $controlArrowSpacing + $controlArrowSize/2;
bottom: $controlArrowSpacing + $controlArrowSize*0.5;
transform: translateX( 10px );
.controls-arrow {
@@ -349,7 +361,7 @@ $controlsArrowAngleActive: 36deg;
}
.navigate-up {
right: $controlArrowSpacing + $controlArrowSize/2;
right: $controlArrowSpacing + $controlArrowSize*0.5;
bottom: $controlArrowSpacing*2 + $controlArrowSize;
transform: translateY( -10px );
@@ -359,7 +371,7 @@ $controlsArrowAngleActive: 36deg;
}
.navigate-down {
right: $controlArrowSpacing + $controlArrowSize/2;
right: $controlArrowSpacing + $controlArrowSize*0.5;
bottom: -$controlArrowSpacing;
padding-bottom: $controlArrowSpacing;
transform: translateY( 10px );
@@ -515,25 +527,25 @@ $controlsArrowAngleActive: 36deg;
.navigate-left {
top: 50%;
left: $spacing;
margin-top: -$controlArrowSize/2;
margin-top: -$controlArrowSize*0.5;
}
.navigate-right {
top: 50%;
right: $spacing;
margin-top: -$controlArrowSize/2;
margin-top: -$controlArrowSize*0.5;
}
.navigate-up {
top: $spacing;
left: 50%;
margin-left: -$controlArrowSize/2;
margin-left: -$controlArrowSize*0.5;
}
.navigate-down {
bottom: $spacing - $controlArrowSpacing + 0.3em;
left: 50%;
margin-left: -$controlArrowSize/2;
margin-left: -$controlArrowSize*0.5;
}
}
@@ -769,9 +781,6 @@ $controlsArrowAngleActive: 36deg;
*********************************************/
@each $stylename in slide, linear {
.reveal.#{$stylename} section {
backface-visibility: hidden;
}
@include transition-horizontal-past(#{$stylename}) {
transform: translate(-150%, 0);
}
@@ -1158,54 +1167,53 @@ $controlsArrowAngleActive: 36deg;
}
/* Immediate transition style */
.reveal[data-background-transition=none]>.backgrounds .slide-background,
.reveal[data-background-transition=none]>.backgrounds .slide-background:not([data-background-transition]),
.reveal>.backgrounds .slide-background[data-background-transition=none] {
transition: none;
}
/* Slide */
.reveal[data-background-transition=slide]>.backgrounds .slide-background,
.reveal[data-background-transition=slide]>.backgrounds .slide-background:not([data-background-transition]),
.reveal>.backgrounds .slide-background[data-background-transition=slide] {
opacity: 1;
backface-visibility: hidden;
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background.past,
.reveal[data-background-transition=slide]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
transform: translate(-100%, 0);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background.future,
.reveal[data-background-transition=slide]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
transform: translate(100%, 0);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past,
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
transform: translate(0, -100%);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future,
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
transform: translate(0, 100%);
}
/* Convex */
.reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
.reveal[data-background-transition=convex]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
.reveal[data-background-transition=convex]>.backgrounds .slide-background.future,
.reveal[data-background-transition=convex]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
opacity: 0;
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past,
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
opacity: 0;
transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
}
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
opacity: 0;
transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
@@ -1213,54 +1221,54 @@ $controlsArrowAngleActive: 36deg;
/* Concave */
.reveal[data-background-transition=concave]>.backgrounds .slide-background.past,
.reveal[data-background-transition=concave]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
}
.reveal[data-background-transition=concave]>.backgrounds .slide-background.future,
.reveal[data-background-transition=concave]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
opacity: 0;
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
}
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past,
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
opacity: 0;
transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
}
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future,
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
opacity: 0;
transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
}
/* Zoom */
.reveal[data-background-transition=zoom]>.backgrounds .slide-background,
.reveal[data-background-transition=zoom]>.backgrounds .slide-background:not([data-background-transition]),
.reveal>.backgrounds .slide-background[data-background-transition=zoom] {
transition-timing-function: ease;
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past,
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
transform: scale(16);
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future,
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
transform: scale(0.2);
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past,
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
transform: scale(16);
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future,
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
@@ -1701,7 +1709,7 @@ $notesWidthPercent: 25%;
.reveal .speaker-notes {
display: none;
position: absolute;
width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
width: math.div($notesWidthPercent, (1 - math.div($notesWidthPercent,100))) * 1%;
height: 100%;
top: 0;
left: 100%;
@@ -1764,7 +1772,6 @@ $notesWidthPercent: 25%;
top: 100%;
left: 0;
width: 100%;
height: (30/0.7)*1%;
height: 30vh;
border: 0;
}
@@ -1778,7 +1785,6 @@ $notesWidthPercent: 25%;
.reveal.show-notes .speaker-notes {
top: 100%;
height: (40/0.6)*1%;
height: 40vh;
}

47
scripts/reveal.js/css/theme/template/exposer.scss
View File

@@ -1,27 +1,28 @@
// Exposes theme's variables for easy re-use in CSS for plugin authors
:root {
--background-color: #{$backgroundColor};
--main-font: #{$mainFont};
--main-font-size: #{$mainFontSize};
--main-color: #{$mainColor};
--block-margin: #{$blockMargin};
--heading-margin: #{$headingMargin};
--heading-font: #{$headingFont};
--heading-color: #{$headingColor};
--heading-line-height: #{$headingLineHeight};
--heading-letter-spacing: #{$headingLetterSpacing};
--heading-text-transform: #{$headingTextTransform};
--heading-text-shadow: #{$headingTextShadow};
--heading-font-weight: #{$headingFontWeight};
--heading1-text-shadow: #{$heading1TextShadow};
--heading1-size: #{$heading1Size};
--heading2-size: #{$heading2Size};
--heading3-size: #{$heading3Size};
--heading4-size: #{$heading4Size};
--code-font: #{$codeFont};
--link-color: #{$linkColor};
--link-color-hover: #{$linkColorHover};
--selection-background-color: #{$selectionBackgroundColor};
--selection-color: #{$selectionColor};
--r-background-color: #{$backgroundColor};
--r-main-font: #{$mainFont};
--r-main-font-size: #{$mainFontSize};
--r-main-color: #{$mainColor};
--r-block-margin: #{$blockMargin};
--r-heading-margin: #{$headingMargin};
--r-heading-font: #{$headingFont};
--r-heading-color: #{$headingColor};
--r-heading-line-height: #{$headingLineHeight};
--r-heading-letter-spacing: #{$headingLetterSpacing};
--r-heading-text-transform: #{$headingTextTransform};
--r-heading-text-shadow: #{$headingTextShadow};
--r-heading-font-weight: #{$headingFontWeight};
--r-heading1-text-shadow: #{$heading1TextShadow};
--r-heading1-size: #{$heading1Size};
--r-heading2-size: #{$heading2Size};
--r-heading3-size: #{$heading3Size};
--r-heading4-size: #{$heading4Size};
--r-code-font: #{$codeFont};
--r-link-color: #{$linkColor};
--r-link-color-dark: #{darken($linkColor , 15% )};
--r-link-color-hover: #{$linkColorHover};
--r-selection-background-color: #{$selectionBackgroundColor};
--r-selection-color: #{$selectionColor};
}

81
scripts/reveal.js/css/theme/template/theme.scss
View File

@@ -8,25 +8,25 @@
.reveal-viewport {
@include bodyBackground();
background-color: $backgroundColor;
background-color: var(--r-background-color);
}
.reveal {
font-family: $mainFont;
font-size: $mainFontSize;
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: $mainColor;
color: var(--r-main-color);
}
.reveal ::selection {
color: $selectionColor;
background: $selectionBackgroundColor;
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: $selectionColor;
background: $selectionBackgroundColor;
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
@@ -46,27 +46,27 @@
.reveal h4,
.reveal h5,
.reveal h6 {
margin: $headingMargin;
color: $headingColor;
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: $headingFont;
font-weight: $headingFontWeight;
line-height: $headingLineHeight;
letter-spacing: $headingLetterSpacing;
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: $headingTextTransform;
text-shadow: $headingTextShadow;
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {font-size: $heading1Size; }
.reveal h2 {font-size: $heading2Size; }
.reveal h3 {font-size: $heading3Size; }
.reveal h4 {font-size: $heading4Size; }
.reveal h1 {font-size: var(--r-heading1-size); }
.reveal h2 {font-size: var(--r-heading2-size); }
.reveal h3 {font-size: var(--r-heading3-size); }
.reveal h4 {font-size: var(--r-heading4-size); }
.reveal h1 {
text-shadow: $heading1TextShadow;
text-shadow: var(--r-heading1-text-shadow);
}
@@ -75,7 +75,7 @@
*********************************************/
.reveal p {
margin: $blockMargin 0;
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
@@ -150,7 +150,7 @@
display: block;
position: relative;
width: 70%;
margin: $blockMargin auto;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
@@ -170,11 +170,11 @@
display: block;
position: relative;
width: 90%;
margin: $blockMargin auto;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: $codeFont;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
@@ -183,8 +183,9 @@
}
.reveal code {
font-family: $codeFont;
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
@@ -195,6 +196,14 @@
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
@@ -248,7 +257,7 @@
}
.reveal img {
margin: $blockMargin 0;
margin: var(--r-block-margin) 0;
}
@@ -257,19 +266,21 @@
*********************************************/
.reveal a {
color: $linkColor;
color: var(--r-link-color);
text-decoration: none;
transition: color .15s ease;
}
.reveal a:hover {
color: $linkColorHover;
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: darken( $linkColor, 15% );
// background: darken( var(--r-link-color), 15% );
background: var(--r-link-color-dark);
}
@@ -278,7 +289,7 @@
*********************************************/
.reveal .r-frame {
border: 4px solid $mainColor;
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
@@ -287,7 +298,7 @@
}
.reveal a:hover .r-frame {
border-color: $linkColor;
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
@@ -297,7 +308,7 @@
*********************************************/
.reveal .controls {
color: $linkColor;
color: var(--r-link-color);
}
@@ -307,7 +318,7 @@
.reveal .progress {
background: rgba(0,0,0,0.2);
color: $linkColor;
color: var(--r-link-color);
}
/*********************************************
@@ -315,6 +326,6 @@
*********************************************/
@media print {
.backgrounds {
background-color: $backgroundColor;
background-color: var(--r-background-color);
}
}