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/>. ...@@ -79,76 +79,164 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div class="container"> <div class="container">
<div class="page"> <div class="page">
<div class="row"> <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()"> <p><a href="#" onclick="ubuntuit_cookiepolicy_clear()">
Mostra banner cookie policy Mostra banner cookie policy
</a></p> </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>
<div class="row"> <div class="row">
<h1>Tipografia</h1> <div class="col">
<p>
<p> Sunt vitae recusandae laborum. Qui consequatur
Sunt vitae recusandae laborum. Qui consequatur laudantium illo corporis. Quia quidem occaecati
laudantium illo corporis. Quia quidem occaecati corporis libero a saepe. Recusandae quis deleniti
corporis libero a saepe. Recusandae quis deleniti debitis non. Nihil molestiae autem ratione doloremque
debitis non. Nihil molestiae autem ratione doloremque sit quaerat consequuntur. Velit minus aut et
sit quaerat consequuntur. Velit minus aut et voluptatem. Dolorem explicabo commodi ullam in iusto
voluptatem. Dolorem explicabo commodi ullam in iusto at reiciendis. Eaque quibusdam ad et dolores. Qui
at reiciendis. Eaque quibusdam ad et dolores. Qui numquam nemo est fuga quia animi impedit enim.
numquam nemo est fuga quia animi impedit enim. </p>
</p> </div>
<div class="col">
<p> <p>
Sunt vitae recusandae laborum. Qui consequatur Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe. Recusandae quis deleniti corporis libero a saepe. Recusandae quis deleniti
debitis non. Nihil molestiae autem ratione doloremque debitis non. Nihil molestiae autem ratione doloremque
sit quaerat consequuntur. Velit minus aut et sit quaerat consequuntur. Velit minus aut et
voluptatem. Dolorem explicabo commodi ullam in iusto voluptatem. Dolorem explicabo commodi ullam in iusto
at reiciendis. Eaque quibusdam ad et dolores. Qui at reiciendis. Eaque quibusdam ad et dolores. Qui
numquam nemo est fuga quia animi impedit enim. numquam nemo est fuga quia animi impedit enim.
</p> </p>
</div>
<h2>Titolo h2</h2> <div class="col">
<p>
<p> Sunt vitae recusandae laborum. Qui consequatur
Sunt vitae recusandae laborum. Qui consequatur laudantium illo corporis. Quia quidem occaecati
laudantium illo corporis. Quia quidem occaecati corporis libero a saepe. Recusandae quis deleniti
corporis libero a saepe. Recusandae quis deleniti debitis non. Nihil molestiae autem ratione doloremque
debitis non. Nihil molestiae autem ratione doloremque sit quaerat consequuntur. Velit minus aut et
sit quaerat consequuntur. Velit minus aut et voluptatem. Dolorem explicabo commodi ullam in iusto
voluptatem. Dolorem explicabo commodi ullam in iusto at reiciendis. Eaque quibusdam ad et dolores. Qui
at reiciendis. Eaque quibusdam ad et dolores. Qui numquam nemo est fuga quia animi impedit enim.
numquam nemo est fuga quia animi impedit enim. </p>
</p> </div>
<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>
......
scss/_page.scss
View file @ 3e27961c
...@@ -22,18 +22,24 @@ div.page { ...@@ -22,18 +22,24 @@ div.page {
div.row { div.row {
border-top: 1px dotted mix(#fff, $color_warm_gray, 40%); border-top: 1px dotted mix(#fff, $color_warm_gray, 40%);
padding: 2em; padding: 2em 1em;
display: flex;
&:first-child { &:first-child {
border-top: 0; border-top: 0;
} }
& > *:first-child { div.col {
margin-top: 0 !important; flex: 1;
} margin: 0 1em;
& > *:first-child {
margin-top: 0 !important;
}
& > *:last-child { & > *:last-child {
margin-bottom: 0 !important; margin-bottom: 0 !important;
}
} }
} }
...@@ -41,7 +47,15 @@ div.page { ...@@ -41,7 +47,15 @@ div.page {
border-radius: 0; border-radius: 0;
div.row { 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