From 744e9aaafc7b0dc36dbec753372ebd4852a7ed77 Mon Sep 17 00:00:00 2001
From: pollfly <75068813+pollfly@users.noreply.github.com>
Date: Thu, 20 Apr 2023 18:00:04 +0300
Subject: [PATCH] Redesign first docs page (#536)

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

diff --git a/docs/getting_started/main.md b/docs/getting_started/main.md
index b196d3ee..08239853 100644
--- a/docs/getting_started/main.md
+++ b/docs/getting_started/main.md
@@ -25,9 +25,14 @@ 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>
@@ -50,11 +55,13 @@ while ClearML ensures your work is reproducible and scalable.
 </tbody>
 </table>
 
+</div>
+
 ![Webapp gif](../img/gif/webapp_screenshots.gif)
 
 ### Read a Little More
 
-<div class="max-w-75">
+<div class="max-w-75 align-center">
 
 ![Architecture diagram](../img/clearml_architecture.png)
 
diff --git a/src/css/custom.css b/src/css/custom.css
index 2c8284d1..162ff8cc 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -73,6 +73,11 @@ html[data-theme="dark"] a:hover {
   color: var(--ifm-color-primary-lightest);
 }
 
+.align-center {
+    text-align: center;
+    margin: auto;
+}
+
 .max-w-75 {
   max-width: 75%;
 }
@@ -612,6 +617,15 @@ html[data-theme="dark"] .footer__link-item:hover {
   }
 }
 
+.tbl-1 > table {
+    width: 100%;
+    display: inline-table;
+    margin: 48px 0;
+}
+
+.tbl-1 > thead {
+  font-size: x-large;
+}
 
 html[data-theme="dark"] .markdown thead th {
   color: var(--ifm-color-gray-600);