diff --git a/src/buildRecipes.js b/src/buildRecipes.js index 2898f67..4316cef 100644 --- a/src/buildRecipes.js +++ b/src/buildRecipes.js @@ -138,15 +138,6 @@ const getInlineCss = heroImgURL => !heroImgURL `; -/* - // link icon svg code - // via: https://fontawesome.com/icons/external-link-alt - let linkIcon = ''; - */ - -// eslint-disable-next-line no-unused-vars function prettyBasedOnSection(section, shortenURLs) { // opt: remove cruft from 'based on' links return shortenURLs diff --git a/src/static/images/icons/link.svg b/src/static/images/icons/link.svg new file mode 100644 index 0000000..375ec0d --- /dev/null +++ b/src/static/images/icons/link.svg @@ -0,0 +1,4 @@ + diff --git a/src/static/scripts/index.js b/src/static/scripts/index.js index 75165e7..1b176ab 100644 --- a/src/static/scripts/index.js +++ b/src/static/scripts/index.js @@ -71,6 +71,7 @@ const input = document.querySelector(Selectors.SEARCH); input.value = ''; input.focus(); + filter(''); }; function init() { diff --git a/src/static/styles/recipe.css b/src/static/styles/recipe.css index 5b62b2e..696ce6f 100644 --- a/src/static/styles/recipe.css +++ b/src/static/styles/recipe.css @@ -58,13 +58,6 @@ a:hover .link-svg { color: var(--color-back-arrow-hover); } -/* -svg.linkIcon { - width: 14px; - margin-left: 0.3em; -} -*/ - .view-source, .view-source:link, .view-source:visited { diff --git a/src/static/styles/recipesIndex.css b/src/static/styles/recipesIndex.css index c41a35d..b5a1a25 100644 --- a/src/static/styles/recipesIndex.css +++ b/src/static/styles/recipesIndex.css @@ -1,39 +1,47 @@ :root { - --color-view-btn: var(--color-neutral-45); - --color-view-svg-selected: var(--color-neutral-00); + --color-view-btn-inactive: var(--color-neutral-20); + --color-view-btn-hover: var(--color-neutral-45); --color-view-btn-selected: var(--color-primary); + --color-view-svg-selected: var(--color-neutral-00); --color-filter-inactive: var(--color-neutral-25); --color-filter-hover: var(--color-neutral-80); --color-filter-focus: var(--color-neutral-50); - --search-input-height: 40px; - --search-icon-length: 18px; - --search-cancel-btn-length: 24px; + --search-input-height: 40px; + --search-icon-length: 18px; + + --small-btn-length: 24px; } .mainTitle { text-align: center; } -/* nav */ +/* nav alphabet */ .navigation { - max-width: 500px; - margin: 0.7em auto 2.6em auto; line-height: 1.7em; + margin: 0.7em auto 2.6em; text-align: center; } .navigation a { - margin-right: 0.1em; + background-color: var(--color-view-svg-selected); + border-radius: 50%; color: var(--color-index-pg-nav-letter); display: inline-block; - width: 1.22em; - height: 1.22em; + height: var(--small-btn-length); + line-height: var(--small-btn-length); + margin-right: calc(var(--small-btn-length) / 6); + text-decoration: none; + vertical-align: middle; + width: var(--small-btn-length); + transition: color var(--transition-color-duration) ease, background-color var(--transition-color-duration) ease; } .navigation a:hover { - color: inherit; + background-color: var(--color-view-btn-selected); + color: var(--color-view-svg-selected); } /* View radio buttons */ @@ -43,8 +51,8 @@ html body .nav-view__item { } .nav-view__btn { - background-color: var(--color-neutral-00); - border: solid 1px var(--color-view-btn); + background-color: transparent; + border: solid 1px var(--color-view-btn-inactive); border-radius: 4px; padding: 0; display: inline-block; @@ -54,13 +62,16 @@ html body .nav-view__item { transition: background-color var(--transition-color-duration) ease; } -.nav-view__img { - height: 24px; - width: 24px; +.nav-view__btn svg { + fill: var(--color-view-btn-inactive); } -.nav-view__btn svg { - fill: var(--color-view-btn); +.nav-view__btn:hover { + border-color: var(--color-view-btn-hover); +} + +.nav-view__btn:hover svg { + fill: var(--color-view-btn-hover); } .view--content .nav-view__btn[data-view="content"], @@ -76,6 +87,11 @@ html body .nav-view__item { fill: var(--color-view-svg-selected); } +.nav-view__img { + height: 24px; + width: 24px; +} + /* Filter/Search */ .filter__wrap { float: right; @@ -99,7 +115,7 @@ html body .nav-view__item { .filter__text-field:not(:placeholder-shown), .filter__text-field:focus { border-color: var(--color-filter-focus); - width: calc(14em + var(--search-cancel-btn-length) + var(--search-icon-length)); + width: calc(14em + var(--small-btn-length) + var(--search-icon-length)); } .filter__mask-icon { @@ -135,28 +151,29 @@ html body .nav-view__item { border-radius: 4px; cursor: pointer; display: none; - height: var(--search-cancel-btn-length); - width: var(--search-cancel-btn-length); + height: var(--small-btn-length); + width: var(--small-btn-length); position: absolute; - right: calc(5px + var(--search-cancel-btn-length) + var(--search-icon-length));; - top: calc((var(--search-input-height) - var(--search-cancel-btn-length)) / 2); + right: calc(5px + var(--small-btn-length) + var(--search-icon-length)); + ; + top: calc((var(--search-input-height) - var(--small-btn-length)) / 2); } -.filter__text-field:hover + .filter__icons .filter__search-icon { +.filter__text-field:hover+.filter__icons .filter__search-icon { background-color: var(--color-filter-hover); } -.filter__text-field:focus + .filter__icons .filter__search-icon { +.filter__text-field:focus+.filter__icons .filter__search-icon { background-color: var(--color-filter-focus); } -.filter__text-field:not(:placeholder-shown) + .filter__icons .filter__cancel-btn, -.filter__text-field:focus + .filter__icons .filter__cancel-btn { +.filter__text-field:not(:placeholder-shown)+.filter__icons .filter__cancel-btn, +.filter__text-field:focus+.filter__icons .filter__cancel-btn { display: inline-block; } -.filter__text-field:not(:placeholder-shown) + .filter__icons .filter__cancel-icon, -.filter__text-field:focus + .filter__icons .filter__cancel-icon { +.filter__text-field:not(:placeholder-shown)+.filter__icons .filter__cancel-icon, +.filter__text-field:focus+.filter__icons .filter__cancel-icon { background-color: var(--color-filter-focus); } @@ -225,11 +242,14 @@ body .recipe-list .recipe-list__item--hidden { } /* view: Grid */ +.view--grid .recipe-list { + display: grid; + gap: 20px; +} + .view--grid .recipe-list__item { - display: inline-block; - width: 260px; + display: block; margin: 0; - margin: 0 15px 15px 0; } .view--grid .recipe-list__item a { @@ -283,8 +303,19 @@ body .recipe-list .recipe-list__item--hidden { margin-left: 0.3em; } -@media screen and (min-width: 820px) { +@media screen and (min-width: 580px) { + .view--grid .recipe-list { + grid-template-columns: 50% 50%; + } +} +@media screen and (min-width: 720px) { + .view--grid .recipe-list { + grid-template-columns: 33% 33% 33%; + } +} + +@media screen and (min-width: 820px) { .view--content .recipe-list, .view--compact-list .recipe-list { column-count: 2; diff --git a/src/static/styles/theme-nytimes.css b/src/static/styles/theme-nytimes.css index aae9413..7a151f4 100644 --- a/src/static/styles/theme-nytimes.css +++ b/src/static/styles/theme-nytimes.css @@ -21,27 +21,27 @@ .nytimes .section--title { border-bottom: 1px solid #ccc; - padding-top: 30px; +} + +.nytimes .section--heroimage { + max-height: 300px; + overflow: hidden; + min-height: 200px; +} + +.section--heroimage img { + width: 100%; + height: 100%; } .nytimes .recipe__name { - font-size: 40px; + font-size: 30px; font-weight: normal; letter-spacing: .01em; line-height: 1.1; text-transform: none; } -.nytimes .section--heroimage { - float: right; - margin-left: 25px; - max-width: 60%; -} - -.nytimes .section--ingredients { - clear: right; -} - .nytimes .section--steps li { margin-left: 0; margin-top: 40px; @@ -56,11 +56,41 @@ top: -25px; } -.nytimes .html { +.nytimes .header__body { font-family: var(--nytimes-font-stack); font-size: 18px; + text-align: left; } -.nytimes .html p { +.nytimes .header__body p { line-height: 1.6; } + +@media screen and (min-width: 820px) { + .nytimes .section--ingredients { + clear: right; + } + + .nytimes .section--heroimage { + float: right; + margin-left: 25px; + max-width: 60%; + + max-height: unset; + overflow: unset; + min-height: unset; + } + + .section--heroimage img { + width: unset; + height: unset; + } + + .nytimes .section--title { + padding-top: 30px; + } + + .nytimes .recipe__name { + font-size: 40px; + } +} diff --git a/src/static/styles/theme-washington-post.css b/src/static/styles/theme-washington-post.css index de6c2e5..b042452 100644 --- a/src/static/styles/theme-washington-post.css +++ b/src/static/styles/theme-washington-post.css @@ -25,13 +25,7 @@ background-color: var(--color-neutral-00-80prct); border-radius: 8px; font-family: var(--wapo-font-stack-body); - left: 10%; - margin-bottom: -150px; - min-width: 300px; - padding: 30px; position: relative; - top: -150px; - width: 60%; } .washington-post .recipe__name { @@ -54,6 +48,10 @@ top: -25px; } +.washington-post .html { + text-align: left; +} + .washington-post .html p { line-height: 1.6; } @@ -62,3 +60,14 @@ font-size: 80%; line-height: 1.2; } + +@media screen and (min-width: 820px) { + .washington-post .section--title { + left: 10%; + margin-bottom: -150px; + min-width: 300px; + padding: 30px; + top: -150px; + width: 60%; + } +} diff --git a/src/templates/index.html b/src/templates/index.html index 8404485..f5c81d9 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -3,7 +3,7 @@ Recipe Book - + {{__metaOGImage__}} @@ -20,13 +20,15 @@
-

Recipe Book

+ +
+
  • diff --git a/src/templates/recipe.html b/src/templates/recipe.html index e7cfec7..0ed82ba 100644 --- a/src/templates/recipe.html +++ b/src/templates/recipe.html @@ -41,7 +41,7 @@
    {{__heroImg__}}

    {{__title__}}

    -
    +
    {{__header__}}