mirror of
https://github.com/offen/website.git
synced 2024-11-22 09:00:28 +01:00
stacking boxes
This commit is contained in:
parent
e59a3597eb
commit
fb9b4d6637
@ -124,26 +124,55 @@ LAYOUT
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* NEW */
|
/* NEW */
|
||||||
.wx24 {
|
.wx24 {
|
||||||
width: 24rem;
|
width: 86%;
|
||||||
}
|
|
||||||
.hx24 {
|
|
||||||
height: 24rem;
|
|
||||||
}
|
|
||||||
.hx30 {
|
|
||||||
height: 30rem;
|
|
||||||
}
|
|
||||||
.hx50 {
|
|
||||||
height: 50rem;
|
|
||||||
}
|
}
|
||||||
/* Tachyons breakpoints 30 & 60 */
|
/* Tachyons breakpoints 30 & 60 */
|
||||||
@media only screen and (max-width: 30em) {
|
@media only screen and (min-width: 30em) {
|
||||||
.wx24 {
|
.wx24 {
|
||||||
width: 86%;
|
width: 24rem;
|
||||||
|
}
|
||||||
|
.hx24 {
|
||||||
|
height: 24rem;
|
||||||
|
}
|
||||||
|
.hx30 {
|
||||||
|
height: 30rem;
|
||||||
|
}
|
||||||
|
.hx50 {
|
||||||
|
height: 50rem;
|
||||||
|
}
|
||||||
|
.hx200 {
|
||||||
|
height: 200rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------------------------
|
||||||
|
STACKING BOXES
|
||||||
|
----------------------------------------------------*/
|
||||||
|
/* Tachyons breakpoints 30 & 60 */
|
||||||
|
@media only screen and (max-width: 30em) {
|
||||||
|
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 30em) and (max-width: 60em) {
|
||||||
|
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 60em) {
|
||||||
|
.stackbox-1 {
|
||||||
|
top: 8rem;
|
||||||
|
left: 4rem;
|
||||||
|
width: 24rem;
|
||||||
|
height: 24rem;
|
||||||
|
}
|
||||||
|
.stackbox-2 {
|
||||||
|
top: 20rem;
|
||||||
|
left: 20rem;
|
||||||
|
width: 24rem;
|
||||||
|
height: 24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
/* ---------------------------------------------------
|
||||||
TYPO AND LAYOUT ELEMENTS
|
TYPO AND LAYOUT ELEMENTS
|
||||||
|
|||||||
@ -96,7 +96,7 @@
|
|||||||
<div class="w-100">
|
<div class="w-100">
|
||||||
<div class="mw8 center flex flex-wrap justify-center">
|
<div class="mw8 center flex flex-wrap justify-center">
|
||||||
|
|
||||||
<!-- COMPARE A -->
|
<!-- COMPARE A -->
|
||||||
<div class="w-50-l w-100">
|
<div class="w-50-l w-100">
|
||||||
|
|
||||||
<div class="w-100 dib cclr-bg-yellow-mid">
|
<div class="w-100 dib cclr-bg-yellow-mid">
|
||||||
@ -138,7 +138,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- COMPARE B -->
|
<!-- COMPARE B -->
|
||||||
<div class="w-50-l w-100">
|
<div class="w-50-l w-100">
|
||||||
|
|
||||||
<div class="w-100 dn db-l h3 bg-white">
|
<div class="w-100 dn db-l h3 bg-white">
|
||||||
@ -177,7 +177,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- COMPARE C -->
|
<!-- COMPARE C -->
|
||||||
<div class="w-50-l w-100">
|
<div class="w-50-l w-100">
|
||||||
|
|
||||||
<div class="w-100 hx50 dib cclr-bg-white-fade">
|
<div class="w-100 hx50 dib cclr-bg-white-fade">
|
||||||
@ -238,120 +238,152 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- COMPARE D -->
|
<!-- COMPARE D -->
|
||||||
<div class="w-50-l w-100">
|
<div class="w-50-l w-100">
|
||||||
|
|
||||||
<div class="w-100 hx50 dib cclr-bg-white-fade">
|
<div class="w-100 hx50 dib cclr-bg-white-fade">
|
||||||
<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">
|
||||||
What your users see
|
What your users see
|
||||||
</em>
|
</em>
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mb2 mr5-ns gray">
|
<p class="ma0 mb2 mr5-ns gray">
|
||||||
Data of all pages a user has visited where your Offen installation is active.
|
Data of all pages a user has visited where your Offen installation is active.
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mb4 gray">
|
<p class="ma0 mb4 gray">
|
||||||
For example:
|
For example:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- BOX -->
|
<!-- BOX -->
|
||||||
<div class="w-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
|
<div class="w-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
|
||||||
<p class="f25 lh-solid ma0 mb2">
|
<p class="f25 lh-solid ma0 mb2">
|
||||||
1
|
1
|
||||||
</p>
|
</p>
|
||||||
<p class="lh-solid ma0 mb4">
|
<p class="lh-solid ma0 mb4">
|
||||||
Unique websites
|
Unique websites
|
||||||
</p>
|
</p>
|
||||||
<p class="f25 lh-solid ma0 mb2">
|
<p class="f25 lh-solid ma0 mb2">
|
||||||
2
|
5
|
||||||
</p>
|
</p>
|
||||||
<p class="lh-solid ma0 mb4">
|
<p class="lh-solid ma0 mb4">
|
||||||
Unique sessions
|
Unique sessions
|
||||||
</p>
|
</p>
|
||||||
<p class="lh-solid pt2 ma0 mb3">
|
<p class="lh-solid pt2 ma0 mb3">
|
||||||
Top pages
|
Top pages
|
||||||
</p>
|
</p>
|
||||||
<table class="f7 f5-ns collapse dt--fixed mb4">
|
<table class="f7 f5-ns collapse dt--fixed mb4">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr class="striped--near-white">
|
<tr class="striped--near-white">
|
||||||
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/</td>
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="striped--near-white">
|
<tr class="striped--near-white">
|
||||||
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/blog/</td>
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/blog/</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
<tr class="striped--near-white">
|
||||||
</table>
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/otherpage/</td>
|
||||||
</div>
|
</tr>
|
||||||
|
</tbody>
|
||||||
</div>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- COMPARE E -->
|
</div>
|
||||||
<div class="w-50-l w-100">
|
|
||||||
|
|
||||||
<div class="w-100 hx30 dib cclr-bg-yellow-mid">
|
<!-- COMPARE E -->
|
||||||
<div class="wx24 center">
|
<div class="w-50-l w-100">
|
||||||
|
|
||||||
<p class="f25 lh-solid ma0 mt5">
|
<div class="w-100 hx30 dib cclr-bg-yellow-mid">
|
||||||
More features
|
<div class="wx24 center">
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex items-center mt4">
|
<p class="f25 lh-solid ma0 mt5">
|
||||||
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
More features
|
||||||
<p class="ma0 ml3">
|
</p>
|
||||||
Accounts can be shared within a team.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center mt4">
|
|
||||||
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
||||||
<p class="ma0 ml3">
|
|
||||||
User data is only stored for 6 months.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center mt4">
|
|
||||||
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
||||||
<p class="ma0 ml3">
|
|
||||||
In-browser screen for an intuitive setup.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center mt4 mb5">
|
|
||||||
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
||||||
<p class="ma0 ml3">
|
|
||||||
Detailed documentation is available.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
<div class="flex items-center mt4">
|
||||||
</div>
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
||||||
|
<p class="ma0 ml3">
|
||||||
|
Accounts can be shared within a team.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center mt4">
|
||||||
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
||||||
|
<p class="ma0 ml3">
|
||||||
|
User data is only stored for 6 months.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center mt4">
|
||||||
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
||||||
|
<p class="ma0 ml3">
|
||||||
|
In-browser screen for an intuitive setup.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center mt4 mb5">
|
||||||
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
||||||
|
<p class="ma0 ml3">
|
||||||
|
Detailed documentation is available.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- COMPARE F -->
|
</div>
|
||||||
<div class="w-50-l w-100">
|
|
||||||
|
|
||||||
<div class="w-100 hx30 dib cclr-bg-mint-mid">
|
<!-- COMPARE F -->
|
||||||
<div class="wx24 center">
|
<div class="w-50-l w-100">
|
||||||
<p class="f25 lh-solid ma0 mt5">
|
|
||||||
Try as user
|
<div class="w-100 hx30 dib cclr-bg-mint-mid">
|
||||||
</p>
|
<div class="wx24 center">
|
||||||
<p class="ma0 mt4 mr0 mr4-ns">
|
<p class="f25 lh-solid ma0 mt5">
|
||||||
Offen is installed on this website. Access your actual usage data now.
|
Try as user
|
||||||
</p>
|
</p>
|
||||||
<div class="mt4 mb6">
|
<p class="ma0 mt4 mr0 mr4-ns">
|
||||||
<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>
|
Offen is installed on this website. Access your actual usage data now.
|
||||||
</div>
|
</p>
|
||||||
</div>
|
<div class="mt4 mb6">
|
||||||
<div class="w-100 dn db-l bg-white">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="w-100 dn db-l h4 bg-light-gray">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- METRICS -->
|
||||||
|
<div class="relative w-100 hx200 dib cclr-bg-white-fade">
|
||||||
|
|
||||||
|
<p class="f25 lh-solid ma0 ml5 mt5">
|
||||||
|
<em>
|
||||||
|
Essential metrics
|
||||||
|
</em>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- BOX 1 -->
|
||||||
|
<div class="absolute stackbox-1">
|
||||||
|
<div class="w-100 h-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
|
||||||
|
<p class="">
|
||||||
|
temp1
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BOX 2 -->
|
||||||
|
<div class="absolute stackbox-2">
|
||||||
|
<div class="w-100 h-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
|
||||||
|
<p class="">
|
||||||
|
temp2
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user