nlesc-decorations.scss

/**
 * Black theme for reveal.js. This is the opposite of the 'white' theme.
 *
 * By Hakim El Hattab, http://hakim.se
 */


// Default mixins and settings -----------------
@import "reveal.js/css/theme/template/mixins";
@import "reveal.js/css/theme/template/settings";
// ---------------------------------------------


// Include theme-specific fonts
@import url("https://fonts.googleapis.com/css?family=Nunito:bold");
@import url("https://fonts.googleapis.com/css?family=Assistant");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

// Override theme settings (see ../template/settings.scss)

$eScienceBlue: #009DDD;
$eSciencePurple: #380339;
$eScienceYellow: #FFB213;

$backgroundColor: white;

$mainColor: black;
$headingColor: black;

$mainFont: 'Assistant', Helvetica, sans-serif;
$mainFontSize: 28px;
$headingFont: 'Nunito', Helvetica, sans-serif;
$headingTextTransform: none;
$headingFontWeight: bold;
$linkColor: $eScienceYellow;
$linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% );

// Vertical spacing between blocks of text
$blockMargin: 20px;

// Headings
$headingMargin: 0 0 $blockMargin 0;
$heading1Size: 3.0em;
$heading2Size: 2.5em;
$heading3Size: 2.0em;
$heading4Size: 1.5em;


// Theme template ------------------------------
@import "reveal.js/css/theme/template/theme";
// ---------------------------------------------

// Styling for decorations, see nlesc-decorations.js for corresponding elements.

