<main class="main ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac faucibus velit. Fusce ullamcorper turpis lorem, quis vehicula turpis sollicitudin non. Duis ac est non nisi consequat finibus. Praesent non erat lacus. Ut bibendum, purus at laoreet faucibus, ante magna dictum nibh, non convallis eros enim sed purus. Donec erat magna, cursus id fringilla a, sagittis in ligula. Fusce nisl dui, laoreet id venenatis ut, ullamcorper eu est. Maecenas suscipit, nunc in ultrices sollicitudin, est tellus pellentesque lacus, eu gravida est est at magna. Etiam porta facilisis urna euismod eleifend. Fusce mattis urna at nunc venenatis mollis. Vivamus euismod bibendum ex sed blandit. Sed sed pharetra lacus.
Quisque eleifend sem diam, id tincidunt nisl faucibus ac. Fusce et dictum sem. Donec convallis suscipit dictum. Curabitur fringilla sed massa vulputate molestie. Aenean et mollis lacus, non laoreet neque. Pellentesque eros nulla, tincidunt ut eros in, porta dignissim metus. Morbi eu nisi lacus. Donec in quam nec ligula tempor tempor non vulputate orci. Phasellus a mollis orci. In ut justo et purus sodales iaculis eu eu tellus. Vivamus mattis vehicula ipsum. Quisque sed nisi eget dui maximus aliquet. Curabitur lacinia nunc nec libero consequat egestas.
Etiam blandit massa justo, ac accumsan eros tempor sed. Phasellus ac orci id enim pellentesque consectetur vel ut magna. Vestibulum auctor ipsum feugiat sapien dapibus maximus ultrices sed leo. Nulla tincidunt malesuada sem a fringilla. Praesent molestie, nunc et placerat faucibus, elit arcu blandit metus, non dignissim nunc sem id justo. Aenean ullamcorper blandit consequat. Aliquam aliquam velit nec interdum accumsan. Fusce et auctor ex. Maecenas quis risus sed enim congue volutpat ac eu risus. Nam ultricies volutpat fermentum.
Proin molestie vel quam sit amet ullamcorper. Aliquam sollicitudin rhoncus viverra. Pellentesque augue felis, feugiat non imperdiet pharetra, ullamcorper non dui. Duis ut interdum elit. Proin bibendum enim sit amet lacus varius tincidunt. Aenean ligula dolor, malesuada eget mauris at, pretium pulvinar quam. Nunc faucibus a neque eu sodales. Mauris nulla sem, egestas sed scelerisque a, ultrices a dolor.
Nulla eget lectus non lacus mollis volutpat. Aenean condimentum faucibus odio id imperdiet. Curabitur venenatis, ipsum quis dapibus ornare, arcu leo scelerisque est, vitae vestibulum dui magna quis ligula. Pellentesque sit amet nibh at felis efficitur varius. Vestibulum iaculis tellus sed mi pretium lacinia. Sed vel massa quam. Maecenas ante enim, sodales vel convallis vitae, ultricies at sapien. Morbi finibus efficitur dictum. Vivamus mi nunc, faucibus ac mattis at, porta quis metus.
</main>
{% if data.content %}
<main class="main {{ class }} {{ modifier }}">
{{ data.content }}
</main>
{% endif %}
{
"language": "en-US",
"data": {
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac faucibus velit. Fusce ullamcorper turpis lorem, quis vehicula turpis sollicitudin non. Duis ac est non nisi consequat finibus. Praesent non erat lacus. Ut bibendum, purus at laoreet faucibus, ante magna dictum nibh, non convallis eros enim sed purus. Donec erat magna, cursus id fringilla a, sagittis in ligula. Fusce nisl dui, laoreet id venenatis ut, ullamcorper eu est. Maecenas suscipit, nunc in ultrices sollicitudin, est tellus pellentesque lacus, eu gravida est est at magna. Etiam porta facilisis urna euismod eleifend. Fusce mattis urna at nunc venenatis mollis. Vivamus euismod bibendum ex sed blandit. Sed sed pharetra lacus.\n\nQuisque eleifend sem diam, id tincidunt nisl faucibus ac. Fusce et dictum sem. Donec convallis suscipit dictum. Curabitur fringilla sed massa vulputate molestie. Aenean et mollis lacus, non laoreet neque. Pellentesque eros nulla, tincidunt ut eros in, porta dignissim metus. Morbi eu nisi lacus. Donec in quam nec ligula tempor tempor non vulputate orci. Phasellus a mollis orci. In ut justo et purus sodales iaculis eu eu tellus. Vivamus mattis vehicula ipsum. Quisque sed nisi eget dui maximus aliquet. Curabitur lacinia nunc nec libero consequat egestas.\n\nEtiam blandit massa justo, ac accumsan eros tempor sed. Phasellus ac orci id enim pellentesque consectetur vel ut magna. Vestibulum auctor ipsum feugiat sapien dapibus maximus ultrices sed leo. Nulla tincidunt malesuada sem a fringilla. Praesent molestie, nunc et placerat faucibus, elit arcu blandit metus, non dignissim nunc sem id justo. Aenean ullamcorper blandit consequat. Aliquam aliquam velit nec interdum accumsan. Fusce et auctor ex. Maecenas quis risus sed enim congue volutpat ac eu risus. Nam ultricies volutpat fermentum.\n\nProin molestie vel quam sit amet ullamcorper. Aliquam sollicitudin rhoncus viverra. Pellentesque augue felis, feugiat non imperdiet pharetra, ullamcorper non dui. Duis ut interdum elit. Proin bibendum enim sit amet lacus varius tincidunt. Aenean ligula dolor, malesuada eget mauris at, pretium pulvinar quam. Nunc faucibus a neque eu sodales. Mauris nulla sem, egestas sed scelerisque a, ultrices a dolor.\n\nNulla eget lectus non lacus mollis volutpat. Aenean condimentum faucibus odio id imperdiet. Curabitur venenatis, ipsum quis dapibus ornare, arcu leo scelerisque est, vitae vestibulum dui magna quis ligula. Pellentesque sit amet nibh at felis efficitur varius. Vestibulum iaculis tellus sed mi pretium lacinia. Sed vel massa quam. Maecenas ante enim, sodales vel convallis vitae, ultricies at sapien. Morbi finibus efficitur dictum. Vivamus mi nunc, faucibus ac mattis at, porta quis metus."
}
}
.main {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.main--padding {
padding-top: 37px;
@include bp(sm-min) {
padding-top: 57px;
}
}
.main--double-padding {
padding-top: 77px;
@include bp(sm-min) {
padding-top: 117px;
}
}
import './main.scss';
<main class="main main--top-margin">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac faucibus velit. Fusce ullamcorper turpis lorem, quis vehicula turpis sollicitudin non. Duis ac est non nisi consequat finibus. Praesent non erat lacus. Ut bibendum, purus at laoreet faucibus, ante magna dictum nibh, non convallis eros enim sed purus. Donec erat magna, cursus id fringilla a, sagittis in ligula. Fusce nisl dui, laoreet id venenatis ut, ullamcorper eu est. Maecenas suscipit, nunc in ultrices sollicitudin, est tellus pellentesque lacus, eu gravida est est at magna. Etiam porta facilisis urna euismod eleifend. Fusce mattis urna at nunc venenatis mollis. Vivamus euismod bibendum ex sed blandit. Sed sed pharetra lacus.
Quisque eleifend sem diam, id tincidunt nisl faucibus ac. Fusce et dictum sem. Donec convallis suscipit dictum. Curabitur fringilla sed massa vulputate molestie. Aenean et mollis lacus, non laoreet neque. Pellentesque eros nulla, tincidunt ut eros in, porta dignissim metus. Morbi eu nisi lacus. Donec in quam nec ligula tempor tempor non vulputate orci. Phasellus a mollis orci. In ut justo et purus sodales iaculis eu eu tellus. Vivamus mattis vehicula ipsum. Quisque sed nisi eget dui maximus aliquet. Curabitur lacinia nunc nec libero consequat egestas.
Etiam blandit massa justo, ac accumsan eros tempor sed. Phasellus ac orci id enim pellentesque consectetur vel ut magna. Vestibulum auctor ipsum feugiat sapien dapibus maximus ultrices sed leo. Nulla tincidunt malesuada sem a fringilla. Praesent molestie, nunc et placerat faucibus, elit arcu blandit metus, non dignissim nunc sem id justo. Aenean ullamcorper blandit consequat. Aliquam aliquam velit nec interdum accumsan. Fusce et auctor ex. Maecenas quis risus sed enim congue volutpat ac eu risus. Nam ultricies volutpat fermentum.
Proin molestie vel quam sit amet ullamcorper. Aliquam sollicitudin rhoncus viverra. Pellentesque augue felis, feugiat non imperdiet pharetra, ullamcorper non dui. Duis ut interdum elit. Proin bibendum enim sit amet lacus varius tincidunt. Aenean ligula dolor, malesuada eget mauris at, pretium pulvinar quam. Nunc faucibus a neque eu sodales. Mauris nulla sem, egestas sed scelerisque a, ultrices a dolor.
Nulla eget lectus non lacus mollis volutpat. Aenean condimentum faucibus odio id imperdiet. Curabitur venenatis, ipsum quis dapibus ornare, arcu leo scelerisque est, vitae vestibulum dui magna quis ligula. Pellentesque sit amet nibh at felis efficitur varius. Vestibulum iaculis tellus sed mi pretium lacinia. Sed vel massa quam. Maecenas ante enim, sodales vel convallis vitae, ultricies at sapien. Morbi finibus efficitur dictum. Vivamus mi nunc, faucibus ac mattis at, porta quis metus.
</main>
{% if data.content %}
<main class="main {{ class }} {{ modifier }}">
{{ data.content }}
</main>
{% endif %}
{
"language": "en-US",
"data": {
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac faucibus velit. Fusce ullamcorper turpis lorem, quis vehicula turpis sollicitudin non. Duis ac est non nisi consequat finibus. Praesent non erat lacus. Ut bibendum, purus at laoreet faucibus, ante magna dictum nibh, non convallis eros enim sed purus. Donec erat magna, cursus id fringilla a, sagittis in ligula. Fusce nisl dui, laoreet id venenatis ut, ullamcorper eu est. Maecenas suscipit, nunc in ultrices sollicitudin, est tellus pellentesque lacus, eu gravida est est at magna. Etiam porta facilisis urna euismod eleifend. Fusce mattis urna at nunc venenatis mollis. Vivamus euismod bibendum ex sed blandit. Sed sed pharetra lacus.\n\nQuisque eleifend sem diam, id tincidunt nisl faucibus ac. Fusce et dictum sem. Donec convallis suscipit dictum. Curabitur fringilla sed massa vulputate molestie. Aenean et mollis lacus, non laoreet neque. Pellentesque eros nulla, tincidunt ut eros in, porta dignissim metus. Morbi eu nisi lacus. Donec in quam nec ligula tempor tempor non vulputate orci. Phasellus a mollis orci. In ut justo et purus sodales iaculis eu eu tellus. Vivamus mattis vehicula ipsum. Quisque sed nisi eget dui maximus aliquet. Curabitur lacinia nunc nec libero consequat egestas.\n\nEtiam blandit massa justo, ac accumsan eros tempor sed. Phasellus ac orci id enim pellentesque consectetur vel ut magna. Vestibulum auctor ipsum feugiat sapien dapibus maximus ultrices sed leo. Nulla tincidunt malesuada sem a fringilla. Praesent molestie, nunc et placerat faucibus, elit arcu blandit metus, non dignissim nunc sem id justo. Aenean ullamcorper blandit consequat. Aliquam aliquam velit nec interdum accumsan. Fusce et auctor ex. Maecenas quis risus sed enim congue volutpat ac eu risus. Nam ultricies volutpat fermentum.\n\nProin molestie vel quam sit amet ullamcorper. Aliquam sollicitudin rhoncus viverra. Pellentesque augue felis, feugiat non imperdiet pharetra, ullamcorper non dui. Duis ut interdum elit. Proin bibendum enim sit amet lacus varius tincidunt. Aenean ligula dolor, malesuada eget mauris at, pretium pulvinar quam. Nunc faucibus a neque eu sodales. Mauris nulla sem, egestas sed scelerisque a, ultrices a dolor.\n\nNulla eget lectus non lacus mollis volutpat. Aenean condimentum faucibus odio id imperdiet. Curabitur venenatis, ipsum quis dapibus ornare, arcu leo scelerisque est, vitae vestibulum dui magna quis ligula. Pellentesque sit amet nibh at felis efficitur varius. Vestibulum iaculis tellus sed mi pretium lacinia. Sed vel massa quam. Maecenas ante enim, sodales vel convallis vitae, ultricies at sapien. Morbi finibus efficitur dictum. Vivamus mi nunc, faucibus ac mattis at, porta quis metus."
},
"modifier": "main--top-margin"
}
.main {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.main--padding {
padding-top: 37px;
@include bp(sm-min) {
padding-top: 57px;
}
}
.main--double-padding {
padding-top: 77px;
@include bp(sm-min) {
padding-top: 117px;
}
}
import './main.scss';