bg svg details

homepage/theme/templates/base.html

@@ -80,7 +80,7 @@
   {% if page.href == "/" %}
     <div class="intro">
       <div class="container-reader">
-        <div class="bg">
+        <div class="bg" id="bg-intro">
           <div class="sign">
             <img src="/theme/images/offen-sign-brand-white.svg" alt="offen logo" width="152" height="94">
           </div>
@@ -91,7 +91,7 @@
             <strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
           </p>
           <div class="btn-wrapper">
-          <a class="btn btn-color-black" href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
+            <a class="btn btn-color-black" href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
           </div>
         </div>
       </div>
@@ -101,27 +101,33 @@
       <div class="container-full">
         <div class="card-deck">
           <div class="card">
-            <div class="card-gfx">
+            <div class="bg" id="bg-feature-a">
-              <img src="/theme/images/illustration.svg" width="179" height="122">
+              <h2>
-            </div>
+                Free & Open Source
-            <div class="card-text">
+              </h2>
-              Feature Text 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+              <p>
+                Anyone can audit our code to verify it works as intended. <strong>offen</strong> will always be available free of charge.
+              </p>
             </div>
           </div>
           <div class="card">
-            <div class="card-gfx">
+            <div class="bg" id="bg-feature-b">
-              <img src="/theme/images/illustration.svg" width="179" height="122">
+              <h2>
-            </div>
+                Fair & Secure
-            <div class="card-text">
+              </h2>
-              Feature Text 2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+              <p>
+                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>
           <div class="card">
-            <div class="card-gfx">
+            <div class="bg" id="bg-feature-c">
-              <img src="/theme/images/illustration.svg" width="179" height="122">
+              <h2>
-            </div>
+                Easy to use
-            <div class="card-text">
+              </h2>
-              Feature Text 3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+              <p>
+                Simply paste our code into the source of your website. Users can visit the auditorium to access their data.
+              </p>
             </div>
           </div>
         </div>
@@ -132,14 +138,16 @@
       <div class="container-full">
         <div class="card-deck">
           <div class="card">
-              <div class="card-gfx">
+            <div class="bg" id="bg-cta-top">
-                <img src="/theme/images/illustration.svg" width="179" height="122">
+              <h2>
+                Build in progress
+              </h2>
+              <p>
+                What is already up and running and where we want to go.
+              </p>
+              <div class="btn-wrapper">
+                <a class="btn btn-color-white" href="/status/">Project status</a>
               </div>
-              <div class="card-text">
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sit amet, consectetuer adipiscing elit.
-                <div class="btn-wrapper">
-                <a class="btn btn-color-yellow" href="/status/">Status</a>
-                </div>
             </div>
           </div>
         </div>
@@ -165,30 +173,51 @@
   <div class="cta-bottom">
     <div class="container-full">
       <div class="card-deck">
+
         <div class="card">
-          <div class="card-text">
+          <div class="bg" id="bg-cta-bottom">
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+            <h2>
+              Transparent web analytics
+            </h2>
+            <p>
+              <strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
+            </p>
             <div class="btn-wrapper">
-            <a class="btn btn-color-black" href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
+              <a class="btn btn-color-black" href="{{GITHUB_ORG}}">Get involved</a>
             </div>
           </div>
         </div>
+
         <div class="card">
-          <div class="card-text">
+          <div class="bg" id="bg-cta-bottom">
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+            <h2>
+              Build in progress
+            </h2>
+            <p>
+              What is already up and running and where we want to go.
+            </p>
             <div class="btn-wrapper">
-            <a class="btn btn-color-black" href="/status/" target="_blank">Status</a>
+              <a class="btn btn-color-black" href="/status/">Project status</a>
             </div>
           </div>
         </div>
+
         <div class="card">
-          <div class="card-text">
+          <div class="bg" id="bg-cta-bottom">
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+            <h2>
+              Charitable purpose
+            </h2>
+            <p>
+              We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
+            </p>
             <div class="btn-wrapper">
-            <a class="btn btn-color-black" href="{{PATREON_URL}}" target="_blank">Support Us</a>
+              <a class="btn btn-color-black" href="{{PATREON_URL}}">Support us</a>
             </div>
           </div>
         </div>
+
+
+
       </div>
     </div>
   </div>
@@ -197,14 +226,16 @@
     <div class="container-full">
       <div class="card-deck">
         <div class="card">
-            <div class="card-gfx">
+          <div class="bg" id="bg-outro">
-              <img src="/theme/images/illustration.svg" width="179" height="122">
+            <h2>
-            </div>
+              Charitable purpose
-            <div class="card-text">
+            </h2>
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sit amet, consectetuer adipiscing elit.
+            <p>
-              <div class="btn-wrapper">
+              We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
+            </p>
+            <div class="btn-wrapper">
               <a class="btn btn-color-black" href="{{PATREON_URL}}">Support us</a>
