Slack unfurl and landing page improvements (#704)

* slack unfurl title * slack unfurl
iter8-tools · May 27, 2021 · 9d20e65 · 9d20e65
1 parent b1235b3
commit 9d20e65
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 13 deletions.
diff --git a/mkdocs/docs/stylesheets/main.css b/mkdocs/docs/stylesheets/main.css
@@ -162,6 +162,61 @@
     background-color: #fc058047;
   }
 }
+.cards {
+  padding-top: 1rem;
+}
+.cards .md-grid h1 {
+  text-align: center;
+  color: #333;
+}
+[data-md-color-scheme=slate] .cards .md-grid h1 {
+  color: #fff;
+}
+.cards:focus, .cards:hover {
+  background-color: #7085fb47;
+  border-radius: 3px;
+}
+[data-md-color-scheme=slate] .cards:focus, [data-md-color-scheme=slate] .cards:hover {
+  background-color: #fb69b247;
+}
+
+.tx-container {
+  margin-top: 2rem;
+  background: linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%);
+}
+[data-md-color-scheme=slate] .tx-container {
+  background: linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%);
+}
+.tx-container .tx-hero {
+  color: var(--md-primary-bg-color);
+}
+@media screen and (min-width: 50em) {
+  .tx-container .tx-hero {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .tx-container .tx-hero .tx-card {
+    width: 50%;
+  }
+}
+.tx-container .tx-hero .tx-card {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+.tx-container .tx-hero .tx-card .md-button {
+  color: var(--md-primary-bg-color);
+}
+.tx-container .tx-hero .tx-card .md-button:focus, .tx-container .tx-hero .tx-card .md-button:hover {
+  color: var(--md-default-bg-color);
+  background-color: var(--md-accent-fg-color);
+  border-color: var(--md-accent-fg-color);
+}
+.tx-container .tx-hero .tx-card .md-button--primary {
+  color: #894da8;
+  background-color: var(--md-primary-bg-color);
+  border-color: var(--md-primary-bg-color);
+}
+
 .md-tabs__link {
   font-size: 0.8rem;
 }
diff --git a/mkdocs/overrides/home.html b/mkdocs/overrides/home.html
@@ -89,8 +89,10 @@ <h2>Iter8 makes it easy to <strong>optimize business metrics</strong> and <stron
 </section>
 
 
-<section>
+<section class="cards">
   <div class="md-grid md-typeset">
+      <h1>Why Iter8?</h1>
+
 
     <!-- Main site box descriptions -->
     <div class="top-hr">
@@ -160,6 +162,35 @@ <h2>
   </div>
 </section>
 
+<!-- Hero for landing page -->
+<section class="tx-container">
+  <div class="md-grid md-typeset">
+
+    <div class="tx-hero">
+      <div class=tx-card>
+        <h2>Talk to us on slack</h2>
+        <a href="https://join.slack.com/t/iter8-tools/shared_invite/zt-awl2se8i-L0pZCpuHntpPejxzLicbmw" title="Slack invite"
+        class="md-button md-button--primary">
+        Slack
+      </a>
+      <p>Interested in learning more, speaking to other contributors, or finding answers?</p>
+
+      </div>
+
+      <div class=tx-card>
+        <h2>Contributors welcome</h2>
+        <a href="https://iter8.tools/latest/contributing/" title="Contributing guide"
+        class="md-button md-button--primary">
+        Contribute
+      </a>
+      <p>Want to join the fun? New users and contributors are always welcome!</p>
+
+      </div>
+    </div>
+  </div>
+</section>
+
+
 {% endblock %}
 
 <!-- Content -->

diff --git a/mkdocs/overrides/main.html b/mkdocs/overrides/main.html
@@ -28,7 +28,7 @@
   <!-- Open graph meta tags -->
   <meta property="og:type" content="website" />
   <meta property="og:site_name" content="Iter8"/>
-  <meta property="og:title" content="The Kubernetes experimentation platform" />
+  <meta property="og:title" content="{{ config.extra.title }}" />
   <meta property="og:description" content="{{ config.site_description }}" />
   <meta property="og:url" content="https://iter8.tools" />
   <meta property="og:image" content="https://iter8.tools/0.5/images/illustration.png" />
@@ -37,7 +37,7 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:url" content="https://iter8.tools" />
   <meta name="twitter:creator" content="{{ config.site_author }}" />
-  <meta name="twitter:title" content="The Kubernetes experimentation platform" />
+  <meta name="twitter:title" content="{{ config.extra.title }}" />
   <meta name="twitter:description" content="{{ config.site_description }}" />
   <meta name="twitter:image" content="https://iter8.tools/0.5/images/illustration.png" />
   <meta name="twitter:label1" value="K8s stacks" />
@@ -50,16 +50,6 @@
   />
 {% endblock %}
 
-<!-- Announcement bar -->
-{% block announce %}
-<strong>Iter8</strong> at <a href="https://sched.co/iE2l">KubeCon + CloudNativeCon Europe 2021</a>. For updates and support, 
-    <a href="https://join.slack.com/t/iter8-tools/shared_invite/zt-awl2se8i-L0pZCpuHntpPejxzLicbmw">
-      join <strong>Iter8</strong> workspace on <span class="twemoji">
-      {% include ".icons/fontawesome/brands/slack.svg" %} </span>
-      slack.
-    </a>
-{% endblock %}
-
 <!-- Theme-related JavaScript -->
 {% block scripts %}
   {{ super() }}

diff --git a/src/main/layout/_cards.scss b/src/main/layout/_cards.scss
@@ -75,4 +75,94 @@
         }
 
     }
