From a84daeb51f67082314d1006c389490a4c2e5f487 Mon Sep 17 00:00:00 2001
From: pollfly <75068813+pollfly@users.noreply.github.com>
Date: Sun, 23 Apr 2023 12:18:27 +0300
Subject: [PATCH] Modify first page design (#537)

---
 docs/getting_started/main.md | 20 +++++++++-----------
 src/css/custom.css           | 19 ++++++++++++++++---
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/docs/getting_started/main.md b/docs/getting_started/main.md
index 08239853..afec9750 100644
--- a/docs/getting_started/main.md
+++ b/docs/getting_started/main.md
@@ -12,7 +12,7 @@ while ClearML ensures your work is reproducible and scalable.
 
 ## Getting Started
 
-<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
+<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%', marginBottom: '32px' }} >
 <iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}} 
         src="https://www.youtube.com/embed/s3k9ntmQmD4" 
         title="YouTube video player" 
@@ -25,30 +25,29 @@ while ClearML ensures your work is reproducible and scalable.
 <br/>
     
 
+
+
+###  Friendly Tutorials to Get You Started
+
 <div className="tbl-1">
 
-
 <table>
-<thead>
-    <tr><th colspan="2">
-        Friendly tutorials to get you started:</th>
-</tr></thead>
 <tbody>
   <tr>
     <td><a href="https://github.com/allegroai/clearml/blob/master/docs/tutorials/Getting_Started_1_Experiment_Management.ipynb"><b>Step 1</b></a> - Experiment Management</td>
-    <td><a target="_blank" href="https://colab.research.google.com/github/allegroai/clearml/blob/master/docs/tutorials/Getting_Started_1_Experiment_Management.ipynb">
+    <td className="align-center"><a className="no-ext-icon" target="_blank" href="https://colab.research.google.com/github/allegroai/clearml/blob/master/docs/tutorials/Getting_Started_1_Experiment_Management.ipynb">
   <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/>
 </a></td>
   </tr>
   <tr>
     <td><a href="https://github.com/allegroai/clearml/blob/master/docs/tutorials/Getting_Started_2_Setting_Up_Agent.ipynb"><b>Step 2</b></a> - Remote Execution Agent Setup</td>
-    <td><a target="_blank" href="https://colab.research.google.com/github/allegroai/clearml/blob/master/docs/tutorials/Getting_Started_2_Setting_Up_Agent.ipynb">
+    <td className="align-center"><a className="no-ext-icon" target="_blank" href="https://colab.research.google.com/github/allegroai/clearml/blob/master/docs/tutorials/Getting_Started_2_Setting_Up_Agent.ipynb">
   <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/>
 </a></td>
   </tr>
   <tr>
     <td><a href="https://github.com/allegroai/clearml/blob/master/docs/tutorials/Getting_Started_3_Remote_Execution.ipynb"><b>Step 3</b></a> - Remotely Execute Tasks</td>
-    <td><a target="_blank" href="https://colab.research.google.com/github/allegroai/clearml/blob/master/docs/tutorials/Getting_Started_3_Remote_Execution.ipynb">
+    <td className="align-center"><a className="no-ext-icon" target="_blank" href="https://colab.research.google.com/github/allegroai/clearml/blob/master/docs/tutorials/Getting_Started_3_Remote_Execution.ipynb">
   <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/>
 </a></td>
   </tr>
@@ -57,7 +56,6 @@ while ClearML ensures your work is reproducible and scalable.
 
 </div>
 
-![Webapp gif](../img/gif/webapp_screenshots.gif)
 
 ### Read a Little More
 
@@ -93,7 +91,7 @@ GUI applications
 - Build [pipelines](../pipelines/pipelines.md) from code 
 - Much more!
 
-
+![Webapp gif](../img/gif/webapp_screenshots.gif)
 
 ## Who We Are
 ClearML is supported by you :heart: and the [clear.ml](https://clear.ml) team, which helps enterprise companies build scalable MLOps.
diff --git a/src/css/custom.css b/src/css/custom.css
index 162ff8cc..76347bd7 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -620,11 +620,15 @@ html[data-theme="dark"] .footer__link-item:hover {
 .tbl-1 > table {
     width: 100%;
     display: inline-table;
-    margin: 48px 0;
+    margin-bottom: 48px;
 }
 
-.tbl-1 > thead {
-  font-size: x-large;
+.tbl-1 > table tbody tr:first-child td:first-child {
+    border-top-left-radius: var(--ifm-card-border-radius);
+}
+
+.tbl-1 > table tbody tr:first-child td:last-child {
+    border-top-right-radius: var(--ifm-card-border-radius);
 }
 
 html[data-theme="dark"] .markdown thead th {
@@ -765,6 +769,15 @@ html[data-theme="dark"] .alert.alert--secondary {
   padding-right: 1rem;
 }
 
+.markdown .no-ext-icon {
+    background: unset !important;
+    padding: unset !important;
+    margin: 0 auto !important;
+    text-underline-offset: unset;
+    line-height: 0;
+    display: block;
+}
+
 .markdown .img-swt {
   margin-bottom: 2.4rem;
 }