+
+
Willkommen
diff --git a/src/scss/style.scss b/src/scss/style.scss
index e52d76b..9859eea 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -4,6 +4,16 @@
#willkommen-banner {
height: calc(100vh - 64px);
+
+ .lead {
+ text-shadow: 0.075em 0.08em 0.1em rgba(0, 0, 0, 1);
+
+ background: rgba(255, 255, 255, 0.5);
+ }
+
+ .parallax img {
+ max-width: 110%;
+ }
}
#wohnung-banner {}
@@ -53,9 +63,27 @@ a:not([href^='#']) {
border-radius: 0;
}
+.masonry {
+ display: flex;
+ flex-grow: row wrap;
+ margin-left: -8px;
+
+ .masonry-brick {
+ flex: auto;
+ height: 250px;
+ min-height: 150px;
+ margin: 0 8px 0 0;
+ }
+}
+
@media only screen and (max-width:600px) {
#willkommen-banner {
height: calc(100vh - 56px);
+ max-height: 300px;
+
+ .parallax img {
+ max-width: 130%;
+ }
}
.heading-2,
diff --git a/src/style.css b/src/style.css
index 73afb0c..792be1c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,6 +3,11 @@
#willkommen-banner {
height: calc(100vh - 64px); }
+ #willkommen-banner .lead {
+ text-shadow: 0.075em 0.08em 0.1em black;
+ background: rgba(255, 255, 255, 0.5); }
+ #willkommen-banner .parallax img {
+ max-width: 110%; }
#footer-banner {
height: 90vh; }
@@ -38,9 +43,22 @@ a:not([href^='#']) {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 0; }
+.masonry {
+ display: flex;
+ flex-grow: row wrap;
+ margin-left: -8px; }
+ .masonry .masonry-brick {
+ flex: auto;
+ height: 250px;
+ min-height: 150px;
+ margin: 0 8px 0 0; }
+
@media only screen and (max-width: 600px) {
#willkommen-banner {
- height: calc(100vh - 56px); }
+ height: calc(100vh - 56px);
+ max-height: 300px; }
+ #willkommen-banner .parallax img {
+ max-width: 130%; }
.heading-2,
h2 {
font-size: 2.82rem; }