src/copyspeak/static/css/base.scss

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