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