Merge pull request #110 from offen/development

Update get started und bottom cta

homepage/content/articles/0010-milestone-1.md

@@ -5,6 +5,7 @@ slug: laying-foundation-for-fair-web-analytics
 sitemap_priority: 0.6
 image_url: /theme/images/offen-blog-0010-milestone1.jpg
 author: Hendrik Niefeld
+bottom_cta: blog
 
 # Episode One — Laying the foundation for fair web analytics
 

homepage/content/articles/0020-untold-roads.md

@@ -5,6 +5,7 @@ slug: untold-roads-versioning-early-stage-software
 sitemap_priority: 0.7
 image_url: /theme/images/offen-blog-0020-untoldRoads.jpg
 author: Frederik Ring
+bottom_cta: blog
 
 # Untold roads to v1.0
 

homepage/content/articles/0030-milestone-2.md

@@ -5,6 +5,7 @@ slug: collecting-data-securely
 sitemap_priority: 0.6
 image_url: /theme/images/offen-blog-0030-milestone-2.jpg
 author: Hendrik Niefeld
+bottom_cta: blog
 
 # Episode Two — Collecting data securely
 

homepage/content/articles/0040-test-offen-today.md

@@ -5,6 +5,7 @@ slug: test-offen-today
 sitemap_priority: 0.7
 image_url: /theme/images/offen-blog-0040-test-offen-today.jpg
 author: Hendrik Niefeld
+bottom_cta: blog
 
 # Test Offen today
 

homepage/content/articles/0050-milestone-3.md

@@ -5,6 +5,7 @@ slug: displaying-data
 sitemap_priority: 0.6
 image_url: /theme/images/offen-blog-0050-milestone-3.jpg
 author: Frederik Ring
+bottom_cta: blog
 
 # Episode Three — Displaying data
 

homepage/content/articles/0060-milestone-4.md

@@ -6,6 +6,7 @@ sitemap_priority: 0.6
 image_url: /theme/images/offen-blog-0060-milestone-4.jpg
 image_caption: <a class="link b dim moon-gray" target="_blank" href="https://www.flickr.com/photos/wocintechchat/25926651781/in/album-72157664006621903/">Photo</a> by WOCinTechChat / <a class="link b dim moon-gray" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>
 author: Frederik Ring
+bottom_cta: blog
 
 # Episode Four — Managing data
 

homepage/content/articles/0070-budget.md

@@ -5,6 +5,7 @@ slug: hosting-offen-on-budget
 sitemap_priority: 0.7
 image_url: /theme/images/offen-blog-0070-budget.jpg
 author: Frederik Ring
+bottom_cta: blog
 
 # Hosting Offen on a budget
 

homepage/content/articles/0080-beta.md

@@ -5,6 +5,7 @@ slug: privacy-friendly-and-fair-web
 sitemap_priority: 0.7
 image_url: /theme/images/offen-blog-0080-beta.jpg
 author: Hendrik Niefeld
+bottom_cta: blog
 
 # Let's build a web that is privacy friendly and fair
 

homepage/content/articles/0090-milestone-5.md

@@ -5,6 +5,7 @@ slug: resilience-documentation
 sitemap_priority: 0.6
 image_url: /theme/images/offen-blog-0090-milestone-5.jpg
 author: Frederik Ring
+bottom_cta: blog
 
 # Episode Five — Resilience and documentation
 

homepage/content/pages/404.md

@@ -3,6 +3,7 @@ description: This link isn’t working.
 save_as: 404.html
 no_stats: true
 exclude_from_sitemap: true
+bottom_cta: budget
 
 
 ![Page not Found](/theme/images/offen-404.png){:class="image-text-600-338"}

homepage/content/pages/about.md

@@ -1,10 +1,10 @@
 title: About | Offen
 description: Who we are, who supports us and how you can can get in touch.
 slug: about
+bottom_cta: fair
 
 ## About
 
-
 ### Status Quo
 
 Offen is created by [Frederik Ring][frederik-ring]{: target="_blank"} and [Hendrik Niefeld][hendrik-niefeld]{: target="_blank"} and is currently being conceptually designed and in active development, both as a product as well as as a software.

homepage/content/pages/deep-dive.md

@@ -2,6 +2,7 @@ title: Deep dive | Offen
 description: What do users know about their data? How can they access it? Do operators benefit from a careful handling of user data? Does Offen work in accordance with GDPR?
 slug: deep-dive
 sitemap_priority: 0.7
+bottom_cta: budget
 
 ## Deep dive
 

