diff options
| author | Frederick Mixell <frederick.mixell@leftfieldlabs.com> | 2022-10-19 10:25:52 -0400 |
|---|---|---|
| committer | Jamal Carvalho <jamal@golang.org> | 2023-03-09 19:31:32 +0000 |
| commit | d82958ec8a280c4693564fc971b2727c6bb1d6f7 (patch) | |
| tree | f1e45a84033a5d26f3cde70d321059fa87cd224c /_content/css/styles.css | |
| parent | dbe961f9e2b8ab7ba193efab64f4f23dfea0ce1a (diff) | |
| download | go-x-website-d82958ec8a280c4693564fc971b2727c6bb1d6f7.tar.xz | |
_content: Doc index masonry layout
- converts existing doc index content into html sections
- uses css columns to create css only masonry layout
Video: https://drive.google.com/file/d/1VJ9IEz_mpVDhRXN6KPa7Z_z2oy4623an/view?usp=sharing
Change-Id: Iad7413bad2ad5aaeff9dfc6334f206177508acc4
Reviewed-on: https://go-review.googlesource.com/c/website/+/443698
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Diffstat (limited to '_content/css/styles.css')
| -rw-r--r-- | _content/css/styles.css | 23 |
1 files changed, 23 insertions, 0 deletions
diff --git a/_content/css/styles.css b/_content/css/styles.css index e22d36c6..a438d157 100644 --- a/_content/css/styles.css +++ b/_content/css/styles.css @@ -3878,12 +3878,30 @@ a.UseCase-anchorLink.selected::before { img.PullQuote-image { width: 2.625rem; } +.Masonry { + column-count: 1; + column-gap: 3.5rem; + row-gap: 3.5rem; + column-fill: balance; +} .BigCard { border: var(--border); border-radius: 0.25rem; padding: 0 1.75rem; + padding-bottom: 1rem; margin-bottom: 1.5rem; } +.Masonry .BigCard { + margin-bottom: unset; + margin-top: 1.5rem; + min-width: 33%; + height: max-content; + display: inline-block; + -webkit-column-break-inside: avoid; + page-break-inside: avoid; + break-inside: avoid; + width: 100%; +} .BigCard h2 { margin-top: 1.5rem; font-style: normal; @@ -3893,6 +3911,11 @@ img.PullQuote-image { border-bottom: var(--border); padding-bottom: 0.5rem; } +@media only screen and (min-width: 48rem) { + .Masonry { + column-count: 2; + } +} .Card { background-color: var(--white); border: var(--border); |