+}
+
+// section headers
+.cards {
+    padding-top: px2rem(20px);
+    .md-grid {  
+        // Hero headline
+        h1 {
+            text-align: center;
+            color: #333;
+
+            // Adjust for slate theme
+            [data-md-color-scheme="slate"] & {
+                color: #fff;
+            }
+        }
+
+    }
+
+    &:focus,
+    &:hover {
+        background-color: #7085fb47;
+        border-radius: 3px;
+
+        // Adjust for slate theme
+        [data-md-color-scheme="slate"] & {
+            background-color: #fb69b247;
+        }    
+    }
+
+}
+
+.tx-container {
+    margin-top: px2rem(40px);
+    background: linear-gradient(
+        to bottom,
+        var(--md-primary-fg-color),
+        hsla(280, 67%, 55%, 1) 99%,
+        var(--md-default-bg-color) 99%
+      );
+
+    // Adjust background for slate theme
+    [data-md-color-scheme="slate"] & {
+      background: linear-gradient(
+          to bottom,
+          var(--md-primary-fg-color),
+          hsla(280, 67%, 55%, 1) 99%,
+          var(--md-default-bg-color) 99%
+        );
+    }
+
+
+    .tx-hero {
+        color: var(--md-primary-bg-color);
+
+        @media screen and (min-width:50.0em) {
+            display: flex;
+            flex-wrap: wrap;    
+
+            .tx-card {
+                width: 50%;
+            }
+        }
+
+
+        .tx-card {
+            padding-left: px2rem(50px);
+            padding-right: px2rem(50px);            
+
+            // Button
+            .md-button {
+                color: var(--md-primary-bg-color);
+
+                // Button on focus/hover
+                &:focus,
+                &:hover {
+                color: var(--md-default-bg-color);
+                background-color: var(--md-accent-fg-color);
+                border-color: var(--md-accent-fg-color);
+                }
+
+                // Primary button
+                &--primary {
+                color: hsla(280deg, 37%, 48%, 1);
+                background-color: var(--md-primary-bg-color);
+                border-color: var(--md-primary-bg-color);
+                }
+            }            
+        }      
+    }
 }