2
0
mirror of https://github.com/offen/website.git synced 2024-11-22 17:10:29 +01:00

all metrics

This commit is contained in:
Hendrik Niefeld 2020-04-24 22:26:10 +02:00
parent d1daf99b85
commit 5eff8b4464
4 changed files with 86 additions and 21 deletions

View File

@ -86,7 +86,7 @@ LAYOUT
width: 100%; width: 100%;
height: 4rem; /* Tachyons mt5 */ height: 4rem; /* Tachyons mt5 */
position: fixed; position: fixed;
z-index: 1; z-index: 10;
top: 0; top: 0;
right: 0; right: 0;
} }
@ -136,8 +136,8 @@ LAYOUT
.hx50 { .hx50 {
height: 50rem; height: 50rem;
} }
.hx200 { .hx150 {
height: 200rem; height: 150rem;
} }
.wx24, .wx24,
.wx24-metrics { .wx24-metrics {
@ -149,6 +149,9 @@ LAYOUT
.wx24-metrics { .wx24-metrics {
width: 24rem; width: 24rem;
} }
.hx150 {
height: 118rem;
}
} }
@media only screen and (min-width: 60em) { @media only screen and (min-width: 60em) {
.wx24-metrics { .wx24-metrics {
@ -187,34 +190,38 @@ STACKING BOXES
width: 24rem; width: 24rem;
} }
.stackbox-1 { .stackbox-1 {
z-index : 1;
top: 4rem; top: 4rem;
left: 3rem; left: 3rem;
} }
.stackbox-2 { .stackbox-2 {
top: 30rem; z-index : 3;
top: 20rem;
left: calc(100% - 27rem) left: calc(100% - 27rem)
} }
.stackbox-3 { .stackbox-3 {
top: 54rem; z-index : 2;
top: 45rem;
left: 3rem; left: 3rem;
} }
.stackbox-4 { .stackbox-4 {
top: 80rem; z-index : 4;
top: 64rem;
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-1 {
left: 10rem; left: 6rem;
} }
.stackbox-2 { .stackbox-2 {
left: 30rem; left: 29rem;
} }
.stackbox-3 { .stackbox-3 {
left: 10rem; left: 10rem;
} }
.stackbox-4 { .stackbox-4 {
left: 30rem; left: 31rem;
} }
} }

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 132 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 122 KiB

View File

@ -353,7 +353,7 @@
</div> </div>
<!-- METRICS --> <!-- METRICS -->
<div class="w-100 hx200 dib cclr-bg-white-fade"> <div class="w-100 hx150 dib cclr-bg-white-fade">
<div class="wx24-metrics center"> <div class="wx24-metrics center">
@ -371,10 +371,10 @@
<div class="relative"> <div class="relative">
<div class="relative absolute-m absolute-l stackbox-1 center"> <div class="relative absolute-m absolute-l stackbox-1 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="f7 lh-solid ma0 mb3"> <p class="lh-solid ma0 mb4">
Page views and users Page views and users
</p> </p>
<img src="/theme/images/gfx-metrics-bars.svg" alt="temp" width="320px"> <img src="/theme/images/gfx-metrics-bars.svg" alt="temp" width="320px" class="mb3">
</div> </div>
</div> </div>
</div> </div>
@ -383,10 +383,10 @@
<div class="relative"> <div class="relative">
<div class="relative absolute-m absolute-l stackbox-2 center"> <div class="relative absolute-m absolute-l stackbox-2 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="f7 lh-solid ma0 mb3"> <p class="lh-solid ma0 mb4">
Top pages Key metrics
</p> </p>
<img src="/theme/images/gfx-metrics-pages.svg" alt="temp" width="320px"> <img src="/theme/images/gfx-metrics-key.svg" alt="temp" width="320px" class="mb3">
</div> </div>
</div> </div>
</div> </div>
@ -395,10 +395,10 @@
<div class="relative"> <div class="relative">
<div class="relative absolute-m absolute-l stackbox-3 center"> <div class="relative absolute-m absolute-l stackbox-3 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="f7 lh-solid ma0 mb3"> <p class="lh-solid ma0 mb4">
Temp Top pages
</p> </p>
<img src="/theme/images/gfx-metrics-pages.svg" alt="temp" width="320px"> <img src="/theme/images/gfx-metrics-pages.svg" alt="temp" width="320px" class="mb3">
</div> </div>
</div> </div>
</div> </div>
@ -407,10 +407,10 @@
<div class="relative"> <div class="relative">
<div class="relative absolute-m absolute-l stackbox-4 center"> <div class="relative absolute-m absolute-l stackbox-4 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="f7 lh-solid ma0 mb3"> <p class="lh-solid ma0 mb4">
Temp Weekly retention
</p> </p>
<img src="/theme/images/gfx-metrics-bars.svg" alt="temp" width="320px"> <img src="/theme/images/gfx-metrics-retention.svg" alt="temp" width="320px" class="mb3">
</div> </div>
</div> </div>
</div> </div>