offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-11-22 09:00:28 +01:00
Code Issues Projects Releases Wiki Activity

stacking boxes

Browse Source
This commit is contained in:
Hendrik Niefeld 2020-04-24 07:46:37 +02:00
parent e59a3597eb
commit fb9b4d6637
2 changed files with 172 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
homepage/theme/static/css/fix.css
View File

@ -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

40
homepage/theme/templates/index.html
View File

@ -263,7 +263,7 @@
Unique websites
</p>
<p class="f25 lh-solid ma0 mb2">
2
5
</p>
<p class="lh-solid ma0 mb4">
Unique sessions
@ -279,6 +279,9 @@
<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>
@ -343,17 +346,46 @@
<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 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>