linuxwochen2015/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 html {
  33   overflow: hidden; /* to make translations not paint scrollbars */
  34   background: #f5f1e8 url("template/page-background.png") top left repeat;
  35   height: 100%;
  36 }
  37
  38 body {
  39   margin: 0px;
  40   padding: 0px;
  41   border: 0px;
  42   font-family: "Open Sans", sans-serif;
  43   font-size: 2em;
  44   color: #333333;
  45   background: url("template/page-background-top.png") top left repeat-x;
  46   height: 100%;
  47 }
  48
  49 ul {
  50   padding-left: 1.2em;
  51   margin-bottom: 0.5em;
  52 }
  53
  54 ul:first-child,
  55 ul:last-child {
  56   margin-top: 0;
  57 }
  58
  59 #header {
  60   height: 40px;
  61   position: relative;
  62   border-top: 1px solid white;
  63 }
  64
  65 #headerlogo {
  66   position: absolute;
  67   display: block;
  68   right: 20px;
  69   top: 0;
  70   text-indent: -2000px;
  71   font-size: 1px;
  72   overflow: hidden;
  73   height: 41px;
  74   width: 148px;
  75   background: url("template/mozilla-tab.png") no-repeat;
  76 }
  77
  78 #header-text {
  79   position: relative;
  80   top: 5px;
  81   left: 25px;
  82   width: calc(100% - 50px);
  83   font-size: 20px;
  84   font-weight: bold;
  85   color: #808080;
  86 }
  87
  88 #header-text.neartime {
  89   color: #80AACC;
  90 }
  91
  92 #header-text.ontime {
  93   color: #80CC80;
  94 }
  95
  96 #header-text.overtime {
  97   color: #FF8080;
  98 }
  99
 100 #subheader-text {
 101   color: #808080;
 102   position: relative;
 103   top: 3px;
 104   left: 25px;
 105   width: calc(100% - 50px);
 106   font-size: 10px;
 107 }
 108
 109 #slidenav {
 110   position: absolute;
 111   right: 200px;
 112   top: 15px;
 113   font-size: 10px;
 114 }
 115
 116 #slidenav a:link,
 117 #slidenav a:visited {
 118   color: #484848;
 119 }
 120
 121 #slidenav a:hover,
 122 #slidenav a:active {
 123   color: #0073aa;
 124 }
 125
 126 #slidenav .nolink {
 127   color: #A0A0A0;
 128 }
 129
 130 article {
 131   position: absolute;
 132   width: 100%;
 133   /* header is 40px, 7px to have a bit of distance,
 134    * 3px height-reducing on the bottom for safety */
 135   top: 47px;
 136   height: calc(100% - 50px);
 137   overflow: auto;
 138
 139   transition-property: transform, opacity;
 140   transition-duration: 3s;
 141   transition-timing-function: ease;
 142   transform-origin: center 5em;
 143
 144   opacity: 0;
 145 /*
 146   transform: translate(-100%, 0);
 147 */
 148 /*
 149   transform: scale(0.1) rotate(360deg) translate(-200%, 0);
 150 */
 151   transform: scale(0.1) translate(-400%, 0);
 152 }
 153
 154 article[aria-selected="true"] {
 155   opacity: 1;
 156   transform: scale(1) rotate(0deg) translate(0, 0);
 157 }
 158
 159 article[aria-selected="true"] ~ article {
 160   opacity: 0;
 161 /*
 162   transform: translate(100%, 0);
 163 */
 164 /*
 165   transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 166 */
 167   transform: scale(0.1) translate(400%, 0);
 168 }
 169
 170 /***** headers *****/
 171
 172 h1, h2, h3, h4 {
 173   margin: 0.5em 0;
 174   font-weight: bold;
 175   color: #484848;
 176   text-align: center;
 177 }
 178
 179 h1 {
 180   margin-top: 0;
 181   font-size: 1.7em;
 182   text-shadow: #AAAA80 3px 3px 5px;
 183 }
 184
 185 h2 {
 186   font-size: 1.3em;
 187   text-shadow: #AAAA80 2px 2px 3px;
 188 }
 189
 190 h3 {
 191   font-size: 1.1em;
 192 }
 193
 194 h4 {
 195   font-size: 1em;
 196   text-align: left;
 197 }
 198
 199 /***** boxes *****/
 200
 201 .simplebox {
 202   padding: 0.5em;
 203 }
 204
 205 .captionedbox {
 206   padding: 0px;
 207 }
 208
 209 .simplebox,
 210 .captionedbox {
 211   margin: 1em;
 212   box-shadow: 0 0 0 1px #fff inset;
 213   background: #fff;
 214   background-image: radial-gradient(center 45px, ellipse farthest-corner, #f5f1e8 0, #fff 100%);
 215   border-bottom: 1px solid #ddd;
 216 }
 217
 218 .captionedbox-content {
 219   margin: 0;
 220   padding: 0.5em;
 221   border: 0px;
 222   border-top: 1px solid #d6d6d6;
 223 }
 224
 225 .captionedbox-caption {
 226   margin: 0;
 227   padding: 0.5em;
 228   font-weight: bold;
 229   text-shadow: #AAAA80 1px 1px 2px;
 230 }
 231
 232 /***** misc formatting *****/
 233
 234 mark {
 235   font-weight: bold;
 236   color: #FF6600;
 237   background-color: transparent;
 238   text-shadow: #AAAA80 2px 2px 3px;
 239 }
 240
 241 .border {
 242   border: 1px solid #6d7581;
 243   padding: 0.5em;
 244 }
 245
 246 .sshot {
 247   box-shadow: #6d7581 1px 1px 3px 2px;
 248 }
 249
 250 .slidepic {
 251   float: right;
 252   margin-left: .5em;
 253 }
 254
 255 .ensurepicinbox {
 256   clear: both;
 257   font-size: 1px;
 258   margin: 0;
 259 }
 260
 261 .largetext {
 262   font-size: 2em;
 263 }
 264
 265 ul > li {
 266   margin: 0.5em 0;
 267 }
 268
 269 .columns2 {
 270   -moz-columns: 2;
 271 }
 272
 273 ul.nobullets > li {
 274   list-style-type: none;
 275 }
 276
 277 ul.arrows > li {
 278   list-style-type: none;
 279 }
 280 ul.arrows > li:before {
 281   content: "\21d2\20"; /* \2192 would be single thin arrow, hex 20 is space */
 282 }
 283
 284 .cent {
 285   text-align: center;
 286 }
 287
 288 .topmargin {
 289   margin-top: 0.5em;
 290 }
 291
 292 .akey {
 293   text-decoration: underline;
 294 }
 295
 296 a:link, a:visited { color: #0096dd; text-decoration: none; }
 297 a:hover, a:active { color: #FF6600; text-decoration: underline; }
 298
 299 mark a:link, mark a:visited { color: #FF6600; }
 300 mark a:hover, mark a:active { color: #FF6600; }
 301
 302 pre { margin: 0; }
 303
 304 /***** small stuff *****/
 305
 306 .small,
 307 .small {
 308   font-size: 0.75em;
 309 }
 310
 311 ul.small,
 312 .small ul {
 313   padding: 0px;
 314   border: 0px;
 315   margin: 0px 0px 0px 1em;
 316 }
 317
 318 ul.small > li
 319 .small ul > li {
 320   margin: 0px;
 321   padding: 0px;
 322   border: 0px;
 323 }
 324
 325 /***** specific slides *****/
 326