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
  29     #buy {
  30         padding: 4px 10px 0 10px;
  31         float: right;
  32     }
  33 }
  34
  35 .fnp-logo {
  36     text-align:right;
  37     margin-top: 8.5em;
  38     text-align: center;
  39
  40     img {
  41         height: 4em;
  42     }
  43 }
  44
  45 h1.main {
  46     margin-left: 1em;
  47     font-size: 5vw;
  48     @media screen and (min-width: 45em) {
  49         font-size: 2vw;
  50     }
  51 }
  52
  53 #intro {
  54     background-color: #222;
  55 }
  56
  57 .desc-container {
  58     display: flex;
  59     flex-direction: column;
  60     justify-content: space-around;
  61     position: absolute;
  62     left: 4.75em;
  63     top: 6.75em;
  64     bottom: 6.75em;
  65     right: 4.75em;
  66 }
  67
  68 .right-desc-container {
  69     @extend .desc-container;
  70     top: 14em;
  71 }
  72
  73 .card-container {
  74     display: block;
  75     position: relative;
  76     font-size: 4vw;
  77     clear: both;
  78
  79     width: 100%;
  80     @media screen and (min-width: 45em) {
  81         font-size: 2vw;
  82         width: 50%;
  83         display: inline-block;
  84     }
  85
  86     .card-dummy {
  87         padding-top: 148.39%;
  88     }
  89 }
  90
  91 .three-container {
  92     @extend .card-container;
  93     font-size: 4vw;
  94
  95     @media screen and (min-width: 45em) {
  96         font-size: 1.3333vw;
  97         width: 33.33%;
  98         display: inline-block;
  99     }
 100 }
 101
 102
 103
 104 .list-card {
 105     @extend .card;
 106     font-size: 1.5em;
 107     padding: 1em;
 108
 109     display: flex;
 110     flex-direction: column;
 111     justify-content: space-around;
 112
 113     ul {
 114         column-count: 2;
 115         -moz-column-count: 2;
 116         -webkit-column-count: 2;
 117         column-gap: 1.5em;
 118         -moz-column-gap: 1.5em;;
 119         -webkit-column-gap: 1.5em;;
 120
 121         list-style: none;
 122         padding: 0;
 123         margin: 0;
 124         line-height: 1em;
 125
 126         li {
 127             margin-bottom: .6em
 128         }
 129     }
 130 }
 131
 132
 133 .card {
 134     position: absolute;
 135     top: 0;
 136     bottom: 0;
 137     left: 0;
 138     right: 0;
 139
 140     h1 {
 141         font-size: 1.5em;
 142         margin-top: 1.5em;
 143         width: 14.9em;
 144         text-align: right;
 145         text-transform: uppercase;
 146
 147         line-height: 1.3em;
 148
 149         .next {
 150             display: block;
 151             margin-right: 2em;
 152         }
 153     }
 154
 155     a {
 156         color: #ccc;
 157         text-decoration: none;
 158         &:hover {
 159             text-decoration: underline;
 160         }
 161     }
 162
 163     %body {
 164
 165         p {
 166             font-size: .85em;
 167             margin: .5em 0;
 168         }
 169     }
 170     .examples {
 171         @extend %body;
 172         text-transform: uppercase;
 173         text-align: center;
 174
 175         p {
 176             font-size: 1em;
 177             line-height: 1.2em;
 178         }
 179     }
 180     .usage {
 181         @extend %body;
 182         hyphens: auto;
 183         -moz-hyphens: auto;
 184     }
 185     .recommendations {
 186         @extend %body;
 187         hyphens: auto;
 188         -moz-hyphens: auto;
 189     }
 190
 191     .inside-card {
 192         margin: 0 5em;
 193     }
 194 }
 195
 196 .chaotic {
 197     background-image: url(/static/img/bg/chaotic.png);
 198     background-size: 100%;
 199 }
 200 .neutral {
 201     background-image: url(/static/img/bg/neutral.png);
 202     background-size: 100%;
 203
 204     color: #fff;
 205     a { color: #fff; }
 206 }
 207 .lawful {
 208     background-image: url(/static/img/bg/lawful.png);
 209     background-size: 100%;
 210 }
 211 .info {
 212     background-image: url(/static/img/bg/info.png);
 213     background-size: 100%;
 214
 215     color: #656263;
 216     a { color: #656263; }
 217 }
 218
 219
 220
 221 $g11: #85db81;
 222 $g12: darken(#3db814, 10%);
 223 $g21: lighten($g11, 10%);
 224 $g22: lighten($g12, 10%);
 225 .btn {
 226     background: #fac878;
 227     background-image: -webkit-linear-gradient(top, $g11, $g12);
 228     background-image: -moz-linear-gradient(top, $g11, $g12);
 229     background-image: -ms-linear-gradient(top, $g11, $g12);
 230     background-image: -o-linear-gradient(top, $g11, $g12);
 231     background-image: linear-gradient(to bottom, $g11, $g12);
 232     -webkit-border-radius: 100%;
 233     -moz-border-radius: 100%;
 234     border-radius: 100%;
 235     border: 1em double white;
 236     color: #ffffff;
 237     padding: 2em;
 238     text-decoration: none;
 239     cursor: pointer;
 240
 241     font-size: 3.75vw;
 242     @media screen and (min-width: 45em) {
 243         font-size: 1.25vw;
 244     }
 245 }
 246
 247 .btn:hover {
 248     background: #fcba58;
 249     background-image: -webkit-linear-gradient(top, $g21, $g22);
 250     background-image: -moz-linear-gradient(top, $g21, $g22);
 251     background-image: -ms-linear-gradient(top, $g21, $g22);
 252     background-image: -o-linear-gradient(top, $g21, $g22);
 253     background-image: linear-gradient(to bottom, $g21, $g22);
 254     text-decoration: none;
 255 }
 256
 257
 258 .text-page-wrapper {
 259     background: #ddd;
 260     color: black;
 261
 262     .text-page {
 263         max-width: 40em;
 264         margin: auto;
 265         padding: 3em;
 266
 267     }
 268 }
 269
 270
 271 footer {
 272     margin: 3em 1em;
 273     font-size: .8em;
 274
 275     a {
 276         color: white;
 277         text-decoration: none;
 278
 279         &:hover {
 280             text-decoration: underline;
 281         }
 282     }
 283 }