reveal.js theme 'tricol'

predef.scss

/* 
 * predefined classes
 *
 * Copyright (C) 2013 Rintaro Okamura
 */

//mixin

$vendpf: -webkit-, -moz-, -ms-, -o-, '';

//border-radius
@mixin border-radius($br) {
    @each $prefix in $vendpf {
        #{$prefix}border-radius: $br;
    }
}

//mixin end


/* clearfix */
.cfx:after {
    content: "";
    clear: both;
    display: block;
}

/* display */
.d-none   { display: none; }
.d-block  { display: block; }
.d-iblock { display: inline-block; }

/* float */
.f-left  { float: left!important;  }
.f-right { float: right!important; }

/* text-align */
.tAli-l { text-align: left; }
.tAli-r { text-align: right; }
.tAli-c { text-align: center; }

/* width */
.width100{ width:100%; }
.width70 { width: 70%; }
.width60 { width: 60%; }
.width50 { width: 50%; }
.width40 { width: 40%; }
.width30 { width: 30%; }
.width25 { width: 25%; }

/* color */

.white { color: white; }
.black { color: black; }
.blue  { color: $linkColor; }
.green { color: $accentColor; }
.red   { color: $accentColor2; }
.lBlue { color: lighten( $linkColor, 20% ); }
.lGreen{ color: lighten( $accentColor, 20% ); }
.lRed  { color: lighten( $accentColor2, 20% ); }

/* bgcolor */

.bgBlue  { background: $linkColor; }
.bgGreen { background: $accentColor; }
.bgRed   { background: $accentColor2; }
.bgLBlue { background: lighten( $linkColor, 20% ); }
.bgLGreen{ background: lighten( $accentColor, 20% ); }
.bgLRed  { background: lighten( $accentColor2, 20% ); }
.bgCcc   { background: #ccc; }

.bgBlueH:hover { background: lighten($linkColor, 30%); }
.bgGreenH:hover{ background: lighten($accentColor, 30%); }
.bgRedH:hover  { background: lighten($accentColor2, 30%); }
.bgEeeH:hover  { background: #eee; }

/* border */

.reveal .bdBlue  { border: solid 0.1em $linkColor; }
.reveal .bdGreen { border: solid 0.1em $accentColor; }
.reveal .bdRed   { border: solid 0.1em $accentColor2; }
.reveal .bdLBlue { border: solid 0.1em lighten( $linkColor, 20% ); }
.reveal .bdLGreen{ border: solid 0.1em lighten( $accentColor, 20% ); }
.reveal .bdLRed  { border: solid 0.1em lighten( $accentColor2, 20% ); }
.reveal .bdCcc   { border: solid 0.1em #ccc; }

/* box-system */

.reveal .brBox {
    @include border-radius(10px);
    box-sizing: border-box;
    padding: 15px;
}

.reveal .twoBox{
    width: 47.5%;
    margin-right: 5%;
    float: left;
}

.reveal .threeBox{
    width: 30%;
    margin-right: 5%;
    float: left;
}

.reveal .fourBox{
    width: 21.25%;
    margin-right: 5%;
    float: left;
}

/* margin / padding */

.reveal .mZeroAuto { margin: 0 auto; }

@for $i from 0 through 10 {
.reveal .marginT#{5 * $i}  { margin-top:     #{5 * $i}px; }
.reveal .marginR#{5 * $i}  { margin-right:   #{5 * $i}px; }
.reveal .marginB#{5 * $i}  { margin-bottom:  #{5 * $i}px; }
.reveal .marginL#{5 * $i}  { margin-left:    #{5 * $i}px; }
}

@for $i from 0 through 10 {
.reveal .paddingT#{5 * $i} { padding-top:    #{5 * $i}px; }
.reveal .paddingR#{5 * $i} { padding-right:  #{5 * $i}px; }
.reveal .paddingB#{5 * $i} { padding-bottom: #{5 * $i}px; }
.reveal .paddingL#{5 * $i} { padding-left:   #{5 * $i}px; }
}

tricol.scss

/**
 * TRICOL
 * A theme for reveal.js presentations, 
 * focused to be better design theme.
 * this is based in "three colors" ('tricolore')
 *
 * This theme is Copyright (C) 2013 Rintaro Okamura
 * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
 */


// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------



// Include theme-specific fonts
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);


// Override theme settings (see ../template/settings.scss)
$mainFont: 'Lato', sans-serif;
$mainColor: #333;
$headingFont: 'News Cycle', sans-serif;
$headingColor: #333;
$headingTextShadow: none;
$headingTextTransform: none;
$backgroundColor: #fff;
$linkColor: #54a8e0;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
$accentColor: #51e05a;
$accentColor2: #df54a7;

// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

h1:first-letter,
h2:first-letter{
    color: $accentColor;
}

.reveal h2{
    padding-bottom: 20px;
    border-bottom:  solid 1px $mainColor;
}

.reveal .slides{
    text-align: left;
}

.reveal em{
    color: $accentColor;
}

.reveal strong{
    color: $accentColor2;
}

// predefined Template -------------------------
@import "../template/predef.scss";
// ---------------------------------------------

Put files like this table.

file	directory
tricol.scss	reveal.js/css/theme/source/tricol.scss
predef.scss	reveal.js/css/theme/template/predef.scss