Protons: Grids / Templates: content_container
We haven't yet defined how we're laying out our application. We've been using the 6 col grid system but that doesn't take into account the requirement for the content on the 1 col layout to be 65 characters wide.
Currently we're using this system for the grid items, this requires that each item be wrapped in the same grid component when their laid out on the site, so we probably need a comonent simmilar to the site_container one
There are 4 different layouts we will be supporting:
- 2 col (sidebar + main - see listings page)
- 2 col reversed (sidebar + main - same as the previous but reversed!)
- 1 col left aligned (for most of the content pages, gives us the ability to have text content at max 65cw but other elements can be slightly wider than that if required, we can also include feature images)
- 1 col full - the homepage layout, allows for those elements that go 100% #9 #28 and the hero element
This is how we're laying it out for now this needs to be combined into a pattern like site_container
so we can build it slice by slice
:root {
--page-max-width: 960px;
--sidebar-max-width: 35ch;
--page-padding: clamp(var(--space-sm), 6vw, var(--space-md));
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1140,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
--space-sm: clamp(1rem, calc(0.95rem + 0.24vw), 1.13rem);
--space-md: clamp(1.5rem, calc(1.43rem + 0.37vw), 1.69rem);
--space-2xl: clamp(4rem, calc(3.8rem + 0.98vw), 4.5rem);
}
// full: full page
// popout: 1030
// content: 960
.demo-site-container {
--full: minmax(var(--page-padding), 1fr);
--content: min(var(--page-max-width), 100% - var(--page-padding) * 2);
--popout: minmax(0, 2rem); // 35px on each side
--feature: minmax(0, 5rem);
display: grid;
grid-template-columns:
[full-start] var(--full)
[popout-start] var(--popout)
[content-start] var(--content) [content-end]
var(--popout) [popout-end]
var(--full) [full-end];
scroll-margin-top: var(--space-2xl);
> * {
grid-column: content;
}
}
.demo-spacing > * + * {
margin-block-start: var(--space-sm, var(--space-md));
}
.demo-col-full {
grid-column: full;
// border-bottom: 1px solid red;
@extend .demo-site-container;
}
.demo-col-content {
grid-column: content;
// border-bottom: 1px solid green;
}
.demo-col-popout {
grid-column: popout;
// border-bottom: 1px solid blue;
}
.main-content {
@extend .demo-col-full;
@extend .demo-spacing;
}
Edited by Han