DSDSSDSD

/**

 * based on Solarized Dark theme for reveal.js by Achim Staebler

 * and Solarized colors by Ethan Schoonover

 * http://ethanschoonover.com/solarized

 * remixed by: Thomas Friese

 * http://tasmo.rocks/

**/



// ---------------------------------------------

// Main Variables

// Solarized base colors

$base03:    #002b36;

$base02:    #073642;

$base01:    #586e75;

$base00:    #657b83;

$base0:     #839496;

$base1:     #93a1a1;

$base2:     #eee8d5;

$base3:     #fdf6e3;

$yellow:    #b58900;

$orange:    #cb4b16;

$red:       #dc322f;

$magenta:   #d33682;

$violet:    #6c71c4;

$blue:      #268bd2;

$cyan:      #2aa198;

$green:     #859900;



// Background of the presentation

$backgroundColor: $base03;



// Primary/body text

$mainFont: 'Open Sans', Arial, sans-serif;

$mainFontWeight: 400;

$mainFontSize: 2rem;

$mainColor: $base1;



// Vertical spacing between blocks of text

$blockMargin: 20px;



// Headings

$headingMargin: .5em 0;

$headingFont: 'open_sanslight' ,'Open Sans', Arial, sans-serif;

$headingColor: $base2;

$headingLineHeight: 1em;

$headingLetterSpacing: 0.02rem;

$headingTextTransform: none;

$headingTextShadow: 0px 0px 2px rgba( $headingColor, .5 );

$headingFontWeight: $mainFontWeight + 400;

$heading1TextShadow: $headingTextShadow;



$heading1Size: 5rem;

$heading2Size: 4rem;

$heading3Size: 3rem;

$heading4Size: 2.00rem;



// Links and actions

$linkColor: $blue;

$linkColorHover: lighten( $linkColor, 20% );



// Text selection

$selectionBackgroundColor: $magenta;

$selectionColor: $base3;



// Generates the presentation background, can be overridden

// to return a background image or gradient

@mixin bodyBackground() {

	background: $backgroundColor;

}



$headerFont: $headingFont;

$captionFont: $mainFont;

$codeFont: 'Source Code Pro', 'Inconsolata', monospace;

$codeFontSize: $mainFontSize - .5rem;

$altFont: serif;

$italicFont: 'open_sanslight_italic', 'Open Sans', Arial, sans-serif;

$quoteFont: 'droid_serifitalic', cursive;



// reveal.js theme

@import "../../reveal.js/css/reveal";

// Theme template ------------------------------

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

// ---------------------------------------------

@import "../mixin";

@import "../fonts";

@import "syntax/syntax_solarized";

// ---------------------------------------------

@mixin rebase( $rebase03,$rebase02,$rebase01,$rebase00,$rebase0,$rebase1,$rebase2,$rebase3 )

{

  background-color: $rebase03;

  color: $rebase1;

  //* { color: $rebase1; }

  body {

    background-color: $rebase03;

  }

  .reveal {

    background-color: $rebase03;

    color: $rebase1;

    text-shadow: 0 0 1px rgba( $rebase1, .2 );

    -webkit-text-stroke: 1px rgba( $rebase1, .2 );

    h1,h2,h3,h4,h5,h6 {

      color: $rebase2;

      border-color: $rebase0;

      text-shadow: $headingTextShadow;

      a {

        &:not( .image ), &:active, &:visited {

          color: $rebase2;

        }

        &:hover {

          color: $linkColorHover;

        }

      }

    }

    a {

      &:not( .image ), &:active, &:visited {

        color: $linkColor;

      }

      &:hover {

        color: $linkColorHover;

      }

    }

    h1,h2,h3,h4,h5,h6,p,li {

      >code, >a>code {

        background: $rebase1;

        color: $rebase03;

        border: 1px solid $rebase1;

      }

    }

    section img {

      border: 4px solid $rebase1;

    }

    figure.highlight {

      background: $rebase3;

    }

  }

}

@mixin accentize( $accent ) {

  a#sitelink{ background-color: $accent; }

  a, a:active, a:visited, code.url { color: $accent; }

  h1 { color: $accent }

  h2,h3,h4,h5,h6 { color: $accent }

  h1#pagetitle, h1:first-of-type { color: $accent; }

}



/* dark is default mode, so pair with general html definition */

.light { @include rebase( $base3,$base2,$base1,$base0,$base00,$base01,$base02,$base03 ) }

.dark { @include rebase( $base03,$base02,$base01,$base00,$base0,$base1,$base2,$base3 ) }

html * {

  color-profile: sRGB;

  -webkit-font-smoothing: antialiased;

  font-smooth: always;

  word-wrap: break-word;

  -webkit-hyphens: auto;

  -moz-hyphens: auto;

  -ms-hyphens: auto;

  hyphens: auto;

}



