From f106c8c0f4c501122a871b2cb3537f82d571f342 Mon Sep 17 00:00:00 2001 From: webfussel Date: Thu, 12 Sep 2024 10:42:59 +0200 Subject: [PATCH] add: updated some stuff --- assets/css/services.css | 30 +++++++++++++++--------------- components/Services.vue | 26 ++++++++++++++++---------- 2 files changed, 31 insertions(+), 25 deletions(-) diff --git a/assets/css/services.css b/assets/css/services.css index 9f6d2fb..f53d69e 100644 --- a/assets/css/services.css +++ b/assets/css/services.css @@ -4,14 +4,14 @@ background-repeat: no-repeat; .service-list { - display: flex; - flex-wrap: wrap; - align-items: stretch; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + grid-template-rows: repeat(4, auto); & article { - flex-grow: 1; - flex-shrink: 0; - flex-basis: clamp(350px, calc(33% - 3rem), 500px); + grid-row: span 4; + display: grid; + grid-template-rows: subgrid; position: relative; & .chip { @@ -52,20 +52,20 @@ } } +@media (width < 1640px) { + .Services { + & .service-list article:last-child { + grid-column: 1/-1; + } + } +} + @media (width < 600px) { .Services { - & .service-list { - width: 80vw; - - & article { - flex-basis: 100%; - } - } - & .network-list { --height: 380px; & article { - flex-basis: 80vw; + flex-basis: 70vw; } } } diff --git a/components/Services.vue b/components/Services.vue index 70f8567..bbe3f69 100644 --- a/components/Services.vue +++ b/components/Services.vue @@ -45,28 +45,34 @@