Archive 2.0: (12) group meta skin by AO3
Version 2.0 of the group meta component (12) of the default archive site design.
- Role:
- site
- Media:
- screen
- Condition:
- Parent only
CSS
/* == GROUP: META
https://otwcode.github.io/docs/patterns/meta.html
*/
dl.meta {
border: 1px solid #ccc;
clear: right;
padding: 1.286em 0.75em;
position: relative;
overflow: hidden;
}
.meta dt {
min-width: 10.5em;
width: 25%;
float: left;
clear: left;
}
.meta dd {
width: 72.5%;
float: left;
margin: 0 0 0.643em;
}
.meta .stats dl {
float: left;
margin-top: 0;
}
dl.meta dd ul li, .meta .stats dl, .meta .stats dl dt, .meta .stats dl dd {
padding-inline-start: 0;
}
.meta .stats dl dt, .meta .stats dl dd {
margin-block: 0 auto;
margin-inline: 0 0.375em;
padding-inline-end: 0.25em;
width: auto;
min-width: 0;
clear: none;
float: left;
}
.meta .stats dl dd {
padding-inline-end: 0.75em;
}
.meta p {
display: block;
margin-top: 0;
}
.meta dd ul li {
display: inline;
margin: auto;
padding-inline-end: 0.5em;
}
.meta dd blockquote {
margin: 0;
}
/* mod: wrapped data */
dl.meta:has(.wrapper) {
padding-block: 0;
}
dl.meta .wrapper {
float: left;
width: 100%;
border-bottom: 1px solid #ccc;
padding-block: 1.286em;
box-shadow: none;
}
dl.meta .wrapper:last-of-type {
border-bottom: none
}
dl.meta .wrapper dd, dl.meta .wrapper dd p:last-of-type {
margin: 0;
}
/* CONTEXTS */
.dashboard .meta .clear {
clear: none;
clear: right;
}
.news .wrapper {
box-shadow: none;
}
.news dl.meta {
border: none;
padding: 0;
}
.news .meta dt, .news .meta dd, .news .meta ul {
display: inline;
float: none;
margin-left: 0;
}
.news .meta dd:after {
content: " ";
display: block;
height: 0.643em;
}
/* TODO the post new work form needs its classes changed so these overrides are no longer needed */
.post .meta dd ul li {
display: block;
}
.post .meta dd ul li:after {
content: none;
}
/* END == */

