banner

css/components/landing_page.css

@@ -5,7 +5,31 @@ figure.logo--ilivesbooks {
   height: 300px;
   display: flex;
 }
+.logo--olivesbooks h1,
+.logo--olivesbooks h2 {
+  margin: 0;
+  text-shadow: 2px 2px black;
+  color: #fff;
+}
+
+.logo--olivesbooks h1 {
+  font-size: var(--h1-size);
+  border-bottom: 4px double;
+}
+
+.logo--olivesbooks h2 {
+  font-size: var(--h2-size);
+}
+
+@media (max-width: 800px) {
+  .logo--olivesbooks h1 {
+    font-size: clamp(2.5em, 9.5vw, 4em);
+  }
 
+  .logo--olivesbooks h2 {
+    font-size: clamp(1.8em, 5.2vw, 2.2em);
+  }
+}
 .page-node-type-landing-page #block-views-block-media-display-blocks-source {
   display: none;
 }
@@ -27,10 +51,8 @@ article.node.node--type-landing-page h2 {
 .path-frontpage .region--content {
   margin-bottom: 0;
 }
-#block-olivesbooks-views-block-front-page-featured-books-block-2
-  .view-content,
-#block-olivesbooks-views-block-front-page-featured-books-block-1
-  .view-content {
+#block-olivesbooks-views-block-front-page-featured-books-block-2 .view-content,
+#block-olivesbooks-views-block-front-page-featured-books-block-1 .view-content {
   /*display: none;*/
   .node__title {
     font-size: 1.1rem;

templates/includes/lp-banner.html.twig

@@ -2,7 +2,7 @@
   <div class="hero-section"
     style="background:url(/themes/custom/olivesbooks/images/bookshelf.webp) 50% no-repeat;background-size: cover;">
     <div class="logo-wrapper">
-      <figure class="logo--ilivesbooks">
+      <figure class="logo--olivesbooks">
         <h1>Test</h1>
         <h2>123</h2>
       </figure>