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: #fff;
 220   background-image: radial-gradient(center 45px, ellipse farthest-corner, #FFFFEE 0, #fff 100%);
 221   box-shadow: #AAAA80 3px 3px 2px 0;
 222 }
 223
 224 .captionedbox-content {
 225   margin: 0;
 226   padding: 0.5em;
 227   border: 0px;
 228   border-top: 1px solid #89AACC;
 229 }
 230
 231 .captionedbox-caption {
 232   margin: 0;
 233   padding: 0.5em;
 234   font-weight: bold;
 235 }
 236
 237 /***** misc formatting *****/
 238
 239 mark {
 240   font-weight: bold;
 241   color: #FF6600;
 242   background-color: transparent;
 243 }
 244
 245 s {
 246   text-decoration: line-through;
 247   color: #808080;
 248 }
 249
 250 .border {
 251   border: 1px solid #336699;
 252   padding: 0.5em;
 253 }
 254
 255 .sshot {
 256   box-shadow: #6d7581 3px 3px 2px 0;
 257 }
 258
 259 .slidepic {
 260   float: right;
 261   margin-left: .5em;
 262   max-width: 33%;
 263 }
 264
 265 .ensurepicinbox {
 266   clear: both;
 267   font-size: 1px;
 268   margin: 0;
 269 }
 270
 271 .largetext {
 272   font-size: 2em;
 273 }
 274
 275 ul > li {
 276   margin: 0.5em 0;
 277 }
 278
 279 .columns2 {
 280   -moz-columns: 2;
 281 }
 282
 283 ul.nobullets > li {
 284   list-style-type: none;
 285 }
 286
 287 ul.arrows > li {
 288   list-style-type: none;
 289 }
 290 ul.arrows > li:before {
 291   content: "\21d2\20"; /* \2192 would be single thin arrow, hex 20 is space */
 292 }
 293
 294 .cent {
 295   text-align: center;
 296 }
 297
 298 .topmargin {
 299   margin-top: 0.5em;
 300 }
 301
 302 .akey {
 303   text-decoration: underline;
 304 }
 305
 306 a:link, a:visited { color: #669999; text-decoration: none; }
 307 a:hover, a:active { color: #88BBBB; text-decoration: underline; }
 308
 309 mark a:link, mark a:visited { color: #FF6600; }
 310 mark a:hover, mark a:active { color: #FF6600; }
 311
 312 pre { margin: 0; }
 313
 314 /***** small stuff *****/
 315
 316 .small,
 317 .small {
 318   font-size: 0.75em;
 319 }
 320
 321 ul.small,
 322 .small ul {
 323   padding: 0px;
 324   border: 0px;
 325   margin: 0px 0px 0px 1em;
 326 }
 327
 328 ul.small > li
 329 .small ul > li {
 330   margin: 0px;
 331   padding: 0px;
 332   border: 0px;
 333 }
 334
 335 /***** specific slides *****/
 336