Commit 9f2bf4fb authored by Pietro Albini's avatar Pietro Albini

Add a basic grid

parent 36d3d97a
......@@ -79,13 +79,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div class="container">
<div class="page">
<div class="row">
<div class="col">
<h1>Demo del tema di Ubuntu-it</h1>
<p><a href="#" onclick="ubuntuit_cookiepolicy_clear()">
Mostra banner cookie policy
</a></p>
</div>
</div>
</div>
<div class="page">
<div class="row">
<div class="col">
<h1>Tipografia</h1>
<p>
......@@ -151,6 +156,89 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</p>
</div>
</div>
</div>
<div class="page">
<div class="row">
<div class="col">
<h1>Griglia</h1>
<pre>
&lt;div class="row"&gt;
&lt;div class="col"&gt;
&lt;!-- Prima colonna --&gt;
&lt;/div&gt;
&lt;div class="col"&gt;
&lt;!-- Seconda colonna --&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<div class="row">
<div class="col">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe. Recusandae quis deleniti
debitis non. Nihil molestiae autem ratione doloremque
sit quaerat consequuntur. Velit minus aut et
voluptatem. Dolorem explicabo commodi ullam in iusto
at reiciendis. Eaque quibusdam ad et dolores. Qui
numquam nemo est fuga quia animi impedit enim.
</p>
</div>
<div class="col">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe. Recusandae quis deleniti
debitis non. Nihil molestiae autem ratione doloremque
sit quaerat consequuntur. Velit minus aut et
voluptatem. Dolorem explicabo commodi ullam in iusto
at reiciendis. Eaque quibusdam ad et dolores. Qui
numquam nemo est fuga quia animi impedit enim.
</p>
</div>
</div>
<div class="row">
<div class="col">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe. Recusandae quis deleniti
debitis non. Nihil molestiae autem ratione doloremque
sit quaerat consequuntur. Velit minus aut et
voluptatem. Dolorem explicabo commodi ullam in iusto
at reiciendis. Eaque quibusdam ad et dolores. Qui
numquam nemo est fuga quia animi impedit enim.
</p>
</div>
<div class="col">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe. Recusandae quis deleniti
debitis non. Nihil molestiae autem ratione doloremque
sit quaerat consequuntur. Velit minus aut et
voluptatem. Dolorem explicabo commodi ullam in iusto
at reiciendis. Eaque quibusdam ad et dolores. Qui
numquam nemo est fuga quia animi impedit enim.
</p>
</div>
<div class="col">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe. Recusandae quis deleniti
debitis non. Nihil molestiae autem ratione doloremque
sit quaerat consequuntur. Velit minus aut et
voluptatem. Dolorem explicabo commodi ullam in iusto
at reiciendis. Eaque quibusdam ad et dolores. Qui
numquam nemo est fuga quia animi impedit enim.
</p>
</div>
</div>
</div>
<footer>
<p>
......
......@@ -22,12 +22,17 @@ div.page {
div.row {
border-top: 1px dotted mix(#fff, $color_warm_gray, 40%);
padding: 2em;
padding: 2em 1em;
display: flex;
&:first-child {
border-top: 0;
}
div.col {
flex: 1;
margin: 0 1em;
& > *:first-child {
margin-top: 0 !important;
}
......@@ -36,12 +41,21 @@ div.page {
margin-bottom: 0 !important;
}
}
}
@media all and (max-width: $page_size) {
border-radius: 0;
div.row {
padding: 2em 1em;
display: block;
div.col {
margin: 2em 0 0 0;
&:first-child {
margin-top: 0;
}
}
}
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment