From 72ccfcc4aa30a637faf1c7da0d294329f01e34f7 Mon Sep 17 00:00:00 2001 From: Dylan Bolger Date: Wed, 21 Mar 2018 12:34:37 -0500 Subject: working on web --- assets/sass/base/_typography.scss | 271 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 271 insertions(+) create mode 100644 assets/sass/base/_typography.scss (limited to 'assets/sass/base/_typography.scss') diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss new file mode 100644 index 0000000..37635ff --- /dev/null +++ b/assets/sass/base/_typography.scss @@ -0,0 +1,271 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Typography */ + + html { + font-size: 18pt; + font-size: 1vmax; + + @include breakpoint(xlarge) { + font-size: 12pt; + font-size: 1.1vmax; + } + + @include breakpoint(large) { + font-size: 11pt; + font-size: 1.5vmax; + } + } + + body, input, select, textarea { + color: _palette(fg); + 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', + 'border-bottom-color #{_duration(transition)} ease-in-out' + )); + color: inherit; + border-bottom: dotted 1px; + text-decoration: none; + + &:hover { + border-bottom-color: transparent; + color: _palette(accent3); + } + } + + strong, b { + color: _palette(fg-bold); + font-weight: _font(weight-bold); + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 _size(element-margin) 0; + + body.is-ie & { + width: 100%; + } + } + + h1, h2, h3, h4, h5, h6 { + color: _palette(fg-bold); + font-family: _font(family-heading); + font-weight: _font(weight-heading); + line-height: 1.3; + margin: 0 0 (_size(element-margin) * 0.5) 0; + letter-spacing: -0.05em; + + a { + color: inherit; + text-decoration: none; + } + } + + h1, h2, h3 { + &.major { + position: relative; + + &:after { + content: ''; + position: absolute; + left: 0; + width: 3.5rem; + height: 0.1rem; + background-color: _palette(border); + } + } + } + + h1 { + font-size: 3rem; + line-height: 1.2; + + &.major { + margin: 0 0 (_size(element-margin) * 1.75) 0; + + &:after { + bottom: -1.325rem; + } + } + } + + h2 { + font-size: 1.75rem; + line-height: 1.2; + + &.major { + margin: 0 0 (_size(element-margin) * 1.325) 0; + + &:after { + bottom: -1.2rem; + } + } + } + + h3 { + font-size: 1.325rem; + + &.major { + margin: 0 0 (_size(element-margin) * 1.25) 0; + + &:after { + bottom: -0.75rem; + } + } + } + + h4 { + font-size: 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 0.25rem _palette(border); + font-style: italic; + margin: 0 0 _size(element-margin) 0; + padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); + } + + code { + background: _palette(border-bg); + border-radius: _size(border-radius); + font-family: _font(family-fixed); + font-size: 0.8rem; + margin: 0 0.25rem; + padding: 0.25rem 0.65rem; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: _font(family-fixed); + font-size: 0.8rem; + margin: 0 0 _size(element-margin) 0; + white-space: pre-wrap; + + code { + display: block; + line-height: 1.625; + padding: 1rem 1.5rem; + overflow-x: auto; + margin: 0; + } + } + + hr { + border: 0; + border-bottom: solid 2px _palette(border); + margin: (_size(element-margin) * 1.25) 0; + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + + @include breakpoint(small) { + html { + font-size: 12pt; + } + + h1 { + font-size: 2.25rem; + line-height: 1.2; + + &.major { + margin: 0 0 (_size(element-margin) * 1.75) 0; + + &:after { + bottom: -1.325rem; + } + } + } + + h2 { + font-size: 1.5rem; + line-height: 1.2; + + &.major { + margin: 0 0 (_size(element-margin) * 1.325) 0; + + &:after { + bottom: -1.2rem; + } + } + } + + h3 { + font-size: 1rem; + + &.major { + margin: 0 0 (_size(element-margin) * 1.25) 0; + + &:after { + bottom: -0.75rem; + } + } + } + + h4 { + font-size: 1rem; + } + + h5 { + font-size: 0.9rem; + } + + h6 { + font-size: 0.7rem; + } + + h1, h2, h3, h4, h5, h6 { + br { + display: none; + } + } + } + + @include breakpoint(xxsmall) { + html { + font-size: 11pt; + } + } \ No newline at end of file -- cgit v1.2.3