Merge pull request #160 from offen/update-may-1

Update may 1

homepage/theme/static/css/fix.css

@@ -14,7 +14,6 @@ COLORS
 .cclr-bg-yellow-bright-very {
 	 background-color: #F9F7F2;
 }
-
 /* Mint */
 .cclr-bg-mint-dark {
 	 background-color: #9BC5BC;
@@ -51,6 +50,9 @@ COLORS
 
 
 /* White */
+.cclr-bg-white-fade-end {
+	background-color: #f3f0e7;
+}
 .cclr-bg-white-dark {
 	background-color: #f9f7f2;
 }
@@ -126,11 +128,14 @@ LAYOUT
 .hx-compare-c,
 .hx-compare-d,
 .hx-metrics,
-.hx-localize-a,
+.hx-localize,
-.hx-localize-b,
+.hx-customize,
 .hx-difference {
 	height: 100%;
 }
+.mx-customize {
+	margin: 0 0 19.5rem 0;
+}
 @media only screen and (min-width: 30em) {
 	.wx24,
 	.wx24-metrics {
@@ -152,6 +157,9 @@ LAYOUT
 	.hx-metrics {
 		height: 128rem;
 	}
+	.mx-customize {
+		margin: 0 0 18rem 0;
+	}
 }
 @media only screen and (min-width: 60em) {
 	.wx24-metrics {
@@ -169,11 +177,14 @@ LAYOUT
 	.hx-metrics {
 		height: 132rem;
 	}
-	.hx-localize-a {
+	.hx-localize {
-		height: 14rem;
+		height: 24rem;
 	}
-	.hx-localize-b {
+	.hx-customize {
-		height: 17rem;
+		height: 28rem;
+	}
+	.mx-customize {
+		margin: 0;
 	}
 	.hx-difference {
 		height: 33rem;
@@ -479,20 +490,34 @@ STACKING IMAGES
 	z-index : 550;
 }
 .bg-localize {
-	top: -2.2rem;
+	top: -3.3rem;
 	left: calc(100% - 16rem);
-	width: 220px;
+	width: 250px;
 	z-index : 560;
 }
-.bg-localize-marker {
+.bg-customize-a {
-	top: 2rem;
+	top: 14rem;
-	left: -1.8rem;
+	left: 7%;
-	z-index : 561;
+	width: 250px;
+	z-index : 572;
+}
+.bg-customize-b {
+	top: 18.5rem;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 250px;
+	z-index : 571;
+}
+.bg-customize-c {
+	top: 22.8rem;
+	right: 7%;
+	width: 250px;
+	z-index : 570;
 }
 .bg-cta-pfeil {
 	top: -13rem;
 	left: 66%;
-	z-index : 570;
+	z-index : 580;
 }
 
 @media only screen and (min-width: 30em) {
@@ -511,11 +536,24 @@ STACKING IMAGES
 		left: calc(100% - 30rem);
 	}
 	.bg-localize {
-		left: calc(100% - 22rem);
+		top: -4.3rem;
+		left: calc(100% - 26rem);
+		width: 300px;
 	}
-	.bg-localize-marker {
+	.bg-customize-a {
-		top: 1rem;
+		top: 14rem;
-		left: -2rem;
+		left: calc(30% - 6rem);
+		width: 250px;
+	}
+	.bg-customize-b {
+		top: 17.5rem;
+		left: calc(30% + 5rem);
+		width: 250px;
+	}
+	.bg-customize-c {
+		top: 21.7rem;
+		left: calc(30% + 1rem);
+		width: 250px;
 	}
 	.bg-cta-pfeil {
 		top: -14rem;
@@ -534,13 +572,24 @@ STACKING IMAGES
 		left: calc(100% - 20rem);
 	}
 	.bg-localize {
-		top: 6rem;
+		top: 4.5rem;
-		left: 43rem;
+		left: 35rem;
-		width: 300px;
+		width: 400px;
 	}
-	.bg-localize-marker {
+	.bg-customize-a {
-		top: -0.5rem;
+		top: 5rem;
-		left: 4rem;
+		left: 28rem;
+		width: 330px;
+	}
+	.bg-customize-b {
+		top: 10.5rem;
+		left: 48rem;
+		width: 330px;
+	}
+	.bg-customize-c {
+		top: 16rem;
+		left: 22rem;
+		width: 330px;
 	}
 	.bg-cta-pfeil {
 		top: -12rem;

homepage/theme/static/images/gfx-customize-a.svg

@@ -0,0 +1,9 @@
+<svg width="331" height="102" viewBox="0 0 331 102" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="330.377" height="101.153" rx="2" fill="white"/>
+<rect x="170.432" y="62.4813" width="146.077" height="25.9201" fill="#19A974"/>
+<rect x="210.463" y="72.6014" width="70.1542" height="7.34172" fill="white"/>
+<rect x="13.8677" y="62.4813" width="144.579" height="25.9201" fill="#19A974"/>
+<rect x="66.0754" y="72.6014" width="38.3401" height="7.34172" fill="white"/>
+<rect x="43.2345" y="19.578" width="249.618" height="7.34172" fill="#CCCCCC"/>
+<rect x="26.1039" y="37.5243" width="283.88" height="7.34172" fill="#CCCCCC"/>
+</svg>

homepage/theme/static/images/gfx-customize-b.svg

@@ -0,0 +1,9 @@
+<svg width="331" height="102" viewBox="0 0 331 102" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="330.377" height="101.153" rx="2" fill="#19A974"/>
+<rect x="170.432" y="62.4813" width="146.077" height="25.9201" fill="white"/>
+<rect x="210.463" y="72.6014" width="70.1542" height="7.34172" fill="#19A974"/>
+<rect x="13.8677" y="62.4813" width="144.579" height="25.9201" fill="white"/>
+<rect x="66.0754" y="72.6014" width="38.3401" height="7.34172" fill="#19A974"/>
+<rect x="43.2345" y="19.5779" width="249.618" height="7.34172" fill="#137752"/>
+<rect x="26.1039" y="37.5244" width="283.88" height="7.34172" fill="#137752"/>
+</svg>

homepage/theme/static/images/gfx-customize-c.svg

@@ -0,0 +1,9 @@
+<svg width="331" height="102" viewBox="0 0 331 102" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="330.377" height="101.153" rx="2" fill="#CCCCCC"/>
+<rect x="170.432" y="62.4813" width="146.077" height="25.9201" fill="white"/>
+<rect x="210.463" y="72.6014" width="70.1542" height="7.34172" fill="#19A974"/>
+<rect x="13.8677" y="62.4813" width="144.579" height="25.9201" fill="white"/>
+<rect x="66.0754" y="72.6014" width="38.3401" height="7.34172" fill="#19A974"/>
+<rect x="43.2345" y="19.578" width="249.618" height="7.34172" fill="white"/>
+<rect x="26.1039" y="37.5243" width="283.88" height="7.34172" fill="white"/>
+</svg>

homepage/theme/templates/getstarted.html

@@ -45,7 +45,7 @@
       <hr class="ma0 mb5 b--black-05">
 
       <h3 class="f3 normal ma0 mb5">
-        Read the docs
+        Read the Docs
       </h3>
       <div class="flex flex-column items-center">
         <p class="lh-title ma0 mb2 gray">

homepage/theme/templates/index.html

@@ -504,61 +504,66 @@
         </div>
       </div>
 
-      <!-- LOCALIZE A -->
+      <!-- LOCALIZE -->
       <div class="w-100">
-
         <div class="relative">
           <div class="absolute bg-localize">
-            <img src="/theme/images/gfx-localize.png" alt="languages" width="300px">
+            <img src="/theme/images/gfx-localize.png" alt="languages" width="400px">
           </div>
         </div>
-
-        <div class="w-100 hx-localize-a dib cclr-bg-white-fade">
-          <div class="h-100 bg-pattern">
-
-            <div class="wx24-metrics center">
-
-              <p class="f3 lh-solid ma0 ml0 ml5-l mt5 mb4">
-                <em>
-                  Localize
-                </em>
-              </p>
-              <p class="ma0 ml0 ml5-l w-100 w-60-l mb2">
-                <i>Offen is currently available in</i> English, German <i>and</i> French.
-              </p>
-              <p class="ma0 ml0 ml5-l w-100 w-60-l mb4">
-                <i>Our</i> consent banner and the Auditorium <i>for operators as well as users can be displayed</i> in the respective locale.
-              </p>
-            </div>
-
-          </div>
-        </div>
-
       </div>
-      <!-- LOCALIZE B -->
+
+      <div class="w-100 flex flex-wrap justify-center">
+
+        <div class="w-100 w-50-l hx-localize dib cclr-bg-white-fade">
+          <div class="wx24 center">
+            <p class="f3 lh-solid ma0 mt5 mb4">
+              <em>
+                Localize
+              </em>
+            </p>
+            <p class="ma0 mb2">
+              <i>Offen is available in</i> English, German <i>and</i> French.
+            </p>
+            <p class="ma0 mb2">
+              <i>Our</i> consent banner and the Auditorium <i>for operators as well as users can be displayed</i> in the respective locale.
+            </p>
+            <p class="ma0 mb5 mb0-l">
+              <i>Support fair web analytics by</i> contributing other language versions. <a class="b link dim gray" href="mailto:hioffen@posteo.de">Request an invitation</a> <i>to our translation workflow.</i>
+            </p>
+          </div>
+
+        </div>
+        <div class="w-50 dn db-l h4 cclr-bg-white-fade-end">
+
+        </div>
+      </div>
+
+      <!-- CUSTOMIZE -->
       <div class="w-100">
+        <div class="relative">
+          <div class="absolute bg-customize-a">
+            <img class="shadow-4" src="/theme/images/gfx-customize-a.svg" alt="customize-a" width="330px">
+          </div>
+          <div class="absolute bg-customize-b">
+            <img class="shadow-4" src="/theme/images/gfx-customize-b.svg" alt="customize-b" width="330px">
+          </div>
+          <div class="absolute bg-customize-c">
+            <img class="shadow-4" src="/theme/images/gfx-customize-c.svg" alt="customize-c" width="330px">
+          </div>
+        </div>
+      </div>
 
-        <div class="w-100 hx-localize-b dib cclr-bg-white-fade">
+      <div class="w-100 flex flex-wrap">
-          <div class="h-100 bg-pattern">
-
-            <div class="wx24-metrics center">
-              <div class="relative">
-                <div class="absolute bg-localize-marker">
-                  <img src="/theme/images/gfx-localize-marker.png" alt="marker" width="50px">
-                </div>
-              </div>
-              <p class="ma0 ml0 pl4 pl6-l w-100 w-60-l mt4 mb2">
-                Contributions welcome
-              </p>
-              <p class="ma0 ml0 pl4 pl6-l w-100 w-60-l mb2">
-                <i>Support fair web analytics by contributing Spanish, Portuguese and other language versions. Feel free to <a class="b link dim gray" href="mailto:hioffen@posteo.de">request an invitation</a> to our translation workflow.</i>
-              </p>
-              <p class="ma0 ml0 pl4 pl6-l w-100 w-60-l mb5">
-                <i>You are invited to collaborate on other areas of the application as well. Check out our in-depth <a class="b link dim gray" href="https://docs.offen.dev/developing-offen/" target="_blank" rel="noopener">developer guide.</a></i>
-              </p>
-
-            </div>
 
+        <div class="w-100 w-50-l hx-customize dib cclr-bg-yellow-mid">
+          <div class="wx24 center pr6-l">
+            <p class="f3 lh-solid ma0 mt5 mb4">
+              Customize
+            </p>
+            <p class="ma0 mx-customize mb0-l">
+              <i class="i-on-yellow">The Offen</i> consent banner is customizable in color, shape and basic font specifications <i class="i-on-yellow">to match your design.</i>
+            </p>
           </div>
         </div>