Skip to content

italy-theme
italy-theme
Commit 3e27961c authored by Pietro Albini's avatar Pietro Albini
Browse files
Options

page: add a basic grid

parent 36d3d97a
Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 74 deletions
demo.html
View file @ 3e27961c
......@@ -79,76 +79,164 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div class="container">
<div class="page">
<div class="row">
<h1>Demo del tema di Ubuntu-it</h1>
<div class="col">
<h1>Demo del tema di Ubuntu-it</h1>
<p><a href="#" onclick="ubuntuit_cookiepolicy_clear()">
Mostra banner cookie policy
</a></p>
<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>
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>
<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>
<h2>Titolo h2</h2>
<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>
<h3>Titolo h3</h3>
<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>
<h4>Titolo h4</h4>
<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>
<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">
<h1>Tipografia</h1>
<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>
<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>
<h2>Titolo h2</h2>
<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>
<h3>Titolo h3</h3>
<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>
<h4>Titolo h4</h4>
<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 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>
......
scss/_page.scss
View file @ 3e27961c
......@@ -22,18 +22,24 @@ 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;
}
& > *:first-child {
margin-top: 0 !important;
}
div.col {
flex: 1;
margin: 0 1em;
& > *:first-child {
margin-top: 0 !important;
}
& > *:last-child {
margin-bottom: 0 !important;
& > *:last-child {
margin-bottom: 0 !important;
}
}
}
......@@ -41,7 +47,15 @@ div.page {
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