fosdem2017/slides.css

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