From b3808c2173f2f3106aafcaafb1ba6571a1e5f19f Mon Sep 17 00:00:00 2001
From: Hendrik Niefeld <hello@niefeld.com>
Date: Sun, 24 May 2020 20:08:40 +0200
Subject: [PATCH] update table

---
 homepage/theme/static/css/fix.css             |  34 ++++++++++++++----
 .../theme/static/images/gfx-table-fade.png    | Bin 0 -> 6308 bytes
 homepage/theme/templates/index.html           |  20 +++++++----
 3 files changed, 40 insertions(+), 14 deletions(-)
 create mode 100644 homepage/theme/static/images/gfx-table-fade.png

diff --git a/homepage/theme/static/css/fix.css b/homepage/theme/static/css/fix.css
index aae8f8d..5e1d6e6 100644
--- a/homepage/theme/static/css/fix.css
+++ b/homepage/theme/static/css/fix.css
@@ -95,7 +95,8 @@ LAYOUT
 	width: 27%;
 }
 .wx-table-b,
-.wx-table-c {
+.wx-table-c,
+.wx-table-d {
 	width: 16%;
 }
 .hx24 {
@@ -124,7 +125,8 @@ LAYOUT
 	.wx-table-b {
 		width: 20%;
 	}
-	.wx-table-c {
+	.wx-table-c,
+	.wx-table-d {
 		width: 16%;
 	}
 	.hx-try-user {
@@ -139,7 +141,8 @@ LAYOUT
 		width: 100%;
 	}
 	.wx-table-b,
-	.wx-table-c {
+	.wx-table-c,
+	.wx-table-d {
 		width: 25%;
 	}
 	.hx-compare-c,
@@ -318,12 +321,29 @@ i {
 .inner-shaddow {
 	box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.75);
 }
+/* Table */
+	.bg-table {
+		display: none;
+	}
+.hscroll {
+	padding: 2rem;
+}
 @media only screen and (max-width: 45em) {
+	.bg-table {
+		display: inline-block;
+		top: 0;
+		right: 0;
+		z-index : 560;
+	}
 	.hscroll {
 	  overflow-x: auto;
 	}
 	.hscroll table {
-		width: 46rem;
+		width: 48rem;
+	}
+	.wx-table-d {
+		width: 8rem;
+		padding-right: 4rem;
 	}
 }
 
@@ -395,10 +415,11 @@ STACKING IMAGES
 	z-index : 550;
 }
 .bg-cta-pfeil {
-	top: -11rem;
+	top: -13rem;
 	left: 66%;
 	z-index : 570;
 }
+
 @media only screen and (min-width: 30em) {
 	.bg-feature-1 {
 		left: calc(50% - 21rem);
@@ -413,10 +434,9 @@ STACKING IMAGES
 	.bg-metrics-bulb {
 		top: 11rem;
 		left: calc(100% - 30rem);
-		z-index : 550;
 	}
 	.bg-cta-pfeil {
-		top: -12rem;
+		top: -14rem;
 		left: 72%;
 	}
 }
diff --git a/homepage/theme/static/images/gfx-table-fade.png b/homepage/theme/static/images/gfx-table-fade.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d8af731887728fca205840749e06b449b3baf38
GIT binary patch
literal 6308
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

literal 0
HcmV?d00001

diff --git a/homepage/theme/templates/index.html b/homepage/theme/templates/index.html
index 88edde6..37fc491 100644
--- a/homepage/theme/templates/index.html
+++ b/homepage/theme/templates/index.html
@@ -499,7 +499,13 @@
 
             <!-- BOX -->
             <div class="mh0 mh5-l">
-              <div class="w-100 dib br0 br2-l pa4 mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
+              <div class="w-100 dib br0 br2-l mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
+
+                <div class="relative">
+                  <div class="absolute bg-table">
+                    <img src="/theme/images/gfx-table-fade.png" alt="smile" width="100px" height="290px">
+                  </div>
+                </div>
 
                 <div class="hscroll">
 
@@ -511,7 +517,7 @@
                         <td class="wx-table-b truncate pv2 pl2 pr1 gray">Google Analytics</td>
                         <td class="wx-table-b truncate pv2 pl2 pr1 gray">Matomo On-Premise</td>
                         <td class="wx-table-c truncate pv2 pl2 pr1 gray">Fathom</td>
-                        <td class="wx-table-c truncate pv2 pl2 pr1">Offen</td>
+                        <td class="wx-table-d truncate pv2 pl2 pr1">Offen</td>
                       </tr>
 
                       <tr class="bg-near-white">
@@ -531,7 +537,7 @@
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
                           </svg>
                         </td>
-                        <td class="truncate pv2 pl2 pr1">
+                        <td class="wx-table-d truncate pv2 pl2 pr1">
                           <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
                           </svg>
@@ -555,7 +561,7 @@
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
                           </svg>
                         </td>
-                        <td class="truncate pv2 pl2 pr1">
+                        <td class="wx-table-d truncate pv2 pl2 pr1">
                           <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
                           </svg>
@@ -579,7 +585,7 @@
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
                           </svg>
                         </td>
-                        <td class="truncate pv2 pl2 pr1">
+                        <td class="wx-table-d truncate pv2 pl2 pr1">
                           <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
                           </svg>
@@ -603,7 +609,7 @@
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
                           </svg>
                         </td>
-                        <td class="truncate pv2 pl2 pr1">
+                        <td class="wx-table-d truncate pv2 pl2 pr1">
                           <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
                           </svg>
@@ -627,7 +633,7 @@
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
                           </svg>
                         </td>
-                        <td class="truncate pv2 pl2 pr1">
+                        <td class="wx-table-d truncate pv2 pl2 pr1">
                           <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
                           </svg>