Skip to content

Instantly share code, notes, and snippets.

@Myfanwy
Last active August 20, 2023 16:58
Show Gist options
  • Save Myfanwy/00d5031c3c35d1370c8fc851c51dfc82 to your computer and use it in GitHub Desktop.
Save Myfanwy/00d5031c3c35d1370c8fc851c51dfc82 to your computer and use it in GitHub Desktop.
Custom css for reveal.js slideshow
/**
* A simple theme for myfanwy.github.io
*
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
<link href='http://fonts.googleapis.com/css?family=Megrim' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:300,400,700' rel='stylesheet' type='text/css'>
/*********************************************
* GLOBAL STYLES
*********************************************/
body {
background: png("concrete_seamless.png");
}
.slide {
text-align: left;
background-size: contain !important;
}
::selection {
color: #fff;
background: #e7ad52;
text-shadow: none; }
.reveal .slides > section,
.reveal .slides > section > section {
line-height: 1.3;
font-weight: inherit; }
.reveal {
font-family: "Raleway";
font-size: 1.5em;
font-weight: normal;
color: #46ACC8; }
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: 0 0 20px 0;
color: #46ACC8;
font-family: "Megrim", cursive;
font-weight: normal;
line-height: 1.2;
letter-spacing: normal;
text-transform: none;
text-shadow: none;
word-wrap: break-word; }
.reveal h1 {
font-size: 1.50em;
}
.reveal h2 {
font-size:1.875em;
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
color: #DD8D29;
font-family: 'Raleway', sans-serif;
text-align: right;
text-indent: 50px;
font-size: 0.70em;
font-weight: 400;
}
.reveal section .data-background {
data-background: url("concrete_seamless.png");
background-repeat: repeat;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%; }
/*********************************************
* LINKS
*********************************************/
.reveal a:link,
.reveal a:hover,
.reveal a:active {
color: #46ACC8; /*Fantastic Mr. Fox */
text-decoration: none;
}
/* visited link */
.reveal a:visited {
color: #46ACC8; /* gray */
text-decoration: none;
}
/* mouse over link */
.reveal a:hover {
color: #DD8D29;
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls .navigate-left,
.reveal .controls .navigate-left.enabled {
border-right-color: #00008B; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #00008B; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #00008B; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #00008B; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #0000f1; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #0000f1; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #0000f1; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #0000f1; }
/*********************************************
* CUSTOM PAGES
*********************************************/
.reveal .slides #title-slide {
background-image: png(concrete_seamless.png);
}
/* ineffective thus far: */
.reveal section img {
background: #002b36; /*theme background color: https://github.com/rstudio/revealjs/tree/master/inst/reveal.js-3.2.0/css/theme*/
border: 0;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
/*max-width: 500px;*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment