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

edit Customize section

Browse Source
This commit is contained in:
Hendrik Niefeld 2021-05-02 22:30:19 +02:00
parent f1c1cf4037
commit 7db3f7034c
8 changed files with 113 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -133,6 +133,9 @@ LAYOUT
.hx-difference {
height: 100%;
}
.mx-customize {
margin: 0 0 19.5rem 0;
}
@media only screen and (min-width: 30em) {
.wx24,
.wx24-metrics {
@ -154,6 +157,9 @@ LAYOUT
.hx-metrics {
height: 128rem;
}
.mx-customize {
margin: 0 0 18rem 0;
}
}
@media only screen and (min-width: 60em) {
.wx24-metrics {
@ -175,7 +181,10 @@ LAYOUT
height: 24rem;
}
.hx-customize {
height: 24rem;
height: 28rem;
}
.mx-customize {
margin: 0;
}
.hx-difference {
height: 33rem;
@ -481,15 +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-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) {
@ -508,8 +536,24 @@ STACKING IMAGES
left: calc(100% - 30rem);
}
.bg-localize {
top: -4rem;
top: -4.3rem;
left: calc(100% - 26rem);
width: 300px;
}
.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;
@ -528,9 +572,24 @@ STACKING IMAGES
left: calc(100% - 20rem);
}
.bg-localize {
top: 4rem;
left: 38rem;
width: 300px;
top: 4.5rem;
left: 35rem;
width: 400px;
}
.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">

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

@ -508,7 +508,7 @@
<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>
@ -540,17 +540,29 @@
</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="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>
</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">
<em>
Customize
</em>
Customize
</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 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>