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-64x40.png") no-repeat;
  83 }
  84
  85 #header-text {
  86   position: relative;
  87   top: 5px;
  88   left: 25px;
  89   width: calc(100% - 50px);
  90   font-size: 20px;
  91   font-weight: bold;
  92   color: #336699;
  93 }
  94
  95 #header-text.neartime {
  96   color: #6080FF;
  97 }
  98
  99 #header-text.ontime {
 100   color: #40AA40;
 101 }
 102
 103 #header-text.overtime {
 104   color: #FF8080;
 105 }
 106
 107 #subheader-text {
 108   color: #336699;
 109   position: relative;
 110   top: 3px;
 111   left: 25px;
 112   width: calc(100% - 50px);
 113   font-size: 10px;
 114 }
 115
 116 #slidenav {
 117   position: absolute;
 118   right: 200px;
 119   top: 15px;
 120   font-size: 10px;
 121 }
 122
 123 #slidenav a:link,
 124 #slidenav a:visited {
 125   color: #669999;
 126 }
 127
 128 #slidenav a:hover,
 129 #slidenav a:active {
 130   color: #88BBBB;
 131 }
 132
 133 #slidenav .nolink {
 134   color: #CCCCCC;
 135 }
 136
 137 article {
 138   position: absolute;
 139   width: 100%;
 140   /* header is 40px, 7px to have a bit of distance,
 141    * 3px height-reducing on the bottom for safety */
 142   top: 47px;
 143   height: calc(100% - 50px);
 144   overflow: auto;
 145
 146   transition-property: transform, opacity;
 147   transition-duration: 3s;
 148   transition-timing-function: ease;
 149   transform-origin: center 5em;
 150
 151   opacity: 0;
 152 /*
 153   transform: translate(-100%, 0);
 154 */
 155 /*
 156   transform: scale(0.1) rotate(360deg) translate(-200%, 0);
 157 */
 158   transform: scale(0.1) translate(-400%, 0);
 159 }
 160
 161 article[aria-selected="true"] {
 162   opacity: 1;
 163   transform: scale(1) rotate(0deg) translate(0, 0);
 164 }
 165
 166 article[aria-selected="true"] ~ article {
 167   opacity: 0;
 168 /*
 169   transform: translate(100%, 0);
 170 */
 171 /*
 172   transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 173 */
 174   transform: scale(0.1) translate(400%, 0);
 175 }
 176
 177 /***** headers *****/
 178
 179 h1, h2, h3, h4 {
 180   margin: 0.5em 0;
 181   font-weight: bold;
 182   color: #FFFFEE;
 183   background: #003366;
 184   text-align: center;
 185 }
 186
 187 h1 {
 188   margin-top: 0;
 189   font-size: 1.7em;
 190 }
 191
 192 h2 {
 193   font-size: 1.3em;
 194 }
 195
 196 h3 {
 197   font-size: 1.1em;
 198 }
 199
 200 h4 {
 201   font-size: 1em;
 202   text-align: left;
 203 }
 204
 205 /***** boxes *****/
 206
 207 .simplebox {
 208   padding: 0.5em;
 209 }
 210
 211 .captionedbox {
 212   padding: 0px;
 213 }
 214
 215 .simplebox,
 216 .captionedbox {
 217   margin: 1em;
 218   background: #fff;
 219   background-image: radial-gradient(center 45px, ellipse farthest-corner, #FFFFEE 0, #fff 100%);
 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 }
 262
 263 .ensurepicinbox {
 264   clear: both;
 265   font-size: 1px;
 266   margin: 0;
 267 }
 268
 269 .largetext {
 270   font-size: 2em;
 271 }
 272
 273 ul > li {
 274   margin: 0.5em 0;
 275 }
 276
 277 .columns2 {
 278   -moz-columns: 2;
 279 }
 280
 281 ul.nobullets > li {
 282   list-style-type: none;
 283 }
 284
 285 ul.arrows > li {
 286   list-style-type: none;
 287 }
 288 ul.arrows > li:before {
 289   content: "\21d2\20"; /* \2192 would be single thin arrow, hex 20 is space */
 290 }
 291
 292 .cent {
 293   text-align: center;
 294 }
 295
 296 .topmargin {
 297   margin-top: 0.5em;
 298 }
 299
 300 .akey {
 301   text-decoration: underline;
 302 }
 303
 304 a:link, a:visited { color: #669999; text-decoration: none; }
 305 a:hover, a:active { color: #88BBBB; text-decoration: underline; }
 306
 307 mark a:link, mark a:visited { color: #FF6600; }
 308 mark a:hover, mark a:active { color: #FF6600; }
 309
 310 pre { margin: 0; }
 311
 312 /***** small stuff *****/
 313
 314 .small,
 315 .small {
 316   font-size: 0.75em;
 317 }
 318
 319 ul.small,
 320 .small ul {
 321   padding: 0px;
 322   border: 0px;
 323   margin: 0px 0px 0px 1em;
 324 }
 325
 326 ul.small > li
 327 .small ul > li {
 328   margin: 0px;
 329   padding: 0px;
 330   border: 0px;
 331 }
 332
 333 /***** specific slides *****/
 334