offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-10-18 12:10:25 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Update may 1
This commit is contained in:
Hendrik Niefeld 2021-05-02 22:32:04 +02:00 committed by GitHub
commit 2c90b0c333
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 152 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,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 {
top: 1rem;
left: -2rem;
.bg-customize-a {
top: 14rem;
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;
left: 43rem;
width: 300px;
top: 4.5rem;
left: 35rem;
width: 400px;
}
.bg-localize-marker {
top: -0.5rem;
left: 4rem;
.bg-customize-a {
top: 5rem;
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;

9
homepage/theme/static/images/gfx-customize-a.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 642 B

9
homepage/theme/static/images/gfx-customize-b.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 645 B

9
homepage/theme/static/images/gfx-customize-c.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 640 B

BIN
homepage/theme/static/images/gfx-localize-marker.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

BIN
homepage/theme/static/images/gfx-localize.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 14 KiB

2
homepage/theme/templates/getstarted.html
View File

@ -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">

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

@ -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="h-100 bg-pattern">
<div class="w-100 flex flex-wrap justify-center">
<div class="wx24-metrics center">
<p class="f3 lh-solid ma0 ml0 ml5-l mt5 mb4">
<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 ml0 ml5-l w-100 w-60-l mb2">
<i>Offen is currently available in</i> English, German <i>and</i> French.
<p class="ma0 mb2">
<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>
<!-- LOCALIZE B -->
<!-- CUSTOMIZE -->
<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 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>
<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>