Theme Elephant pour reveal.js

elephant.scss

/**
 * Blood theme for reveal.js
 * Author: Antoine DAUTRY https://github.com/antoine1003
 *
 * Designed to be used with highlight.js theme
 * "monokai_sublime.css" available from
 * https://github.com/isagalaev/highlight.js/
 *
 * For other themes, change $codeBackground accordingly.
 *
 */

 // Default mixins and settings -----------------
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
 
 // Include theme-specific fonts
 
 @import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap');

 // Colors used in the theme
 $primary: #b9c20e;
 $darkGray: #363636;
 $lightGray: #dad1ce;
 $codeBackground: #23241f;
 
 $backgroundColor: white;
 
 // Main text
 $mainFont: Poppins, sans-serif;
 $mainColor: $darkGray;
 
 // Headings
 $headingFont: 'PT Serif', serif;
 $headingColor: $darkGray;

 
 // Links
 $linkColor: $primary;
 $linkColorHover: lighten( $linkColor, 20% );
 
 // Text selection
 $selectionBackgroundColor: $primary;
 $selectionColor: #fff;

 // Font size
 $h1Size: 72px;
 $h2Size: $h1Size * 0.67;
 $h3Size: $h2Size * 0.67;
 $mainFontSize: 24px;
 // Change text colors against dark slide backgrounds
 @include light-bg-text-color(#222);
 
 
 // Theme template ------------------------------
 @import "../template/theme";
 // ---------------------------------------------
 
 // some overrides after theme template import
 
 .reveal {
     p {
        font-weight: 300;
        code {
            background-color: lighten($primary, 20%);
            color: darken($primary, 25%);
            border-radius: 3px;
        }
     }
     h1 {
        font-size: $h1Size;
        position: relative;
        display: inline-block;
        &:not(.r-fit-text)::first-letter {
            color: $primary;
            font-size: $h1Size * 1.5;
        }
        &:before {
           content: '';
           display: inline;
           position: absolute;
           bottom: -10px;
           right: 50%;
           height: 8px;
           width: 150px;
           background-color: $primary;
           transform: translateX(50%);
        }
    }
    h2 {
        font-size: $h2Size;
        position: relative;
         display: inline-block;
         &:not(.r-fit-text)::first-letter {
            font-size: $h2Size * 1.5;
            color: $primary;
         }
         &:before {
            content: '';
            display: inline;
            position: absolute;
            bottom: -10px;
            left: 0;
            height: 5px;
            width: 150px;
            background-color: $primary;
         }
    }
    h3 {
        font-size: $h3Size;
    }
    ul, ol {
        display: block;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: 700;
    }
 }
 
 section.has-light-background {
     p, h1, h2, h3, h4 {
         text-shadow: none;
     }
 }
 
 .reveal small code {
     vertical-align: baseline;
 }