// By default, all decorations are out of view/hidden
#overlay {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s;
	z-index: 1;
	.opacity-10 { opacity: .1; }
	.opacity-20 { opacity: .2; }
	.opacity-30 { opacity: .3; }
	.opacity-40 { opacity: .4; }
	.opacity-50 { opacity: .5; }
	.opacity-60 { opacity: .6; }
	.opacity-70 { opacity: .7; }
	.opacity-80 { opacity: .8; }
	.opacity-90 { opacity: .9; }
	.opacity-100 { opacity: 1; }
  }

  #logo-color, #logo-part-white, #logo-white {
	transition: opacity 1s, left 1s;
	opacity: 0;
	position: absolute;
	left: -12vw;
	top: 1.5vh;
	z-index: 2;
	img {
	  width: 12vw;
	}
  }

  #right-e {
	transition: right 1s, top 1s;
	position: absolute;
	right: -6vw;
	width: 6vw;
	z-index: 3;
  }

  #left-e {
	transition: left 1s, bottom 1s;
	position: absolute;
	width: 6vw;
	left: -6vw;
	z-index: 3;
  }

  #blue-pane {
	transition: opacity 1s;
	background-color: $eScienceBlue;
	opacity: 0;
	position: absolute;
	bottom: 0;
	top: 0;
	z-index: 1;
  }

  #touch-pane {
	background-color: white;
	transition: opacity 1s;
	opacity: 0;
	position: absolute;
	left: 0;
	right: 66.6%;
	bottom: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	h3 {
	  color: black;
	  text-align: left;
	}
  }

  #empowering {
	transition: opacity 1s;
	opacity: 0;
	position: absolute;
	left: 6vw;
	right: 52%;
	bottom: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	h3 {
	  color: white;
	  text-align: left;
	}
  }


  #blue-strip {
	background-color: $eScienceBlue;
	transition: left 1s, right 1s;
	margin: 0;
	padding: 0;
	border-radius: 20vw 0 0 0;
	z-index: 2;
	position: absolute;
	right: -100vw;
	bottom: 0;
	#footer {
	  text-align: right;
	  line-height: 130%;
	  padding: 0;
	  margin: 1vw 1vw 1vw 3vw;
	  bottom: 0;
	  right: 0;
	}
  }

  #yellow-strip {
	background-color: $eScienceYellow;
	width: 18vw;
	height: 85vh;
	border-radius: 10vw 10vw 0 0;
	z-index: 2;
	position: absolute;
	left: -18vw;
	bottom: 0;
	transition: left 1s;
  }

  #yellow-strip.visible { left: 0; }

  #yellow-half-strip-left {
	opacity: 1;
	transition: bottom 1s;
	position: absolute;
	background-color: $eScienceYellow;
	right: 50vw;
	bottom: -25vh;
	width: 17vw;
	height: 25vh;
	border-radius: 20vw 0 0 0;
	z-index: 2;
  }

  #yellow-half-strip-right {
	opacity: 1;
	transition: bottom 1s;
	position: absolute;
	background-color: $eScienceYellow;
	right: 50vw;
	bottom: -25vh;
	width: 17vw;
	height: 25vh;
	border-radius: 0 20vw 0 0;
	z-index: 2;
  }

  #yellow-flag {
	background-color: $eScienceYellow;
	transition: left 1s, bottom 1s;
	width: 10vw;
	height: 12vh;
	border-radius: 0 7vh 7vh 0;
	z-index: 1;
	position: absolute;
	left: -20vh;
	bottom: 5vh;
	margin: 0;
	padding: 1vw 0 0 0;
	img {
	  position: relative;
	  height: 90vh;
	  margin: 0;
	  padding: 0;
	}
  }

  #purple-half-circle-bottom {
	opacity: 1;
	transition: bottom 1s;
	position: absolute;
	background-color: $eSciencePurple;
	right: -15vw;
	bottom: -15vh;
	width: 15vw;
	height: 15vh;
	border-radius: 20vw 20vw 0 0;
	z-index: 2;
  }

  #purple-half-circle-top {
	transition: top 1s;
	opacity: 1;
	position: absolute;
	background-color: $eSciencePurple;
	left: 0;
	top: -30vh;
	width: 30vw;
	height: 30vh;
	border-radius: 0 0 20vw 20vw;
	z-index: 2;
  }

  #purple-half-circle-logo {
	transition: bottom 1s;
	background-color: $eSciencePurple;
	width: 36vw;
	height: 30vh;
	border-radius: 28vw 28vw 0 0;
	z-index: 2;
	position: absolute;
	left: 0;
	bottom: -30vh;
	img {
	  position: relative;
	  bottom: -34%;
	  left: 22%;
	  width: 55%;
	}
  }

  #purple-blob {
	transition: top 1s;
	position: absolute;
	display: flex;
	right: 0;
	top: -50vh;
	z-index: 2;
	div {
	  background-color: $eSciencePurple;
	}
	.blob1 {
	  width: 10vw;
	  height: 25vh;
	  border-radius: 0 0 10vw 10vw;
	}
	.blob2 {
	  width: 10vw;
	  height: 50vh;
	  border-radius: 0 0 10vw 10vw;
	}
	.box {
	  position: absolute;
	  right: 10vw;
	  top: 0;
	  width: 5vw;
	  height: calc(25vh + 5vw);
	  background: linear-gradient(45deg,  transparent 10vw, $eSciencePurple 0) bottom left;
	  background-image: radial-gradient(circle at 0 100%, rgba(204,0,0,0) 5vw, $eSciencePurple 15px)
	}
  }

  #globe, #phone, #mail {
	transition: left 1s;
	position: absolute;
	width: 2.2vw;
	z-index: 3;
	top: -20vh;
	left: -20vw;
  }

  // Define how decorations look when 'activated', using mixins to avoid repetition
  @mixin white-overlay { #overlay { background-color: white; opacity: .8; } }
  @mixin black-overlay { #overlay { background-color: black; opacity: .8; } }
  @mixin blue-overlay { #overlay { background-color: $eScienceBlue; opacity: .8; } }
  @mixin purple-overlay { #overlay { background-color: $eSciencePurple; opacity: .8; } }

  @mixin logo-color { #logo-color { left: 3vw; opacity: 1; } }
  @mixin logo-white { #logo-white { left: 3vw; opacity: 1; } }
  @mixin logo-part-white { #logo-part-white { left: 3vw; opacity: 1; } }

  @mixin yellow-flag { #yellow-flag { left: 0; } }
  @mixin yellow-strip { #yellow-strip { left: 0; } }
  @mixin yellow-half-strip-right { #yellow-half-strip-right { bottom: 0; } }
  @mixin yellow-half-strip-left { #yellow-half-strip-left { bottom: 0; } }

  @mixin purple-blob { #purple-blob { top: 0; }}
  @mixin purple-half-circle-top { #purple-half-circle-top { top: 0; } }
  @mixin purple-half-circle-bottommiddle { #purple-half-circle-bottom { bottom: 0; right: calc(50% - 15vw); } }
  @mixin purple-half-circle-bottomleft { #purple-half-circle-bottom { bottom: 0; right: calc(50% + 17vw); } }
  @mixin purple-half-circle-logo { #purple-half-circle-logo { bottom: 0; } }

  @mixin touch-pane { #touch-pane { opacity: 1; } }
  @mixin empowering { #empowering { opacity: 1} }

  @mixin blue-pane-left { #blue-pane { opacity: 1; left: 0; right: 50%;} }
  @mixin blue-pane-right { #blue-pane { opacity: 1; left: 50%; right: 0;} }

  @mixin right-e-top { #right-e { top: 10vh; right: 0; }}
  @mixin right-e-bottom { #right-e { top: 67vh; right: 0; }}

  @mixin left-e { #left-e { bottom: 30vh; left: 0} }

  @mixin globe { #globe { top: 38.6vh; left: 46vw; } }
  @mixin mail { #mail {	top: 46.6vh; left: 46vw; } }
  @mixin phone { #phone { top: 53.5vh; left: 46vw; } }


  // data-state changes set classes on the reveal-viewport element
  // so this is where we can build up our custom classes
  .reveal-viewport {

	// Classes for toggling individual elements

	// e.g. "for any element with the .reveal-viewport class that also has the
	// .white-overlay class, apply the 'white-overlay' styling rule", etc.
	// &.white-overlay { @include white-overlay; }
	// &.black-overlay { @include black-overlay; }
	// &.blue-overlay { @include blue-overlay; }
	// &.purple-overlay { @include purple-overlay; }
	// &.logo-color { @include logo-color; }
	// &.logo-white { @include logo-white; }
	// &.logo-part-white { @include logo-part-white; }
	// &.yellow-flag { @include yellow-flag }
	// &.yellow-strip { @include yellow-strip; }
	// &.yellow-half-strip { @include yellow-half-strip; }
	// &.purple-blob { @include purple-blob; }
	// &.purple-half-circle-top { @include purple-half-circle-top; }
	// &.purple-half-circle-bottom { @include purple-half-circle-bottom; }
	// &.purple-strip-bottom { @include purple-strip-bottom; }
	// &.touch-pane { @include touch-pane; }
	// &.blue-pane-left { @include blue-pane-left; }
	// &.blue-pane-right { @include blue-pane-right; }
	// &.right-e-top { @include right-e-top; }
	// &.right-e-bottom { @include right-e-bottom; }

	// Adjust position of yellow flag when combined with purple half circle
   // &.purple-half-circle-bottom.yellow-flag { #yellow-flag { }}// bottom: 50%;  } }


  //data-state="yellow-flag yellow-strip purple-half-circle-bottom purple-blob right-e-top" data-background-color="#009DDD"
	&.title {
	  @include purple-half-circle-logo;
	  @include purple-blob;
	  @include right-e-top;
	  @include yellow-strip;
	  @include blue-overlay;
	  @include left-e;
	  h1, h2 {
		color: white;
		margin: 6vh 6vw 6vh 15vw;
	  }
	}
	// Classes for toggling multiple elements at once; default styles
	&.standard {
	  @include logo-color;
	  @include yellow-flag;
	  h1, h2, h3, p, ul{
		text-align: left;
		padding-left: 10%;
	  }
	}
	&.two-pane {
	  // why not just use "standard blue-pane-right" directly?
	  @include logo-color;
	  @include yellow-flag;
	  @include blue-pane-right;
	  h1, h2, h3, p, ul {
		text-align: left;
		padding-right: 50%;
	  }
	}
	&.about {
	  @include logo-part-white;
	  @include blue-pane-left;
	  @include purple-half-circle-top;
	  @include purple-half-circle-bottomleft;
	  @include yellow-half-strip-left;
	  @include empowering;
	  h1, h2, p, ul {
		text-align: left;
		padding-left: 55%;
	  };
	}
	&.keepintouch {
	  @include logo-color;
	  @include blue-overlay;
	  @include touch-pane;
	  @include purple-blob;
	  @include right-e-bottom;
	  @include yellow-half-strip-right;
	  @include purple-half-circle-bottommiddle;
	  @include globe;
	  @include mail;
	  @include phone;
	  h1, h2, p, ul {
		text-align: left;
		padding-left: 50%;
	  };
	  a, p {
		color: white;
	  }
	}

	section.has-dark-background { h1, h2, h3 {
	  color: white;
	}
  }
  .slides {
	/* puts the slide content above overlays and decorations*/
	//position: relative;
	z-index: 10;
	}
  }