linuxwochen2019/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: 2.2em;
 219 }
 220
 221 h1 span {
 222   font-family: "Zilla Slab", monospace;
 223   background-color: black;
 224   color: white;
 225   padding: 0 10px;
 226 }
 227
 228 h2 {
 229   font-size: 1.3em;
 230 }
 231
 232 h3 {
 233   font-size: 1.1em;
 234 }
 235
 236 h4 {
 237   font-size: 1em;
 238   text-align: left;
 239 }
 240
 241 /***** boxes *****/
 242
 243 .simplebox {
 244   padding: 0.5em;
 245 }
 246
 247 .captionedbox {
 248   padding: 0px;
 249 }
 250
 251 .simplebox,
 252 .captionedbox {
 253   margin: 1em;
 254   background-color: white;
 255   /* box-shadow: 0 0 0 1px black inset; */
 256   /* border-bottom: 1px solid black; */
 257 }
 258
 259 .captionedbox-content {
 260   margin: 0;
 261   padding: 0.5em;
 262   border: 0px;
 263   border-top: 1px solid black;
 264 }
 265
 266 .captionedbox-caption {
 267   margin: 0;
 268   padding: 0.5em;
 269   font-weight: bold;
 270 }
 271
 272 .simplebox + .simplebox,
 273 .captionedbox + .simplebox,
 274 .simplebox + .captionedbox,
 275 .captionedbox + .captionedbox {
 276   border-top: 1px solid black;
 277 }
 278
 279 /***** misc formatting *****/
 280
 281 mark {
 282   font-family: "Zilla Slab", monospace;
 283   font-weight: bold;
 284   color: black;
 285   background-color: #FFF44F;
 286 }
 287
 288 .decofont {
 289   font-family: "Zilla Slab", monospace;
 290 }
 291
 292 .border {
 293   border: 1px solid black;
 294   padding: 0.5em;
 295 }
 296
 297 .sshot {
 298   max-width: 100%;
 299   max-height: 20em;
 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 h1 span a:link, h1 span a:visited,
 358 h1 span a:hover, h1 span a:active { color: white; }
 359
 360 pre { margin: 0; }
 361
 362 /***** small stuff *****/
 363
 364 small,
 365 .small {
 366   font-size: 0.75em;
 367 }
 368
 369 ul.small,
 370 .small ul {
 371   padding: 0px;
 372   border: 0px;
 373   margin: 0px 0px 0px 1em;
 374 }
 375
 376 ul.small > li
 377 .small ul > li {
 378   margin: 0px;
 379   padding: 0px;
 380   border: 0px;
 381 }
 382
 383 /***** specific slides *****/
 384
 385 /* start slide */
 386 .ccinline {
 387   border-width: 0;
 388   vertical-align: bottom;
 389   height: 1.75em;
 390 }
 391
 392 /* end slide */
 393 .endslidecontainer {
 394   position: relative;
 395 }
 396
 397 .endslidepic {
 398   width: 100%;
 399   max-height: initial;
 400   z-index: 1;
 401 }
 402
 403 .endslidetext {
 404   position: absolute;
 405   width: calc(100% - 2rem);
 406   z-index: 3;
 407 }
 408
 409 h1.endslidetext {
 410 /*  color: white; */
 411   font-size: 2.5em;
 412 }
 413
 414 h2.endslidetext,
 415 h3.endslidetext {
 416   font-size: 1.5em;
 417 }
 418
 419 h2.endslidetext > span,
 420 h3.endslidetext > span {
 421   background-color: white;
 422   padding: 0 10px;
 423 }
 424
 425 .endslidetext:first-child {
 426   top: 1rem;
 427 }
 428
 429 .endslidetext:nth-child(2) {
 430   top: 11rem;
 431 }
 432
 433 .endslidetext:nth-child(3) {
 434   top: 17rem;
 435 }
 436
 437 @media (min-resolution: 1.3dppx) {
 438   .endslidetext:first-child {
 439     top: .5rem;
 440   }
 441   .endslidetext:nth-child(2) {
 442     top: 9rem;
 443   }
 444
 445   .endslidetext:nth-child(3) {
 446     top: 14rem;
 447   }
 448 }