src/copyspeak/static/css/base.scss

   1 @import url(http://fonts.googleapis.com/css?family=Lato);
   2
   3 html, body {
   4     margin: 0;
   5     padding: 0;
   6     height: 100%;
   7     background: black;
   8     color: #ccc;
   9     font-family: Lato;
  10 }
  11
  12 header {
  13     font-size: 16px;
  14
  15     a {
  16         text-decoration: none;
  17         color: #ddd;
  18         display: block;
  19         padding: .5em;
  20         float: left;
  21
  22         &:before {
  23             content: url(/static/img/brackets.png);
  24             margin-right: .5em;
  25             vertical-align:middle;
  26         }
  27
  28         &:hover {
  29             color: white;
  30             text-decoration: underline;
  31         }
  32     }
  33
  34     #buy {
  35         padding: 4px 10px 0 10px;
  36         float: right;
  37     }
  38 }
  39
  40 .fnp-logo {
  41     text-align:right;
  42     margin-top: 4em;
  43     text-align: center;
  44
  45     img {
  46         height: 4em;
  47     }
  48 }
  49
  50 h1.main {
  51     margin-left: 1em;
  52     font-size: 5vw;
  53     @media screen and (min-width: 45em) {
  54         font-size: 2vw;
  55     }
  56
  57     a {
  58         color: #ccc;
  59         text-decoration: none;
  60         &:hover {
  61             color: white;
  62             text-decoration: underline;
  63         }
  64     }
  65 }
  66
  67 #intro {
  68     background-color: #222;
  69 }
  70
  71
  72 .card-container {
  73     display: block;
  74     position: relative;
  75     font-size: 4vw;
  76     clear: both;
  77
  78     width: 100%;
  79     @media screen and (min-width: 45em) {
  80         font-size: 2vw;
  81         width: 50%;
  82         display: inline-block;
  83     }
  84
  85     .card-dummy {
  86         padding-top: 148.39%;
  87     }
  88 }
  89
  90
  91
  92 .three-container {
  93     @extend .card-container;
  94     font-size: 4vw;
  95
  96     @media screen and (min-width: 45em) {
  97         font-size: 1.3333vw;
  98         width: 33.33%;
  99         display: inline-block;
 100     }
 101 }
 102
 103
 104
 105 .list-card {
 106     @extend .card;
 107     font-size: 1.5em;
 108     padding: 1em;
 109
 110     display: flex;
 111     flex-direction: column;
 112     justify-content: space-around;
 113
 114     ul {
 115         column-count: 2;
 116         -moz-column-count: 2;
 117         -webkit-column-count: 2;
 118         column-gap: 1.5em;
 119         -moz-column-gap: 1.5em;;
 120         -webkit-column-gap: 1.5em;;
 121
 122         list-style: none;
 123         padding: 0;
 124         margin: 0;
 125         line-height: 1em;
 126
 127         li {
 128             margin-bottom: .6em
 129         }
 130     }
 131 }
 132
 133
 134 .card {
 135     position: absolute;
 136     top: 0;
 137     bottom: 0;
 138     left: 0;
 139     right: 0;
 140
 141     h1 {
 142         font-size: 1.5em;
 143         margin-top: 1.5em;
 144         width: 14.9em;
 145         text-align: right;
 146         text-transform: uppercase;
 147
 148         line-height: 1.3em;
 149
 150         .next {
 151             display: block;
 152             margin-right: 2em;
 153         }
 154     }
 155
 156     a {
 157         color: #ccc;
 158         text-decoration: none;
 159         &:hover {
 160             text-decoration: underline;
 161         }
 162     }
 163
 164     %body {
 165
 166         p {
 167             font-size: .85em;
 168             margin: .5em 0;
 169         }
 170     }
 171     .examples {
 172         @extend %body;
 173         text-transform: uppercase;
 174         text-align: center;
 175
 176         p {
 177             font-size: 1em;
 178             line-height: 1.2em;
 179         }
 180     }
 181     .usage {
 182         @extend %body;
 183         hyphens: auto;
 184         -moz-hyphens: auto;
 185     }
 186     .recommendations {
 187         @extend %body;
 188         hyphens: auto;
 189         -moz-hyphens: auto;
 190     }
 191
 192     .inside-card {
 193         margin: 0 5em;
 194     }
 195
 196     .desc-container {
 197         display: flex;
 198         flex-direction: column;
 199         justify-content: space-around;
 200         position: absolute;
 201         left: 4.75em;
 202         top: 6.75em;
 203         bottom: 6.75em;
 204         right: 4.75em;
 205
 206         a {
 207             color: #ccc;
 208             border-bottom-width: 1px;
 209             border-bottom-color: #ccc;
 210             border-bottom-style: dotted;
 211
 212             &:hover {
 213                 color: white;
 214                 border-bottom-color: white;
 215                 text-decoration: none;
 216             }
 217         }
 218         a[href^="http://"] {
 219             border-bottom-style: dashed;
 220         }
 221     }
 222
 223     .right-desc-container {
 224         @extend .desc-container;
 225         top: 10em;
 226     }
 227 }
 228
 229 .chaotic {
 230     background-image: url(/static/img/bg/chaotic.png);
 231     background-size: 100%;
 232 }
 233 .neutral {
 234     background-image: url(/static/img/bg/neutral.png);
 235     background-size: 100%;
 236
 237     color: #555;
 238     a { color: #555; }
 239
 240     .desc-container {
 241         a {
 242             color: #555;
 243             border-bottom-color: #555;
 244             &:hover {
 245                 color: black;
 246                 border-bottom-color: black;
 247             }
 248         }
 249     }
 250 }
 251 .lawful {
 252     background-image: url(/static/img/bg/lawful.png);
 253     background-size: 100%;
 254 }
 255 .info {
 256     background-image: url(/static/img/bg/info.png);
 257     background-size: 100%;
 258
 259     color: #656263;
 260     a {color: #656263;}
 261 }
 262 .empty {
 263     background-color: #222;
 264 }
 265
 266
 267
 268 $g11: #85db81;
 269 $g12: darken(#3db814, 10%);
 270 $g21: lighten($g11, 10%);
 271 $g22: lighten($g12, 10%);
 272 .btn {
 273     background: #fac878;
 274     background-image: -webkit-linear-gradient(top, $g11, $g12);
 275     background-image: -moz-linear-gradient(top, $g11, $g12);
 276     background-image: -ms-linear-gradient(top, $g11, $g12);
 277     background-image: -o-linear-gradient(top, $g11, $g12);
 278     background-image: linear-gradient(to bottom, $g11, $g12);
 279     -webkit-border-radius: 100%;
 280     -moz-border-radius: 100%;
 281     border-radius: 100%;
 282     border: 1em double white;
 283     color: #ffffff;
 284     padding: 2em;
 285     text-decoration: none;
 286     cursor: pointer;
 287
 288     font-size: 3.75vw;
 289     @media screen and (min-width: 45em) {
 290         font-size: 1.25vw;
 291     }
 292 }
 293
 294 .btn:hover {
 295     background: #fcba58;
 296     background-image: -webkit-linear-gradient(top, $g21, $g22);
 297     background-image: -moz-linear-gradient(top, $g21, $g22);
 298     background-image: -ms-linear-gradient(top, $g21, $g22);
 299     background-image: -o-linear-gradient(top, $g21, $g22);
 300     background-image: linear-gradient(to bottom, $g21, $g22);
 301     text-decoration: none;
 302 }
 303
 304
 305 .text-page-wrapper {
 306     background: #ddd;
 307     color: black;
 308
 309     .text-page {
 310         max-width: 40em;
 311         margin: auto;
 312         padding: 3em;
 313
 314     }
 315 }
 316
 317
 318 footer {
 319     margin: 3em 1em 0;
 320     font-size: .8em;
 321
 322     a {
 323         color: white;
 324         text-decoration: none;
 325
 326         &:hover {
 327             text-decoration: underline;
 328         }
 329     }
 330 }
 331
 332
 333 %prevnext {
 334     display: block;
 335     position: absolute;
 336     top: 0;
 337     bottom: 0;
 338     background: rgba(64,64,64,.5);
 339     z-index:100;
 340     opacity: 0;
 341     text-align: center;
 342
 343     span {
 344         position: absolute;
 345         top: 50%;
 346         margin-top: -.5em;
 347         left: 0;
 348         width: 100%;
 349         color: #000;
 350     }
 351
 352     &:hover, &.active {
 353         opacity: 1;
 354     }
 355
 356     font-size: 8vw;
 357     width: 16vw;
 358     @media screen and (min-width: 45em) {
 359         width: 8vw;
 360         font-size: 4vw;
 361     }
 362 }
 363
 364 #previous-card {
 365     @extend %prevnext;
 366     left: 0;
 367 }
 368 #next-card {
 369     @extend %prevnext;
 370     right: 0;
 371 }
 372