Merge branch 'main' of https://github.com/MLOPsStudyGroup/mlops-guide

Author: guipleite

docs/_css/extra_css.css

@@ -1,7 +1,4 @@
-img {
-    height: auto;
-    width: auto;
-}
+
 
 .shadow {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
@@ -10,14 +7,25 @@ img {
 .zoom {
     transition: transform ease-in-out 0.5s;
     cursor: zoom-in;
+    height: auto;
+    width: auto;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 4px;
+    background-color: #fff;
 }
 
 .image-zoom-large {
-    transform: scale(2);
+    transform: scale(1);
     cursor: zoom-out;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     z-index: 100;
     position: absolute;
+    position: absolute;
+    
+    left: 50%;
+    transform: translate(-50%, -50%);
+
 }
 
 .md-typeset__table{

docs/_js/extra_js.js

@@ -1,5 +1,5 @@
-document.querySelectorAll('.zoom').forEach(item => {
-    item.addEventListener('click', function () {
-        this.classList.toggle('image-zoom-large');
-    })
-});
+document.querySelectorAll('.zoom').forEach((item) => {
+	item.addEventListener('click', function() {
+		this.classList.toggle('image-zoom-large');
+	});
+});

docs/index.md

@@ -29,7 +29,8 @@ This video shows how an example of workflow with a complete MLOps project. This
 
 ### Architecture
 The following diagram shows the complete MLOps flow used on the tutorial. Since the guide is modular, a team can chose to swap tools at any point due to project preferences and use cases.
-<img src="./assets/DiagramMLOPs.png" alt="drawing" />
+
+![Diagram](./assets/DiagramMLOPs.png){.zoom}
 
 ### Project Tools
 The main tools discussed in the guide are shown in the following table.