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

layout tweeks, text emphasis

Browse Source
This commit is contained in:
Hendrik Niefeld 2020-04-27 08:01:30 +02:00
parent 324122aa57
commit b9ab5cfdd7
3 changed files with 174 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -168,7 +168,7 @@ LAYOUT
height: 24rem; height: 24rem;
} }
.hx-metrics { .hx-metrics {
height: 124rem; height: 128rem;
} }
} }
@ -182,7 +182,7 @@ LAYOUT
height: 50rem; height: 50rem;
} }
.hx-metrics { .hx-metrics {
height: 128rem; height: 132rem;
} }
} }
@ -254,11 +254,11 @@ LAYOUT
} }
@media only screen and (min-width: 60em) { @media only screen and (min-width: 60em) {
.stackbox-10 { .stackbox-10 {
top: -2rem; top: -6rem;
left: 34rem; left: 34rem;
} }
.stackbox-20 { .stackbox-20 {
top: 14rem; top: 10rem;
left: 6rem; left: 6rem;
} }
.stackbox-30 { .stackbox-30 {
@ -328,6 +328,13 @@ ul {
padding-inline-start: 1rem; padding-inline-start: 1rem;
} }
} }
i {
font-style: normal;
color: #777777;
}
/* ?????? */
.tracked-min { .tracked-min {
letter-spacing: .03em; letter-spacing: .03em;
} }
@ -568,7 +575,7 @@ STACKING IMAGES
z-index : 530; z-index : 530;
} }
.bg-metrics-bulb { .bg-metrics-bulb {
top: 7rem; top: 8.5rem;
left: calc(100% - 10rem); left: calc(100% - 10rem);
z-index : 550; z-index : 550;
} }
@ -608,7 +615,7 @@ STACKING IMAGES
left: -50%; left: -50%;
} }
.bg-metrics-bulb { .bg-metrics-bulb {
top: -1rem; top: -3rem;
left: calc(100% - 20rem); left: calc(100% - 20rem);
} }
.bg-cta-pfeil { .bg-cta-pfeil {
@ -629,7 +636,7 @@ BACKROUND IMAGES
} }
#bg-pattern { #bg-pattern {
background: url(/theme/images/gfx-bg-pattern.svg) 1rem 2rem; background: url(/theme/images/gfx-bg-pattern.svg) 8rem 2rem;
} }
#bg-explainer { #bg-explainer {

2
homepage/theme/static/images/gfx-bg-pattern.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

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

