diff options
| -rw-r--r-- | public/projects/coldark.jpg | bin | 26968 -> 10850 bytes | |||
| -rw-r--r-- | public/projects/demo-apcom.jpg | bin | 19755 -> 19850 bytes | |||
| -rw-r--r-- | public/projects/dig-dir.jpg | bin | 18048 -> 19558 bytes | |||
| -rw-r--r-- | public/projects/dotig.jpg | bin | 28730 -> 27509 bytes | |||
| -rw-r--r-- | public/projects/new-vhost.jpg | bin | 11263 -> 11500 bytes | |||
| -rw-r--r-- | public/projects/wp-graphql-get-extended.jpg | bin | 18419 -> 26647 bytes | |||
| -rw-r--r-- | src/components/organisms/project-overview/project-overview.module.scss | 28 |
7 files changed, 17 insertions, 11 deletions
diff --git a/public/projects/coldark.jpg b/public/projects/coldark.jpg Binary files differindex f5a7254..16cb457 100644 --- a/public/projects/coldark.jpg +++ b/public/projects/coldark.jpg diff --git a/public/projects/demo-apcom.jpg b/public/projects/demo-apcom.jpg Binary files differindex 6ece1d5..e07380f 100644 --- a/public/projects/demo-apcom.jpg +++ b/public/projects/demo-apcom.jpg diff --git a/public/projects/dig-dir.jpg b/public/projects/dig-dir.jpg Binary files differindex 0d7c47e..812744b 100644 --- a/public/projects/dig-dir.jpg +++ b/public/projects/dig-dir.jpg diff --git a/public/projects/dotig.jpg b/public/projects/dotig.jpg Binary files differindex 4ddbaca..168fa1e 100644 --- a/public/projects/dotig.jpg +++ b/public/projects/dotig.jpg diff --git a/public/projects/new-vhost.jpg b/public/projects/new-vhost.jpg Binary files differindex 7bf5d7b..2a6ec79 100644 --- a/public/projects/new-vhost.jpg +++ b/public/projects/new-vhost.jpg diff --git a/public/projects/wp-graphql-get-extended.jpg b/public/projects/wp-graphql-get-extended.jpg Binary files differindex ab510ca..dedb647 100644 --- a/public/projects/wp-graphql-get-extended.jpg +++ b/public/projects/wp-graphql-get-extended.jpg diff --git a/src/components/organisms/project-overview/project-overview.module.scss b/src/components/organisms/project-overview/project-overview.module.scss index c9e4edb..98459b7 100644 --- a/src/components/organisms/project-overview/project-overview.module.scss +++ b/src/components/organisms/project-overview/project-overview.module.scss @@ -2,14 +2,19 @@ @use "../../../styles/abstracts/mixins" as mix; .wrapper { - display: flex; - flex-flow: column wrap; - align-items: center; - width: fit-content; - row-gap: var(--spacing-md); + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: clamp(var(--spacing-md), 4vw, var(--spacing-xl)); margin-inline: auto; padding: var(--spacing-md); border: fun.convert-px(1) solid var(--color-border); + + @include mix.media("screen") { + @include mix.dimensions("sm") { + grid-template-columns: minmax(0, fun.convert-px(400)) auto; + align-items: center; + } + } } .heading { @@ -17,24 +22,25 @@ } .cover { - height: fit-content; + justify-self: center; margin: 0; > img { - width: 100%; - max-height: fun.convert-px(250); + max-height: 100%; object-fit: cover; } } .meta { + display: grid; grid-auto-flow: row; - column-gap: clamp(var(--spacing-sm), 1.5vw, var(--spacing-lg)); - row-gap: clamp(var(--spacing-2xs), 1vw, var(--spacing-sm)); + gap: clamp(var(--spacing-2xs), 1vw, var(--spacing-sm)) + clamp(var(--spacing-sm), 1vw, var(--spacing-md)); + width: auto; @include mix.media("screen") { @include mix.dimensions("xs") { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)); } } } |
