Merge pull request #154 from offen/update-april-07

Update april 07

homepage/content/pages/about.md

@@ -2,6 +2,7 @@ title: About | Offen
 description: Who we are, what we do, who supports us and how you can can get in touch.
 slug: about
 bottom_cta: fair
+sitemap_priority: 0.3
 
 # About
 

homepage/pelicanconf.py

@@ -103,7 +103,7 @@ DOCKER_DIRECT_URL = 'https://hub.docker.com/r/offen/offen'
 HEROKU_DIRECT_URL = 'https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master'
 UBERSPACE_DIRECT_URL = 'https://lab.uberspace.de/guide_offen.html'
 YUNOHOST_DIRECT_URL = 'https://github.com/offen/offen_ynh'
-OFFEN_AUDITORIUM_URL = 'https://offen.offen.dev/auditorium/'
+OFFEN_AUDITORIUM_URL = 'https://offen.offen.dev/auditorium/?utm_source=index'
 DOCS_URL = 'https://docs.offen.dev/'
 DOCS_GETSTARTED_URL = 'https://docs.offen.dev/running-offen/'
 DOCS_GETSTARTED_URL_CAMPAIGN = 'https://docs.offen.dev/running-offen/?utm_campaign=get-started'

homepage/theme/static/css/fix.css

@@ -44,6 +44,12 @@ COLORS
 	 border-color: #39352A;
 }
 
+/* Gray */
+.cclr-fnt-gray-mid {
+	 color: #777777;
+}
+
+
 /* White */
 .cclr-bg-white-dark {
 	background-color: #f9f7f2;
@@ -120,7 +126,8 @@ LAYOUT
 .hx-compare-c,
 .hx-compare-d,
 .hx-metrics,
-.hx-localize,
+.hx-localize-a,
+.hx-localize-b,
 .hx-difference {
 	height: 100%;
 }
@@ -162,8 +169,11 @@ LAYOUT
 	.hx-metrics {
 		height: 132rem;
 	}
-	.hx-localize {
+	.hx-localize-a {
-		height: 19rem;
+		height: 14rem;
+	}
+	.hx-localize-b {
+		height: 17rem;
 	}
 	.hx-difference {
 		height: 33rem;
@@ -469,10 +479,16 @@ STACKING IMAGES
 	z-index : 550;
 }
 .bg-localize {
-	top: -7rem;
+	top: -2.2rem;
-	left: 3rem;
+	left: calc(100% - 16rem);
+	width: 220px;
 	z-index : 560;
 }
+.bg-localize-marker {
+	top: 2rem;
+	left: -1.8rem;
+	z-index : 561;
+}
 .bg-cta-pfeil {
 	top: -13rem;
 	left: 66%;
@@ -495,8 +511,11 @@ STACKING IMAGES
 		left: calc(100% - 30rem);
 	}
 	.bg-localize {
-		top: -7rem;
+		left: calc(100% - 22rem);
-		left: calc(100% - 25rem);
+	}
+	.bg-localize-marker {
+		top: 1rem;
+		left: -2rem;
 	}
 	.bg-cta-pfeil {
 		top: -14rem;
@@ -515,8 +534,13 @@ STACKING IMAGES
 		left: calc(100% - 20rem);
 	}
 	.bg-localize {
-		top: -2rem;
+		top: 6rem;
-		left: 35rem;
+		left: 43rem;
+		width: 300px;
+	}
+	.bg-localize-marker {
+		top: -0.5rem;
+		left: 4rem;
 	}
 	.bg-cta-pfeil {
 		top: -12rem;

homepage/theme/templates/article.html

@@ -11,6 +11,11 @@
 {% block content %}
   <main class="w-100 mt5-ns gray">
     <div class="mw7 center pb5 bg-white">
+      <div class="dib gray bg-white ph3 ph5-ns pt4">
+        <p class="f4 ma0 mb4">
+          Offen is a fair, open and self hosted web analytics tool that treats operators and users as equal parties.
+        </p>
+      </div>
       <figure class="ma0">
         <img alt="{{ title }}" src="{{ image_url }}"/>
         {% if article.image_caption %}

homepage/theme/templates/index.html

@@ -4,7 +4,7 @@
 {% block content %}
   <div class="w-100 mt5-ns cclr-bg-yellow-mid">
     <div class="mw8 center">
-      <div class="flex justify-center ph4">
+      <div class="flex justify-center pt3 ph4">
         <div class="dn db-ns w-20 tr pr3 pb3">
           <img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="58" height="63">
         </div>
@@ -504,18 +504,18 @@
         </div>
       </div>
 
-      <!-- LOCALIZE -->
+      <!-- LOCALIZE A -->
       <div class="w-100">
 
-        <div class="w-100 hx-localize dib cclr-bg-white-fade">
-          <div class="h-100 bg-pattern">
-
         <div class="relative">
           <div class="absolute bg-localize">
-                <img src="/theme/images/gfx-localize.png" alt="smile" width="300px" height="150px">
+            <img src="/theme/images/gfx-localize.png" alt="languages" width="300px">
           </div>
         </div>
 
+        <div class="w-100 hx-localize-a dib cclr-bg-white-fade">
+          <div class="h-100 bg-pattern">
+
             <div class="wx24-metrics center">
 
               <p class="f3 lh-solid ma0 ml0 ml5-l mt5 mb4">
@@ -523,10 +523,10 @@
                   Localize
                 </em>
               </p>
-              <p class="ma0 ml0 ml5-l w-100 w-50-l mb2">
+              <p class="ma0 ml0 ml5-l w-100 w-60-l mb2">
-                <i>Offen is currently available in</i> English, German and French.
+                <i>Offen is currently available in</i> English, German <i>and</i> French.
               </p>
-              <p class="ma0 ml0 ml5-l w-100 w-50-l mb5">
+              <p class="ma0 ml0 ml5-l w-100 w-60-l mb4">
                 <i>Our</i> consent banner and the Auditorium <i>for operators as well as users can be displayed</i> in the respective locale.
               </p>
             </div>
@@ -534,6 +534,34 @@
           </div>
         </div>
 
+      </div>
+      <!-- LOCALIZE B -->
+      <div class="w-100">
+
+        <div class="w-100 hx-localize-b dib cclr-bg-white-fade">
+          <div class="h-100 bg-pattern">
+
+            <div class="wx24-metrics center">
+              <div class="relative">
+                <div class="absolute bg-localize-marker">
+                  <img src="/theme/images/gfx-localize-marker.png" alt="marker" width="50px">
+                </div>
+              </div>
+              <p class="ma0 ml0 pl4 pl6-l w-100 w-60-l mt4 mb2">
+                Contributions welcome
+              </p>
+              <p class="ma0 ml0 pl4 pl6-l w-100 w-60-l mb2">
+                <i>Support fair web analytics by contributing Spanish, Portuguese and other language versions. Feel free to <a class="b link dim gray" href="mailto:hioffen@posteo.de">request an invitation</a> to our translation workflow.</i>
+              </p>
+              <p class="ma0 ml0 pl4 pl6-l w-100 w-60-l mb5">
+                <i>You are invited to collaborate on other areas of the application as well. Check out our in-depth <a class="b link dim gray" href="https://docs.offen.dev/developing-offen/" target="_blank" rel="noopener">developer guide.</a></i>
+              </p>
+
+            </div>
+
+          </div>
+        </div>
+
       </div>
 
       <!-- TABLE -->