www.aleph1.co.uk Git - yaffs-website/blob - web/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css

   1 /**
   2  * @file
   3  * This file is used to style the banner block.
   4  */
   5
   6 .block-type-banner-block {
   7   background-size: 0 0;
   8 }
   9
  10 .block-type-banner-block .summary {
  11   margin: 1em;
  12 }
  13
  14 .block-type-banner-block .field--name-field-title {
  15   font-family: 'Scope One', Georgia, serif;
  16   font-size: 1.424rem;
  17   font-weight: 400;
  18   margin: 0 0 1.07em 0;
  19 }
  20
  21 .block-type-banner-block .field--name-field-summary {
  22   margin-bottom: 1.28em;
  23 }
  24
  25 .block-type-banner-block .field--name-field-content-link a {
  26   display: inline-block;
  27   padding: 0.5em 1.5em 0.4em;
  28   border: 0;
  29   border-radius: 4px;
  30   background-color: #d93760;
  31   color: #fff;
  32   cursor: pointer;
  33   text-align: center;
  34   text-decoration: none;
  35   font-family: 'Scope One', Georgia, serif;
  36   font-size: 1.2rem;
  37   font-weight: 400;
  38   font-weight: normal;
  39   transition: background-color 0.5s ease;
  40 }
  41
  42 .block-type-banner-block .field--name-field-content-link a:focus,
  43 .block-type-banner-block .field--name-field-content-link a:hover {
  44   background-color: #00836d;
  45   color: #fff;
  46   outline: 2px solid currentColor;
  47   outline-offset: -2px;
  48 }
  49
  50 /* 768px */
  51 @media screen and (min-width: 48rem) { /* 768px */
  52   .block-type-banner-block {
  53     background-color: #464646;
  54     background-size: cover;
  55     background-position: left center;
  56     background-repeat: no-repeat;
  57     /* Image ratio 7:3 */
  58   }
  59
  60   .block-type-banner-block .block-inner {
  61     max-width: 1200px;
  62     margin: 0 auto;
  63     display: flex;
  64     padding: 0 1em;
  65     min-height: 43vw;
  66     align-items: center;
  67   }
  68
  69   .block-type-banner-block .summary {
  70     margin: 0;
  71     flex: 0 0 30%;
  72     color: #fff;
  73   }
  74
  75   .block-type-banner-block .field--name-field-banner-image {
  76     /**
  77      * We need to ensure that the alt text on the image is accessible to
  78      * screenreaders, so, when on large screens, let's give this the same CSS
  79      * as the .visually-hidden class has.
  80      */
  81     position: absolute !important;
  82     clip: rect(1px, 1px, 1px, 1px);
  83     overflow: hidden;
  84     height: 1px;
  85     width: 1px;
  86     word-wrap: normal;
  87   }
  88 }