diff --git a/src/main/handlebars/index.handlebars b/src/main/handlebars/index.handlebars index 1cf77b8..4bcb1f1 100755 --- a/src/main/handlebars/index.handlebars +++ b/src/main/handlebars/index.handlebars @@ -11,11 +11,14 @@ {{#each groups}} {{#*fragment "group"}}
+ + {{name}} +

{{name}}

{{description}}

- Created by {{owner.name}} on {{date created}} + Created by {{owner.name}} on {{date created format="d.m.Y"}}
{{/fragment}} diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars index 087f723..c6af382 100755 --- a/src/main/handlebars/layout.handlebars +++ b/src/main/handlebars/layout.handlebars @@ -60,20 +60,33 @@ .groups { display: grid; gap: 1rem; - grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } .group { + --corners: 1rem; display: grid; - gap: .5rem; - grid-template-rows: max-content 1fr max-content; - border: 1px solid rgb(0 0 0 / .2); - box-shadow: 0 .25rem .25rem rgb(0 0 0 / .1); + gap: 1rem; + grid-template-rows: 10rem max-content 1fr max-content; background-color: white; + border-radius: var(--corners); + overflow: hidden; } - .group > * { - padding: .75rem; + .group img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: var(--corners) var(--corners) 0 0; + transition: transform 350ms cubic-bezier(0.2, 0, 0, 1) 0s; + + &:hover { + transform: scale(1.05); + } + } + + .group h2, .group p { + padding-inline: 1rem; } .group h2 { @@ -91,6 +104,8 @@ } .post { + --corners: .25rem; + display: grid; gap: .5rem; border: 1px solid rgb(0 0 0 / .2); @@ -115,6 +130,8 @@ background-color: rgb(0 0 0 / .05); display: grid; grid-template-columns: 1fr max-content; + padding: .75rem; + border-radius: 0 0 var(--corners) var(--corners); } .actions .buttons {