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-recipe-category {
   7   flex: 0 0 100%;
   8 }
   9 /* Large */
  10 @media screen and (min-width: 60rem) { /* 960px */
  11   .node--type-recipe.node--view-mode-full .field--name-field-recipe-category {
  12     flex: 0 1 auto;
  13     margin-right: 1em;
  14   }
  15 }
  16
  17 .node--type-recipe.node--view-mode-full .layout__region--top {
  18   margin-bottom: 2.369em;
  19 }
  20 /* Large */
  21 @media screen and (min-width: 60rem) { /* 960px */
  22   .node--type-recipe.node--view-mode-full .layout__region--top {
  23     display: flex;
  24     flex-wrap: wrap;
  25     justify-content: space-between;
  26   }
  27 }
  28
  29 /* Override the recipe's img margin-bottom on larger displays */
  30 /* Large */
  31 @media screen and (min-width: 60rem) { /* 960px */
  32   .node--type-recipe.node--view-mode-full .layout__region--top .field--name-field-image img {
  33     margin-bottom: 0;
  34   }
  35 }
  36
  37 .node--type-recipe.node--view-mode-full .layout__region--top-first,
  38 .node--type-recipe.node--view-mode-full .layout__region--top-second {
  39   flex: 0 0 calc(50% - 1rem);
  40 }
  41
  42 /* Recipe meta */
  43 .node--type-recipe.node--view-mode-full .layout__region--top-second {
  44   display: flex;
  45   flex-direction: column;
  46 }
  47 /* Large */
  48 @media screen and (min-width: 60rem) { /* 960px */
  49   /* Recipe meta */
  50   .node--type-recipe.node--view-mode-full .layout__region--top-second {
  51     align-self: center;
  52     flex-direction: row;
  53     flex-wrap: wrap;
  54     justify-content: center;
  55   }
  56 }
  57
  58 .node--type-recipe.node--view-mode-full .layout__region--top-second > .recipe-meta {
  59   display: flex;
  60   flex-direction: row;
  61   justify-content: flex-start;
  62   margin-bottom: 1em;
  63 }
  64 /* Large */
  65 @media screen and (min-width: 60rem) { /* 960px */
  66   .node--type-recipe.node--view-mode-full .layout__region--top-second > .recipe-meta {
  67     align-items: center;
  68     flex: 0 0 40%;
  69     flex-direction: column;
  70     margin-bottom: 2em;
  71     text-align: center;
  72   }
  73 }
  74
  75 .node--type-recipe.node--view-mode-full .layout__region--top-second > .field--name-field-summary {
  76   flex-basis: 100%;
  77   text-align: left;
  78 }
  79 /* Large */
  80 @media screen and (min-width: 60rem) { /* 960px */
  81   .node--type-recipe.node--view-mode-full .layout__region--top-second > .field--name-field-summary {
  82     flex-basis: 90%;
  83     text-align: center;
  84   }
  85 }
  86
  87 .node--type-recipe.node--view-mode-full .layout__region--top-second svg {
  88   flex: 0 0 26px;
  89   height: 26px;
  90   margin-bottom: 0;
  91 }
  92 /* Large */
  93 @media screen and (min-width: 60rem) { /* 960px */
  94   .node--type-recipe.node--view-mode-full .layout__region--top-second svg {
  95     flex: 0 0 auto;
  96     height: 47px;
  97     margin-bottom: 0.889em;
  98   }
  99 }
 100
 101 .node--type-recipe.node--view-mode-full .layout__region--top-second .field {
 102   flex: 1 0 auto;
 103 }
 104 /* Large */
 105 @media screen and (min-width: 60rem) { /* 960px */
 106   .node--type-recipe.node--view-mode-full .layout__region--top-second .field {
 107     flex: 0 0 100%;
 108   }
 109 }
 110 .node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__label,
 111 .node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__item {
 112   display: inline-block;
 113   padding-left: 0.5em;
 114 }
 115 /* Large */
 116 @media screen and (min-width: 60rem) { /* 960px */
 117   .node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__label,
 118   .node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__item {
 119     display: block;
 120   }
 121 }
 122 .node--type-recipe.node--view-mode-full .layout__region--top .field__label {
 123   font-family: 'Open Sans', Verdana, sans-serif;
 124   font-size: 1rem;
 125   line-height: 1.5;
 126   margin: 0;
 127   font-weight: 700;
 128 }
 129
 130 /* Recipe instructions */
 131 .node--type-recipe.node--view-mode-full .layout__region--bottom {
 132   background-color: #f4f2e9;
 133   border: 1px solid #e6eee0;
 134   margin: 0 -1.266em;
 135 }
 136 /* Large */
 137 @media screen and (min-width: 60rem) { /* 960px */
 138   .node--type-recipe.node--view-mode-full .layout__region--bottom {
 139     display: flex;
 140     flex-wrap: wrap;
 141     justify-content: space-between;
 142     margin: 0;
 143   }
 144 }
 145 .node--type-recipe.node--view-mode-full .layout__region--bottom > h2 {
 146   flex: 0 0 100%;
 147   font-family: 'Scope One', Georgia, serif;
 148   font-size: 1.424em;
 149   font-weight: 400;
 150   line-height: 1.2;
 151   padding: 1.266rem 1.266rem 1em 1.266rem;
 152   text-align: left;
 153   margin: 0;
 154 }
 155 /* Large */
 156 @media screen and (min-width: 60rem) { /* 960px */
 157   .node--type-recipe.node--view-mode-full .layout__region--bottom > h2 {
 158     font-size: 2.369rem;
 159     padding: 1.2em;
 160     text-align: center;
 161   }
 162 }
 163
 164 .node--type-recipe.node--view-mode-full .layout__region--bottom-first {
 165   padding: 0 1.266em 1.266em 1.266em;
 166 }
 167 /* Large */
 168 @media screen and (min-width: 60rem) { /* 960px */
 169   .node--type-recipe.node--view-mode-full .layout__region--bottom-first {
 170     flex: 0 0 33%;
 171     padding: 0 2.369em 2.369em 2.369em;
 172   }
 173 }
 174
 175 .node--type-recipe.node--view-mode-full .layout__region--bottom-second {
 176   padding: 0 1.266em 1.266em 1.266em;
 177 }
 178 /* Large */
 179 @media screen and (min-width: 60rem) { /* 960px */
 180   .node--type-recipe.node--view-mode-full .layout__region--bottom-second {
 181     flex: 0 0 67%;
 182     padding: 0 2.369em 2.369em 2.369em;
 183   }
 184 }
 185
 186 .node--type-recipe.node--view-mode-full .layout__region--bottom .field__label {
 187   font-family: 'Scope One', Georgia, serif;
 188   font-size: 1.266rem;
 189   font-weight: 400;
 190   line-height: 1.2;
 191   padding: 0 0 0.6em 0;
 192   margin: 0 0 1em 0;
 193   border-bottom: 1px solid #eec2cb;
 194 }
 195 /* Large */
 196 @media screen and (min-width: 60rem) { /* 960px */
 197   .node--type-recipe.node--view-mode-full .layout__region--bottom .field__label {
 198     font-size: 1.77rem;
 199     margin: 0 0 1.5em 0;
 200   }
 201 }
 202
 203 .node--type-recipe.node--view-mode-full .field--name-field-ingredients .field__item {
 204   border-bottom: 1px solid #eec2cb;
 205   padding: 0 0 0.6em 0;
 206   margin: 0 0 0.6em 0;
 207 }
 208 .node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol {
 209   margin-left: 0;
 210   padding-left: 0;
 211   list-style-type: none;
 212 }
 213 .node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol > li {
 214   counter-increment: step-counter;
 215   padding: 0 0 0.6em 2.5em;
 216   min-height: 1.5em;
 217   list-style: none;
 218   position: relative;
 219 }
 220 .node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol > li::before {
 221   content: counter(step-counter);
 222   color: #cc2a00;
 223   font-size: 1.5rem;
 224   position: absolute;
 225   top: 0;
 226   left: 0;
 227 }