Add words link, recommendations on dark bg

[copyspeak.git] / src / copyspeak / static / css / base.scss

diff --git a/src/copyspeak/static/css/base.scss b/src/copyspeak/static/css/base.scss
index cf98e39..523490a 100644 (file)
--- a/src/copyspeak/static/css/base.scss
+++ b/src/copyspeak/static/css/base.scss
@@ -1,3 +1,5 @@
+@import url(http://fonts.googleapis.com/css?family=Lato);
+

 html, body {
     margin: 0;
     padding: 0;
 html, body {
     margin: 0;
     padding: 0;


@@ -32,7 +34,7 @@ header {
 
 .fnp-logo {
     text-align:right;
 
 .fnp-logo {
     text-align:right;

-    margin-top: 8.5em;
+    margin-top: 4em;

     text-align: center;
 
     img {
     text-align: center;
 
     img {


@@ -46,6 +48,15 @@ h1.main {
     @media screen and (min-width: 45em) {
         font-size: 2vw;
     }
     @media screen and (min-width: 45em) {
         font-size: 2vw;
     }

+
+    a {
+        color: #ccc;
+        text-decoration: none;
+        &:hover {
+            color: white;
+            text-decoration: underline;
+        }
+    }

 }
 
 #intro {
 }
 
 #intro {


@@ -65,12 +76,11 @@ h1.main {
 
 .right-desc-container {
     @extend .desc-container;
 
 .right-desc-container {
     @extend .desc-container;

-    top: 14em;
+    top: 10em;

 }
 
 .card-container {
     display: block;
 }
 
 .card-container {
     display: block;

-    line-height: 1.3em;

     position: relative;
     font-size: 4vw;
     clear: both;
     position: relative;
     font-size: 4vw;
     clear: both;


@@ -87,6 +97,8 @@ h1.main {
     }
 }
 
     }
 }
 

+
+

 .three-container {
     @extend .card-container;
     font-size: 4vw;
 .three-container {
     @extend .card-container;
     font-size: 4vw;


@@ -212,7 +224,10 @@ h1.main {
     background-size: 100%;
 
     color: #656263;
     background-size: 100%;
 
     color: #656263;

-    a { color: #656263; }
+    a {color: #656263;}
+}
+.empty {
+    background-color: #222;

 }
 
 
 }
 
 


@@ -254,10 +269,16 @@ $g22: lighten($g12, 10%);
 }
 
 
 }
 
 

-.flatpage {
+.text-page-wrapper {

     background: #ddd;
     color: black;
     background: #ddd;
     color: black;

-    padding: 3em;
+
+    .text-page {
+        max-width: 40em;
+        margin: auto;
+        padding: 3em;
+        
+    }

 }
 
 
 }