www.aleph1.co.uk Git - yaffs-website/blob - web/core/profiles/demo_umami/themes/umami/css/components/content-types/recipe/recipe.css

   1 /**
   2 * @file
   3 * This file is used to style the recipe using the 'full' view mode.
   4 */
   5
   6 .node--type-recipe.node--view-mode-full .field--name-field-summary,
   7 .node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol {
   8   /* Limit text width for legibility */
   9   max-width: 796px;
  10 }
  11
  12 .node--type-recipe.node--view-mode-full .field--name-field-summary {
  13   max-width: 796px;
  14 }
  15
  16 .node--type-recipe.node--view-mode-full .field--name-field-image {
  17   background-color: #fcece7;
  18   background-image: url(../../../../images/png/umami-background-pattern-1.png);
  19 }
  20
  21 .node--type-recipe.node--view-mode-full .field--name-field-image img {
  22   display: block;
  23 }
  24
  25 @media screen and (min-width: 786px) {
  26   .node--type-recipe.node--view-mode-full .field--name-field-image img {
  27     max-width: 796px;
  28   }
  29 }
  30
  31 /* Icons for the recipe meta fields */
  32 .node--type-recipe.node--view-mode-full .field--name-field-preparation-time,
  33 .node--type-recipe.node--view-mode-full .field--name-field-cooking-time,
  34 .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings,
  35 .node--type-recipe.node--view-mode-full .field--name-field-difficulty {
  36   align-items: center;
  37   min-height: 40px;
  38   margin-bottom: 0.96em;
  39   padding-left: 48px; /* LTR */
  40   background-repeat: no-repeat;
  41   background-position: left center; /* LTR */
  42   background-size: 40px 40px;
  43 }
  44 [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-preparation-time,
  45 [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-cooking-time,
  46 [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings,
  47 [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-difficulty {
  48   background-position: right center;
  49   padding-left: 0;
  50   padding-right: 48px;
  51 }
  52 .node--type-recipe.node--view-mode-full .field--name-field-preparation-time {
  53   background-image: url(../../../../images/svg/knife.svg);
  54 }
  55 .node--type-recipe.node--view-mode-full .field--name-field-cooking-time {
  56   background-image: url(../../../../images/svg/timer.svg);
  57 }
  58 .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings {
  59   background-image: url(../../../../images/svg/serves.svg);
  60 }
  61 .node--type-recipe.node--view-mode-full .field--name-field-difficulty {
  62   background-image: url(../../../../images/svg/difficulty.svg);
  63 }