diff --git a/assets/css/main.css b/assets/css/main.css index 60f3a45..e3554bf 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -603,29 +603,40 @@ main.gallery-layout { align-items: start; margin: 1rem 1rem 0 1rem; } +@media only screen and (max-width: 960px) { + main.gallery-layout { + grid-template-columns: 1fr; + } +} main.gallery-layout article { grid-column-start: -2; grid-row: 1; margin-top: 5rem; } - -main.gallery-layout article h1 { - border: none; - background-color: transparent; - box-shadow: none; - float: none; - padding: 0; - margin: -7.5rem 0 2.75rem calc(-1 * var(--deus-post-padding)); - font-size: 3em; -} -main.gallery-layout article h1::after { - content: none; -} @media only screen and (max-width: 960px) { + main.gallery-layout article { + margin-top: 1rem; + } +} + +@media only screen and (min-width: 961px) { main.gallery-layout article h1 { - margin-left: 0; - margin-right: 0; + border: none; + background-color: transparent; + box-shadow: none; + float: none; + font-size: 2.5em; + line-height: 1.1; + font-size: 3em; + position: absolute; + padding: 0; + left: 0; + margin: 0; + bottom: calc(100% + 1.5rem); + } + main.gallery-layout article h1::after { + content: none; } } @@ -636,12 +647,9 @@ main.gallery-layout article h1::after { } .gallery { - --deus-gallery-column-count: 12; - --deus-gallery-grid-gap: 0.5em; - display: grid; - grid-template-columns: repeat(var(--deus-gallery-column-count), auto); - grid-gap: var(--deus-gallery-grid-gap); + grid-template-columns: repeat(12, auto); + grid-gap: 0.5em; align-content: start; } @@ -654,3 +662,16 @@ main.gallery-layout article h1::after { .gallery .small { grid-column: span 4; } + +@media only screen and (max-width: 960px) { + .gallery { + grid-template-columns: repeat(6, auto); + grid-gap: 0.75em; + } + .gallery .large { + grid-column: span 6; + } + .gallery .small { + grid-column: span 3; + } +}