fix(demo): improve grid, typography and tabs layouts

This commit is contained in:
KostyaDanovsky 2017-07-19 12:07:17 +03:00
parent e40353ebae
commit a0e7abcf0a
11 changed files with 108 additions and 67 deletions

View file

@ -29,9 +29,9 @@
<div class="name bold">Open Sans</div>
<div class="variants">
<span class="bold">Bold</span>
<span class="regular">Regular</span>
<span class="light">Light</span>
<span class="font-w-bold">Bold</span>
<span class="font-w-regular">Regular</span>
<span class="font-w-light">Light</span>
</div>
</div>
<p>
@ -41,7 +41,6 @@
</p>
</div>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-5">
@ -105,7 +104,6 @@
</div>
</div>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
@ -133,7 +131,6 @@
the far <strong>World of Grammar</strong>.
</p>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-5">
@ -154,7 +151,6 @@
<footer class="blockquote-footer">Vladimir Lugovsky</footer>
</blockquote>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>
@ -224,7 +220,6 @@
</div>
</div>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>
@ -258,7 +253,6 @@
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-5">
@ -283,7 +277,6 @@
Vokalia and <a href="http://google.com" target="_blank">Consonantia, there live the blind texts.</a>
</p>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>
@ -312,7 +305,6 @@
<li>A small river named Duden flows</li>
</ul>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>

View file

@ -2,22 +2,29 @@
@include nga-install-component() {
.font-secondary .header .name {
.font-secondary .font-header .name {
font-size: 4.5rem;
line-height: 4rem;
font-weight: nga-theme(font-weight-bold);
}
.font-main .header .name {
font-size: 2.5rem;
.font-main .font-header .name {
font-size: 3rem;
font-weight: nga-theme(font-weight-bold);
}
.font-row {
margin-bottom: 3rem;
.header {
align-items: baseline;
}
}
.header {
display: flex;
padding-bottom: 1rem;
margin-bottom: 1rem;
align-items: center;
padding-bottom: 1.125rem;
margin-bottom: 1.125rem;
border-bottom: 1px solid rgba(nga-theme(color-fg), 0.1);
color: nga-theme(color-fg-heading);
@ -30,7 +37,7 @@
line-height: 1;
align-items: flex-end;
h1 {
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
}
}