fixed logo display on small screens

app/assets/stylesheets/_homepage.scss

@@ -1,4 +1,3 @@
-
 // stats shown on homepage. eg. "999 members..."
 .stats {
   font-weight: bold;

app/assets/stylesheets/_members.scss

@@ -11,7 +11,7 @@
   }
 }
 
-.member-thumbnail div ~ div {
+.member-thumbnail div~div {
   padding-left: 1em;
   width: 15em;
 }

app/assets/stylesheets/_plantings.scss

@@ -4,9 +4,11 @@
     font-size: 1em;
     position: absolute;
     top: 3em;
+
     .badge-super-late {
       background-color: $red;
     }
+
     .badge-harvest {
       background-color: $blue;
     }

app/assets/stylesheets/_predictions.scss

@@ -8,7 +8,7 @@
     text-align: center;
 
     strong {
-      font-align: center;
+      text-align: center;
       font-size: 3em;
     }
 

app/assets/stylesheets/_variables.scss

@@ -15,37 +15,30 @@ $body-bg: $beige;
 $text-color: $brown;
 $link-color: $green;
 
-$default-font: 'Raleway', "Fira Sans", Helvetica, Arial, sans-serif;
+$default-font: 'Raleway',
+"Fira Sans",
+Helvetica,
+Arial,
+sans-serif;
 
-$primary: (
-  color: $green,
-  dark:  darken($green, 20%),
-  light: lighten($green, 20%)
-);
-$secondary: (
-  color: $blue,
-  dark:  darken($blue, 20%),
-  light: lighten($blue, 20%)
-);
-$success: (
-  color: $green,
-  dark:  darken($green, 20%),
-  light: lighten($green, 20%)
-);
-$danger: (
-  color: $red,
-  dark:  darken($red, 20%),
-  light: lighten($red, 20%)
-);
-$dark: (
-  color: $brown,
-  dark:  darken($brown, 20%),
-  light: lighten($brown, 20%)
-);
+$primary: (color: $green,
+  dark: darken($green, 20%),
+  light: lighten($green, 20%));
+$secondary: (color: $blue,
+  dark: darken($blue, 20%),
+  light: lighten($blue, 20%));
+$success: (color: $green,
+  dark: darken($green, 20%),
+  light: lighten($green, 20%));
+$danger: (color: $red,
+  dark: darken($red, 20%),
+  light: lighten($red, 20%));
+$dark: (color: $brown,
+  dark: darken($brown, 20%),
+  light: lighten($brown, 20%));
 
 
-$grid-breakpoints: (
-  // Extra small screen / phone
+$grid-breakpoints: ( // Extra small screen / phone
   xs: 0,
   // Small screen / phone
   sm: 576px,
@@ -54,8 +47,7 @@ $grid-breakpoints: (
   // Large screen / desktop
   lg: 1200px,
   // Extra large screen / wide desktop
-  xl: 1800px
-);
+  xl: 1800px);
 
 // Nav bar
 $navbar-default-bg: $brown;
@@ -66,8 +58,8 @@ $navbar-default-link-hover-color: $beige;
 $navbar-default-link-active-color: darken($beige, 80%);
 $navbar-default-brand-color: lighten($green, 20%);
 
-$highest-level:  1070;
+$highest-level: 1070;
 
 $progress-height: 5em;
 $progress-bar-color: $green;
-$progress-bg: $white;
+$progress-bg: $white;

app/assets/stylesheets/application.scss

@@ -16,6 +16,7 @@
 @import 'rails_bootstrap_forms';
 
 @import 'overrides';
+@import 'mobile';
 
 @import 'crops';
 @import 'harvests';

app/assets/stylesheets/comfy/admin/cms/custom.sass

@@ -1 +0,0 @@
-// custom CSS for admin area

app/assets/stylesheets/mobile.scss

@@ -0,0 +1,88 @@
+// Overrides applying only to mobile view. This must be at the end of the overrides file.
+// Extra small devices (portrait phones, less than 576px)
+@include media-breakpoint-down(xs) {
+
+  #maincontainer {
+    width: 100%;
+  }
+
+  .navbar .nav>li {
+    display: block;
+  }
+
+  .navbar .navbar-form {
+    padding-left: 0;
+    padding-right: 0;
+
+    #navbar-search {
+      width: 100%;
+    }
+  }
+
+  .navbar-brand {
+    margin-bottom: 1em;
+
+    .site-name {
+      font-size: auto;
+      text-align: justify;
+    }
+
+    .site-name:after {
+      content: '';
+      display: inline-block;
+      width: 100%;
+    }
+
+  }
+
+  h1 {
+    font-size: 200%;
+  }
+
+  h2 {
+    font-size: 130%;
+  }
+
+  h3 {
+    font-size: 120%;
+  }
+
+  .card-title {
+    margin-bottom: 0;
+  }
+
+  .sidebar {
+    border-left: 0;
+    margin-left: 0;
+    padding-left: 0;
+  }
+
+  .map {
+    height: 300px;
+  }
+
+
+  section .btn {
+    width: 100%;
+  }
+
+  .index-cards {
+    .card {
+      margin: .2em;
+      width: 48%;
+
+      // Shrink title to fit more on page
+      .card-title {
+        font-size: 1em;
+      }
+
+      // Restrict height of image when on smaller screens
+      .img-card {
+        height: 100px;
+        object-fit: cover;
+        width: 100%;
+      }
+
+    }
+  }
+}

