Merge pull request #50 from offen/index-update

Index update

homepage/content/pages/index.md

@@ -1,5 +1,5 @@
 title: Transparent web analytics for everyone | Offen
-description: Offen is a free and open source analytics software for websites and web applications. Users can access their data while the operators treat it with respect.
+description: Offen is a fair alternative to common web analytic tools. Respect your users while gaining insight into their behavior. Self hosted, open source and free.
 save_as: index.html
 template: index
 sitemap_priority: 1.0

homepage/pelicanconf.py

@@ -70,9 +70,7 @@ GPG_KEY_FILE = '74B041E23DB29D552644CEB1B18C633D6967FE3F.asc'
 PATREON_URL = 'https://www.patreon.com/offen'
 LINKEDIN_URL = 'https://www.linkedin.com/company/hioffen'
 TWITTER_URL = 'https://twitter.com/hioffen'
-RELEASE_URL = 'https://github.com/offen/offen/releases/latest/'
 RELEASE_DIRECT_URL = 'https://get.offen.dev'
-HEROKU_URL = 'https://github.com/offen/heroku'
 HEROKU_DIRECT_URL = 'https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master'
 
 OFFEN_ACCOUNT_ID = os.environ.get('OFFEN_ACCOUNT_ID', None)

homepage/theme/static/css/fix.css

@@ -66,17 +66,21 @@ LAYOUT
   }
 }
 /* Custom Tachyons class */
+.w55-container,
 .w55 {
-  width: 18.5rem;
+	width: 20rem;
+}
+.w56 {
+  width: 20rem;
+	height: 480px;
 }
 /* Custom media query - extra small */
-@media only screen and (max-width: 30em) {
+@media only screen and (max-width: 40em) {
-  .w55 {
+  .w55-container {
     width: 100%;
   }
 }
 
-
 /* ---------------------------------------------------
 TYPO AND LAYOUT ELEMENTS
 ----------------------------------------------------*/
@@ -105,10 +109,14 @@ em {
   background: linear-gradient(transparent 66%, #fde28c 66%);
   font-style: normal;
 }
-.em-extra {
+.em-mint {
   background: linear-gradient(transparent 66%, #BBD9D3 66%);
   font-style: normal;
 }
+.em-mint-bright {
+  background: linear-gradient(transparent 66%, #CEEBE5 66%);
+  font-style: normal;
+}
 hr {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -335,11 +343,11 @@ GRAPHICS
   background: url(/theme/images/gfx-intro.svg);
 	background-repeat: no-repeat;
 	background-attachment: scroll;
-	background-position: 200px 130px;
+	background-position: 200px 80px;
 }
 @media only screen and (min-width: 30.1em) and (max-width: 60em) {
 	#bg-intro {
-		background-position: calc(20% + 120px) 130px;
+		background-position: calc(20% + 120px) 80px;
 	}
 }
 @media only screen and (max-width: 30em) {
@@ -347,6 +355,20 @@ GRAPHICS
 		background-position: 10px 60px;
 	}
 }
+/* --------------------------------------------- */
+#bg-feature-1 {
+  background: url(/theme/images/gfx-feature-1.png) center;
+	background-repeat: no-repeat;
+}
+#bg-feature-2 {
+  background: url(/theme/images/gfx-feature-2.png) center;
+	background-repeat: no-repeat;
+}
+#bg-feature-3 {
+  background: url(/theme/images/gfx-feature-3.png) center;
+	background-repeat: no-repeat;
+}
+/* --------------------------------------------- */
 #bg-feature {
   background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
 }

homepage/theme/templates/base.html

@@ -86,7 +86,7 @@
           <div class="pt3 pb6 ph3" id="bg-cta-bottom">
             <div class="mw8 center">
               <div class="flex flex-wrap justify-center">
-                <div class="w55 mh3 pt5 tc">
+                <div class="w55 ph3 pt5 tc">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     Participate
                   </h2>
@@ -96,7 +96,7 @@
                   <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
                 </div>
                 {% if is_article != 'true' %}
-                <div class="w55 mh3 pt5 tc">
+                <div class="w55 ph3 pt5 tc">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     In the making
                   </h2>
@@ -106,7 +106,7 @@
                   <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/blog/">Project status</a>
                 </div>
                 {% endif %}
-                <div class="w55 mh3 pt5 tc">
+                <div class="w55 ph3 pt5 tc">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     Ethical internet
                   </h2>

homepage/theme/templates/getstarted.html

@@ -18,17 +18,11 @@
         <p class="b tc lh-title tracked-min ma0 mt3 mb2">
           Single binary file <br>for Linux, Windows or MacOS
         </p>
-        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
+        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
-        <div class="tc">
-          <a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ RELEASE_URL }}" rel="noopener" target="_blank">Open GitHub release page</a>
-        </div>
         <p class="b tc lh-title tracked-min ma0 mt4 mb2">
-          Your own instance on Heroku
+          Your own Offen instance
         </p>
-        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy</a>
+        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy to Heroku</a>
-        <div class="tc">
-          <a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ HEROKU_URL }}" rel="noopener" target="_blank">Open GitHub configuration repository</a>
-        </div>
       </div>
     </div>
   </div>