.reveal {

  font-weight: $mainFontWeight;

  font-kerning: normal;

  letter-spacing: 0;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  p,

  ul {

    text-align: left;

    font-weight: $mainFontWeight;

  }

  h1,h2,h3,h4,h5,h6,p,li {

    >code, >a>code {

      font-size: $mainFontSize;

      @include border-radius( 0.15em );

      padding: 0 0.3em;

    }

  }

  pre {

    box-shadow: none;

    margin: 0;

    width: unset;

  }

  pre,code {

    font-family: $codeFont;

    font-size: $codeFontSize;

    font-weight: normal;

  }

  pre code {

    padding: 0;

    word-wrap: break-word;

    white-space: pre-wrap;

  }

  figure.highlight {

    width: 90%;

    margin: .5em auto;

    padding: .7em 1em .8em;

    text-shadow: none;

    box-shadow: 0px 0px 6px rgba( 0,0,0,0.3 );

    @include border-radius( 0.4em );

  }

  blockquote {

    background: inherit;

    box-shadow: none;

    font-family: $quoteFont;

    font-size: 2.8rem;

    font-style: normal;

    font-weight: 100;

    padding-left: 3em;

    i.fa {

      position:absolute;

      font-size:2em;

      font-style: italic;

      line-height:1;

      left:-.1em;

      top:-.1em;

    }

    code {

      font-size: 1.1em;

    }

  }

  p > img,

  .image {

    display: block;

    text-align: center;

  }

  iframe,

  img {

    box-shadow: 0 0 10px rgba(0,0,0,0.15);

  }

  .slides>section,

  .slides>section>section {

    padding: 0;

  }

  .slides>section {

    >h1:first-child {

      margin-top: 0;

    }

    &[data-background="black"] {

      h1,h2,h3,h4,h5,h6 {

        color: $base2;

      }

    }

    .fragment.highlight-red,

    .fragment.highlight-current-red,

    .fragment.highlight-green,

    .fragment.highlight-current-green,

    .fragment.highlight-blue,

    .fragment.highlight-current-blue {

      opacity: 1;

    }

    .fragment.highlight-red.visible,

    .fragment.highlight-current-red.current-fragment {

      * {

        color: $red;

        text-shadow: 0 0 1px rgba( $red, .2 );

        -webkit-text-stroke: 1px rgba( $red, .2 );

      }

      color: $red;

      text-shadow: 0 0 1px rgba( $red, .2 );

      -webkit-text-stroke: 1px rgba( $red, .2 );

    }

    .fragment.highlight-green.visible,

    .fragment.highlight-current-green.current-fragment {

      * {

        color: $green;

        text-shadow: 0 0 1px rgba( $green, .2 );

        -webkit-text-stroke: 1px rgba( $green, .2 );

      }

      color: $green;

      text-shadow: 0 0 1px rgba( $green, .2 );

      -webkit-text-stroke: 1px rgba( $green, .2 );

    }

    .fragment.highlight-blue.visible,

    .fragment.highlight-current-blue.current-fragment {

      * {

        color: $blue;

        text-shadow: 0 0 1px rgba( $blue, .2 );

        -webkit-text-stroke: 1px rgba( $blue, .2 );

      }

      color: $blue;

      text-shadow: 0 0 1px rgba( $blue, .2 );

      -webkit-text-stroke: 1px rgba( $blue, .2 );

    }

  }

  // Fontawesome

  .fa {

    display: inline-block;

    font-family: FontAwesome;

    font-size: 35%;

    font-style: normal;

    font-weight: 200;

    vertical-align: super;

    line-height: 1;

    padding-left: 0.2em;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

  }

  .fa-twitter, .fa-github {

    font-size: 100%;

  }

  // accentize

  .slides>section.yellow, .yellow{

    @include accentize( $yellow );

    h1,h2,h3,h4,h5,h6,a,a:active,a:visited,code.url {

      color:$yellow;

      text-shadow: 0 0 1px rgba( $yellow, .2 );

      -webkit-text-stroke: 1px rgba( $yellow, .2 );

    }

  }

  .slides>section.orange, .orange {

    @include accentize( $orange );

    h1,h2,h3,h4,h5,h6,a,a:active,a:visited,code.url {

      color: $orange;

      text-shadow: 0 0 1px rgba( $orange, .2 );

      -webkit-text-stroke: 1px rgba( $orange, .2 );

    }

  }

  .slides>section.red, .red {

    @include accentize( $red );

    h1,h2,h3,h4,h5,h6,a,a:active,a:visited,code.url {

      color: $red;

      text-shadow: 0 0 1px rgba( $red, .2 );

      -webkit-text-stroke: 1px rgba( $red, .2 );

    }

  }

  .slides>section.magenta, .magenta {

    @include accentize( $magenta );

    h1,h2,h3,h4,h5,h6,a,a:active,a:visited,code.url {

      color: $magenta;

      text-shadow: 0 0 1px rgba( $magenta, .2 );

      -webkit-text-stroke: 1px rgba( $magenta, .2 );

    }

  }

  .slides>section.violet, .violet {

    @include accentize( $violet );

    h1,h2,h3,h4,h5,h6,a,a:active,a:visited,code.url {

      color: $violet;

      text-shadow: 0 0 1px rgba( $violet, .2 );

      -webkit-text-stroke: 1px rgba( $violet, .2 );

    }

  }

  .slides>section.blue, .blue {

    @include accentize( $blue );

    h1,h2,h3,h4,h5,h6,a,a:active,a:visited,code.url {

      color:$blue;

      text-shadow: 0 0 1px rgba( $blue, .2 );

      -webkit-text-stroke: 1px rgba( $blue, .2 );

    }

  }

  .slides>section.cyan, .cyan {

    @include accentize( $cyan );

    h1,h2,h3,h4,h5,h6,a,a:active,a:visited,code.url {

      color: $cyan;

      text-shadow: 0 0 1px rgba( $cyan, .2 );

      -webkit-text-stroke: 1px rgba( $cyan, .2 );

    }

  }

  .slides>section.green, .green {

    @include accentize( $green );

    h1,h2,h3,h4,h5,h6,a,a:active,a:visited,code.url {

      color: $green;

      text-shadow: 0 0 1px rgba( $green, .2 );

      -webkit-text-stroke: 1px rgba( $green, .2 );

    }

  }

}

© 2019 GitHub, Inc.
Terms
Privacy
Security
Status
Help