try and install buttons on homepage

JuliaPluto · Jul 15, 2024 · 14af5a5 · 14af5a5
1 parent 15fd7bb
commit 14af5a5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git 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/[email protected]/src/svg/reader.svg" aria-hidden="true"> Documentation</a>
                     <a href="https://featured.plutojl.org/"><img src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/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/[email protected]/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/[email protected]/src/svg/flash.svg" aria-hidden="true"> Try online</a>
+
+                        <a class="roundbutton" href="#install"><img src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/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
@@ -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);