Make BOcal's logo responsive (navbar)

mainsite/static/css/site-base.css

@@ -2,11 +2,6 @@ html, body, .full-height {
     height: 100%;
 }
 
-/* Move down content because we have a fixed navbar that is 125px tall */
-body {
-  padding-top: 125px;
-}
-
 /*
  * Global add-ons
  */
@@ -27,10 +22,52 @@ body {
   background-color: #eba367;
 }
 
+.navbar-brand {
+    padding: 20px;
+}
+
+@media (max-width: 225px) {
+    body {
+        padding-top: 50px;
+    }
+    .navbar-brand {
+        height: 50px;
+    }
+}
+@media (max-width: 355px) {
+    body {
+        padding-top: 75px;
+    }
+    .navbar-brand {
+        height: 75px;
+    }
+}
+@media (max-width: 475px) {
+    body {
+        padding-top: 93px;
+    }
+    .navbar-brand {
+        height: 93px;
+    }
+}
+@media (min-width: 475px) {
+    body {
+        padding-top: 125px;
+    }
+    .navbar-brand {
+        height: 125px;
+    }
+}
+/*
+body {
+  padding-top: 125px;
+}
+
 .navbar-brand {
     height: 125px;
     padding: 20px;
 }
+*/
 
 .navbar >li >a {
     padding-top: 30px;
@@ -100,11 +137,11 @@ body {
 .main {
   padding: 40px;
   background-color: white;
-  border-top-left-radius: 50px;
 }
 
 @media (min-width: 768px) {
   .main {
+    border-top-left-radius: 50px;
     padding-left: 60px;
     padding-right: 40px;
   }

mainsite/templates/navbar.html

@@ -8,7 +8,16 @@
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="/">
-        <img src="/static/img/logo.png" alt="Le BOcal" />
+        <img src="/static/img/logo.png"
+             srcset="/static/img/logo.100w.png 100w,
+                     /static/img/logo.175w.png 175w,
+                     /static/img/logo.250w.png 250w,
+                     /static/img/logo.369w.png 369w"
+             sizes="(max-width: 225px) 100px,
+                    (max-width: 355px) 175px,
+                    (max-width: 475px) 250px,
+                    370px"
+             alt="Le BOcal" />
       </a>
     </div>
     <!--