random-mirrors/based.cooking
1
0
Fork 0
mirror of https://github.com/LukeSmithxyz/based.cooking.git synced 2025-03-13 05:15:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge f627fee9170f29261d9fbb8900e8ee32b735ac4e into 2d8642ec41ccc6162ec3123c15024dd3d22cc33b

Browse Source
This commit is contained in:
Maxime 2023-02-20 22:03:54 +00:00 committed by GitHub
commit 1581c394dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
content/_index.md
View File

@ -6,10 +6,15 @@ layout: single
## What do you want to cook? ## What do you want to cook?
<div class="search js-only"> <div class="search-container js-only">
<input type="text" id="search" placeholder="Search ALL Recipes..."> <div class="search">
<button id="clear-search"> <input type="text" id="search" placeholder="Search ALL Recipes...">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Backspace</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg> <button id="clear-search">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Backspace</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
</button>
</div>
<button id="random">
Random
</button> </button>
</div> </div>
@ -26,6 +31,13 @@ document.addEventListener("DOMContentLoaded", () => {
const oldheading = document.getElementById("newest-recipes"); const oldheading = document.getElementById("newest-recipes");
const clearSearch = document.getElementById("clear-search"); const clearSearch = document.getElementById("clear-search");
const artlist = document.getElementById("artlist"); const artlist = document.getElementById("artlist");
const random = document.getElementById("random");
random.addEventListener("click", () => {
const recipe = recipes[Math.floor(Math.random() * recipes.length)];
const url = recipe.getElementsByTagName("a")[0].href
window.location.href = url;
})
search.addEventListener("input", () => { search.addEventListener("input", () => {
// grab search input value // grab search input value

23
static/style.css
View File

@ -146,12 +146,19 @@ input#search {
width: 100%; width: 100%;
} }
.search { .search-container {
width: 400px; width: 400px;
max-width: 85vw; max-width: 85vw;
position: relative; position: relative;
margin: 0.5rem auto 1.2rem; margin: 0.5rem auto 1.2rem;
display: flex; display: flex;
gap: .5rem;
}
.search {
position: relative;
display: flex;
flex-grow: 1;
} }
button#clear-search { button#clear-search {
@ -169,6 +176,20 @@ button#clear-search:hover {
color: #eee; color: #eee;
} }
button#random {
all: unset;
background: #222;
color: #888;
border-radius: 5px;
padding: .7rem 1rem;
height: 100%;
cursor: pointer;
transition: color 180ms ease-in-out;
}
button#random:hover {
color: #eee;
}
.matched-recipe { .matched-recipe {
font-size: x-large ; font-size: x-large ;