diff --git a/homepage/theme/static/css/fix.css b/homepage/theme/static/css/fix.css index 5548360..6cf7c23 100644 --- a/homepage/theme/static/css/fix.css +++ b/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-b, +.hx-localize, +.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 { - height: 14rem; + .hx-localize { + height: 24rem; } - .hx-localize-b { - height: 17rem; + .hx-customize { + 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 { - top: 2rem; - left: -1.8rem; - z-index : 561; +.bg-customize-a { + top: 14rem; + left: 7%; + 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 { - top: 1rem; - left: -2rem; + .bg-customize-a { + top: 14rem; + 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; - left: 43rem; + top: 4.5rem; + left: 35rem; + width: 400px; + } + .bg-customize-a { + top: 5rem; + left: 28rem; width: 300px; } - .bg-localize-marker { - top: -0.5rem; - left: 4rem; + .bg-customize-b { + top: 10.5rem; + left: 46rem; + width: 300px; + } + .bg-customize-c { + top: 15.5rem; + left: 22rem; + width: 300px; } .bg-cta-pfeil { top: -12rem; diff --git a/homepage/theme/static/images/gfx-customize-a.svg b/homepage/theme/static/images/gfx-customize-a.svg new file mode 100644 index 0000000..d732d13 --- /dev/null +++ b/homepage/theme/static/images/gfx-customize-a.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/homepage/theme/static/images/gfx-customize-b.svg b/homepage/theme/static/images/gfx-customize-b.svg new file mode 100644 index 0000000..47e7c25 --- /dev/null +++ b/homepage/theme/static/images/gfx-customize-b.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/homepage/theme/static/images/gfx-customize-c.svg b/homepage/theme/static/images/gfx-customize-c.svg new file mode 100644 index 0000000..897415d --- /dev/null +++ b/homepage/theme/static/images/gfx-customize-c.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/homepage/theme/static/images/gfx-localize-marker.png b/homepage/theme/static/images/gfx-localize-marker.png deleted file mode 100644 index 3acf6c7..0000000 Binary files a/homepage/theme/static/images/gfx-localize-marker.png and /dev/null differ diff --git a/homepage/theme/static/images/gfx-localize.png b/homepage/theme/static/images/gfx-localize.png index 7fc3690..4cce8f5 100644 Binary files a/homepage/theme/static/images/gfx-localize.png and b/homepage/theme/static/images/gfx-localize.png differ diff --git a/homepage/theme/templates/getstarted.html b/homepage/theme/templates/getstarted.html index 6a22dd2..884f49a 100644 --- a/homepage/theme/templates/getstarted.html +++ b/homepage/theme/templates/getstarted.html @@ -45,7 +45,7 @@

- Read the docs + Read the Docs

diff --git a/homepage/theme/templates/index.html b/homepage/theme/templates/index.html index e551c43..40c59a8 100644 --- a/homepage/theme/templates/index.html +++ b/homepage/theme/templates/index.html @@ -504,61 +504,66 @@

- +
-
- languages + languages
- -
-
- -
- -

- - Localize - -

-

- Offen is currently available in English, German and French. -

-

- Our consent banner and the Auditorium for operators as well as users can be displayed in the respective locale. -

-
- -
-
-
- + +
+ +
+
+

+ + Localize + +

+

+ Offen is available in English, German and French. +

+

+ Our consent banner and the Auditorium for operators as well as users can be displayed in the respective locale. +

+

+ Support fair web analytics by contributing other language versions. Request an invitation to our translation workflow. +

+
+ +
+
+ +
+
+ +
+
+
+ customize-a +
+
+ customize-b +
+
+ customize-c +
+
+
-
-
- -
-
-
- marker -
-
-

- Contributions welcome -

-

- Support fair web analytics by contributing Spanish, Portuguese and other language versions. Feel free to request an invitation to our translation workflow. -

-

- You are invited to collaborate on other areas of the application as well. Check out our in-depth developer guide. -

- -
+
+
+
+

+ Customize +

+

+ The Offen consent banner is customizable in color, shape and basic font specifications to match your design. +