public/stylesheets/base.css
/*
dark green: #4B9990;
light green: #A1CCC7;
very light green: #E3FFEC;
light pink: #FFA3CB;
hot pink: #FF1BF0;
*/
/*
dark black: 00010D
super pale blue: F2F2F2
ice blue: B4D9D9
mid teal: 78BFBF
teal: 60BFB6
*/
html {
width: 100%;
height: 100%;
-webkit-font-smoothing: antialiased; }
body {
background-color: #000;
padding: 0;
margin: 0;
color: #F2F2F2;
font-family: 'Bitter', serif; }
h1 {
font-size: 2em !important; }
h2 {
margin: 0; }
.brick.badge-heading {
background-image: none; }
.bricks {
margin: 0;
padding: 0;
display: flex;
display: -webkit-flex;
flex-flow: row nowrap;
-webkit-flex-flow: row nowrap;
flex-grow: 1;
-webkit-flex-grow: 1;
justify-content: space-between;
-webkit-justify-content: space-between; }
.bricks .brick {
float: left;
order: auto;
width: 32%;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
align-self: auto;
-webkit-align-self: auto;
min-height: 100%;
background-color: #00010D;
border-radius: 3px;
overflow: hidden; }
.bricks .brick h2, .bricks .brick div.box {
padding: 0 16px; }
.bricks .brick h2.brick-heading {
padding-top: 1em; }
.bricks .brick ul, .bricks .brick li {
margin: 0;
padding: 0;
/* promote to a GPU layer */
transform: translateZ(0);
-webkit-transform: translateZ(0);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.bricks .brick .content ul li {
margin: 0;
padding: 0.5em 0;
list-style: none;
line-height: 1; }
.bricks .brick .content ul li a {
color: inherit;
text-decoration: none; }
.bricks .brick .search-terms ul li {
margin: 0;
padding: 0.5em 0;
list-style: none;
font-size: 25px;
line-height: 1;
color: #B4D9D9;
opacity: 0.5; }
.bricks .brick .search-terms ul li:nth-child(1) {
opacity: 1.0; }
.bricks .brick .search-terms ul li:nth-child(2) {
opacity: 0.7; }
.bricks .brick .search-terms ul li a {
color: inherit;
text-decoration: none; }
.bricks .device-type {
width: 5px;
height: 80%;
background: #fff;
display: block;
position: absolute; }
.bricks .device-type.mobile, .bricks .device-type.tablet {
background: #B26E00; }
.bricks .device-type.desktop {
background: #265c8d; }
.bricks .link {
padding-left: 1em; }
.bricks .link i {
color: #717171;
font-size: 0.75em; }
.bricks .searches ul li {
margin: 0;
padding: 0.5em 0;
list-style: none;
font-size: 25px;
line-height: 1;
/* promote to a GPU layer */
transform: translateZ(0);
-webkit-transform: translateZ(0);
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
color: #B4D9D9;
opacity: 0.5; }
.bricks .searches ul li:nth-child(1) {
opacity: 1.0; }
.bricks .searches ul li:nth-child(2) {
opacity: 0.7; }
.bricks .popular li {
clear: both; }
.bricks .popular li em {
margin-top: 5px; }
.bricks .popular li em .visitor-types {
float: left;
color: #fff;
padding: 0.3em;
margin: 0 0.4em 0 0; }
.bricks .popular li em .visitor-types.mobile {
background: #B26E00; }
.bricks .popular li em .visitor-types.desktop {
background: #265c8d; }
.bricks .popular li em .device-type {
width: 5px;
height: 1em;
float: left;
margin: 0 0.4em 0 0; }
.top-bar {
background: #00010D;
padding: 10px 20px;
border-radius: 3px;
color: #000;
clear: both;
overflow: hidden; }
.top-bar p {
color: #B4D9D9;
font-size: 0.6em; }
.top-bar p a {
color: #B4D9D9; }
.top-bar .inner {
position: relative;
width: 105px;
height: 42px;
overflow: hidden;
float: left; }
.top-bar .inner img {
position: absolute;
border: none;
width: 70%; }
.box {
position: relative;
height: calc(100% - 210px);
text-align: left; }
.searches ul li {
margin: 0;
padding: 5px 0;
list-style: none;
font-size: 25px;
line-height: 1;
/* promote to a GPU layer */
transform: translateZ(0);
-webkit-transform: translateZ(0);
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
color: #B4D9D9;
opacity: 0.5; }
.searches ul li a {
color: inherit;
text-decoration: none; }
.searches ul li em {
color: #3E4345;
font-style: normal;
display: block;
font-size: 0.8em;
font-weight: normal; }
.searches ul li em span {
font-size: 0.8em; }
.searches ul li:nth-child(1) {
opacity: 1.0; }
.searches ul li:nth-child(2) {
opacity: 0.7; }
.traffic {
color: black;
color: #B4D9D9;
text-align: center; }
.traffic .text-feature {
color: #F2F2F2;
display: block;
font-weight: bold;
font-size: 300%; }
.traffic h1 {
margin: 0em 0 0;
font-size: 100px; }
.traffic p {
margin: 0; }
.traffic .count {
float: left;
margin-left: 1em; }
.tall .traffic .count {
width: 50%; }
.traffic #traffic-count-graph {
height: 200px; }
.traffic #graph-text {
text-align: right; }
.traffic .graph {
float: left;
width: 80%; }
.traffic path, .traffic line.axis {
stroke: #F2F2F2;
stroke-width: 0.4;
fill: none; }
.traffic .label {
fill: #78BFBF;
font-size: 16px; }
.traffic #traffic {
float: left; }
.traffic #traffic .visitor-count {
margin: 0 auto;
padding: 0.3em 1em; }
.traffic #traffic .visitor-count#mobile-count {
background: #B26E00; }
.traffic #traffic .visitor-count#desktop-count {
background: #265c8d;
margin-bottom: 5px; }
.sparkline path {
stroke: white;
stroke-width: 2; }
.content h1 {
margin: 0;
font-size: 15px;
font-weight: 500;
color: #999; }
.content ul {
padding: 0;
margin: 10px 0; }
.content li {
font-size: 22px;
margin: 0;
padding-bottom: 10px;
list-style: none;
color: #B4D9D9; }
.content li em {
font-style: normal;
display: block;
font-size: 0.8em;
font-weight: normal;
color: #6f777b; }
.content li em span {
font-size: 0.8em; }
.content li em span.triangle {
font-size: 0.6em; }
.content li em span.triangle, .content li em span.percent {
color: #006435; }
.content li:nth-child(1) {
font-size: 160%; }
/*# sourceMappingURL=base.css.map */