style landing page modules and start reorganising css

2017-10-02 13:34:34 +02:00
parent 3459c4c32c
commit e955555f1a
13 changed files with 334 additions and 18 deletions
--- a/assets/stylesheets/landing-page/modules/hero-image.css
+++ b/assets/stylesheets/landing-page/modules/hero-image.css
@@ -0,0 +1,32 @@
+@block module-hero-image {
+  @element wrapper {
+    position: relative;
+    overflow: hidden;
+    max-height: 60vh;
+    border-radius: var(--border-radius);
+  }
+
+  @element image{
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  @element headline-wrapper {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @element headline {
+    color: #fff;
+    text-align: center;
+    font-size: 4.5vw;
+    text-shadow: 0px 3px 0px #b2a98f,
+                 0px 14px 10px rgba(0,0,0,0.15),
+                 0px 24px 2px rgba(0,0,0,0.1),
+                 0px 34px 30px rgba(0,0,0,0.1);
+  }
+}