homepage/content/pages/legal-notice.md

@@ -2,6 +2,7 @@ title: Legal Notice | Offen
 description: Information in accordance with Section 5 TMG
 slug: legal-notice
 exclude_from_sitemap: true
+bottom_cta: fair
 
 ## Legal Notice
 

homepage/pelicanconf.py

@@ -95,6 +95,7 @@ MASTODON_URL = 'https://fosstodon.org/@offen'
 RELEASE_DIRECT_URL = 'https://get.offen.dev'
 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'
 OFFEN_AUDITORIUM_URL = 'https://offen.offen.dev/auditorium/'
 DOCS_GETSTARTED_URL = 'https://docs.offen.dev/running-offen/'
 DOCS_TRYDEMO_URL = 'https://docs.offen.dev/running-offen/test-drive/'

homepage/theme/static/css/fix.css

@@ -54,8 +54,14 @@ COLORS
 .cclr-bg-white-fade-metrics {
 	background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #F3F0E7;
 }
-
+.cclr-bg-white-responsive {
-
+	background-color: #f9f7f2;
+}
+@media only screen and (min-width: 60rem) {
+	.cclr-bg-white-responsive {
+		background-color: #ffffff;
+	}
+}
 /* ---------------------------------------------------
 LAYOUT
 ----------------------------------------------------*/
@@ -281,6 +287,19 @@ body {
 .f25 {
   font-size: 1.9rem;
 }
+.f26 {
+  font-size: 1.9rem;
+}
+@media only screen and (min-width: 30em) {
+	.f26 {
+	  font-size: 2.25rem;
+	}
+}
+@media only screen and (min-width: 60em) {
+	.f26 {
+	  font-size: 1.9rem;
+	}
+}
 span {
   display: table;
 }
@@ -362,7 +381,7 @@ pre {
 code {
 	border-radius: 3px;
   font-size: 85%;
-	padding: 0.2em 0.4em;
+	padding: 0.2em 0;
 	color: #39352A;
 	background-color: #EEEEEE;
 }
@@ -399,6 +418,12 @@ IMAGES
     height: 190px;
   }
 }
