Skip to content

Commit

Permalink
Merge pull request #146 from davidovich/pr/chrisreddington/115
Browse files Browse the repository at this point in the history
Brings up to date pr/chrisreddington/115 and reveal-js 4.4.0
  • Loading branch information
dzello authored Feb 7, 2023
2 parents 57e6200 + 3d53962 commit 0c25015
Show file tree
Hide file tree
Showing 122 changed files with 6,402 additions and 13,924 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
node_modules
public
exampleSite/resources/_gen
.hugo_build.lock
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -430,8 +430,8 @@ theme = "moon"
# the following supposes that menu is accessible in static dir
[[params.reveal_hugo.plugins]]
# Name the plugin. This should be the same name used to register a reveal-js plugin,
# for example RevealMenu, RevealNotes
name = RevealMenu
# for example: `RevealMenu`, `RevealNotes`
name = "RevealMenu"
source = "menu/menu.js"
css = "menu/menu.css"
# verbatim = true # should the css and source paths be used as-is ?
Expand Down Expand Up @@ -512,8 +512,8 @@ Reveal.js theme customization is easiest to do by overriding variables in the SC
If you just wanted to change the presentation colors, here's what you might put in `custom-theme.scss`:

```scss
@import "../reveal-js/css/theme/template/mixins";
@import "../reveal-js/css/theme/template/settings";
@import "../reveal-js/dist/theme/template/mixins";
@import "../reveal-js/dist/theme/template/settings";

$backgroundColor: rgb(3, 129, 45);
$mainColor: #fff;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
## Dependencies

Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceeding: https://github.com/hakimel/reveal.js#full-setup
Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment installed before proceeding: https://revealjs.com/installation/#full-setup

## Creating a Theme

To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/gruntfile.js)) when you run `npm run build -- css-themes`.
To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build -- css-themes`.

Each theme file does four things in the following order:

Expand Down
69 changes: 69 additions & 0 deletions assets/reveal-js/dist/layout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/**
* Layout helpers.
*/

// Stretch an element vertically based on available space
.reveal .stretch,
.reveal .r-stretch {
max-width: none;
max-height: none;
}

.reveal pre.stretch code,
.reveal pre.r-stretch code {
height: 100%;
max-height: 100%;
box-sizing: border-box;
}

// Text that auto-fits it's container
.reveal .r-fit-text {
display: inline-block; // https://github.com/rikschennink/fitty#performance
white-space: nowrap;
}

// Stack multiple elements on top of each other
.reveal .r-stack {
display: grid;
}

.reveal .r-stack > * {
grid-area: 1/1;
margin: auto;
}

// Horizontal and vertical stacks
.reveal .r-vstack,
.reveal .r-hstack {
display: flex;

img, video {
min-width: 0;
min-height: 0;
object-fit: contain;
}
}

.reveal .r-vstack {
flex-direction: column;
align-items: center;
justify-content: center;
}

.reveal .r-hstack {
flex-direction: row;
align-items: center;
justify-content: center;
}

// Naming based on tailwindcss
.reveal .items-stretch { align-items: stretch; }
.reveal .items-start { align-items: flex-start; }
.reveal .items-center { align-items: center; }
.reveal .items-end { align-items: flex-end; }

.reveal .justify-between { justify-content: space-between; }
.reveal .justify-around { justify-content: space-around; }
.reveal .justify-start { justify-content: flex-start; }
.reveal .justify-center { justify-content: center; }
.reveal .justify-end { justify-content: flex-end; }
Loading

0 comments on commit 0c25015

Please sign in to comment.