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