mirror of
https://github.com/offen/website.git
synced 2024-11-22 17:10:29 +01:00
update feature section
This commit is contained in:
parent
17f99474d0
commit
145dcf1a80
@ -22,6 +22,13 @@ COLORS NEW
|
|||||||
.cclr-bg-mint-bright {
|
.cclr-bg-mint-bright {
|
||||||
background-color: #DEF0ED;
|
background-color: #DEF0ED;
|
||||||
}
|
}
|
||||||
|
.cclr-bg-mint-fade-a {
|
||||||
|
background: linear-gradient(207.34deg, rgba(222, 240, 237, 0.6) 11.24%, rgba(255, 255, 255, 0) 102.6%), #BBD9D3;
|
||||||
|
}
|
||||||
|
.cclr-bg-mint-fade-b {
|
||||||
|
background: linear-gradient(207.34deg, rgba(222, 240, 237, 0.6) 11.24%, rgba(255, 255, 255, 0) 102.6%), #BBD9D3;
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
|
||||||
/* Black */
|
/* Black */
|
||||||
.cclr-bg-black-mid {
|
.cclr-bg-black-mid {
|
||||||
@ -86,11 +93,13 @@ COLORS OLD
|
|||||||
/* ---------------------------------------------------
|
/* ---------------------------------------------------
|
||||||
LAYOUT
|
LAYOUT
|
||||||
----------------------------------------------------*/
|
----------------------------------------------------*/
|
||||||
|
|
||||||
|
/* Menu - UPDATE!!!! */
|
||||||
.menu {
|
.menu {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4rem; /* Tachyons mt5 */
|
height: 4rem; /* Tachyons mt5 */
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 10;
|
z-index: 999;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
@ -111,26 +120,29 @@ LAYOUT
|
|||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* Custom Tachyons class */
|
|
||||||
|
|
||||||
|
|
||||||
/* OLD */
|
/* OLD */
|
||||||
.w55-container,
|
|
||||||
.w55 {
|
.w55 {
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
}
|
}
|
||||||
.w56 {
|
|
||||||
width: 20rem;
|
|
||||||
height: 480px;
|
|
||||||
}
|
|
||||||
/* Custom media query - extra small */
|
|
||||||
@media only screen and (max-width: 40em) {
|
|
||||||
.w55-container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* NEW */
|
/* NEW */
|
||||||
|
|
||||||
|
|
||||||
|
/* HWidths and heights */
|
||||||
|
.hx-feature {
|
||||||
|
height: 30rem;
|
||||||
|
}
|
||||||
|
.wx18 {
|
||||||
|
width: 18rem;
|
||||||
|
}
|
||||||
|
.wx24,
|
||||||
|
.wx24-metrics {
|
||||||
|
width: 86%;
|
||||||
|
}
|
||||||
.hx24 {
|
.hx24 {
|
||||||
height: 24rem;
|
height: 24rem;
|
||||||
}
|
}
|
||||||
@ -144,91 +156,103 @@ LAYOUT
|
|||||||
.hx-metrics {
|
.hx-metrics {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.wx24,
|
|
||||||
.wx24-metrics {
|
|
||||||
width: 86%;
|
|
||||||
}
|
|
||||||
/* Tachyons breakpoints 30 & 60 */
|
|
||||||
@media only screen and (min-width: 30em) {
|
@media only screen and (min-width: 30em) {
|
||||||
.hx-try-user {
|
.hx-try-user {
|
||||||
height: 26rem;
|
height: 24rem;
|
||||||
}
|
}
|
||||||
.wx24,
|
.wx24,
|
||||||
.wx24-metrics {
|
.wx24-metrics {
|
||||||
width: 24rem;
|
width: 24rem;
|
||||||
}
|
}
|
||||||
.hx-metrics {
|
.hx-metrics {
|
||||||
height: 118rem;
|
height: 124rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 60em) {
|
@media only screen and (min-width: 60em) {
|
||||||
.wx24-metrics {
|
.wx24-metrics {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.hx-metrics {
|
||||||
|
height: 128rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Stacking boxes */
|
||||||
/* ---------------------------------------------------
|
.stackbox-10 img,
|
||||||
STACKING BOXES
|
.stackbox-20 img,
|
||||||
----------------------------------------------------*/
|
.stackbox-30 img,
|
||||||
/* Tachyons breakpoints 30 & 60 */
|
.stackbox-40 img,
|
||||||
.stackbox-1 img,
|
.stackbox-50 img {
|
||||||
.stackbox-2 img,
|
|
||||||
.stackbox-3 img,
|
|
||||||
.stackbox-4 img {
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
.stackbox-1,
|
.stackbox-10,
|
||||||
.stackbox-2,
|
.stackbox-20,
|
||||||
.stackbox-3,
|
.stackbox-30,
|
||||||
.stackbox-4 {
|
.stackbox-40,
|
||||||
|
.stackbox-50 {
|
||||||
width: 86%;
|
width: 86%;
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 30em) {
|
@media only screen and (min-width: 30em) {
|
||||||
.stackbox-1 img,
|
.stackbox-10 img,
|
||||||
.stackbox-2 img,
|
.stackbox-20 img,
|
||||||
.stackbox-3 img,
|
.stackbox-30 img,
|
||||||
.stackbox-4 img {
|
.stackbox-40 img,
|
||||||
|
.stackbox-50 img {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
.stackbox-1,
|
.stackbox-10,
|
||||||
.stackbox-2,
|
.stackbox-20,
|
||||||
.stackbox-3,
|
.stackbox-30,
|
||||||
.stackbox-4 {
|
.stackbox-40,
|
||||||
|
.stackbox-50 {
|
||||||
width: 24rem;
|
width: 24rem;
|
||||||
}
|
}
|
||||||
.stackbox-1 {
|
.stackbox-10 {
|
||||||
z-index : 1;
|
z-index : 110;
|
||||||
top: 4rem;
|
top: 2rem;
|
||||||
left: 3rem;
|
|
||||||
}
|
|
||||||
.stackbox-2 {
|
|
||||||
z-index : 3;
|
|
||||||
top: 20rem;
|
|
||||||
left: calc(100% - 27rem)
|
left: calc(100% - 27rem)
|
||||||
}
|
}
|
||||||
.stackbox-3 {
|
.stackbox-20 {
|
||||||
z-index : 2;
|
z-index : 120;
|
||||||
top: 45rem;
|
top: 12rem;
|
||||||
left: 3rem;
|
left: 3rem;
|
||||||
}
|
}
|
||||||
.stackbox-4 {
|
.stackbox-30 {
|
||||||
z-index : 4;
|
z-index : 140;
|
||||||
top: 64rem;
|
top: 33rem;
|
||||||
|
left: calc(100% - 27rem)
|
||||||
|
}
|
||||||
|
.stackbox-40 {
|
||||||
|
z-index : 130;
|
||||||
|
top: 52rem;
|
||||||
|
left: 3rem;
|
||||||
|
}
|
||||||
|
.stackbox-50 {
|
||||||
|
z-index : 148;
|
||||||
|
top: 74rem;
|
||||||
left: calc(100% - 27rem)
|
left: calc(100% - 27rem)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 60em) {
|
@media only screen and (min-width: 60em) {
|
||||||
.stackbox-1 {
|
.stackbox-10 {
|
||||||
|
left: 34rem;
|
||||||
|
}
|
||||||
|
.stackbox-20 {
|
||||||
|
top: 14rem;
|
||||||
left: 6rem;
|
left: 6rem;
|
||||||
}
|
}
|
||||||
.stackbox-2 {
|
.stackbox-30 {
|
||||||
|
top: 28rem;
|
||||||
left: 29rem;
|
left: 29rem;
|
||||||
}
|
}
|
||||||
.stackbox-3 {
|
.stackbox-40 {
|
||||||
|
top: 55rem;
|
||||||
left: 10rem;
|
left: 10rem;
|
||||||
}
|
}
|
||||||
.stackbox-4 {
|
.stackbox-50 {
|
||||||
|
top: 74rem;
|
||||||
left: 31rem;
|
left: 31rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -521,11 +545,13 @@ GRAPHICS
|
|||||||
background: url(/theme/images/gfx-feature-2.png) center;
|
background: url(/theme/images/gfx-feature-2.png) center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 640px 480px;
|
background-size: 640px 480px;
|
||||||
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
#bg-feature-3 {
|
#bg-feature-3 {
|
||||||
background: url(/theme/images/gfx-feature-3.png) center;
|
background: url(/theme/images/gfx-feature-3.png) center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 640px 480px;
|
background-size: 640px 480px;
|
||||||
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
/* --------------------------------------------- */
|
/* --------------------------------------------- */
|
||||||
#bg-feature {
|
#bg-feature {
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 24 KiB |
13
homepage/theme/static/images/gfx-metrics-real.svg
Normal file
13
homepage/theme/static/images/gfx-metrics-real.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 188 KiB |
@ -30,47 +30,55 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-100" id="bg-feature">
|
<div class="w-100 cclr-bg-mint-mid">
|
||||||
<div class="center">
|
<div class="mw8 flex flex-wrap justify-center center tc">
|
||||||
<div class="flex flex-wrap justify-center w-100">
|
|
||||||
<div class="flex justify-center w55-container" id="bg-feature-1">
|
<div class="w-100 w-third-l cclr-bg-mint-fade-a">
|
||||||
<div class="w56 tc pa3">
|
<div class="hx-feature" id="bg-feature-1">
|
||||||
<h2 class="f25 normal lh-solid mt5 mb3">
|
|
||||||
<em class="em-mint-1">
|
<h2 class="f25 normal lh-solid ma0 mb3 pt5">
|
||||||
Free & Open
|
<em class="em-mint-1">
|
||||||
</em>
|
Free & Open
|
||||||
</h2>
|
</em>
|
||||||
<p class="ma0 mb5">
|
</h2>
|
||||||
Our open source code can be fully audited by the community. It will always be available for free. Seriously.
|
<p class="wx18 center ma0">
|
||||||
</p>
|
Our open source code can be fully audited by the community. It will always be available for free. Seriously.
|
||||||
</div>
|
</p>
|
||||||
</div>
|
|
||||||
<div class="flex justify-center w55-container" id="bg-feature-3">
|
</div>
|
||||||
<div class="w56 tc pa3">
|
|
||||||
<h2 class="f25 normal lh-solid mt6 mb3">
|
|
||||||
<em class="em-mint-1">
|
|
||||||
Self hosted
|
|
||||||
</em>
|
|
||||||
</h2>
|
|
||||||
<p class="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="flex justify-center w55-container" id="bg-feature-2">
|
|
||||||
<div class=" w56 tc pa3">
|
|
||||||
<h2 class="f25 normal lh-solid mt7 mb3">
|
|
||||||
<em class="em-mint-1">
|
|
||||||
Fair & Secure
|
|
||||||
</em>
|
|
||||||
</h2>
|
|
||||||
<p class="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>
|
||||||
|
|
||||||
|
<div class="w-100 w-third-l cclr-bg-mint-fade-b">
|
||||||
|
<div class="hx-feature" id="bg-feature-2">
|
||||||
|
|
||||||
|
<h2 class="f25 normal lh-solid ma0 mb3 pt6">
|
||||||
|
<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-b">
|
||||||
|
<div class="hx-feature" id="bg-feature-3">
|
||||||
|
|
||||||
|
<h2 class="f25 normal lh-solid ma0 mb3 pt7">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
@ -367,9 +375,21 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- BOX 1 Bars -->
|
<!-- BOX 10 Real -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="relative absolute-m absolute-l stackbox-1 center">
|
<div class="relative absolute-m absolute-l stackbox-10 center">
|
||||||
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
||||||
|
<p class="lh-solid ma0 mb4">
|
||||||
|
Real time
|
||||||
|
</p>
|
||||||
|
<img src="/theme/images/gfx-metrics-real.svg" alt="temp" width="320px" class="mb3">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BOX 20 Bars -->
|
||||||
|
<div class="relative">
|
||||||
|
<div class="relative absolute-m absolute-l stackbox-20 center">
|
||||||
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
||||||
<p class="lh-solid ma0 mb4">
|
<p class="lh-solid ma0 mb4">
|
||||||
Page views and users
|
Page views and users
|
||||||
@ -379,9 +399,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- BOX 2 Pages -->
|
<!-- BOX 30 Key -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="relative absolute-m absolute-l stackbox-2 center">
|
<div class="relative absolute-m absolute-l stackbox-30 center">
|
||||||
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
||||||
<p class="lh-solid ma0 mb4">
|
<p class="lh-solid ma0 mb4">
|
||||||
Key metrics
|
Key metrics
|
||||||
@ -391,9 +411,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- BOX 3 -->
|
<!-- BOX 40 Pages -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="relative absolute-m absolute-l stackbox-3 center">
|
<div class="relative absolute-m absolute-l stackbox-40 center">
|
||||||
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
||||||
<p class="lh-solid ma0 mb4">
|
<p class="lh-solid ma0 mb4">
|
||||||
Top pages
|
Top pages
|
||||||
@ -403,9 +423,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- BOX 4 -->
|
<!-- BOX 50 Retention -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="relative absolute-m absolute-l stackbox-4 center mb5 mb0-ns">
|
<div class="relative absolute-m absolute-l stackbox-50 center mb5 mb0-ns">
|
||||||
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
||||||
<p class="lh-solid ma0 mb4">
|
<p class="lh-solid ma0 mb4">
|
||||||
Weekly retention
|
Weekly retention
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user