FIXED random card title.

FIXED page header spacing.
UPDATED to v0.2.3.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mysticbits/codex-mythica",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": true,
   "scripts": {
     "start": "nodejs ./bin/www"

public/styles/styles.css

@@ -127,6 +127,7 @@ h1 {
 }
 
 h2 {
+  line-height: 1.35em;
   padding-top: 1em;
   text-align: center;
 }
@@ -213,42 +214,6 @@ p {
   vertical-align: middle;
 }
 
-.card-randomLink {
-  border: none;
-  display: inline-block;
-  padding: 0;
-  line-height: 0;
-  margin: 0;
-}
-
-.card-randomLink:hover {
-  border: none;
-}
-
-.card-randomLink > figure {
-  border: none;
-  margin: .5em 2em;
-}
-
-.card-randomLink > figure > figcaption {
-  line-height: 1.35em;
-}
-
-.card-randomLink > .card-image {
-  display: inline;
-  padding: 0;
-  margin: 0;
-}
-
-.card-randomLink-wrapper {
-  border-bottom: 1px solid #91803a;
-}
-
-.card-randomWrapper {
-  margin-top: 0;
-  text-align: center;
-}
-
 .card-score {
   max-width: 1.1em;
   vertical-align: middle;
@@ -400,6 +365,7 @@ p {
 
 .navMenu-logoBtn {
   border: none;
+  display: block;
   padding: .25em;
 }
 
@@ -483,6 +449,49 @@ p {
   vertical-align: middle;
 }
 
+.randomLink {
+  border: none;
+  display: inline-block;
+  padding: 0;
+  line-height: 0;
+  margin: 0;
+}
+
+.randomLink:hover {
+  border: none;
+}
+
+.randomLink > figure {
+  border: none;
+  margin: .5em 2em;
+}
+
+.randomLink > figure > figcaption {
+  line-height: 1.35em;
+}
+
+.randomLink > .card-image {
+  display: inline;
+  padding: 0;
+  margin: 0;
+}
+
+.randomLink-title {
+  line-height: 1.35em;
+  margin: .5em auto 0;
+  padding: 0;
+}
+
+.randomLink-wrapper {
+  border-bottom: 1px solid #91803a;
+}
+
+.randomWrapper {
+  margin-top: 0;
+  text-align: center;
+}
+
+
 .searchForm {
   border: 1px solid #666;
   display: block;

views/partials/random_card.ejs

@@ -1,8 +1,8 @@
 <% if (typeof card !== 'undefined' && typeof random_num !== 'undefined') { %>
   <a href="/cards/<%= card.num.toLowerCase() %>"
-    class="card-randomLink" title="Tap or click to learn about <%= card.name %>'s card!">
+    class="randomLink" title="Tap or click to learn about <%= card.name %>'s card!">
     <figure>
-      <h3>Random Card: <%=card.name%></h3>
+      <h3 class="randomLink-title">Random Card: <%=card.name%></h3>
       <img
         src="/images/thumb/<%= card.num.toLowerCase() %>_<%= card.name_ang %>.jpg"
         alt="Card image for <%=card.name%>"
@@ -14,7 +14,7 @@
       </figcaption>
     </figure>
   </a>
-  <p class="card-randomWrapper">
+  <p class="randomWrapper">
     or
     <a href="/?r<%=random_num%>">&#x21bb; reload the page for a different card.</a>
   </p>