- commit
- 263e7110c23b1a2fecb94b6c91fcf566d9cb0fde
- parent
- 6b636572ae7fc5e89fbd170103d006045f21168d
- Author
- Tobias Bengfort <tobias.bengfort@gmx.net>
- Date
- 2016-09-11 10:12
use mfbs for advanced typography
Diffstat
| M | static/scss/base.scss | 8 | -------- |
| A | static/scss/bower_components/mfbs/sass/base.scss | 137 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | static/scss/bower_components/mfbs/sass/variables.scss | 16 | ++++++++++++++++ |
| M | static/scss/layout.scss | 5 | ++++- |
| M | static/scss/style.scss | 5 | +++++ |
| M | static/scss/user.scss | 1 | - |
6 files changed, 162 insertions, 10 deletions
diff --git a/static/scss/base.scss b/static/scss/base.scss
@@ -1,8 +1,3 @@1 -1 * {2 -1 box-sizing: border-box;3 -1 max-width: 100%;4 -1 }5 -16 1 [id^="json-"] { 7 2 display: none; 8 3 } @@ -17,9 +12,6 @@ textarea { 17 12 font-size: inherit; 18 13 } 19 1420 -121 15 html {22 -1 font-family: sans-serif;23 -1 font-size: 70%;24 16 background: $color-bg-html; 25 17 }
diff --git a/static/scss/bower_components/mfbs/sass/base.scss b/static/scss/bower_components/mfbs/sass/base.scss
@@ -0,0 +1,137 @@
-1 1 @viewport {
-1 2 width: device-width;
-1 3 }
-1 4
-1 5 *,
-1 6 *::before,
-1 7 *::after {
-1 8 box-sizing: inherit;
-1 9 max-width: 100%;
-1 10 }
-1 11
-1 12 p, address, blockquote, pre, table, dl, ul, ol, figure, fieldset {
-1 13 margin-top: 0;
-1 14 margin-bottom: $spacer;
-1 15 }
-1 16
-1 17 html {
-1 18 overflow-y: scroll;
-1 19 background-color: $color-bg;
-1 20 box-sizing: border-box;
-1 21 color: $color-fg;
-1 22 font-size: $font-size-max;
-1 23 font-family: sans-serif;
-1 24 line-height: 1.4;
-1 25 }
-1 26 body {
-1 27 margin: 2em auto;
-1 28 max-width: 36em;
-1 29 padding: 0 $padding;
-1 30 }
-1 31
-1 32 h1, h2, h3, h4, h5, h6 {
-1 33 line-height: 1.2;
-1 34 margin-bottom: 0.8rem;
-1 35 margin-top: 1.5 * $spacer;
-1 36 }
-1 37
-1 38 a {
-1 39 color: $color-link;
-1 40 text-decoration: underline;
-1 41
-1 42 &:hover, &:focus, &:active {
-1 43 color: $color-link-focus;
-1 44 }
-1 45 }
-1 46
-1 47 a:not([href]) {
-1 48 color: inherit;
-1 49 text-decoration: inherit;
-1 50
-1 51 &:hover, &:focus, &:active {
-1 52 color: inherit;
-1 53 }
-1 54 }
-1 55
-1 56 *::selection {
-1 57 background: $color-link;
-1 58 color: $color-bg;
-1 59 }
-1 60
-1 61 hr {
-1 62 border: 0;
-1 63 border-bottom: 1px solid $color-border;
-1 64 margin: $spacer 0;
-1 65 }
-1 66
-1 67 pre, code {
-1 68 font-size: 90%;
-1 69 font-family: monospace;
-1 70 background-color: $color-bg-tint;
-1 71 }
-1 72 code {
-1 73 padding: 0 0.25em;
-1 74 }
-1 75 pre {
-1 76 padding: $padding;
-1 77 overflow: auto;
-1 78 border: 1px solid $color-border;
-1 79
-1 80 code {
-1 81 background: none;
-1 82 font-size: 100%;
-1 83 padding: 0;
-1 84 }
-1 85 }
-1 86
-1 87 ol, ul {
-1 88 padding-left: $indentation;
-1 89 }
-1 90 dt {
-1 91 font-weight: bold;
-1 92 }
-1 93 dd {
-1 94 margin-left: $indentation;
-1 95 }
-1 96
-1 97 blockquote {
-1 98 font-style: italic;
-1 99 margin-left: $indentation;
-1 100 margin-right: 0;
-1 101 }
-1 102
-1 103 table {
-1 104 border-collapse: collapse;
-1 105 border-spacing: 0;
-1 106
-1 107 td, th {
-1 108 text-align: start;
-1 109 padding: $padding;
-1 110 border-top: 1px solid $color-border;
-1 111 vertical-align: top;
-1 112 }
-1 113 }
-1 114
-1 115 textarea {
-1 116 resize: vertical;
-1 117 }
-1 118
-1 119 fieldset {
-1 120 border: 1px solid $color-border;
-1 121 }
-1 122
-1 123 // Prevent sub and sup affecting line-height.
-1 124 sub, sup {
-1 125 line-height: 0;
-1 126 }
-1 127
-1 128 @media print {
-1 129 html {
-1 130 background: transparent;
-1 131 color: #000; // Black prints faster:
-1 132 }
-1 133
-1 134 h2, h3 {
-1 135 page-break-after: avoid;
-1 136 }
-1 137 }
diff --git a/static/scss/bower_components/mfbs/sass/variables.scss b/static/scss/bower_components/mfbs/sass/variables.scss
@@ -0,0 +1,16 @@ -1 1 // colors -1 2 -1 3 $color-bg: #fff !default; -1 4 $color-fg: #333 !default; -1 5 $color-bg-tint: #f3f3f3 !default; -1 6 $color-border: #aaa !default; -1 7 $color-link: #0275d8 !default; -1 8 $color-link-focus: #014c8c !default; -1 9 $color-invalid: red !default; -1 10 $font-size-min: 0.9em !default; -1 11 $font-size-max: 1.2em !default; -1 12 -1 13 // lengths -1 14 $padding: 0.5em !default; -1 15 $spacer: 1em !default; -1 16 $indentation: 2rem !default;
diff --git a/static/scss/layout.scss b/static/scss/layout.scss
@@ -6,7 +6,6 @@ html {
6 6 body {
7 7 max-width: 90em;
8 8 margin: 0 auto;
9 -1 padding: 0 $padding;
10 9 position: relative;
11 10
12 11 > div {
@@ -57,6 +56,10 @@ body > header {
57 56 }
58 57
59 58 @media (min-width: 40em) {
-1 59 html {
-1 60 overflow: auto;
-1 61 }
-1 62
60 63 #tree {
61 64 position: absolute;
62 65 top: 0;
diff --git a/static/scss/style.scss b/static/scss/style.scss
@@ -4,7 +4,12 @@ $color-fg: #000; 4 4 $color-link: #336DBE; 5 5 $color-bg-tint: #c2d5ee; 6 6 $color-border: #c0c0c0; -1 7 7 8 $padding: 0.4em; -1 9 $font-size-max: 70%; -1 10 -1 11 @import 'bower_components/mfbs/sass/variables'; -1 12 @import 'bower_components/mfbs/sass/base'; 8 13 9 14 @import 'base'; 10 15 @import 'layout';
diff --git a/static/scss/user.scss b/static/scss/user.scss
@@ -55,6 +55,5 @@ 55 55 width: 100%; 56 56 min-height: 15em; 57 57 border: none;58 -1 resize: vertical;59 58 padding: $padding; 60 59 }