/////////////////// // // // LISTS // // // /////////////////// /* Lists of posts (like in categories page) */ .posts-list { display: flex; flex-direction: column; margin-bottom: var(--pico-spacing); > article { padding-bottom: var(--pico-spacing); padding-left: var(--pico-spacing); } } /* List of last posts, on the home page*/ .home-posts-list { padding-bottom: var(--pico-spacing); border-bottom: var(--pico-muted-border-color) solid var(--pico-border-width); article { display: inline-block; } article:not(:last-child) { &::after { content: ' / '; white-space: pre; } } } /* Lists of the main page, for contact */ .home-lists { margin: 0; @media (min-width: 768px) { display: inline-flex; flex-flow: row; flex-wrap: wrap; overflow: visible; width: 100%; // set the container width dt { flex: 0 0 24%; word-wrap: anywhere; } dd { flex: 0 0 74%; margin-left: auto; text-align: left; } } dd { margin-left: .5rem; } dt::after { content: ' :'; } } /* List under the post information summary */ .post-info { summary, ol, ul, li { margin: 0; } ul { padding: 0 0 calc(var(--pico-spacing)/1) 0; } li { display: flex; > ul { display: flex; flex-wrap: wrap; padding: 0; white-space: pre; } > ul::before { content: ' '; white-space: pre; } } } details[open] > ul { border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color); } @media (min-width: 576px) { .post-info > ul { display: flex; flex-wrap: wrap; > li:not(:last-child) { &::after { content: ' / '; white-space: pre; } } } } .post-taxonomies:not(:last-child) { &::after { content: ', '; } } .tracklist { font-size: smaller; } .list-footer { padding-left: .5em; }