wiki/src/index.css

   1 #pagebody {
   2   font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif;
   3 }
   4
   5 span.title {
   6   display: none;
   7 }
   8
   9 h3 {
  10   font-size: 20px;
  11 }
  12
  13 .benefits-1 section, .benefits-2 section, .cfas, .news, .users, .recommended, .partners {
  14   margin-top: 3em;
  15 }
  16
  17 .hero {
  18   display: flex;
  19   flex-wrap: wrap;
  20   justify-content: center;
  21 }
  22
  23 .hero .sentence {
  24   margin-left: 10px;
  25 }
  26
  27 .hero h1 {
  28   font-size: 32px;
  29   font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif;
  30   margin-top: 19px;
  31   padding-left: 7px;
  32 }
  33
  34 .hero h1 .hero-tails {
  35   font-size: 42px;
  36   font-weight: bold;
  37   color: #56347c;
  38   margin-left: -7px;
  39 }
  40
  41 @media (max-width: 480px) {
  42   .hero .sentence br.optional {
  43     display: none;
  44   }
  45   .hero .sentence {
  46     width: 420px;
  47     font-size: 26px;
  48   }
  49 }
  50
  51 .benefits-1, .benefits-2 {
  52   display: flex;
  53   flex-wrap: wrap;
  54   justify-content: space-evenly;
  55 }
  56
  57 @media (min-width: 896px) {
  58   .benefits-1, .benefits-2 {
  59     justify-content: space-between;
  60   }
  61 }
  62
  63 .benefits section {
  64   width: 100%;
  65 }
  66
  67 @media (min-width: 480px) {
  68   .benefits section {
  69     width: 420px;
  70   }
  71 }
  72
  73 .benefits img {
  74   width: 100%;
  75 }
  76
  77 .benefits h3 {
  78   margin-top: 1.5em;
  79 }
  80
  81 .cfas {
  82   display: flex;
  83   justify-content: space-evenly;
  84 }
  85
  86 @media (max-width: 768px) {
  87   .cfas {
  88     flex-wrap: wrap;
  89   }
  90 }
  91
  92 .archive {
  93   display: flex;
  94   flex-wrap: wrap;
  95 }
  96
  97 .archive .archivepage {
  98   width: 100%;
  99 }
 100
 101 @media (min-width: 768px) {
 102   .archive .archivepage {
 103     width: 33%;
 104   }
 105 }
 106
 107 .personas {
 108   display: flex;
 109   flex-wrap: wrap;
 110   justify-content: space-around;
 111 }
 112
 113 .personas section {
 114   width: 70%;
 115 }
 116
 117 @media (min-width: 480px) {
 118   .personas section {
 119     width: 40%;
 120   }
 121 }
 122
 123 @media (min-width: 768px) {
 124   .personas section {
 125     width: 23%;
 126   }
 127 }
 128
 129 .personas img {
 130   display: block;
 131   margin: 2em auto;
 132 }
 133
 134 .benefits p, .personas p {
 135   font-size: 16px;
 136 }
 137
 138 .persona {
 139   font-weight: bold;
 140   color: #56347c;
 141   display: block;
 142 }