Fix search, reinstate /css/bootstrap/custom.less as /css/bootstrap/_custom.scss

diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
new file mode 100644 (file)
index 0000000..8fb1728
--- /dev/null
+++ b/css/bootstrap/_custom.scss
@@ -0,0 +1,85 @@
+// Nick
+
+$footer-link-color: darken(theme-color("success"), 10%);
+$footer-link-hover-color: darken($footer-link-color, 10%);
+
+// use these for heading-sized text when you don't want extra spacing
+//.text-h1 {
+//  font-size: $font-size-h1;
+//}
+//
+//.text-h2 {
+//  font-size: $font-size-h2;
+//}
+//
+//.text-h3 {
+//  font-size: $font-size-h3;
+//}
+//
+//.text-h4 {
+//  font-size: $font-size-h4;
+//}
+//
+//.text-h5 {
+//  font-size: $font-size-h5;
+//}
+//
+//.text-h6 {
+//  font-size: $font-size-h6;
+//}
+
+// apply this to svg, see _svg/icon_search.svg
+.svg-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+  position: relative;
+  //bottom: -.125em;
+}
+
+// use this to display the pi symbol without horrible blocky look in Sans
+.text-serif {
+  font-family: $font-family-serif;
+}
+
+// apply this to table to get an icon with vertically centred text next to it
+.icon-and-text {
+  vertical-align: middle;
+  td {
+    padding: .25em .5em;
+  }
+}
+
+.search-results li {
+  margin-bottom: .5em;
+}
+
+// see https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3
+.vcenter {
+  display: inline-block;
+  vertical-align: center;
+  float: none;
+}
+.vbottom {
+  display: inline-block;
+  vertical-align: bottom;
+  float: none;
+}
+
+.footer {
+  padding-top: 35px;
+  padding-bottom: 25px;
+  background-color: $gray-400;
+  a {
+    color: $footer-link-color;
+
+    &:hover,
+    &:focus {
+      color: $footer-link-hover-color;
+      //background-color: $footer-link-hover-bg;
+    }
+  }
+}

diff --git a/css/bootstrap/_variables.scss b/css/bootstrap/_variables.scss
index dc1fd92..a337f45 100644 (file)
--- a/css/bootstrap/_variables.scss
+++ b/css/bootstrap/_variables.scss
@@ -275,6 +275,7 @@ $embed-responsive-aspect-ratios: join(
 
 // stylelint-disable value-keyword-case
 $font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-serif:           Georgia, "Times New Roman", Times, serif !default; // Nick
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:            $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case

diff --git a/css/bootstrap/bootstrap.css.scss b/css/bootstrap/bootstrap.css.scss
index 60bb836..38c6016 100644 (file)
--- a/css/bootstrap/bootstrap.css.scss
+++ b/css/bootstrap/bootstrap.css.scss
@@ -42,3 +42,4 @@
 @import "spinners";
 @import "utilities";
 @import "print";
+@import "custom"; // Nick

diff --git a/navbar.jst b/navbar.jst
index 012bb1f..99d54bf 100644 (file)
--- a/navbar.jst
+++ b/navbar.jst
@@ -85,10 +85,13 @@ return async (env, head, body, scripts) => {
               //  }
               //}
               form.form-inline.'my-2'.my-lg-0(action="/search/index.html") {
-                input.form-control.mr-sm-2(name="query" type="text" placeholder="Search" aria-label="Search") {}
-                ' '
-                button.btn.btn-outline-success.'my-2'.my-sm-0(type="submit") {
-                  'Search'
+                div.input-group.mb-3 {
+                  input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
+                  div.input-group-append {
+                    button.btn.btn-outline-secondary#search-button(type="submit") {
+                      _out.push(icon_search_mono)
+                    }
+                  }
                 }
               }
             }
@@ -183,7 +186,7 @@ return async (env, head, body, scripts) => {
           await body(_out)
         }
       }
-      div.footer.bg-gray-400(style="padding-left: calc(100vw - 100%); padding-top: 30px; padding-bottom: 30px;") {
+      div.footer(style="padding-left: calc(100vw - 100%);") {
         div.container {
           a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
             img(alt="Creative Commons License" style="border-width:0" src="/images/by-sa_3.0_88x31.png") {}