fosdem2022/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   overflow: hidden;
  99   height: 40px;
 100   width: 140px;
 101   font-size: 32px;
 102   font-weight: bold;
 103   color: white;
 104   background-color: black;
 105   text-align: center;
 106 }
 107
 108 #header-text {
 109   position: relative;
 110   top: 5px;
 111   left: 25px;
 112   width: 200px;
 113   width: -moz-fit-content;
 114   width: -webkit-fit-content;
 115   width: fit-content;
 116   padding: 0 5px;
 117   font-size: 20px;
 118   font-weight: bold;
 119   color: white;
 120   background-color: black;
 121 }
 122
 123 #header-text.neartime {
 124   color: #00FFFF;
 125 }
 126
 127 #header-text.ontime {
 128   color: #54FFBD;
 129 }
 130
 131 #header-text.overtime {
 132   color: #FF4F5E;
 133 }
 134
 135 #subheader-text {
 136   color: black;
 137   position: relative;
 138   top: 3px;
 139   left: 25px;
 140   width: calc(100% - 50px);
 141   padding: 0 5px;
 142   font-size: 10px;
 143 }
 144
 145 #slidenav {
 146   position: absolute;
 147   right: 200px;
 148   top: 15px;
 149   font-family: "Zilla Slab", monospace;
 150   font-size: 10px;
 151 }
 152
 153 #slidenav a:link,
 154 #slidenav a:visited {
 155   color: black;
 156 }
 157
 158 #slidenav a:hover,
 159 #slidenav a:active {
 160   color: #959595;
 161 }
 162
 163 #slidenav .nolink {
 164   color: #E7E5E2;
 165 }
 166
 167 article {
 168   position: absolute;
 169   width: 100%;
 170   /* header is 40px, 7px to have a bit of distance,
 171    * 3px height-reducing on the bottom for safety */
 172   top: 47px;
 173   height: calc(100% - 50px);
 174   overflow: auto;
 175
 176   transition-property: transform, opacity;
 177   transition-duration: 3s;
 178   transition-timing-function: ease;
 179   transform-origin: center 5em;
 180
 181   opacity: 0;
 182 /*
 183   transform: translate(-100%, 0);
 184 */
 185 /*
 186   transform: scale(0.1) rotate(360deg) translate(-200%, 0);
 187 */
 188   transform: scale(0.1) translate(-400%, 0);
 189 }
 190
 191 article[aria-selected="true"] {
 192   opacity: 1;
 193   transform: scale(1) rotate(0deg) translate(0, 0);
 194 }
 195
 196 article[aria-selected="true"] ~ article {
 197   opacity: 0;
 198 /*
 199   transform: translate(100%, 0);
 200 */
 201 /*
 202   transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 203 */
 204   transform: scale(0.1) translate(400%, 0);
 205 }
 206
 207 /***** headers *****/
 208
 209 h1, h2, h3, h4 {
 210   margin: 0.5em 0;
 211   font-family: "Zilla Slab", monospace;
 212   font-weight: bold;
 213   color: black;
 214   text-align: center;
 215 }
 216
 217 h1 {
 218   font-family: "Zilla Slab Highlight", "Zilla Slab", monospace;
 219   margin-top: 0.5em;
 220   font-size: 2.2em;
 221 }
 222
 223 h1 span {
 224   font-family: "Zilla Slab", monospace;
 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 .mainbox {
 247   padding: 0.5em;
 248 }
 249
 250 .simplebox,
 251 .mainbox,
 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 {
 260   padding: 0px;
 261 }
 262
 263 .captionedbox-content {
 264   margin: 0;
 265   padding: 0.5em;
 266   border: 0px;
 267   border-top: 1px solid black;
 268 }
 269
 270 .captionedbox-caption {
 271   margin: 0;
 272   padding: 0.5em;
 273   font-weight: bold;
 274 }
 275
 276 .mainbox {
 277   display: flex;
 278 }
 279
 280 .mainbox > * {
 281   flex-grow: 1;
 282 }
 283
 284 .simplebox + .simplebox,
 285 .simplebox + .mainbox,
 286 .simplebox + .captionedbox,
 287 .mainbox + .simplebox,
 288 .mainbox + .mainbox,
 289 .mainbox + .captionedbox,
 290 .captionedbox + .simplebox,
 291 .captionedbox + .mainbox,
 292 .captionedbox + .captionedbox {
 293   border-top: 1px solid black;
 294 }
 295
 296 /***** misc formatting *****/
 297
 298 mark {
 299   font-family: "Zilla Slab", monospace;
 300   font-weight: bold;
 301   color: black;
 302   background-color: #FFF44F;
 303 }
 304
 305 .decofont {
 306   font-family: "Zilla Slab", monospace;
 307 }
 308
 309 .border {
 310   border: 1px solid black;
 311   padding: 0.5em;
 312 }
 313
 314 .sshot {
 315   max-width: 100%;
 316   max-height: 20em;
 317   /* box-shadow: black 1px 1px 3px 2px; */
 318 }
 319
 320 .slidepic {
 321   float: right;
 322   margin-left: .5em;
 323   max-height: 20em;
 324   max-width: 25%;
 325 }
 326
 327 .mainbox > .slidepic {
 328   flex-grow: 0;
 329 }
 330
 331 .largetext {
 332   font-size: 2em;
 333 }
 334
 335 ul > li {
 336   margin: 0.5em 0;
 337 }
 338
 339 .columns2 {
 340   -moz-columns: 2;
 341 }
 342
 343 ul.nobullets > li {
 344   list-style-type: none;
 345 }
 346
 347 ul.arrows > li {
 348   list-style-type: none;
 349 }
 350 ul.arrows > li:before {
 351   content: "\21d2\20"; /* \2192 would be single thin arrow, hex 20 is space */
 352 }
 353
 354 .cent {
 355   text-align: center;
 356 }
 357
 358 .topmargin {
 359   margin-top: 0.5em;
 360 }
 361
 362 .akey {
 363   text-decoration: underline;
 364 }
 365
 366 .hidden {
 367   display: none;
 368 }
 369
 370 a:link, a:visited { color: #00458B; text-decoration: none; }
 371 a:hover, a:active { color: #959595; text-decoration: underline; }
 372
 373 mark a:link, mark a:visited { color: #005E5E; }
 374 mark a:hover, mark a:active { color: #005E5E; }
 375
 376 h1 span a:link, h1 span a:visited,
 377 h1 span a:hover, h1 span a:active { color: white; }
 378
 379 pre { margin: 0; }
 380
 381 /***** small stuff *****/
 382
 383 small,
 384 .small {
 385   font-size: 0.75em;
 386 }
 387
 388 ul.small,
 389 .small ul {
 390   padding: 0px;
 391   border: 0px;
 392   margin: 0px 0px 0px 1em;
 393 }
 394
 395 ul.small > li
 396 .small ul > li {
 397   margin: 0px;
 398   padding: 0px;
 399   border: 0px;
 400 }
 401
 402 /***** specific slides *****/
 403
 404 /* start slide */
 405 .ccinline {
 406   border-width: 0;
 407   vertical-align: bottom;
 408   height: 1.75em;
 409 }
 410
 411 /* disclaimer */
 412 .disclaimer {
 413   border: .5em solid #FF6600;
 414   padding: .5em;
 415 }
 416
 417 /* end slide */
 418 .endslidecontainer {
 419   position: relative;
 420 }
 421
 422 .endslidepic {
 423   width: 100%;
 424   max-height: initial;
 425   z-index: 1;
 426 }
 427
 428 .endslidetext {
 429   position: absolute;
 430   width: calc(100% - 2rem);
 431   z-index: 3;
 432 }
 433
 434 h1.endslidetext {
 435 /*  color: white; */
 436   font-size: 2.5em;
 437 }
 438
 439 h2.endslidetext,
 440 h3.endslidetext {
 441   font-size: 1.5em;
 442 }
 443
 444 h2.endslidetext > span,
 445 h3.endslidetext > span {
 446   background-color: white;
 447   padding: 0 10px;
 448 }
 449
 450 .endslidetext:first-child {
 451   top: 3rem;
 452 }
 453
 454 .endslidetext:nth-child(2) {
 455   top: 22rem;
 456 }
 457
 458 .endslidetext:nth-child(3) {
 459   top: 33rem;
 460 }
 461
 462 @media (min-resolution: 1.35dppx) {
 463   h2.endslidetext,
 464   h3.endslidetext {
 465     font-size: 1.2em;
 466   }
 467   .endslidetext:first-child {
 468     top: .5rem;
 469   }
 470   .endslidetext:nth-child(2) {
 471     top: 9rem;
 472   }
 473   .endslidetext:nth-child(3) {
 474     top: 14rem;
 475   }
 476 }