Floating image design 1 (#261)

* Floating image design 1 * Minor CSS change * Review Comments incorporated --------- Co-authored-by: piyushjindal <[email protected]>
hlxsites · Aug 8, 2024 · 122e873 · 122e873
1 parent 3516483
commit 122e873
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 0 deletions.
diff --git a/blocks/floating-images/design-1.css b/blocks/floating-images/design-1.css
@@ -0,0 +1,77 @@
+.design-1 .block.floating-images > div {
+  background-color: var(--white);
+}
+
+.design-1 .block.floating-images .content h2 {
+  font-size: 2rem;
+}
+
+@media (min-width: 900px) {
+  .design-1 .block.floating-images .image {
+    margin-top: 4.375rem;
+    margin-right: 4.375rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  .design-1 .block.floating-images .content h2 {
+    font-size: var(--heading-font-size-xxl);
+  } 
+}
+
+/**
+Theme Name: Traditional
+*/
+.design-1.traditional .block.floating-images .content h2 {
+  color: var(--primary-color);
+}
+
+.design-1.traditional .block.floating-images .content p {
+  color: var(--primary-color);
+}
+
+.design-1.traditional .block.floating-images .content a {
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  margin-top: 1rem;
+}
+
+.design-1.traditional .block.floating-images .content a:hover {
+  background-color: var(--primary-color);
+  color: var(--primary-light);
+}
+
+@media (min-width: 900px) {
+  .design-1.traditional .with-border .block.floating-images .image {
+    box-shadow: var(--primary-color) 4.375rem -4.375rem;
+  }
+}
+
+/*
+Theme Name: Black & White
+*/
+.design-1.black-white .block.floating-images .content h2 {
+  color: var(--black);
+}
+
+.design-1.black-white .block.floating-images .content p {
+  color: var(--black);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.design-1.black-white .block.floating-images .content a {
+  color: var(--black);
+  border: 1px solid var(--black);
+  margin-top: 1rem;
+}
+
+.design-1.black-white .block.floating-images .content a:hover {
+  background-color: var(--black);
+  color: var(--white);
+}
+
+@media (min-width: 900px) {
+  .design-1.black-white .with-border .block.floating-images .image {
+    box-shadow: var(--black) 4.375rem -4.375rem;
+  }
+}
diff --git a/blocks/floating-images/floating-images.css b/blocks/floating-images/floating-images.css
@@ -1,5 +1,6 @@
 /* styles for the floating images auto block */
 @import url('luxury-collection-template.css');
+@import url('./design-1.css');
 
 .block.floating-images {
   margin-bottom: 5em;
@@ -60,6 +61,17 @@
   line-height: var(--line-height-m);
 }
 
+.block.floating-images .content a {
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  margin-top: 1rem;
+}
+
+.block.floating-images .content a:hover {
+  background-color: var(--primary-color);
+  color: var(--primary-light);
+}
+
 @media screen and (min-width: 900px) {
   .block.floating-images > div {
     flex-direction: row;