hamburger phone menu for the win!

modified:   remarkbox_theme_meta/static/theme/meta/css/meta.css
	modified:   remarkbox_theme_meta/templates/meta-base.j2

remarkbox_theme_meta/static/theme/meta/css/diff.css

@@ -2,10 +2,7 @@ h2 {
     font-size: 3.0rem;
 }
 
-a, a:visited, a:hover {
-    color: #292929;
-}
-
+/* some reason this is needed */
 a:hover, a.navlogolink, a.navlogolink:visited {
     opacity: 1.0;
 }
@@ -14,13 +11,6 @@ a.button {
     opacity: 1.0;
 }
 
-/*
-button {
-    height: 28px;
-    line-height: 28px;
-}
-*/
-
 button.link {
     letter-spacing: unset;
     text-transform: unset;

remarkbox_theme_meta/static/theme/meta/css/meta.css

@@ -2,6 +2,9 @@
   --black: 0, 0, 0;
   --white: 255, 255, 255;
   --red: 170, 0 , 0;
+  --red-light: 212, 0 , 0;
+  --red-dark: 128, 0 , 0;
+  --red-darker: 96, 0 , 0;
   --blue: 0, 170, 170;
   --green: 0, 170, 85;
 }
@@ -10,8 +13,15 @@ h1, h2, h3, h4, h5, h6 {
     padding-top: 2rem;
 }
 
-a, a:link, a:visited {
-    text-decoration: none;
+a, a:link, a:visited,
+button.link {
+  text-decoration: none;
+  color: rgb(var(--red-darker));
+}
+
+a:hover,
+button.link:hover {
+  color: rgb(var(--red));
 }
 
 a.anchor {
@@ -29,6 +39,15 @@ a.anchor {
     color: #888888;
 }
 
+.remarkbox-menu a,
+.remarkbox-menu a:link,
+.remarkbox-menu a:visited, 
+#remarkbox-footer a,
+#remarkbox-footer a:link,
+#remarkbox-footer a:visited {
+    color: #292929;
+}
+
 body {
     background-color: #f8f5f5;
     overflow-x: hidden;
@@ -158,6 +177,11 @@ input, textarea, select, fieldset {
 /* I made a fiddle that could help with buttons and colors */
 /* https://jsfiddle.net/7nL0sfy0/ */
 
+.button, a.button, a.button:link, a.button:visited {
+  color: #333;
+  border-color: #888;
+}
+
 .button-small,
 input.button-small {
   height: 28px;
@@ -242,7 +266,10 @@ input.button-small {
   input[type="button"],
   .button,
   .button-small {
-    font-size: .80rem; padding: .80rem; height: 10px; line-height: 5px;
+    font-size: .90rem; padding: .90rem; height: 10px; line-height: 3px;
+  }
+  .remarkbox-menu {
+    padding-top: 8px;
   }
 }  
 
@@ -251,3 +278,17 @@ input.button-small {
   .hidden-on-tablet {display: none} 
   .shown-on-tablet  {display: block} 
 }  
+
+/* burger phone menu */
+
+.burger-label {
+  background-color: rgb(var(--red));
+  transition: .5s;
+}
+.burger-label:hover {
+  background-color: rgb(var(--red-light));
+  transition: .5s;
+}
+.burger-label span {
+  background-color: rgb(var(--white));
+}

remarkbox_theme_meta/templates/meta-base.j2

@@ -124,6 +124,8 @@
 {% endblock %}
 </div>
 
+{% include 'snippets/phone-menu.j2' %}
+
 <div id="remarkbox-footer">
   <br />
   <br />