diff --git a/src/components/MFExample.astro b/src/components/MFExample.astro index 3520c38..961866d 100644 --- a/src/components/MFExample.astro +++ b/src/components/MFExample.astro @@ -8,7 +8,7 @@ const { lib2, lib3, author, - company, + authorUrl, githubUrl, liveUrl, } = Astro.props; @@ -46,19 +46,17 @@ const { <div class="repository text-xs px-1"> { author && ( - <p class="author"> + <a class="author" href={authorUrl}> <> <strong>by {author}</strong> - <br /> </> - {company} - </p> + </a> ) } { githubUrl && ( <a class="githubUrl" href={githubUrl}> - View on Github + Github </a> ) } @@ -75,11 +73,25 @@ const { <style> .mfexample { + @media (max-width: 499px) { + padding: 0.5rem; + border-radius: 10px; + } + + @media (min-width: 500px) and (max-width: 999px) { + padding: 1rem; + border-radius: 18px; + } + + @media (min-width: 1000px) { + padding: 1.5rem; + border-radius: 24px; + } + border: 1px solid #ebeee2; - padding: 1.5rem; display: grid; grid-template-rows: auto 1fr auto; - border-radius: 24px; + overflow: hidden; position: relative; } @@ -93,13 +105,14 @@ const { gap: 0.5rem; grid-template: "microfrontend microfrontend microfrontend" 1fr - "integration integration integration" 40px / 1fr 1fr 1fr; + "integration integration integration" auto / 1fr 1fr 1fr; } .element { background-color: white; border: 1px solid #ebeee2; border-radius: 10px; + padding: 9px; display: grid; place-content: center; } @@ -138,16 +151,27 @@ const { } .repository { + @media (max-width: 999px) { + grid-template: + "author" auto + "githubUrl" auto + "liveUrl" auto / 1fr; + } + + @media screen and (min-width: 1000px) { + grid-template: + "author author" auto + "githubUrl liveUrl" auto / 1fr 1fr; + } + margin-top: 1rem; display: grid; gap: 0.5rem; - grid-template: - "author author" auto - "githubUrl liveUrl" auto / 1fr 1fr; } - .author { + a.author { grid-area: author; + text-decoration: none; } .githubUrl { @@ -156,7 +180,12 @@ const { } .liveUrl { + + @media screen and (min-width: 1000px) { + justify-self: end; + } + grid-area: liveUrl; - justify-self: end; + } </style> diff --git a/src/components/content/Implementations.astro b/src/components/content/Implementations.astro index 0cf372e..83ad554 100644 --- a/src/components/content/Implementations.astro +++ b/src/components/content/Implementations.astro @@ -23,8 +23,8 @@ import MFExample from "../MFExample.astro"; lib2="images/tech/html.svg" lib3="images/tech/html.svg" integration="Modular Monolith" - author="Michael Geers" - company="neuland - Büro für Informatik" + author="neuland - Büro für Informatik" + authorUrl="https://www.neuland-bfi.de" githubUrl="https://github.com/neuland/tractor-store" liveUrl="https://tractor-store-blueprint.neuland-bfi.workers.dev" /> @@ -36,8 +36,8 @@ import MFExample from "../MFExample.astro"; lib2="images/tech/preact.svg" lib3="images/tech/preact.svg" integration="ESI, Web Components" - author="Michael Geers" - company="neuland - Büro für Informatik" + author="neuland - Büro für Informatik" + authorUrl="https://www.neuland-bfi.de" githubUrl="https://github.com/neuland/tractor-store-preact" /> @@ -48,8 +48,7 @@ import MFExample from "../MFExample.astro"; lib2="images/tech/question.svg" lib3="images/tech/question.svg" integration="[...]" - author="you" - company="your company" + author="your company" /> </div> </div> @@ -76,7 +75,7 @@ import MFExample from "../MFExample.astro"; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; - grid-column: 1 / 13; + grid-column: 1 / -1; } .examples > :global(*) { @media (max-width: 499px) { @@ -87,7 +86,11 @@ import MFExample from "../MFExample.astro"; grid-column: span 6; } - @media (min-width: 1000px) { + @media (min-width: 1000px) and (max-width: 1249px) { + grid-column: span 4; + } + + @media (min-width: 1250px) { grid-column: span 3; } }