From fb9b4d6637cbb896a808ad9057059da5ae78d7d2 Mon Sep 17 00:00:00 2001 From: Hendrik Niefeld Date: Fri, 24 Apr 2020 07:46:37 +0200 Subject: [PATCH] stacking boxes --- homepage/theme/static/css/fix.css | 53 +++++-- homepage/theme/templates/index.html | 230 ++++++++++++++++------------ 2 files changed, 172 insertions(+), 111 deletions(-) diff --git a/homepage/theme/static/css/fix.css b/homepage/theme/static/css/fix.css index 65862fa..a08c65a 100644 --- a/homepage/theme/static/css/fix.css +++ b/homepage/theme/static/css/fix.css @@ -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 diff --git a/homepage/theme/templates/index.html b/homepage/theme/templates/index.html index e7ae50f..26c4228 100644 --- a/homepage/theme/templates/index.html +++ b/homepage/theme/templates/index.html @@ -96,7 +96,7 @@
- +
@@ -138,7 +138,7 @@
- +
@@ -177,7 +177,7 @@
- +
@@ -238,120 +238,152 @@
-
+
-
-
-

- - What your users see - -

-

- Data of all pages a user has visited where your Offen installation is active. -

-

- For example: -

+
+
+

+ + What your users see + +

+

+ Data of all pages a user has visited where your Offen installation is active. +

+

+ For example: +

- -
-

- 1 -

-

- Unique websites -

-

- 2 -

-

- Unique sessions -

-

- Top pages -

- - - - - - - - - -
https://www.yourpage.xyz/
https://www.yourpage.xyz/blog/
-
- -
+ +
+

+ 1 +

+

+ Unique websites +

+

+ 5 +

+

+ Unique sessions +

+

+ Top pages +

+ + + + + + + + + + + + +
https://www.yourpage.xyz/
https://www.yourpage.xyz/blog/
https://www.yourpage.xyz/otherpage/
+
- -
+
-
-
+ +
-

- More features -

+
+
-
- temp -

- Accounts can be shared within a team. -

-
-
- temp -

- User data is only stored for 6 months. -

-
-
- temp -

- In-browser screen for an intuitive setup. -

-
-
- temp -

- Detailed documentation is available. -

-
+

+ More features +

-
-
+
+ temp +

+ Accounts can be shared within a team. +

+
+
+ temp +

+ User data is only stored for 6 months. +

+
+
+ temp +

+ In-browser screen for an intuitive setup. +

+
+
+ temp +

+ Detailed documentation is available. +

+
-
+
+
- -
+
-
-
-

- Try as user -

-

- Offen is installed on this website. Access your actual usage data now. -

-
- Open Auditorium -
-
-
-
-
+ +
+ +
+
+

+ Try as user +

+

+ Offen is installed on this website. Access your actual usage data now. +

+
+ Open Auditorium +
+
+
+
+
+ +
+ + +
+ +

+ + Essential metrics + +

+ + +
+
+

+ temp1 +

+
+
+ + +
+
+

+ temp2 +

+
+
+
-