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