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%;
height: 4rem; /* Tachyons mt5 */
position: fixed;
z-index: 1;
z-index: 10;
top: 0;
right: 0;
}
@ -136,8 +136,8 @@ LAYOUT
.hx50 {
height: 50rem;
}
.hx200 {
height: 200rem;
.hx150 {
height: 150rem;
}
.wx24,
.wx24-metrics {
@ -149,6 +149,9 @@ LAYOUT
.wx24-metrics {
width: 24rem;
}
.hx150 {
height: 118rem;
}
}
@media only screen and (min-width: 60em) {
.wx24-metrics {
@ -187,34 +190,38 @@ STACKING BOXES
width: 24rem;
}
.stackbox-1 {
z-index : 1;
top: 4rem;
left: 3rem;
}
.stackbox-2 {
top: 30rem;
z-index : 3;
top: 20rem;
left: calc(100% - 27rem)
}
.stackbox-3 {
top: 54rem;
z-index : 2;
top: 45rem;
left: 3rem;
}
.stackbox-4 {
top: 80rem;
z-index : 4;
top: 64rem;
left: calc(100% - 27rem)
}
}
@media only screen and (min-width: 60em) {
.stackbox-1 {
left: 10rem;
left: 6rem;
}
.stackbox-2 {
left: 30rem;
left: 29rem;
}
.stackbox-3 {
left: 10rem;
}
.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>
<!-- 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">
@ -371,10 +371,10 @@
<div class="relative">
<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">
<p class="f7 lh-solid ma0 mb3">
<p class="lh-solid ma0 mb4">
Page views and users
</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>
@ -383,10 +383,10 @@
<div class="relative">
<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">
<p class="f7 lh-solid ma0 mb3">
Top pages
<p class="lh-solid ma0 mb4">
Key metrics
</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>
@ -395,10 +395,10 @@
<div class="relative">
<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">
<p class="f7 lh-solid ma0 mb3">
Temp
<p class="lh-solid ma0 mb4">
Top pages
</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>
@ -407,10 +407,10 @@
<div class="relative">
<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">
<p class="f7 lh-solid ma0 mb3">
Temp
<p class="lh-solid ma0 mb4">
Weekly retention
</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>