picocss/docs/scss/layout/_main.scss

50 lines
1 KiB
SCSS
Raw Normal View History

2019-11-27 22:10:02 +07:00
/**
* Docs: Main (Grid)
*/
2021-07-02 16:54:41 +07:00
// Config
2019-11-27 22:10:02 +07:00
$navHeight: 3.5rem;
2021-07-02 16:54:41 +07:00
// Main grid
2019-11-27 22:10:02 +07:00
body > main {
2021-07-02 16:54:41 +07:00
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
2019-11-27 22:10:02 +07:00
2021-07-02 16:54:41 +07:00
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
2021-07-02 16:54:41 +07:00
display: grid;
grid-template-columns: 200px auto;
}
2019-11-27 22:10:02 +07:00
}
2021-07-02 16:54:41 +07:00
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
2019-11-27 22:10:02 +07:00
}
2021-07-02 16:54:41 +07:00
> aside,
div[role="document"] {
min-width: 0;
2019-11-27 22:10:02 +07:00
}
}
// External links
2022-09-11 18:30:49 +07:00
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after
2021-10-24 12:33:20 +07:00
{
display: inline-block;
width: 1rem;
height: 1rem;
2020-09-29 08:38:35 +07:00
background-image: var(--icon-external);
background-position: top center;
2021-11-08 00:12:34 +07:00
background-size: 0.66rem auto;
background-repeat: no-repeat;
2021-10-24 12:33:20 +07:00
content: "";
}
// Embedded SVG
svg {
height: 1rem;
}