...
 
Commits (3)
......@@ -23,7 +23,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<title>Demo - Tema di Ubuntu-it</title>
<link rel="stylesheet" href="https://static.ubuntu-it.org/fonts/ubuntu/include.min.css">
<!-- Try to load the theme from multiple places (depends on how you build) -->
<link rel="stylesheet" href="build/theme.css">
<link rel="stylesheet" href="theme.min.css">
</head>
<body>
......@@ -220,9 +223,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<code>.col-quarter</code> per specificare le
dimensioni di una colonna. Se le classi non sono
specificate le colonne avranno dimensione
automatica. Inoltre, <code>.col-center</code>
allinea il contenuto della colonna al centro,
verticalmente ed orizzontalmente.
automatica. Altrimenti, se le classi sono
specificate ma non riempiono tutta la riga le
colonne saranno centrate. Inoltre,
<code>.col-center</code> allinea il contenuto della
colonna al centro, verticalmente ed
orizzontalmente.
</p>
<p>
Se si vogliono rimuovere i bordi fra le righe,
aggiungere la classe <code>.row-borderless</code>
nella riga inferiore.
</p>
</div>
</div>
......@@ -360,7 +372,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</p>
</div>
</div>
<div class="row">
<div class="row row-borderless">
<div class="col">
<p>
Sunt vitae recusandae laborum. Qui consequatur
......@@ -379,6 +391,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</p>
</div>
</div>
<div class="row">
<div class="col col-half">
<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">
......@@ -528,6 +554,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</footer>
</div>
<!-- Try to load the theme from multiple places (depends on how you build) -->
<script type="text/javascript" src="build/theme.js"></script>
<script type="text/javascript" src="theme.min.js"></script>
</body>
</html>
......@@ -21,10 +21,13 @@ div.page {
margin: 1.5em 0;
div.row {
background: #fff;
border-top: 1px dotted mix(#fff, $color_warm_gray, 40%);
padding: 2em 1em;
display: flex;
justify-content: center;
&:first-child {
border-top: 0;
border-top-left-radius: 0.2em;
......@@ -36,6 +39,12 @@ div.page {
border-bottom-right-radius: 0.2em;
}
&.row-borderless {
border-top: 0;
padding-top: 1em;
margin-top: -1em;
}
div.col {
flex: 1;
margin: 0 1em;
......@@ -63,6 +72,10 @@ div.page {
&.col-center {
text-align: center;
align-self: center;
p {
text-align: center;
}
}
}
}
......