Merge pull request #17 from hurricane-response/fix-past-responses-list

Styling fix: make past responses list wrap on small screens

assets/css/_inc/links.css

@@ -1,24 +1,25 @@
-a {
+.mainnav a {
     outline: none;
     text-decoration: none;
     padding: 2px 1px 0;
 }
 
 
 a:link {
-    color: var(--blue);
+    color: var(--cfablue);
 }
 
-.mainnav a:link {
-    color: white;
+.mainnav a:link,
+.mainnav a:visited {
+    color: var(--grey-light);
 }
 
 a:visited { 
-    color: var(--grey-dark);
+    color: var(--blue);
 }
 
 a:focus {
-    border-bottom: 1px solid var(--blue);
+    border-bottom: 1px solid var(--cfablue);
 }
 
 .mainnav a:focus {
@@ -27,17 +28,17 @@ a:focus {
 
 a:hover {
     border-bottom: 1px solid;
-  }
+}
 
 .mainnav a:hover {
     border-bottom: 1px solid var(--red);
     color: var(--red);
     background: white;
-  }
+}
 
-  a:active {
+a:active {
     color: var(--highlight);
-  }
+}
 
 .text-bot a:link {
     color: var(--grey-light);

assets/css/_inc/main.css

@@ -22,7 +22,69 @@
     text-align: center;
 }
 
-.page-content .content {
+.content {
     width: 95vw;
     margin: 0 auto;
 }
+
+h2, h3, h4, h5, h6 {
+    line-height: 1;
+    text-align: center;
+}
+
+.content .content-intro {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 60rem;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.responses {
+    list-style: none;
+    padding-left: 0;
+}
+.responses .response {
+    padding: 0.5em;
+    border: 1px var(--grey-light) solid;
+    border-radius: 5px;
+    margin-right: 10px;
+    text-align: center;
+    margin-bottom: 10px;
+}
+.responses .response:last-child {
+    margin-right: 0;
+}
+.responses > a {
+    text-decoration: none;
+}
+.responses-active .response {
+    background-color: var(--grey-light);
+    border: 1px var(--grey-dark) solid;
+    border-radius: 10px;
+    box-shadow: inset 0 0 5px var(--grey-dark);
+    touch-action: manipulation;
+    cursor: pointer;
+    color: var(--red);
+    font-size: 2rem;
+    margin-right: 0;
+}
+.responses-active .response h3 {
+    font-size: 2rem;
+}
+.responses-inactive {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+
+}
+.responses-drills {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}