add one column layout
This commit is contained in:
parent
5580c6efe2
commit
0b26a86a52
4 changed files with 26 additions and 7 deletions
|
|
@ -5,5 +5,25 @@ body.full-width #desktop-nav .empty {
|
|||
height: calc(var(--unit--vertical) / 2);
|
||||
}
|
||||
body.full-width .content {
|
||||
position: sticky;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
padding: 0 var(--unit--horizontal) var(--unit--vertical)
|
||||
var(--unit--horizontal);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(39, 1fr);
|
||||
column-gap: var(--unit--horizontal);
|
||||
margin-bottom: calc(var(--unit--vertical) * 2);
|
||||
}
|
||||
|
||||
.grid .column {
|
||||
grid-column: span var(--span);
|
||||
}
|
||||
|
||||
.grid[data-columns="1"] .column {
|
||||
grid-column: 11 / span 20;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,11 +14,9 @@ main {
|
|||
}
|
||||
|
||||
hr {
|
||||
height: calc(var(--unit--vertical) / 2);
|
||||
height: 1px;
|
||||
border: none;
|
||||
background-color: var(--color-primary);
|
||||
width: calc(var(--unit--horizontal) * 4);
|
||||
margin: calc(var(--unit--vertical) * 2) calc(var(--unit--horizontal));
|
||||
}
|
||||
|
||||
nav hr {
|
||||
|
|
@ -66,7 +64,7 @@ html {
|
|||
}
|
||||
|
||||
body.full-width {
|
||||
--padding-body: calc(var(--unit--horizontal) * 7);
|
||||
--padding-body: calc(var(--unit--horizontal) * 10);
|
||||
}
|
||||
|
||||
body,
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ tabs:
|
|||
- 1/2, 1/2
|
||||
- 1/3, 1/3, 1/3
|
||||
fieldsets:
|
||||
- heading
|
||||
- text
|
||||
- image
|
||||
- line
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
<?php endsnippet() ?>
|
||||
<div class="content">
|
||||
<?php foreach ($page->body()->toLayouts() as $layout): ?>
|
||||
<section class="grid" id="<?= $layout->id() ?>">
|
||||
<section class="grid" id="<?= $layout->id() ?>" data-columns="<?= $layout->columns()->count() ?>">
|
||||
<?php foreach ($layout->columns() as $column): ?>
|
||||
<div class="column" style="--span:<?= $column->span() ?>">
|
||||
<div class="column" style="--span:<?= $column->span(38) ?>">
|
||||
<div class="blocks">
|
||||
<?= $column->blocks() ?>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue