Merge pull request #162 from offen/development

Add customize section

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,21 @@ 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);
+	}
+	.bg-customize-b {
+		top: 17.5rem;
+		left: calc(30% + 5rem);
+	}
+	.bg-customize-c {
+		top: 21.7rem;
+		left: calc(30% + 1rem);
 	}
 	.bg-cta-pfeil {
 		top: -14rem;
@@ -534,13 +569,24 @@ STACKING IMAGES
 		left: calc(100% - 20rem);
 	}
 	.bg-localize {
-		top: 6rem;
+		top: 4.5rem;
-		left: 43rem;
+		left: 35rem;
+		width: 400px;
+	}
+	.bg-customize-a {
+		top: 5rem;
+		left: 28rem;
 		width: 300px;
 	}
-	.bg-localize-marker {
+	.bg-customize-b {
-		top: -0.5rem;
+		top: 10.5rem;
-		left: 4rem;
+		left: 46rem;
+		width: 300px;
+	}
+	.bg-customize-c {
+		top: 15.5rem;
+		left: 22rem;
+		width: 300px;
 	}
 	.bg-cta-pfeil {
 		top: -12rem;

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

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 331 102" xmlns="http://www.w3.org/2000/svg">
+<rect width="330.38" height="101.15" rx="2" fill="#fff"/>
+<rect x="170.43" y="62.481" width="146.08" height="25.92" fill="#19A974"/>
+<rect x="210.46" y="72.601" width="70.154" height="7.3417" fill="#fff"/>
+<rect x="13.868" y="62.481" width="144.58" height="25.92" fill="#19A974"/>
+<rect x="66.075" y="72.601" width="38.34" height="7.3417" fill="#fff"/>
+<rect x="43.234" y="19.578" width="249.62" height="7.3417" fill="#ccc"/>
+<rect x="26.104" y="37.524" width="283.88" height="7.3417" fill="#ccc"/>
+</svg>

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

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 331 102" xmlns="http://www.w3.org/2000/svg">
+<rect width="330.38" height="101.15" rx="2" fill="#19A974"/>
+<rect x="170.43" y="62.481" width="146.08" height="25.92" fill="#fff"/>
+<rect x="210.46" y="72.601" width="70.154" height="7.3417" fill="#19A974"/>
+<rect x="13.868" y="62.481" width="144.58" height="25.92" fill="#fff"/>
+<rect x="66.075" y="72.601" width="38.34" height="7.3417" fill="#19A974"/>
+<rect x="43.234" y="19.578" width="249.62" height="7.3417" fill="#137752"/>
+<rect x="26.104" y="37.524" width="283.88" height="7.3417" fill="#137752"/>
+</svg>

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

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 331 102" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="328.38" height="99.153" rx="1" fill="#ccc" stroke="#fff" stroke-width="2"/>
+<rect x="170.43" y="62.481" width="146.08" height="25.92" fill="#fff"/>
+<rect x="210.46" y="72.601" width="70.154" height="7.3417" fill="#19A974"/>
+<rect x="13.868" y="62.481" width="144.58" height="25.92" fill="#fff"/>
+<rect x="66.075" y="72.601" width="38.34" height="7.3417" fill="#19A974"/>
+<rect x="43.234" y="19.578" width="249.62" height="7.3417" fill="#fff"/>
+<rect x="26.104" y="37.524" width="283.88" height="7.3417" fill="#fff"/>
+</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>
 
-        <div class="w-100 hx-localize-a dib cclr-bg-white-fade">
+      <div class="w-100 flex flex-wrap justify-center">
-          <div class="h-100 bg-pattern">
 
-            <div class="wx24-metrics 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 ml0 ml5-l mt5 mb4">
+            <p class="f3 lh-solid ma0 mt5 mb4">
               <em>
                 Localize
               </em>
             </p>
-              <p class="ma0 ml0 ml5-l w-100 w-60-l mb2">
+            <p class="ma0 mb2">
-                <i>Offen is currently available in</i> English, German <i>and</i> French.
+              <i>Offen is available in</i> English, German <i>and</i> French.
             </p>
-              <p class="ma0 ml0 ml5-l w-100 w-60-l mb4">
+            <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>
 
-      </div>
+      <!-- CUSTOMIZE -->
-      <!-- LOCALIZE B -->
       <div class="w-100">
-
-        <div class="w-100 hx-localize-b dib cclr-bg-white-fade">
-          <div class="h-100 bg-pattern">
-
-            <div class="wx24-metrics center">
         <div class="relative">
-                <div class="absolute bg-localize-marker">
+          <div class="absolute bg-customize-a">
-                  <img src="/theme/images/gfx-localize-marker.png" alt="marker" width="50px">
+            <img class="shadow-4" src="/theme/images/gfx-customize-a.svg" alt="customize-a" width="300px">
+          </div>
+          <div class="absolute bg-customize-b">
+            <img class="shadow-4" src="/theme/images/gfx-customize-b.svg" alt="customize-b" width="300px">
+          </div>
+          <div class="absolute bg-customize-c">
+            <img class="shadow-4" src="/theme/images/gfx-customize-c.svg" alt="customize-c" width="300px">
           </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 flex flex-wrap">
+
+        <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>