mirror of https://github.com/bigchaindb/site.git
337 lines
5.3 KiB
SCSS
337 lines
5.3 KiB
SCSS
//
|
|
// Typography
|
|
// ---
|
|
// bigchaindb.com
|
|
//
|
|
|
|
// Body reset
|
|
html {
|
|
font-size: $font-size-root;
|
|
-webkit-tap-highlight-color: rgba($brand-main-blue-dark, 0);
|
|
|
|
@media ($screen-lg) {
|
|
font-size: $font-size-root-lg;
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: $font-family-base;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-base;
|
|
line-height: $line-height;
|
|
color: $text-color;
|
|
background-color: $body-bg;
|
|
|
|
// handling long text, like URLs
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
text-rendering: optimizeLegibility;
|
|
// Controversial! But prevents text flickering in
|
|
// Safari/Firefox when animations are running
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
// remove old style numerals
|
|
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'pnum' 1, 'tnum' 0, 'onum' 0, 'lnum' 0, 'dlig' 1;
|
|
}
|
|
|
|
|
|
//
|
|
// Smoothly fade in all content after
|
|
// fonts have loaded. Not quite useful,
|
|
// but beautiful.
|
|
//
|
|
.hero,
|
|
.header,
|
|
.section,
|
|
.content {
|
|
.row {
|
|
@include transition;
|
|
|
|
.wf-loading & {
|
|
opacity: 0;
|
|
}
|
|
|
|
.wf-active &,
|
|
.wf-inactive & {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Reset fonts for relevant elements
|
|
input,
|
|
button,
|
|
select,
|
|
textarea {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
|
|
//
|
|
// Links
|
|
//
|
|
a {
|
|
@include transition;
|
|
color: $link-color;
|
|
text-decoration: none;
|
|
box-shadow: inset 0 -2px 0 $brand-primary;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $link-hover-color;
|
|
background: $link-hover-bg;
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
// External links
|
|
.dropdown,
|
|
.content--page {
|
|
[rel='external'],
|
|
[target='_blank'] {
|
|
&:after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 9px;
|
|
height: 8px;
|
|
background: url('../img/icon-arrowout.svg') no-repeat center center;
|
|
background-size: contain;
|
|
transition: .15s ease-out;
|
|
margin-left: $spacer / 8;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Headings
|
|
//
|
|
|
|
/* stylelint-disable selector-list-comma-newline-after */
|
|
h1, h2, h3, h4, h5, h6,
|
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
font-family: $headings-font-family;
|
|
line-height: $headings-line-height;
|
|
color: $headings-color;
|
|
|
|
// remove old style numerals
|
|
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'pnum' 1, 'tnum' 0, 'onum' 0, 'lnum' 0, 'dlig' 1;
|
|
|
|
.wf-loading & {
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
|
|
&,
|
|
.wf-active &,
|
|
.wf-inactive & {
|
|
font-weight: $headings-font-weight;
|
|
}
|
|
}
|
|
|
|
|
|
h1, .h1,
|
|
h2, .h2,
|
|
h3, .h3 {
|
|
margin-top: ($spacer * 2);
|
|
margin-bottom: ($spacer * 2);
|
|
}
|
|
|
|
h4, .h4,
|
|
h5, .h5,
|
|
h6, .h6 {
|
|
margin-top: $spacer;
|
|
margin-bottom: $spacer;
|
|
}
|
|
|
|
h5, .h5,
|
|
h6, .h6 {
|
|
&,
|
|
.wf-active &,
|
|
.wf-inactive & {
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
}
|
|
|
|
h1, .h1 { font-size: $font-size-h1; }
|
|
h2, .h2 { font-size: $font-size-h2; }
|
|
h3, .h3 { font-size: $font-size-h3; }
|
|
h4, .h4 { font-size: $font-size-h4; }
|
|
h5, .h5 { font-size: $font-size-h5; }
|
|
h6, .h6 { font-size: $font-size-h6; }
|
|
|
|
/* stylelint-enable */
|
|
|
|
//
|
|
// Body text
|
|
//
|
|
p {
|
|
margin: 0 0 $spacer;
|
|
}
|
|
|
|
|
|
//
|
|
// Emphasis & misc
|
|
//
|
|
small,
|
|
.small {
|
|
@include text-small;
|
|
}
|
|
|
|
.mini {
|
|
@include text-mini;
|
|
}
|
|
|
|
.large {
|
|
@include text-large;
|
|
}
|
|
|
|
strong,
|
|
.strong,
|
|
.bold {
|
|
@include text-bold;
|
|
}
|
|
|
|
em,
|
|
.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.light {
|
|
@include text-light;
|
|
}
|
|
|
|
// Alignment
|
|
.text-left { text-align: left; }
|
|
.text-right { text-align: right; }
|
|
.text-center { text-align: center; }
|
|
.text-justify { text-align: justify; }
|
|
.text-nowrap { white-space: nowrap; }
|
|
|
|
.lead {
|
|
@include text-lead;
|
|
}
|
|
|
|
.pretitle {
|
|
@extend .h6;
|
|
display: block;
|
|
margin: 0;
|
|
margin-bottom: $spacer;
|
|
color: $text-color;
|
|
opacity: .6;
|
|
}
|
|
|
|
//
|
|
// Lists
|
|
//
|
|
// Unordered and Ordered lists
|
|
ul,
|
|
ol {
|
|
margin-top: $spacer;
|
|
margin-bottom: $spacer;
|
|
padding-left: ($spacer * 2);
|
|
|
|
li {
|
|
padding-left: ($spacer / 2);
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
margin-top: ($spacer / 2);
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
li { list-style-type: circle; }
|
|
}
|
|
|
|
// List options
|
|
@mixin list-unstyled {
|
|
padding-left: 0;
|
|
margin: 0;
|
|
|
|
li {
|
|
list-style: none;
|
|
margin-bottom: 0;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
.list-unstyled {
|
|
@include list-unstyled;
|
|
}
|
|
|
|
// Inline turns list items into inline-block
|
|
.list-inline {
|
|
@include list-unstyled;
|
|
margin-left: -5px;
|
|
|
|
> li {
|
|
display: inline-block;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Blockquotes
|
|
//
|
|
blockquote {
|
|
@extend .text-dimmed;
|
|
border-left: 3px solid $gray-light;
|
|
margin-left: 0;
|
|
margin-top: $spacer;
|
|
margin-bottom: $spacer;
|
|
padding: ($spacer / 2) $spacer;
|
|
font-style: italic;
|
|
|
|
p,
|
|
ul,
|
|
ol {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
cite {
|
|
@extend .bold, .small;
|
|
font-style: normal;
|
|
}
|
|
|
|
// Addresses
|
|
address {
|
|
margin-bottom: $spacer;
|
|
font-style: normal;
|
|
line-height: $line-height;
|
|
}
|
|
|
|
|
|
//
|
|
// Trademark symbol
|
|
//
|
|
.trademark {
|
|
top: -.45em;
|
|
left: -.15em;
|
|
margin-right: -.2em; // reduce kerning
|
|
opacity: .6;
|
|
font-family: inherit;
|
|
font-size: 60%;
|
|
}
|
|
|
|
|
|
//
|
|
// Text selection
|
|
//
|
|
::selection {
|
|
color: #fff;
|
|
background: $brand-main-blue;
|
|
}
|