Creating search bar

data/panaetius-theme/assets.json

@@ -9,7 +9,7 @@
     "js": "2.lazyload.1168fc21175de558d316.min.js"
   },
   "main": {
-    "css": "main.7ec8eedcf4dbffc5a912.min.css",
+    "css": "main.793c393487568a4fd1c3.min.css",
     "js": "main.de04e43a25a1ed226095.min.js"
   },
   "vendors~app": {

layouts/_default/list.html

@@ -3,7 +3,7 @@
     {{- if or .Title .Content -}}
     <div class="row py-3">
         <div class="col">
-            {{ with .Title }}<h3 class="display-4">{{ . }}</h3>{{ end }}
+            {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
             {{- with .Content -}}
             <div class="content">
                 {{ . }}

layouts/partials/header.html

@@ -3,7 +3,6 @@
     <div class="container">
 
         <a class="navbar-brand" href="{{ .Site.BaseURL }}"><img src="/images/DUCK_256.png" width="30" height="30" class="mr-3 rotate-a-20" />{{ .Site.Title }}</a>
-        <!-- <a class="navbar-brand font-weight-bold" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> -->
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -14,12 +13,20 @@
                 {{- end -}}
                 {{ with .Site.Menus.main }}
                 {{ range . }}
-                    <li class="nav-item{{ if $current.IsMenuCurrent "main" . }} active{{ end }}"><a class="nav-link" href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
+                <li class="nav-item{{ if or (eq $current.URL .URL) ($current.HasMenuCurrent "main" .) }} active{{ end }}"><a class="nav-link" href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
                 {{ end }}
                 {{ end }}
-            <li class="nav-item">
-
-                <i class="fas fa-search" data-fa-transform="down-5"></i>
+                <li class="nav-item" id="nav-search">
+                    <form id="search-form" method="get" action="/search" method="POST" class="form-inline">
+                        <input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
+                        <div class="input-group">
+                            <div class="input-group-append">
+                                <!-- <div> -->
+                                <button type="submit" id="search-button" class="btn btn-primary"> <i class="fa fa-search fa-sm"></i></button>
+                                <!-- <button type="submit" id="search-button" class="btn btn-primary form-control form-control-sm"> <i class="fa fa-search"></i></button> -->
+                            </div>
+                    </form>
+                    <!-- <i class="fas fa-search" data-fa-transform="down-5"></i> -->
                 </li>
             </ul>
         </div>

layouts/search/single.html

@@ -1,21 +1,24 @@
 {{ define "main" }}
+{{ .Scratch.Set "IsSingle" true }}
 <main class="content-page container pt-7 pb-5">
     <div class="container">
         <div class="row">
             <div class="col">
-                {{ .Content }}
+                <h1>Search</h1>
             </div>
         </div>
         <div class="row">
             <div class="col">
-              <form id="search-form" method="get" action="/search" method="POST" class="form-inline">
-                <input type="text" name="q" id="search" class="form-control" placeholder="Search" style="width: 20%;">
+                <div class="d-flex justify-content-center">
+                    <form id="search-form" method="get" action="/search" method="POST" class="form-inline form-single">
+                        <input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
                         <div class="input-group">
                             <div class="input-group-append">
-                <button type="submit" id="search-button" class="btn btn-secondary"><i class="fa fa-search"></i></button>
+                                <button type="submit" id="search-button" class="btn btn-primary" style="margin-left: -5px;"> <span class="fa fa-search form-control-feedback"></span></button>
                             </div>
                     </form>
                 </div>
+            </div>
             <!-- <div class="search-input-wrap">
                     <form id="search-form" method="get" action="">
                         <input id="search" name="q" type="text" />
@@ -43,9 +46,7 @@
     </div>
     <script src="{{ print "dist/" "lunr.b93de9e9609074d666f5123e866e25ed.min.js" | relURL }}"></script>
     <script>
-const posts = JSON.parse(
-    {{ $p | jsonify }}
-  );
+        const posts = JSON.parse({{$p | jsonify}});
         const query = new URLSearchParams(window.location.search);
         console.log(query)
         const searchString = query.get('q');
@@ -67,7 +68,9 @@ const posts = JSON.parse(
             matches.forEach((m) => {
                 matchPosts.push(postsByTitle[m.ref]);
             });
-    matchPosts[0].tags.forEach(p => {console.log(p)})
+            matchPosts[0].tags.forEach(p => {
+                console.log(p)
+            })
             console.log(matchPosts[0].tags)
             try {
                 $target.innerHTML = matchPosts.map(p => {

layouts/tags/terms.html

@@ -3,7 +3,7 @@
     {{- if or .Title .Content -}}
     <div class="row py-3">
         <div class="col">
-            {{ with .Title }}<h3 class="display-4">{{ . }}</h3>{{ end }}
+            {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
             {{- with .Content -}}
             <div class="content">
                 {{ . }}

src/scss/_variables.scss

@@ -11,59 +11,63 @@ $gray-700: #264d61;
 $gray-800: #0c344b;
 $gray-900: #082333;
 
+$font-grey: #343a40;
+
+$primary: #a02f2f;
+$secondary: #1B1725;
+
 $text-muted: $gray-400;
-$body-color: $gray-800;
+$body-color: $font-grey;
 $light: $white;
 $dark: $gray-900;
-$headings-color: $gray-900;
-// $headings-font-family: 'Open Sans', sans-serif;
-$headings-font-family: "Rotunda", sans-serif;
+$headings-color: $font-grey;
+$headings-font-family: "Rotunda",
+sans-serif;
 $headings-font-weight: 500;
 
-// $font-family-sans-serif: 'Roboto', sans-serif;
-$font-family-sans-serif: "Rotunda", sans-serif;
-$font-family-monospace: "Realtime", monospace;
-$font-family-serif: "Roboto Slab", serif;
+// $nav-link-disabled-color: $font-grey;
+// $nav-tabs-link-active-color: $font-grey;
+$navbar-light-color: $font-grey;
+$navbar-light-hover-color: $primary;
+$navbar-light-active-color: $primary;
+
+$font-family-sans-serif: "Rotunda",
+sans-serif;
+$font-family-monospace: "Realtime",
+monospace;
+$font-family-serif: "Roboto Slab",
+serif;
 
 $font-weight-normal: 400;
 $font-weight-base: 400;
 
 $code-font-size: 100%;
 
-$link-color: $gray-800;
-$link-decoration: underline;
+$link-color: $primary;
+$link-decoration: none;
 
 $font-size-base: 1.125rem;
 
 $headings-margin-bottom: 1.25rem;
 $paragraph-margin-bottom: 1.5rem;
 $spacer: 1.125rem;
-$spacers: (
-  0: 0,
-  1: (
-    $spacer * 0.25,
+$spacers: (0: 0,
+    1: ($spacer * 0.25,
     ),
-  2: (
-    $spacer * 0.5,
+    2: ($spacer * 0.5,
     ),
     3: $spacer,
-  4: (
-    $spacer * 1.5,
+    4: ($spacer * 1.5,
     ),
-  5: (
-    $spacer * 3,
+    5: ($spacer * 3,
     ),
-  6: (
-    $spacer * 5,
+    6: ($spacer * 5,
     ),
-  7: (
-    $spacer * 6,
+    7: ($spacer * 6,
     ),
-  8: (
-    $spacer * 7,
+    8: ($spacer * 7,
     ),
-  9: (
-    $spacer * 8,
+    9: ($spacer * 8,
     ),
 );
 
@@ -80,4 +84,3 @@ $navbar-padding-y: 0.4rem;
 // Overrides
 
 $body-bg: #f9f9f9;
-

src/scss/panaetius-theme.scss

@@ -101,3 +101,7 @@ img.front-background {
     object-fit: cover;
     position: fixed;
 }
+
+a.navbar-brand {
+    color: $font-grey !important;
+}

src/scss/search-bar.scss

@@ -0,0 +1,22 @@
+// li#nav-search {
+form#search-form {
+    margin-top: 2px;
+
+    & input {
+        width: 80%;
+        padding-top: 10px;
+    }
+
+    & button {
+        margin-left: -5px;
+        height: calc(1.5em + .5rem - 1px);
+
+        & .fa-search {
+            margin-bottom: 2px !important;
+        }
+    }
+}
+
+form.form-single {
+    width: 80% !important;
+}

src/scss/styles.scss

@@ -4,4 +4,6 @@
 @import "panaetius-theme";
 @import "sticky-footer";
 @import "search";
+@import "search-bar";
+@import "toc";
 @import "fonts";