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

Merge pull request #162 from offen/development

Browse Source 
Add customize section
This commit is contained in:
Hendrik Niefeld 2021-05-03 08:35:26 +02:00 committed by GitHub
commit 3d28d7f457
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 151 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
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,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;

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

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

After

Width:  |  Height:  |  Size: 608 B

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

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

After

Width:  |  Height:  |  Size: 617 B

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

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

After

Width:  |  Height:  |  Size: 651 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: 11 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">

97
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 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="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>
</div>
<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 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>