smaller distance at top body

assets/sass/main.sass

@@ -19,7 +19,7 @@ $fontBase: 'Oxygen', sans-serif
 
 body
     font-size: 14px
-    margin: 5% auto
+    margin: 20px auto
     width: 80%
     max-width: 1100px
     line-height: 1.4rem
@@ -212,7 +212,7 @@ header
 
 .v-distance
     > div
-        margin-bottom: 40px
+        margin-bottom: 30px
 
 input[type="search"]
     -webkit-appearance: none

layouts/partials/stuff-template.html

@@ -26,37 +26,17 @@
         </section>  
         <br>
 
-        <div>
-            <input type="search" oninput="setTimeout(function(){ liveSearch(); }, 500);" id="searchbox" placeholder="Search..">
-            <script>
-                function liveSearch() {
-
-                    let cards = document.getElementsByClassName('cards')
-                    let search_query = document.getElementById("searchbox").value;
-
-                    console.log(search_query)
-
-                    for (var i = 0; i < cards.length; i++) {
-                        if(cards[i].innerText.toLowerCase()
-                                .includes(search_query.toLowerCase())) {
-                            console.log('here..')
-                            cards[i].classList.remove("is-hidden");
-                        } else {
-                            console.log('there..')
-                            cards[i].classList.add("is-hidden");
-                        }
-                    }
-                }
-            </script>
-        </div> 
-
         <div class="on-mobile-only">
             <br>
         </div>
 
+        <div>
+            <input type="search" oninput="setTimeout(function(){ liveSearch(); }, 500);" id="searchbox" placeholder="Live search keyword..">
+        </div> 
+
         <div class="on-desktop-only">
           <br>
-          <p>or filter by tag</p> <br>
+          <p>Filter by tag</p> <br>
           <ul class="tags">
             <li><a href="/">All</a></li>
             {{ range where .Site.Taxonomies.tags "Section" "stuff" }}
@@ -90,6 +70,28 @@ <h1>Free Dev Tool/Services for developer 👇🏽</h1>
 
             </div>
         </main>
+
+
+            <script>
+                function liveSearch() {
+
+                    let cards = document.getElementsByClassName('cards')
+                    let search_query = document.getElementById("searchbox").value;
+
+                    console.log(search_query)
+
+                    for (var i = 0; i < cards.length; i++) {
+                        if(cards[i].innerText.toLowerCase()
+                                .includes(search_query.toLowerCase())) {
+                            console.log('here..')
+                            cards[i].classList.remove("is-hidden");
+                        } else {
+                            console.log('there..')
+                            cards[i].classList.add("is-hidden");
+                        }
+                    }
+                }
+            </script>
     </div>
 </div>
 

resources/_gen/assets/sass/sass/main.sass_48b060fe05b0a273d182ef83c0605941.content

