mirror of
https://github.com/ivabus/www
synced 2024-11-10 15:05:16 +03:00
Content for style guide page.
This commit is contained in:
parent
ac0cae6169
commit
7b6a3a0019
|
@ -0,0 +1,29 @@
|
|||
{{ define "main" }}
|
||||
<section>
|
||||
<div class="container style-guide-container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1>The tea style guide. Also, this is an H1.</h1>
|
||||
<h2>We believe in open-sourcing everything... right down to our brand's look and feel. Also, this is an H2.</h2>
|
||||
<h3>Working with a visible grid system in a responsive framework is difficult, but you can inspect these elements to see how we did it.</h3>
|
||||
<h4>This H4 is intended to explain how we convert 'px' meaurements from design specs to 'vw' units. The formula for that is (vw = pixels / viewport total width x 100).</h4>
|
||||
<h5>This is an H5, and it's primarily used for things like the headers inside the footer section. It's a small one, but should still always be in our primary tea'l color.</h5>
|
||||
<p class="lead">This is our 'lead' text and it's displays slightly larger than our regular paragraph text. This variant is used for sub-heads and important 'call-out' information. Each line's height should be equivalent to roughly 1/3 the height of a grid box.</p>
|
||||
<p>And this is our good old-fashioned body copy. This font-size is on the larger end of what's considered standard for paragraph text. The monospace typeaces we're using, while super-cool, are not quite as ledgible as their variable-spaced counterparts. Thusly, we're over-compensating slightly. This variant, as well as the 'lead' text, should either be white (#fff) or 'Soft Black' (#1A1A1A)... depending on the background.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
|
||||
.style-guide-container{
|
||||
background-image: url("/Images/x-large-grid.svg");
|
||||
background-attachment: fixed;
|
||||
background-repeat: repeat-y;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
{{ end }}
|
|
@ -130,9 +130,9 @@ li{
|
|||
}
|
||||
|
||||
h2{
|
||||
font-size: 6rem;
|
||||
line-height: 7rem;
|
||||
margin-bottom: 37px;
|
||||
font-size: 6vw;
|
||||
line-height: 8.5vw;
|
||||
margin-bottom: 2.065vw;
|
||||
}
|
||||
|
||||
h3{
|
||||
|
@ -144,7 +144,7 @@ li{
|
|||
|
||||
h4{
|
||||
font-size: 2.121vw;
|
||||
line-height: 1.116vw;
|
||||
line-height: 4.116vw;
|
||||
}
|
||||
|
||||
.lead{
|
||||
|
|
Loading…
Reference in a new issue