themes/style/web-2.0.scss

   1 @mixin rotate($deg) {
   2   -webkit-transform:rotate($deg);
   3   -ms-transform:rotate($deg);
   4   transform:rotate($deg);
   5 }
   6
   7 @import "reset";
   8
   9 h1, h2, h3, h4, h5, h6 {
  10   font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  11 }
  12
  13 h1 {
  14   color:#08455f;
  15 }
  16
  17 h2 {
  18   color:#0b7495;
  19   border-bottom:0;
  20
  21   .cssreflections & {
  22     line-height:1;
  23     -webkit-box-reflect:below -0.5555em -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), color-stop(0.7, rgba(255,255,255,.1)), to(transparent));
  24     -moz-box-reflect:below -0.5555em -moz-linear-gradient(top, transparent 0%, transparent 30%, rgba(255,255,255,.3) 100%);
  25   }
  26 }
  27
  28 h3 {
  29   color:#000;
  30 }
  31
  32 pre {
  33   border-color:#cde;
  34   background:#fff;
  35   position:relative;
  36   z-index:auto;
  37   border-radius:5px;
  38
  39   /* http://nicolasgallagher.com/css-drop-shadows-without-images/ */
  40   .csstransforms.boxshadow & {
  41     > :first-child:before {
  42       content:"";
  43       position:absolute;
  44       z-index:-1;
  45       background:#fff;
  46       top:0;
  47       bottom:0;
  48       left:0;
  49       right:0;
  50     }
  51
  52     &:before, &:after {
  53       content:"";
  54       position:absolute;
  55       z-index:-2;
  56       bottom:15px;
  57       width:50%;
  58       height:20%;
  59       max-width:300px;
  60       box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  61     }
  62
  63     &:before {
  64       left:10px;
  65       @include rotate(-3deg);
  66     }
  67
  68     &:after {
  69       right:10px;
  70       @include rotate(3deg);
  71     }
  72   }
  73 }
  74
  75 code {
  76   color:#789;
  77 }
  78
  79 blockquote {
  80   font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  81   font-size:2em;
  82   padding:1em 2em .5em 2em;
  83   color:#000;
  84   background:#fff;
  85   position:relative;
  86   border:1px solid #cde;
  87   z-index:auto;
  88   border-radius:5px;
  89
  90   .boxshadow & {
  91     > :first-child:before {
  92       content:"";
  93       position:absolute;
  94       z-index:-1;
  95       background:#fff;
  96       top:0;
  97       bottom:0;
  98       left:0;
  99       right:0;
 100     }
 101
 102     &:after {
 103       content:"";
 104       position:absolute;
 105       z-index:-2;
 106       top: 10px;
 107       bottom: 10px;
 108       left: 0;
 109       right: 50%;
 110       -moz-border-radius: 10px / 100px;
 111       border-radius: 10px / 100px;
 112       box-shadow:0 0 15px rgba(0,0,0,0.6);
 113     }
 114   }
 115
 116   p {
 117     margin:0;
 118   }
 119
 120   cite {
 121     font-size:.5em;
 122     font-style:normal;
 123     font-weight:bold;
 124     color:#888;
 125   }
 126
 127   &:before {
 128     content:"“";
 129     position:absolute;
 130     top:0;
 131     left:0;
 132     font-size:5em;
 133     line-height:1;
 134     color:#ccf0f0;
 135     z-index:1;
 136   }
 137 }
 138
 139 ::-moz-selection{ background:#08455f; color:#fff; }
 140 ::selection { background:#08455f; color:#fff; }
 141
 142 a {
 143   &, &:hover, &:focus, &:active, &:visited {
 144     color:#599;
 145     text-decoration:none;
 146   }
 147
 148   &:hover, &:focus {
 149     text-decoration:underline;
 150   }
 151 }
 152
 153 .deck-container {
 154   font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
 155   font-size:1.75em;
 156   background: rgb(244,250,254); /* Old browsers */
 157   background: -moz-linear-gradient(top, rgba(244,250,254,1) 0%, rgba(204,240,240,1) 100%); /* FF3.6+ */
 158   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,250,254,1)), color-stop(100%,rgba(204,240,240,1))); /* Chrome,Safari4+ */
 159   background: -webkit-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* Chrome10+,Safari5.1+ */
 160   background: -o-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* Opera11.10+ */
 161   background: -ms-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* IE10+ */
 162   background: linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* W3C */
 163   background-attachment: fixed;
 164   text-shadow:1px 1px 1px rgba(255,255,255,.5);
 165
 166   > .slide {
 167     padding:0 48px;
 168   }
 169 }
 170
 171 .slide {
 172   .deck-before, .deck-previous {
 173     opacity:0.4;
 174
 175     &:not(.deck-child-current) {
 176       .deck-before, .deck-previous {
 177         opacity:1;
 178       }
 179     }
 180   }
 181
 182   .deck-child-current {
 183     opacity:1;
 184   }
 185 }
 186
 187 .deck-prev-link, .deck-next-link {
 188   background:#fff;
 189   opacity:0.5;
 190
 191   &, &:hover, &:focus, &:active, &:visited {
 192     color:#599;
 193   }
 194
 195   &:hover, &:focus {
 196     opacity:1;
 197     text-decoration:none;
 198   }
 199 }
 200
 201 .deck-status {
 202   font-size:0.6666em;
 203 }
 204
 205 .deck-menu {
 206   .slide {
 207     background:transparent;
 208     border-radius:5px;
 209
 210     .rgba & {
 211       background:rgba(0,0,0,.1);
 212     }
 213
 214     &.deck-current, .rgba &.deck-current, .no-touch &:hover {
 215       background:#fff;
 216     }
 217   }
 218 }
 219
 220 .goto-form {
 221   background:#fff;
 222   border:1px solid #cde;
 223   border-radius:5px;
 224
 225   .boxshadow & {
 226     box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 227   }
 228 }