Updated to Drupal 8.5. Core Media not yet in use.

[yaffs-website] / web / core / profiles / demo_umami / themes / umami / css / components / blocks / banner / banner.css

diff --git a/web/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css b/web/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
new file mode 100644 (file)
index 0000000..4bf055a
--- /dev/null
+++ b/web/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
@@ -0,0 +1,88 @@
+/**
+ * @file
+ * This file is used to style the banner block.
+ */
+
+.block-type-banner-block {
+  background-size: 0 0;
+}
+
+.block-type-banner-block .summary {
+  margin: 1em;
+}
+
+.block-type-banner-block .field--name-field-title {
+  font-family: 'Scope One', Georgia, serif;
+  font-size: 1.424rem;
+  font-weight: 400;
+  margin: 0 0 1.07em 0;
+}
+
+.block-type-banner-block .field--name-field-summary {
+  margin-bottom: 1.28em;
+}
+
+.block-type-banner-block .field--name-field-content-link a {
+  display: inline-block;
+  padding: 0.5em 1.5em 0.4em;
+  border: 0;
+  border-radius: 4px;
+  background-color: #d93760;
+  color: #fff;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  font-family: 'Scope One', Georgia, serif;
+  font-size: 1.2rem;
+  font-weight: 400;
+  font-weight: normal;
+  transition: background-color 0.5s ease;
+}
+
+.block-type-banner-block .field--name-field-content-link a:focus,
+.block-type-banner-block .field--name-field-content-link a:hover {
+  background-color: #00836d;
+  color: #fff;
+  outline: 2px solid currentColor;
+  outline-offset: -2px;
+}
+
+/* 768px */
+@media screen and (min-width: 48rem) { /* 768px */
+  .block-type-banner-block {
+    background-color: #464646;
+    background-size: cover;
+    background-position: left center;
+    background-repeat: no-repeat;
+    /* Image ratio 7:3 */
+  }
+
+  .block-type-banner-block .block-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    padding: 0 1em;
+    min-height: 43vw;
+    align-items: center;
+  }
+
+  .block-type-banner-block .summary {
+    margin: 0;
+    flex: 0 0 30%;
+    color: #fff;
+  }
+
+  .block-type-banner-block .field--name-field-banner-image {
+    /**
+     * We need to ensure that the alt text on the image is accessible to
+     * screenreaders, so, when on large screens, let's give this the same CSS
+     * as the .visually-hidden class has.
+     */
+    position: absolute !important;
+    clip: rect(1px, 1px, 1px, 1px);
+    overflow: hidden;
+    height: 1px;
+    width: 1px;
+    word-wrap: normal;
+  }
+}