Merge pull request #77 from offen/update-may-24

update table

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%;
 	}
 }

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>