bigchaindb
/
site
mirror of https://github.com/bigchaindb/site.git
1
0
Fork 0
Code Releases Activity

responsive typography, tweak all breakpoints based on content

This commit is contained in:
Matthias Kretschmann 2015-12-21 14:48:45 +01:00
parent 0c17bb9741
commit 71f46c8b69
5 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_src/_assets/javascripts/bigchain/analytics.js
View File

@ -31,10 +31,10 @@ var GoogleAnalytics = (function(w,d) {
var timeout;
var breakpoints = {
xs: '(max-width: 29.9999em)',
sm: '(min-width: 30em) and (max-width: 40.624em)',
md: '(min-width: 40.625em) and (max-width: 87.499em)',
lg: '(min-width: 87.500em)'
xs: '(max-width: 34.999em)',
sm: '(min-width: 35em) and (max-width: 44.999)',
md: '(min-width: 45em) and (max-width: 74.999)',
lg: '(min-width: 75em)'
};
Object.keys(breakpoints).forEach(function(breakpoint) {

4
_src/_assets/styles/bigchain/_grid.scss
View File

@ -38,8 +38,8 @@
.row {
max-width: 50em;
margin: auto;
padding-left: ($gutter-space / 2);
padding-right: ($gutter-space / 2);
padding-left: $gutter-space;
padding-right: $gutter-space;
}

11
_src/_assets/styles/bigchain/_sections.scss
View File

@ -36,14 +36,10 @@
}
.section-title {
font-size: $font-size-h3;
font-size: $font-size-h2;
margin-top: 0;
margin-bottom: ($spacer * 2);
@media ($screen-sm) {
font-size: $font-size-h2;
}
// the bottom line
&:after {
content: "";
@ -56,13 +52,10 @@
}
.section-description {
font-size: $font-size-lg;
color: $headings-color;
margin-bottom: 0;
@media ($screen-sm) {
font-size: $font-size-lg;
}
+ .section-description {
margin-top: $spacer;
}

4
_src/_assets/styles/bigchain/_typography.scss
View File

@ -8,6 +8,10 @@
html {
font-size: $font-size-root;
-webkit-tap-highlight-color: rgba(0,0,0,0);
@media ($screen-lg) {
font-size: $font-size-root-lg;
}
}
body {

21
_src/_assets/styles/bigchain/_variables.scss
View File

@ -42,7 +42,8 @@ $font-weight-normal: 400 !default;
$font-weight-bold: 600 !default;
$font-weight-base: $font-weight-normal !default;
$font-size-root: 18px !default;
$font-size-root: 16px !default;
$font-size-root-lg: 18px !default;
$font-size-base: 1rem !default;
$font-size-lg: 1.25rem !default;
@ -74,18 +75,12 @@ $link-color: $brand-main-brown !default;
$link-hover-color: darken($link-color, 15%) !default;
//
// Grid
//
$gutter-space: 2rem !default;
//
// Responsive breakpoints
//
$screen-sm-min: 30em !default;
$screen-md-min: 40.625em !default;
$screen-lg-min: 87.500em !default;
$screen-sm-min: 35em !default;
$screen-md-min: 45em !default;
$screen-lg-min: 75em !default;
$screen-sm: 'min-width: #{$screen-sm-min}';
$screen-md: 'min-width: #{$screen-md-min}';
@ -107,6 +102,12 @@ $component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
//
// Grid
//
$gutter-space: ($spacer * 2) !default;
//
// Buttons
//