From dd5441e7d2d29201967dc69c76017a2bfb7a1fe6 Mon Sep 17 00:00:00 2001
From: DeeDeeG <DeeDeeG@users.noreply.github.com>
Date: Tue, 28 Jan 2020 15:47:41 -0500
Subject: [PATCH] CSS: Center logo and brand name on narrow screens (#611)

* _mobile.scss: Lower logo/brand on narrow screens

Adjust the CSS "top" property to set the logo and "brand name"
("Refuge Restrooms") slightly lower within the navbar on narrow
screens.

This is to adjust for the navbar being responsively taller
on narrower screens. "767px screen width" happens to be the responsive
threshold for that height change for the navbar.

* _mobile.scss: Move 342px rules, adjust whitespace

Moved the "max 342px" rules to the bottom, so all screen-width-related
style rules are in descending order of the sizes that they apply to.
(For consistency).

Adjusted the use of newlines in this stylesheet to be more consitent.
---
 app/assets/stylesheets/_mobile.scss | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/_mobile.scss b/app/assets/stylesheets/_mobile.scss
index 01445406..3c9d7afe 100644
--- a/app/assets/stylesheets/_mobile.scss
+++ b/app/assets/stylesheets/_mobile.scss
@@ -8,15 +8,9 @@
 
 // Screen Width-Related Rules
 
-@media only screen and (max-width: 342px), only screen and (max-device-width: 344px) {
-
-    button.splash-add-restroom-btn > i.fa-plus-square-o {
-        margin-left: 2%;
-    }
-
-    .nav-column {
-        padding-left: 0;
-        padding-right: 0;
+@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
+    .navbar-default .toiletLogo {
+        top: 8px;
     }
 }
 
@@ -54,9 +48,9 @@
     }
     .showPageContent {
         padding: 10px;
-
     }
 }
+
 @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
     .container {
         width: 100%;
@@ -90,6 +84,17 @@
         font-size: 15px;
     }
 }
+
+@media only screen and (max-width: 342px), only screen and (max-device-width: 344px) {
+    button.splash-add-restroom-btn > i.fa-plus-square-o {
+        margin-left: 2%;
+    }
+    .nav-column {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
 a.iconLink:hover {
     text-decoration: none;
 }