@@ -1 +1 @@
-@import "https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap";*,*:before,*:after{-webkit-box-sizing:border-box!important;-moz-box-sizing:border-box!important;-ms-box-sizing:border-box!important;box-sizing:border-box!important}*{margin:0;padding:0}body{font-size:14px;margin:5% auto;width:80%;max-width:1100px;line-height:1.4rem;font-family:oxygen,sans-serif;color:#575757}body nav span{cursor:pointer}.darkmode{background:#393939;color:#e3e3e3}.darkmode a{color:#e3e3e3}.darkmode input[type=search]{color:#e3e3e3}.darkmode .title{color:#e3bb54}.darkmode .title a{color:#e3bb54}.darkmode .cards{background:#403e40}.darkmode .tags a{color:#e3e3e3}.is-hidden{display:none}.cards.sponsor{padding:0!important}.cards.sponsor .title{font-size:1.1rem;margin-bottom:5px}.cards.sponsor a{padding:15px;transition:padding ease-in .5s}.cards.sponsor a:hover{padding:20px 15px}.marginless{margin:0}.center{text-align:center}h1,h2{margin-bottom:20px;line-height:40px}h3{margin-bottom:10px}a{color:#303030;text-decoration:none}a:hover{cursor:pointer}.link{border-bottom:#65616c 2px solid}ul{padding-left:0}pre{padding:10px;font-size:1rem;overflow:auto}header{margin-bottom:20px;font-size:1.2rem}#branding a{font-size:1.5rem}#theme{font-size:1.5rem}#theme:hover{cursor:pointer}.is-avatar{border-radius:50%}#blog .title{font-size:2rem;line-height:2.2rem;margin-bottom:0}#blog .title a{display:block;width:100%}#blog .desc{margin:5px 0}#blog article{margin-top:20px}#blog article p{font-size:1.2rem;margin-bottom:15px;line-height:1.8rem}#blog article li{font-size:1.2rem}#blog article pre{border-radius:10px;padding:5px 15px;margin-bottom:10px}#blog article a{text-decoration:underline}#blog h2,#blog h3{font-size:1.5rem;margin-top:30px}#blog img{display:block;margin-left:auto;margin-right:auto;width:75%}#date{display:inline-block;font-size:1rem}#filter-tag summary{margin-bottom:5px}.flex,.flex-on-mobile{display:flex}.flex.is-space-between,.flex-on-mobile.is-space-between{justify-content:space-between}.flex.is-space-around,.flex-on-mobile.is-space-around{justify-content:space-around}.flex.is-align-items,.flex-on-mobile.is-align-items{align-items:center}.flex.is-flex-end,.flex-on-mobile.is-flex-end{justify-content:flex-end}.flex .is-half,.flex-on-mobile .is-half{width:50%}.flex .is-one-fifth,.flex-on-mobile .is-one-fifth{width:20%}.flex .is-four-fifth,.flex-on-mobile .is-four-fifth{width:80%}.flex .is-two-third,.flex-on-mobile .is-two-third{width:66.66666667%}.flex .is-one-third,.flex-on-mobile .is-one-third{width:33.33333333%}.flex-on-mobile{display:block}.pr-5{padding-right:5%}.cards{padding:20px 30px;box-shadow:0 4px 8px 0 rgba(0,0,0,.2);transition:.3s;border-radius:20px;position:relative;transition:padding .5s ease}.cards .title{font-size:1.5rem}.cards .subtitle{font-size:1.2rem;margin-bottom:5px}.cards .text-small{line-height:1rem}.cards summary{margin:10px 0}.cards img{margin-right:20px;max-width:80px;max-height:80px;min-width:80px}.cards:hover{padding:30px}.label{padding:2px 5px;display:inline-block;background:#e3bb54;color:#fff;border-radius:5px}.pin-right{position:absolute;right:25px;top:0}.v-distance>div{margin-bottom:40px}input[type=search]{-webkit-appearance:none;display:block;width:100%;padding:10px;border:1px solid grey;border-radius:10px;font-size:1rem;background:0 0}input[type=search]:focus{outline:none}.topics,.tags{font-size:.8rem;list-style:none;border-radius:5px}.topics li,.tags li{display:inline-block;margin:0 1px;margin-bottom:2px}.topics a,.tags a{padding:0 5px;display:inline-block;border-radius:3px;border:1px solid #838383;font-size:.8rem;color:#333}.topics a:hover,.tags a:hover{background:#333;color:#fff}#pagination{text-align:center}#pagination a{margin-top:25px;display:inline-block;text-align:center;padding:10px 20px}#pagination a:hover{background:#e3bb54}.offerlist{max-height:250px;overflow-y:auto;text-align:right;white-space:pre-line}footer{margin-top:20px}footer a{text-decoration:underline}.on-mobile-only{display:none}.topics .topics-api{background:#d72939;color:#fff}.topics .topics-atom{background:#1da977}.topics .topics-bash{background:#1c1c1c;color:#fff}.topics .topics-css{background:#53d4c8}.topics .topics-canvas{background:#69b0cb;color:#fff}.topics .topics-firebase{background:#ebbe37}.topics .topics-go{background:#59cdff}.topics .topics-html{background:#f56c3a;color:#fff}.topics .topics-hugo{background:#ff4088;color:#fff}.topics .topics-javascript{background:#d4d253}.topics .topics-jquery{background:#0766a9;color:#fff}.topics .topics-mac{background:#d9d9d9}.topics .topics-nodejs{background:#8ede8a}.topics .topics-php{background:#be32c1}.topics .topics-python{background:#3c70f6}.topics .topics-productivity{background:#4165c3;color:#fff}.topics .topics-react{background:#3598e8}.topics .topics-sharing{background:#f97099;color:#fff}.topics .topics-tool{background:#e0a634}.topics .topics-vue{background:#5cb36c}.topics .topics-kotlin{background:#da6b75;color:#fff}.topics .topics-laravel{background:#fe4f32;color:#fff}.topics .topics-sql{background:#0fc1c9}.topics .topics-database{background:#40b6b3}@media only screen and (min-width:1000px){.on-desktop-only{display:block}}@media only screen and (max-width:1000px){body{width:90%;font-size:16px}.columns{display:block}header{font-size:1rem}nav{text-align:right}nav a{display:block}h1{font-size:1.5rem}.tags li{margin:2px}.flex-on-mobile{display:flex}.flex{display:block}.flex .is-half,.flex .is-one-fifth,.flex .is-four-fifth,.flex .is-one-third,.flex .is-two-third{width:100%}.flex.flex-mobile{display:flex}.flex.flex-mobile .is-one-fifth,.flex.flex-mobile .is-four-fifth,.flex.flex-mobile .is-one-third,.flex.flex-mobile .is-two-third{width:auto}.cards{padding:20px 30px;width:100%;padding-bottom:30px}.cards img{max-width:50px;max-height:50px;min-width:50px}.cards.sponsor{font-size:.8rem}.cards.sponsor .title{margin-bottom:0}.on-mobile-only{display:block}.on-desktop-only{display:none}}
+@import "https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap";*,*:before,*:after{-webkit-box-sizing:border-box!important;-moz-box-sizing:border-box!important;-ms-box-sizing:border-box!important;box-sizing:border-box!important}*{margin:0;padding:0}body{font-size:14px;margin:20px auto;width:80%;max-width:1100px;line-height:1.4rem;font-family:oxygen,sans-serif;color:#575757}body nav span{cursor:pointer}.darkmode{background:#393939;color:#e3e3e3}.darkmode a{color:#e3e3e3}.darkmode input[type=search]{color:#e3e3e3}.darkmode .title{color:#e3bb54}.darkmode .title a{color:#e3bb54}.darkmode .cards{background:#403e40}.darkmode .tags a{color:#e3e3e3}.is-hidden{display:none}.cards.sponsor{padding:0!important}.cards.sponsor .title{font-size:1.1rem;margin-bottom:5px}.cards.sponsor a{padding:15px;transition:padding ease-in .5s}.cards.sponsor a:hover{padding:20px 15px}.marginless{margin:0}.center{text-align:center}h1,h2{margin-bottom:20px;line-height:40px}h3{margin-bottom:10px}a{color:#303030;text-decoration:none}a:hover{cursor:pointer}.link{border-bottom:#65616c 2px solid}ul{padding-left:0}pre{padding:10px;font-size:1rem;overflow:auto}header{margin-bottom:20px;font-size:1.2rem}#branding a{font-size:1.5rem}#theme{font-size:1.5rem}#theme:hover{cursor:pointer}.is-avatar{border-radius:50%}#blog .title{font-size:2rem;line-height:2.2rem;margin-bottom:0}#blog .title a{display:block;width:100%}#blog .desc{margin:5px 0}#blog article{margin-top:20px}#blog article p{font-size:1.2rem;margin-bottom:15px;line-height:1.8rem}#blog article li{font-size:1.2rem}#blog article pre{border-radius:10px;padding:5px 15px;margin-bottom:10px}#blog article a{text-decoration:underline}#blog h2,#blog h3{font-size:1.5rem;margin-top:30px}#blog img{display:block;margin-left:auto;margin-right:auto;width:75%}#date{display:inline-block;font-size:1rem}#filter-tag summary{margin-bottom:5px}.flex,.flex-on-mobile{display:flex}.flex.is-space-between,.flex-on-mobile.is-space-between{justify-content:space-between}.flex.is-space-around,.flex-on-mobile.is-space-around{justify-content:space-around}.flex.is-align-items,.flex-on-mobile.is-align-items{align-items:center}.flex.is-flex-end,.flex-on-mobile.is-flex-end{justify-content:flex-end}.flex .is-half,.flex-on-mobile .is-half{width:50%}.flex .is-one-fifth,.flex-on-mobile .is-one-fifth{width:20%}.flex .is-four-fifth,.flex-on-mobile .is-four-fifth{width:80%}.flex .is-two-third,.flex-on-mobile .is-two-third{width:66.66666667%}.flex .is-one-third,.flex-on-mobile .is-one-third{width:33.33333333%}.flex-on-mobile{display:block}.pr-5{padding-right:5%}.cards{padding:20px 30px;box-shadow:0 4px 8px 0 rgba(0,0,0,.2);transition:.3s;border-radius:20px;position:relative;transition:padding .5s ease}.cards .title{font-size:1.5rem}.cards .subtitle{font-size:1.2rem;margin-bottom:5px}.cards .text-small{line-height:1rem}.cards summary{margin:10px 0}.cards img{margin-right:20px;max-width:80px;max-height:80px;min-width:80px}.cards:hover{padding:30px}.label{padding:2px 5px;display:inline-block;background:#e3bb54;color:#fff;border-radius:5px}.pin-right{position:absolute;right:25px;top:0}.v-distance>div{margin-bottom:30px}input[type=search]{-webkit-appearance:none;display:block;width:100%;padding:10px;border:1px solid grey;border-radius:10px;font-size:1rem;background:0 0}input[type=search]:focus{outline:none}.topics,.tags{font-size:.8rem;list-style:none;border-radius:5px}.topics li,.tags li{display:inline-block;margin:0 1px;margin-bottom:2px}.topics a,.tags a{padding:0 5px;display:inline-block;border-radius:3px;border:1px solid #838383;font-size:.8rem;color:#333}.topics a:hover,.tags a:hover{background:#333;color:#fff}#pagination{text-align:center}#pagination a{margin-top:25px;display:inline-block;text-align:center;padding:10px 20px}#pagination a:hover{background:#e3bb54}.offerlist{max-height:250px;overflow-y:auto;text-align:right;white-space:pre-line}footer{margin-top:20px}footer a{text-decoration:underline}.on-mobile-only{display:none}.topics .topics-api{background:#d72939;color:#fff}.topics .topics-atom{background:#1da977}.topics .topics-bash{background:#1c1c1c;color:#fff}.topics .topics-css{background:#53d4c8}.topics .topics-canvas{background:#69b0cb;color:#fff}.topics .topics-firebase{background:#ebbe37}.topics .topics-go{background:#59cdff}.topics .topics-html{background:#f56c3a;color:#fff}.topics .topics-hugo{background:#ff4088;color:#fff}.topics .topics-javascript{background:#d4d253}.topics .topics-jquery{background:#0766a9;color:#fff}.topics .topics-mac{background:#d9d9d9}.topics .topics-nodejs{background:#8ede8a}.topics .topics-php{background:#be32c1}.topics .topics-python{background:#3c70f6}.topics .topics-productivity{background:#4165c3;color:#fff}.topics .topics-react{background:#3598e8}.topics .topics-sharing{background:#f97099;color:#fff}.topics .topics-tool{background:#e0a634}.topics .topics-vue{background:#5cb36c}.topics .topics-kotlin{background:#da6b75;color:#fff}.topics .topics-laravel{background:#fe4f32;color:#fff}.topics .topics-sql{background:#0fc1c9}.topics .topics-database{background:#40b6b3}@media only screen and (min-width:1000px){.on-desktop-only{display:block}}@media only screen and (max-width:1000px){body{width:90%;font-size:16px}.columns{display:block}header{font-size:1rem}nav{text-align:right}nav a{display:block}h1{font-size:1.5rem}.tags li{margin:2px}.flex-on-mobile{display:flex}.flex{display:block}.flex .is-half,.flex .is-one-fifth,.flex .is-four-fifth,.flex .is-one-third,.flex .is-two-third{width:100%}.flex.flex-mobile{display:flex}.flex.flex-mobile .is-one-fifth,.flex.flex-mobile .is-four-fifth,.flex.flex-mobile .is-one-third,.flex.flex-mobile .is-two-third{width:auto}.cards{padding:20px 30px;width:100%;padding-bottom:30px}.cards img{max-width:50px;max-height:50px;min-width:50px}.cards.sponsor{font-size:.8rem}.cards.sponsor .title{margin-bottom:0}.on-mobile-only{display:block}.on-desktop-only{display:none}}

resources/_gen/assets/sass/sass/main.sass_48b060fe05b0a273d182ef83c0605941.json

@@ -1 +1 @@
-{"Target":"sass/main.min.3e6fe4a85598b8a201684fa24540c1b6fd5c02e4b2676cd5187d57572a2a3655.css","MediaType":"text/css","Data":{"Integrity":"sha256-Pm/kqFWYuKIBaE+iRUDBtv1cAuSyZ2zVGH1XVyoqNlU="}}
+{"Target":"sass/main.min.f9863bfa3bcbecf9f2e7dc9dea0a8b0452fb5780e52bb05c51867bbb396c5815.css","MediaType":"text/css","Data":{"Integrity":"sha256-+YY7+jvL7Pny59yd6gqLBFL7V4DlK7BcUYZ7uzlsWBU="}}