From 14af5a58f3babb7a0d744d694193f43aedaed7a0 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Mon, 15 Jul 2024 15:02:57 +0200
Subject: [PATCH] try and install buttons on homepage

---
 src/_includes/welcome.jlhtml  | 10 +++++++---
 src/assets/styles/welcome.css | 14 ++++++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/_includes/welcome.jlhtml b/src/_includes/welcome.jlhtml
index 9699a6a..d522c2f 100644
--- a/src/_includes/welcome.jlhtml
+++ b/src/_includes/welcome.jlhtml
@@ -37,7 +37,6 @@
                     
                     <a href="en/docs/"><img src="https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/reader.svg" aria-hidden="true"> Documentation</a>
                     <a href="https://featured.plutojl.org/"><img src="https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/star.svg" aria-hidden="true"> Featured Notebooks</a>
-                    <!-- <a href="en/blog/">Blog</a> -->
                     <a href="https://github.com/fonsp/Pluto.jl"><img src="https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/logo-github.svg" aria-hidden="true"> GitHub</a>
                 </div>
                 
@@ -50,6 +49,11 @@
                         We are on a mission to make <em>scientific computing</em> more <em>accessible and fun</em>.
                     </h1>
                     <p>Simple, reactive programming environment for Julia</p>
+                    <div class="bannerlinks">
+                        <a class="roundbutton" href="#try"><img src="https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/flash.svg" aria-hidden="true"> Try online</a>
+                        
+                        <a class="roundbutton" href="#install"><img src="https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/cloud-download.svg" aria-hidden="true"> Install</a>
+                    </div>
                 </div>
             </div>
         </header-sizer>
@@ -265,7 +269,7 @@
 
         </main>
     </section>
-    <section id="tryonline" class="tryonline">
+    <section id="try" class="tryonline">
         <main>
             
             <p-hannes>
@@ -329,7 +333,7 @@
             )
 
             <p-hannes>
-                <h1-sub>Let's go!</h1-sub>
+                <h1-sub>Here we go!</h1-sub>
                 <h1>Let's install Pluto!</h1>
             </p-hannes>
             <p>
diff --git a/src/assets/styles/welcome.css b/src/assets/styles/welcome.css
index 2541bd3..e14101a 100644
--- a/src/assets/styles/welcome.css
+++ b/src/assets/styles/welcome.css
@@ -174,6 +174,17 @@ div.header-text > div {
     margin-bottom: 1rem;
 }
 
+.header-text .bannerlinks {
+    display: flex;
+    gap: 2em;
+    justify-content: flex-start;
+}
+
+.header-text .bannerlinks .roundbutton {
+    background: #72167e;
+    box-shadow: 0 0 10px #0000004d;
+}
+
 header #topnav {
     display: flex;
     /* height: 3rem; */
@@ -206,6 +217,8 @@ header #topnav .navlinks {
     gap: 1rem;
 }
 
+.roundbutton,
+.roundbutton:visited,
 header #topnav .navlinks a {
     padding: 1rem;
     background: linear-gradient(21deg, #4b3f00, #6e4a09);
@@ -214,6 +227,7 @@ header #topnav .navlinks a {
     color: white;
 }
 
+.roundbutton img,
 header #topnav .navlinks a img {
     height: 1em;
     filter: invert(1);