diff options
Diffstat (limited to 'assets/sass/base/_typography.scss')
| -rw-r--r-- | assets/sass/base/_typography.scss | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss new file mode 100644 index 0000000..342c192 --- /dev/null +++ b/assets/sass/base/_typography.scss @@ -0,0 +1,237 @@ +/* + Hugo Story by CaressOfSteel + A (modular, highly tweakable) responsive one-page theme for Hugo. + Ported from Story by HTML5UP. + This Hugo theme is licensed under the Creative Commons Attribution 3.0 License. +*/ + +/* Type */ + + html { + font-size: 18pt; + + @include breakpoint('<=xlarge') { + font-size: 14pt; + } + + @include breakpoint('<=large') { + font-size: 12pt; + } + + @include breakpoint('<=small') { + font-size: 11pt; + } + + @include breakpoint('<=xxsmall') { + font-size: 10pt; + } + } + + body { + background-color: _palette(bg); + color: _palette(fg); + } + + body, input, select, textarea { + font-family: _font(family); + font-size: 1rem; + font-weight: _font(weight); + line-height: 1.65; + } + + a { + @include vendor('transition', 'color #{_duration(transition)} ease-in-out'); + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + + strong, b { + font-weight: _font(weight-bold); + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 _size(element-margin) 0; + + &.major { + font-size: 1.25rem; + } + } + + h1, h2, h3, h4, h5, h6 { + font-weight: _font(weight); + line-height: 1.375; + letter-spacing: _font(kerning); + margin: 0 0 (_size(element-margin) * 0.5) 0; + + a { + color: inherit; + text-decoration: none; + } + } + + h1 { + font-size: 3.5rem; + line-height: 1.2; + } + + h2 { + font-size: 2.25rem; + } + + h3 { + font-size: 1.5rem; + } + + h4 { + font-size: 1.1rem; + } + + h5 { + font-size: 0.9rem; + } + + h6 { + font-size: 0.7rem; + } + + sub { + font-size: 0.8rem; + position: relative; + top: 0.5rem; + } + + sup { + font-size: 0.8rem; + position: relative; + top: -0.5rem; + } + + blockquote { + border-left: solid (_size(border-width) * 4); + font-style: italic; + margin: 0 0 _size(element-margin) 0; + padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); + } + + code { + border-radius: _size(border-radius); + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0.25rem; + padding: 0.25rem 0.325rem; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0 _size(element-margin) 0; + + code { + display: block; + line-height: 1.5; + padding: 0.75rem 1rem; + overflow-x: auto; + } + } + + hr { + border: 0; + border-bottom: solid _size(border-width); + margin: (_size(element-margin) * 1.25) 0; + + &.major { + margin: (_size(element-margin) * 1.75) 0; + } + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + + .footerspacer { + padding-left: 15px; + padding-right: 15px; + } + + @include breakpoint('<=small') { + p { + &.major { + font-size: 1.1rem; + } + } + + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.25rem; + } + + h4 { + font-size: 1rem; + } + } + + @mixin color-typography($p: null) { + + @if $p != null { + background-color: _palette($p, bg); + color: _palette($p, fg); + } + + input, select, textarea { + color: _palette($p, fg-bold); + } + + a { + color: _palette($p, fg-bold); + + &:hover { + color: _palette($p, accent); + } + } + + strong, b { + color: _palette($p, fg-bold); + } + + h1, h2, h3, h4, h5, h6 { + color: _palette($p, fg-bold); + } + + blockquote { + border-left-color: _palette($p, border); + } + + code { + background: _palette($p, border-bg); + border-color: _palette($p, border); + } + + hr { + border-bottom-color: _palette($p, border); + } + } + + @include color-typography;
\ No newline at end of file |