Show links on cards, cycle alphabetically

[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..1be691c 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;
@@ -22,6 +24,11 @@ header {
             margin-right: .5em;
             vertical-align:middle;
         }
+
+        &:hover {
+            color: white;
+            text-decoration: underline;
+        }
     }
 
     #buy {
@@ -32,7 +39,7 @@ header {
 
 .fnp-logo {
     text-align:right;
-    margin-top: 8.5em;
+    margin-top: 4em;
     text-align: center;
 
     img {
@@ -46,31 +53,24 @@ h1.main {
     @media screen and (min-width: 45em) {
         font-size: 2vw;
     }
+
+    a {
+        color: #ccc;
+        text-decoration: none;
+        &:hover {
+            color: white;
+            text-decoration: underline;
+        }
+    }
 }
 
 #intro {
     background-color: #222;
 }
 
-.desc-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    position: absolute;
-    left: 4.75em;
-    top: 6.75em;
-    bottom: 6.75em;
-    right: 4.75em;
-}
-
-.right-desc-container {
-    @extend .desc-container;
-    top: 14em;
-}
 
 .card-container {
     display: block;
-    line-height: 1.3em;
     position: relative;
     font-size: 4vw;
     clear: both;
@@ -87,6 +87,8 @@ h1.main {
     }
 }
 
+
+
 .three-container {
     @extend .card-container;
     font-size: 4vw;
@@ -190,6 +192,38 @@ h1.main {
     .inside-card {
         margin: 0 5em;
     }
+
+    .desc-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        position: absolute;
+        left: 4.75em;
+        top: 6.75em;
+        bottom: 6.75em;
+        right: 4.75em;
+
+        a {
+            color: #ccc;
+            border-bottom-width: 1px;
+            border-bottom-color: #ccc;
+            border-bottom-style: dotted;
+
+            &:hover {
+                color: white;
+                border-bottom-color: white;
+                text-decoration: none;
+            }
+        }
+        a[href^="http://"] {
+            border-bottom-style: dashed;
+        }
+    }
+
+    .right-desc-container {
+        @extend .desc-container;
+        top: 10em;
+    }
 }
 
 .chaotic {
@@ -200,8 +234,19 @@ h1.main {
     background-image: url(/static/img/bg/neutral.png);
     background-size: 100%;
 
-    color: #fff;
-    a { color: #fff; }
+    color: #555;
+    a { color: #555; }
+
+    .desc-container {
+        a {
+            color: #555;
+            border-bottom-color: #555;
+            &:hover {
+                color: black;
+                border-bottom-color: black;
+            }
+        }
+    }
 }
 .lawful {
     background-image: url(/static/img/bg/lawful.png);
@@ -212,7 +257,10 @@ h1.main {
     background-size: 100%;
 
     color: #656263;
-    a { color: #656263; }
+    a {color: #656263;}
+}
+.empty {
+    background-color: #222;
 }
 
 
@@ -254,10 +302,16 @@ $g22: lighten($g12, 10%);
 }
 
 
-.flatpage {
+.text-page-wrapper {
     background: #ddd;
     color: black;
-    padding: 3em;
+
+    .text-page {
+        max-width: 40em;
+        margin: auto;
+        padding: 3em;
+        
+    }
 }
 
 
@@ -274,3 +328,45 @@ footer {
         }
     }
 }
+
+
+%prevnext {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background: rgba(64,64,64,.5);
+    z-index:100;
+    opacity: 0;
+    text-align: center;
+
+    span {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5em;
+        left: 0;
+        width: 100%;
+        color: #000;
+    }
+
+    &:hover, &.active {
+        opacity: 1;
+    }
+
+    font-size: 8vw;
+    width: 16vw;
+    @media screen and (min-width: 45em) {
+        width: 8vw;
+        font-size: 4vw;
+    }
+}
+
+#previous-card {
+    @extend %prevnext;
+    left: 0;
+}
+#next-card {
+    @extend %prevnext;
+    right: 0;
+}
+