linuxwochen2013-makey/slides.css

   1 /**************************
   2  * styles for talk slides *
   3  *    by Robert Kaiser    *
   4  *    <kairo@kairo.at>    *
   5  * (for Linuxwochen 2013) *
   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: 37px;
  81   width: 60px;
  82   background: url("template/kairologo60.png") no-repeat;
  83 }
  84
  85 #header-text {
  86   position: relative;
  87   top: 5px;
  88   left: 25px;
  89   font-size: 20px;
  90   font-weight: bold;
  91   color: #336699;
  92 }
  93
  94 #header-text.neartime {
  95   color: #80AACC;
  96 }
  97
  98 #header-text.ontime {
  99   color: #80CC80;
 100 }
 101
 102 #header-text.overtime {
 103   color: #FF8080;
 104 }
 105
 106 #subheader-text {
 107   color: #336699;
 108   position: relative;
 109   top: 3px;
 110   left: 25px;
 111   font-size: 10px;
 112 }
 113
 114 #slidenav {
 115   position: absolute;
 116   right: 110px;
 117   top: 15px;
 118   font-size: 10px;
 119 }
 120
 121 #slidenav a:link,
 122 #slidenav a:visited {
 123   color: #669999;
 124 }
 125
 126 #slidenav a:hover,
 127 #slidenav a:active {
 128   color: #88BBBB;
 129 }
 130
 131 #slidenav .nolink {
 132   color: #A0A0A0;
 133 }
 134
 135 article {
 136   position: absolute;
 137   width: 100%;
 138   /* header is 40px, 7px to have a bit of distance,
 139    * 3px height-reducing on the bottom for safety */
 140   top: 47px;
 141   height: calc(100% - 50px);
 142   overflow: auto;
 143
 144   transition-property: transform, opacity;
 145   transition-duration: 3s;
 146   transition-timing-function: ease;
 147   transform-origin: center 5em;
 148
 149   opacity: 0;
 150 /*
 151   transform: translate(-100%, 0);
 152 */
 153 /*
 154   transform: scale(0.1) rotate(360deg);
 155 */
 156   transform: scale(0.1) rotate(360deg) translate(-200%, 0);
 157 }
 158
 159 article[aria-selected="true"] {
 160   opacity: 1;
 161   transform: scale(1) rotate(0deg) translate(0, 0);
 162 }
 163
 164 article[aria-selected="true"] ~ article {
 165   opacity: 0;
 166 /*
 167   transform: translate(100%, 0);
 168 */
 169 /*
 170   transform: scale(0.1) rotate(-360deg);
 171 */
 172   transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 173 }
 174
 175 /***** headers *****/
 176
 177 h1, h2, h3, h4 {
 178   margin: 0.5em 0;
 179   font-weight: bold;
 180   color: #336699;
 181   text-align: center;
 182 }
 183
 184 h1 {
 185   margin-top: 0;
 186   font-size: 1.7em;
 187   text-shadow: #AAAA80 3px 3px 5px;
 188 }
 189
 190 h2 {
 191   font-size: 1.3em;
 192   text-shadow: #AAAA80 2px 2px 3px;
 193 }
 194
 195 h3 {
 196   font-size: 1.1em;
 197 }
 198
 199 h4 {
 200   font-size: 1em;
 201   text-align: left;
 202 }
 203
 204 /***** boxes *****/
 205
 206 .simplebox {
 207   padding: 0.5em;
 208 }
 209
 210 .captionedbox {
 211   padding: 0px;
 212 }
 213
 214 .simplebox,
 215 .captionedbox {
 216   margin: 1em;
 217   box-shadow: 0 0 0 1px #fff inset;
 218   background: #fff;
 219   background-image: radial-gradient(center 45px, ellipse farthest-corner, #FFFFEE 0, #fff 100%);
 220   border: 1px solid #336699;
 221   border-radius: .5em;
 222   box-shadow: #AAAA80 1px 1px 3px 2px;
 223 }
 224
 225 .captionedbox-content {
 226   margin: 0;
 227   padding: 0.5em;
 228   border: 0px;
 229   border-top: 1px solid #89AACC;
 230   border-radius: 0 0 .5em .5em;
 231 }
 232
 233 .captionedbox-caption {
 234   margin: 0;
 235   padding: 0.5em;
 236   font-weight: bold;
 237   text-shadow: #AAAA80 1px 1px 2px;
 238 }
 239
 240 /***** misc formatting *****/
 241
 242 mark {
 243   font-weight: bold;
 244   color: #FF6600;
 245   background-color: transparent;
 246   text-shadow: #AAAA80 2px 2px 3px;
 247 }
 248
 249 .border {
 250   border: 1px solid #336699;
 251   padding: 0.5em;
 252 }
 253
 254 .sshot {
 255   box-shadow: #6d7581 1px 1px 3px 2px;
 256 }
 257
 258 ul > li {
 259   margin: 0.5em 0;
 260 }
 261
 262 .cent {
 263   text-align: center;
 264 }
 265
 266 .topmargin {
 267   margin-top: 0.5em;
 268 }
 269
 270 .akey {
 271   text-decoration: underline;
 272 }
 273
 274 a:link, a:visited { color: #669999; text-decoration: none; }
 275 a:hover, a:active { color: #88BBBB; text-decoration: underline; }
 276
 277 mark a:link, mark a:visited { color: #FF6600; }
 278 mark a:hover, mark a:active { color: #FF6600; }
 279
 280 /***** small stuff *****/
 281
 282 .small,
 283 .small {
 284   font-size: 0.75em;
 285 }
 286
 287 ul.small,
 288 .small ul {
 289   padding: 0px;
 290   border: 0px;
 291   margin: 0px 0px 0px 1em;
 292 }
 293
 294 ul.small > li
 295 .small ul > li {
 296   margin: 0px;
 297   padding: 0px;
 298   border: 0px;
 299 }
 300
 301 /***** specific slides *****/
 302