setup principal layout (either one or two columns) for <main>

master
Stefan Majewsky 3 years ago
parent 06d62c6825
commit 655f16b903
  1. 2
      Makefile
  2. 12
      draft/index.html
  3. 41
      draft/res/content/structure.scss
  4. 6
      draft/res/content/typography.scss
  5. 3
      draft/res/footer.scss
  6. 32
      draft/res/lib.scss
  7. 13
      draft/res/main.scss

@ -1,4 +1,4 @@
all: draft/res/c3d2.css
draft/res/c3d2.css: draft/res/main.scss draft/res/*.scss
draft/res/c3d2.css: draft/res/main.scss draft/res/*.scss draft/res/*/*.scss
sassc -t compressed -I draft/res $< $@

@ -47,9 +47,15 @@
</ul></li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<main class="two-columns">
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</main>
<footer>
<p>Footer</p>

@ -0,0 +1,41 @@
main {
@include mark-unstyled-children;
padding: 1rem;
// most pages use a one-column layout
&:not(.two-columns) {
@include stack(1rem);
}
// front page uses a one-column layout as well on narrow screens
@media(max-width: 119.99999ch) {
&.two-columns {
@include stack(1rem);
}
}
// two-column layout for the front page
@media(min-width: 120ch) {
&.two-columns {
@include is-styled;
border: 0;
display: flex;
flex-flow: row wrap;
& > * {
@include is-styled;
border: 0;
flex: 1;
max-width: 60ch;
}
& > * + * {
margin-left: 1rem;
}
}
}
& > section {
@include stack(1rem);
}
}

@ -0,0 +1,6 @@
main {
p {
border: 0;
line-height: 1.3;
}
}

@ -0,0 +1,3 @@
footer p {
margin: 1rem;
}

@ -0,0 +1,32 @@
////////////////////////////////////////////////////////////////////////////////
// unstyled markers
//
// TODO add an option for disabling all these rules in the production build
@mixin mark-unstyled-children {
* {
border: 1px dashed red;
}
}
@mixin is-styled {
border: 0;
}
////////////////////////////////////////////////////////////////////////////////
// layout strategies
@mixin stack($gap) {
// Arranges for all children to be separated by the same distance, `$gap`, in
// such a way that children can also use the same layout (with a different
// gap) inside them.
//
// Source: <https://every-layout.dev/layouts/stack/>
@include is-styled;
& > * {
margin: 0;
}
& > * + * {
margin-top: $gap;
}
}

@ -1,4 +1,5 @@
@import 'reset.scss';
@import 'lib.scss';
@media (min-width: 60ch) {
@import 'highlevel-desktop.scss';
@ -8,12 +9,6 @@
}
@import 'navbar.scss';
// TODO @import 'content.scss';
// TODO @import 'footer.scss';
// stub, TODO remove
main, footer {
p {
margin: 1rem;
}
}
@import 'content/structure.scss';
@import 'content/typography.scss';
@import 'footer.scss';

Loading…
Cancel
Save