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   margin-bottom: 0;
 255   background-color: white;
 256   /* box-shadow: 0 0 0 1px black inset; */
 257   /* border-bottom: 1px solid black; */
 258 }
 259
 260 .captionedbox {
 261   padding: 0px;
 262 }
 263
 264 .captionedbox-content {
 265   margin: 0;
 266   padding: 0.5em;
 267   border: 0px;
 268   border-top: 1px solid black;
 269 }
 270
 271 .captionedbox-caption {
 272   margin: 0;
 273   padding: 0.5em;
 274   font-weight: bold;
 275 }
 276
 277 .mainbox {
 278   display: flex;
 279 }
 280
 281 .mainbox > * {
 282   flex-grow: 1;
 283 }
 284
 285 .simplebox + .simplebox,
 286 .simplebox + .mainbox,
 287 .simplebox + .captionedbox,
 288 .mainbox + .simplebox,
 289 .mainbox + .mainbox,
 290 .mainbox + .captionedbox,
 291 .captionedbox + .simplebox,
 292 .captionedbox + .mainbox,
 293 .captionedbox + .captionedbox {
 294   border-top: 1px solid black;
 295 }
 296
 297 /***** misc formatting *****/
 298
 299 mark {
 300   font-family: "Zilla Slab", monospace;
 301   font-weight: bold;
 302   color: black;
 303   background-color: #FFF44F;
 304 }
 305
 306 .decofont {
 307   font-family: "Zilla Slab", monospace;
 308 }
 309
 310 .border {
 311   border: 1px solid black;
 312   padding: 0.5em;
 313 }
 314
 315 .sshot {
 316   max-width: 100%;
 317   max-height: 20em;
 318   /* box-shadow: black 1px 1px 3px 2px; */
 319 }
 320
 321 .slidepic {
 322   float: right;
 323   margin-left: .5em;
 324   max-height: 20em;
 325   max-width: 25%;
 326 }
 327
 328 .mainbox > .slidepic {
 329   flex-grow: 0;
 330 }
 331
 332 .largetext {
 333   font-size: 2em;
 334 }
 335
 336 ul > li {
 337   margin: 0.5em 0;
 338 }
 339
 340 .columns2 {
 341   -moz-columns: 2;
 342 }
 343
 344 ul.nobullets > li {
 345   list-style-type: none;
 346 }
 347
 348 ul.arrows > li {
 349   list-style-type: none;
 350 }
 351 ul.arrows > li:before {
 352   content: "\21d2\20"; /* \2192 would be single thin arrow, hex 20 is space */
 353 }
 354
 355 .cent {
 356   text-align: center;
 357 }
 358
 359 .topmargin {
 360   margin-top: 0.5em;
 361 }
 362
 363 .akey {
 364   text-decoration: underline;
 365 }
 366
 367 .hidden {
 368   display: none;
 369 }
 370
 371 a:link, a:visited { color: #00458B; text-decoration: none; }
 372 a:hover, a:active { color: #959595; text-decoration: underline; }
 373
 374 mark a:link, mark a:visited { color: #005E5E; }
 375 mark a:hover, mark a:active { color: #005E5E; }
 376
 377 h1 span a:link, h1 span a:visited,
 378 h1 span a:hover, h1 span a:active { color: white; }
 379
 380 pre { margin: 0; }
 381
 382 /***** small stuff *****/
 383
 384 small,
 385 .small {
 386   font-size: 0.75em;
 387 }
 388
 389 ul.small,
 390 .small ul {
 391   padding: 0px;
 392   border: 0px;
 393   margin: 0px 0px 0px 1em;
 394 }
 395
 396 ul.small > li
 397 .small ul > li {
 398   margin: 0px;
 399   padding: 0px;
 400   border: 0px;
 401 }
 402
 403 /***** specific slides *****/
 404
 405 /* start slide */
 406 .ccinline {
 407   border-width: 0;
 408   vertical-align: bottom;
 409   height: 1.75em;
 410 }
 411
 412 /* disclaimer */
 413 .disclaimer {
 414   border: .5em solid #FF6600;
 415   padding: .5em;
 416 }
 417
 418 /* end slide */
 419 .endslidecontainer {
 420   position: relative;
 421 }
 422
 423 .endslidepic {
 424   width: 100%;
 425   max-height: initial;
 426   z-index: 1;
 427 }
 428
 429 .endslidetext {
 430   position: absolute;
 431   width: calc(100% - 2rem);
 432   z-index: 3;
 433 }
 434
 435 h1.endslidetext {
 436 /*  color: white; */
 437   font-size: 2.5em;
 438 }
 439
 440 h2.endslidetext,
 441 h3.endslidetext {
 442   font-size: 1.5em;
 443 }
 444
 445 h2.endslidetext > span,
 446 h3.endslidetext > span {
 447   background-color: white;
 448   padding: 0 10px;
 449 }
 450
 451 .endslidetext:first-child {
 452   top: 3rem;
 453 }
 454
 455 .endslidetext:nth-child(2) {
 456   top: 22rem;
 457 }
 458
 459 .endslidetext:nth-child(3) {
 460   top: 33rem;
 461 }
 462
 463 @media (min-resolution: 1.35dppx) {
 464   h2.endslidetext,
 465   h3.endslidetext {
 466     font-size: 1.2em;
 467   }
 468   .endslidetext:first-child {
 469     top: .5rem;
 470   }
 471   .endslidetext:nth-child(2) {
 472     top: 9rem;
 473   }
 474   .endslidetext:nth-child(3) {
 475     top: 14rem;
 476   }
 477 }