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   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: 110px;
 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);
 157 */
 158   transform: scale(0.1) rotate(360deg) translate(-200%, 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);
 173 */
 174   transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 175 }
 176
 177 /***** headers *****/
 178
 179 h1, h2, h3, h4 {
 180   margin: 0.5em 0;
 181   font-weight: bold;
 182   color: #003366;
 183   text-align: center;
 184 }
 185
 186 h1 {
 187   margin-top: 0;
 188   font-size: 1.7em;
 189   text-shadow: #AAAA80 3px 3px 5px;
 190 }
 191
 192 h2 {
 193   font-size: 1.3em;
 194   text-shadow: #AAAA80 2px 2px 3px;
 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   box-shadow: 0 0 0 1px #fff inset;
 220   background: #fff;
 221   background-image: radial-gradient(center 45px, ellipse farthest-corner, #FFFFEE 0, #fff 100%);
 222   border: 1px solid #336699;
 223   border-radius: .5em;
 224   box-shadow: #AAAA80 1px 1px 3px 2px;
 225 }
 226
 227 .captionedbox-content {
 228   margin: 0;
 229   padding: 0.5em;
 230   border: 0px;
 231   border-top: 1px solid #89AACC;
 232   border-radius: 0 0 .5em .5em;
 233 }
 234
 235 .captionedbox-caption {
 236   margin: 0;
 237   padding: 0.5em;
 238   font-weight: bold;
 239   text-shadow: #AAAA80 1px 1px 2px;
 240 }
 241
 242 /***** misc formatting *****/
 243
 244 mark {
 245   font-weight: bold;
 246   color: #FF6600;
 247   background-color: transparent;
 248   text-shadow: #AAAA80 2px 2px 3px;
 249 }
 250
 251 .border {
 252   border: 1px solid #336699;
 253   padding: 0.5em;
 254 }
 255
 256 .sshot {
 257   box-shadow: #6d7581 1px 1px 3px 2px;
 258 }
 259
 260 ul > li {
 261   margin: 0.5em 0;
 262 }
 263
 264 .cent {
 265   text-align: center;
 266 }
 267
 268 .topmargin {
 269   margin-top: 0.5em;
 270 }
 271
 272 .akey {
 273   text-decoration: underline;
 274 }
 275
 276 a:link, a:visited { color: #669999; text-decoration: none; }
 277 a:hover, a:active { color: #88BBBB; text-decoration: underline; }
 278
 279 mark a:link, mark a:visited { color: #FF6600; }
 280 mark a:hover, mark a:active { color: #FF6600; }
 281
 282 /***** small stuff *****/
 283
 284 .small,
 285 .small {
 286   font-size: 0.75em;
 287 }
 288
 289 ul.small,
 290 .small ul {
 291   padding: 0px;
 292   border: 0px;
 293   margin: 0px 0px 0px 1em;
 294 }
 295
 296 ul.small > li
 297 .small ul > li {
 298   margin: 0px;
 299   padding: 0px;
 300   border: 0px;
 301 }
 302
 303 /***** specific slides *****/
 304