@ -50,7 +50,7 @@
</em> </em>
</h2> </h2>
<p class="wx18 center ma0"> <p class="wx18 center ma0">
Our open source code can be fully audited by the community. It will always be available for free. Seriously. <i>Our</i> open source code <i>can be fully audited by the community. It will always be</i> available for free. <i>Seriously.</i>
</p> </p>
</div> </div>
@ -65,7 +65,7 @@
</em> </em>
</h2> </h2>
<p class="wx18 center ma0"> <p class="wx18 center ma0">
Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data. Comply with GDPR <i>guidelines. Don't share data with third parties. Your</i> users have full access <i>to their data.</i>
</p> </p>
</div> </div>
@ -87,7 +87,7 @@
</em> </em>
</h2> </h2>
<p class="wx18 center ma0"> <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. Pay respect <i>to your website visitors. Gain valuable insights at the same time. All data is</i> encrypted end-to-end.
</p> </p>
</div> </div>
@ -108,9 +108,9 @@
<p class="f1-ns f2 lh-solid ma0 mt6"> <p class="f1-ns f2 lh-solid ma0 mt6">
Gain insights in an ethical way Gain insights in an ethical way
</p> </p>
<div class="mw6 center"> <div class="mw7 center">
<p class="f5 ma0 mt3 mb6 gray"> <p class="f5 ma0 mt3 mb6 mh0 mh3-m mh5-l">
Web analytics is still an unfair and impenetrable business. A proper alternative to common tools is missing. Therefore we develop one. <a class="b link dim gray" href="/deep-dive/">Learn more</a> Web analytics <i>is still an unfair and impenetrable business.</i> A proper alternative to common tools <i>is missing. Therefore we develop one.</i> <a class="b link dim cclr-fnt-black-mid" href="/deep-dive/">Deep dive</a>
</p> </p>
</div> </div>
</div> </div>
@ -123,7 +123,8 @@
<!-- COMPARE A --> <!-- COMPARE A -->
<div class="w-50-l w-100 cclr-bg-yellow-mid"> <div class="w-50-l w-100 cclr-bg-yellow-mid">
<div id="">
<div class="w-100 dib"> <div class="w-100 dib">
<div class="wx24 center"> <div class="wx24 center">
@ -139,8 +140,6 @@
</div> </div>
</div> </div>
</div>
<div class="w-100 hx24 dib cclr-bg-white-fade"> <div class="w-100 hx24 dib cclr-bg-white-fade">
<div class="wx24 center"> <div class="wx24 center">
@ -150,16 +149,16 @@
</div> </div>
<div class="w-80 mt4"> <div class="w-80 mt4">
<p class="ma0 ml3"> <p class="ma0 ml3">
Self host Offen and thereby comply with GDPR guidelines. Self host <i>Offen and thereby comply with GDPR guidelines.</i>
</p> </p>
<p class="ma0 ml3 mt4"> <p class="ma0 ml3 mt4">
Integrate the code snippet into pages you want to track. <i>Integrate the</i> code snippet <i>into pages you want to track.</i>
</p> </p>
<p class="ma0 ml3 mt4"> <p class="ma0 ml3 mt4">
Make your users aware of the access to their data. <i>Make your</i> users aware <i>of the access to their data.</i>
</p> </p>
<p class="ma0 ml3 mt4 mb5"> <p class="ma0 ml3 mt4 mb5">
Improve your services with fair and transparent insights. <i>Improve your services with</i> fair and transparent insights.
</p> </p>
</div> </div>
</div> </div>
@ -167,6 +166,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- COMPARE B --> <!-- COMPARE B -->
@ -199,13 +199,13 @@
</div> </div>
<div class="w-80 mt4"> <div class="w-80 mt4">
<p class="ma0 ml3"> <p class="ma0 ml3">
Opt in to data collection or decide to not participate at all. Opt in to data collection <i>or decide to not participate at all.</i>
</p> </p>
<p class="ma0 ml3 mt4"> <p class="ma0 ml3 mt4">
Review own data with detailed explanations of metrics and terms. Review own data <i>with detailed explanations of metrics and terms.</i>
</p> </p>
<p class="ma0 ml3 mt4"> <p class="ma0 ml3 mt4">
Only delete usage data or opt out completly at any time. Only delete usage data <i>or opt out completly at any time.</i>
</p> </p>
</div> </div>
@ -220,6 +220,9 @@
<div class="w-50-l w-100"> <div class="w-50-l w-100">
<div class="w-100 hx-compare-c dib cclr-bg-white-fade"> <div class="w-100 hx-compare-c dib cclr-bg-white-fade">
<div class="h-100" id="bg-pattern">
<div class="wx24 center"> <div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb4"> <p class="f25 lh-solid ma0 mt5 mb4">
<em> <em>
@ -279,6 +282,8 @@
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
@ -287,6 +292,10 @@
<div class="w-50-l w-100"> <div class="w-50-l w-100">
<div class="w-100 hx-compare-d dib cclr-bg-white-fade"> <div class="w-100 hx-compare-d dib cclr-bg-white-fade">
<div class="h-100" id="bg-pattern">
<div class="wx24 center"> <div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb4"> <p class="f25 lh-solid ma0 mt5 mb4">
<em class="em-mint-2"> <em class="em-mint-2">
@ -333,6 +342,9 @@
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
@ -353,16 +365,16 @@
</div> </div>
<div class="w-80 mt4"> <div class="w-80 mt4">
<p class="ma0"> <p class="ma0">
All your accounts can be shared within your team. All your accounts can be shared <i>within your team.</i>
</p> </p>
<p class="ma0 mt4"> <p class="ma0 mt4">
User data is only stored for 6 months and then deleted. <i>User data is only</i> stored for 6 months <i>and then deleted.</i>
</p> </p>
<p class="ma0 mt4"> <p class="ma0 mt4">
Use the in-browser screen for an more intuitive setup. <i>Use the</i> in-browser screen <i>for an more intuitive setup.</i>
</p> </p>
<p class="ma0 mt4 mb5"> <p class="ma0 mt4 mb5">
A detailed documentation on how to run Offen is available. <i>A</i> detailed documentation <i>on how to run Offen is available.</i>
</p> </p>
</div> </div>
</div> </div>
@ -381,7 +393,7 @@
Try as user Try as user
</p> </p>
<p class="ma0 mt4 mr0 mr4-ns"> <p class="ma0 mt4 mr0 mr4-ns">
Offen is installed on this website. Access your actual usage data now. <i>Offen is installed on this website. Access</i> your actual usage data <i>now.</i>
</p> </p>
<div class="mt4"> <div class="mt4">
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/deep-dive/" rel="noopener">Open Auditorium</a> <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/deep-dive/" rel="noopener">Open Auditorium</a>
@ -396,7 +408,7 @@
<!-- METRICS --> <!-- METRICS -->
<div class="w-100 hx-metrics dib cclr-bg-white-fade-metrics"> <div class="w-100 hx-metrics dib cclr-bg-white-fade-metrics">
<div class="h-100" id="bg-pattern">
<div class="wx24-metrics center"> <div class="wx24-metrics center">
@ -412,8 +424,8 @@
Essential metrics Essential metrics
</em> </em>
</p> </p>
<p class="ma0 ml0 ml5-l w-100 w-33-l gray"> <p class="ma0 ml0 ml5-l w-100 w-33-l mb5">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. All important statistics <i>that help you to improve your service. Collected</i> without violating the privacy of your users.
</p> </p>
</div> </div>
@ -477,8 +489,9 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
@ -499,13 +512,13 @@
</p> </p>
<div class="flex flex flex-wrap justify-center"> <div class="flex flex flex-wrap justify-center">
<div class="mw5 mb5 mh0 mh4-ns"> <div class="mw5 mb5 mh0 mh4-ns">
<p class="tc f5 ma0 gray mb3"> <p class="tc f5 ma0 mb3 gray ">
Single binary file for Linux, Windows or MacOS Single binary file for Linux, Windows or MacOS
</p> </p>
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="#" rel="noopener">Download demo</a> <a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="#" rel="noopener">Download demo</a>
</div> </div>
<div class="mw5 mb7 mh0 mh4-ns"> <div class="mw5 mb7 mh0 mh4-ns">
<p class="tc f5 ma0 gray mb3"> <p class="tc f5 ma0 mb3">
All you need to use Offen in production All you need to use Offen in production
</p> </p>
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a> <a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>