From 2eb9ebbd46e87b8fbd9b01c4dcb1eac1d2b99f04 Mon Sep 17 00:00:00 2001
From: Tuana Celik <tuana.celik@deepset.ai>
Date: Wed, 23 Nov 2022 18:21:33 +0000
Subject: [PATCH 1/2] changing the location of the colab button

new color, and adding the title from index toml rather than markdown
---
 .../assets/sass/abstracts/_variables.scss         |  1 +
 .../haystack/assets/sass/components/_buttons.scss | 15 +++++++++++++++
 themes/haystack/layouts/_default/tutorial.html    |  9 ++++++---
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/themes/haystack/assets/sass/abstracts/_variables.scss b/themes/haystack/assets/sass/abstracts/_variables.scss
index aafd449e..c53200e9 100644
--- a/themes/haystack/assets/sass/abstracts/_variables.scss
+++ b/themes/haystack/assets/sass/abstracts/_variables.scss
@@ -22,6 +22,7 @@
   --color-dark-grey-rgb: 144, 144, 178;
   --color-blue-rgb: 24, 139, 245;
   --color-dark-blue-rgb: 43, 47, 85;
+  --color-light-blue-rgb:17,129,193;
   --color-green-rgb: 3, 175, 157;
   --color-yellow-rgb: 255, 197, 92;
 
diff --git a/themes/haystack/assets/sass/components/_buttons.scss b/themes/haystack/assets/sass/components/_buttons.scss
index 00390c46..b8a42676 100644
--- a/themes/haystack/assets/sass/components/_buttons.scss
+++ b/themes/haystack/assets/sass/components/_buttons.scss
@@ -113,6 +113,21 @@ button.nav-toggle-close {
     }
   }
 
+  &.btn-light-blue {
+    background-color: rgba($color: #{var(--color-light-blue-rgb)}, $alpha: 1);
+    color: var(--color-white);
+
+    svg {
+      fill: var(--color-white);
+    }
+
+    &:hover {
+      background-color: rgba(
+        $color: #{var(--color-dark-blue-rgb)},
+        $alpha: 0.9
+      );
+    }
+  }
 
   &.btn-grey {
     background-color: rgba($color: #{var(--color-dark-grey-rgb)}, $alpha: 1);
diff --git a/themes/haystack/layouts/_default/tutorial.html b/themes/haystack/layouts/_default/tutorial.html
index 17c41bbd..83b11a4b 100644
--- a/themes/haystack/layouts/_default/tutorial.html
+++ b/themes/haystack/layouts/_default/tutorial.html
@@ -8,14 +8,17 @@
 
         {{/* Tutorial */}}
         <article class="article-content">
-
+          {{ with .Params.title }}
+            <h1> {{.}} </h1>
+          {{ end }}
+          
           <div class="button-container">
 
             {{/* Colab button */}}
             {{ with .Params.colab }}
               <a
                 href="{{ . }}"
-                class="btn btn-dark-blue colab-btn"
+                class="btn btn-light-blue colab-btn"
                 target="_blank"
                 rel="noopener"
               >
@@ -96,7 +99,7 @@
               {{ . | time.Format ":date_long" }}
             </sub>
           {{ end }}
-
+         
           {{/* Article content */}}
           {{ .Content }}
 

From 700196fc7f29f8e269ad7376bbc4ade0f864416c Mon Sep 17 00:00:00 2001
From: Tuana Celik <tuana.celik@deepset.ai>
Date: Thu, 24 Nov 2022 13:08:39 +0000
Subject: [PATCH 2/2] adding the Tutorial: keyword to the start of the title

---
 themes/haystack/layouts/_default/tutorial.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/themes/haystack/layouts/_default/tutorial.html b/themes/haystack/layouts/_default/tutorial.html
index 83b11a4b..58ff54b7 100644
--- a/themes/haystack/layouts/_default/tutorial.html
+++ b/themes/haystack/layouts/_default/tutorial.html
@@ -9,7 +9,8 @@
         {{/* Tutorial */}}
         <article class="article-content">
           {{ with .Params.title }}
-            <h1> {{.}} </h1>
+            <h1> Tutorial: {{.}} </h1>
+            <br>
           {{ end }}
           
           <div class="button-container">