2
0
mirror of https://github.com/offen/website.git synced 2024-10-18 12:10:25 +02:00

simplify backgrounds

This commit is contained in:
Hendrik Niefeld 2020-04-26 20:06:13 +02:00
parent 0b19a193ec
commit 324122aa57
5 changed files with 62 additions and 58 deletions

View File

@ -627,12 +627,11 @@ BACKROUND IMAGES
background-size: 640px 480px;
transform: rotate(180deg);
}
#bg-yellow-pattern {
background: url(/theme/images/gfx-bg-yellow-pattern.svg) #BBD9D3 14rem -1rem;
}
#bg-mint-pattern {
background: url(/theme/images/gfx-bg-mint-pattern.svg) #BBD9D3 1rem 2rem;
#bg-pattern {
background: url(/theme/images/gfx-bg-pattern.svg) 1rem 2rem;
}
#bg-explainer {
background:
url(/theme/images/gfx-bg-explainer.svg) top center repeat-x,

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 21 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 32 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 46 KiB

View File

@ -30,66 +30,70 @@
</div>
</div>
<div class="w-100 overflow-hidden" id="bg-mint-pattern">
<div class="mw8 flex flex-wrap justify-center center tc">
<div class="w-100 overflow-hidden cclr-bg-mint-mid">
<div id="bg-pattern">
<div class="w-100 w-third-l cclr-bg-mint-fade-a">
<div class="hx-feature">
<div class="mw8 flex flex-wrap justify-center center tc">
<div class="relative">
<div class="absolute bg-feature-1">
<img src="/theme/images/gfx-feature-1.png" alt="feature-2" width="640px" height="480px">
<div class="w-100 w-third-l cclr-bg-mint-fade-a">
<div class="hx-feature">
<div class="relative">
<div class="absolute bg-feature-1">
<img src="/theme/images/gfx-feature-1.png" alt="feature-2" width="640px" height="480px">
</div>
</div>
<h2 class="f2 normal lh-solid ma0 mb3 pt5">
<em class="em-mint-1">
Free & Open
</em>
</h2>
<p class="wx18 center ma0">
Our open source code can be fully audited by the community. It will always be available for free. Seriously.
</p>
</div>
</div>
<div class="w-100 w-third-l cclr-bg-mint-fade-b">
<div class="hx-feature" id="bg-feature-2">
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-2">
<em class="em-mint-1">
Self hosted
</em>
</h2>
<p class="wx18 center ma0">
Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data.
</p>
</div>
<h2 class="f2 normal lh-solid ma0 mb3 pt5">
<em class="em-mint-1">
Free & Open
</em>
</h2>
<p class="wx18 center ma0">
Our open source code can be fully audited by the community. It will always be available for free. Seriously.
</p>
</div>
</div>
<div class="w-100 w-third-l cclr-bg-mint-fade-b">
<div class="hx-feature" id="bg-feature-2">
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-2">
<em class="em-mint-1">
Self hosted
</em>
</h2>
<p class="wx18 center ma0">
Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data.
</p>
</div>
</div>
<div class="w-100 w-third-l cclr-bg-mint-fade-a">
<div class="hx-feature">
<div class="w-100 w-third-l cclr-bg-mint-fade-a">
<div class="hx-feature">
<div class="relative">
<div class="absolute bg-feature-3">
<img src="/theme/images/gfx-feature-3.png" alt="feature-3" width="640px" height="480px">
<div class="relative">
<div class="absolute bg-feature-3">
<img src="/theme/images/gfx-feature-3.png" alt="feature-3" width="640px" height="480px">
</div>
</div>
</div>
<div>
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3">
<em class="em-mint-1">
Fair & Secure
</em>
</h2>
<p class="wx18 center ma0">
Pay respect to your website visitors. Gain valuable insights at the same time. All data is encrypted end-to-end.
</p>
</div>
<div>
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3">
<em class="em-mint-1">
Fair & Secure
</em>
</h2>
<p class="wx18 center ma0">
Pay respect to your website visitors. Gain valuable insights at the same time. All data is encrypted end-to-end.
</p>
</div>
</div>
</div>
</div>
</div>
@ -117,9 +121,9 @@
<div class="mw8 center flex flex-wrap justify-center">
<!-- COMPARE A -->
<div class="w-50-l w-100">
<div class="w-50-l w-100 cclr-bg-yellow-mid">
<div id="bg-yellow-pattern">
<div id="">
<div class="w-100 dib">
<div class="wx24 center">
@ -171,7 +175,7 @@
<div class="w-100 dn db-l h3 bg-white">
</div>
<div class="w-100 dib" id="bg-mint-pattern">
<div class="w-100 dib cclr-bg-mint-mid">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb3">
Benefits for your users