presentations

Presentations
Log | Files | Refs

theme.scss (5625B)

      1 // Base theme template for reveal.js
      2 
      3 /*********************************************
      4  * GLOBAL STYLES
      5  *********************************************/
      6 
      7 body {
      8 	@include bodyBackground();
      9 	background-color: $backgroundColor;
     10 }
     11 
     12 .reveal {
     13 	font-family: $mainFont;
     14 	font-size: $mainFontSize;
     15 	font-weight: normal;
     16 	color: $mainColor;
     17 }
     18 
     19 ::selection {
     20 	color: $selectionColor;
     21 	background: $selectionBackgroundColor;
     22 	text-shadow: none;
     23 }
     24 
     25 ::-moz-selection {
     26 	color: $selectionColor;
     27 	background: $selectionBackgroundColor;
     28 	text-shadow: none;
     29 }
     30 
     31 .reveal .slides section,
     32 .reveal .slides section>section {
     33 	line-height: 1.3;
     34 	font-weight: inherit;
     35 }
     36 
     37 /*********************************************
     38  * HEADERS
     39  *********************************************/
     40 
     41 .reveal h1,
     42 .reveal h2,
     43 .reveal h3,
     44 .reveal h4,
     45 .reveal h5,
     46 .reveal h6 {
     47 	margin: $headingMargin;
     48 	color: $headingColor;
     49 
     50 	font-family: $headingFont;
     51 	font-weight: $headingFontWeight;
     52 	line-height: $headingLineHeight;
     53 	letter-spacing: $headingLetterSpacing;
     54 
     55 	text-transform: $headingTextTransform;
     56 	text-shadow: $headingTextShadow;
     57 
     58 	word-wrap: break-word;
     59 }
     60 
     61 .reveal h1 {font-size: $heading1Size; }
     62 .reveal h2 {font-size: $heading2Size; }
     63 .reveal h3 {font-size: $heading3Size; }
     64 .reveal h4 {font-size: $heading4Size; }
     65 
     66 .reveal h1 {
     67 	text-shadow: $heading1TextShadow;
     68 }
     69 
     70 
     71 /*********************************************
     72  * OTHER
     73  *********************************************/
     74 
     75 .reveal p {
     76 	margin: $blockMargin 0;
     77 	line-height: 1.3;
     78 }
     79 
     80 /* Ensure certain elements are never larger than the slide itself */
     81 .reveal img,
     82 .reveal video,
     83 .reveal iframe {
     84 	max-width: 95%;
     85 	max-height: 95%;
     86 }
     87 .reveal strong,
     88 .reveal b {
     89 	font-weight: bold;
     90 }
     91 
     92 .reveal em {
     93 	font-style: italic;
     94 }
     95 
     96 .reveal ol,
     97 .reveal dl,
     98 .reveal ul {
     99 	display: inline-block;
    100 
    101 	text-align: left;
    102 	margin: 0 0 0 1em;
    103 }
    104 
    105 .reveal ol {
    106 	list-style-type: decimal;
    107 }
    108 
    109 .reveal ul {
    110 	list-style-type: disc;
    111 }
    112 
    113 .reveal ul ul {
    114 	list-style-type: square;
    115 }
    116 
    117 .reveal ul ul ul {
    118 	list-style-type: circle;
    119 }
    120 
    121 .reveal ul ul,
    122 .reveal ul ol,
    123 .reveal ol ol,
    124 .reveal ol ul {
    125 	display: block;
    126 	margin-left: 40px;
    127 }
    128 
    129 .reveal dt {
    130 	font-weight: bold;
    131 }
    132 
    133 .reveal dd {
    134 	margin-left: 40px;
    135 }
    136 
    137 .reveal blockquote {
    138 	display: block;
    139 	position: relative;
    140 	width: 70%;
    141 	margin: $blockMargin auto;
    142 	padding: 5px;
    143 
    144 	font-style: italic;
    145 	background: rgba(255, 255, 255, 0.05);
    146 	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
    147 }
    148 	.reveal blockquote p:first-child,
    149 	.reveal blockquote p:last-child {
    150 		display: inline-block;
    151 	}
    152 
    153 .reveal q {
    154 	font-style: italic;
    155 }
    156 
    157 .reveal pre {
    158 	display: block;
    159 	position: relative;
    160 	width: 90%;
    161 	margin: $blockMargin auto;
    162 
    163 	text-align: left;
    164 	font-size: 0.55em;
    165 	font-family: $codeFont;
    166 	line-height: 1.2em;
    167 
    168 	word-wrap: break-word;
    169 
    170 	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
    171 }
    172 
    173 .reveal code {
    174 	font-family: $codeFont;
    175 	text-transform: none;
    176 }
    177 
    178 .reveal pre code {
    179 	display: block;
    180 	padding: 5px;
    181 	overflow: auto;
    182 	max-height: 400px;
    183 	word-wrap: normal;
    184 }
    185 
    186 .reveal table {
    187 	margin: auto;
    188 	border-collapse: collapse;
    189 	border-spacing: 0;
    190 }
    191 
    192 .reveal table th {
    193 	font-weight: bold;
    194 }
    195 
    196 .reveal table th,
    197 .reveal table td {
    198 	text-align: left;
    199 	padding: 0.2em 0.5em 0.2em 0.5em;
    200 	border-bottom: 1px solid;
    201 }
    202 
    203 .reveal table th[align="center"],
    204 .reveal table td[align="center"] {
    205 	text-align: center;
    206 }
    207 
    208 .reveal table th[align="right"],
    209 .reveal table td[align="right"] {
    210 	text-align: right;
    211 }
    212 
    213 .reveal table tbody tr:last-child th,
    214 .reveal table tbody tr:last-child td {
    215 	border-bottom: none;
    216 }
    217 
    218 .reveal sup {
    219 	vertical-align: super;
    220 	font-size: smaller;
    221 }
    222 .reveal sub {
    223 	vertical-align: sub;
    224 	font-size: smaller;
    225 }
    226 
    227 .reveal small {
    228 	display: inline-block;
    229 	font-size: 0.6em;
    230 	line-height: 1.2em;
    231 	vertical-align: top;
    232 }
    233 
    234 .reveal small * {
    235 	vertical-align: top;
    236 }
    237 
    238 
    239 /*********************************************
    240  * LINKS
    241  *********************************************/
    242 
    243 .reveal a {
    244 	color: $linkColor;
    245 	text-decoration: none;
    246 
    247 	-webkit-transition: color .15s ease;
    248 	   -moz-transition: color .15s ease;
    249 	        transition: color .15s ease;
    250 }
    251 	.reveal a:hover {
    252 		color: $linkColorHover;
    253 
    254 		text-shadow: none;
    255 		border: none;
    256 	}
    257 
    258 .reveal .roll span:after {
    259 	color: #fff;
    260 	background: darken( $linkColor, 15% );
    261 }
    262 
    263 
    264 /*********************************************
    265  * IMAGES
    266  *********************************************/
    267 
    268 .reveal section img {
    269 	margin: 15px 0px;
    270 	background: rgba(255,255,255,0.12);
    271 	border: 4px solid $mainColor;
    272 
    273 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    274 }
    275 
    276 	.reveal section img.plain {
    277 		border: 0;
    278 		box-shadow: none;
    279 	}
    280 
    281 	.reveal a img {
    282 		-webkit-transition: all .15s linear;
    283 		   -moz-transition: all .15s linear;
    284 		        transition: all .15s linear;
    285 	}
    286 
    287 	.reveal a:hover img {
    288 		background: rgba(255,255,255,0.2);
    289 		border-color: $linkColor;
    290 
    291 		box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    292 	}
    293 
    294 
    295 /*********************************************
    296  * NAVIGATION CONTROLS
    297  *********************************************/
    298 
    299 .reveal .controls {
    300 	color: $linkColor;
    301 }
    302 
    303 
    304 /*********************************************
    305  * PROGRESS BAR
    306  *********************************************/
    307 
    308 .reveal .progress {
    309 	background: rgba(0,0,0,0.2);
    310 	color: $linkColor;
    311 }
    312 	.reveal .progress span {
    313 		-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
    314 		   -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
    315 			transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
    316 	}
    317 
    318 /*********************************************
    319  * PRINT BACKGROUND
    320  *********************************************/
    321  @media print {
    322     .backgrounds {
    323         background-color: $backgroundColor;
    324     }
    325 }