homepage/theme/templates/index.html

@@ -3,7 +3,7 @@
 {% block content %}
   <div class="w-100 mt5-ns cclr-mid-yellow">
     <div class="mw8 center" id="bg-intro">
-      <div class="flex justify-center pt6-ns pt5 ph4">
+      <div class="flex justify-center pt5 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>
@@ -20,9 +20,9 @@
             Transparent <span>web analytics</span>
           </h1>
           <p class="ma0 mb4">
-            Offen is an open source analytics software for websites <span>and web applications. It allows respectful handling of data </span> <span>for operators and users.</span>
+            Offen is a fair alternative to common web analytic tools. <span>Pay respect to your users while gaining insight into their behavior. </span>Self hosted, open source and free.
           </p>
-          <div class="pb6">
+          <div class="pb5 mb2">
             <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/get-started/" rel="noopener">Start now</a>
           </div>
         </div>
@@ -30,40 +30,49 @@
     </div>
   </div>
 
-  <div class="w-100 cclr-mid-mint">
+  <div class="w-100" id="bg-feature">
-    <div class="pt3 pb6 ph3" id="bg-feature">
+      <div class="center">
-      <div class="mw8 center">
+          <div class="flex flex-wrap justify-center w-100">
-        <div class="flex flex-wrap justify-around">
+            <div class="flex justify-center w55-container" id="bg-feature-1">
-          <div class="w55 mh3 mt5 tc cclr-mid-mint">
+              <div class="w56 tc pa3">
-            <h2 class="f25 normal lh-solid ma0 mb3">
+                <h2 class="f25 normal lh-solid mt5 mb3">
-              <em>Free & Open</em>
+                  <em class="em-mint-bright">
-            </h2>
+                    Free & Open
-            <p class="ma0">
+                  </em>
-              Anyone can audit our open source code to verify it works as intended. Offen will always be available for free.
+                </h2>
-            </p>
+                <p class="ma0 mb5">
+                  Our open source code can be fully audited by the community. It will always be available for free. Seriously.
+                </p>
+              </div>
+            </div>
+            <div class="flex justify-center w55-container" id="bg-feature-3">
+              <div class="w56 tc pa3">
+                <h2 class="f25 normal lh-solid mt6 mb3">
+                  <em class="em-mint-bright">
+                    Self hosted
+                  </em>
+                </h2>
+                <p class="ma0">
+                  Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data.
+                </p>
+              </div>
+            </div>
+            <div class="flex justify-center w55-container" id="bg-feature-2">
+              <div class=" w56 tc pa3">
+                <h2 class="f25 normal lh-solid mt7 mb3">
+                  <em class="em-mint-bright">
+                    Fair & Secure
+                  </em>
+                </h2>
+                <p class="ma0">
+                  Pay respect to your website visitors. Gain valuable insights at the same time. All data is encrypted end-to-end.
+                </p>
+              </div>
+            </div>
           </div>
-          <div class="w55 mh3 mt5 tc cclr-mid-mint">
-            <h2 class="f25 normal lh-solid ma0 mb3">
-              <em>Fair & Secure</em>
-            </h2>
-            <p class="ma0">
-              Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end.
-            </p>
-          </div>
-          <div class="w55 mh3 mt5 tc cclr-mid-mint">
-            <h2 class="f25 normal lh-solid ma0 mb3">
-              <em>Easy to use</em>
-            </h2>
-            <p class="ma0">
-              Simply paste our code into the source of your website. Users can visit the auditorium to access their data.
-            </p>
-          </div>
-        </div>
       </div>
-    </div>
   </div>
 
-
   <div class="w-100 cclr-mid-black white">
     <div class="pt3 pb6 ph4" id="bg-cta-top">
       <div class="flex justify-end mw6 center pt5">
@@ -93,7 +102,6 @@
   </div>
 {% endblock %}
 
-
 {% block outro %}
 <div class="w-100" id="bg-feature">
   <div class="pv5 ph4">
@@ -110,17 +118,11 @@
         <p class="b tc lh-title tracked-min ma0 mt3 mb2">
           Single binary file <br>for Linux, Windows or MacOS
         </p>
-        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
+        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
-        <div class="tc">
-          <a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ RELEASE_URL }}" rel="noopener" target="_blank">Open GitHub release page</a>
-        </div>
         <p class="b tc lh-title tracked-min ma0 mt4 mb2">
-          Your own instance on Heroku
+          Your own Offen instance
         </p>
-        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy</a>
+        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy to Heroku</a>
-        <div class="tc">
-          <a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ HEROKU_URL }}" rel="noopener" target="_blank">Open GitHub configuration repository</a>
-        </div>
       </div>
     </div>
   </div>
@@ -130,7 +132,7 @@
     <div class="mw8 center flex flex-column flex-row-ns mb3 mb5 cclr-mid-yellow">
       <div class="w-100 w-60-ns">
         <h2 class="f25 normal tc tl-ns ma0 mb3">
-          <em class="em-extra">
+          <em class="em-mint">
             Get started now
           </em>
         </h2>