diff --git a/app/assets/css/blogCard.css b/app/assets/css/blogCard.css index 027b501..66fe68e 100644 --- a/app/assets/css/blogCard.css +++ b/app/assets/css/blogCard.css @@ -12,6 +12,17 @@ scale: 1.05; } + & > .image { + flex: 0 0 200px; + width: 100%; + + & img { + height: 100%; + width: 100%; + object-fit: cover; + } + } + & .card-content { display: flex; flex-direction: column; @@ -24,6 +35,11 @@ margin-bottom: 1rem; } + & header { + display: flex; + flex-direction: column; + } + & footer { margin-top: auto; display: flex; @@ -41,4 +57,12 @@ color: var(--color-orange); } } +} + + + +@media (width <= 780px) { + .BlogCard header { + align-items: center; + } } \ No newline at end of file diff --git a/app/assets/css/global.css b/app/assets/css/global.css index c2e4d07..f266ffb 100755 --- a/app/assets/css/global.css +++ b/app/assets/css/global.css @@ -290,7 +290,7 @@ span.chip { .grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } @@ -325,7 +325,7 @@ span.chip { } @media (width <= 780px) { - h1, h2, h3, h4, h5, h6, p { + h1, h2, h3, h4, h5, h6, p, small { text-align: center; } } diff --git a/app/components/Blog/Author.vue b/app/components/Blog/Author.vue index 3cd93e7..6045e67 100644 --- a/app/components/Blog/Author.vue +++ b/app/components/Blog/Author.vue @@ -1,7 +1,7 @@