+@media only screen and (min-width: 60em) {
+  .larger-image {
+    margin-left: 0rem;
+    margin-right: 0rem;
+  }
+}
 
 
 /* ---------------------------------------------------
@@ -535,7 +560,7 @@ nav ul li {
 nav ul li a,
 nav ul li a:visited {
   display: block;
-  padding: 0 1.4rem;
+  padding: 0 1.2rem;
   line-height: 4rem;
   text-decoration: none;
   font-weight: 700;

homepage/theme/templates/archives.html

@@ -5,30 +5,36 @@
 {% set href = 'blog/' %}
 {% set no_stats = False %}
 {% set template = 'archives' %}
-{% set cta_1 = True %}
+{% set bottom_cta = 'index' %}
 
 {% block content %}
-  {% for article in articles %}
+  <div class="mw8 center cclr-bg-white-responsive pr5-l">
-    {% if loop.index != 1 %}
+    <div class="flex flex-wrap mt0 mt5-l">
-      <hr class="mb5 b--none">
+    {% for article in articles %}
-    {% endif %}
+      <div class="w-100 w-50-l">
-    <article class="w-100 mt5-ns gray">
+        {% if loop.index != 1 %}
-      <div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
+          <hr class="mb5 b--none db dn-l">
-          <figure class="larger-image mb4">
+        {% endif %}
-            <a href="{{ article.slug }}">
+        <article class="w-100 mt5-m mt0-l gray">
-              <img alt="{{ article.title }}" src="{{ article.image_url }}"/>
+          <div class="mw8 center pv5 ph3 ph5-m pr0-l pl5-l bg-white">
-            </a>
+              <figure class="larger-image mb4">
-          </figure>
+                <a href="{{ article.slug }}">
-          <h6 class="f5 lh-solid normal ma0 light-silver">
+                  <img alt="{{ article.title }}" src="{{ article.image_url }}"/>
-            {{ article.date | strftime('%d %b %Y') }}{% if article.modified %}(article.updated {{ article.modified | strftime('%d %b %Y') }}){% endif %}, {{ article.author }}
+                </a>
-          </h6>
+              </figure>
-          <h1 class="f2 normal lh-title mt3 ma0 mb3 light-silver">
+              <h6 class="f5 lh-solid normal ma0 light-silver">
-            <a href="{{ article.slug }}" class="link b dim gray">{{ article.title }}</a>
+                {{ article.date | strftime('%d %b %Y') }}{% if article.modified %}(article.updated {{ article.modified | strftime('%d %b %Y') }}){% endif %}, {{ article.author }}
-          </h1>
+              </h6>
-          <p class="">
+              <h1 class="f26 normal lh-title mt3 ma0 mb3 light-silver">
-            {{ article.description }} <a href="{{ article.slug }}" class="link b dim gray">Read more</a>
+                <a href="{{ article.slug }}" class="link b dim gray">{{ article.title }}</a>
-          </p>
+              </h1>
+              <p class="">
+                {{ article.description }} <a href="{{ article.slug }}" class="link b dim gray">Read more</a>
+              </p>
+          </div>
+        </article>
       </div>
-    </article>
     {% endfor %}
+    </div>
+  </div>
 {% endblock %}

homepage/theme/templates/article.html

@@ -6,7 +6,7 @@
 {% set image_url = article.image_url %}
 {% set no_stats = article.no_stats %}
 {% set template = article.template %}
-{% set cta_1 = True %}
+{% set bottom_cta = article.bottom_cta %}
 
 {% block content %}
   <main class="w-100 mt5-ns gray">

homepage/theme/templates/base.html

@@ -102,45 +102,86 @@
       {% else %}
         {% block outro %}
           <div class="w-100 cclr-bg-yellow-mid">
-            <div class="pt3 pb4 ph3 bg-pattern">
+            <div class="pt3 pb4 bg-pattern">
               <div class="mw8 center">
-                <div class="flex flex-wrap justify-center tc pt3">
 
-                  {% if cta_1 %}
+                  {% if bottom_cta == 'index' %}
-                    <div class="wx24 ph4-ns pt4 pb5 cclr-bg-yellow-mid">
+                  <div class="flex flex-wrap justify-center tc ph3 pv5">
-                      <h2 class="f25 normal lh-solid ma0 mb3">
+                    <div class="ph4-ns cclr-bg-yellow-mid">
-                        Participate
+                      <h2 class="f26 ma0 mb3 lh-title">
+                        <a class="b link dim cclr-fnt-black-mid" href="/">How do fair web analytics work?</a>
                       </h2>
-                      <p class="ma0 mb3">
+                      <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/" rel="noopener">Open summary</a>
-                        Audit our open source code and feel free to make a contribution.
-                      </p>
-                      <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="{{ GITHUB_REPO }}" rel="noopener" target="_blank">Get involved</a>
                     </div>
-                  {% endif %}
-
-                  {% if cta_2 %}
-                    <div class="wx24 ph4-ns pt4 pb5 cclr-bg-yellow-mid">
-                      <h2 class="f25 normal lh-solid ma0 mb3">
-                        In the making
-                      </h2>
-                      <p class="ma0 mb3">
-                        Discover what is already up and running and where we want to go.
-                      </p>
-                      <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/blog/">Open blog</a>
-                    </div>
-                  {% endif %}
-
-                  <div class="wx24 ph4-ns pt4 pb5 cclr-bg-yellow-mid">
-                    <h2 class="f25 normal lh-solid ma0 mb3">
-                      Ethical internet
-                    </h2>
-                    <p class="ma0 mb3">
-                      Help to ensure that Offen is independent and can be sustained.
-                    </p>
-                    <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>
                   </div>
+                  {% endif %}
+
+                  {% if bottom_cta == 'blog' %}
+                  <div class="flex flex-wrap justify-center tc ph3 pv5">
+                    <div class="ph4-ns cclr-bg-yellow-mid">
+                      <h2 class="f26 ma0 mb3 lh-title">
+                        <a class="b link dim cclr-fnt-black-mid" href="/blog/">Continue reading?</a>
+                      </h2>
+                      <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/blog/" rel="noopener">See all blog posts</a>
+                    </div>
+                  </div>
+                  {% endif %}
+
+                  {% if bottom_cta == 'fair' %}
+                  <div class="ph3 ph0-m pv5">
+                    <h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
+                      Also on our blog
+                    </h2>
+                    <div class="mw7 center flex flex-wrap ph5-ns">
+                      <div class="w-100 w-50-l">
+                        <figure class="ma0 pr3-l mb3 mb0-l">
+                          <a href="/blog/privacy-friendly-and-fair-web">
+                            <img alt="Let's build a web that is privacy friendly and fair" src="/theme/images/offen-blog-0080-beta.jpg">
+                          </a>
+                        </figure>
+                      </div>
+                      <div class="w-100 w-50-l cclr-bg-yellow-mid">
+                        <div class="pl3-l">
+                          <h3 class="f3 normal lh-title ma0 mb2">
+                            <a href="/blog/privacy-friendly-and-fair-web" class="link b dim cclr-fnt-black-mid">Let's build a web that is privacy friendly and fair</a>
+                          </h3>
+                          <p class="ma0">
+                            What does the term 'privacy friendly' actually stand for? Mostly it's just about technical issues that don't tackle the underlying problem. <a href="/blog/privacy-friendly-and-fair-web" class="link b dim cclr-fnt-black-mid">Read more</a>
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  {% endif %}
+
+                  {% if bottom_cta == 'budget' %}
+                  <div class="ph3 ph0-m pv5">
+                    <h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
+                      Also on our blog
+                    </h2>
+                    <div class="mw7 center flex flex-wrap ph5-ns">
+                      <div class="w-100 w-50-l">
+                        <figure class="ma0 pr3-l mb3 mb0-l">
+                          <a href="/blog/hosting-offen-on-budget">
+                            <img alt="Hosting Offen on a budget" src="/theme/images/offen-blog-0070-budget.jpg">
+                          </a>
+                        </figure>
+                      </div>
+                      <div class="w-100 w-50-l cclr-bg-yellow-mid">
+                        <div class="pl3-l">
+                          <h3 class="f3 normal lh-title ma0 mb2">
+                            <a href="/blog/hosting-offen-on-budget" class="link b dim cclr-fnt-black-mid">Hosting Offen on a budget</a>
+                          </h3>
+                          <p class="ma0">
+                            Here are some real world options for hosting Offen on a budget. Let's compare how they relate in terms of ease of deployment, performance and pricing. <a href="/blog/hosting-offen-on-budget" class="link b dim cclr-fnt-black-mid">Read more</a>
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  {% endif %}
+
 
-                </div>
               </div>
             </div>
           </div>

homepage/theme/templates/getstarted.html

@@ -19,7 +19,9 @@
           Single binary file <br>for Linux, Windows or MacOS
         </p>
         <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 white cclr-bg-black-mid" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
-
+      </div>
+        <hr class="ma0 mb5 b--black-05">
+      <div class="flex flex-column items-center">
         <p class="lh-title ma0 mb2 gray">
           Offen as a lightweight<br> Docker image
         </p>
@@ -28,7 +30,12 @@
         <p class="lh-title ma0 mb2 gray">
           Your own instance on Heroku
         </p>
-        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb6 white cclr-bg-black-mid" href="{{ HEROKU_DIRECT_URL }}" target="_blank" rel="noopener">Deploy to Heroku</a>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 white cclr-bg-black-mid" href="{{ HEROKU_DIRECT_URL }}" target="_blank" rel="noopener">Deploy to Heroku</a>
+
+        <p class="lh-title ma0 mb2 gray">
+          Your own instance on Uberspace
+        </p>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb6 white cclr-bg-black-mid" href="{{ UBERSPACE_DIRECT_URL }}" target="_blank" rel="noopener">Deploy to Uberspace</a>
       </div>
 
       <hr class="ma0 mb5 b--black-05">

homepage/theme/templates/page.html

@@ -6,7 +6,7 @@
 {% set image_url = page.image_url %}
 {% set no_stats = page.no_stats %}
 {% set template = page.template %}
-{% set cta_2 = True %}
+{% set bottom_cta = page.bottom_cta %}
 
 {% block content %}
   <main class="w-100 mt5-ns gray">

homepage/theme/templates/trydemo.html

@@ -39,13 +39,20 @@
       <hr class="ma0 mb5 b--black-05">
 
       <h3 class="f25 normal tc ma0 mb5">
-        Read the docs
+        Learn more
       </h3>
       <div class="flex flex-column items-center">
         <p class="lh-title tc ma0 mb2 gray">
           Details on how to<br> install and run Offen
         </p>
-        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 cclr-fnt-black-mid" href="{{ DOCS_TRYDEMO_URL }}" rel="noopener" target="_blank">Open Docs</a>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 mb5 cclr-brd-black-mid cclr-fnt-black-mid" href="{{ DOCS_TRYDEMO_URL }}" rel="noopener" target="_blank">Open Docs</a>
+      </div>
+
+      <div class="flex flex-column items-center">
+        <p class="lh-title tc ma0 mb2 gray">
+          All you need<br> to use Offen in production
+        </p>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 mb5 cclr-brd-black-mid white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
       </div>
 
     </div>