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

   1 /**
   2  * @file
   3  * This file is used to style the 'highlighted-top' view mode.
   4  */
   5
   6 .node--view-mode-highlighted-top {
   7   border: 1px solid #fcece7;
   8   width: 100%;
   9 }
  10
  11 /* Tweaks to the layout when promoted */
  12 /* Custom */
  13 @media screen and (min-width: 40rem) { /* 640px */
  14   .view-promoted-items--single .node--view-mode-highlighted-top {
  15     display: flex;
  16   }
  17 }
  18 /* Large */
  19 @media screen and (min-width: 60rem) { /* 960px */
  20   .view-promoted-items--single .node--view-mode-highlighted-top {
  21     flex-direction: column;
  22   }
  23 }
  24
  25 /* Custom */
  26 @media screen and (min-width: 40rem) { /* 640px */
  27   .view-promoted-items--single .node--view-mode-highlighted-top .node__content {
  28     flex: 1 0 50%;
  29   }
  30 }
  31
  32 /* Large */
  33 @media screen and (min-width: 60rem) { /* 960px */
  34   .view-promoted-items--single .node--view-mode-highlighted-top .node__meta {
  35     order: -1;
  36   }
  37 }
  38
  39 .node--view-mode-highlighted-top .node__meta {
  40   padding: 1.5rem;
  41 }
  42
  43 .node--view-mode-highlighted-top .node__title {
  44   font-weight: normal;
  45   margin-bottom: 1rem;
  46 }
  47
  48 .node--view-mode-highlighted-top .field--name-title {
  49   font-family: 'Scope One', Georgia, serif;
  50   font-size: 1.424rem;
  51   font-weight: 400;
  52 }
  53
  54 .node--view-mode-highlighted-top .node__title .node__link {
  55   color: #000;
  56   text-decoration: none;
  57   background-color: inherit;
  58 }
  59
  60 .node--view-mode-highlighted-top .node__title .node__link:focus,
  61 .node--view-mode-highlighted-top .node__title .node__link:hover {
  62   color: #000;
  63   text-decoration: underline;
  64 }
  65
  66 .node--view-mode-highlighted-top .node__link .field--name-title {
  67   color: #000;
  68   text-decoration: none;
  69 }
  70
  71 .node--view-mode-highlighted-top .field--name-field-image img {
  72   display: block;
  73   width: 100%;
  74 }
  75
  76 .node--view-mode-highlighted-top .field--name-field-difficulty {
  77   color: #5f635d;
  78   font-size: 0.889rem;
  79   margin-bottom: 0.5rem;
  80 }