mirror of
https://github.com/offen/website.git
synced 2024-12-23 13:30:20 +01:00
stacking boxes
This commit is contained in:
parent
e59a3597eb
commit
fb9b4d6637
@ -124,26 +124,55 @@ LAYOUT
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* NEW */
|
||||
.wx24 {
|
||||
width: 24rem;
|
||||
}
|
||||
.hx24 {
|
||||
height: 24rem;
|
||||
}
|
||||
.hx30 {
|
||||
height: 30rem;
|
||||
}
|
||||
.hx50 {
|
||||
height: 50rem;
|
||||
width: 86%;
|
||||
}
|
||||
/* Tachyons breakpoints 30 & 60 */
|
||||
@media only screen and (max-width: 30em) {
|
||||
@media only screen and (min-width: 30em) {
|
||||
.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
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
<div class="w-100">
|
||||
<div class="mw8 center flex flex-wrap justify-center">
|
||||
|
||||
<!-- COMPARE A -->
|
||||
<!-- COMPARE A -->
|
||||
<div class="w-50-l w-100">
|
||||
|
||||
<div class="w-100 dib cclr-bg-yellow-mid">
|
||||
@ -138,7 +138,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- COMPARE B -->
|
||||
<!-- COMPARE B -->
|
||||
<div class="w-50-l w-100">
|
||||
|
||||
<div class="w-100 dn db-l h3 bg-white">
|
||||
@ -177,7 +177,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- COMPARE C -->
|
||||
<!-- COMPARE C -->
|
||||
<div class="w-50-l w-100">
|
||||
|
||||
<div class="w-100 hx50 dib cclr-bg-white-fade">
|
||||
@ -238,120 +238,152 @@
|
||||
</div>
|
||||
|
||||
<!-- 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="wx24 center">
|
||||
<p class="f25 lh-solid ma0 mt5 mb4">
|
||||
<em class="em-mint-2">
|
||||
What your users see
|
||||
</em>
|
||||
</p>
|
||||
<p class="ma0 mb2 mr5-ns gray">
|
||||
Data of all pages a user has visited where your Offen installation is active.
|
||||
</p>
|
||||
<p class="ma0 mb4 gray">
|
||||
For example:
|
||||
</p>
|
||||
<div class="w-100 hx50 dib cclr-bg-white-fade">
|
||||
<div class="wx24 center">
|
||||
<p class="f25 lh-solid ma0 mt5 mb4">
|
||||
<em class="em-mint-2">
|
||||
What your users see
|
||||
</em>
|
||||
</p>
|
||||
<p class="ma0 mb2 mr5-ns gray">
|
||||
Data of all pages a user has visited where your Offen installation is active.
|
||||
</p>
|
||||
<p class="ma0 mb4 gray">
|
||||
For example:
|
||||
</p>
|
||||
|
||||
<!-- BOX -->
|
||||
<div class="w-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
|
||||
<p class="f25 lh-solid ma0 mb2">
|
||||
1
|
||||
</p>
|
||||
<p class="lh-solid ma0 mb4">
|
||||
Unique websites
|
||||
</p>
|
||||
<p class="f25 lh-solid ma0 mb2">
|
||||
2
|
||||
</p>
|
||||
<p class="lh-solid ma0 mb4">
|
||||
Unique sessions
|
||||
</p>
|
||||
<p class="lh-solid pt2 ma0 mb3">
|
||||
Top pages
|
||||
</p>
|
||||
<table class="f7 f5-ns collapse dt--fixed mb4">
|
||||
<tbody>
|
||||
<tr class="striped--near-white">
|
||||
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/</td>
|
||||
</tr>
|
||||
<tr class="striped--near-white">
|
||||
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/blog/</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- BOX -->
|
||||
<div class="w-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
|
||||
<p class="f25 lh-solid ma0 mb2">
|
||||
1
|
||||
</p>
|
||||
<p class="lh-solid ma0 mb4">
|
||||
Unique websites
|
||||
</p>
|
||||
<p class="f25 lh-solid ma0 mb2">
|
||||
5
|
||||
</p>
|
||||
<p class="lh-solid ma0 mb4">
|
||||
Unique sessions
|
||||
</p>
|
||||
<p class="lh-solid pt2 ma0 mb3">
|
||||
Top pages
|
||||
</p>
|
||||
<table class="f7 f5-ns collapse dt--fixed mb4">
|
||||
<tbody>
|
||||
<tr class="striped--near-white">
|
||||
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/</td>
|
||||
</tr>
|
||||
<tr class="striped--near-white">
|
||||
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/blog/</td>
|
||||
</tr>
|
||||
<tr class="striped--near-white">
|
||||
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/otherpage/</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- COMPARE E -->
|
||||
<div class="w-50-l w-100">
|
||||
</div>
|
||||
|
||||
<div class="w-100 hx30 dib cclr-bg-yellow-mid">
|
||||
<div class="wx24 center">
|
||||
<!-- COMPARE E -->
|
||||
<div class="w-50-l w-100">
|
||||
|
||||
<p class="f25 lh-solid ma0 mt5">
|
||||
More features
|
||||
</p>
|
||||
<div class="w-100 hx30 dib cclr-bg-yellow-mid">
|
||||
<div class="wx24 center">
|
||||
|
||||
<div class="flex items-center mt4">
|
||||
<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>
|
||||
<p class="f25 lh-solid ma0 mt5">
|
||||
More features
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt4">
|
||||
<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 class="w-50-l w-100">
|
||||
</div>
|
||||
|
||||
<div class="w-100 hx30 dib cclr-bg-mint-mid">
|
||||
<div class="wx24 center">
|
||||
<p class="f25 lh-solid ma0 mt5">
|
||||
Try as user
|
||||
</p>
|
||||
<p class="ma0 mt4 mr0 mr4-ns">
|
||||
Offen is installed on this website. Access your actual usage data now.
|
||||
</p>
|
||||
<div class="mt4 mb6">
|
||||
<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 class="w-100 dn db-l bg-white">
|
||||
</div>
|
||||
</div>
|
||||
<!-- COMPARE F -->
|
||||
<div class="w-50-l w-100">
|
||||
|
||||
<div class="w-100 hx30 dib cclr-bg-mint-mid">
|
||||
<div class="wx24 center">
|
||||
<p class="f25 lh-solid ma0 mt5">
|
||||
Try as user
|
||||
</p>
|
||||
<p class="ma0 mt4 mr0 mr4-ns">
|
||||
Offen is installed on this website. Access your actual usage data now.
|
||||
</p>
|
||||
<div class="mt4 mb6">
|
||||
<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 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user