-              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -215,8 +246,9 @@
   <div class="footer">
     <div class="footer-card-deck">
       <div class="footer-card">
-        <h3>offen</h3>
+        <h3><strong>offen</strong></h3>
-        <h3>Transparent web analytics</h4>
+        <h4>Transparent web analytics</h4>
+        <h4>for everyone</h4>
       </div>
       <div class="footer-card">
         <p>

styles/index.css

@@ -124,13 +124,13 @@ CARDS
   max-width: 400px;
   color: var(--black-mid);
 }
-.cta-top .card,
-.outro .card {
-  max-width: 600px;
-}
 .cta-top .card {
   color: var(--yellow-mid);
 }
+.card h2,
+.card p  {
+  text-align: center;
+}
 .footer-card p {
   margin: 0 0 2px 0;
 }
@@ -138,9 +138,6 @@ CARDS
 .footer-card:nth-child(2) {
   margin: 0 0 20px 0;
 }
-.card-gfx {
-  margin: 0 0 20px 0;
-}
 /* Mobile Styles */
 @media only screen and (max-width: 960px) {
   .card-deck,
@@ -154,8 +151,6 @@ CARDS
   .card:nth-child(2) {
     margin: 80px 0 80px 0;
   }
-  .card-gfx,
-  .card-text,
   .footer-card {
     text-align: center;
   }
@@ -177,20 +172,6 @@ CARDS
   .card:nth-child(2) {
     margin: 0 40px 0 40px;
   }
-  .card-gfx,
-  .card-text {
-    text-align: center;
-  }
-  .cta-top .card-gfx,
-  .cta-top .card-text,
-  .outro .card-gfx,
-  .outro .card-text {
-    text-align: left;
-  }
-  .cta-top .card-gfx,
-  .outro .card-gfx {
-    margin: 0 40px 0 0;
-  }
   .footer-card-deck {
     justify-content: space-between;
   }
@@ -304,9 +285,14 @@ blockquote {
   border-left: 1px solid var(--grey-bright);
 }
 strong,
-h1 + p strong {
+h1 + p strong,
+.bg strong {
   font-weight: 700;
 }
+.footer-card h3 strong {
+  font-weight: 700;
+  color: var(--yellow-mid);
+}
 strong,
 h3 strong {
   text-decoration: none;
@@ -366,7 +352,15 @@ BUTTONS
   color: var(--black-mid);
   border: solid var(--black-mid) 5px;
 }
-
+.btn-color-white,
+.btn-color-white:visited,
+.btn-color-white:link,
+.btn-color-white:hover,
+.btn-color-white:active {
+  font-weight: 700;
+  color: var(--white);
+  border: solid var(--white) 5px;
+}
 
 /* ---------------------------------------------------
 MENU
@@ -526,13 +520,66 @@ nav ul li ul li a {
 /* ---------------------------------------------------
 GRAPHICS
 ----------------------------------------------------*/
-.intro .bg {
+.bg h2 {
+  margin: 0 0 10px 0;
+}
+#bg-intro {
   width: 75%;
-  background: url(/theme/images/temp.svg) no-repeat center;
+  background: url(/theme/images/gfx-intro.svg) no-repeat center;
+  background-size: cover;
+}
+/*-------------------------*/
+#bg-feature-a,
+#bg-feature-b,
+#bg-feature-c {
+  background: url(/theme/images/gfx-feature-a.svg) no-repeat center;
+  background-size: cover;
+}
+/*-------------------------*/
+#bg-cta-top {
+  width: 75%;
+}
+#bg-cta-top h2,
+#bg-cta-top p {
+  color: var(--white);
+}
+#bg-cta-top h2,
+#bg-cta-top p,
+#bg-cta-top .btn-wrapper {
+  text-align: right;
+}
+#bg-cta-top {
+  background: url(/theme/images/gfx-cta-top.svg) no-repeat center;
+  background-size: cover;
+}
+/*-------------------------*/
+#bg-outro {
+  width: 75%;
+}
+#bg-outro h2,
+#bg-outro p,
+#bg-outro .btn-wrapper {
+  text-align: right;
+}
+#bg-outro {
+  background: url(/theme/images/gfx-outro.svg) no-repeat center;
+  background-size: cover;
+}
+/*-------------------------*/
+#bg-cta-bottom {
+  width: 75%;
+}
+#bg-cta-bottom h2,
+#bg-cta-bottom p,
+#bg-cta-bottom .btn-wrapper {
+  text-align: right;
+}
+#bg-cta-bottom {
+  background: url(/theme/images/gfx-outro.svg) no-repeat center;
   background-size: cover;
 }
 @media only screen and (max-width: 480px) {
-  .intro .bg {
+  #bg-intro {
     width: 100%;
     background-size: 440px;
   }