mirror of
https://github.com/Nezumi-2711/practice-js.git
synced 2026-09-22 13:38:49 +00:00
Init project
This commit is contained in:
+10
@@ -0,0 +1,10 @@
|
|||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
dist
|
||||||
|
|
||||||
|
forkify-architecture-recipe-loading.png
|
||||||
|
forkify-flowchart-part-1.png
|
||||||
|
forkify-flowchart-part-2.png
|
||||||
|
forkify-flowchart-part-3.png
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"singleQuote": true,
|
||||||
|
"arrowParens": "avoid"
|
||||||
|
}
|
||||||
+334
@@ -0,0 +1,334 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link rel="shortcut icon" href="src/img/favicon.png" type="image/x-icon" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="src/sass/main.scss" />
|
||||||
|
<script type="module" src="src/js/controller.js"></script>
|
||||||
|
|
||||||
|
<title>forkify // Search over 1,000,000 recipes</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<img src="src/img/logo.png" alt="Logo" class="header__logo" />
|
||||||
|
<form class="search">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="search__field"
|
||||||
|
placeholder="Search over 1,000,000 recipes..."
|
||||||
|
/>
|
||||||
|
<button class="btn search__btn">
|
||||||
|
<svg class="search__icon">
|
||||||
|
<use href="src/img/icons.svg#icon-search"></use>
|
||||||
|
</svg>
|
||||||
|
<span>Search</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<ul class="nav__list">
|
||||||
|
<li class="nav__item">
|
||||||
|
<button class="nav__btn nav__btn--add-recipe">
|
||||||
|
<svg class="nav__icon">
|
||||||
|
<use href="src/img/icons.svg#icon-edit"></use>
|
||||||
|
</svg>
|
||||||
|
<span>Add recipe</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav__item">
|
||||||
|
<button class="nav__btn nav__btn--bookmarks">
|
||||||
|
<svg class="nav__icon">
|
||||||
|
<use href="src/img/icons.svg#icon-bookmark"></use>
|
||||||
|
</svg>
|
||||||
|
<span>Bookmarks</span>
|
||||||
|
</button>
|
||||||
|
<div class="bookmarks">
|
||||||
|
<ul class="bookmarks__list">
|
||||||
|
<div class="message">
|
||||||
|
<div>
|
||||||
|
<svg>
|
||||||
|
<use href="src/img/icons.svg#icon-smile"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
No bookmarks yet. Find a nice recipe and bookmark it :)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <li class="preview">
|
||||||
|
<a class="preview__link" href="#23456">
|
||||||
|
<figure class="preview__fig">
|
||||||
|
<img src="src/img/test-1.jpg" alt="Test" />
|
||||||
|
</figure>
|
||||||
|
<div class="preview__data">
|
||||||
|
<h4 class="preview__name">
|
||||||
|
Pasta with Tomato Cream ...
|
||||||
|
</h4>
|
||||||
|
<p class="preview__publisher">The Pioneer Woman</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li> -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="search-results">
|
||||||
|
<ul class="results">
|
||||||
|
<a href="#5ed6604591c37cdc054bcd09">Receipt 1</a>
|
||||||
|
<a href="#5ed6604591c37cdc054bca5d">Receipt 2</a>
|
||||||
|
<!--
|
||||||
|
<li class="preview">
|
||||||
|
<a class="preview__link preview__link--active" href="#23456">
|
||||||
|
<figure class="preview__fig">
|
||||||
|
<img src="src/img/test-1.jpg" alt="Test" />
|
||||||
|
</figure>
|
||||||
|
<div class="preview__data">
|
||||||
|
<h4 class="preview__title">Pasta with Tomato Cream ...</h4>
|
||||||
|
<p class="preview__publisher">The Pioneer Woman</p>
|
||||||
|
<div class="preview__user-generated">
|
||||||
|
<svg>
|
||||||
|
<use href="src/img/icons.svg#icon-user"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="pagination">
|
||||||
|
<!-- <button class="btn--inline pagination__btn--prev">
|
||||||
|
<svg class="search__icon">
|
||||||
|
<use href="src/img/icons.svg#icon-arrow-left"></use>
|
||||||
|
</svg>
|
||||||
|
<span>Page 1</span>
|
||||||
|
</button>
|
||||||
|
<button class="btn--inline pagination__btn--next">
|
||||||
|
<span>Page 3</span>
|
||||||
|
<svg class="search__icon">
|
||||||
|
<use href="src/img/icons.svg#icon-arrow-right"></use>
|
||||||
|
</svg>
|
||||||
|
</button> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="copyright">
|
||||||
|
© Copyright by
|
||||||
|
<a
|
||||||
|
class="twitter-link"
|
||||||
|
target="_blank"
|
||||||
|
href="https://twitter.com/jonasschmedtman"
|
||||||
|
>Jonas Schmedtmann</a
|
||||||
|
>. Use for learning or your portfolio. Don't use to teach. Don't claim
|
||||||
|
as your own.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recipe">
|
||||||
|
<div class="message">
|
||||||
|
<div>
|
||||||
|
<svg>
|
||||||
|
<use href="src/img/icons.svg#icon-smile"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p>Start by searching for a recipe or an ingredient. Have fun!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="spinner">
|
||||||
|
<svg>
|
||||||
|
<use href="src/img/icons.svg#icon-loader"></use>
|
||||||
|
</svg>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- <div class="error">
|
||||||
|
<div>
|
||||||
|
<svg>
|
||||||
|
<use href="src/img/icons.svg#icon-alert-triangle"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p>No recipes found for your query. Please try again!</p>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<figure class="recipe__fig">
|
||||||
|
<img src="src/img/test-1.jpg" alt="Tomato" class="recipe__img" />
|
||||||
|
<h1 class="recipe__title">
|
||||||
|
<span>Pasta with tomato cream sauce</span>
|
||||||
|
</h1>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<div class="recipe__details">
|
||||||
|
<div class="recipe__info">
|
||||||
|
<svg class="recipe__info-icon">
|
||||||
|
<use href="src/img/icons.svg#icon-clock"></use>
|
||||||
|
</svg>
|
||||||
|
<span class="recipe__info-data recipe__info-data--minutes">45</span>
|
||||||
|
<span class="recipe__info-text">minutes</span>
|
||||||
|
</div>
|
||||||
|
<div class="recipe__info">
|
||||||
|
<svg class="recipe__info-icon">
|
||||||
|
<use href="src/img/icons.svg#icon-users"></use>
|
||||||
|
</svg>
|
||||||
|
<span class="recipe__info-data recipe__info-data--people">4</span>
|
||||||
|
<span class="recipe__info-text">servings</span>
|
||||||
|
|
||||||
|
<div class="recipe__info-buttons">
|
||||||
|
<button class="btn--tiny btn--increase-servings">
|
||||||
|
<svg>
|
||||||
|
<use href="src/img/icons.svg#icon-minus-circle"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="btn--tiny btn--increase-servings">
|
||||||
|
<svg>
|
||||||
|
<use href="src/img/icons.svg#icon-plus-circle"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recipe__user-generated">
|
||||||
|
<svg>
|
||||||
|
<use href="src/img/icons.svg#icon-user"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<button class="btn--round">
|
||||||
|
<svg class="">
|
||||||
|
<use href="src/img/icons.svg#icon-bookmark-fill"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recipe__ingredients">
|
||||||
|
<h2 class="heading--2">Recipe ingredients</h2>
|
||||||
|
<ul class="recipe__ingredient-list">
|
||||||
|
<li class="recipe__ingredient">
|
||||||
|
<svg class="recipe__icon">
|
||||||
|
<use href="src/img/icons.svg#icon-check"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="recipe__quantity">1000</div>
|
||||||
|
<div class="recipe__description">
|
||||||
|
<span class="recipe__unit">g</span>
|
||||||
|
pasta
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="recipe__ingredient">
|
||||||
|
<svg class="recipe__icon">
|
||||||
|
<use href="src/img/icons.svg#icon-check"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="recipe__quantity">0.5</div>
|
||||||
|
<div class="recipe__description">
|
||||||
|
<span class="recipe__unit">cup</span>
|
||||||
|
ricotta cheese
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recipe__directions">
|
||||||
|
<h2 class="heading--2">How to cook it</h2>
|
||||||
|
<p class="recipe__directions-text">
|
||||||
|
This recipe was carefully designed and tested by
|
||||||
|
<span class="recipe__publisher">The Pioneer Woman</span>. Please check out
|
||||||
|
directions at their website.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
class="btn--small recipe__btn"
|
||||||
|
href="http://thepioneerwoman.com/cooking/pasta-with-tomato-cream-sauce/"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<span>Directions</span>
|
||||||
|
<svg class="search__icon">
|
||||||
|
<use href="src/img/icons.svg#icon-arrow-right"></use>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay hidden"></div>
|
||||||
|
<div class="add-recipe-window hidden">
|
||||||
|
<button class="btn--close-modal">×</button>
|
||||||
|
<form class="upload">
|
||||||
|
<div class="upload__column">
|
||||||
|
<h3 class="upload__heading">Recipe data</h3>
|
||||||
|
<label>Title</label>
|
||||||
|
<input value="TEST" required name="title" type="text" />
|
||||||
|
<label>URL</label>
|
||||||
|
<input value="TEST" required name="sourceUrl" type="text" />
|
||||||
|
<label>Image URL</label>
|
||||||
|
<input value="TEST" required name="image" type="text" />
|
||||||
|
<label>Publisher</label>
|
||||||
|
<input value="TEST" required name="publisher" type="text" />
|
||||||
|
<label>Prep time</label>
|
||||||
|
<input value="23" required name="cookingTime" type="number" />
|
||||||
|
<label>Servings</label>
|
||||||
|
<input value="23" required name="servings" type="number" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="upload__column">
|
||||||
|
<h3 class="upload__heading">Ingredients</h3>
|
||||||
|
<label>Ingredient 1</label>
|
||||||
|
<input
|
||||||
|
value="0.5,kg,Rice"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
name="ingredient-1"
|
||||||
|
placeholder="Format: 'Quantity,Unit,Description'"
|
||||||
|
/>
|
||||||
|
<label>Ingredient 2</label>
|
||||||
|
<input
|
||||||
|
value="1,,Avocado"
|
||||||
|
type="text"
|
||||||
|
name="ingredient-2"
|
||||||
|
placeholder="Format: 'Quantity,Unit,Description'"
|
||||||
|
/>
|
||||||
|
<label>Ingredient 3</label>
|
||||||
|
<input
|
||||||
|
value=",,salt"
|
||||||
|
type="text"
|
||||||
|
name="ingredient-3"
|
||||||
|
placeholder="Format: 'Quantity,Unit,Description'"
|
||||||
|
/>
|
||||||
|
<label>Ingredient 4</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="ingredient-4"
|
||||||
|
placeholder="Format: 'Quantity,Unit,Description'"
|
||||||
|
/>
|
||||||
|
<label>Ingredient 5</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="ingredient-5"
|
||||||
|
placeholder="Format: 'Quantity,Unit,Description'"
|
||||||
|
/>
|
||||||
|
<label>Ingredient 6</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="ingredient-6"
|
||||||
|
placeholder="Format: 'Quantity,Unit,Description'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn upload__btn">
|
||||||
|
<svg>
|
||||||
|
<use href="src/img/icons.svg#icon-upload-cloud"></use>
|
||||||
|
</svg>
|
||||||
|
<span>Upload</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+3614
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "practice-project",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Forkify aplication",
|
||||||
|
"scripts": {
|
||||||
|
"start": "parcel index.html",
|
||||||
|
"build": "parcel build index.html"
|
||||||
|
},
|
||||||
|
"author": "Nezumi",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"@parcel/transformer-sass": "^2.9.3",
|
||||||
|
"parcel": "^2.9.3"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.32.0",
|
||||||
|
"regenerator-runtime": "^0.14.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,60 @@
|
|||||||
|
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<symbol id="icon-alert-circle" viewBox="0 0 24 24">
|
||||||
|
<path d="M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 8v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM12 17c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-alert-triangle" viewBox="0 0 24 24">
|
||||||
|
<path d="M11.148 4.374c0.073-0.123 0.185-0.242 0.334-0.332 0.236-0.143 0.506-0.178 0.756-0.116s0.474 0.216 0.614 0.448l8.466 14.133c0.070 0.12 0.119 0.268 0.128 0.434-0.015 0.368-0.119 0.591-0.283 0.759-0.18 0.184-0.427 0.298-0.693 0.301l-16.937-0.001c-0.152-0.001-0.321-0.041-0.481-0.134-0.239-0.138-0.399-0.359-0.466-0.607s-0.038-0.519 0.092-0.745zM9.432 3.346l-8.47 14.14c-0.422 0.731-0.506 1.55-0.308 2.29s0.68 1.408 1.398 1.822c0.464 0.268 0.976 0.4 1.475 0.402h16.943c0.839-0.009 1.587-0.354 2.123-0.902s0.864-1.303 0.855-2.131c-0.006-0.536-0.153-1.044-0.406-1.474l-8.474-14.147c-0.432-0.713-1.11-1.181-1.854-1.363s-1.561-0.081-2.269 0.349c-0.429 0.26-0.775 0.615-1.012 1.014zM11 9v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM12 18c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-arrow-left" viewBox="0 0 24 24">
|
||||||
|
<path d="M12.707 18.293l-5.293-5.293h11.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-11.586l5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-7 7c-0.096 0.096-0.168 0.206-0.217 0.324-0.051 0.122-0.076 0.253-0.076 0.383 0 0.256 0.098 0.512 0.293 0.707l7 7c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-arrow-right" viewBox="0 0 24 24">
|
||||||
|
<path d="M11.293 5.707l5.293 5.293h-11.586c-0.552 0-1 0.448-1 1s0.448 1 1 1h11.586l-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l7-7c0.092-0.092 0.166-0.202 0.217-0.324 0.101-0.245 0.101-0.521 0-0.766-0.049-0.118-0.121-0.228-0.217-0.324l-7-7c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-bookmark" viewBox="0 0 24 24">
|
||||||
|
<path d="M18.419 21.814c0.161 0.116 0.363 0.186 0.581 0.186 0.552 0 1-0.448 1-1v-16c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-10c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v16c-0.001 0.199 0.060 0.404 0.186 0.581 0.321 0.449 0.946 0.554 1.395 0.232l6.419-4.584zM18 19.057l-5.419-3.871c-0.355-0.254-0.819-0.242-1.162 0l-5.419 3.871v-14.057c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h10c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z"></path>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="icon-bookmark-fill" viewBox="0 0 24 24">
|
||||||
|
<polygon points="18.419 21.814, 19.000 22.000, 20.000 21.000, 20.000 5.000, 19.121 2.879, 17.000 2.000, 7.000 2.000, 4.879 2.879, 4.000 5.000, 4.000 21.000, 4.186 21.581, 5.581 21.813, 12.000 17.229" />
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="icon-check" viewBox="0 0 24 24">
|
||||||
|
<path d="M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-clock" viewBox="0 0 24 24">
|
||||||
|
<path d="M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 6v6c0 0.389 0.222 0.727 0.553 0.894l4 2c0.494 0.247 1.095 0.047 1.342-0.447s0.047-1.095-0.447-1.342l-3.448-1.723v-5.382c0-0.552-0.448-1-1-1s-1 0.448-1 1z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-edit" viewBox="0 0 24 24">
|
||||||
|
<path d="M11 3h-7c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-7c0-0.552-0.448-1-1-1s-1 0.448-1 1v7c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h7c0.552 0 1-0.448 1-1s-0.448-1-1-1zM17.793 1.793l-9.5 9.5c-0.122 0.121-0.217 0.28-0.263 0.465l-1 4c-0.039 0.15-0.042 0.318 0 0.485 0.134 0.536 0.677 0.862 1.213 0.728l4-1c0.167-0.041 0.33-0.129 0.465-0.263l9.5-9.5c0.609-0.609 0.914-1.41 0.914-2.207s-0.305-1.598-0.914-2.207-1.411-0.915-2.208-0.915-1.598 0.305-2.207 0.914zM19.207 3.207c0.219-0.219 0.504-0.328 0.793-0.328s0.574 0.109 0.793 0.328 0.328 0.504 0.328 0.793-0.109 0.574-0.328 0.793l-9.304 9.304-2.114 0.529 0.529-2.114z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-loader" viewBox="0 0 24 24">
|
||||||
|
<path d="M11 2v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 18v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM4.223 5.637l2.83 2.83c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.83-2.83c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM15.533 16.947l2.83 2.83c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.83-2.83c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM2 13h4c0.552 0 1-0.448 1-1s-0.448-1-1-1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1zM18 13h4c0.552 0 1-0.448 1-1s-0.448-1-1-1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1zM5.637 19.777l2.83-2.83c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.83 2.83c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM16.947 8.467l2.83-2.83c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.83 2.83c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-minus-circle" viewBox="0 0 24 24">
|
||||||
|
<path d="M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM8 13h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-plus-circle" viewBox="0 0 24 24">
|
||||||
|
<path d="M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM8 13h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-search" viewBox="0 0 24 24">
|
||||||
|
<path d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-send" viewBox="0 0 24 24">
|
||||||
|
<path d="M22.963 2.269c0.043-0.151 0.050-0.314 0.015-0.476-0.024-0.113-0.068-0.224-0.131-0.325-0.064-0.102-0.145-0.19-0.238-0.262-0.117-0.090-0.249-0.15-0.386-0.181s-0.282-0.034-0.426-0.004c-0.042 0.009-0.085 0.021-0.126 0.035l-0.021 0.007-19.98 6.993c-0.252 0.088-0.467 0.276-0.584 0.538-0.224 0.505 0.003 1.096 0.508 1.32l8.649 3.844 3.844 8.649c0.108 0.243 0.313 0.443 0.583 0.538 0.521 0.182 1.092-0.092 1.274-0.614l6.993-19.979c0.010-0.027 0.019-0.054 0.027-0.082zM10.779 11.807l-6.068-2.696 13.483-4.72zM19.609 5.806l-4.72 13.483-2.696-6.068z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-smile" viewBox="0 0 24 24">
|
||||||
|
<path d="M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM7.2 14.6c0 0 0.131 0.173 0.331 0.383 0.145 0.153 0.338 0.341 0.577 0.54 0.337 0.281 0.772 0.59 1.297 0.853 0.705 0.352 1.579 0.624 2.595 0.624s1.89-0.272 2.595-0.624c0.525-0.263 0.96-0.572 1.297-0.853 0.239-0.199 0.432-0.387 0.577-0.54 0.2-0.21 0.331-0.383 0.331-0.383 0.331-0.442 0.242-1.069-0.2-1.4s-1.069-0.242-1.4 0.2c-0.041 0.050-0.181 0.206-0.181 0.206-0.1 0.105-0.237 0.239-0.408 0.382-0.243 0.203-0.549 0.419-0.91 0.6-0.48 0.239-1.050 0.412-1.701 0.412s-1.221-0.173-1.701-0.413c-0.36-0.18-0.667-0.397-0.91-0.6-0.171-0.143-0.308-0.277-0.408-0.382-0.14-0.155-0.181-0.205-0.181-0.205-0.331-0.442-0.958-0.531-1.4-0.2s-0.531 0.958-0.2 1.4zM9 10c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1zM15 10c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-user" viewBox="0 0 24 24">
|
||||||
|
<path d="M21 21v-2c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464h-8c-1.38 0-2.632 0.561-3.536 1.464s-1.464 2.156-1.464 3.536v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879h8c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121v2c0 0.552 0.448 1 1 1s1-0.448 1-1zM17 7c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464-2.632 0.561-3.536 1.464-1.464 2.156-1.464 3.536 0.561 2.632 1.464 3.536 2.156 1.464 3.536 1.464 2.632-0.561 3.536-1.464 1.464-2.156 1.464-3.536zM15 7c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121 0.335-1.577 0.879-2.121 1.292-0.879 2.121-0.879 1.577 0.335 2.121 0.879 0.879 1.292 0.879 2.121z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-upload-cloud" viewBox="0 0 24 24">
|
||||||
|
<path d="M11 14.414v6.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6.586l2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-4-4c-0.092-0.092-0.202-0.166-0.324-0.217s-0.253-0.076-0.383-0.076c-0.256 0-0.512 0.098-0.707 0.293l-4 4c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM20.869 19.268c1.454-0.793 2.451-2.102 2.884-3.574s0.305-3.112-0.488-4.566c-0.679-1.245-1.737-2.155-2.959-2.663-0.724-0.301-1.505-0.46-2.299-0.465h-0.527c-0.725-2.057-2.144-3.708-3.917-4.752-1.983-1.168-4.415-1.581-6.821-0.959s-4.333 2.162-5.502 4.145-1.581 4.415-0.959 6.821c0.372 1.437 1.073 2.709 1.975 3.713 0.369 0.411 1.002 0.444 1.412 0.075s0.444-1.002 0.075-1.412c-0.688-0.765-1.235-1.75-1.526-2.877-0.484-1.872-0.164-3.761 0.746-5.305s2.407-2.74 4.279-3.224 3.761-0.164 5.305 0.746 2.74 2.407 3.224 4.279c0.116 0.435 0.506 0.75 0.969 0.75h1.253c0.536 0.004 1.061 0.111 1.545 0.312 0.815 0.339 1.517 0.943 1.97 1.773 0.529 0.97 0.615 2.061 0.325 3.044s-0.953 1.854-1.923 2.382c-0.485 0.264-0.664 0.872-0.399 1.357s0.872 0.664 1.357 0.399z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="icon-users" viewBox="0 0 24 24">
|
||||||
|
<path d="M18 21v-2c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464h-8c-1.38 0-2.632 0.561-3.536 1.464s-1.464 2.156-1.464 3.536v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879h8c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121v2c0 0.552 0.448 1 1 1s1-0.448 1-1zM14 7c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464-2.632 0.561-3.536 1.464-1.464 2.156-1.464 3.536 0.561 2.632 1.464 3.536 2.156 1.464 3.536 1.464 2.632-0.561 3.536-1.464 1.464-2.156 1.464-3.536zM12 7c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121 0.335-1.577 0.879-2.121 1.292-0.879 2.121-0.879 1.577 0.335 2.121 0.879 0.879 1.292 0.879 2.121zM24 21v-2c-0.001-1.245-0.457-2.385-1.215-3.261-0.652-0.753-1.528-1.311-2.529-1.576-0.534-0.141-1.081 0.177-1.222 0.711s0.177 1.081 0.711 1.222c0.607 0.161 1.136 0.498 1.528 0.952 0.454 0.526 0.726 1.206 0.727 1.952v2c0 0.552 0.448 1 1 1s1-0.448 1-1zM15.752 4.099c0.803 0.206 1.445 0.715 1.837 1.377s0.531 1.47 0.325 2.273c-0.176 0.688-0.575 1.256-1.105 1.652-0.314 0.235-0.675 0.409-1.063 0.511-0.534 0.14-0.854 0.687-0.713 1.221s0.687 0.854 1.221 0.713c0.637-0.167 1.232-0.455 1.752-0.844 0.884-0.66 1.552-1.613 1.845-2.758 0.342-1.337 0.11-2.689-0.542-3.788s-1.725-1.953-3.062-2.296c-0.535-0.137-1.080 0.186-1.217 0.721s0.186 1.080 0.721 1.217z"></path>
|
||||||
|
</symbol>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
@@ -0,0 +1,163 @@
|
|||||||
|
import icons from '../img/icons.svg';
|
||||||
|
|
||||||
|
const recipeContainer = document.querySelector('.recipe');
|
||||||
|
|
||||||
|
const timeout = function (s) {
|
||||||
|
return new Promise(function (_, reject) {
|
||||||
|
setTimeout(function () {
|
||||||
|
reject(new Error(`Request took too long! Timeout after ${s} second`));
|
||||||
|
}, s * 1000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// https://forkify-api.herokuapp.com/v2
|
||||||
|
|
||||||
|
///////////////////////////////////////
|
||||||
|
|
||||||
|
const renderSpinner = function (parentEl) {
|
||||||
|
const markup = `
|
||||||
|
<div class="spinner">
|
||||||
|
<svg>
|
||||||
|
<use href="${icons}#icon-loader"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
parentEl.innerHTML = '';
|
||||||
|
parentEl.insertAdjacentHTML('afterbegin', markup);
|
||||||
|
};
|
||||||
|
|
||||||
|
const showRecipe = async function () {
|
||||||
|
try {
|
||||||
|
const id = window.location.hash.slice(1);
|
||||||
|
|
||||||
|
if (!id) return;
|
||||||
|
|
||||||
|
// 1)Loading recipe
|
||||||
|
renderSpinner(recipeContainer);
|
||||||
|
const res = await fetch(
|
||||||
|
`https://forkify-api.herokuapp.com/api/v2/recipes/${id}`
|
||||||
|
);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (!res.ok) throw new Error(`${data.message} (${res.status})`);
|
||||||
|
|
||||||
|
let { recipe } = data.data;
|
||||||
|
|
||||||
|
recipe = {
|
||||||
|
id: recipe.id,
|
||||||
|
title: recipe.title,
|
||||||
|
publisher: recipe.publisher,
|
||||||
|
sourceUrl: recipe.source_url,
|
||||||
|
image: recipe.image_url,
|
||||||
|
servings: recipe.servings,
|
||||||
|
cookingTime: recipe.cooking_time,
|
||||||
|
ingredients: recipe.ingredients,
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(recipe);
|
||||||
|
|
||||||
|
// 2) Rendering recipe
|
||||||
|
const markup = `
|
||||||
|
<figure class="recipe__fig">
|
||||||
|
<img src="${recipe.image}" alt="${recipe.title}" class="recipe__img" />
|
||||||
|
<h1 class="recipe__title">
|
||||||
|
<span>${recipe.title}</span>
|
||||||
|
</h1>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<div class="recipe__details">
|
||||||
|
<div class="recipe__info">
|
||||||
|
<svg class="recipe__info-icon">
|
||||||
|
<use href="${icons}#icon-clock"></use>
|
||||||
|
</svg>
|
||||||
|
<span class="recipe__info-data recipe__info-data--minutes">${
|
||||||
|
recipe.cookingTime
|
||||||
|
}</span>
|
||||||
|
<span class="recipe__info-text">minutes</span>
|
||||||
|
</div>
|
||||||
|
<div class="recipe__info">
|
||||||
|
<svg class="recipe__info-icon">
|
||||||
|
<use href="${icons}#icon-users"></use>
|
||||||
|
</svg>
|
||||||
|
<span class="recipe__info-data recipe__info-data--people">${
|
||||||
|
recipe.servings
|
||||||
|
}</span>
|
||||||
|
<span class="recipe__info-text">servings</span>
|
||||||
|
|
||||||
|
<div class="recipe__info-buttons">
|
||||||
|
<button class="btn--tiny btn--increase-servings">
|
||||||
|
<svg>
|
||||||
|
<use href="${icons}#icon-minus-circle"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="btn--tiny btn--increase-servings">
|
||||||
|
<svg>
|
||||||
|
<use href="${icons}#icon-plus-circle"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recipe__user-generated">
|
||||||
|
<svg>
|
||||||
|
<use href="${icons}#icon-user"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<button class="btn--round">
|
||||||
|
<svg class="">
|
||||||
|
<use href="${icons}#icon-bookmark-fill"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recipe__ingredients">
|
||||||
|
<h2 class="heading--2">Recipe ingredients</h2>
|
||||||
|
<ul class="recipe__ingredient-list">
|
||||||
|
${recipe.ingredients
|
||||||
|
.map(ing => {
|
||||||
|
return `
|
||||||
|
<li class="recipe__ingredient">
|
||||||
|
<svg class="recipe__icon">
|
||||||
|
<use href="${icons}#icon-check"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="recipe__quantity">${ing.quantity}</div>
|
||||||
|
<div class="recipe__description">
|
||||||
|
<span class="recipe__unit">${ing.unit}</span>
|
||||||
|
${ing.description}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
})
|
||||||
|
.join('')}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recipe__directions">
|
||||||
|
<h2 class="heading--2">How to cook it</h2>
|
||||||
|
<p class="recipe__directions-text">
|
||||||
|
This recipe was carefully designed and tested by
|
||||||
|
<span class="recipe__publisher">${
|
||||||
|
recipe.publisher
|
||||||
|
}</span>. Please check out
|
||||||
|
directions at their website.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
class="btn--small recipe__btn"
|
||||||
|
href="h${recipe.sourceUrl}"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<span>Directions</span>
|
||||||
|
<svg class="search__icon">
|
||||||
|
<use href="src/img/icons.svg#icon-arrow-right"></use>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
recipeContainer.innerHTML = '';
|
||||||
|
recipeContainer.insertAdjacentHTML('afterbegin', markup);
|
||||||
|
} catch (error) {
|
||||||
|
alert(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
['hashchange', 'load'].forEach(ev => window.addEventListener(ev, showRecipe));
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
// $color-primary: #f59a83;
|
||||||
|
$color-primary: #f38e82;
|
||||||
|
$color-grad-1: #fbdb89;
|
||||||
|
$color-grad-2: #f48982;
|
||||||
|
|
||||||
|
$color-grey-light-1: #f9f5f3; // Light background
|
||||||
|
$color-grey-light-2: #f2efee; // Light lines
|
||||||
|
$color-grey-light-3: #d3c7c3; // Light text (placeholder)
|
||||||
|
$color-grey-dark-1: #615551; // Normal text
|
||||||
|
$color-grey-dark-2: #918581; // Lighter text
|
||||||
|
|
||||||
|
$gradient: linear-gradient(to right bottom, $color-grad-1, $color-grad-2);
|
||||||
|
|
||||||
|
$bp-large: 78.15em; // 1250px
|
||||||
|
$bp-medium: 61.25em; // 980px
|
||||||
|
$bp-small: 37.5em; // 600px
|
||||||
|
$bp-smallest: 31.25em; // 500px
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 62.5%;
|
||||||
|
|
||||||
|
@media only screen and (max-width: $bp-medium) {
|
||||||
|
font-size: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Nunito Sans', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: $color-grey-dark-1;
|
||||||
|
background-image: $gradient;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
min-height: calc(100vh - 2 * 4vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 120rem;
|
||||||
|
min-height: 117rem;
|
||||||
|
margin: 4vw auto;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 9px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2rem 6rem 0.5rem rgba($color-grey-dark-1, 0.2);
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 10rem minmax(100rem, auto);
|
||||||
|
grid-template-columns: 1fr 2fr;
|
||||||
|
grid-template-areas:
|
||||||
|
'head head'
|
||||||
|
'list recipe';
|
||||||
|
|
||||||
|
@media only screen and (max-width: $bp-large) {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,213 @@
|
|||||||
|
%btn {
|
||||||
|
background-image: $gradient;
|
||||||
|
border-radius: 10rem;
|
||||||
|
border: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > *:first-child {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
@extend %btn;
|
||||||
|
|
||||||
|
padding: 1.5rem 4rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: 2.25rem;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--small {
|
||||||
|
&,
|
||||||
|
&:link,
|
||||||
|
&:visited {
|
||||||
|
@extend %btn;
|
||||||
|
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 1.25rem 2.25rem;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 1.75rem;
|
||||||
|
width: 1.75rem;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--inline {
|
||||||
|
color: $color-primary;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border: none;
|
||||||
|
background-color: $color-grey-light-1;
|
||||||
|
padding: 0.8rem 1.2rem;
|
||||||
|
border-radius: 10rem;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 1.6rem;
|
||||||
|
width: 1.6rem;
|
||||||
|
fill: currentColor;
|
||||||
|
margin: 0 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin: 0 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-grad-2;
|
||||||
|
background-color: $color-grey-light-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--round {
|
||||||
|
background-image: $gradient;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 4.5rem;
|
||||||
|
width: 4.5rem;
|
||||||
|
// margin-left: auto;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--tiny {
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
fill: $color-primary;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover svg {
|
||||||
|
fill: $color-grad-2;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active svg {
|
||||||
|
fill: $color-grad-2;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: 0.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading--2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $color-primary;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
text-align: center;
|
||||||
|
// transform: skewY(-3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:link,
|
||||||
|
.link:visited {
|
||||||
|
color: $color-grey-dark-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
margin: 5rem auto;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 6rem;
|
||||||
|
width: 6rem;
|
||||||
|
fill: $color-primary;
|
||||||
|
animation: rotate 2s infinite linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.message,
|
||||||
|
.error {
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 5rem 4rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 3rem;
|
||||||
|
width: 3rem;
|
||||||
|
fill: $color-primary;
|
||||||
|
transform: translateY(-0.3rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,144 @@
|
|||||||
|
.header {
|
||||||
|
grid-area: head;
|
||||||
|
background-color: $color-grey-light-1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
margin-left: 4rem;
|
||||||
|
height: 4.6rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 3rem;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 0.7rem 3rem rgba($color-grey-dark-1, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__field {
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
font-family: inherit;
|
||||||
|
color: inherit;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
width: 30rem;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $color-grey-light-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: $bp-medium) {
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__btn {
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
align-self: stretch;
|
||||||
|
margin-right: 2.5rem;
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__btn {
|
||||||
|
height: 100%;
|
||||||
|
font-family: inherit;
|
||||||
|
color: inherit;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 2.4rem;
|
||||||
|
width: 2.4rem;
|
||||||
|
fill: $color-primary;
|
||||||
|
margin-right: 0.7rem;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $color-grey-light-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarks {
|
||||||
|
padding: 1rem 0;
|
||||||
|
position: absolute;
|
||||||
|
// right: 0;
|
||||||
|
right: -2.5rem;
|
||||||
|
z-index: 10;
|
||||||
|
width: 40rem;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 0.8rem 5rem 2rem rgba($color-grey-dark-1, 0.1);
|
||||||
|
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.5s 0.2s;
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__field {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 4rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $color-grey-light-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
.nav__btn--bookmarks:hover + & {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
.preview {
|
||||||
|
&__link {
|
||||||
|
&:link,
|
||||||
|
&:visited {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.5rem 3.25rem;
|
||||||
|
transition: all 0.3s;
|
||||||
|
border-right: 1px solid #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $color-grey-light-1;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background-color: $color-grey-light-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__fig {
|
||||||
|
flex: 0 0 5.8rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 5.8rem;
|
||||||
|
margin-right: 2rem;
|
||||||
|
position: relative;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right bottom,
|
||||||
|
$color-grad-1,
|
||||||
|
$color-grad-2
|
||||||
|
);
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__data {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
grid-template-columns: 1fr 2rem;
|
||||||
|
row-gap: 0.1rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
grid-column: 1/-1;
|
||||||
|
font-size: 1.45rem;
|
||||||
|
color: $color-primary;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
// This is how text is truncated!
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 25rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__publisher {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
color: $color-grey-dark-2;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__user-generated {
|
||||||
|
background-color: darken($color-grey-light-2, 2%);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
border-radius: 10rem;
|
||||||
|
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 1.75rem;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 1.2rem;
|
||||||
|
width: 1.2rem;
|
||||||
|
fill: $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,179 @@
|
|||||||
|
.recipe {
|
||||||
|
background-color: $color-grey-light-1;
|
||||||
|
|
||||||
|
///////////
|
||||||
|
// FIGURE
|
||||||
|
&__fig {
|
||||||
|
height: 32rem;
|
||||||
|
position: relative;
|
||||||
|
// transform: scale(1.04) translateY(-1px);
|
||||||
|
transform-origin: top;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right bottom,
|
||||||
|
$color-grad-1,
|
||||||
|
$color-grad-2
|
||||||
|
);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 20%) skewY(-6deg);
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 3.25rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
width: 50%;
|
||||||
|
line-height: 1.95;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
-webkit-box-decoration-break: clone;
|
||||||
|
box-decoration-break: clone;
|
||||||
|
padding: 1.3rem 2rem;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right bottom,
|
||||||
|
$color-grad-1,
|
||||||
|
$color-grad-2
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: $bp-medium) {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////
|
||||||
|
// DETAILS
|
||||||
|
&__details {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 7.5rem 8rem 3.5rem 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
font-size: 1.65rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: 4.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-icon {
|
||||||
|
height: 2.35rem;
|
||||||
|
width: 2.35rem;
|
||||||
|
fill: $color-primary;
|
||||||
|
margin-right: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-data {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-buttons {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 1.6rem;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__user-generated {
|
||||||
|
background-color: darken($color-grey-light-2, 2%);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 4rem;
|
||||||
|
width: 4rem;
|
||||||
|
border-radius: 10rem;
|
||||||
|
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 1.75rem;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: 2.25rem;
|
||||||
|
fill: $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////
|
||||||
|
// INGREDIENTS
|
||||||
|
&__ingredients {
|
||||||
|
padding: 5rem 8rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
background-color: $color-grey-light-2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ingredient-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 2.5rem 3rem;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ingredient {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
fill: $color-primary;
|
||||||
|
margin-right: 1.1rem;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__quantity {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////
|
||||||
|
// DIRECTIONS
|
||||||
|
&__directions {
|
||||||
|
padding: 5rem 10rem;
|
||||||
|
padding-bottom: 5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__directions-text {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3.5rem;
|
||||||
|
color: $color-grey-dark-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__publisher {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
.search-results {
|
||||||
|
padding: 3rem 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results {
|
||||||
|
list-style: none;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin-top: auto;
|
||||||
|
padding: 0 3.5rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__btn {
|
||||||
|
&--prev {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
&--next {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
color: $color-grey-dark-2;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
padding: 0 3.5rem;
|
||||||
|
margin-top: 4rem;
|
||||||
|
|
||||||
|
.twitter-link:link,
|
||||||
|
.twitter-link:visited {
|
||||||
|
color: $color-grey-dark-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
.add-recipe-window {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 100rem;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 9px;
|
||||||
|
|
||||||
|
padding: 5rem 6rem;
|
||||||
|
box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.25);
|
||||||
|
z-index: 1000;
|
||||||
|
transition: all 0.5s;
|
||||||
|
|
||||||
|
.btn--close-modal {
|
||||||
|
font-family: inherit;
|
||||||
|
color: inherit;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.5rem;
|
||||||
|
right: 1.6rem;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
z-index: 100;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 4rem 6rem;
|
||||||
|
|
||||||
|
&__column {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 2.8fr;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
|
||||||
|
& label {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
& input {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
padding: 0.8rem 1rem;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $color-grey-light-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border: 1px solid $color-primary;
|
||||||
|
background-color: $color-grey-light-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& button {
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
justify-self: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__heading {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
grid-column: 1/-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__btn {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
@import 'base';
|
||||||
|
@import 'components';
|
||||||
|
@import 'header';
|
||||||
|
@import 'preview';
|
||||||
|
@import 'searchResults';
|
||||||
|
@import 'recipe';
|
||||||
|
@import 'upload';
|
||||||
Reference in New Issue
Block a user