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