Add Intro and Plugins Sections (#1)

* Added new sections * Add athena logo to net widget * Update lead * Fix widget links * Change logo and slogan * Fix image size * Text changes * Update texts
athena-oss · Oct 13, 2016 · 2546d6a · 2546d6a
1 parent 9b25400
commit 2546d6a
Show file tree

Hide file tree

Showing 15 changed files with 472 additions and 52 deletions.
diff --git a/_config.yml b/_config.yml
@@ -9,7 +9,7 @@
 title: Athena by OLX
 email: [email protected]
 description: > # this means to ignore newlines until "baseurl:"
-  Athena by OLX. Automate, Automate, Automate!
+  Athena is an automation platform with a plugin architecture that allows you to easily create and share services.
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://athena-oss.github.io" # the base hostname & protocol for your site
 twitter_username: jekyllrb

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,5 @@
+<footer>
+    <div class="container">
+        Licensed under the Apache License Version 2.0 (APLv2).
+    </div>
+</footer>
diff --git a/_includes/head.html b/_includes/head.html
@@ -9,4 +9,7 @@
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
+
+  <link rel="shortcut icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" type="image/x-icon">
+  <link rel="icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" type="image/x-icon">
 </head>
diff --git a/_includes/scripts.html b/_includes/scripts.html
@@ -0,0 +1,2 @@
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+<script type="text/javascript" src="{{ "/js/website.js" | prepend: site.baseurl }}"></script>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -14,7 +14,8 @@
     </div>
 
     {% include footer.html %}
-
+    {% include scripts.html %}
+
   </body>
 
 </html>
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -1,40 +1,102 @@
-.athena-super {
-  margin-top: 10%;
-  text-align: center;
-  .athena-super-logo {
-    width: 100%;
-  }
-
-  .athena-super-title {
-    font-size: 2rem;
-    color: #98c93c;
-    text-transform: uppercase;
-    margin: 0;
-    padding: 0;
-  }
-
-  .athena-super-slogan {
-    font-size: 12px;
-    font-weight:normal;
-    font-style: italic;
-    margin: 0.25rem 0 0 0;
-    padding: 0;
-    color: black;
-  }
-
-  .athena-super-items {
-    display: block;
-    padding: 0;
-    margin: 0.5rem 0 0 0;
-
-    li {
-      display: inline-block;
-      padding: 0 0.25rem;
-      margin: 0;
-
-      a {
-        color: #599542;
-      }
+body,
+html{
+    box-sizing: border-box;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    line-height: 1;
+}
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+
+p {
+    margin-bottom: 15px;
+}
+
+strong {
+    font-weight: 600;
+}
+
+a {
+    color: #000;
+}
+
+ul {
+    list-style-position: inside;
+    margin-bottom: 20px;
+    margin-left: 30px;
+}
+
+h2 {
+    font-size: 18px;
+    line-height: 30px;
+    margin-bottom: 20px;
+}
+
+@media (min-width: 1025px) {
+    h2 {
+        font-size: 26px;
+        line-height: 35px;
+    }
+}
+
+.container {
+    margin-left: auto;
+    margin-right: auto;
+}
+@media (min-width: 768px) {
+    .container {
+        width: 750px;
     }
-  }
+}
+@media (min-width: 1025px) {
+    .container {
+        width: 1000px;
+    }
+}
+
+footer {
+    background: #599542;
+    color: #eee;
+    font-size: 13px;
+    line-height: 1.5em;
+    padding: 20px;
+}
+@media (min-width: 1025px) {
+    footer {
+        font-size: 16px;
+        padding: 20px 0;
+    }
+}
+
+.center {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+.button {
+    border: 1px solid #eee;
+    border-radius: 5px;
+    color: #eee;
+    display: inline-block;
+    padding: 10px 30px;
+    text-decoration: none;
+}
+
+.button:hover {
+    border-color: #fff;
+    color: #fff;
+}
+
+.button-big {
+    border: 1px solid #599542;
+    color: #599542;
+    line-height: 1em;
+    font-size: 18px;
+    padding: 15px 30px;
+}
+
+.button-big:hover {
+    border-color: #333;
+    color: #333;
 }
diff --git a/_sass/_blocks.scss b/_sass/_blocks.scss
@@ -0,0 +1,83 @@
+.splash {
+    padding-bottom: 40px;
+    .logo {
+        height: 250px;
+    }
+    .lead {
+        color: #777;
+        font-size: 20px;
+        margin: 35px 0;
+    }
+}
+
+@media (min-width: 1025px) {
+    .splash {
+        .logo {
+            height: 400px;
+        }
+        .lead {
+            font-size: 23px;
+            line-height: 30px;
+        }
+    }
+}
+
+.benefits {
+    background: linear-gradient(#599542, transparent),
+        linear-gradient(-45deg, #98C93C, transparent),
+        linear-gradient(45deg, #599542, transparent);
+    color: #eee;
+    font-size: 16px;
+    padding: 70px 0;
+    p, ul {
+        line-height: 1.9em;
+    }
+    .button {
+        margin-right: 20px;
+    }
+}
+@media (max-width: 1024px) {
+    .benefits {
+        font-size: 14px;
+        padding: 30px 20px;
+        ul {
+            margin-left: 10px;
+        }
+        .button {
+            margin-bottom: 20px;
+        }
+    }
+}
+
+#plugins-widget {
+    height: 100vw;
+    margin: 30px auto 40px;
+    opacity: 0;
+    canvas {
+        left: 0;
+    }
+}
+@media (min-width: 768px) {
+    #plugins-widget {
+        height: 500px;
+    }
+}
+
+.parallax {
+    overflow: hidden;
+}
+
+.parallax_content {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: perspective(300px) translate3d(0, 0, 0);
+    align-items: center;
+    height: auto;
+    margin-right: auto;
+    margin-left: auto;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+}
diff --git a/_sass/_reset.scss b/_sass/_reset.scss
@@ -0,0 +1,30 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
diff --git a/athena-logo-nolabel.png b/athena-logo-nolabel.png
diff --git a/athena-logo.png b/athena-logo.png
diff --git a/css/main.scss b/css/main.scss
@@ -5,7 +5,7 @@
 
 
 @import
+		"reset",
         "base",
-        "layout",
-        "syntax-highlighting"
+        "blocks"
 ;
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -2,13 +2,42 @@
 layout: default
 ---
 
-<main class="l-main athena-super">
-  <img class="athena-super-logo" src="athena-logo.png">
-  <h1 class="athena-super-title">Athena</h1>
-  <h2 class="athena-super-slogan">Automate, Automate, Automate!</h2>
-  <ul class="athena-super-items">
-    <li><a href="https://github.com/athena-oss/athena">Code</a></li>
-    <li><a href="https://athena-oss.github.io/athena">Docs</a></li>
-    <li><a href="https://github.com/athena-oss/">Extensions</a></li>
-  </ul>
-</main>
+<section class="container splash center">
+    <h1><img src="{{ "athena-logo.png" | prepend: site.baseurl }}" alt="Athena logo" class="logo"></h1>
+    <br>
+    <p>
+        <a href="#intro" class="button button-big">Meet the Athena Project</a>
+    </p>
+</section>
+
+<section class="benefits" id="intro">
+    <div class="container">
+        <h2>Athena is an automation platform with a plugin architecture<br>that allows you to easily create and share services.</h2>
+        <p>The key to optimize work is to <em>automate</em> as much as possible.
+            <br>Whether you are developing software, setting up infrastructure or even testing, if there is a chance to do it just take it.</p>
+        <p>Most of the times the boring and frequent tasks can be automated.
+            <br>There are a lot of different tools and technologies that can help you with that,
+            <br> but sometimes starting is simply an hassle by itself and one might end up giving up and doing it <em>&quot;manually&quot;</em>.</p>
+        <p>This is where <strong>Athena</strong> jumps in. The idea is quite simple, we minimize the start process by:</p>
+        <ul>
+            <li>automating the wiring of the dependencies and tools</li>
+            <li>implement a plugin architecture to allow freedom and scalability</li>
+            <li>throw in a wizard that takes care of the boring stuff</li>
+        </ul>
+        <p>Once that part is done, you can reuse it as much as you can and you can even share with other people or teams.</p><br>
+        <p class="center">
+            <a href="#plugins" class="button">Meet the Plugins</a>
+            <a href="https://athena-oss.github.io/athena" class="button">Read the Docs</a>
+            <a href="https://github.com/athena-oss/athena" class="button">Get Athena</a>
+        </p>
+    </div>
+</section>
+
+<section id="plugins">
+    <div class="parallax container">
+        &nbsp;
+        <div class="parallax_content">
+            <div class="center" id="plugins-widget"></div>
+        </div>
+    </div>
+</section>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script type="text/javascript" src="{{ "/js/website.js" \| prepend: site.baseurl }}"></script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,8 @@ @@
         </div>
         {% include footer.html %}
+        {% include scripts.html %}
       </body>
     </html>