offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-11-22 17:10:29 +01:00
Code Issues Projects Releases Wiki Activity

update Localize section, add Customize section basics

Browse Source
This commit is contained in:
Hendrik Niefeld 2021-05-01 21:45:27 +02:00
parent 83fc4920fd
commit f1c1cf4037
2 changed files with 50 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
homepage/theme/static/css/fix.css
View File

@ -14,7 +14,6 @@ COLORS
.cclr-bg-yellow-bright-very { .cclr-bg-yellow-bright-very {
background-color: #F9F7F2; background-color: #F9F7F2;
} }
/* Mint */ /* Mint */
.cclr-bg-mint-dark { .cclr-bg-mint-dark {
background-color: #9BC5BC; background-color: #9BC5BC;
@ -51,6 +50,9 @@ COLORS
/* White */ /* White */
.cclr-bg-white-fade-end {
background-color: #f3f0e7;
}
.cclr-bg-white-dark { .cclr-bg-white-dark {
background-color: #f9f7f2; background-color: #f9f7f2;
} }
@ -126,8 +128,8 @@ LAYOUT
.hx-compare-c, .hx-compare-c,
.hx-compare-d, .hx-compare-d,
.hx-metrics, .hx-metrics,
.hx-localize-a, .hx-localize,
.hx-localize-b, .hx-customize,
.hx-difference { .hx-difference {
height: 100%; height: 100%;
} }
@ -169,11 +171,11 @@ LAYOUT
.hx-metrics { .hx-metrics {
height: 132rem; height: 132rem;
} }
.hx-localize-a { .hx-localize {
height: 14rem; height: 24rem;
} }
.hx-localize-b { .hx-customize {
height: 17rem; height: 24rem;
} }
.hx-difference { .hx-difference {
height: 33rem; height: 33rem;
@ -484,11 +486,6 @@ STACKING IMAGES
width: 220px; width: 220px;
z-index : 560; z-index : 560;
} }
.bg-localize-marker {
top: 2rem;
left: -1.8rem;
z-index : 561;
}
.bg-cta-pfeil { .bg-cta-pfeil {
top: -13rem; top: -13rem;
left: 66%; left: 66%;
@ -511,11 +508,8 @@ STACKING IMAGES
left: calc(100% - 30rem); left: calc(100% - 30rem);
} }
.bg-localize { .bg-localize {
left: calc(100% - 22rem); top: -4rem;
} left: calc(100% - 26rem);
.bg-localize-marker {
top: 1rem;
left: -2rem;
} }
.bg-cta-pfeil { .bg-cta-pfeil {
top: -14rem; top: -14rem;
@ -534,14 +528,10 @@ STACKING IMAGES
left: calc(100% - 20rem); left: calc(100% - 20rem);
} }
.bg-localize { .bg-localize {
top: 6rem; top: 4rem;
left: 43rem; left: 38rem;
width: 300px; width: 300px;
} }
.bg-localize-marker {
top: -0.5rem;
left: 4rem;
}
.bg-cta-pfeil { .bg-cta-pfeil {
top: -12rem; top: -12rem;
left: 66%; left: 66%;

67
homepage/theme/templates/index.html
View File

@ -504,62 +504,55 @@
</div> </div>
</div> </div>
<!-- LOCALIZE A --> <!-- LOCALIZE -->
<div class="w-100"> <div class="w-100">
<div class="relative"> <div class="relative">
<div class="absolute bg-localize"> <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="300px">
</div> </div>
</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> <em>
Localize Localize
</em> </em>
</p> </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>
<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. <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>
</div> <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>
</div>
</div>
</div>
<!-- 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">
<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>
<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>
</div> </div>
<div class="w-50 dn db-l h4 cclr-bg-white-fade-end">
</div>
</div>
<!-- CUSTOMIZE -->
<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">
<em>
Customize
</em>
</p>
<p class="ma0 mb7 mb0-l">
The Offen consent banner <i class="i-on-yellow">is customizable in color, shape and basic font specifications to</i> match your existing design.
</p>
</div>
</div> </div>
</div> </div>