src/copyspeak/static/css/base.css

   1 html, body {
   2   margin: 0;
   3   padding: 0;
   4   height: 100%;
   5   background: black;
   6   color: #ccc;
   7   font-family: Lato; }
   8
   9 header {
  10   font-size: 16px; }
  11   header a {
  12     text-decoration: none;
  13     color: #ddd;
  14     display: block;
  15     padding: .5em;
  16     float: left; }
  17     header a:before {
  18       content: url(/static/img/brackets.png);
  19       margin-right: .5em;
  20       vertical-align: middle; }
  21   header #buy {
  22     padding: 4px 10px 0 10px;
  23     float: right; }
  24
  25 .fnp-logo {
  26   text-align: right;
  27   margin-top: 8.5em;
  28   text-align: center; }
  29   .fnp-logo img {
  30     height: 4em; }
  31
  32 h1.main {
  33   margin-left: 1em;
  34   font-size: 5vw; }
  35   @media screen and (min-width: 45em) {
  36     h1.main {
  37       font-size: 2vw; } }
  38
  39 #intro {
  40   background-color: #222; }
  41
  42 .desc-container, .right-desc-container {
  43   display: flex;
  44   flex-direction: column;
  45   justify-content: space-around;
  46   position: absolute;
  47   left: 4.75em;
  48   top: 6.75em;
  49   bottom: 6.75em;
  50   right: 4.75em; }
  51
  52 .right-desc-container {
  53   top: 14em; }
  54
  55 .card-container, .three-container {
  56   display: block;
  57   line-height: 1.3em;
  58   position: relative;
  59   font-size: 4vw;
  60   clear: both;
  61   width: 100%; }
  62   @media screen and (min-width: 45em) {
  63     .card-container, .three-container {
  64       font-size: 2vw;
  65       width: 50%;
  66       display: inline-block; } }
  67   .card-container .card-dummy, .three-container .card-dummy {
  68     padding-top: 148.39%; }
  69
  70 .three-container {
  71   font-size: 4vw; }
  72   @media screen and (min-width: 45em) {
  73     .three-container {
  74       font-size: 1.3333vw;
  75       width: 33.33%;
  76       display: inline-block; } }
  77
  78 .list-card {
  79   font-size: 1.5em;
  80   padding: 1em;
  81   display: flex;
  82   flex-direction: column;
  83   justify-content: space-around; }
  84   .list-card ul {
  85     column-count: 2;
  86     -moz-column-count: 2;
  87     -webkit-column-count: 2;
  88     column-gap: 1.5em;
  89     -moz-column-gap: 1.5em;
  90     -webkit-column-gap: 1.5em;
  91     list-style: none;
  92     padding: 0;
  93     margin: 0;
  94     line-height: 1em; }
  95     .list-card ul li {
  96       margin-bottom: 0.6em; }
  97
  98 .card, .list-card {
  99   position: absolute;
 100   top: 0;
 101   bottom: 0;
 102   left: 0;
 103   right: 0; }
 104   .card h1, .list-card h1 {
 105     font-size: 1.5em;
 106     margin-top: 1.5em;
 107     width: 14.9em;
 108     text-align: right;
 109     text-transform: uppercase;
 110     line-height: 1.3em; }
 111     .card h1 .next, .list-card h1 .next {
 112       display: block;
 113       margin-right: 2em; }
 114   .card a, .list-card a {
 115     color: #ccc;
 116     text-decoration: none; }
 117     .card a:hover, .list-card a:hover {
 118       text-decoration: underline; }
 119   .card .examples p, .list-card .examples p, .card .usage p, .list-card .usage p, .card .recommendations p, .list-card .recommendations p {
 120     font-size: .85em;
 121     margin: .5em 0; }
 122   .card .examples, .list-card .examples {
 123     text-transform: uppercase;
 124     text-align: center; }
 125     .card .examples p, .list-card .examples p {
 126       font-size: 1em;
 127       line-height: 1.2em; }
 128   .card .usage, .list-card .usage {
 129     hyphens: auto;
 130     -moz-hyphens: auto; }
 131   .card .recommendations, .list-card .recommendations {
 132     hyphens: auto;
 133     -moz-hyphens: auto; }
 134   .card .inside-card, .list-card .inside-card {
 135     margin: 0 5em; }
 136
 137 .chaotic {
 138   background-image: url(/static/img/bg/chaotic.png);
 139   background-size: 100%; }
 140
 141 .neutral {
 142   background-image: url(/static/img/bg/neutral.png);
 143   background-size: 100%;
 144   color: #fff; }
 145   .neutral a {
 146     color: #fff; }
 147
 148 .lawful {
 149   background-image: url(/static/img/bg/lawful.png);
 150   background-size: 100%; }
 151
 152 .info {
 153   background-image: url(/static/img/bg/info.png);
 154   background-size: 100%;
 155   color: #656263; }
 156   .info a {
 157     color: #656263; }
 158
 159 .btn {
 160   background: #fac878;
 161   background-image: -webkit-linear-gradient(top, #85db81, #2e8a0f);
 162   background-image: -moz-linear-gradient(top, #85db81, #2e8a0f);
 163   background-image: -ms-linear-gradient(top, #85db81, #2e8a0f);
 164   background-image: -o-linear-gradient(top, #85db81, #2e8a0f);
 165   background-image: linear-gradient(to bottom, #85db81, #2e8a0f);
 166   -webkit-border-radius: 100%;
 167   -moz-border-radius: 100%;
 168   border-radius: 100%;
 169   border: 1em double white;
 170   color: #ffffff;
 171   padding: 2em;
 172   text-decoration: none;
 173   cursor: pointer;
 174   font-size: 3.75vw; }
 175   @media screen and (min-width: 45em) {
 176     .btn {
 177       font-size: 1.25vw; } }
 178
 179 .btn:hover {
 180   background: #fcba58;
 181   background-image: -webkit-linear-gradient(top, #abe6a9, #3db814);
 182   background-image: -moz-linear-gradient(top, #abe6a9, #3db814);
 183   background-image: -ms-linear-gradient(top, #abe6a9, #3db814);
 184   background-image: -o-linear-gradient(top, #abe6a9, #3db814);
 185   background-image: linear-gradient(to bottom, #abe6a9, #3db814);
 186   text-decoration: none; }
 187
 188 .flatpage {
 189   background: #ddd;
 190   color: black;
 191   padding: 3em; }
 192
 193 footer {
 194   margin: 3em 1em;
 195   font-size: .8em; }