.generic-team-list-interlaced {
@mixin phone-ext { @include phone { @content(2, 2%); } } @mixin desktop-ext { @include desktop { @content(5, 1%); } } @include phone-ext using ($columns, $gutter) { margin: 0 $gutter/-2; } @include desktop-ext using ($columns, $gutter) { margin: 0 $gutter/-2; } padding: 0; list-style: none; display: flex; flex-wrap: wrap; @include phone { font-size: 4.25vw; } li { $tile-aspect-ratio: percentage(600/365); position: relative; display: block; z-index: 10; @include desktop-ext using ($columns, $gutter) { $column-width: 100%/$columns; $gutter-per-column: percentage($gutter/($column-width - $gutter)); width: $column-width; padding: $gutter/2; &:nth-child(5n+1) .tile, &:nth-child(5n+3) .tile, &:nth-child(5n) .tile { margin-top: -0.5 * ($tile-aspect-ratio + $gutter-per-column); .speech-bubble { top: 50%; bottom: auto; } } &.halfling { .tile { padding-top: 0.5 * ($tile-aspect-ratio - $gutter-per-column); } } .speech-bubble { margin: $gutter-per-column/2 $gutter-per-column; min-height: 50% + percentage($gutter-per-column / $tile-aspect-ratio / 2); } } @include phone-ext using ($columns, $gutter) { $column-width: 100%/$columns; $gutter-per-column: percentage($gutter/($column-width - $gutter)); width: $column-width; padding: $gutter/2; &.spacer:nth-child(-n+5), &.spacer:nth-last-child(-n+9) { display: none; } &.spacer.halfling:nth-child(-n+2), &.spacer.halfling:nth-last-child(-n+2) { display: block; } &:nth-child(2n+1) .tile { margin-top: -0.5 * ($tile-aspect-ratio + $gutter-per-column); .speech-bubble { top: 50%; bottom: auto; } } &:nth-child(n+14) { display: none; } &:target, &:target ~ li { display: block; } &.halfling { article { padding-top: 0.5 * ($tile-aspect-ratio - $gutter-per-column); } } .speech-bubble { margin: $gutter-per-column/2 $gutter-per-column; min-height: 50% + percentage($gutter-per-column / $tile-aspect-ratio / 2); } } &.spacer { z-index: 0; } &:nth-child(30n+1) .tile, &:nth-child(30n+7) .tile, &:nth-child(30n+14) .tile, &:nth-child(30n+16) .tile, &:nth-child(30n+22) .tile, &:nth-child(30n+29) .tile { background: #60b2a4; } &:nth-child(30n+2) .tile, &:nth-child(30n+9) .tile, &:nth-child(30n+11) .tile, &:nth-child(30n+17) .tile, &:nth-child(30n+24) .tile, &:nth-child(30n+26) .tile { background: #ff6f6c; } &:nth-child(30n+3) .tile, &:nth-child(30n+10) .tile, &:nth-child(30n+13) .tile, &:nth-child(30n+20) .tile, &:nth-child(30n+23) .tile, &:nth-child(30n+30) .tile { background: #f5cd47; } &:nth-child(30n+4) .tile, &:nth-child(30n+6) .tile, &:nth-child(30n+12) .tile, &:nth-child(30n+19) .tile, &:nth-child(30n+21) .tile, &:nth-child(30n+27) .tile { background: #2B8475; } &:nth-child(30n+5) .tile, &:nth-child(30n+8) .tile, &:nth-child(30n+15) .tile, &:nth-child(30n+18) .tile, &:nth-child(30n+25) .tile, &:nth-child(30n+28) .tile { background: #6d2c64; } .tile { position: relative; width: 100%; padding-top: $tile-aspect-ratio; // See https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_169 } .filler { position: absolute; top: 0; left: 0; bottom: 0; right: 0; .claim { padding: .5em; margin: 0; color: rgba(255, 255, 255, 0.9); font-weight: bold; font-size: 1.5em; text-align: center; } } .user-image { display: block; cursor: pointer; img { cursor: default; } &:hover + .name-and-meta { display: block; } } .name-and-meta { hyphens: auto; -webkit-hyphens: auto; position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; background: rgba(255, 255, 255, 0.9); padding: .5em; opacity: 0; transition: opacity 0.3s; .name { margin: 0.5em 0 0.25em; } .description { margin: 0.25em 0 0.5em; } .personal-claim { margin: 1.25em 0 0.5em; p { margin: 0; } & > :first-child::before { content: '„'; display: inline; } & > :last-child::after { content: '“'; display: inline; } } .description, .personal-claim { color: $gray-700; font-weight: 300; font-size: 0.875em; line-height: 1.25; } } &:hover .name-and-meta { opacity: 1; } img { width: 100%; height: auto; display: block; } .speech-bubble { hyphens: auto; -webkit-hyphens: auto; position: absolute; left: 100%; top: auto; bottom: 50%; display: block; width: 100%; font-weight: normal; background-color: white; padding: 0.5em; &:before { content: ''; position: absolute; left: -2em; width: 0; height: 0; border-style: solid; border-width: 1em 2em 1em 0; border-color: transparent white transparent transparent; top: 50%; margin-top: -1em; } h2 { font-weight: 300; margin-top: 0; font-size: 1em; line-height: 1.5; } p { font-weight: 300; margin-bottom: 0; font-size: 0.66667em; line-height: 1.25; a { font-weight: 300; color: inherit; } } } }
}