:root { --pico-font-size: 100%; } @media (max-width: 1200px) { :root { --pico-font-size: 80%; } } @media (min-width: 769px) { .small-only { display: none; } main { max-width: 1536px; margin: auto; } } @media (max-width: 768px) { :root { --pico-font-size: 100%; } .large-only { display: none; } } .item-page { main { // width: 100vw; padding: calc(1*var(--pico-spacing)) calc(3*var(--pico-spacing)); .middle { margin: auto; width: 42%; } .left { float: left; clear: left; width: 25%; margin-left: 0; margin-right: 4%; } .right { float: right; clear: right; width: 25%; margin-left: 4%; margin-right: 0%; } } @media (max-width: 768px) { main { display: flex; flex-flow: column nowrap; padding: calc(1*var(--pico-spacing)); .left, .right, .middle { float: none; clear: none; width: 100%; margin-left: 0; margin-right: 0; } } } } .classic-page, .feed-page { main { // width: 100vw; display: grid; grid-template-columns: 64% 32%; grid-template-areas: "main aside"; gap: 4%; padding: calc(3*var(--pico-spacing)); .grid__main { grid-area: main; } .grid__aside { grid-area: aside; } } @media (max-width: 768px) { main { display: flex; flex-flow: column nowrap; padding: 0; gap: 0; .grid__main { order: -1; margin: var(--pico-spacing); } .grid__aside { order: -2; } ul { padding: 0; } aside.bottom { order: 2 !important; } } } } .content-page { article { margin: 0; } main { display: grid; grid-template-columns: auto 25%; grid-template-areas: "main aside"; gap: calc(3*var(--pico-spacing)); padding: calc(3*var(--pico-spacing)); &>div { grid-area: main; } &>aside { grid-area: aside; article>div { text-align: center; } } } .owner-info { height: max-content; display: flex; flex-direction: row; gap: var(--pico-spacing); .owner { .avatar { width: calc(2rem * var(--pico-line-height)); height: calc(2rem * var(--pico-line-height)); img { width: 100%; height: 100%; } } } .info { width: 70%; } .more { width: 20%; } } @media (max-width: 768px) { main { display: flex; max-width: 100%; flex-flow: column nowrap; padding: 0; gap: 0; >div { order: 1; margin: var(--pico-spacing); } >div:has(>article) { margin: 0; } >aside { order: 2; >section { margin-block: 0.5em; } article.item { display: grid; grid-template-columns: 25% auto; grid-template-areas: "main aside"; margin: calc(var(--pico-spacing)/2); padding: 0; border: var(--pico-border-width) solid var(--pico-card-border-color); >* { margin: 0; border: 0; } >div { margin-left: var(--pico-spacing); background-color: var(--pico-card-sectioning-background-color); align-items: center; display: flex; } } } >aside.top { order: -1; } ul { padding: 0; } } } }