diff --git a/README.txt b/README.txt index e81dd46..984def9 100644 --- a/README.txt +++ b/README.txt @@ -1,12 +1,13 @@ -Dimension by HTML5 UP +Massively by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -This is Dimension, a fun little one-pager with modal-ized (is that a word?) "pages" -and a cool depth effect (click on a menu item to see what I mean). Simple, fully -responsive, and kitted out with all the usual pre-styled elements you'd expect. -Hope you dig it :) +This is Massively, a text-heavy, article-oriented design built around a huge background +image (with a new parallax implementation I'm testing) and scroll effects (powered by +Scrollex). A *slight* departure from all the one-pagers I've been doing lately, but one +that fulfills a few user requests and makes use of some new techniques I've been wanting +to try out. Enjoy it :) Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images you can use for pretty much whatever. @@ -27,4 +28,5 @@ Credits: Other: jQuery (jquery.com) + Scrollex (github.com/ajlkn/jquery.scrollex) Responsive Tools (github.com/ajlkn/responsive-tools) \ No newline at end of file diff --git a/Web.config b/Web.config new file mode 100644 index 0000000..f6a36c3 --- /dev/null +++ b/Web.config @@ -0,0 +1,15 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index e418ac3..15763ca 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,10 +1,10 @@ @import url(fontawesome-all.min.css); -@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600"); +@import url("https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900"); -/* - Dimension by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/* + Massively by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ html, body, div, span, applet, object, @@ -78,6 +78,10 @@ input, select, textarea { width: device-width; } + body { + -ms-overflow-style: scrollbar; + } + @media screen and (max-width: 480px) { html, body { @@ -95,7 +99,7 @@ input, select, textarea { } body { - background: #1b1f22; + background-color: #1e252d; } body.is-preload *, body.is-preload *:before, body.is-preload *:after { @@ -123,7 +127,7 @@ input, select, textarea { } - @media screen and (max-width: 736px) { + @media screen and (max-width: 1280px) { html { font-size: 11pt; @@ -139,22 +143,24 @@ input, select, textarea { } + body { + color: #212931; + } + body, input, select, textarea { - color: #ffffff; - font-family: "Source Sans Pro", sans-serif; + font-family: "Merriweather", Georgia, serif; font-weight: 300; font-size: 1rem; - line-height: 1.65; + line-height: 2.375; } a { - -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - border-bottom: dotted 1px rgba(255, 255, 255, 0.5); + -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + border-bottom: dotted 1px; text-decoration: none; - color: inherit; } a:hover { @@ -162,7 +168,6 @@ input, select, textarea { } strong, b { - color: #ffffff; font-weight: 600; } @@ -171,73 +176,52 @@ input, select, textarea { } p { + text-align: justify; margin: 0 0 2rem 0; } h1, h2, h3, h4, h5, h6 { - color: #ffffff; - font-weight: 600; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-weight: 900; line-height: 1.5; - margin: 0 0 1rem 0; + letter-spacing: 0.075em; text-transform: uppercase; - letter-spacing: 0.2rem; + margin: 0 0 1rem 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + border-bottom: 0; color: inherit; text-decoration: none; } - h1.major, h2.major, h3.major, h4.major, h5.major, h6.major { - border-bottom: solid 1px #ffffff; - width: -moz-max-content; - width: -webkit-max-content; - width: -ms-max-content; - width: max-content; - padding-bottom: 0.5rem; - margin: 0 0 2rem 0; - } - h1 { - font-size: 2.25rem; - line-height: 1.3; - letter-spacing: 0.5rem; + font-size: 4rem; + line-height: 1.1; + margin: 0 0 2rem 0; } h2 { - font-size: 1.5rem; - line-height: 1.4; - letter-spacing: 0.5rem; + font-size: 1.75rem; + line-height: 1.3; + margin: 0 0 1.5rem 0; } h3 { - font-size: 1rem; + font-size: 1.25rem; + margin: 0 0 1.5rem 0; } h4 { - font-size: 0.8rem; + font-size: 1rem; } h5 { - font-size: 0.7rem; + font-size: 0.9rem; } h6 { - font-size: 0.6rem; - } - - @media screen and (max-width: 736px) { - - h1 { - font-size: 1.75rem; - line-height: 1.4; - } - - h2 { - font-size: 1.25em; - line-height: 1.5; - } - + font-size: 0.8rem; } sub { @@ -253,15 +237,14 @@ input, select, textarea { } blockquote { - border-left: solid 4px #ffffff; + border-left: solid 4px; font-style: italic; margin: 0 0 2rem 0; padding: 0.5rem 0 0.5rem 2rem; } code { - background: rgba(255, 255, 255, 0.075); - border-radius: 4px; + border: solid 2px; font-family: "Courier New", monospace; font-size: 0.9rem; margin: 0 0.25rem; @@ -284,10 +267,14 @@ input, select, textarea { hr { border: 0; - border-bottom: solid 1px #ffffff; - margin: 2.75rem 0; + border-bottom: solid 2px; + margin: 3rem 0; } + hr.major { + margin: 5rem 0; + } + .align-left { text-align: left; } @@ -300,1359 +287,4403 @@ input, select, textarea { text-align: right; } -/* Form */ + input, select, textarea { + color: #212931; + } - form { - margin: 0 0 2rem 0; + a { + color: #212931; + border-bottom-color: rgba(33, 41, 49, 0.5); } - form > :last-child { - margin-bottom: 0; + a:hover { + border-bottom-color: transparent; + color: #18bfef !important; } - form > .fields { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - width: calc(100% + 3rem); - margin: -1.5rem 0 2rem -1.5rem; - } + strong, b { + color: #212931; + } - form > .fields > .field { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - padding: 1.5rem 0 0 1.5rem; - width: calc(100% - 1.5rem); - } + h1, h2, h3, h4, h5, h6 { + color: #212931; + } - form > .fields > .field.half { - width: calc(50% - 0.75rem); - } + blockquote { + border-left-color: #eeeeee; + } - form > .fields > .field.third { - width: calc(100%/3 - 0.5rem); - } + code { + background: rgba(220, 220, 220, 0.25); + border-color: #eeeeee; + } - form > .fields > .field.quarter { - width: calc(25% - 0.375rem); - } + hr { + border-bottom-color: #eeeeee; + } - @media screen and (max-width: 480px) { +/* Row */ - form > .fields { - width: calc(100% + 3rem); - margin: -1.5rem 0 2rem -1.5rem; - } + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } - form > .fields > .field { - padding: 1.5rem 0 0 1.5rem; - width: calc(100% - 1.5rem); - } + .row > * { + box-sizing: border-box; + } - form > .fields > .field.half { - width: calc(100% - 1.5rem); - } + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } - form > .fields > .field.third { - width: calc(100% - 1.5rem); - } + .row.aln-left { + justify-content: flex-start; + } - form > .fields > .field.quarter { - width: calc(100% - 1.5rem); - } + .row.aln-center { + justify-content: center; + } + .row.aln-right { + justify-content: flex-end; } - label { - color: #ffffff; - display: block; - font-size: 0.8rem; - font-weight: 300; - letter-spacing: 0.2rem; - line-height: 1.5; - margin: 0 0 1rem 0; - text-transform: uppercase; - } + .row.aln-top { + align-items: flex-start; + } - input[type="text"], - input[type="password"], - input[type="email"], - input[type="tel"], - select, - textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - background-color: transparent; - border-radius: 4px; - border: solid 1px #ffffff; - color: inherit; - display: block; - outline: 0; - padding: 0 1rem; - text-decoration: none; - width: 100%; - } + .row.aln-middle { + align-items: center; + } - input[type="text"]:invalid, - input[type="password"]:invalid, - input[type="email"]:invalid, - input[type="tel"]:invalid, - select:invalid, - textarea:invalid { - box-shadow: none; + .row.aln-bottom { + align-items: flex-end; } - input[type="text"]:focus, - input[type="password"]:focus, - input[type="email"]:focus, - input[type="tel"]:focus, - select:focus, - textarea:focus { - background: rgba(255, 255, 255, 0.075); - border-color: #ffffff; - box-shadow: 0 0 0 1px #ffffff; + .row > .imp { + order: -1; } - select { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23ffffff' /%3E%3C/svg%3E"); - background-size: 1.25rem; - background-repeat: no-repeat; - background-position: calc(100% - 1rem) center; - height: 2.75rem; - padding-right: 2.75rem; - text-overflow: ellipsis; - } + .row > .col-1 { + width: 8.33333%; + } - select option { - color: #ffffff; - background: #1b1f22; + .row > .off-1 { + margin-left: 8.33333%; } - select:focus::-ms-value { - background-color: transparent; + .row > .col-2 { + width: 16.66667%; } - select::-ms-expand { - display: none; + .row > .off-2 { + margin-left: 16.66667%; } - input[type="text"], - input[type="password"], - input[type="email"], - select { - height: 2.75rem; - } + .row > .col-3 { + width: 25%; + } - textarea { - padding: 0.75rem 1rem; - } + .row > .off-3 { + margin-left: 25%; + } - input[type="checkbox"], - input[type="radio"] { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - display: block; - float: left; - margin-right: -2rem; - opacity: 0; - width: 1rem; - z-index: -1; - } + .row > .col-4 { + width: 33.33333%; + } - input[type="checkbox"] + label, - input[type="radio"] + label { - text-decoration: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - color: #ffffff; - cursor: pointer; - display: inline-block; - font-size: 0.8rem; - font-weight: 300; - margin: 0 0 0.5rem 0; - padding-left: 2.65rem; - padding-right: 0.75rem; - position: relative; + .row > .off-4 { + margin-left: 33.33333%; } - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - } + .row > .col-5 { + width: 41.66667%; + } - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - border-radius: 4px; - border: solid 1px #ffffff; - content: ''; - display: inline-block; - height: 1.65rem; - left: 0; - line-height: 1.65rem; - position: absolute; - text-align: center; - top: -0.15rem; - width: 1.65rem; - } + .row > .off-5 { + margin-left: 41.66667%; + } - input[type="checkbox"]:checked + label:before, - input[type="radio"]:checked + label:before { - background: #ffffff !important; - border-color: #ffffff !important; - color: #1b1f22; - content: '\f00c'; + .row > .col-6 { + width: 50%; } - input[type="checkbox"]:focus + label:before, - input[type="radio"]:focus + label:before { - background: rgba(255, 255, 255, 0.075); - border-color: #ffffff; - box-shadow: 0 0 0 1px #ffffff; + .row > .off-6 { + margin-left: 50%; } - input[type="checkbox"] + label:before { - border-radius: 4px; - } + .row > .col-7 { + width: 58.33333%; + } - input[type="radio"] + label:before { - border-radius: 100%; - } + .row > .off-7 { + margin-left: 58.33333%; + } - ::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.5) !important; - opacity: 1.0; - } + .row > .col-8 { + width: 66.66667%; + } - :-moz-placeholder { - color: rgba(255, 255, 255, 0.5) !important; - opacity: 1.0; - } + .row > .off-8 { + margin-left: 66.66667%; + } - ::-moz-placeholder { - color: rgba(255, 255, 255, 0.5) !important; - opacity: 1.0; - } + .row > .col-9 { + width: 75%; + } - :-ms-input-placeholder { - color: rgba(255, 255, 255, 0.5) !important; - opacity: 1.0; - } + .row > .off-9 { + margin-left: 75%; + } - .formerize-placeholder { - color: rgba(255, 255, 255, 0.5) !important; - opacity: 1.0; - } + .row > .col-10 { + width: 83.33333%; + } -/* Box */ - - .box { - border-radius: 4px; - border: solid 1px #ffffff; - margin-bottom: 2rem; - padding: 1.5em; - } - - .box > :last-child, - .box > :last-child > :last-child, - .box > :last-child > :last-child > :last-child { - margin-bottom: 0; - } - - .box.alt { - border: 0; - border-radius: 0; - padding: 0; + .row > .off-10 { + margin-left: 83.33333%; } -/* Icon */ - - .icon { - text-decoration: none; - border-bottom: none; - position: relative; - } - - .icon:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 400; + .row > .col-11 { + width: 91.66667%; } - .icon > .label { - display: none; + .row > .off-11 { + margin-left: 91.66667%; } - .icon:before { - line-height: inherit; + .row > .col-12 { + width: 100%; } - .icon.solid:before { - font-weight: 900; + .row > .off-12 { + margin-left: 100%; } - .icon.brands:before { - font-family: 'Font Awesome 5 Brands'; + .row.gtr-0 { + margin-top: 0; + margin-left: 0rem; } -/* Image */ + .row.gtr-0 > * { + padding: 0 0 0 0rem; + } - .image { - border-radius: 4px; - border: 0; - display: inline-block; - position: relative; - } + .row.gtr-0.gtr-uniform { + margin-top: 0rem; + } - .image:before { - pointer-events: none; - background-image: url("../../images/overlay.png"); - background-color: rgba(19, 21, 25, 0.5); - border-radius: 4px; - content: ''; - display: block; - height: 100%; - left: 0; - opacity: 0.5; - position: absolute; - top: 0; - width: 100%; - } + .row.gtr-0.gtr-uniform > * { + padding-top: 0rem; + } - .image img { - border-radius: 4px; - display: block; + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375rem; } - .image.left, .image.right { - max-width: 40%; - } + .row.gtr-25 > * { + padding: 0 0 0 0.375rem; + } - .image.left img, .image.right img { - width: 100%; + .row.gtr-25.gtr-uniform { + margin-top: -0.375rem; } - .image.left { - float: left; - padding: 0 1.5em 1em 0; - top: 0.25em; - } + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375rem; + } - .image.right { - float: right; - padding: 0 0 1em 1.5em; - top: 0.25em; + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75rem; } - .image.fit { - display: block; - margin: 0 0 2rem 0; - width: 100%; - } + .row.gtr-50 > * { + padding: 0 0 0 0.75rem; + } - .image.fit img { - width: 100%; + .row.gtr-50.gtr-uniform { + margin-top: -0.75rem; } - .image.main { - display: block; - margin: 2.5rem 0; - width: 100%; + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75rem; + } + + .row { + margin-top: 0; + margin-left: -1.5rem; } - .image.main img { - width: 100%; + .row > * { + padding: 0 0 0 1.5rem; } - @media screen and (max-width: 736px) { - - .image.main { - margin: 2rem 0; + .row.gtr-uniform { + margin-top: -1.5rem; } + .row.gtr-uniform > * { + padding-top: 1.5rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25rem; } - @media screen and (max-width: 480px) { + .row.gtr-150 > * { + padding: 0 0 0 2.25rem; + } - .image.main { - margin: 1.5rem 0; + .row.gtr-150.gtr-uniform { + margin-top: -2.25rem; } + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3rem; } -/* List */ + .row.gtr-200 > * { + padding: 0 0 0 3rem; + } - ol { - list-style: decimal; - margin: 0 0 2rem 0; - padding-left: 1.25em; - } + .row.gtr-200.gtr-uniform { + margin-top: -3rem; + } - ol li { - padding-left: 0.25em; - } + .row.gtr-200.gtr-uniform > * { + padding-top: 3rem; + } - ul { - list-style: disc; - margin: 0 0 2rem 0; - padding-left: 1em; - } + @media screen and (max-width: 1680px) { - ul li { - padding-left: 0.5em; - } + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } - ul.alt { - list-style: none; - padding-left: 0; - } + .row > * { + box-sizing: border-box; + } - ul.alt li { - border-top: solid 1px #ffffff; - padding: 0.5em 0; - } + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } - ul.alt li:first-child { - border-top: 0; - padding-top: 0; + .row.aln-left { + justify-content: flex-start; } - dl { - margin: 0 0 2rem 0; - } + .row.aln-center { + justify-content: center; + } - dl dt { - display: block; - font-weight: 600; - margin: 0 0 1rem 0; - } + .row.aln-right { + justify-content: flex-end; + } - dl dd { - margin-left: 2rem; - } + .row.aln-top { + align-items: flex-start; + } -/* Actions */ + .row.aln-middle { + align-items: center; + } - ul.actions { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - cursor: default; - list-style: none; - margin-left: -1rem; - padding-left: 0; - } + .row.aln-bottom { + align-items: flex-end; + } - ul.actions li { - padding: 0 0 0 1rem; - vertical-align: middle; - } + .row > .imp-xlarge { + order: -1; + } - ul.actions.special { - -moz-justify-content: center; - -webkit-justify-content: center; - -ms-justify-content: center; - justify-content: center; - width: 100%; - margin-left: 0; - } + .row > .col-1-xlarge { + width: 8.33333%; + } - ul.actions.special li:first-child { - padding-left: 0; - } + .row > .off-1-xlarge { + margin-left: 8.33333%; + } - ul.actions.stacked { - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - margin-left: 0; - } + .row > .col-2-xlarge { + width: 16.66667%; + } - ul.actions.stacked li { - padding: 1.3rem 0 0 0; - } + .row > .off-2-xlarge { + margin-left: 16.66667%; + } - ul.actions.stacked li:first-child { - padding-top: 0; + .row > .col-3-xlarge { + width: 25%; } - ul.actions.fit { - width: calc(100% + 1rem); - } + .row > .off-3-xlarge { + margin-left: 25%; + } - ul.actions.fit li { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - width: 100%; - } + .row > .col-4-xlarge { + width: 33.33333%; + } - ul.actions.fit li > * { - width: 100%; + .row > .off-4-xlarge { + margin-left: 33.33333%; } - ul.actions.fit.stacked { - width: 100%; - } + .row > .col-5-xlarge { + width: 41.66667%; + } - @media screen and (max-width: 480px) { + .row > .off-5-xlarge { + margin-left: 41.66667%; + } - ul.actions:not(.fixed) { - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - margin-left: 0; - width: 100% !important; - } + .row > .col-6-xlarge { + width: 50%; + } - ul.actions:not(.fixed) li { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - padding: 1rem 0 0 0; - text-align: center; - width: 100%; + .row > .off-6-xlarge { + margin-left: 50%; } - ul.actions:not(.fixed) li > * { - width: 100%; - } + .row > .col-7-xlarge { + width: 58.33333%; + } - ul.actions:not(.fixed) li:first-child { - padding-top: 0; - } + .row > .off-7-xlarge { + margin-left: 58.33333%; + } - ul.actions:not(.fixed) li input[type="submit"], - ul.actions:not(.fixed) li input[type="reset"], - ul.actions:not(.fixed) li input[type="button"], - ul.actions:not(.fixed) li button, - ul.actions:not(.fixed) li .button { - width: 100%; - } + .row > .col-8-xlarge { + width: 66.66667%; + } + + .row > .off-8-xlarge { + margin-left: 66.66667%; + } + + .row > .col-9-xlarge { + width: 75%; + } + + .row > .off-9-xlarge { + margin-left: 75%; + } + + .row > .col-10-xlarge { + width: 83.33333%; + } + + .row > .off-10-xlarge { + margin-left: 83.33333%; + } + + .row > .col-11-xlarge { + width: 91.66667%; + } + + .row > .off-11-xlarge { + margin-left: 91.66667%; + } + + .row > .col-12-xlarge { + width: 100%; + } + + .row > .off-12-xlarge { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0rem; + } + + .row.gtr-0 > * { + padding: 0 0 0 0rem; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0rem; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0rem; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75rem; + } + + .row { + margin-top: 0; + margin-left: -1.5rem; + } + + .row > * { + padding: 0 0 0 1.5rem; + } + + .row.gtr-uniform { + margin-top: -1.5rem; + } + + .row.gtr-uniform > * { + padding-top: 1.5rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3rem; + } + + } + + @media screen and (max-width: 1280px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-large { + order: -1; + } + + .row > .col-1-large { + width: 8.33333%; + } + + .row > .off-1-large { + margin-left: 8.33333%; + } + + .row > .col-2-large { + width: 16.66667%; + } + + .row > .off-2-large { + margin-left: 16.66667%; + } + + .row > .col-3-large { + width: 25%; + } + + .row > .off-3-large { + margin-left: 25%; + } + + .row > .col-4-large { + width: 33.33333%; + } + + .row > .off-4-large { + margin-left: 33.33333%; + } + + .row > .col-5-large { + width: 41.66667%; + } + + .row > .off-5-large { + margin-left: 41.66667%; + } + + .row > .col-6-large { + width: 50%; + } + + .row > .off-6-large { + margin-left: 50%; + } + + .row > .col-7-large { + width: 58.33333%; + } + + .row > .off-7-large { + margin-left: 58.33333%; + } + + .row > .col-8-large { + width: 66.66667%; + } + + .row > .off-8-large { + margin-left: 66.66667%; + } + + .row > .col-9-large { + width: 75%; + } + + .row > .off-9-large { + margin-left: 75%; + } + + .row > .col-10-large { + width: 83.33333%; + } + + .row > .off-10-large { + margin-left: 83.33333%; + } + + .row > .col-11-large { + width: 91.66667%; + } + + .row > .off-11-large { + margin-left: 91.66667%; + } + + .row > .col-12-large { + width: 100%; + } + + .row > .off-12-large { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0rem; + } + + .row.gtr-0 > * { + padding: 0 0 0 0rem; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0rem; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0rem; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75rem; + } + + .row { + margin-top: 0; + margin-left: -1.5rem; + } + + .row > * { + padding: 0 0 0 1.5rem; + } + + .row.gtr-uniform { + margin-top: -1.5rem; + } + + .row.gtr-uniform > * { + padding-top: 1.5rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3rem; + } + + } + + @media screen and (max-width: 980px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-medium { + order: -1; + } + + .row > .col-1-medium { + width: 8.33333%; + } + + .row > .off-1-medium { + margin-left: 8.33333%; + } + + .row > .col-2-medium { + width: 16.66667%; + } + + .row > .off-2-medium { + margin-left: 16.66667%; + } + + .row > .col-3-medium { + width: 25%; + } + + .row > .off-3-medium { + margin-left: 25%; + } + + .row > .col-4-medium { + width: 33.33333%; + } + + .row > .off-4-medium { + margin-left: 33.33333%; + } + + .row > .col-5-medium { + width: 41.66667%; + } + + .row > .off-5-medium { + margin-left: 41.66667%; + } + + .row > .col-6-medium { + width: 50%; + } + + .row > .off-6-medium { + margin-left: 50%; + } + + .row > .col-7-medium { + width: 58.33333%; + } + + .row > .off-7-medium { + margin-left: 58.33333%; + } + + .row > .col-8-medium { + width: 66.66667%; + } + + .row > .off-8-medium { + margin-left: 66.66667%; + } + + .row > .col-9-medium { + width: 75%; + } + + .row > .off-9-medium { + margin-left: 75%; + } + + .row > .col-10-medium { + width: 83.33333%; + } + + .row > .off-10-medium { + margin-left: 83.33333%; + } + + .row > .col-11-medium { + width: 91.66667%; + } + + .row > .off-11-medium { + margin-left: 91.66667%; + } + + .row > .col-12-medium { + width: 100%; + } + + .row > .off-12-medium { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0rem; + } + + .row.gtr-0 > * { + padding: 0 0 0 0rem; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0rem; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0rem; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75rem; + } + + .row { + margin-top: 0; + margin-left: -1.5rem; + } + + .row > * { + padding: 0 0 0 1.5rem; + } + + .row.gtr-uniform { + margin-top: -1.5rem; + } + + .row.gtr-uniform > * { + padding-top: 1.5rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3rem; + } + + } + + @media screen and (max-width: 736px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-small { + order: -1; + } + + .row > .col-1-small { + width: 8.33333%; + } + + .row > .off-1-small { + margin-left: 8.33333%; + } + + .row > .col-2-small { + width: 16.66667%; + } + + .row > .off-2-small { + margin-left: 16.66667%; + } + + .row > .col-3-small { + width: 25%; + } + + .row > .off-3-small { + margin-left: 25%; + } + + .row > .col-4-small { + width: 33.33333%; + } + + .row > .off-4-small { + margin-left: 33.33333%; + } + + .row > .col-5-small { + width: 41.66667%; + } + + .row > .off-5-small { + margin-left: 41.66667%; + } + + .row > .col-6-small { + width: 50%; + } + + .row > .off-6-small { + margin-left: 50%; + } + + .row > .col-7-small { + width: 58.33333%; + } + + .row > .off-7-small { + margin-left: 58.33333%; + } + + .row > .col-8-small { + width: 66.66667%; + } + + .row > .off-8-small { + margin-left: 66.66667%; + } + + .row > .col-9-small { + width: 75%; + } + + .row > .off-9-small { + margin-left: 75%; + } + + .row > .col-10-small { + width: 83.33333%; + } + + .row > .off-10-small { + margin-left: 83.33333%; + } + + .row > .col-11-small { + width: 91.66667%; + } + + .row > .off-11-small { + margin-left: 91.66667%; + } + + .row > .col-12-small { + width: 100%; + } + + .row > .off-12-small { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0rem; + } + + .row.gtr-0 > * { + padding: 0 0 0 0rem; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0rem; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0rem; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75rem; + } + + .row { + margin-top: 0; + margin-left: -1.5rem; + } + + .row > * { + padding: 0 0 0 1.5rem; + } + + .row.gtr-uniform { + margin-top: -1.5rem; + } + + .row.gtr-uniform > * { + padding-top: 1.5rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3rem; + } + + } + + @media screen and (max-width: 480px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-xsmall { + order: -1; + } + + .row > .col-1-xsmall { + width: 8.33333%; + } + + .row > .off-1-xsmall { + margin-left: 8.33333%; + } + + .row > .col-2-xsmall { + width: 16.66667%; + } + + .row > .off-2-xsmall { + margin-left: 16.66667%; + } + + .row > .col-3-xsmall { + width: 25%; + } + + .row > .off-3-xsmall { + margin-left: 25%; + } + + .row > .col-4-xsmall { + width: 33.33333%; + } + + .row > .off-4-xsmall { + margin-left: 33.33333%; + } + + .row > .col-5-xsmall { + width: 41.66667%; + } + + .row > .off-5-xsmall { + margin-left: 41.66667%; + } + + .row > .col-6-xsmall { + width: 50%; + } + + .row > .off-6-xsmall { + margin-left: 50%; + } + + .row > .col-7-xsmall { + width: 58.33333%; + } + + .row > .off-7-xsmall { + margin-left: 58.33333%; + } + + .row > .col-8-xsmall { + width: 66.66667%; + } + + .row > .off-8-xsmall { + margin-left: 66.66667%; + } + + .row > .col-9-xsmall { + width: 75%; + } + + .row > .off-9-xsmall { + margin-left: 75%; + } + + .row > .col-10-xsmall { + width: 83.33333%; + } + + .row > .off-10-xsmall { + margin-left: 83.33333%; + } + + .row > .col-11-xsmall { + width: 91.66667%; + } + + .row > .off-11-xsmall { + margin-left: 91.66667%; + } + + .row > .col-12-xsmall { + width: 100%; + } + + .row > .off-12-xsmall { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0rem; + } + + .row.gtr-0 > * { + padding: 0 0 0 0rem; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0rem; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0rem; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75rem; + } + + .row { + margin-top: 0; + margin-left: -1.5rem; + } + + .row > * { + padding: 0 0 0 1.5rem; + } + + .row.gtr-uniform { + margin-top: -1.5rem; + } + + .row.gtr-uniform > * { + padding-top: 1.5rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3rem; + } + + } + + @media screen and (max-width: 360px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-xxsmall { + order: -1; + } + + .row > .col-1-xxsmall { + width: 8.33333%; + } + + .row > .off-1-xxsmall { + margin-left: 8.33333%; + } + + .row > .col-2-xxsmall { + width: 16.66667%; + } + + .row > .off-2-xxsmall { + margin-left: 16.66667%; + } + + .row > .col-3-xxsmall { + width: 25%; + } + + .row > .off-3-xxsmall { + margin-left: 25%; + } + + .row > .col-4-xxsmall { + width: 33.33333%; + } + + .row > .off-4-xxsmall { + margin-left: 33.33333%; + } + + .row > .col-5-xxsmall { + width: 41.66667%; + } + + .row > .off-5-xxsmall { + margin-left: 41.66667%; + } + + .row > .col-6-xxsmall { + width: 50%; + } + + .row > .off-6-xxsmall { + margin-left: 50%; + } + + .row > .col-7-xxsmall { + width: 58.33333%; + } + + .row > .off-7-xxsmall { + margin-left: 58.33333%; + } + + .row > .col-8-xxsmall { + width: 66.66667%; + } + + .row > .off-8-xxsmall { + margin-left: 66.66667%; + } + + .row > .col-9-xxsmall { + width: 75%; + } + + .row > .off-9-xxsmall { + margin-left: 75%; + } + + .row > .col-10-xxsmall { + width: 83.33333%; + } + + .row > .off-10-xxsmall { + margin-left: 83.33333%; + } + + .row > .col-11-xxsmall { + width: 91.66667%; + } + + .row > .off-11-xxsmall { + margin-left: 91.66667%; + } + + .row > .col-12-xxsmall { + width: 100%; + } + + .row > .off-12-xxsmall { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0rem; + } + + .row.gtr-0 > * { + padding: 0 0 0 0rem; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0rem; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0rem; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75rem; + } + + .row { + margin-top: 0; + margin-left: -1.5rem; + } + + .row > * { + padding: 0 0 0 1.5rem; + } + + .row.gtr-uniform { + margin-top: -1.5rem; + } + + .row.gtr-uniform > * { + padding-top: 1.5rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3rem; + } + + } + +/* Box */ + + .box { + border: solid 2px; + margin-bottom: 2rem; + padding: 1.5rem; + } + + .box > :last-child, + .box > :last-child > :last-child, + .box > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + .box.alt { + border: 0; + border-radius: 0; + padding: 0; + } + + .box { + border-color: #eeeeee; + } + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + -moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + border: 0; + border-radius: 0; + cursor: pointer; + display: inline-block; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 0.8rem; + font-weight: 900; + letter-spacing: 0.075em; + height: 3rem; + line-height: 3rem; + padding: 0 2rem; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + } + + input[type="submit"].icon:before, + input[type="reset"].icon:before, + input[type="button"].icon:before, + button.icon:before, + .button.icon:before { + margin-right: 0.5rem; + } + + input[type="submit"].icon.solo, + input[type="reset"].icon.solo, + input[type="button"].icon.solo, + button.icon.solo, + .button.icon.solo { + position: relative; + width: 4rem; + height: 4rem; + line-height: 4rem; + border-radius: 4rem; + text-indent: 4rem; + overflow: hidden; + padding: 0; + white-space: nowrap; + } + + input[type="submit"].icon.solo:before, + input[type="reset"].icon.solo:before, + input[type="button"].icon.solo:before, + button.icon.solo:before, + .button.icon.solo:before { + position: absolute; + display: block; + top: 0; + left: 0; + width: inherit; + height: inherit; + line-height: inherit; + font-size: 1.25rem; + margin-right: 0; + text-align: center; + text-indent: 0; + } + + input[type="submit"].fit, + input[type="reset"].fit, + input[type="button"].fit, + button.fit, + .button.fit { + width: 100%; + } + + input[type="submit"].small, + input[type="reset"].small, + input[type="button"].small, + button.small, + .button.small { + font-size: 0.7rem; + height: 2.5rem; + line-height: 2.5rem; + padding: 0 1.5rem; + } + + input[type="submit"].large, + input[type="reset"].large, + input[type="button"].large, + button.large, + .button.large { + font-size: 0.9rem; + height: 3.5rem; + line-height: 3.5rem; + padding: 0 2.75rem; + } + + @media screen and (max-width: 980px) { + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + font-size: 0.9rem; + height: 3.25rem; + line-height: 3.25rem; + } + + input[type="submit"].large, + input[type="reset"].large, + input[type="button"].large, + button.large, + .button.large { + font-size: 1rem; + height: 3.75rem; + line-height: 3.75rem; + } + + } + + input[type="submit"].disabled, input[type="submit"]:disabled, + input[type="reset"].disabled, + input[type="reset"]:disabled, + input[type="button"].disabled, + input[type="button"]:disabled, + button.disabled, + button:disabled, + .button.disabled, + .button:disabled { + pointer-events: none; + opacity: 0.25; + } + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + background-color: transparent; + box-shadow: inset 0 0 0 2px #212931; + color: #212931 !important; + } + + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + button:hover, + .button:hover { + box-shadow: inset 0 0 0 2px #18bfef; + color: #18bfef !important; + } + + input[type="submit"].primary, + input[type="reset"].primary, + input[type="button"].primary, + button.primary, + .button.primary { + background-color: #212931; + box-shadow: none; + color: #ffffff !important; + } + + input[type="submit"].primary:hover, + input[type="reset"].primary:hover, + input[type="button"].primary:hover, + button.primary:hover, + .button.primary:hover { + background-color: #18bfef; + } + +/* Form */ + + form { + margin: 0 0 2rem 0; + } + + form > :last-child { + margin-bottom: 0; + } + + form > .fields { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: calc(100% + 3rem); + margin: -1.5rem 0 2rem -1.5rem; + } + + form > .fields > .field { + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + padding: 1.5rem 0 0 1.5rem; + width: calc(100% - 1.5rem); + } + + form > .fields > .field.half { + width: calc(50% - 0.75rem); + } + + form > .fields > .field.third { + width: calc(100%/3 - 0.5rem); + } + + form > .fields > .field.quarter { + width: calc(25% - 0.375rem); + } + + @media screen and (max-width: 480px) { + + form > .fields { + width: calc(100% + 3rem); + margin: -1.5rem 0 2rem -1.5rem; + } + + form > .fields > .field { + padding: 1.5rem 0 0 1.5rem; + width: calc(100% - 1.5rem); + } + + form > .fields > .field.half { + width: calc(100% - 1.5rem); + } + + form > .fields > .field.third { + width: calc(100% - 1.5rem); + } + + form > .fields > .field.quarter { + width: calc(100% - 1.5rem); + } + + } + + label { + display: block; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-weight: 900; + line-height: 1.5; + letter-spacing: 0.075em; + font-size: 0.8rem; + text-transform: uppercase; + margin: 0 0 0.75rem 0; + } + + @media screen and (max-width: 980px) { + + label { + font-size: 0.9rem; + } + + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + background: transparent; + border-radius: 0; + border: solid 2px; + color: inherit; + display: block; + outline: 0; + padding: 0 1rem; + text-decoration: none; + width: 100%; + } + + input[type="text"]:invalid, + input[type="password"]:invalid, + input[type="email"]:invalid, + select:invalid, + textarea:invalid { + box-shadow: none; + } + + select { + background-size: 1.25rem; + background-repeat: no-repeat; + background-position: calc(100% - 1rem) center; + height: 3rem; + padding-right: 3rem; + text-overflow: ellipsis; + } + + select:focus::-ms-value { + background-color: transparent; + } + + select::-ms-expand { + display: none; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: 3rem; + } + + textarea { + padding: 0.75rem 1rem; + } + + input[type="checkbox"], + input[type="radio"] { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + display: block; + float: left; + margin-right: -2rem; + opacity: 0; + width: 1rem; + z-index: -1; + } + + input[type="checkbox"] + label, + input[type="radio"] + label { + text-decoration: none; + cursor: pointer; + display: inline-block; + font-size: 1rem; + letter-spacing: 0; + font-family: "Merriweather", Georgia, serif; + text-transform: none; + font-weight: 300; + padding-left: 2.8rem; + padding-right: 1rem; + position: relative; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + border-radius: 0; + border: solid 2px; + content: ''; + display: inline-block; + font-size: 0.8rem; + height: 1.8rem; + left: 0; + line-height: 1.65rem; + position: absolute; + text-align: center; + top: -0.125rem; + width: 1.8rem; + } + + input[type="checkbox"]:checked + label:before, + input[type="radio"]:checked + label:before { + content: '\f00c'; + } + + input[type="checkbox"] + label:before { + border-radius: 0; + } + + input[type="radio"] + label:before { + border-radius: 100%; + } + + ::-webkit-input-placeholder { + opacity: 1.0; + } + + :-moz-placeholder { + opacity: 1.0; + } + + ::-moz-placeholder { + opacity: 1.0; + } + + :-ms-input-placeholder { + opacity: 1.0; + } + + label { + color: #212931; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + border-color: #eeeeee; + } + + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + select:focus, + textarea:focus { + border-color: #18bfef; + } + + select { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23eeeeee' /%3E%3C/svg%3E"); + } + + select option { + background-color: #ffffff; + color: #212931; + } + + .select-wrapper:before { + color: #eeeeee; + } + + input[type="checkbox"] + label, + input[type="radio"] + label { + color: #212931; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + border-color: #eeeeee; + } + + input[type="checkbox"]:checked + label:before, + input[type="radio"]:checked + label:before { + background-color: #212931; + border-color: #212931; + color: #ffffff; + } + + input[type="checkbox"]:focus + label:before, + input[type="radio"]:focus + label:before { + border-color: #18bfef; + } + + ::-webkit-input-placeholder { + color: #909498 !important; + } + + :-moz-placeholder { + color: #909498 !important; + } + + ::-moz-placeholder { + color: #909498 !important; + } + + :-ms-input-placeholder { + color: #909498 !important; + } + + .formerize-placeholder { + color: #909498 !important; + } + +/* Icon */ + + .icon { + text-decoration: none; + border-bottom: none; + position: relative; + } + + .icon:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 400; + } + + .icon > .label { + display: none; + } + + .icon:before { + line-height: inherit; + } + + .icon.solid:before { + font-weight: 900; + } + + .icon.brands:before { + font-family: 'Font Awesome 5 Brands'; + } + +/* Image */ + + .image { + border: 0; + display: inline-block; + position: relative; + } + + .image img { + display: block; + } + + .image.left, .image.right { + max-width: 40%; + } + + .image.left img, .image.right img { + width: 100%; + } + + .image.left { + float: left; + margin: 0 2rem 2rem 0; + top: 0.75rem; + } + + .image.right { + float: right; + margin: 0 0 2rem 2rem; + top: 0.75rem; + } + + .image.fit { + display: block; + margin: 2.5rem 0; + width: 100%; + } + + .image.fit:first-child { + margin-top: 0; + } + + .image.fit img { + width: 100%; + } + + .image.main { + display: block; + margin: 4rem 0; + width: 100%; + } + + .image.main:first-child { + margin-top: 0; + } + + .image.main img { + width: 100%; + } + + @media screen and (max-width: 736px) { + + .image.fit { + margin: 2rem 0; + } + + .image.main { + margin: 2rem 0; + } + + } + + a.image { + overflow: hidden; + } + + a.image img { + -moz-transition: -moz-transform 0.2s ease-out; + -webkit-transition: -webkit-transform 0.2s ease-out; + -ms-transition: -ms-transform 0.2s ease-out; + transition: transform 0.2s ease-out; + } + + a.image:hover img { + -moz-transform: scale(1.05); + -webkit-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); + } + +/* Actions */ + + ul.actions { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + cursor: default; + list-style: none; + margin-left: -1rem; + padding-left: 0; + } + + ul.actions li { + padding: 0 0 0 1rem; + vertical-align: middle; + } + + ul.actions.special { + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + width: 100%; + margin-left: 0; + } + + ul.actions.special li:first-child { + padding-left: 0; + } + + ul.actions.stacked { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-left: 0; + } + + ul.actions.stacked li { + padding: 1.3rem 0 0 0; + } + + ul.actions.stacked li:first-child { + padding-top: 0; + } + + ul.actions.fit { + width: calc(100% + 1rem); + } + + ul.actions.fit li { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + width: 100%; + } + + ul.actions.fit li > * { + width: 100%; + } + + ul.actions.fit.stacked { + width: 100%; + } + + @media screen and (max-width: 480px) { + + ul.actions:not(.fixed) { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-left: 0; + width: 100% !important; + } + + ul.actions:not(.fixed) li { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + padding: 1rem 0 0 0; + text-align: center; + width: 100%; + } + + ul.actions:not(.fixed) li > * { + width: 100%; + } + + ul.actions:not(.fixed) li:first-child { + padding-top: 0; + } + + ul.actions:not(.fixed) li input[type="submit"], + ul.actions:not(.fixed) li input[type="reset"], + ul.actions:not(.fixed) li input[type="button"], + ul.actions:not(.fixed) li button, + ul.actions:not(.fixed) li .button { + width: 100%; + } ul.actions:not(.fixed) li input[type="submit"].icon:before, ul.actions:not(.fixed) li input[type="reset"].icon:before, ul.actions:not(.fixed) li input[type="button"].icon:before, ul.actions:not(.fixed) li button.icon:before, ul.actions:not(.fixed) li .button.icon:before { - margin-left: -0.5em; + margin-left: -0.5rem; + } + + } + +/* Icons */ + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + } + + ul.icons li { + display: inline-block; + padding: 0 0.5rem 0 0; + vertical-align: middle; + } + + ul.icons li:last-child { + padding-right: 0; + } + + ul.icons li .icon:before { + width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + display: inline-block; + text-align: center; + border-radius: 100%; + font-size: 1.25rem; + } + + ul.icons.alt li .icon:before { + -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + font-size: 1rem; + } + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 2rem 0; + padding-left: 1.25rem; + } + + ol li { + padding-left: 0.25rem; + } + + ul { + list-style: disc; + margin: 0 0 2rem 0; + padding-left: 1rem; + } + + ul li { + padding-left: 0.5rem; + } + + ul.divided { + list-style: none; + padding-left: 0; + } + + ul.divided li { + border-top: solid 1px; + padding: 0.5rem 0; + } + + ul.divided li:first-child { + border-top: 0; + padding-top: 0; + } + + dl { + margin: 0 0 2rem 0; + } + + dl dt { + display: block; + font-weight: 600; + margin: 0 0 1rem 0; + } + + dl dd { + margin-left: 2rem; + } + + ul.divided li { + border-top-color: #eeeeee; + } + + ul.icons li a.icon:hover:before { + color: #18bfef; + } + + ul.icons.alt li .icon:before { + box-shadow: inset 0 0 0 2px #eeeeee; + } + + ul.icons.alt li a.icon:hover:before { + box-shadow: inset 0 0 0 2px #18bfef; + } + +/* Section/Article */ + + section.special, article.special { + text-align: center; + } + + header { + cursor: default; + } + + header > .date { + display: block; + font-size: 0.8rem; + height: 1; + margin: 0 0 1rem 0; + position: relative; + } + + header > p { + font-style: italic; + } + + header > h1 + p { + font-size: 1.1rem; + margin-top: -0.5rem; + line-height: 2; + } + + header > h2 + p { + font-size: 1rem; + margin-top: -0.75rem; + } + + header > h3 + p { + font-size: 0.9rem; + margin-top: -0.75rem; + } + + header > h4 + p { + font-size: 0.8rem; + margin-top: -0.75rem; + } + + header.major { + margin: 0 0 4rem 0; + text-align: center; + } + + header.major > :last-child { + margin-bottom: 0; + } + + header.major > p { + margin-top: 0; + text-align: center; + } + + header.major > .date { + font-size: 1rem; + margin: 0 0 4rem 0; + } + + header.major > .date:before, header.major > .date:after { + content: ''; + display: block; + position: absolute; + top: 50%; + width: calc(50% - 6rem); + border-top: solid 2px; + } + + header.major > .date:before { + left: 0; + } + + header.major > .date:after { + right: 0; + } + + @media screen and (max-width: 980px) { + + header br { + display: none; + } + + } + + @media screen and (max-width: 736px) { + + header.major { + margin: 0 0 2rem 0; + } + + } + + header.major .date:before, header.major .date:after { + border-top-color: #eeeeee; + } + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 2rem 0; + width: 100%; + } + + table tbody tr { + border: solid 1px; + border-left: 0; + border-right: 0; + } + + table td { + padding: 0.75rem 0.75rem; + } + + table th { + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 0.8rem; + font-weight: 900; + letter-spacing: 0.075em; + line-height: 1.5; + padding: 0 0.75rem 0.75rem 0.75rem; + text-align: left; + text-transform: uppercase; + } + + @media screen and (max-width: 980px) { + + table th { + font-size: 0.9rem; + } + + } + + table thead { + border-bottom: solid 2px; + } + + table tfoot { + border-top: solid 2px; + } + + table.alt { + border-collapse: separate; + } + + table.alt tbody tr td { + border: solid 1px; + border-left-width: 0; + border-top-width: 0; + } + + table.alt tbody tr td:first-child { + border-left-width: 1px; + } + + table.alt tbody tr:first-child td { + border-top-width: 1px; + } + + table.alt thead { + border-bottom: 0; + } + + table.alt tfoot { + border-top: 0; + } + + table tbody tr { + border-color: #eeeeee; + } + + table tbody tr:nth-child(2n + 1) { + background-color: rgba(220, 220, 220, 0.25); + } + + table th { + color: #212931; + } + + table thead { + border-bottom-color: #eeeeee; + } + + table tfoot { + border-top-color: #eeeeee; + } + + table.alt tbody tr td { + border-color: #eeeeee; + } + +/* Pagination */ + + .pagination { + display: -moz-inline-flex; + display: -webkit-inline-flex; + display: -ms-inline-flex; + display: inline-flex; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + list-style: none; + margin: 0 0 2rem 2px; + padding: 0; + } + + .pagination a, .pagination span { + -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + border: solid 2px; + display: inline-block; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 0.8rem; + font-weight: 900; + height: 3rem; + letter-spacing: 0.075em; + line-height: calc(3rem - 4px); + margin-left: -2px; + min-width: 3rem; + position: relative; + text-align: center; + text-decoration: none; + text-transform: uppercase; + } + + .pagination .next, .pagination .previous { + text-decoration: none; + padding: 0 1.75rem; + } + + .pagination .next:before, .pagination .previous:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + + .pagination .next:before, .pagination .previous:before { + display: inline-block; + color: inherit !important; + line-height: inherit; + } + + .pagination .previous:before { + content: '\f104'; + margin-right: 0.9375em; + } + + .pagination .next:before { + content: '\f105'; + float: right; + margin-left: 0.9375em; + } + + @media screen and (max-width: 980px) { + + .pagination a, .pagination span { + font-size: 0.9rem; + } + + } + + @media screen and (max-width: 480px) { + + .pagination .page, .pagination .extra { + display: none; + } + + } + + .pagination a, .pagination span { + border-color: #eeeeee; + } + + .pagination a { + color: #212931 !important; + } + + .pagination a:hover { + color: #18bfef !important; + border-color: #18bfef; + z-index: 1; + } + + .pagination a:hover + a, + .pagination a:hover + span { + border-left-color: #18bfef; + } + + .pagination a.active { + background-color: #eeeeee; + } + + .pagination span { + color: #eeeeee; + } + +/* Wrapper */ + + #wrapper { + -moz-transition: opacity 0.5s ease; + -webkit-transition: opacity 0.5s ease; + -ms-transition: opacity 0.5s ease; + transition: opacity 0.5s ease; + position: relative; + z-index: 1; + overflow: hidden; + } + + #wrapper > .bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #212931; + background-image: url("../../images/overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg"); + background-size: auto, auto, 100% auto; + background-position: center, center, top center; + background-repeat: repeat, no-repeat, no-repeat; + background-attachment: scroll, scroll, scroll; + z-index: -1; + } + + #wrapper > .bg.fixed { + position: fixed; + width: 100vw; + height: 100vh; + } + + #wrapper.fade-in:before { + pointer-events: none; + -moz-transition: opacity 1s ease-in-out; + -webkit-transition: opacity 1s ease-in-out; + -ms-transition: opacity 1s ease-in-out; + transition: opacity 1s ease-in-out; + -moz-transition-delay: 0.75s; + -webkit-transition-delay: 0.75s; + -ms-transition-delay: 0.75s; + transition-delay: 0.75s; + background: #1e252d; + content: ''; + display: block; + height: 100%; + left: 0; + opacity: 0; + position: fixed; + top: 0; + width: 100%; + } + + body.is-preload #wrapper.fade-in:before { + opacity: 1; + } + + @media screen and (orientation: portrait) { + + #wrapper > .bg { + background-size: auto, auto, auto 175%; + } + + } + +/* Intro */ + + #intro { + color: #ffffff; + padding: 8rem 4rem 6rem 4rem ; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -moz-justify-content: -moz-flex-end; + -webkit-justify-content: -webkit-flex-end; + -ms-justify-content: -ms-flex-end; + justify-content: flex-end; + -moz-transition: opacity 1s ease, -moz-transform 1s ease; + -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; + -ms-transition: opacity 1s ease, -ms-transform 1s ease; + transition: opacity 1s ease, transform 1s ease; + position: relative; + cursor: default; + text-align: center; + z-index: 1; + min-height: 100vh; + } + + #intro input, #intro select, #intro textarea { + color: #ffffff; + } + + #intro a { + color: #ffffff; + border-bottom-color: rgba(255, 255, 255, 0.5); + } + + #intro a:hover { + border-bottom-color: transparent; + color: #18bfef !important; + } + + #intro strong, #intro b { + color: #ffffff; + } + + #intro h1, #intro h2, #intro h3, #intro h4, #intro h5, #intro h6 { + color: #ffffff; + } + + #intro blockquote { + border-left-color: #ffffff; + } + + #intro code { + background: rgba(255, 255, 255, 0.075); + border-color: #ffffff; + } + + #intro hr { + border-bottom-color: #ffffff; + } + + #intro input[type="submit"], + #intro input[type="reset"], + #intro input[type="button"], + #intro button, + #intro .button { + background-color: transparent; + box-shadow: inset 0 0 0 2px #ffffff; + color: #ffffff !important; + } + + #intro input[type="submit"]:hover, + #intro input[type="reset"]:hover, + #intro input[type="button"]:hover, + #intro button:hover, + #intro .button:hover { + box-shadow: inset 0 0 0 2px #18bfef; + color: #18bfef !important; + } + + #intro input[type="submit"].primary, + #intro input[type="reset"].primary, + #intro input[type="button"].primary, + #intro button.primary, + #intro .button.primary { + background-color: #ffffff; + box-shadow: none; + color: #1e252d !important; + } + + #intro input[type="submit"].primary:hover, + #intro input[type="reset"].primary:hover, + #intro input[type="button"].primary:hover, + #intro button.primary:hover, + #intro .button.primary:hover { + background-color: #18bfef; + } + + #intro h1 { + font-size: 5rem; + line-height: 1; + } + + #intro p { + font-size: 1.25rem; + font-style: italic; + margin-top: -0.25rem; + text-align: center; + } + + #intro + #header { + margin-top: -20rem; + } + + #intro + #header .logo { + -moz-transform: translateY(2rem); + -webkit-transform: translateY(2rem); + -ms-transform: translateY(2rem); + transform: translateY(2rem); + opacity: 0; + visibility: hidden; + } + + #intro.hidden { + pointer-events: none; + -moz-transform: translateY(2rem); + -webkit-transform: translateY(2rem); + -ms-transform: translateY(2rem); + transform: translateY(2rem); + -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease, visibility 0.5s; + -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease, visibility 0.5s; + -ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease, visibility 0.5s; + transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; + opacity: 0; + visibility: hidden; + } + + #intro.hidden + #header .logo { + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + visibility: visible; + } + + body.is-preload #intro { + -moz-transform: translateY(2rem); + -webkit-transform: translateY(2rem); + -ms-transform: translateY(2rem); + transform: translateY(2rem); + opacity: 0; + } + + body.is-preload #intro:not(.hidden) + #header + #nav { + -moz-transform: translateY(4rem); + -webkit-transform: translateY(4rem); + -ms-transform: translateY(4rem); + transform: translateY(4rem); + opacity: 0; + } + + @media screen and (max-width: 980px) { + + #intro { + padding: 4rem 4rem 2rem 4rem ; + min-height: 90vh; + } + + #intro p br { + display: none; + } + + #intro + #header { + margin-top: -14rem; + } + + } + + @media screen and (max-width: 736px) { + + #intro { + padding: 3rem 2rem 1rem 2rem ; + min-height: 80vh; + } + + #intro h1 { + font-size: 3.25rem; + line-height: 1.1; + margin-bottom: 1rem; + } + + #intro p { + font-size: 1rem; + margin-top: 0rem; + } + + #intro .actions { + display: none; + } + + } + +/* Header */ + + #header { + color: #ffffff; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -moz-justify-content: -moz-flex-end; + -webkit-justify-content: -webkit-flex-end; + -ms-justify-content: -ms-flex-end; + justify-content: flex-end; + pointer-events: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + height: 20rem; + padding-bottom: 8rem; + position: relative; + text-align: center; + z-index: 2; + } + + #header input, #header select, #header textarea { + color: #ffffff; + } + + #header a { + color: #ffffff; + border-bottom-color: rgba(255, 255, 255, 0.5); + } + + #header a:hover { + border-bottom-color: transparent; + color: #18bfef !important; + } + + #header strong, #header b { + color: #ffffff; + } + + #header h1, #header h2, #header h3, #header h4, #header h5, #header h6 { + color: #ffffff; + } + + #header blockquote { + border-left-color: #ffffff; + } + + #header code { + background: rgba(255, 255, 255, 0.075); + border-color: #ffffff; + } + + #header hr { + border-bottom-color: #ffffff; + } + + #header .logo { + -moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -moz-transform 0.5s ease, visibility 0.5s; + -webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -webkit-transform 0.5s ease, visibility 0.5s; + -ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -ms-transform 0.5s ease, visibility 0.5s; + transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; + pointer-events: auto; + border-style: solid; + border-color: #ffffff; + border-width: 5px !important; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 2.25rem; + font-weight: 900; + letter-spacing: 0.075em; + line-height: 1; + padding: 1rem 1.75rem; + text-transform: uppercase; + visibility: visible; + } + + #header .logo:hover { + border-color: #18bfef !important; + color: #18bfef !important; + } + + @media screen and (max-width: 980px) { + + #header { + height: 14rem; + padding-bottom: 4rem; + } + + } + + @media screen and (max-width: 736px) { + + #header { + padding-bottom: 3rem; + } + + #header .logo { + font-size: 1.75rem; + border-width: 3px !important; + } + + } + +/* Nav */ + + #nav { + color: #ffffff; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-transition: -moz-transform 1s ease, opacity 1s ease; + -webkit-transition: -webkit-transform 1s ease, opacity 1s ease; + -ms-transition: -ms-transform 1s ease, opacity 1s ease; + transition: transform 1s ease, opacity 1s ease; + background: rgba(255, 255, 255, 0.175); + height: 4rem; + line-height: 4rem; + margin: -4rem auto 0 auto; + overflow: hidden; + padding: 0 2rem 0 0; + position: relative; + width: calc(100% - 4rem); + max-width: 72rem; + z-index: 2; + } + + #nav ul.divided li { + border-top-color: #ffffff; + } + + #nav ul.icons li a.icon:hover:before { + color: #18bfef; + } + + #nav ul.icons.alt li .icon:before { + box-shadow: inset 0 0 0 2px #ffffff; + } + + #nav ul.icons.alt li a.icon:hover:before { + box-shadow: inset 0 0 0 2px #18bfef; + } + + #nav input, #nav select, #nav textarea { + color: #ffffff; + } + + #nav a { + color: #ffffff; + border-bottom-color: rgba(255, 255, 255, 0.5); + } + + #nav a:hover { + border-bottom-color: transparent; + color: #18bfef !important; + } + + #nav strong, #nav b { + color: #ffffff; + } + + #nav h1, #nav h2, #nav h3, #nav h4, #nav h5, #nav h6 { + color: #ffffff; + } + + #nav blockquote { + border-left-color: #ffffff; + } + + #nav code { + background: rgba(255, 255, 255, 0.075); + border-color: #ffffff; + } + + #nav hr { + border-bottom-color: #ffffff; + } + + #nav ul.links { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-weight: 900; + letter-spacing: 0.075em; + list-style: none; + margin-bottom: 0; + padding-left: 0; + text-transform: uppercase; + } + + #nav ul.links li { + display: block; + padding-left: 0; + } + + #nav ul.links li a { + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + display: block; + font-size: 0.8rem; + outline: none; + padding: 0 2rem; + } + + #nav ul.links li a:hover { + color: inherit !important; + background-color: rgba(255, 255, 255, 0.1); + } + + #nav ul.links li.active { + background-color: #ffffff; + } + + #nav ul.links li.active a { + color: #1e252d; + } + + #nav ul.links li.active a:hover { + color: #18bfef !important; } - } + #nav ul.icons { + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + margin-bottom: 0; + } + + @media screen and (max-width: 980px) { + + #nav { + display: none; + } + + } + +/* Main */ + + #main { + background-color: #ffffff; + position: relative; + margin: 0 auto; + width: calc(100% - 4rem); + max-width: 72rem; + z-index: 2; + } + + #main > * { + padding: 4rem 4rem 2rem 4rem ; + border-top: solid 2px #eeeeee; + margin: 0; + } + + #main > *:first-child { + border-top: 0; + } + + #main > footer { + text-align: center; + } + + #main > .post { + padding: 8rem 8rem 6rem 8rem ; + } + + #main > .post header.major > .date { + margin-top: -2rem; + } + + #main > .post header.major > h1, #main > .post header.major h2 { + font-size: 4rem; + line-height: 1.1; + margin: 0 0 2rem 0; + } + + #main > .post.featured { + text-align: center; + } + + @media screen and (max-width: 1280px) { + + #main > .post { + padding: 6rem 4rem 4rem 4rem ; + } + + } + + @media screen and (max-width: 736px) { + + #main > .post { + padding: 4rem 2rem 2rem 2rem ; + } + + #main > .post header.major > .date { + margin-top: -1rem; + margin-bottom: 2rem; + } + + #main > .post header.major > h1, #main > .post header.major h2 { + font-size: 2.5rem; + line-height: 1.2; + margin: 0 0 1.5rem 0; + } + + } + + #main > .posts { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -moz-align-items: -moz-stretch; + -webkit-align-items: -webkit-stretch; + -ms-align-items: -ms-stretch; + align-items: stretch; + text-align: center; + width: 100%; + padding: 0; + } + + #main > .posts > * { + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + } + + #main > .posts > * { + width: 50%; + } + + #main > .posts > * { + padding: 4rem; + width: 50%; + } + + #main > .posts > article { + border-color: #eeeeee; + border-left-width: 2px; + border-style: solid; + border-top-width: 2px; + text-align: center; + } + + #main > .posts > article > :last-child { + margin-bottom: 0; + } + + #main > .posts > article:nth-child(2n - 1) { + border-left-width: 0; + } -/* Icons */ + #main > .posts > article:nth-child(-n + 2) { + border-top-width: 0; + } - ul.icons { - cursor: default; - list-style: none; - padding-left: 0; - } + @media screen and (max-width: 980px) { - ul.icons li { - display: inline-block; - padding: 0 0.75em 0 0; - } + #main > .posts > * { + width: 50%; + } - ul.icons li:last-child { - padding-right: 0; - } + #main > .posts > * { + padding: 2.5rem; + width: 50%; + } - ul.icons li a { - border-radius: 100%; - box-shadow: inset 0 0 0 1px #ffffff; - display: inline-block; - height: 2.25rem; - line-height: 2.25rem; - text-align: center; - width: 2.25rem; } - ul.icons li a:hover { - background-color: rgba(255, 255, 255, 0.075); + @media screen and (max-width: 736px) { + + #main > .posts > * { + width: 100%; } - ul.icons li a:active { - background-color: rgba(255, 255, 255, 0.175); + #main > .posts > * { + padding: 2rem; + width: 100%; } -/* Table */ + #main > .posts > article:nth-child(2n - 1) { + border-left-width: 2px; + } - .table-wrapper { - -webkit-overflow-scrolling: touch; - overflow-x: auto; - } + #main > .posts > article:nth-child(-n + 2) { + border-top-width: 2px; + } - table { - margin: 0 0 2rem 0; - width: 100%; + #main > .posts > article:nth-child(n) { + border-left-width: 0; + } + + #main > .posts > article:nth-child(-n + 1) { + border-top-width: 0; + } + + #main > .posts > article .image { + max-width: 25rem; + margin-left: auto; + margin-right: auto; + } + + } + + @media screen and (max-width: 736px) { + + #main > * { + padding: 2rem 2rem 0.1rem 2rem ; + } + + } + + @media screen and (max-width: 480px) { + + #main { + width: 100%; + } + + } + +/* Footer */ + + #footer { + color: #717981; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + background-color: #f5f5f5; + color: #909498; + cursor: default; + position: relative; + margin: 0 auto; + width: calc(100% - 4rem); + max-width: 72rem; + z-index: 2; } - table tbody tr { - border: solid 1px #ffffff; - border-left: 0; - border-right: 0; + #footer input, #footer select, #footer textarea { + color: #717981; + } + + #footer a { + color: #717981; + border-bottom-color: rgba(113, 121, 129, 0.5); } - table tbody tr:nth-child(2n + 1) { - background-color: rgba(255, 255, 255, 0.075); + #footer a:hover { + border-bottom-color: transparent; + color: #18bfef !important; } - table td { - padding: 0.75em 0.75em; + #footer strong, #footer b { + color: #717981; } - table th { - color: #ffffff; - font-size: 0.9em; - font-weight: 600; - padding: 0 0.75em 0.75em 0.75em; - text-align: left; + #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 { + color: #717981; } - table thead { - border-bottom: solid 2px #ffffff; + #footer blockquote { + border-left-color: #e2e2e2; } - table tfoot { - border-top: solid 2px #ffffff; + #footer code { + background: rgba(220, 220, 220, 0.5); + border-color: #e2e2e2; } - table.alt { - border-collapse: separate; + #footer hr { + border-bottom-color: #e2e2e2; } - table.alt tbody tr td { - border: solid 1px #ffffff; - border-left-width: 0; - border-top-width: 0; + #footer .box { + border-color: #e2e2e2; + } + + #footer input[type="submit"], + #footer input[type="reset"], + #footer input[type="button"], + #footer button, + #footer .button { + background-color: transparent; + box-shadow: inset 0 0 0 2px #717981; + color: #717981 !important; + } + + #footer input[type="submit"]:hover, + #footer input[type="reset"]:hover, + #footer input[type="button"]:hover, + #footer button:hover, + #footer .button:hover { + box-shadow: inset 0 0 0 2px #18bfef; + color: #18bfef !important; } - table.alt tbody tr td:first-child { - border-left-width: 1px; + #footer input[type="submit"].primary, + #footer input[type="reset"].primary, + #footer input[type="button"].primary, + #footer button.primary, + #footer .button.primary { + background-color: #717981; + box-shadow: none; + color: #f5f5f5 !important; + } + + #footer input[type="submit"].primary:hover, + #footer input[type="reset"].primary:hover, + #footer input[type="button"].primary:hover, + #footer button.primary:hover, + #footer .button.primary:hover { + background-color: #18bfef; } - table.alt tbody tr:first-child td { - border-top-width: 1px; + #footer label { + color: #717981; + } + + #footer input[type="text"], + #footer input[type="password"], + #footer input[type="email"], + #footer select, + #footer textarea { + border-color: #e2e2e2; + } + + #footer input[type="text"]:focus, + #footer input[type="password"]:focus, + #footer input[type="email"]:focus, + #footer select:focus, + #footer textarea:focus { + border-color: #18bfef; } - table.alt thead { - border-bottom: 0; + #footer select { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23e2e2e2' /%3E%3C/svg%3E"); + } + + #footer select option { + background-color: #f5f5f5; + color: #717981; } - table.alt tfoot { - border-top: 0; + #footer .select-wrapper:before { + color: #e2e2e2; + } + + #footer input[type="checkbox"] + label, + #footer input[type="radio"] + label { + color: #717981; + } + + #footer input[type="checkbox"] + label:before, + #footer input[type="radio"] + label:before { + border-color: #e2e2e2; } -/* Button */ + #footer input[type="checkbox"]:checked + label:before, + #footer input[type="radio"]:checked + label:before { + background-color: #717981; + border-color: #717981; + color: #f5f5f5; + } - input[type="submit"], - input[type="reset"], - input[type="button"], - button, - .button { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - background-color: transparent; - border-radius: 4px; - border: 0; - box-shadow: inset 0 0 0 1px #ffffff; - color: #ffffff !important; - cursor: pointer; - display: inline-block; - font-size: 0.8rem; - font-weight: 300; - height: 2.75rem; - letter-spacing: 0.2rem; - line-height: 2.75rem; - outline: 0; - padding: 0 1.25rem 0 1.35rem; - text-align: center; - text-decoration: none; - text-transform: uppercase; - white-space: nowrap; - } + #footer input[type="checkbox"]:focus + label:before, + #footer input[type="radio"]:focus + label:before { + border-color: #18bfef; + } - input[type="submit"]:hover, - input[type="reset"]:hover, - input[type="button"]:hover, - button:hover, - .button:hover { - background-color: rgba(255, 255, 255, 0.075); + #footer ::-webkit-input-placeholder { + color: #b3b7bb !important; } - input[type="submit"]:active, - input[type="reset"]:active, - input[type="button"]:active, - button:active, - .button:active { - background-color: rgba(255, 255, 255, 0.175); + #footer :-moz-placeholder { + color: #b3b7bb !important; } - input[type="submit"].icon:before, - input[type="reset"].icon:before, - input[type="button"].icon:before, - button.icon:before, - .button.icon:before { - margin-right: 0.5em; + #footer ::-moz-placeholder { + color: #b3b7bb !important; } - input[type="submit"].fit, - input[type="reset"].fit, - input[type="button"].fit, - button.fit, - .button.fit { - width: 100%; + #footer :-ms-input-placeholder { + color: #b3b7bb !important; } - input[type="submit"].small, - input[type="reset"].small, - input[type="button"].small, - button.small, - .button.small { - font-size: 0.6rem; - height: 2.0625rem; - line-height: 2.0625rem; + #footer .formerize-placeholder { + color: #b3b7bb !important; } - input[type="submit"].primary, - input[type="reset"].primary, - input[type="button"].primary, - button.primary, - .button.primary { - background-color: #ffffff; - color: #1b1f22 !important; - font-weight: 600; + #footer ul.divided li { + border-top-color: #e2e2e2; } - input[type="submit"].disabled, input[type="submit"]:disabled, - input[type="reset"].disabled, - input[type="reset"]:disabled, - input[type="button"].disabled, - input[type="button"]:disabled, - button.disabled, - button:disabled, - .button.disabled, - .button:disabled { - pointer-events: none; - cursor: default; - opacity: 0.25; + #footer ul.icons li a.icon:hover:before { + color: #18bfef; } - input[type="submit"], - input[type="reset"], - input[type="button"], - button { - line-height: calc(2.75rem - 2px); - } + #footer ul.icons.alt li .icon:before { + box-shadow: inset 0 0 0 2px #e2e2e2; + } -/* BG */ + #footer ul.icons.alt li a.icon:hover:before { + box-shadow: inset 0 0 0 2px #18bfef; + } - #bg { - -moz-transform: scale(1.0); - -webkit-transform: scale(1.0); - -ms-transform: scale(1.0); - transform: scale(1.0); - -webkit-backface-visibility: hidden; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - z-index: 1; - } + #footer header.major .date:before, #footer header.major .date:after { + border-top-color: #e2e2e2; + } - #bg:before, #bg:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + #footer table tbody tr { + border-color: #e2e2e2; } - #bg:before { - -moz-transition: background-color 2.5s ease-in-out; - -webkit-transition: background-color 2.5s ease-in-out; - -ms-transition: background-color 2.5s ease-in-out; - transition: background-color 2.5s ease-in-out; - -moz-transition-delay: 0.75s; - -webkit-transition-delay: 0.75s; - -ms-transition-delay: 0.75s; - transition-delay: 0.75s; - background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../../images/overlay.png"); - background-size: auto, 256px 256px; - background-position: center, center; - background-repeat: no-repeat, repeat; - z-index: 2; - } - - #bg:after { - -moz-transform: scale(1.125); - -webkit-transform: scale(1.125); - -ms-transform: scale(1.125); - transform: scale(1.125); - -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out; - -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out; - -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out; - transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out; - background-image: url("../../images/bg.jpg"); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - z-index: 1; + #footer table tbody tr:nth-child(2n + 1) { + background-color: rgba(220, 220, 220, 0.5); + } + + #footer table th { + color: #717981; + } + + #footer table thead { + border-bottom-color: #e2e2e2; + } + + #footer table tfoot { + border-top-color: #e2e2e2; + } + + #footer table.alt tbody tr td { + border-color: #e2e2e2; + } + + #footer .pagination a, #footer .pagination span { + border-color: #e2e2e2; + } + + #footer .pagination a { + color: #717981 !important; + } + + #footer .pagination a:hover { + color: #18bfef !important; + border-color: #18bfef; + z-index: 1; + } + + #footer .pagination a:hover + a, + #footer .pagination a:hover + span { + border-left-color: #18bfef; + } + + #footer .pagination a.active { + background-color: #e2e2e2; + } + + #footer .pagination span { + color: #e2e2e2; + } + + #footer > section { + -moz-flex-basis: 50%; + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + padding: 4rem 4rem 2rem 4rem ; + border-left: solid 2px #e2e2e2; + } + + #footer > section:first-child { + border-left: 0; + } + + #footer > section.split { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 0; + } + + #footer > section.split > section { + padding: 3rem 4rem 1rem 4rem ; + border-top: solid 2px #e2e2e2; + } + + #footer > section.split > section:first-child { + padding: 5rem 4rem 1rem 4rem ; + border-top: 0; + } + + #footer > section.split > section:last-child { + padding: 3rem 4rem 3rem 4rem ; + } + + #footer > section.split.contact > section { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + padding: 3.15rem 4rem; + } + + #footer > section.split.contact > section > * { + margin-bottom: 0; + } + + #footer > section.split.contact > section > :first-child { + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + width: 6rem; + } + + #footer > section.split.contact > section > :last-child { + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + } + + #footer > section.split.contact > section:first-child { + padding: 4rem 4rem 3rem 4rem; + } + + #footer > section.split.contact > section:last-child { + padding: 3rem 4rem 4rem 4rem; + } + + #footer > section.split.contact > section.alt { + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + } + + #footer > section.split.contact > section.alt > :last-child { + margin-top: -0.325rem; + } + + #footer form label, + #footer h3, + #footer p { + font-size: 0.8rem; } - body.is-article-visible #bg:after { - -moz-transform: scale(1.0825); - -webkit-transform: scale(1.0825); - -ms-transform: scale(1.0825); - transform: scale(1.0825); - -moz-filter: blur(0.2rem); - -webkit-filter: blur(0.2rem); - -ms-filter: blur(0.2rem); - filter: blur(0.2rem); - } + @media screen and (max-width: 980px) { + + #footer { + display: block; + } + + #footer > section { + border-top: solid 2px #e2e2e2; + } + + #footer > section:first-child { + border-top: 0; + } - body.is-preload #bg:before { - background-color: #000000; - } + #footer > section.split > section { + padding: 4rem 4rem 2rem 4rem ; + } -/* Wrapper */ + #footer > section.split > section:first-child { + padding: 4rem 4rem 2rem 4rem ; + } - #wrapper { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - -moz-justify-content: space-between; - -webkit-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - position: relative; - min-height: 100vh; - width: 100%; - padding: 4rem 2rem; - z-index: 3; - } + #footer > section.split > section:last-child { + padding: 4rem 4rem 2rem 4rem ; + } - #wrapper:before { - content: ''; - display: block; - } + #footer > section.split.contact > section { + padding: 4rem; + } - @media screen and (max-width: 1680px) { + #footer > section.split.contact > section:first-child { + padding: 4rem; + } - #wrapper { - padding: 3rem 2rem; - } + #footer > section.split.contact > section:last-child { + padding: 4rem; + } + + #footer form label, + #footer h3, + #footer p { + font-size: 0.9rem; + } } @media screen and (max-width: 736px) { - #wrapper { - padding: 2rem 1rem; + #footer > section { + padding: 2rem 2rem 0.1rem 2rem ; } + #footer > section.split > section { + padding: 2rem 2rem 0.1rem 2rem ; + } + + #footer > section.split > section:first-child { + padding: 2rem 2rem 0.1rem 2rem ; + } + + #footer > section.split > section:last-child { + padding: 2rem 2rem 0.1rem 2rem ; + } + + #footer > section.split.contact > section { + padding: 2rem; + } + + #footer > section.split.contact > section:first-child { + padding: 2rem; + } + + #footer > section.split.contact > section:last-child { + padding: 2rem; + } + } @media screen and (max-width: 480px) { - #wrapper { - padding: 1rem; + #footer { + width: 100%; } } -/* Header */ - - #header { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); - background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); - background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); - background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); - max-width: 100%; + #copyright { + color: #ffffff; + position: relative; + color: rgba(255, 255, 255, 0.25); + cursor: default; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 0.8rem; + font-weight: 900; + letter-spacing: 0.075em; + line-height: 1.5; text-align: center; + text-transform: uppercase; + margin: 4rem auto 8rem auto; + width: calc(100% - 4rem); + max-width: 72rem; + z-index: 2; } - #header > * { - -moz-transition: opacity 0.325s ease-in-out; - -webkit-transition: opacity 0.325s ease-in-out; - -ms-transition: opacity 0.325s ease-in-out; - transition: opacity 0.325s ease-in-out; - position: relative; - margin-top: 3.5rem; + #copyright input, #copyright select, #copyright textarea { + color: #ffffff; } - #header > *:before { - content: ''; - display: block; - position: absolute; - top: calc(-3.5rem - 1px); - left: calc(50% - 1px); - width: 1px; - height: calc(3.5rem + 1px); - background: #ffffff; - } - - #header > :first-child { - margin-top: 0; + #copyright a { + color: #ffffff; + border-bottom-color: rgba(255, 255, 255, 0.5); } - #header > :first-child:before { - display: none; + #copyright a:hover { + border-bottom-color: transparent; + color: #18bfef !important; } - #header .logo { - width: 5.5rem; - height: 5.5rem; - line-height: 5.5rem; - border: solid 1px #ffffff; - border-radius: 100%; + #copyright strong, #copyright b { + color: #ffffff; } - #header .logo .icon:before { - font-size: 2rem; - } + #copyright h1, #copyright h2, #copyright h3, #copyright h4, #copyright h5, #copyright h6 { + color: #ffffff; + } - #header .content { - border-style: solid; + #copyright blockquote { + border-left-color: #ffffff; + } + + #copyright code { + background: rgba(255, 255, 255, 0.075); border-color: #ffffff; - border-top-width: 1px; - border-bottom-width: 1px; - max-width: 100%; - } - - #header .content .inner { - -moz-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; - -webkit-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; - -ms-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; - transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; - -moz-transition-delay: 0.25s; - -webkit-transition-delay: 0.25s; - -ms-transition-delay: 0.25s; - transition-delay: 0.25s; - padding: 3rem 2rem; - max-height: 40rem; - overflow: hidden; - } - - #header .content .inner > :last-child { - margin-bottom: 0; - } + } - #header .content p { - text-transform: uppercase; - letter-spacing: 0.2rem; - font-size: 0.8rem; - line-height: 2; - } + #copyright hr { + border-bottom-color: #ffffff; + } - #header nav ul { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - margin-bottom: 0; + #copyright a { + color: inherit; + border-bottom-color: inherit; + } + + #copyright ul { list-style: none; + margin: 0; padding-left: 0; - border: solid 1px #ffffff; - border-radius: 4px; } - #header nav ul li { - padding-left: 0; - border-left: solid 1px #ffffff; + #copyright ul li { + border-left: solid 2px; + display: inline-block; + line-height: 1; + margin-left: 1rem; + padding-left: 1rem; } - #header nav ul li:first-child { + #copyright ul li:first-child { border-left: 0; + margin-left: 0; + padding-left: 0; } - #header nav ul li a { - display: block; - min-width: 7.5rem; - height: 2.75rem; - line-height: 2.75rem; - padding: 0 1.25rem 0 1.45rem; - text-transform: uppercase; - letter-spacing: 0.2rem; - font-size: 0.8rem; - border-bottom: 0; - } - - #header nav ul li a:hover { - background-color: rgba(255, 255, 255, 0.075); - } + @media screen and (max-width: 1280px) { - #header nav ul li a:active { - background-color: rgba(255, 255, 255, 0.175); - } + #copyright { + margin: 4rem auto; + } - #header nav.use-middle:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: calc(50% - 1px); - width: 1px; - height: 100%; - background: #ffffff; } - #header nav.use-middle ul li.is-middle { - border-left: 0; + @media screen and (max-width: 480px) { + + #copyright ul li { + border-left: 0; + margin: 1rem 0 0 0; + padding-left: 0; + display: block; + } + + #copyright ul li:first-child { + margin-top: 0; + } + } - body.is-article-visible #header { - -moz-transform: scale(0.95); - -webkit-transform: scale(0.95); - -ms-transform: scale(0.95); - transform: scale(0.95); - -moz-filter: blur(0.1rem); - -webkit-filter: blur(0.1rem); - -ms-filter: blur(0.1rem); - filter: blur(0.1rem); - opacity: 0; +/* Nav Panel */ + + #navPanelToggle { + text-decoration: none; + -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + display: none; + position: fixed; + top: 0.75rem; + right: 0.75rem; + border: 0; + color: #ffffff; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 0.9rem; + font-weight: 900; + letter-spacing: 0.075em; + padding: 0.375rem 1.25rem; + text-transform: uppercase; + z-index: 10001; + } + + #navPanelToggle:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; } - body.is-preload #header { - -moz-filter: blur(0.125rem); - -webkit-filter: blur(0.125rem); - -ms-filter: blur(0.125rem); - filter: blur(0.125rem); + #navPanelToggle:before { + content: '\f0c9'; + margin-right: 0.5rem; } - body.is-preload #header > * { - opacity: 0; - } + #navPanelToggle.alt { + background-color: rgba(255, 255, 255, 0.875); + box-shadow: 0 0.125rem 0.75rem 0 rgba(30, 37, 45, 0.25); + color: #212931; + } - body.is-preload #header .content .inner { - max-height: 0; - padding-top: 0; - padding-bottom: 0; - opacity: 0; + #navPanelToggle.alt:hover { + background-color: #ffffff; } @media screen and (max-width: 980px) { - #header .content p br { - display: none; + #navPanelToggle { + display: block; } } @media screen and (max-width: 736px) { - #header > * { - margin-top: 2rem; - } - - #header > *:before { - top: calc(-2rem - 1px); - height: calc(2rem + 1px); - } - - #header .logo { - width: 4.75rem; - height: 4.75rem; - line-height: 4.75rem; + #navPanelToggle { + font-size: 0.8rem; + padding: 0.25rem 1rem; } - #header .logo .icon:before { - font-size: 1.75rem; - } - - #header .content .inner { - padding: 2.5rem 1rem; - } + } - #header .content p { - line-height: 1.875; - } + #navPanel { + -moz-transform: translateX(20rem); + -webkit-transform: translateX(20rem); + -ms-transform: translateX(20rem); + transform: translateX(20rem); + -moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; + -webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; + -ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; + transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; + display: none; + -webkit-overflow-scrolling: touch; + background: #ffffff; + box-shadow: none; + color: #212931; + height: 100%; + max-width: 80%; + overflow-y: auto; + padding: 3rem 2rem; + position: fixed; + right: 0; + top: 0; + visibility: hidden; + width: 20rem; + z-index: 10002; + } + #navPanel .links { + list-style: none; + padding-left: 0; } - @media screen and (max-width: 480px) { - - #header { - padding: 1.5rem 0; + #navPanel .links li { + border-top: solid 2px #eeeeee; } - #header .content .inner { - padding: 2.5rem 0; - } - - #header nav ul { - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - min-width: 10rem; - max-width: 100%; + #navPanel .links li a { + border-bottom: 0; + display: block; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 0.9rem; + font-size: 0.9rem; + font-weight: 900; + letter-spacing: 0.075em; + padding: 0.75rem 0; + text-transform: uppercase; } - #header nav ul li { - border-left: 0; - border-top: solid 1px #ffffff; - } - - #header nav ul li:first-child { - border-top: 0; - } - - #header nav ul li a { - height: 3rem; - line-height: 3rem; - min-width: 0; - width: 100%; - } - - #header nav.use-middle:after { - display: none; + #navPanel .links li:first-child { + border-top: 0; } + #navPanel .close { + text-decoration: none; + -moz-transition: color 0.2s ease-in-out; + -webkit-transition: color 0.2s ease-in-out; + -ms-transition: color 0.2s ease-in-out; + transition: color 0.2s ease-in-out; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + border: 0; + color: #909498; + cursor: pointer; + display: block; + height: 3.25rem; + line-height: 3.25rem; + padding-right: 1.25rem; + position: absolute; + right: 0; + text-align: right; + top: 0; + vertical-align: middle; + width: 7rem; } -/* Main */ + #navPanel .close:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } - #main { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - -moz-justify-content: center; - -webkit-justify-content: center; - -ms-justify-content: center; - justify-content: center; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; - max-width: 100%; - z-index: 3; - } - - #main article { - -moz-transform: translateY(0.25rem); - -webkit-transform: translateY(0.25rem); - -ms-transform: translateY(0.25rem); - transform: translateY(0.25rem); - -moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out; - -webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out; - -ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out; - transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out; - padding: 4.5rem 2.5rem 1.5rem 2.5rem ; - position: relative; - width: 40rem; - max-width: 100%; - background-color: rgba(27, 31, 34, 0.85); - border-radius: 4px; - opacity: 0; - } + #navPanel .close:before { + content: '\f00d'; + font-size: 1.25rem; + } - #main article.active { - -moz-transform: translateY(0); - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - opacity: 1; + #navPanel .close:hover { + color: #212931; } - #main article .close { - display: block; - position: absolute; - top: 0; - right: 0; - width: 4rem; - height: 4rem; - cursor: pointer; - text-indent: 4rem; - overflow: hidden; - white-space: nowrap; - } - - #main article .close:before { - -moz-transition: background-color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out; - content: ''; - display: block; - position: absolute; - top: 0.75rem; - left: 0.75rem; - width: 2.5rem; - height: 2.5rem; - border-radius: 100%; - background-position: center; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E"); - background-size: 20px 20px; - background-repeat: no-repeat; - } + @media screen and (max-width: 736px) { - #main article .close:hover:before { - background-color: rgba(255, 255, 255, 0.075); + #navPanel .close { + height: 4rem; + line-height: 4rem; } - #main article .close:active:before { - background-color: rgba(255, 255, 255, 0.175); - } + } - @media screen and (max-width: 736px) { + @media screen and (max-width: 980px) { - #main article { - padding: 3.5rem 2rem 0.5rem 2rem ; + #navPanel { + display: block; } - #main article .close:before { - top: 0.875rem; - left: 0.875rem; - width: 2.25rem; - height: 2.25rem; - background-size: 14px 14px; - } - } - @media screen and (max-width: 480px) { + @media screen and (max-width: 736px) { - #main article { - padding: 3rem 1.5rem 0.5rem 1.5rem ; + #navPanel { + padding: 2.5rem 1.75rem; } } -/* Footer */ - - #footer { - -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - width: 100%; - max-width: 100%; - margin-top: 2rem; - text-align: center; - } + @media screen and (max-width: 980px) { - #footer .copyright { - letter-spacing: 0.2rem; - font-size: 0.6rem; - opacity: 0.75; - margin-bottom: 0; - text-transform: uppercase; + body.is-navPanel-visible #wrapper { + opacity: 0.5; } - body.is-article-visible #footer { - -moz-transform: scale(0.95); - -webkit-transform: scale(0.95); - -ms-transform: scale(0.95); - transform: scale(0.95); - -moz-filter: blur(0.1rem); - -webkit-filter: blur(0.1rem); - -ms-filter: blur(0.1rem); - filter: blur(0.1rem); - opacity: 0; + body.is-navPanel-visible #navPanel { + -moz-transform: translateX(0); + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2); + visibility: visible; } - body.is-preload #footer { - opacity: 0; - } \ No newline at end of file + } \ No newline at end of file diff --git a/assets/css/noscript.css b/assets/css/noscript.css index a27f428..31b9e4b 100644 --- a/assets/css/noscript.css +++ b/assets/css/noscript.css @@ -1,37 +1,36 @@ +@import url(font-awesome.min.css); + /* - Dimension by HTML5 UP + Massively by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -/* BG */ - - body.is-preload #bg:before { - background-color: transparent; - } - -/* Header */ +/* Wrapper */ - body.is-preload #header { - -moz-filter: none; - -webkit-filter: none; - -ms-filter: none; - filter: none; + #wrapper { + background-color: #212931; + background-image: url("../../images/overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg"); + background-size: auto, auto, 100% auto; + background-position: center, center, top center; + background-repeat: repeat, no-repeat, no-repeat; + background-attachment: fixed, fixed, fixed; } - body.is-preload #header > * { - opacity: 1; + #wrapper.fade-in:before { + display: none; } - body.is-preload #header .content .inner { - max-height: none; - padding: 3rem 2rem; - opacity: 1; - } - -/* Main */ +/* Intro */ - #main article { + body.is-preload #intro { opacity: 1; - margin: 4rem 0 0 0; - } \ No newline at end of file + } + + body.is-preload #intro:not(.hidden) + #header + #nav { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } \ No newline at end of file diff --git a/assets/js/jquery.scrollex.min.js b/assets/js/jquery.scrollex.min.js new file mode 100644 index 0000000..c511a5c --- /dev/null +++ b/assets/js/jquery.scrollex.min.js @@ -0,0 +1,2 @@ +/* jquery.scrollex v0.2.1 | (c) @ajlkn | github.com/ajlkn/jquery.scrollex | MIT licensed */ +!function(t){function e(t,e,n){return"string"==typeof t&&("%"==t.slice(-1)?t=parseInt(t.substring(0,t.length-1))/100*e:"vh"==t.slice(-2)?t=parseInt(t.substring(0,t.length-2))/100*n:"px"==t.slice(-2)&&(t=parseInt(t.substring(0,t.length-2)))),t}var n=t(window),i=1,o={};n.on("scroll",function(){var e=n.scrollTop();t.map(o,function(t){window.clearTimeout(t.timeoutId),t.timeoutId=window.setTimeout(function(){t.handler(e)},t.options.delay)})}).on("load",function(){n.trigger("scroll")}),jQuery.fn.scrollex=function(l){var s=t(this);if(0==this.length)return s;if(this.length>1){for(var r=0;r=i&&o>=t};break;case"bottom":h=function(t,e,n,i,o){return n>=i&&o>=n};break;case"middle":h=function(t,e,n,i,o){return e>=i&&o>=e};break;case"top-only":h=function(t,e,n,i,o){return i>=t&&n>=i};break;case"bottom-only":h=function(t,e,n,i,o){return n>=o&&o>=t};break;default:case"default":h=function(t,e,n,i,o){return n>=i&&o>=t}}return c=function(t){var i,o,l,s,r,a,u=this.state,h=!1,c=this.$element.offset();i=n.height(),o=t+i/2,l=t+i,s=this.$element.outerHeight(),r=c.top+e(this.options.top,s,i),a=c.top+s-e(this.options.bottom,s,i),h=this.test(t,o,l,r,a),h!=u&&(this.state=h,h?this.options.enter&&this.options.enter.apply(this.element):this.options.leave&&this.options.leave.apply(this.element)),this.options.scroll&&this.options.scroll.apply(this.element,[(o-r)/(a-r)])},p={id:a,options:u,test:h,handler:c,state:null,element:this,$element:s,timeoutId:null},o[a]=p,s.data("_scrollexId",p.id),p.options.initialize&&p.options.initialize.apply(this),s},jQuery.fn.unscrollex=function(){var e=t(this);if(0==this.length)return e;if(this.length>1){for(var n=0;n1){for(o=0;o 1) { - clearTimeout(flexboxFixTimeoutId); + for (var i=0; i < this.length; i++) + $(this[i])._parallax(intensity); - flexboxFixTimeoutId = setTimeout(function() { - - if ($wrapper.prop('scrollHeight') > $window.height()) - $wrapper.css('height', 'auto'); - else - $wrapper.css('height', '100vh'); - - }, 250); - - }).triggerHandler('resize.flexbox-fix'); + return $this; } - // Nav. - var $nav = $header.children('nav'), - $nav_li = $nav.find('li'); - - // Add "middle" alignment classes if we're dealing with an even number of items. - if ($nav_li.length % 2 == 0) { - - $nav.addClass('use-middle'); - $nav_li.eq( ($nav_li.length / 2) ).addClass('is-middle'); - - } + if (!intensity) + intensity = 0.25; - // Main. - var delay = 325, - locked = false; + $this.each(function() { - // Methods. - $main._show = function(id, initial) { + var $t = $(this), + $bg = $('
').appendTo($t), + on, off; - var $article = $main_articles.filter('#' + id); + on = function() { - // No such article? Bail. - if ($article.length == 0) - return; + $bg + .removeClass('fixed') + .css('transform', 'matrix(1,0,0,1,0,0)'); - // Handle lock. - - // Already locked? Speed through "show" steps w/o delays. - if (locked || (typeof initial != 'undefined' && initial === true)) { - - // Mark as switching. - $body.addClass('is-switching'); - - // Mark as visible. - $body.addClass('is-article-visible'); + $window + .on('scroll._parallax', function() { - // Deactivate all articles (just in case one's already active). - $main_articles.removeClass('active'); + var pos = parseInt($window.scrollTop()) - parseInt($t.position().top); - // Hide header, footer. - $header.hide(); - $footer.hide(); + $bg.css('transform', 'matrix(1,0,0,1,0,' + (pos * intensity) + ')'); - // Show main, article. - $main.show(); - $article.show(); + }); - // Activate article. - $article.addClass('active'); + }; - // Unlock. - locked = false; + off = function() { - // Unmark as switching. - setTimeout(function() { - $body.removeClass('is-switching'); - }, (initial ? 1000 : 0)); + $bg + .addClass('fixed') + .css('transform', 'none'); - return; + $window + .off('scroll._parallax'); - } + }; - // Lock. - locked = true; + // Disable parallax on .. + if (browser.name == 'ie' // IE + || browser.name == 'edge' // Edge + || window.devicePixelRatio > 1 // Retina/HiDPI (= poor performance) + || browser.mobile) // Mobile devices + off(); - // Article already visible? Just swap articles. - if ($body.hasClass('is-article-visible')) { + // Enable everywhere else. + else { - // Deactivate current article. - var $currentArticle = $main_articles.filter('.active'); + breakpoints.on('>large', on); + breakpoints.on('<=large', off); - $currentArticle.removeClass('active'); + } - // Show article. - setTimeout(function() { + }); - // Hide current article. - $currentArticle.hide(); + $window + .off('load._parallax resize._parallax') + .on('load._parallax resize._parallax', function() { + $window.trigger('scroll'); + }); - // Show article. - $article.show(); + return $(this); - // Activate article. - setTimeout(function() { + }; - $article.addClass('active'); + // Play initial animations on page load. + $window.on('load', function() { + window.setTimeout(function() { + $body.removeClass('is-preload'); + }, 100); + }); - // Window stuff. - $window - .scrollTop(0) - .triggerHandler('resize.flexbox-fix'); + // Scrolly. + $('.scrolly').scrolly(); - // Unlock. - setTimeout(function() { - locked = false; - }, delay); + // Background. + $wrapper._parallax(0.925); - }, 25); + // Nav Panel. - }, delay); + // Toggle. + $navPanelToggle = $( + 'Menu' + ) + .appendTo($wrapper); + // Change toggle styling once we've scrolled past the header. + $header.scrollex({ + bottom: '5vh', + enter: function() { + $navPanelToggle.removeClass('alt'); + }, + leave: function() { + $navPanelToggle.addClass('alt'); } + }); - // Otherwise, handle as normal. - else { - - // Mark as visible. - $body - .addClass('is-article-visible'); - - // Show article. - setTimeout(function() { - - // Hide header, footer. - $header.hide(); - $footer.hide(); - - // Show main, article. - $main.show(); - $article.show(); - - // Activate article. - setTimeout(function() { - - $article.addClass('active'); + // Panel. + $navPanel = $( + '' + ) + .appendTo($body) + .panel({ + delay: 500, + hideOnClick: true, + hideOnSwipe: true, + resetScroll: true, + resetForms: true, + side: 'right', + target: $body, + visibleClass: 'is-navPanel-visible' + }); - // Window stuff. - $window - .scrollTop(0) - .triggerHandler('resize.flexbox-fix'); + // Get inner. + $navPanelInner = $navPanel.children('nav'); - // Unlock. - setTimeout(function() { - locked = false; - }, delay); + // Move nav content on breakpoint change. + var $navContent = $nav.children(); - }, 25); + breakpoints.on('>medium', function() { - }, delay); + // NavPanel -> Nav. + $navContent.appendTo($nav); - } - - }; + // Flip icon classes. + $nav.find('.icons, .icon') + .removeClass('alt'); - $main._hide = function(addState) { + }); - var $article = $main_articles.filter('.active'); + breakpoints.on('<=medium', function() { - // Article not visible? Bail. - if (!$body.hasClass('is-article-visible')) - return; + // Nav -> NavPanel. + $navContent.appendTo($navPanelInner); - // Add state? - if (typeof addState != 'undefined' - && addState === true) - history.pushState(null, null, '#'); + // Flip icon classes. + $navPanelInner.find('.icons, .icon') + .addClass('alt'); - // Handle lock. + }); - // Already locked? Speed through "hide" steps w/o delays. - if (locked) { + // Hack: Disable transitions on WP. + if (browser.os == 'wp' + && browser.osVersion < 10) + $navPanel + .css('transition', 'none'); - // Mark as switching. - $body.addClass('is-switching'); + // Intro. + var $intro = $('#intro'); - // Deactivate article. - $article.removeClass('active'); + if ($intro.length > 0) { - // Hide article, main. - $article.hide(); - $main.hide(); + // Hack: Fix flex min-height on IE. + if (browser.name == 'ie') { + $window.on('resize.ie-intro-fix', function() { - // Show footer, header. - $footer.show(); - $header.show(); + var h = $intro.height(); - // Unmark as visible. - $body.removeClass('is-article-visible'); + if (h > $window.height()) + $intro.css('height', 'auto'); + else + $intro.css('height', h); - // Unlock. - locked = false; - - // Unmark as switching. - $body.removeClass('is-switching'); + }).trigger('resize.ie-intro-fix'); + } - // Window stuff. - $window - .scrollTop(0) - .triggerHandler('resize.flexbox-fix'); + // Hide intro on scroll (> small). + breakpoints.on('>small', function() { - return; + $main.unscrollex(); + $main.scrollex({ + mode: 'bottom', + top: '25vh', + bottom: '-50vh', + enter: function() { + $intro.addClass('hidden'); + }, + leave: function() { + $intro.removeClass('hidden'); } - - // Lock. - locked = true; - - // Deactivate article. - $article.removeClass('active'); - - // Hide article. - setTimeout(function() { - - // Hide article, main. - $article.hide(); - $main.hide(); - - // Show footer, header. - $footer.show(); - $header.show(); - - // Unmark as visible. - setTimeout(function() { - - $body.removeClass('is-article-visible'); - - // Window stuff. - $window - .scrollTop(0) - .triggerHandler('resize.flexbox-fix'); - - // Unlock. - setTimeout(function() { - locked = false; - }, delay); - - }, 25); - - }, delay); - - - }; - - // Articles. - $main_articles.each(function() { - - var $this = $(this); - - // Close. - $('
Close
') - .appendTo($this) - .on('click', function() { - location.hash = ''; - }); - - // Prevent clicks from inside article from bubbling. - $this.on('click', function(event) { - event.stopPropagation(); }); - }); - - // Events. - $body.on('click', function(event) { - - // Article visible? Hide. - if ($body.hasClass('is-article-visible')) - $main._hide(true); - - }); - - $window.on('keyup', function(event) { - - switch (event.keyCode) { - - case 27: - - // Article visible? Hide. - if ($body.hasClass('is-article-visible')) - $main._hide(true); - - break; - - default: - break; - - } - - }); - - $window.on('hashchange', function(event) { - - // Empty hash? - if (location.hash == '' - || location.hash == '#') { - - // Prevent default. - event.preventDefault(); - event.stopPropagation(); - - // Hide. - $main._hide(); - - } - - // Otherwise, check for a matching article. - else if ($main_articles.filter(location.hash).length > 0) { - - // Prevent default. - event.preventDefault(); - event.stopPropagation(); - - // Show article. - $main._show(location.hash.substr(1)); - - } - - }); + }); - // Scroll restoration. - // This prevents the page from scrolling back to the top on a hashchange. - if ('scrollRestoration' in history) - history.scrollRestoration = 'manual'; - else { - - var oldScrollPos = 0, - scrollPos = 0, - $htmlbody = $('html,body'); - - $window - .on('scroll', function() { + // Hide intro on scroll (<= small). + breakpoints.on('<=small', function() { - oldScrollPos = scrollPos; - scrollPos = $htmlbody.scrollTop(); + $main.unscrollex(); - }) - .on('hashchange', function() { - $window.scrollTop(oldScrollPos); + $main.scrollex({ + mode: 'middle', + top: '15vh', + bottom: '-15vh', + enter: function() { + $intro.addClass('hidden'); + }, + leave: function() { + $intro.removeClass('hidden'); + } }); - } - - // Initialize. - - // Hide main, articles. - $main.hide(); - $main_articles.hide(); + }); - // Initial article. - if (location.hash != '' - && location.hash != '#') - $window.on('load', function() { - $main._show(location.hash.substr(1), true); - }); + } })(jQuery); \ No newline at end of file diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss index 0212a5c..dbd9195 100644 --- a/assets/sass/base/_page.scss +++ b/assets/sass/base/_page.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -11,6 +11,11 @@ width: device-width; } + // MSIE: Prevents scrollbar from overlapping content. + body { + -ms-overflow-style: scrollbar; + } + // Ensures page width is always >=320px. @include breakpoint('<=xsmall') { html, body { @@ -29,7 +34,8 @@ } body { - background: _palette(bg); + + background-color: _palette(invert, bg); // Stops initial animations until page loads. &.is-preload { diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss index 3fd0038..90bd937 100644 --- a/assets/sass/base/_reset.scss +++ b/assets/sass/base/_reset.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss index 4425ec3..0f0ce4a 100644 --- a/assets/sass/base/_typography.scss +++ b/assets/sass/base/_typography.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -13,7 +13,7 @@ font-size: 12pt; } - @include breakpoint('<=small') { + @include breakpoint('<=large') { font-size: 11pt; } @@ -22,23 +22,26 @@ } } - body, input, select, textarea { + body { color: _palette(fg); + } + + body, input, select, textarea { font-family: _font(family); font-weight: _font(weight); font-size: 1rem; - line-height: 1.65; + line-height: 2.375; } a { @include vendor('transition', ( 'color #{_duration(transition)} ease-in-out', 'background-color #{_duration(transition)} ease-in-out', - 'border-bottom-color #{_duration(transition)} ease-in-out' + 'border-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out' )); - border-bottom: dotted 1px _palette(fg-light); + border-bottom: dotted 1px; text-decoration: none; - color: inherit; &:hover { border-bottom-color: transparent; @@ -46,7 +49,6 @@ } strong, b { - color: _palette(fg-bold); font-weight: _font(weight-bold); } @@ -55,71 +57,52 @@ } p { + text-align: justify; margin: 0 0 _size(element-margin) 0; } h1, h2, h3, h4, h5, h6 { - color: _palette(fg-bold); - font-weight: _font(weight-bold); + font-family: _font(family-heading); + font-weight: _font(weight-heading); line-height: 1.5; - margin: 0 0 (_size(element-margin) * 0.5) 0; + letter-spacing: 0.075em; text-transform: uppercase; - letter-spacing: _font(letter-spacing); + margin: 0 0 (_size(element-margin) * 0.5) 0; a { + border-bottom: 0; color: inherit; text-decoration: none; } - - &.major { - border-bottom: solid _size(border-width) _palette(border); - width: -moz-max-content; - width: -webkit-max-content; - width: -ms-max-content; - width: max-content; - padding-bottom: 0.5rem; - margin: 0 0 (_size(element-margin) * 1) 0; - } } h1 { - font-size: 2.25rem; - line-height: 1.3; - letter-spacing: _font(letter-spacing-heading); + font-size: 4rem; + line-height: 1.1; + margin: 0 0 _size(element-margin) 0; } h2 { - font-size: 1.5rem; - line-height: 1.4; - letter-spacing: _font(letter-spacing-heading); + font-size: 1.75rem; + line-height: 1.3; + margin: 0 0 (_size(element-margin) * 0.75) 0; } h3 { - font-size: 1rem; + font-size: 1.25rem; + margin: 0 0 (_size(element-margin) * 0.75) 0; } h4 { - font-size: 0.8rem; + font-size: 1rem; } h5 { - font-size: 0.7rem; + font-size: 0.9rem; } h6 { - font-size: 0.6rem; - } - - @include breakpoint('<=small') { - h1 { - font-size: 1.75rem; - line-height: 1.4; - } - - h2 { - font-size: 1.25em; - line-height: 1.5; - } + font-size: 0.8rem; } sub { @@ -135,15 +118,15 @@ } blockquote { - border-left: solid (_size(border-width) * 4) _palette(border); + border-left: solid 4px; 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); + border: solid 2px; font-family: _font(family-fixed); font-size: 0.9rem; margin: 0 0.25rem; @@ -166,8 +149,12 @@ hr { border: 0; - border-bottom: solid _size(border-width) _palette(border); - margin: (_size(element-margin) * 1.375) 0; + border-bottom: solid 2px; + margin: (_size(element-margin) * 1.5) 0; + + &.major { + margin: (_size(element-margin) * 2.5) 0; + } } .align-left { @@ -180,4 +167,47 @@ .align-right { text-align: right; - } \ No newline at end of file + } + + @mixin color-typography($p: null) { + @if $p != null { + color: _palette($p, fg); + } + + input, select, textarea { + color: _palette($p, fg-bold); + } + + a { + color: _palette($p, fg-bold); + border-bottom-color: transparentize(_palette($p, fg), 0.5); + + &:hover { + border-bottom-color: transparent; + color: _palette($p, accent) !important; + } + } + + 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 diff --git a/assets/sass/components/_actions.scss b/assets/sass/components/_actions.scss index a5be697..dbed659 100644 --- a/assets/sass/components/_actions.scss +++ b/assets/sass/components/_actions.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -91,7 +91,7 @@ &.icon { &:before { - margin-left: -0.5em; + margin-left: -0.5rem; } } } diff --git a/assets/sass/components/_box.scss b/assets/sass/components/_box.scss index 9081e46..4fce973 100644 --- a/assets/sass/components/_box.scss +++ b/assets/sass/components/_box.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -8,9 +8,9 @@ .box { border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border); + border: solid 2px; margin-bottom: _size(element-margin); - padding: 1.5em; + padding: 1.5rem; > :last-child, > :last-child > :last-child, @@ -23,4 +23,12 @@ border-radius: 0; padding: 0; } - } \ No newline at end of file + } + + @mixin color-box($p: null) { + .box { + border-color: _palette($p, border); + } + } + + @include color-box; \ No newline at end of file diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss index d76e75c..4455696 100644 --- a/assets/sass/components/_button.scss +++ b/assets/sass/components/_button.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -12,37 +12,56 @@ button, .button { @include vendor('appearance', 'none'); - @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out'); - background-color: transparent; - border-radius: _size(border-radius); + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); border: 0; - box-shadow: inset 0 0 0 _size(border-width) _palette(border); - color: _palette(fg-bold) !important; + border-radius: 0; cursor: pointer; display: inline-block; + font-family: _font(family-heading); font-size: 0.8rem; - font-weight: _font(weight); - height: _size(element-height); - letter-spacing: _font(letter-spacing); - line-height: _size(element-height); - outline: 0; - padding: 0 1.25rem 0 (1.25rem + (_font(letter-spacing) * 0.5)); + font-weight: _font(weight-heading); + letter-spacing: 0.075em; + height: 3rem; + line-height: 3rem; + padding: 0 2rem; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; - &:hover { - background-color: _palette(border-bg); - } - - &:active { - background-color: _palette(border-bg-alt); - } - &.icon { &:before { - margin-right: 0.5em; + margin-right: 0.5rem; + } + + &.solo { + position: relative; + width: 4rem; + height: 4rem; + line-height: 4rem; + border-radius: 4rem; + text-indent: 4rem; + overflow: hidden; + padding: 0; + white-space: nowrap; + + &:before { + position: absolute; + display: block; + top: 0; + left: 0; + width: inherit; + height: inherit; + line-height: inherit; + font-size: 1.25rem; + margin-right: 0; + text-align: center; + text-indent: 0; + } } } @@ -51,34 +70,65 @@ } &.small { - font-size: 0.6rem; - height: (_size(element-height) * 0.75); - line-height: (_size(element-height) * 0.75); + font-size: 0.7rem; + height: 2.5rem; + line-height: 2.5rem; + padding: 0 1.5rem; } - &.primary { - background-color: _palette(fg-bold); - color: _palette(bg) !important; - font-weight: _font(weight-bold); + &.large { + font-size: 0.9rem; + height: 3.5rem; + line-height: 3.5rem; + padding: 0 2.75rem; + } - &:hover { - } + @include breakpoint('<=medium') { + font-size: 0.9rem; + height: 3.25rem; + line-height: 3.25rem; - &:active { + &.large { + font-size: 1rem; + height: 3.75rem; + line-height: 3.75rem; } } &.disabled, &:disabled { @include vendor('pointer-events', 'none'); - cursor: default; opacity: 0.25; } } - input[type="submit"], - input[type="reset"], - input[type="button"], - button { - line-height: calc(#{_size(element-height)} - 2px); - } \ No newline at end of file + @mixin color-button($p: null) { + $highlight: _palette($p, highlight); + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + background-color: transparent; + box-shadow: inset 0 0 0 2px _palette($p, fg-bold); + color: _palette($p, fg-bold) !important; + + &:hover { + box-shadow: inset 0 0 0 2px _palette($p, accent); + color: _palette($p, accent) !important; + } + + &.primary { + background-color: _palette($p, fg-bold); + box-shadow: none; + color: _palette($p, bg) !important; + + &:hover { + background-color: _palette($p, accent); + } + } + } + } + + @include color-button; \ No newline at end of file diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss index b50c836..070af58 100644 --- a/assets/sass/components/_form.scss +++ b/assets/sass/components/_form.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -69,31 +69,29 @@ } label { - color: _palette(fg-bold); display: block; - font-size: 0.8rem; - font-weight: _font(weight); - letter-spacing: _font(letter-spacing); + font-family: _font(family-heading); + font-weight: _font(weight-heading); line-height: 1.5; - margin: 0 0 (_size(element-margin) * 0.5) 0; + letter-spacing: 0.075em; + font-size: 0.8rem; text-transform: uppercase; + margin: 0 0 (_size(element-margin) * 0.375) 0; + + @include breakpoint('<=medium') { + font-size: 0.9rem; + } } input[type="text"], input[type="password"], input[type="email"], - input[type="tel"], select, textarea { @include vendor('appearance', 'none'); - @include vendor('transition', ( - 'border-color #{_duration(transition)} ease-in-out', - 'box-shadow #{_duration(transition)} ease-in-out', - 'background-color #{_duration(transition)} ease-in-out' - )); - background-color: transparent; - border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border); + background: transparent; + border-radius: 0; + border: solid 2px; color: inherit; display: block; outline: 0; @@ -104,16 +102,9 @@ &:invalid { box-shadow: none; } - - &:focus { - background: _palette(border-bg); - border-color: _palette(fg-bold); - box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); - } } select { - background-image: svg-url(""); background-size: 1.25rem; background-repeat: no-repeat; background-position: calc(100% - 1rem) center; @@ -121,11 +112,6 @@ padding-right: _size(element-height); text-overflow: ellipsis; - option { - color: _palette(fg); - background: _palette(bg); - } - &:focus { &::-ms-value { background-color: transparent; @@ -160,60 +146,44 @@ & + label { @include icon(false, solid); - @include vendor('user-select', 'none'); - color: _palette(fg); cursor: pointer; display: inline-block; - font-size: 0.8rem; + font-size: 1rem; + letter-spacing: 0; + font-family: _font(family); + text-transform: none; font-weight: _font(weight); - margin: 0 0 (_size(element-margin) * 0.25) 0; padding-left: (_size(element-height) * 0.6) + 1rem; - padding-right: 0.75rem; + padding-right: 1rem; position: relative; &:before { - @include vendor('transition', ( - 'border-color #{_duration(transition)} ease-in-out', - 'box-shadow #{_duration(transition)} ease-in-out', - 'background-color #{_duration(transition)} ease-in-out' - )); - border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border); + border-radius: 0; + border: solid 2px; content: ''; display: inline-block; + font-size: 0.8rem; height: (_size(element-height) * 0.6); left: 0; - line-height: (_size(element-height) * 0.6); - //line-height: calc(#{_size(element-height) * 0.6} + 0em); + line-height: (_size(element-height) * 0.55); position: absolute; text-align: center; - top: -0.15rem; + top: -0.125rem; width: (_size(element-height) * 0.6); } } &:checked + label { &:before { - background: _palette(fg-bold) !important; - border-color: _palette(fg-bold) !important; - color: _palette(bg); content: '\f00c'; } } - - &:focus + label { - &:before { - background: _palette(border-bg); - border-color: _palette(fg-bold); - box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); - } - } } input[type="checkbox"] { & + label { &:before { - border-radius: _size(border-radius); + border-radius: 0; } } } @@ -227,26 +197,97 @@ } ::-webkit-input-placeholder { - color: _palette(fg-light) !important; opacity: 1.0; } :-moz-placeholder { - color: _palette(fg-light) !important; opacity: 1.0; } ::-moz-placeholder { - color: _palette(fg-light) !important; opacity: 1.0; } :-ms-input-placeholder { - color: _palette(fg-light) !important; opacity: 1.0; } - .formerize-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } \ No newline at end of file + @mixin color-form($p: null) { + label { + color: _palette($p, fg-bold); + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + border-color: _palette($p, border); + + &:focus { + border-color: _palette($p, accent); + } + } + + select { + background-image: svg-url(""); + + option { + background-color: _palette($p, bg); + color: _palette($p, fg); + } + } + + .select-wrapper { + &:before { + color: _palette($p, border); + } + } + + input[type="checkbox"], + input[type="radio"], { + & + label { + color: _palette($p, fg); + + &:before { + border-color: _palette($p, border); + } + } + + &:checked + label { + &:before { + background-color: _palette($p, fg-bold); + border-color: _palette($p, fg-bold); + color: _palette($p, bg); + } + } + + &:focus + label { + &:before { + border-color: _palette($p, accent); + } + } + } + + ::-webkit-input-placeholder { + color: _palette($p, fg-light) !important; + } + + :-moz-placeholder { + color: _palette($p, fg-light) !important; + } + + ::-moz-placeholder { + color: _palette($p, fg-light) !important; + } + + :-ms-input-placeholder { + color: _palette($p, fg-light) !important; + } + + .formerize-placeholder { + color: _palette($p, fg-light) !important; + } + } + + @include color-form; \ No newline at end of file diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss index c4712aa..a200c48 100644 --- a/assets/sass/components/_icon.scss +++ b/assets/sass/components/_icon.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// diff --git a/assets/sass/components/_icons.scss b/assets/sass/components/_icons.scss index f096a32..eedac1a 100644 --- a/assets/sass/components/_icons.scss +++ b/assets/sass/components/_icons.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -13,27 +13,39 @@ li { display: inline-block; - padding: 0 0.75em 0 0; + padding: 0 0.5rem 0 0; + vertical-align: middle; &:last-child { padding-right: 0; } - a { - border-radius: 100%; - box-shadow: inset 0 0 0 _size(border-width) _palette(border); - display: inline-block; - height: 2.25rem; - line-height: 2.25rem; - text-align: center; - width: 2.25rem; - - &:hover { - background-color: _palette(border-bg); + .icon { + &:before { + width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + display: inline-block; + text-align: center; + border-radius: 100%; + font-size: 1.25rem; } + } + } + + &.alt { + li { + .icon { + &:before { + @include vendor('transition', ( + 'color #{_duration(transition)} ease-in-out', + 'background-color #{_duration(transition)} ease-in-out', + 'border-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out' + )); - &:active { - background-color: _palette(border-bg-alt); + font-size: 1rem; + } } } } diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss index 9a57d0f..5fa5a40 100644 --- a/assets/sass/components/_image.scss +++ b/assets/sass/components/_image.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,26 +7,11 @@ /* Image */ .image { - border-radius: _size(border-radius); border: 0; + border-radius: _size(border-radius); display: inline-block; position: relative; - &:before { - @include vendor('pointer-events', 'none'); - background-image: url('../../images/overlay.png'); - background-color: _palette(bg-overlay); - border-radius: _size(border-radius); - content: ''; - display: block; - height: 100%; - left: 0; - opacity: 0.5; - position: absolute; - top: 0; - width: 100%; - } - img { border-radius: _size(border-radius); display: block; @@ -43,21 +28,25 @@ &.left { float: left; - padding: 0 1.5em 1em 0; - top: 0.25em; + margin: 0 2rem 2rem 0; + top: 0.75rem; } &.right { float: right; - padding: 0 0 1em 1.5em; - top: 0.25em; + margin: 0 0 2rem 2rem; + top: 0.75rem; } &.fit { display: block; - margin: 0 0 _size(element-margin) 0; + margin: (_size(element-margin) * 1.25) 0; width: 100%; + &:first-child { + margin-top: 0; + } + img { width: 100%; } @@ -65,23 +54,39 @@ &.main { display: block; - margin: (_size(element-margin) * 1.25) 0; + margin: (_size(element-margin) * 2) 0; width: 100%; + &:first-child { + margin-top: 0; + } + img { width: 100%; } } @include breakpoint('<=small') { + &.fit { + margin: _size(element-margin) 0; + } + &.main { - margin: (_size(element-margin) * 1) 0; + margin: _size(element-margin) 0; } } + } - @include breakpoint('<=xsmall') { - &.main { - margin: (_size(element-margin) * 0.75) 0; + a.image { + overflow: hidden; + + img { + @include vendor('transition', 'transform #{_duration(transition)} ease-out'); + } + + &:hover { + img { + @include vendor('transform', 'scale(1.05)'); } } } \ No newline at end of file diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss index 5d9c364..42e905d 100644 --- a/assets/sass/components/_list.scss +++ b/assets/sass/components/_list.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -9,29 +9,29 @@ ol { list-style: decimal; margin: 0 0 _size(element-margin) 0; - padding-left: 1.25em; + padding-left: 1.25rem; li { - padding-left: 0.25em; + padding-left: 0.25rem; } } ul { list-style: disc; margin: 0 0 _size(element-margin) 0; - padding-left: 1em; + padding-left: 1rem; li { - padding-left: 0.5em; + padding-left: 0.5rem; } - &.alt { + &.divided { list-style: none; padding-left: 0; li { - border-top: solid _size(border-width) _palette(border); - padding: 0.5em 0; + border-top: solid 1px; + padding: 0.5rem 0; &:first-child { border-top: 0; @@ -53,4 +53,46 @@ dd { margin-left: _size(element-margin); } - } \ No newline at end of file + } + + @mixin color-list($p: null) { + ul { + &.divided { + li { + border-top-color: _palette($p, border); + } + } + + &.icons { + li { + a.icon { + &:hover { + &:before { + color: _palette($p, accent); + } + } + } + } + + &.alt { + li { + .icon { + &:before { + box-shadow: inset 0 0 0 2px _palette($p, border); + } + } + + a.icon { + &:hover { + &:before { + box-shadow: inset 0 0 0 2px _palette($p, accent); + } + } + } + } + } + } + } + } + + @include color-list; \ No newline at end of file diff --git a/assets/sass/components/_pagination.scss b/assets/sass/components/_pagination.scss new file mode 100644 index 0000000..576f2b2 --- /dev/null +++ b/assets/sass/components/_pagination.scss @@ -0,0 +1,111 @@ +/// +/// Massively by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Pagination */ + + .pagination { + @include vendor('display', 'inline-flex'); + @include vendor('user-select', 'none'); + cursor: default; + list-style: none; + margin: 0 0 _size(element-margin) 2px; + padding: 0; + + a, span { + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'border-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + border: solid 2px; + display: inline-block; + font-family: _font(family-heading); + font-size: 0.8rem; + font-weight: _font(weight-heading); + height: _size(element-height); + letter-spacing: 0.075em; + letter-spacing: _font(letter-spacing-heading); + line-height: calc(#{_size(element-height)} - 4px); + margin-left: -2px; + min-width: _size(element-height); + position: relative; + text-align: center; + text-decoration: none; + text-transform: uppercase; + } + + .next, .previous { + @include icon(false, solid); + padding: 0 1.75rem; + + &:before { + display: inline-block; + color: inherit !important; + line-height: inherit; + } + } + + .previous { + &:before { + content: '\f104'; + margin-right: (0.75em / 0.8); + } + } + + .next { + &:before { + content: '\f105'; + float: right; + margin-left: (0.75em / 0.8); + } + } + + @include breakpoint('<=medium') { + a, span { + font-size: 0.9rem; + } + } + + @include breakpoint('<=xsmall') { + .page, .extra { + display: none; + } + } + } + + @mixin color-pagination($p: null) { + .pagination { + a, span { + border-color: _palette($p, border); + } + + a { + color: _palette($p, fg-bold) !important; + + &:hover { + color: _palette($p, accent) !important; + border-color: _palette($p, accent); + z-index: 1; + + & + a, + & + span { + border-left-color: _palette($p, accent); + } + } + + &.active { + background-color: _palette($p, border); + } + } + + span { + color: _palette($p, border); + } + } + } + + @include color-pagination; \ No newline at end of file diff --git a/assets/sass/components/_row.scss b/assets/sass/components/_row.scss new file mode 100644 index 0000000..b7c827f --- /dev/null +++ b/assets/sass/components/_row.scss @@ -0,0 +1,35 @@ +/// +/// Massively by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Row */ + + .row { + @include html-grid(1.5rem); + + @include breakpoint('<=xlarge') { + @include html-grid(1.5rem, 'xlarge'); + } + + @include breakpoint('<=large') { + @include html-grid(1.5rem, 'large'); + } + + @include breakpoint('<=medium') { + @include html-grid(1.5rem, 'medium'); + } + + @include breakpoint('<=small') { + @include html-grid(1.5rem, 'small'); + } + + @include breakpoint('<=xsmall') { + @include html-grid(1.5rem, 'xsmall'); + } + + @include breakpoint('<=xxsmall') { + @include html-grid(1.5rem, 'xxsmall'); + } + } \ No newline at end of file diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss new file mode 100644 index 0000000..ef9f852 --- /dev/null +++ b/assets/sass/components/_section.scss @@ -0,0 +1,112 @@ +/// +/// Massively by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Section/Article */ + + section, article { + &.special { + text-align: center; + } + } + + header { + cursor: default; + + > .date { + display: block; + font-size: 0.8rem; + height: 1; + margin: 0 0 (_size(element-margin) * 0.5) 0; + position: relative; + } + + > p { + font-style: italic; + } + + > h1 + p { + font-size: 1.1rem; + margin-top: -0.5rem; + line-height: 2; + } + + > h2 + p { + font-size: 1rem; + margin-top: -0.75rem; + } + + > h3 + p { + font-size: 0.9rem; + margin-top: -0.75rem; + } + + > h4 + p { + font-size: 0.8rem; + margin-top: -0.75rem; + } + + &.major { + margin: 0 0 (_size(element-margin) * 2) 0; + text-align: center; + + > :last-child { + margin-bottom: 0; + } + + > p { + margin-top: 0; + text-align: center; + } + + > .date { + font-size: 1rem; + margin: 0 0 (_size(element-margin) * 2) 0; + + &:before, &:after { + content: ''; + display: block; + position: absolute; + top: 50%; + width: calc(50% - 6rem); + border-top: solid 2px; + } + + &:before { + left: 0; + } + + &:after { + right: 0; + } + } + } + + @include breakpoint('<=medium') { + br { + display: none; + } + } + + @include breakpoint('<=small') { + &.major { + margin: 0 0 _size(element-margin) 0; + } + } + } + + @mixin color-section($p: null) { + header { + &.major { + .date { + &:before, &:after { + border-top-color: _palette($p, border); + } + } + } + } + } + + @include color-section; \ No newline at end of file diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss index 3fcb5bb..7c9e2d8 100644 --- a/assets/sass/components/_table.scss +++ b/assets/sass/components/_table.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -17,34 +17,37 @@ tbody { tr { - border: solid _size(border-width) _palette(border); + border: solid 1px; border-left: 0; border-right: 0; - - &:nth-child(2n + 1) { - background-color: _palette(border-bg); - } } } td { - padding: 0.75em 0.75em; + padding: 0.75rem 0.75rem; } th { - color: _palette(fg-bold); - font-size: 0.9em; - font-weight: _font(weight-bold); - padding: 0 0.75em 0.75em 0.75em; + font-family: _font(family-heading); + font-size: 0.8rem; + font-weight: _font(weight-heading); + letter-spacing: 0.075em; + line-height: 1.5; + padding: 0 0.75rem 0.75rem 0.75rem; text-align: left; + text-transform: uppercase; + + @include breakpoint('<=medium') { + font-size: 0.9rem; + } } thead { - border-bottom: solid (_size(border-width) * 2) _palette(border); + border-bottom: solid 2px; } tfoot { - border-top: solid (_size(border-width) * 2) _palette(border); + border-top: solid 2px; } &.alt { @@ -53,18 +56,18 @@ tbody { tr { td { - border: solid _size(border-width) _palette(border); + border: solid 1px; border-left-width: 0; border-top-width: 0; &:first-child { - border-left-width: _size(border-width); + border-left-width: 1px; } } &:first-child { td { - border-top-width: _size(border-width); + border-top-width: 1px; } } } @@ -78,4 +81,42 @@ border-top: 0; } } - } \ No newline at end of file + } + + @mixin color-table($p: null) { + table { + tbody { + tr { + border-color: _palette($p, border); + + &:nth-child(2n + 1) { + background-color: _palette($p, border-bg); + } + } + } + + th { + color: _palette($p, fg-bold); + } + + thead { + border-bottom-color: _palette($p, border); + } + + tfoot { + border-top-color: _palette($p, border); + } + + &.alt { + tbody { + tr { + td { + border-color: _palette($p, border); + } + } + } + } + } + } + + @include color-table; \ No newline at end of file diff --git a/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss index e1eda7a..f1328f8 100644 --- a/assets/sass/layout/_footer.scss +++ b/assets/sass/layout/_footer.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,31 +7,237 @@ /* Footer */ #footer { - @include vendor('transition', ( - 'transform #{_duration(article)} ease-in-out', - 'filter #{_duration(article)} ease-in-out', - 'opacity #{_duration(article)} ease-in-out', - )); - width: 100%; - max-width: 100%; - margin-top: 2rem; + @include color(alt); + @include vendor('display', 'flex'); + background-color: _palette(alt, bg); + color: _palette(fg-light); + cursor: default; + position: relative; + margin: 0 auto; + width: calc(100% - #{_size(padding) * 2}); + max-width: _size(wrapper); + z-index: 2; + + > section { + @include vendor('flex-basis', '50%'); + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + @include padding((_size(padding) * 2), (_size(padding) * 2)); + border-left: solid 2px _palette(alt, border); + + &:first-child { + border-left: 0; + } + + &.split { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + padding: 0; + + > section { + @include padding((_size(padding) * 2) - 1, (_size(padding) * 2)); + border-top: solid 2px _palette(alt, border); + + &:first-child { + @include padding((_size(padding) * 2) - 1, (_size(padding) * 2), (_size(padding), 0, 0, 0)); + border-top: 0; + } + + &:last-child { + @include padding((_size(padding) * 2) - 1, (_size(padding) * 2), (0, 0, _size(padding), 0)); + } + } + + &.contact { + > section { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + padding: (_size(padding) * 1.575) (_size(padding) * 2); + + > * { + margin-bottom: 0; + } + + > :first-child { + @include vendor('flex-shrink', '0'); + @include vendor('flex-grow', '0'); + width: 6rem; + } + + > :last-child { + @include vendor('flex-shrink', '1'); + @include vendor('flex-grow', '1'); + } + + &:first-child { + padding: (_size(padding) * 2) (_size(padding) * 2) ((_size(padding) * 2) - 1) (_size(padding) * 2); + } + + &:last-child { + padding: ((_size(padding) * 2) - 1) (_size(padding) * 2) (_size(padding) * 2) (_size(padding) * 2); + } + + &.alt { + @include vendor('align-items', 'flex-start'); + + > :last-child { + margin-top: -0.325rem; + } + } + } + } + } + } + + form label, + h3, + p { + font-size: 0.8rem; + } + + @include breakpoint('<=medium') { + display: block; + + > section { + border-top: solid 2px _palette(alt, border); + + &:first-child { + border-top: 0; + } + + &.split { + > section { + @include padding((_size(padding) * 2), (_size(padding) * 2)); + + &:first-child { + @include padding((_size(padding) * 2), (_size(padding) * 2)); + } + + &:last-child { + @include padding((_size(padding) * 2), (_size(padding) * 2)); + } + } + + &.contact { + > section { + padding: (_size(padding) * 2); + + &:first-child { + padding: (_size(padding) * 2); + } + + &:last-child { + padding: (_size(padding) * 2); + } + } + } + } + } + + form label, + h3, + p { + font-size: 0.9rem; + } + } + + @include breakpoint('<=small') { + > section { + @include padding((_size(padding) * 1), (_size(padding) * 1)); + + &.split { + > section { + @include padding((_size(padding) * 1), (_size(padding) * 1)); + + &:first-child { + @include padding((_size(padding) * 1), (_size(padding) * 1)); + } + + &:last-child { + @include padding((_size(padding) * 1), (_size(padding) * 1)); + } + } + + &.contact { + > section { + padding: (_size(padding) * 1); + + &:first-child { + padding: (_size(padding) * 1); + } + + &:last-child { + padding: (_size(padding) * 1); + } + } + } + } + } + } + + @include breakpoint('<=xsmall') { + width: 100%; + } + } + + #copyright { + @include color-typography(invert); + position: relative; + color: transparentize(_palette(invert, fg), 0.75); + cursor: default; + font-family: _font(family-heading); + font-size: 0.8rem; + font-weight: _font(weight-heading); + letter-spacing: 0.075em; + line-height: 1.5; text-align: center; + text-transform: uppercase; + margin: (_size(padding) * 2) auto (_size(padding) * 4) auto; + width: calc(100% - #{_size(padding) * 2}); + max-width: _size(wrapper); + z-index: 2; - .copyright { - letter-spacing: _font(letter-spacing); - font-size: 0.6rem; - opacity: 0.75; - margin-bottom: 0; - text-transform: uppercase; + a { + color: inherit; + border-bottom-color: inherit; } - body.is-article-visible & { - @include vendor('transform', 'scale(0.95)'); - @include vendor('filter', 'blur(0.1rem)'); - opacity: 0; + ul { + list-style: none; + margin: 0; + padding-left: 0; + + li { + border-left: solid 2px; + display: inline-block; + line-height: 1; + margin-left: 1rem; + padding-left: 1rem; + + &:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + } } - body.is-preload & { - opacity: 0; + @include breakpoint('<=large') { + margin: (_size(padding) * 2) auto; + } + + @include breakpoint('<=xsmall') { + ul { + li { + border-left: 0; + margin: 1rem 0 0 0; + padding-left: 0; + display: block; + + &:first-child { + margin-top: 0; + } + } + } } } \ No newline at end of file diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss index fcfec0a..0f97c0e 100644 --- a/assets/sass/layout/_header.scss +++ b/assets/sass/layout/_header.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,255 +7,57 @@ /* Header */ #header { + @include color-typography(invert); + @include vendor('align-items', 'center'); @include vendor('display', 'flex'); @include vendor('flex-direction', 'column'); - @include vendor('align-items', 'center'); - @include vendor('transition', ( - 'transform #{_duration(article)} ease-in-out', - 'filter #{_duration(article)} ease-in-out', - 'opacity #{_duration(article)} ease-in-out', - )); - background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); - background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); - background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); - background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); - max-width: 100%; + @include vendor('justify-content', 'flex-end'); + @include vendor('pointer-events', 'none'); + @include vendor('user-select', 'none'); + height: 20rem; + padding-bottom: (_size(padding) * 4); + position: relative; text-align: center; - - > * { - @include vendor('transition', 'opacity #{_duration(article)} ease-in-out'); - position: relative; - margin-top: 3.5rem; - - &:before { - content: ''; - display: block; - position: absolute; - top: calc(-3.5rem - 1px); - left: calc(50% - #{_size(border-width) * 1}); - width: _size(border-width); - height: calc(3.5rem + 1px); - background: _palette(border); - } - } - - > :first-child { - margin-top: 0; - - &:before { - display: none; - } - } + z-index: 2; .logo { - width: 5.5rem; - height: 5.5rem; - line-height: 5.5rem; - border: solid _size(border-width) _palette(border); - border-radius: 100%; - - .icon { - &:before { - font-size: 2rem; - } - } - } - - .content { + @include vendor('transition', ( + 'border-color #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out', + 'opacity 0.5s ease', + 'transform 0.5s ease', + 'visibility 0.5s' + )); + @include vendor('pointer-events', 'auto'); border-style: solid; - border-color: _palette(border); - border-top-width: _size(border-width); - border-bottom-width: _size(border-width); - max-width: 100%; + border-color: _palette(invert, border); + border-width: 5px !important; + font-family: _font(family-heading); + font-size: 2.25rem; + font-weight: _font(weight-heading); + letter-spacing: 0.075em; + line-height: 1; + padding: 1rem 1.75rem; + text-transform: uppercase; + visibility: visible; - .inner { - @include vendor('transition', ( - 'max-height #{_duration(intro)} ease', - 'padding #{_duration(intro)} ease', - 'opacity #{_duration(article)} ease-in-out' - )); - @include vendor('transition-delay', '0.25s'); - padding: 3rem 2rem; - max-height: 40rem; - overflow: hidden; - - > :last-child { - margin-bottom: 0; - } - } - - p { - text-transform: uppercase; - letter-spacing: _font(letter-spacing); - font-size: 0.8rem; - line-height: 2; - } - } - - nav { - ul { - @include vendor('display', 'flex'); - margin-bottom: 0; - list-style: none; - padding-left: 0; - border: solid _size(border-width) _palette(border); - border-radius: _size(border-radius); - - li { - padding-left: 0; - border-left: solid _size(border-width) _palette(border); - - &:first-child { - border-left: 0; - } - - a { - display: block; - min-width: 7.5rem; - height: 2.75rem; - line-height: 2.75rem; - padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing)); - text-transform: uppercase; - letter-spacing: _font(letter-spacing); - font-size: 0.8rem; - border-bottom: 0; - - &:hover { - background-color: _palette(border-bg); - } - - &:active { - background-color: _palette(border-bg-alt); - } - } - } - } - - &.use-middle { - &:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: calc(50% - #{_size(border-width) * 1}); - width: _size(border-width); - height: 100%; - background: _palette(border); - } - - ul { - li { - &.is-middle { - border-left: 0; - } - } - } - } - } - - body.is-article-visible & { - @include vendor('transform', 'scale(0.95)'); - @include vendor('filter', 'blur(0.1rem)'); - opacity: 0; - } - - body.is-preload & { - > * { - opacity: 0; - } - - @include vendor('filter', 'blur(0.125rem)'); - - .content { - .inner { - max-height: 0; - padding-top: 0; - padding-bottom: 0; - opacity: 0; - } + &:hover { + border-color: _palette(invert, accent) !important; + color: _palette(invert, accent) !important; } } @include breakpoint('<=medium') { - .content { - p { - br { - display: none; - } - } - } + height: 14rem; + padding-bottom: (_size(padding) * 2); } @include breakpoint('<=small') { - > * { - margin-top: 2rem; - - &:before { - top: calc(-2rem - 1px); - height: calc(2rem + 1px); - } - } + padding-bottom: (_size(padding) * 1.5); .logo { - width: 4.75rem; - height: 4.75rem; - line-height: 4.75rem; - - .icon { - &:before { - font-size: 1.75rem; - } - } - } - - .content { - .inner { - padding: 2.5rem 1rem; - } - - p { - line-height: 1.875; - } - } - } - - @include breakpoint('<=xsmall') { - padding: 1.5rem 0; - - .content { - .inner { - padding: 2.5rem 0; - } - } - - nav { - ul { - @include vendor('flex-direction', 'column'); - min-width: 10rem; - max-width: 100%; - - li { - border-left: 0; - border-top: solid _size(border-width) _palette(border); - - &:first-child { - border-top: 0; - } - - a { - height: 3rem; - line-height: 3rem; - min-width: 0; - width: 100%; - } - } - } - - &.use-middle { - &:after { - display: none; - } - } + font-size: 1.75rem; + border-width: 3px !important; } } } \ No newline at end of file diff --git a/assets/sass/layout/_intro.scss b/assets/sass/layout/_intro.scss new file mode 100644 index 0000000..3b3a9b4 --- /dev/null +++ b/assets/sass/layout/_intro.scss @@ -0,0 +1,115 @@ +/// +/// Massively by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Intro */ + + #intro { + @include color-typography(invert); + @include color-button(invert); + @include padding(_size(padding) * 4, _size(padding) * 2); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('justify-content', 'flex-end'); + @include vendor('transition', ( + 'opacity 1s ease', + 'transform 1s ease' + )); + position: relative; + cursor: default; + text-align: center; + z-index: 1; + min-height: 100vh; + + h1 { + font-size: 5rem; + line-height: 1; + } + + p { + font-size: 1.25rem; + font-style: italic; + margin-top: -0.25rem; + text-align: center; + } + + & + #header { + margin-top: -20rem; + + .logo { + @include vendor('transform', 'translateY(2rem)'); + opacity: 0; + visibility: hidden; + } + } + + &.hidden { + @include vendor('pointer-events', 'none'); + @include vendor('transform', 'translateY(2rem)'); + @include vendor('transition', ( + 'opacity 0.5s ease', + 'transform 0.5s ease', + 'visibility 0.5s' + )); + opacity: 0; + visibility: hidden; + + & + #header { + .logo { + @include vendor('transform', 'translateY(0)'); + opacity: 1; + visibility: visible; + } + } + } + + body.is-preload & { + @include vendor('transform', 'translateY(2rem)'); + opacity: 0; + + &:not(.hidden) { + & + #header + #nav { + @include vendor('transform', 'translateY(4rem)'); + opacity: 0; + } + } + } + + @include breakpoint('<=medium') { + @include padding(_size(padding) * 2, _size(padding) * 2); + min-height: 90vh; + + p { + br { + display: none; + } + } + + & + #header { + margin-top: -14rem; + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding) * 1.5, _size(padding) * 1); + min-height: 80vh; + + h1 { + font-size: 3.25rem; + line-height: 1.1; + margin-bottom: _size(element-margin) * 0.5; + } + + p { + font-size: 1rem; + margin-top: 0rem; + } + + .actions { + display: none; + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss index e41e702..31b35c8 100644 --- a/assets/sass/layout/_main.scss +++ b/assets/sass/layout/_main.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,96 +7,152 @@ /* Main */ #main { - @include vendor('flex-grow', '1'); - @include vendor('flex-shrink', '1'); - @include vendor('display', 'flex'); - @include vendor('align-items', 'center'); - @include vendor('justify-content', 'center'); - @include vendor('flex-direction', 'column'); + background-color: _palette(bg); position: relative; - max-width: 100%; - z-index: 3; - - article { - @include vendor('transform', 'translateY(0.25rem)'); - @include vendor('transition', ( - 'opacity #{_duration(article)} ease-in-out', - 'transform #{_duration(article)} ease-in-out' - )); - @include padding(2.5rem, 2.5rem, (2rem, 0, 1rem, 0)); - position: relative; - width: 40rem; - max-width: 100%; - background-color: transparentize(_palette(bg), 0.15); - border-radius: _size(border-radius); - opacity: 0; - - &.active { - @include vendor('transform', 'translateY(0)'); - opacity: 1; + margin: 0 auto; + width: calc(100% - #{_size(padding) * 2}); + max-width: _size(wrapper); + z-index: 2; + + > * { + @include padding((_size(padding) * 2), (_size(padding) * 2)); + border-top: solid 2px _palette(border); + margin: 0; + + &:first-child { + border-top: 0; } + } - .close { - display: block; - position: absolute; - top: 0; - right: 0; - width: 4rem; - height: 4rem; - cursor: pointer; - text-indent: 4rem; - overflow: hidden; - white-space: nowrap; - - &:before { - @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); - content: ''; - display: block; - position: absolute; - top: 0.75rem; - left: 0.75rem; - width: 2.5rem; - height: 2.5rem; - border-radius: 100%; - background-position: center; - background-image: svg-url(''); - background-size: 20px 20px; - background-repeat: no-repeat; - } + > footer { + text-align: center; + } - &:hover { - &:before { - background-color: _palette(border-bg); + > .post { + @include padding((_size(padding) * 4), (_size(padding) * 4)); + + header { + &.major { + > .date { + margin-top: -2rem; + } + + > h1, h2 { + font-size: 4rem; + line-height: 1.1; + margin: 0 0 _size(element-margin) 0; } } + } + + &.featured { + text-align: center; + } + + @include breakpoint('<=large') { + @include padding((_size(padding) * 3), (_size(padding) * 2)); + } - &:active { - &:before { - background-color: _palette(border-bg-alt); + @include breakpoint('<=small') { + @include padding((_size(padding) * 2), (_size(padding) * 1)); + + header { + &.major { + > .date { + margin-top: -1rem; + margin-bottom: _size(element-margin); + } + + > h1, h2 { + font-size: 2.5rem; + line-height: 1.2; + margin: 0 0 (_size(element-margin) * 0.75) 0; + } } } } } - @include breakpoint('<=small') { - article { - @include padding(2rem, 2rem, (1.5rem, 0, 0.5rem, 0)); - - .close { - &:before { - top: 0.875rem; - left: 0.875rem; - width: 2.25rem; - height: 2.25rem; - background-size: 14px 14px; + > .posts { + @include fixed-grid(( + columns: 2, + gutters: (_size(padding) * 4), + horizontal-align: center, + vertical-align: flex-start, + flush: false + )); + width: 100%; + padding: 0; + + > article { + border-color: _palette(border); + border-left-width: 2px; + border-style: solid; + border-top-width: 2px; + text-align: center; + + > :last-child { + margin-bottom: 0; + } + + &:nth-child(2n - 1) { + border-left-width: 0; + } + + &:nth-child(-n + 2) { + border-top-width: 0; + } + } + + @include breakpoint('<=medium') { + @include fixed-grid-resize(( + columns: 2, + gutters: (_size(padding) * 2.5), + flush: false + )); + } + + @include breakpoint('<=small') { + @include fixed-grid-resize(( + columns: 1, + gutters: (_size(padding) * 2), + prev-columns: 2, + flush: false + )); + + > article { + &:nth-child(2n - 1) { + border-left-width: 2px; + } + + &:nth-child(-n + 2) { + border-top-width: 2px; + } + + &:nth-child(n) { + border-left-width: 0; + } + + &:nth-child(-n + 1) { + border-top-width: 0; + } + + .image { + max-width: 25rem; + margin-left: auto; + margin-right: auto; } } } } - @include breakpoint('<=xsmall') { - article { - @include padding(2rem, 1.5rem, (1rem, 0, 0.5rem, 0)); + @include breakpoint('<=small') { + > * { + @include padding((_size(padding) * 1), (_size(padding) * 1)); } } + + @include breakpoint('<=xsmall') { + width: 100%; + } } \ No newline at end of file diff --git a/assets/sass/layout/_nav.scss b/assets/sass/layout/_nav.scss new file mode 100644 index 0000000..049a616 --- /dev/null +++ b/assets/sass/layout/_nav.scss @@ -0,0 +1,85 @@ +/// +/// Massively by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Nav */ + + #nav { + @include color-list(invert); + @include color-typography(invert); + @include vendor('display', 'flex'); + @include vendor('transition', ( + 'transform 1s ease', + 'opacity 1s ease' + )); + background: rgba(255,255,255,0.175); + height: 4rem; + line-height: 4rem; + margin: -4rem auto 0 auto; + overflow: hidden; + padding: 0 2rem 0 0; + position: relative; + width: calc(100% - #{_size(padding) * 2}); + max-width: _size(wrapper); + z-index: 2; + + ul { + &.links { + @include vendor('display', 'flex'); + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + font-family: _font(family-heading); + font-weight: _font(weight-heading); + letter-spacing: 0.075em; + list-style: none; + margin-bottom: 0; + padding-left: 0; + text-transform: uppercase; + + li { + display: block; + padding-left: 0; + + a { + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + display: block; + font-size: 0.8rem; + outline: none; + padding: 0 2rem; + + &:hover { + color: inherit !important; + background-color: transparentize(_palette(invert, fg), 0.9); + } + } + + &.active { + background-color: _palette(invert, fg); + + a { + color: _palette(invert, bg); + + &:hover { + color: _palette(invert, accent) !important; + } + } + } + } + } + + &.icons { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + margin-bottom: 0; + } + } + + @include breakpoint('<=medium') { + display: none; + } + } \ No newline at end of file diff --git a/assets/sass/layout/_navPanel.scss b/assets/sass/layout/_navPanel.scss new file mode 100644 index 0000000..52c4015 --- /dev/null +++ b/assets/sass/layout/_navPanel.scss @@ -0,0 +1,153 @@ +/// +/// Massively by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Nav Panel */ + + #navPanelToggle { + @include icon(false, solid); + @include vendor('transition', ( + 'color #{_duration(transition)} ease-in-out', + 'background-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out' + )); + display: none; + position: fixed; + top: 0.75rem; + right: 0.75rem; + border: 0; + color: _palette(invert, fg-bold); + font-family: _font(family-heading); + font-size: 0.9rem; + font-weight: _font(weight-heading); + letter-spacing: 0.075em; + padding: 0.375rem 1.25rem; + text-transform: uppercase; + z-index: _misc(z-index-base) + 1; + + &:before { + content: '\f0c9'; + margin-right: 0.5rem; + } + + &.alt { + background-color: transparentize(_palette(bg), 0.125); + box-shadow: 0 0.125rem 0.75rem 0 transparentize(_palette(invert, bg), 0.75); + color: _palette(fg-bold); + + &:hover { + background-color: _palette(bg); + } + } + + @include breakpoint('<=medium') { + display: block; + } + + @include breakpoint('<=small') { + font-size: 0.8rem; + padding: 0.25rem 1rem; + } + } + + #navPanel { + @include vendor('transform', 'translateX(20rem)'); + @include vendor('transition', ('transform #{_duration(menu)} ease', 'box-shadow #{_duration(menu)} ease', 'visibility #{_duration(menu)}')); + display: none; + -webkit-overflow-scrolling: touch; + background: _palette(bg); + box-shadow: none; + color: _palette(fg-bold); + height: 100%; + max-width: 80%; + overflow-y: auto; + padding: 3rem 2rem; + position: fixed; + right: 0; + top: 0; + visibility: hidden; + width: 20rem; + z-index: _misc(z-index-base) + 2; + + .links { + list-style: none; + padding-left: 0; + + li { + border-top: solid 2px _palette(border); + + a { + border-bottom: 0; + display: block; + font-family: _font(family-heading); + font-size: 0.9rem; + font-size: 0.9rem; + font-weight: _font(weight-heading); + letter-spacing: 0.075em; + padding: 0.75rem 0; + text-transform: uppercase; + } + + &:first-child { + border-top: 0; + } + } + } + + .close { + @include icon(false, solid); + @include vendor('transition', 'color #{_duration(transition)} ease-in-out'); + -webkit-tap-highlight-color: rgba(0,0,0,0); + border: 0; + color: _palette(fg-light); + cursor: pointer; + display: block; + height: 3.25rem; + line-height: 3.25rem; + padding-right: 1.25rem; + position: absolute; + right: 0; + text-align: right; + top: 0; + vertical-align: middle; + width: 7rem; + + &:before { + content: '\f00d'; + font-size: 1.25rem; + } + + &:hover { + color: _palette(fg-bold); + } + + @include breakpoint('<=small') { + height: 4rem; + line-height: 4rem; + } + } + + @include breakpoint('<=medium') { + display: block; + } + + @include breakpoint('<=small') { + padding: 2.5rem 1.75rem; + } + } + + @include breakpoint('<=medium') { + body.is-navPanel-visible { + #wrapper { + opacity: 0.5; + } + + #navPanel { + @include vendor('transform', 'translateX(0)'); + box-shadow: 0 0 1.5rem 0 rgba(0,0,0,0.2); + visibility: visible; + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_wrapper.scss b/assets/sass/layout/_wrapper.scss index 352ceea..568c0b0 100644 --- a/assets/sass/layout/_wrapper.scss +++ b/assets/sass/layout/_wrapper.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Massively by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,30 +7,58 @@ /* Wrapper */ #wrapper { - @include vendor('display', 'flex'); - @include vendor('flex-direction', 'column'); - @include vendor('align-items', 'center'); - @include vendor('justify-content', 'space-between'); + @include vendor('transition', 'opacity #{_duration(menu)} ease'); position: relative; - min-height: 100vh; - width: 100%; - padding: 4rem 2rem; - z-index: 3; + z-index: 1; + overflow: hidden; - &:before { - content: ''; - display: block; - } + > .bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: _palette(wrapper-bg); + background-image: url('../../images/overlay.png'), linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('../../images/bg.jpg'); + background-size: auto, auto, 100% auto; + background-position: center, center, top center; + background-repeat: repeat, no-repeat, no-repeat; + background-attachment: scroll, scroll, scroll; + z-index: -1; - @include breakpoint('<=xlarge') { - padding: 3rem 2rem; + &.fixed { + position: fixed; + width: 100vw; + height: 100vh; + } } - @include breakpoint('<=small') { - padding: 2rem 1rem; + &.fade-in { + &:before { + @include vendor('pointer-events', 'none'); + @include vendor('transition', 'opacity 1s ease-in-out'); + @include vendor('transition-delay', '0.75s'); + background: _palette(invert, bg); + content: ''; + display: block; + height: 100%; + left: 0; + opacity: 0; + position: fixed; + top: 0; + width: 100%; + } + + body.is-preload & { + &:before { + opacity: 1; + } + } } - @include breakpoint('<=xsmall') { - padding: 1rem; + @include orientation(portrait) { + > .bg { + background-size: auto, auto, auto 175%; + } } } \ No newline at end of file diff --git a/assets/sass/libs/_fixed-grid.scss b/assets/sass/libs/_fixed-grid.scss new file mode 100644 index 0000000..0109243 --- /dev/null +++ b/assets/sass/libs/_fixed-grid.scss @@ -0,0 +1,338 @@ +// fixed-grid.scss v1.0 | @ajlkn | MIT licensed */ + +// Mixins. + + /// Initializes base fixed-grid classes. + /// @param {string} $vertical-align Vertical alignment of cells. + /// @param {string} $horizontal-align Horizontal alignment of cells. + @mixin fixed-grid-base($vertical-align: null, $horizontal-align: null) { + + // Grid. + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + + // Vertical alignment. + @if ($vertical-align == top) { + @include vendor('align-items', 'flex-start'); + } + @else if ($vertical-align == bottom) { + @include vendor('align-items', 'flex-end'); + } + @else if ($vertical-align == center) { + @include vendor('align-items', 'center'); + } + @else { + @include vendor('align-items', 'stretch'); + } + + // Horizontal alignment. + @if ($horizontal-align != null) { + text-align: $horizontal-align; + } + + // Cells. + > * { + @include vendor('flex-shrink', '1'); + @include vendor('flex-grow', '0'); + } + + } + + /// Sets up fixed-grid columns. + /// @param {integer} $columns Columns. + @mixin fixed-grid-columns($columns) { + + > * { + $cell-width: 100% / $columns; + width: #{$cell-width}; + } + + } + + /// Sets up fixed-grid gutters. + /// @param {integer} $columns Columns. + /// @param {number} $gutters Gutters. + @mixin fixed-grid-gutters($columns, $gutters) { + + // Apply padding. + > * { + $cell-width: 100% / $columns; + + padding: ($gutters * 0.5); + width: $cell-width; + } + + } + + /// Sets up fixed-grid gutters (flush). + /// @param {integer} $columns Columns. + /// @param {number} $gutters Gutters. + @mixin fixed-grid-gutters-flush($columns, $gutters) { + + // Apply padding. + > * { + $cell-width: 100% / $columns; + $cell-width-pad: $gutters / $columns; + + padding: ($gutters * 0.5); + width: calc(#{$cell-width} + #{$cell-width-pad}); + } + + // Clear top/bottom gutters. + > :nth-child(-n + #{$columns}) { + padding-top: 0; + } + + > :nth-last-child(-n + #{$columns}) { + padding-bottom: 0; + } + + // Clear left/right gutters. + > :nth-child(#{$columns}n + 1) { + padding-left: 0; + } + + > :nth-child(#{$columns}n) { + padding-right: 0; + } + + // Adjust widths of leftmost and rightmost cells. + > :nth-child(#{$columns}n + 1), + > :nth-child(#{$columns}n) { + $cell-width: 100% / $columns; + $cell-width-pad: ($gutters / $columns) - ($gutters / 2); + + width: calc(#{$cell-width} + #{$cell-width-pad}); + } + + } + + /// Reset fixed-grid gutters (flush only). + /// Used to override a previous set of fixed-grid gutter classes. + /// @param {integer} $columns Columns. + /// @param {number} $gutters Gutters. + /// @param {integer} $prev-columns Previous columns. + @mixin fixed-grid-gutters-flush-reset($columns, $gutters, $prev-columns) { + + // Apply padding. + > * { + $cell-width: 100% / $prev-columns; + $cell-width-pad: $gutters / $prev-columns; + + padding: ($gutters * 0.5); + width: calc(#{$cell-width} + #{$cell-width-pad}); + } + + // Clear top/bottom gutters. + > :nth-child(-n + #{$prev-columns}) { + padding-top: ($gutters * 0.5); + } + + > :nth-last-child(-n + #{$prev-columns}) { + padding-bottom: ($gutters * 0.5); + } + + // Clear left/right gutters. + > :nth-child(#{$prev-columns}n + 1) { + padding-left: ($gutters * 0.5); + } + + > :nth-child(#{$prev-columns}n) { + padding-right: ($gutters * 0.5); + } + + // Adjust widths of leftmost and rightmost cells. + > :nth-child(#{$prev-columns}n + 1), + > :nth-child(#{$prev-columns}n) { + $cell-width: 100% / $columns; + $cell-width-pad: $gutters / $columns; + + padding: ($gutters * 0.5); + width: calc(#{$cell-width} + #{$cell-width-pad}); + } + + } + + /// Adds debug styles to current fixed-grid element. + @mixin fixed-grid-debug() { + + box-shadow: 0 0 0 1px red; + + > * { + box-shadow: inset 0 0 0 1px blue; + position: relative; + + > * { + position: relative; + box-shadow: inset 0 0 0 1px green; + } + } + + } + + /// Initializes the current element as a fixed grid. + /// @param {integer} $columns Columns (optional). + /// @param {number} $gutters Gutters (optional). + /// @param {bool} $flush If true, clears padding around the very edge of the grid. + @mixin fixed-grid($settings: ()) { + + // Settings. + + // Debug. + $debug: false; + + @if (map-has-key($settings, 'debug')) { + $debug: map-get($settings, 'debug'); + } + + // Vertical align. + $vertical-align: null; + + @if (map-has-key($settings, 'vertical-align')) { + $vertical-align: map-get($settings, 'vertical-align'); + } + + // Horizontal align. + $horizontal-align: null; + + @if (map-has-key($settings, 'horizontal-align')) { + $horizontal-align: map-get($settings, 'horizontal-align'); + } + + // Columns. + $columns: null; + + @if (map-has-key($settings, 'columns')) { + $columns: map-get($settings, 'columns'); + } + + // Gutters. + $gutters: 0; + + @if (map-has-key($settings, 'gutters')) { + $gutters: map-get($settings, 'gutters'); + } + + // Flush. + $flush: true; + + @if (map-has-key($settings, 'flush')) { + $flush: map-get($settings, 'flush'); + } + + // Initialize base grid. + @include fixed-grid-base($vertical-align, $horizontal-align); + + // Debug? + @if ($debug) { + @include fixed-grid-debug; + } + + // Columns specified? + @if ($columns != null) { + + // Initialize columns. + @include fixed-grid-columns($columns); + + // Gutters specified? + @if ($gutters > 0) { + + // Flush gutters? + @if ($flush) { + + // Initialize gutters (flush). + @include fixed-grid-gutters-flush($columns, $gutters); + + } + + // Otherwise ... + @else { + + // Initialize gutters. + @include fixed-grid-gutters($columns, $gutters); + + } + + } + + } + + } + + /// Resizes a previously-initialized grid. + /// @param {integer} $columns Columns. + /// @param {number} $gutters Gutters (optional). + /// @param {list} $reset A list of previously-initialized grid columns (only if $flush is true). + /// @param {bool} $flush If true, clears padding around the very edge of the grid. + @mixin fixed-grid-resize($settings: ()) { + + // Settings. + + // Columns. + $columns: 1; + + @if (map-has-key($settings, 'columns')) { + $columns: map-get($settings, 'columns'); + } + + // Gutters. + $gutters: 0; + + @if (map-has-key($settings, 'gutters')) { + $gutters: map-get($settings, 'gutters'); + } + + // Previous columns. + $prev-columns: false; + + @if (map-has-key($settings, 'prev-columns')) { + $prev-columns: map-get($settings, 'prev-columns'); + } + + // Flush. + $flush: true; + + @if (map-has-key($settings, 'flush')) { + $flush: map-get($settings, 'flush'); + } + + // Resize columns. + @include fixed-grid-columns($columns); + + // Gutters specified? + @if ($gutters > 0) { + + // Flush gutters? + @if ($flush) { + + // Previous columns specified? + @if ($prev-columns) { + + // Convert to list if it isn't one already. + @if (type-of($prev-columns) != list) { + $prev-columns: ($prev-columns); + } + + // Step through list of previous columns and reset them. + @each $x in $prev-columns { + @include fixed-grid-gutters-flush-reset($columns, $gutters, $x); + } + + } + + // Resize gutters (flush). + @include fixed-grid-gutters-flush($columns, $gutters); + + } + + // Otherwise ... + @else { + + // Resize gutters. + @include fixed-grid-gutters($columns, $gutters); + + } + + } + + } \ No newline at end of file diff --git a/assets/sass/libs/_html-grid.scss b/assets/sass/libs/_html-grid.scss new file mode 100644 index 0000000..3c08069 --- /dev/null +++ b/assets/sass/libs/_html-grid.scss @@ -0,0 +1,149 @@ +// html-grid.scss v1.0 | @ajlkn | MIT licensed */ + +// Mixins. + + /// Initializes the current element as an HTML grid. + /// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually). + /// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list). + @mixin html-grid($gutters: 1.5em, $suffix: '') { + + // Initialize. + $cols: 12; + $multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00; + $unit: 100% / $cols; + + // Suffixes. + $suffixes: null; + + @if (type-of($suffix) == 'list') { + $suffixes: $suffix; + } + @else { + $suffixes: ($suffix); + } + + // Gutters. + $guttersCols: null; + $guttersRows: null; + + @if (type-of($gutters) == 'list') { + + $guttersCols: nth($gutters, 1); + $guttersRows: nth($gutters, 2); + + } + @else { + + $guttersCols: $gutters; + $guttersRows: 0; + + } + + // Row. + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + + // Columns. + > * { + box-sizing: border-box; + } + + // Gutters. + &.gtr-uniform { + > * { + > :last-child { + margin-bottom: 0; + } + } + } + + // Alignment. + &.aln-left { + justify-content: flex-start; + } + + &.aln-center { + justify-content: center; + } + + &.aln-right { + justify-content: flex-end; + } + + &.aln-top { + align-items: flex-start; + } + + &.aln-middle { + align-items: center; + } + + &.aln-bottom { + align-items: flex-end; + } + + // Step through suffixes. + @each $suffix in $suffixes { + + // Suffix. + @if ($suffix != '') { + $suffix: '-' + $suffix; + } + @else { + $suffix: ''; + } + + // Row. + + // Important. + > .imp#{$suffix} { + order: -1; + } + + // Columns, offsets. + @for $i from 1 through $cols { + > .col-#{$i}#{$suffix} { + width: $unit * $i; + } + + > .off-#{$i}#{$suffix} { + margin-left: $unit * $i; + } + } + + // Step through multipliers. + @each $multiplier in $multipliers { + + // Gutters. + $class: null; + + @if ($multiplier != 1) { + $class: '.gtr-' + ($multiplier * 100); + } + + &#{$class} { + margin-top: ($guttersRows * $multiplier * -1); + margin-left: ($guttersCols * $multiplier * -1); + + > * { + padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier); + } + + // Uniform. + &.gtr-uniform { + margin-top: $guttersCols * $multiplier * -1; + + > * { + padding-top: $guttersCols * $multiplier; + } + } + + } + + } + + } + + } \ No newline at end of file diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss index ba1d849..c0f18d3 100644 --- a/assets/sass/libs/_vars.scss +++ b/assets/sass/libs/_vars.scss @@ -1,43 +1,62 @@ // Misc. $misc: ( - z-index-base: 10000 + z-index-base: 10000 ); // Duration. $duration: ( - transition: 0.2s, - bg: 2.5s, - intro: 0.75s, - article: 0.325s + menu: 0.5s, + transition: 0.2s ); // Size. $size: ( - border-radius: 4px, - border-width: 1px, - element-height: 2.75rem, - element-margin: 2rem + element-height: 3rem, + element-margin: 2rem, + padding: 2rem, + wrapper: 72rem ); // Font. $font: ( - family: ('Source Sans Pro', sans-serif), - family-fixed: ('Courier New', monospace), - weight: 300, - weight-bold: 600, - letter-spacing: 0.2rem, - letter-spacing-heading: 0.5rem + family: ('Merriweather', Georgia, serif), + family-heading: ('Source Sans Pro', Helvetica, sans-serif), + family-fixed: ('Courier New', monospace), + weight: 300, + weight-bold: 600, + weight-heading: 900 ); // Palette. $palette: ( - bg: #1b1f22, - bg-alt: #000000, - bg-overlay: rgba(19,21,25,0.5), - fg: #ffffff, - fg-bold: #ffffff, - fg-light: rgba(255,255,255,0.5), - border: #ffffff, - border-bg: rgba(255,255,255,0.075), - border-bg-alt: rgba(255,255,255,0.175) + wrapper-bg: #212931, + + bg: #ffffff, + fg: #212931, + fg-bold: #212931, + fg-light: mix(#212931, #ffffff, 50%), + border: mix(#dcdcdc, #ffffff, 50%), + border-bg: rgba(#dcdcdc, 0.25), + accent: #18bfef, + + alt: ( + bg: #f5f5f5, + fg: #717981, + fg-bold: #717981, + fg-light: mix(#717981, #f5f5f5, 50%), + border: mix(#dcdcdc, #f5f5f5, 75%), + border-bg: rgba(#dcdcdc, 0.5), + accent: #18bfef, + ), + + invert: ( + bg: #1e252d, + bg-alt: #1e252d, + fg: #ffffff, + fg-bold: #ffffff, + fg-light: rgba(#ffffff, 0.5), + border: #ffffff, + border-bg: rgba(#ffffff,0.075), + accent: #18bfef, + ), ); \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index f98ebef..fe62a39 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -3,11 +3,13 @@ @import 'libs/mixins'; @import 'libs/vendor'; @import 'libs/breakpoints'; +@import 'libs/html-grid'; +@import 'libs/fixed-grid'; @import 'fontawesome-all.min.css'; -@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600'); +@import url('https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900'); /* - Dimension by HTML5 UP + Massively by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ @@ -15,14 +17,28 @@ // Breakpoints. @include breakpoints(( - xlarge: ( 1281px, 1680px ), - large: ( 981px, 1280px ), - medium: ( 737px, 980px ), - small: ( 481px, 736px ), - xsmall: ( 361px, 480px ), - xxsmall: ( null, 360px ) + default: (1681px, null ), + xlarge: (1281px, 1680px ), + large: (981px, 1280px ), + medium: (737px, 980px ), + small: (481px, 736px ), + xsmall: (361px, 480px ), + xxsmall: (null, 360px ) )); +// Mixins. + + @mixin color($p) { + @include color-typography($p); + @include color-box($p); + @include color-button($p); + @include color-form($p); + @include color-list($p); + @include color-section($p); + @include color-table($p); + @include color-pagination($p); + } + // Base. @import 'base/reset'; @@ -31,20 +47,25 @@ // Component. - @import 'components/form'; + @import 'components/row'; @import 'components/box'; + @import 'components/button'; + @import 'components/form'; @import 'components/icon'; @import 'components/image'; - @import 'components/list'; @import 'components/actions'; @import 'components/icons'; + @import 'components/list'; + @import 'components/section'; @import 'components/table'; - @import 'components/button'; + @import 'components/pagination'; // Layout. - @import 'layout/bg'; @import 'layout/wrapper'; + @import 'layout/intro'; @import 'layout/header'; + @import 'layout/nav'; @import 'layout/main'; - @import 'layout/footer'; \ No newline at end of file + @import 'layout/footer'; + @import 'layout/navPanel'; \ No newline at end of file diff --git a/assets/sass/noscript.scss b/assets/sass/noscript.scss index dbff806..eb826e5 100644 --- a/assets/sass/noscript.scss +++ b/assets/sass/noscript.scss @@ -3,48 +3,44 @@ @import 'libs/mixins'; @import 'libs/vendor'; @import 'libs/breakpoints'; +@import 'libs/html-grid'; +@import 'libs/fixed-grid'; +@import 'font-awesome.min.css'; /* - Dimension by HTML5 UP + Massively by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -/* BG */ +/* Wrapper */ - #bg { - body.is-preload & { + #wrapper { + background-color: _palette(wrapper-bg); + background-image: url('../../images/overlay.png'), linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('../../images/bg.jpg'); + background-size: auto, auto, 100% auto; + background-position: center, center, top center; + background-repeat: repeat, no-repeat, no-repeat; + background-attachment: fixed, fixed, fixed; + + &.fade-in { &:before { - background-color: transparent; + display: none; } } } -/* Header */ +/* Intro */ - #header { + #intro { body.is-preload & { - > * { - opacity: 1; - } - - @include vendor('filter', 'none'); + opacity: 1; - .content { - .inner { - max-height: none; - padding: 3rem 2rem; + &:not(.hidden) { + & + #header + #nav { + @include vendor('transform', 'none'); opacity: 1; } } } - } - -/* Main */ - - #main { - article { - opacity: 1; - margin: (_size(element-margin) * 2) 0 0 0; - } } \ No newline at end of file diff --git a/elements.html b/elements.html new file mode 100644 index 0000000..4f030f6 --- /dev/null +++ b/elements.html @@ -0,0 +1,498 @@ + + + + + Elements Reference - Massively by HTML5 UP + + + + + + + + +
+ + + + + + + + +
+ + +
+
+

Elements
+ Reference

+
+ + +

Text

+

This is bold and this is strong. This is italic and this is emphasized. + This is superscript text and this is subscript text. + This is underlined and this is code: for (;;) { ... }. + Finally, this is a link.

+
+

Heading Level 2

+

Heading Level 3

+

Heading Level 4

+
Heading Level 5
+
Heading Level 6
+
+
+

Heading with a Subtitle

+

Lorem ipsum dolor sit amet nullam id egestas urna aliquam

+
+

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

+
+

Heading with a Subtitle

+

Lorem ipsum dolor sit amet nullam id egestas urna aliquam

+
+

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

+
+

Heading with a Subtitle

+

Lorem ipsum dolor sit amet nullam id egestas urna aliquam

+
+

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

+ +
+ + +

Lists

+
+
+ +

Unordered

+
    +
  • Dolor pulvinar etiam.
  • +
  • Sagittis lorem eleifend.
  • +
  • Felis feugiat dolore viverra.
  • +
  • Dolor pulvinar etiam.
  • +
+ +

Alternate

+
    +
  • Dolor pulvinar etiam etiam.
  • +
  • Sagittis adipiscing eleifend.
  • +
  • Felis enim dolore viverra.
  • +
  • Dolor pulvinar etiam etiam.
  • +
+ +
+
+ +

Ordered

+
    +
  1. Dolor pulvinar etiam.
  2. +
  3. Etiam vel felis at viverra.
  4. +
  5. Felis enim feugiat magna.
  6. +
  7. Etiam vel felis nullam.
  8. +
  9. Felis enim et tempus.
  10. +
+ +

Icons

+ + + +
+
+

Definition

+
+
Item 1
+
+

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.

+
+
Item 2
+
+

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.

+
+
Item 3
+
+

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.

+
+
+ +

Actions

+ + +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+ + +

Blockquote

+
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis.
+ +
+ + +

Table

+ +

Default

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionPrice
Item 1Ante turpis integer aliquet porttitor.29.99
Item 2Vis ac commodo adipiscing arcu aliquet.19.99
Item 3 Morbi faucibus arcu accumsan lorem.29.99
Item 4Vitae integer tempus condimentum.19.99
Item 5Ante turpis integer aliquet porttitor.29.99
100.00
+
+ +

Alternate

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionPrice
Item 1Ante turpis integer aliquet porttitor.29.99
Item 2Vis ac commodo adipiscing arcu aliquet.19.99
Item 3 Morbi faucibus arcu accumsan lorem.29.99
Item 4Vitae integer tempus condimentum.19.99
Item 5Ante turpis integer aliquet porttitor.29.99
100.00
+
+ +
+ + +

Buttons

+ + + + + +
    +
  • Primary
  • +
  • Default
  • +
+ +
+ + +

Form

+ +
+
+
+ +
+
+ +
+ +
+ +
+ +
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+ +
+ +
+ +
+
    +
  • +
  • +
+
+
+
+ +
+ + +

Image

+ +

Fit

+ +
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +

Left & Right

+

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.

+

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.

+ +
+ + +

Box

+
+

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis volutpat lorem ipsum dolor.

+
+ +
+ + +

Preformatted

+
i = 0;
+
+while (!deck.isInOrder()) {
+    print 'Iteration ' + i;
+    deck.shuffle();
+    i++;
+}
+
+print 'It took ' + i + ' iterations to sort the deck.';
+
+ +
+ +
+ + + + + + + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/generic.html b/generic.html new file mode 100644 index 0000000..dd63d86 --- /dev/null +++ b/generic.html @@ -0,0 +1,126 @@ + + + + + Generic Page - Massively by HTML5 UP + + + + + + + + +
+ + + + + + + + +
+ + +
+
+ April 25, 2017 +

This is a
+ Generic Page

+

Aenean ornare velit lacus varius enim ullamcorper proin aliquam
+ facilisis ante sed etiam magna interdum congue. Lorem ipsum dolor
+ amet nullam sed etiam veroeros.

+
+
+

Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien risus, commodo eget turpis at, elementum convallis enim turpis, lorem ipsum dolor sit amet nullam.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus. Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum.

+
+ +
+ + + + + + + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/images/AIstockimage hands.jpg b/images/AIstockimage hands.jpg new file mode 100644 index 0000000..f835960 Binary files /dev/null and b/images/AIstockimage hands.jpg differ diff --git a/images/DragonFlowIcon.jpg b/images/DragonFlowIcon.jpg new file mode 100644 index 0000000..92206ff Binary files /dev/null and b/images/DragonFlowIcon.jpg differ diff --git a/images/bg.jpg b/images/bg.jpg index d27f914..1fe15b6 100644 Binary files a/images/bg.jpg and b/images/bg.jpg differ diff --git a/images/overlay.png b/images/overlay.png index 3cd22cc..127bb2b 100644 Binary files a/images/overlay.png and b/images/overlay.png differ diff --git a/images/pic01.jpg b/images/pic01.jpg index 2c4200c..b8c5e1e 100644 Binary files a/images/pic01.jpg and b/images/pic01.jpg differ diff --git a/images/pic02.jpg b/images/pic02.jpg index 34ac5e8..fe3be4f 100644 Binary files a/images/pic02.jpg and b/images/pic02.jpg differ diff --git a/images/pic03.jpg b/images/pic03.jpg index db24317..282e4f5 100644 Binary files a/images/pic03.jpg and b/images/pic03.jpg differ diff --git a/images/pic04.jpg b/images/pic04.jpg new file mode 100644 index 0000000..b0206cb Binary files /dev/null and b/images/pic04.jpg differ diff --git a/images/pic05.jpg b/images/pic05.jpg new file mode 100644 index 0000000..3731316 Binary files /dev/null and b/images/pic05.jpg differ diff --git a/images/pic06.jpg b/images/pic06.jpg new file mode 100644 index 0000000..a9762ce Binary files /dev/null and b/images/pic06.jpg differ diff --git a/images/pic07.jpg b/images/pic07.jpg new file mode 100644 index 0000000..57d9304 Binary files /dev/null and b/images/pic07.jpg differ diff --git a/images/pic08.jpg b/images/pic08.jpg new file mode 100644 index 0000000..e0f281d Binary files /dev/null and b/images/pic08.jpg differ diff --git a/images/pic09.jpg b/images/pic09.jpg new file mode 100644 index 0000000..cfdb688 Binary files /dev/null and b/images/pic09.jpg differ diff --git a/index.html b/index.html index dff352d..8071dcb 100644 --- a/index.html +++ b/index.html @@ -1,371 +1,212 @@ - - - - - - DragonFlow - - - - - - -
- - - -
- -
-

Intro

- -

Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin - aliquam facilisis ante interdum congue. Integer mollis, nisl amet - convallis, porttitor magna ullamcorper, amet egestas mauris. Ut - magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. - By the way, check out my awesome work.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis - dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora - torquent per conubia nostra, per inceptos himenaeos. Etiam tristique - libero eu nibh porttitor fermentum. Nullam venenatis erat id - vehicula viverra. Nunc ultrices eros ut ultricies condimentum. - Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae - dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in - lectus. Pellentesque habitant morbi tristique senectus et netus et - malesuada fames ac turpis egestas. In non lorem sit amet elit - placerat maximus. Pellentesque aliquam maximus risus, vel sed - vehicula.

-
- -
-

Work

- -

Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, - at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent - urna nisi, fringila lorem et vehicula lacinia quam. Integer - sollicitudin mauris nec lorem luctus ultrices.

-

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis - libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. - Pellentesque condimentum sem. In efficitur ligula tate urna. - Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. - Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis - libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat - tempus.

-
- -
-

About

- -

Lorem ipsum dolor sit amet, consectetur et adipiscing elit. - Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. - Aliquam erat volutpat. Praesent urna nisi, fringila lorem et - vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus - ultrices. Aliquam libero et malesuada fames ac ante ipsum primis in - faucibus. Cras viverra ligula sit amet ex mollis mattis lorem ipsum - dolor sit amet.

-
- - - -
-

Elements

-
-

Text

-

This is bold and this is strong. This - is italic and this is emphasized. This is superscript - text and this is subscript text. This is underlined - and this is code: for (;;) { ... }. Finally, this - is a link.

-
-

Heading Level 2

-

Heading Level 3

-

Heading Level 4

-
Heading Level 5
-
Heading Level 6
-
-

Blockquote

-
Fringilla nisl. Donec accumsan interdum nisi, quis - tincidunt felis sagittis eget tempus euismod. Vestibulum ante - ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis - iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante - ipsum primis in faucibus lorem ipsum dolor sit amet nullam - adipiscing eu felis.
-

Preformatted

-
i = 0;
-
-while (!deck.isInOrder()) {
-    print 'Iteration ' + i;
-    deck.shuffle();
-    i++;
-}
-
-print 'It took ' + i + ' iterations to sort the deck.';
-
-
-

Lists

-

Unordered

-
    -
  • Dolor pulvinar etiam.
  • -
  • Sagittis adipiscing.
  • -
  • Felis enim feugiat.
  • -
-

Alternate

-
    -
  • Dolor pulvinar etiam.
  • -
  • Sagittis adipiscing.
  • -
  • Felis enim feugiat.
  • -
-

Ordered

-
    -
  1. Dolor pulvinar etiam.
  2. -
  3. Etiam vel felis viverra.
  4. -
  5. Felis enim feugiat.
  6. -
  7. Dolor pulvinar etiam.
  8. -
  9. Etiam vel felis lorem.
  10. -
  11. Felis enim et feugiat.
  12. -
-

Icons

- -

Actions

- - -
-
-

Table

-

Default

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99

-
100.00
-
-

Alternate

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99

-
100.00
-
-
-
-

Buttons

- - - -
    -
  • Disabled
  • -
  • Disabled
  • -
-
-
-

Form

-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
    -
  • -
  • -
-
-
-
-
- - -
- -
- - - - - - - - + + + + + + Dragon Automation + + + + + + +
+ +
+

This is
+ DragonAutomation

+

Business automation, AI integration, business analytics, monitoring + training and support.

+ +
+ + + + + +
+ +
+
April 25, 2017 +

And this is
+ What we do

+

Whatever your business, whatever your product, whatever your + service
+ we can automate, improve and enhance
+ your IT experience.

+
+ Artificial Intelligence + +
+ +
+
+
April 24, 2017 +

Sed magna
+ ipsum faucibus

+
+ +

Donec eget ex magna. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Pellentesque venenatis dolor imperdiet dolor + mattis sagittis magna etiam.

+ +
+
+
April 22, 2017 +

Primis eget
+ imperdiet lorem

+
+ +

Donec eget ex magna. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Pellentesque venenatis dolor imperdiet dolor + mattis sagittis magna etiam.

+ +
+
+
April 18, 2017 +

Ante mattis
+ interdum dolor

+
+ +

Donec eget ex magna. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Pellentesque venenatis dolor imperdiet dolor + mattis sagittis magna etiam.

+ +
+
+
April 14, 2017 +

Tempus sed
+ nulla imperdiet

+
+ +

Donec eget ex magna. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Pellentesque venenatis dolor imperdiet dolor + mattis sagittis magna etiam.

+ +
+
+
April 11, 2017 +

Odio magna
+ sed consectetur

+
+ +

Donec eget ex magna. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Pellentesque venenatis dolor imperdiet dolor + mattis sagittis magna etiam.

+ +
+
+
April 7, 2017 +

Augue lorem
+ primis vestibulum

+
+ +

Donec eget ex magna. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Pellentesque venenatis dolor imperdiet dolor + mattis sagittis magna etiam.

+ +
+
+ + +
+ + + + +
+ + + + + + + + + + diff --git a/index.html.bak b/index.html.bak index 00eaf6a..ad5043e 100644 --- a/index.html.bak +++ b/index.html.bak @@ -1,12 +1,12 @@ - Dimension by HTML5 UP + Dragon Automation @@ -15,344 +15,210 @@ -
+
+ + +
+

This is
+ DragonAutomation

+

Business automation, AI integration, business analytics, monitoring training and support.

+ +
+ + +
- -
-

Intro

- -

Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. By the way, check out my awesome work.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.

-
- - -
-

Work

- -

Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices.

-

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat tempus.

-
- - -
-

About

- -

Lorem ipsum dolor sit amet, consectetur et adipiscing elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices. Aliquam libero et malesuada fames ac ante ipsum primis in faucibus. Cras viverra ligula sit amet ex mollis mattis lorem ipsum dolor sit amet.

-
- - -
-

Contact

-
-
-
- - -
-
- - -
-
- - -
-
-
    -
  • -
  • -
-
-
    -
  • Twitter
  • -
  • Facebook
  • -
  • Instagram
  • -
  • GitHub
  • + +
    +
    + April 25, 2017 +

    And this is
    + What we do

    +

    Whatever your business, whatever your product, whatever your service
    + we can automate, improve and enhance
    + your IT experience.

    +
    + +
    - -
    -

    Elements

    - -
    -

    Text

    -

    This is bold and this is strong. This is italic and this is emphasized. - This is superscript text and this is subscript text. - This is underlined and this is code: for (;;) { ... }. Finally, this is a link.

    -
    -

    Heading Level 2

    -

    Heading Level 3

    -

    Heading Level 4

    -
    Heading Level 5
    -
    Heading Level 6
    -
    -

    Blockquote

    -
    Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.
    -

    Preformatted

    -
    i = 0;
    -
    -while (!deck.isInOrder()) {
    -    print 'Iteration ' + i;
    -    deck.shuffle();
    -    i++;
    -}
    -
    -print 'It took ' + i + ' iterations to sort the deck.';
    -
    - -
    -

    Lists

    - -

    Unordered

    -
      -
    • Dolor pulvinar etiam.
    • -
    • Sagittis adipiscing.
    • -
    • Felis enim feugiat.
    • + +
      +
      +
      + April 24, 2017 +

      Sed magna
      + ipsum faucibus

      +
      + +

      Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.

      + - -

      Alternate

      -
        -
      • Dolor pulvinar etiam.
      • -
      • Sagittis adipiscing.
      • -
      • Felis enim feugiat.
      • +
      +
      +
      + April 22, 2017 +

      Primis eget
      + imperdiet lorem

      +
      + +

      Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.

      + - -

      Ordered

      -
        -
      1. Dolor pulvinar etiam.
      2. -
      3. Etiam vel felis viverra.
      4. -
      5. Felis enim feugiat.
      6. -
      7. Dolor pulvinar etiam.
      8. -
      9. Etiam vel felis lorem.
      10. -
      11. Felis enim et feugiat.
      12. -
      -

      Icons

      -
      +
      +
      + April 18, 2017 +

      Ante mattis
      + interdum dolor

      +
      + +

      Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.

      + - -

      Actions

      -
      + +
      +
      + April 11, 2017 +

      Odio magna
      + sed consectetur

      +
      + +

      Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.

      + -
      - -
      -

      Table

      -

      Default

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      NameDescriptionPrice
      Item OneAnte turpis integer aliquet porttitor.29.99
      Item TwoVis ac commodo adipiscing arcu aliquet.19.99
      Item Three Morbi faucibus arcu accumsan lorem.29.99
      Item FourVitae integer tempus condimentum.19.99
      Item FiveAnte turpis integer aliquet porttitor.29.99
      100.00
      -
      - -

      Alternate

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      NameDescriptionPrice
      Item OneAnte turpis integer aliquet porttitor.29.99
      Item TwoVis ac commodo adipiscing arcu aliquet.19.99
      Item Three Morbi faucibus arcu accumsan lorem.29.99
      Item FourVitae integer tempus condimentum.19.99
      Item FiveAnte turpis integer aliquet porttitor.29.99
      100.00
      -
      -
      - -
      -

      Buttons

      - -
    +
    +
    + April 7, 2017 +

    Augue lorem
    + primis vestibulum

    +
    + +

    Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.

    + - -
      -
    • Disabled
    • -
    • Disabled
    • -
    - - -
    -

    Form

    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
      -
    • -
    • -
    -
    -
    - -
    +
+ + + +
-
+ + - -
+
+ +