//////// // variables for easy configuration // // (note: this is a less extendend css script, to learn more about less; see lesscss.org) @color: black; @color-step-hidden: silver; @background-color-code: white; // -- gradient colors used for slides classified with cover | title @background-gradient-color1-cover: white; @background-gradient-color2-cover: white; // -- gradient colors for all other slides @background-gradient-color1: white; @background-gradient-color2: white; // --- font size @font-size-h1: 245%; // 30pt / 40px (assuming 100% => 12pt / 16px) @font-size-h2: 230%; // 28pt / 37px @font-size-h3: 200%; // 24pt / 32px @font-size-text: 150%; // 18pt / 24px @font-size-code: 140%; // 16pt / 22px ///////////////////////////// body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } a:link, a:visited { color: @color; } .slide { color: @color; h1 { font-size: @font-size-h1; text-align: center; &.fullscreen { position: absolute; top: 40%; width: 100%; } // lets you create slides with no heading (that is, heading gets hidden but included in toc) &.hidden { display: none; } } h2 { font-size: @font-size-h2; } h3 { font-size: @font-size-h3; } .stepcurrent { color: @color; } .step { color: @color-step-hidden; } // or hide next steps e.g. .step { visibility: hidden; } } ul { list-style-type: square; } p, li, dt, dd, td, th { font-size: @font-size-text; } pre { font-size: @font-size-code; } .code { background-color: @background-color-code; padding: 5px; } .footnote a:first-of-type { text-decoration: none; } p.footnote { font-size: 88%; } .help { p, td { font-size: 88%; } } /******** * example gradient background using css3 */ .slide { background-image: -webkit-linear-gradient(top, @background-gradient-color1, @background-gradient-color2, @background-gradient-color1, @background-gradient-color2); background-image: -moz-linear-gradient(top, @background-gradient-color1, @background-gradient-color2, @background-gradient-color1, @background-gradient-color2); &.cover, &.title { background-image: -webkit-linear-gradient(top, @background-gradient-color1-cover, @background-gradient-color2-cover, @background-gradient-color1-cover, @background-gradient-color2-cover); background-image: -moz-linear-gradient(top, @background-gradient-color1-cover, @background-gradient-color2-cover, @background-gradient-color1-cover, @background-gradient-color2-cover); } }