section.latest-list-layout { border-top: 1px solid var(--border-default); margin: 0.75rem 0; article:nth-of-type(1) { background-color: var(--bg-elevated); border-bottom: 1px solid var(--border-default); padding: 0.5rem 0; ul { display: grid; grid-template-columns: clamp(50px, 5%, 80px) clamp(80px, 10%, 120px) 1fr clamp(100px, 14%, 190px) clamp(80px, 10%, 100px) clamp(50px, 9%, 100px) clamp(50px, 9%, 100px); column-gap: 0.75rem; li { text-align: center; &:nth-child(2), &:nth-child(3), &:nth-child(4) { text-align: left; } } } @media (max-width: 1024px) { display: none; } } article:nth-of-type(2) { box-sizing: border-box; section { padding: 0.5rem 0; box-sizing: inherit; border-bottom: 1px solid var(--border-default); &.active, &:hover { background-color: #faffd1; } .prefix { color: var(--text-primary); padding-right: 0.5rem; } .board-name { color: var(--text-secondary); font-size: 0.813rem; padding-right: 0.5rem; } a { color: var(--text-link); text-decoration: none; &:hover { text-decoration: underline; color: var(--text-link-hover); } > em { display: inherit; font-style: normal; > span { color: var(--color-danger); font-size: 0.813rem; vertical-align: text-top; padding-right: 4px; } } > svg { padding-right: 4px; color: #9c9898; } > span { display: inline-block; vertical-align: middle; } } // PC ol { display: grid; grid-template-columns: clamp(50px, 5%, 80px) clamp(80px, 10%, 120px) 1fr clamp(100px, 14%, 190px) clamp(80px, 10%, 100px) clamp(50px, 9%, 100px) clamp(50px, 9%, 100px); column-gap: 0.75rem; align-items: center; li { text-align: center; &:nth-child(2) { text-align: left; color: var(--text-secondary); font-size: 0.875rem; } &:nth-child(3) { min-width: 0; text-align: left; word-break: keep-all; overflow-wrap: break-word; text-overflow: ellipsis; } &:nth-child(4) { text-align: left; } } } // Mobile dl { dt { font-size: 1.063rem; word-break: keep-all; overflow-wrap: break-word; text-overflow: ellipsis; } dd { ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: start; padding-top: 0.5rem; column-gap: 1.063rem; li { font-size: 0.875rem; &:last-child { flex-grow: 1; text-align: right; } } } } } @media (max-width: 1024px) { ol { display: none; } dl { display: block; } } } } }