#go-fed { $gofed-light: #F38D7F; $gofed-dark: #740D00; $gofed-bg: #EAEAEA; $hugo-bg: #0A1922; $hugo-text: #E7E8E9; $go-bg: #007D9C; $go-gopher: #79D4FD; overflow: hidden; .page-header { .container { display: grid; place-items: center; } img { height: 6em; } .title { margin-bottom: 0; } } .title { font-size: 2em; font-weight: 700; margin-bottom: 2em; } .conversation { display: flex; flex-flow: column; align-items: center; margin-bottom: 1.4em; iframe { width: 80ch; height: 20em; max-height: calc(100vh - var(--nav-height)); max-height: calc(var(--vh) * 100 - var(--nav-height)); } } .quote { margin-top: 5em; background: $gofed-light; color: black; font-size: 1.8em; line-height: 1.2; text-align: center; padding: 1em; font-family: monospace; position: relative; &:before{ content: '“'; font-family: serif; font-size: 2em; position: absolute; top: -0.4em; left: -0.2em; } &:after { content: '”'; font-family: serif; font-size: 2em; position: absolute; bottom: -0.8em; right: -0.2em; } } .attribution { margin-bottom: 5em; margin-top: 1em; display: grid; grid-template-columns: 1fr 3em auto; gap: 1em; justify-content: end; align-items: center; cite { grid-column: 3; text-align: right; em { font-weight: 700; } } img { width: 3em; height: 3em; margin-right: 1em; border-radius: 100em; grid-column: 2; } } .device-gallery { display: grid; gap: 1em; justify-items: center; figcaption { padding: 1em; max-width: 320px; margin: 0 auto; text-align: center; } } .device-gallery.mobile { figure { max-width: 288px; } figcaption { max-width: 320px; } @media (min-width: 960px) { grid-template-columns: repeat(3,1fr); } } #about { background: #122e43; color: white; } #before { background: $gofed-bg; } #after { .quote {background: #90EE90} .quote:before, .quote:after {} } #hugo { background: $hugo-bg; color: $hugo-text; } }