bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2025-02-14 21:10:28 +01:00
Code Releases Activity

responsive typography, tweak all breakpoints based on content

Browse Source
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 timeout;
var breakpoints = { var breakpoints = {
xs: '(max-width: 29.9999em)', xs: '(max-width: 34.999em)',
sm: '(min-width: 30em) and (max-width: 40.624em)', sm: '(min-width: 35em) and (max-width: 44.999)',
md: '(min-width: 40.625em) and (max-width: 87.499em)', md: '(min-width: 45em) and (max-width: 74.999)',
lg: '(min-width: 87.500em)' lg: '(min-width: 75em)'
}; };
Object.keys(breakpoints).forEach(function(breakpoint) { Object.keys(breakpoints).forEach(function(breakpoint) {

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

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

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

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

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

@ -8,6 +8,10 @@
html { html {
font-size: $font-size-root; font-size: $font-size-root;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
@media ($screen-lg) {
font-size: $font-size-root-lg;
}
} }
body { 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-bold: 600 !default;
$font-weight-base: $font-weight-normal !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-base: 1rem !default;
$font-size-lg: 1.25rem !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; $link-hover-color: darken($link-color, 15%) !default;
//
// Grid
//
$gutter-space: 2rem !default;
// //
// Responsive breakpoints // Responsive breakpoints
// //
$screen-sm-min: 30em !default; $screen-sm-min: 35em !default;
$screen-md-min: 40.625em !default; $screen-md-min: 45em !default;
$screen-lg-min: 87.500em !default; $screen-lg-min: 75em !default;
$screen-sm: 'min-width: #{$screen-sm-min}'; $screen-sm: 'min-width: #{$screen-sm-min}';
$screen-md: 'min-width: #{$screen-md-min}'; $screen-md: 'min-width: #{$screen-md-min}';
@ -107,6 +102,12 @@ $component-active-color: #fff !default;
$component-active-bg: $brand-primary !default; $component-active-bg: $brand-primary !default;
//
// Grid
//
$gutter-space: ($spacer * 2) !default;
// //
// Buttons // Buttons
// //