linuxwochen2018/slides.css

   1 /**************************
   2  * styles for talk slides *
   3  *    by Robert Kaiser    *
   4  *    <kairo@kairo.at>    *
   5  *   (for FOSDEM 2013)    *
   6  **************************/
   7
   8
   9 /***** base style *****/
  10
  11 @font-face {
  12   font-family: 'Open Sans';
  13   src: url('template/OpenSans-Regular-webfont.woff');
  14   font-weight: normal;
  15   font-style: normal;
  16 }
  17
  18 @font-face {
  19   font-family: 'Open Sans';
  20   src: url('template/OpenSans-Semibold-webfont.woff');
  21   font-weight: bold;
  22   font-style: normal;
  23 }
  24
  25 @font-face {
  26   font-family: 'Open Sans';
  27   src: url('template/OpenSans-Italic-webfont.woff');
  28   font-weight: normal;
  29   font-style: italic;
  30 }
  31
  32 @font-face {
  33   font-family: 'Zilla Slab';
  34   src: url('template/ZillaSlab-Regular.woff2');
  35   font-weight: normal;
  36   font-style: normal;
  37 }
  38
  39 @font-face {
  40   font-family: 'Zilla Slab';
  41   src: url('template/ZillaSlab-Bold.woff2');
  42   font-weight: bold;
  43   font-style: normal;
  44 }
  45
  46 @font-face {
  47   font-family: 'Zilla Slab Highlight';
  48   src: url('template/ZillaSlabHighlight-Regular.woff2');
  49   font-weight: normal;
  50   font-style: normal;
  51 }
  52
  53 @font-face {
  54   font-family: 'Zilla Slab Highlight';
  55   src: url('template/ZillaSlabHighlight-Bold.woff2');
  56   font-weight: bold;
  57   font-style: normal;
  58 }
  59
  60 html {
  61   overflow: hidden; /* to make translations not paint scrollbars */
  62   background: white;
  63   height: 100%;
  64 }
  65
  66 body {
  67   margin: 0px;
  68   padding: 0px;
  69   border: 0px;
  70   font-family: "Open Sans", sans-serif;
  71   font-size: 2em;
  72   color: black;
  73   height: 100%;
  74 }
  75
  76 ul {
  77   padding-left: 1.2em;
  78   margin-bottom: 0.5em;
  79 }
  80
  81 ul:first-child,
  82 ul:last-child {
  83   margin-top: 0;
  84 }
  85
  86 #header {
  87   height: 44px;
  88   position: relative;
  89   font-family: "Zilla Slab", monospace;
  90   border-bottom: 3px solid black;
  91 }
  92
  93 #headerlogo {
  94   position: absolute;
  95   display: block;
  96   right: 2px;
  97   top: 2px;
  98   text-indent: -2000px;
  99   font-size: 1px;
 100   overflow: hidden;
 101   height: 40px;
 102   width: 140px;
 103   background: url("template/mozilla_logo2017.svg") no-repeat;
 104 }
 105
 106 #header-text {
 107   position: relative;
 108   top: 5px;
 109   left: 25px;
 110   width: 200px;
 111   width: -moz-fit-content;
 112   width: -webkit-fit-content;
 113   width: fit-content;
 114   padding: 0 5px;
 115   font-size: 20px;
 116   font-weight: bold;
 117   color: white;
 118   background-color: black;
 119 }
 120
 121 #header-text.neartime {
 122   color: #00FFFF;
 123 }
 124
 125 #header-text.ontime {
 126   color: #54FFBD;
 127 }
 128
 129 #header-text.overtime {
 130   color: #FF4F5E;
 131 }
 132
 133 #subheader-text {
 134   color: black;
 135   position: relative;
 136   top: 3px;
 137   left: 25px;
 138   width: calc(100% - 50px);
 139   padding: 0 5px;
 140   font-size: 10px;
 141 }
 142
 143 #slidenav {
 144   position: absolute;
 145   right: 200px;
 146   top: 15px;
 147   font-family: "Zilla Slab", monospace;
 148   font-size: 10px;
 149 }
 150
 151 #slidenav a:link,
 152 #slidenav a:visited {
 153   color: black;
 154 }
 155
 156 #slidenav a:hover,
 157 #slidenav a:active {
 158   color: #959595;
 159 }
 160
 161 #slidenav .nolink {
 162   color: #E7E5E2;
 163 }
 164
 165 article {
 166   position: absolute;
 167   width: 100%;
 168   /* header is 40px, 7px to have a bit of distance,
 169    * 3px height-reducing on the bottom for safety */
 170   top: 47px;
 171   height: calc(100% - 50px);
 172   overflow: auto;
 173
 174   transition-property: transform, opacity;
 175   transition-duration: 3s;
 176   transition-timing-function: ease;
 177   transform-origin: center 5em;
 178
 179   opacity: 0;
 180 /*
 181   transform: translate(-100%, 0);
 182 */
 183 /*
 184   transform: scale(0.1) rotate(360deg) translate(-200%, 0);
 185 */
 186   transform: scale(0.1) translate(-400%, 0);
 187 }
 188
 189 article[aria-selected="true"] {
 190   opacity: 1;
 191   transform: scale(1) rotate(0deg) translate(0, 0);
 192 }
 193
 194 article[aria-selected="true"] ~ article {
 195   opacity: 0;
 196 /*
 197   transform: translate(100%, 0);
 198 */
 199 /*
 200   transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 201 */
 202   transform: scale(0.1) translate(400%, 0);
 203 }
 204
 205 /***** headers *****/
 206
 207 h1, h2, h3, h4 {
 208   margin: 0.5em 0;
 209   font-family: "Zilla Slab", monospace;
 210   font-weight: bold;
 211   color: black;
 212   text-align: center;
 213 }
 214
 215 h1 {
 216   font-family: "Zilla Slab Highlight", "Zilla Slab", monospace;
 217   margin-top: 0.5em;
 218   font-size: 1.7em;
 219 }
 220
 221 h1 span {
 222   font-family: "Zilla Slab", monospace;
 223   margin-top: 0.5em;
 224   font-size: 1.7em;
 225   background-color: black;
 226   color: white;
 227   padding: 0 10px;
 228 }
 229
 230 h2 {
 231   font-size: 1.3em;
 232 }
 233
 234 h3 {
 235   font-size: 1.1em;
 236 }
 237
 238 h4 {
 239   font-size: 1em;
 240   text-align: left;
 241 }
 242
 243 /***** boxes *****/
 244
 245 .simplebox {
 246   padding: 0.5em;
 247 }
 248
 249 .captionedbox {
 250   padding: 0px;
 251 }
 252
 253 .simplebox,
 254 .captionedbox {
 255   margin: 1em;
 256   background-color: white;
 257   /* box-shadow: 0 0 0 1px black inset; */
 258   /* border-bottom: 1px solid black; */
 259 }
 260
 261 .captionedbox-content {
 262   margin: 0;
 263   padding: 0.5em;
 264   border: 0px;
 265   border-top: 1px solid black;
 266 }
 267
 268 .captionedbox-caption {
 269   margin: 0;
 270   padding: 0.5em;
 271   font-weight: bold;
 272 }
 273
 274 .simplebox + .simplebox,
 275 .captionedbox + .simplebox,
 276 .simplebox + .captionedbox,
 277 .captionedbox + .captionedbox {
 278   border-top: 1px solid black;
 279 }
 280
 281 /***** misc formatting *****/
 282
 283 mark {
 284   font-family: "Zilla Slab", monospace;
 285   font-weight: bold;
 286   color: black;
 287   background-color: #FFF44F;
 288 }
 289
 290 .decofont {
 291   font-family: "Zilla Slab", monospace;
 292 }
 293
 294 .border {
 295   border: 1px solid black;
 296   padding: 0.5em;
 297 }
 298
 299 .sshot {
 300   /* box-shadow: black 1px 1px 3px 2px; */
 301 }
 302
 303 .slidepic {
 304   float: right;
 305   margin-left: .5em;
 306   max-height: 20em;
 307   max-width: 25%;
 308 }
 309
 310 .ensurepicinbox {
 311   clear: both;
 312   font-size: 1px;
 313   margin: 0;
 314 }
 315
 316 .largetext {
 317   font-size: 2em;
 318 }
 319
 320 ul > li {
 321   margin: 0.5em 0;
 322 }
 323
 324 .columns2 {
 325   -moz-columns: 2;
 326 }
 327
 328 ul.nobullets > li {
 329   list-style-type: none;
 330 }
 331
 332 ul.arrows > li {
 333   list-style-type: none;
 334 }
 335 ul.arrows > li:before {
 336   content: "\21d2\20"; /* \2192 would be single thin arrow, hex 20 is space */
 337 }
 338
 339 .cent {
 340   text-align: center;
 341 }
 342
 343 .topmargin {
 344   margin-top: 0.5em;
 345 }
 346
 347 .akey {
 348   text-decoration: underline;
 349 }
 350
 351 a:link, a:visited { color: #00458B; text-decoration: none; }
 352 a:hover, a:active { color: #959595; text-decoration: underline; }
 353
 354 mark a:link, mark a:visited { color: #005E5E; }
 355 mark a:hover, mark a:active { color: #005E5E; }
 356
 357 pre { margin: 0; }
 358
 359 /***** small stuff *****/
 360
 361 .small,
 362 .small {
 363   font-size: 0.75em;
 364 }
 365
 366 ul.small,
 367 .small ul {
 368   padding: 0px;
 369   border: 0px;
 370   margin: 0px 0px 0px 1em;
 371 }
 372
 373 ul.small > li
 374 .small ul > li {
 375   margin: 0px;
 376   padding: 0px;
 377   border: 0px;
 378 }
 379
 380 /***** specific slides *****/
 381
 382 /* start slide */
 383 .ccinline {
 384   border-width: 0;
 385   vertical-align: bottom;
 386   height: 1.75em;
 387 }
 388
 389 /* end slide */
 390 .endslidecontainer {
 391   position: relative;
 392 }
 393
 394 .endslidepic {
 395   width: 100%;
 396   z-index: 1;
 397 }
 398
 399 .endslidetext {
 400   position: absolute;
 401   width: calc(100% - 2rem);
 402   z-index: 3;
 403 }
 404
 405 h1.endslidetext {
 406   color: white;
 407   font-size: 2.5em;
 408 }
 409
 410 h2.endslidetext,
 411 h3.endslidetext {
 412   font-size: 2em;
 413 }
 414
 415 h2.endslidetext > span,
 416 h3.endslidetext > span {
 417   background-color: white;
 418   padding: 0 10px;
 419 }
 420
 421 .endslidetext:first-child {
 422   top: 1rem;
 423 }
 424
 425 .endslidetext:nth-child(2) {
 426   top: 11rem;
 427 }
 428
 429 .endslidetext:nth-child(3) {
 430   top: 21rem;
 431 }
 432
 433 @media (min-resolution: 1.3dppx) {
 434   .endslidetext:nth-child(2) {
 435     top: 6rem;
 436   }
 437
 438   .endslidetext:nth-child(3) {
 439     top: 11rem;
 440   }
 441 }