adding new architecture diagrams (#889)

* adding new architecture diagrams * lint cleanup --------- Co-authored-by: Joel Willmore <[email protected]>
Consensys · Dec 11, 2024 · 3a34f84 · 3a34f84
1 parent e8e941e
commit 3a34f84
Show file tree

Hide file tree

Showing 5 changed files with 844 additions and 5 deletions.
diff --git a/docs/get-started/concepts/architecture.mdx b/docs/get-started/concepts/architecture.mdx
@@ -15,13 +15,21 @@ Linea aims to be a fully decentralized, permissionless network. To support this
 Linea is in mainnet status, and the team is fervently working towards full decentralization. 
 The following is a good representation of the main components of Linea, and how they interact:
 
-<div class="center-container">
-  <div class="img-large">
+<div className="responsive-graphic">
+  <picture>
+    <source
+      srcSet="/img/get_started/concepts/architecture/Linea_architecture_mobile.svg"
+      media="(max-width: 1499px)"
+    />
+    <source
+      srcSet="/img/get_started/concepts/architecture/Linea_architecture_desktop.svg"
+      media="(min-width: 1500px)"
+    />
     <img
-      src="/img/get_started/concepts/architecture/Linea_architecture_map.png"
-      alt="Linea architecture"
+      src="/img/get_started/concepts/architecture/Linea_architecture_desktop.svg"
+      alt="Linea architecture diagram"
     />
-  </div>
+  </picture>
 </div>
 
 ## First of all: what _is_ Linea, anyway? What's a zkEVM L2?

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -1452,3 +1452,30 @@ div[aria-label="Expand sidebar"] {
 .theme-doc-markdown .markdown {
   margin-right: 10px !important;
 }
+
+/* responsive classes for architecture diagram */
+.responsive-graphic {
+  text-align: center;
+}
+
+@media (width <= 1499px) {
+  .responsive-graphic picture {
+    display: block;
+    padding-left: 5vw;
+    padding-right: 5vw;
+  }
+}
+
+@media (width <= 996px) {
+  .responsive-graphic picture {
+    padding-left: 15vw;
+    padding-right: 15vw;
+  }
+}
+
+@media (width <= 700px) {
+  .responsive-graphic picture {
+    padding-left: 6vw;
+    padding-right: 6vw;
+  }
+}