app/assets/stylesheets/overrides.scss

@@ -8,20 +8,44 @@ body {
   font-family: $default-font;
 }
 
-.navbar-brand .site-name {
-  font-family: 'Modak', cursive;
-  font-size: 3em;
-  margin-top: 0.2em;
+.navbar-brand {
+  .site-name {
+    font-family: 'Modak', cursive;
+    font-size: 3em;
+    margin: .3em;
+  }
+
+  img {
+    height: 60px;
+  }
+}
+
+#navbar-search {
+  padding-left: 1em;
+
+  .input-group {
+    input {
+      background-color: $white;
+      color: $black;
+    }
+
+    input::placeholder {
+      color: $navbar-default-link-color;
+    }
+  }
+}
+
+.navbar .btn-signup,
+.navbar .btn-signin {
+  background-color: $green;
+  color: $white;
+  margin: 3px;
 }
 
 .homepage-blurb .site-name {
   font-size: 5em;
 }
 
-.navbar-nav .btn {
-  background-color: $green;
-  color: $white;
-}
 
 .ellipsis {
   overflow: hidden;
@@ -58,22 +82,11 @@ h3 {
   font-size: 120%;
 }
 
-#navbar-search {
-  .input-group {
-    input {
-      background-color: $white;
-      color: $black;
-    }
-
-    input::placeholder {
-      color: $navbar-default-link-color;
-    }
-  }
-}
 
 section {
   margin: .5em 0 0;
   padding: 0 0 1em;
+
   h2 {
     background-color: $green;
     box-shadow: 1px 1px 1px 1px darken($beige, 20%);
@@ -112,8 +125,10 @@ section {
       border-top-right-radius: 5%;
     }
   }
+
   .card-finished {
     background: darken($beige, 10%);
+
     a {
       color: $brown;
     }
@@ -168,6 +183,7 @@ section {
 
   .thumbnail {
     height: 100px;
+
     img {
       border-radius: 5px;
       height: 75px;
@@ -211,6 +227,7 @@ ul.associations {
 
 // footer
 footer {
+
   #footer1,
   #footer2,
   #footer3 {
@@ -244,7 +261,9 @@ footer {
 #maincontainer {
   max-width: 2500px;
   min-height: 80%;
-  padding: 1em;
+  padding-bottom: 1em;
+  padding-left: 1em;
+  padding-right: 1em;
 }
 
 // Autosuggest
@@ -282,7 +301,7 @@ $state-success-bg: lighten($green, 50%);
 
 label.required:after {
   color: red;
-  content:" *";
+  content: " *";
 }
 
 .truncate {
@@ -396,91 +415,3 @@ ul.thumbnail-buttons {
 .progress-fade:hover::before {
   background: none;
 }
-
-// Overrides applying only to mobile view. This must be at the end of the overrides file.
-// Extra small devices (portrait phones, less than 576px)
-@include media-breakpoint-down(xs) {
-  #maincontainer {
-    width: 100%;
-    padding: 10px;
-  }
-
-  h1 {
-    font-size: 200%;
-  }
-
-  h2 {
-    font-size: 130%;
-  }
-
-  h3 {
-    font-size: 120%;
-  }
-
-  .card-title {
-    margin-bottom: 0;
-  }
-
-  .sidebar {
-    margin-left: 0;
-    border-left: none;
-    padding-left: 0;
-  }
-
-  .map {
-    height: 300px;
-  }
-
-  .navbar .nav > li {
-    display: block;
-  }
-
-  .navbar .navbar-form {
-    padding-left: 0;
-    padding-right: 0;
-
-    .navbar-search {
-      width: auto;
-    }
-  }
-
-  .nav .btn {
-    background-color: $green;
-    width: 100%;
-  }
-
-  .navbar-brand .site-name {
-    font-size: 1.4em;
-    text-align: justify;
-  }
-
-  .navbar-brand .site-name:after {
-    content: "";
-    display: inline-block;
-    width: 100%;
-  }
-
-  section .btn {
-    width: 100%;
-  }
-
-  .index-cards {
-    .card {
-      margin: .2em;
-      width: 48%;
-
-      // Shrink title to fit more on page
-      .card-title {
-        font-size: 1em;
-      }
-
-      // Restrict height of image when on smaller screens
-      .img-card {
-        height: 100px;
-        object-fit: cover;
-        width: 100%;
-      }
-
-    }
-  }
-}

app/views/layouts/_header.html.haml

@@ -1,12 +1,10 @@
 %nav.navbar.navbar-expand-lg.navbar-dark.bg-dark.justify-content-between
   .nav
     %a.navbar-brand{ href: root_path }
-      = image_tag("pear.png", size: "100x100", alt: 'Growstuff brand logo (drawing of a pear)')
+      = image_tag("pear.png", class: 'logo', alt: 'Growstuff brand logo (drawing of a pear)')
       %span.site-name Growstuff
   .nav
-    %button.navbar-toggler{"aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-target" => "#navbarSupportedContent", "data-toggle" => "collapse", type: "button"}
+    %button.navbar-toggler{ "aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-target" => "#navbarSupportedContent", "data-toggle" => "collapse", type: "button" }
       %i.fas.fa-ellipsis-v.navbar-toggler-icon
-
     = render 'layouts/menu'
-
   = render 'crops/search_bar'

app/views/layouts/_menu.haml

@@ -1,10 +1,12 @@
 #navbarSupportedContent.collapse.navbar-collapse
   %ul.navbar-nav.mr-auto
     - if signed_in?
-      = link_to timeline_index_path, method: :get, class: 'nav-link text-white' do
-        = image_tag 'icons/notification.svg', class: 'img img-icon'
-      = link_to member_gardens_path(member_slug: current_member.slug), class: 'nav-link text-white' do
-        = image_icon 'gardens'
+      %li.nav-item
+        = link_to timeline_index_path, method: :get, class: 'nav-link text-white' do
+          = image_tag 'icons/notification.svg', class: 'img img-icon'
+      %li.nav-item
+        = link_to member_gardens_path(member_slug: current_member.slug), class: 'nav-link text-white' do
+          = image_icon 'gardens'
       %li.nav-item.dropdown
         %a.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", href: "#", role: "button"}
           = image_tag "icons/gardener.svg", class: 'img img-icon'
@@ -87,5 +89,5 @@
               - if current_member.role?(:admin)
                 = link_to t('.admin'), admin_path, class: 'dropdown-item'
     - else
-      %li.nav-item= link_to t('.sign_in'), new_member_session_path, id: 'navbar-signin', class: 'btn'
-      %li.nav-item= link_to t('.sign_up'), new_member_registration_path, id: 'navbar-signup', class: 'btn'
+      %li.nav-item= link_to t('.sign_in'), new_member_session_path, id: 'navbar-signin', class: 'btn btn-signin'
+      %li.nav-item= link_to t('.sign_up'), new_member_registration_path, id: 'navbar-signup', class: 'btn btn-signup'

app/views/layouts/application.html.haml

@@ -8,12 +8,13 @@
     = render "layouts/header"
     -# anchor tag for accessibility link to skip the navigation menu
     %a{ name: 'skipnav' }
-    #maincontainer.container-fluid
+
+    #maincontainer
       .row
         .col-md-8.col-12
           - if content_for?(:breadcrumbs)
             %nav
-              %ol.breadcrumb{"aria-label" => "breadcrumb"}
+              %ol.breadcrumb{ "aria-label" => "breadcrumb" }
                 %li.breadcrumb-item= link_to 'Home', root_path
                 = yield(:breadcrumbs)
       - if content_for?(:buttonbar)