From 97dbc8c3772c89022a55d591c4ed90cee1d1feaa Mon Sep 17 00:00:00 2001 From: Dylan Bolger Date: Wed, 21 Mar 2018 08:24:51 -0500 Subject: redesign --- assets/sass/base/_page.scss | 105 +++++++++++++++ assets/sass/base/_typography.scss | 271 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 376 insertions(+) create mode 100644 assets/sass/base/_page.scss create mode 100644 assets/sass/base/_typography.scss (limited to 'assets/sass/base') diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss new file mode 100644 index 0000000..7c3e5c1 --- /dev/null +++ b/assets/sass/base/_page.scss @@ -0,0 +1,105 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Page */ + + @include keyframes('load-spinner') { + 0% { + @include vendor('transform', 'rotate(0deg)'); + } + + 100% { + @include vendor('transform', 'rotate(360deg)'); + } + } + + @-ms-viewport { + width: device-width; + } + + html { + width: 100%; + height: 100%; + } + + body { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'flex-start'); + -ms-overflow-style: scrollbar; + width: 100%; + height: 100%; + min-height: 30rem; + overflow: hidden; + + &:before { + @include vendor('animation', 'load-spinner 1s infinite linear'); + @include vendor('transition', 'opacity 0.25s ease'); + @include vendor('transition-delay', '0s'); + @include vendor('pointer-events', 'none'); + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 4rem; + height: 4rem; + margin: -2rem 0 0 -2rem; + background-image: svg-url(''); + background-position: center; + background-repeat: no-repeat; + background-size: 4rem; + opacity: 0; + } + + &:after { + @include vendor('pointer-events', 'none'); + content: ''; + display: block; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + background-attachment: fixed; + background-color: _palette(bg-alt); + background-image: url('../../images/overlay.png'), url('../../images/bg.jpg'); + background-repeat: repeat, repeat-x; + background-size: 128px 128px, cover; + } + + &.is-loading { + *, *:before, *:after { + @include vendor('animation', 'none !important'); + @include vendor('transition', 'none !important'); + } + + &:before { + @include vendor('transition', 'opacity 1s ease'); + @include vendor('transition-delay', '0.75s'); + opacity: 0.25; + } + } + } + + @include breakpoint(small) { + html { + height: auto; + } + + body { + height: auto; + overflow-x: hidden; + overflow-y: auto; + } + } + + @include breakpoint(xsmall) { + html, body { + min-width: 320px; + } + } \ No newline at end of file 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