fix: optimize CSS

2024-05-30 08:52:28 +02:00 · 2024-05-30 08:52:28 +02:00 · 282e2086b0
commit 282e2086b0
parent b9e9e2d691
21 changed files with 217 additions and 258 deletions
--- a/assets/css/services.css
+++ b/assets/css/services.css
@ -0,0 +1,72 @@
+.Services {
+    background-image: radial-gradient(circle at 100vw 100vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
+    background-color: var(--color-orange-black);
+    background-repeat: no-repeat;
+
+    .service-list {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: stretch;
+
+        & article {
+            flex-grow: 1;
+            flex-shrink: 0;
+            flex-basis: clamp(350px, calc(33% - 3rem), 500px);
+            position: relative;
+
+            & .chip {
+                position: absolute;
+                right: -1rem;
+                top: calc(-1rem - 3px);
+            }
+
+            & header {
+                display: flex;
+            }
+
+            & ul {
+                gap: 1rem;
+
+                & li {
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                }
+            }
+
+            & .extra {
+                margin-top: auto;
+            }
+        }
+    }
+
+    .network-list {
+        width: 100%;
+        overflow-x: auto;
+        padding-top: 4px;
+
+        & .scroll-container {
+            display: flex;
+            padding-bottom: 3rem;
+        }
+    }
+}
+
+@media (width < 600px) {
+    .Services {
+        & .service-list {
+            width: 80vw;
+
+            & article {
+                flex-basis: 100%;
+            }
+        }
+
+        & .network-list {
+            --height: 380px;
+            & article {
+                flex-basis: 80vw;
+            }
+        }
+    }
+}