diff --git a/README.txt b/README.txt index bbaeb73..96dd202 100644 --- a/README.txt +++ b/README.txt @@ -1,19 +1,4 @@ -Identity by HTML5 UP -html5up.net | @ajlkn -Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) - - -Just a fun little profile/card-style template I whipped up during a break between major -projects. Minimal, responsive, and powered by Skel + Sass. Enjoy :) - -Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images -you can use for pretty much whatever. - -(* = not included) - -AJ -aj@lkn.io | @ajlkn - +Site web du groupe charienko basé sur un template de https://html5up.net Credits: diff --git a/assets/css/main.css b/assets/css/main.css index 543d93b..16ac5ea 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,8 +1,8 @@ -@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600"); -@import url("fontawesome-all.min.css"); +@import url(fontawesome-all.min.css); +@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600"); /* - Overflow by HTML5 UP + Dimension 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 @@ pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, -form, label, legend, table, tbody, +form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, @@ -74,6 +74,18 @@ input, select, textarea { /* Basic */ + @-ms-viewport { + width: device-width; + } + + @media screen and (max-width: 480px) { + + html, body { + min-width: 320px; + } + + } + html { box-sizing: border-box; } @@ -83,27 +95,9 @@ input, select, textarea { } body { - background-color: #1b998bff; - /*background-image: url("images/overlay.png"), url("../../images/bg.jpg");*/ - background-image: url("../../images/logo.png"); - background-repeat: no-repeat; - background-position: center 0; - background-attachment: fixed; - font-family: sans-serif; - font-size: 18pt; - line-height: 1.75em; - font-weight: 300; - letter-spacing: 1px; - color: #3a3939; - text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25); - -webkit-text-stroke: 0.25px; + background: #1b1f22; } - body.is-scroll { - background-attachment: scroll, scroll; - background-size: auto, 100% auto; - } - body.is-preload *, body.is-preload *:before, body.is-preload *:after { -moz-animation: none !important; -webkit-animation: none !important; @@ -115,1847 +109,501 @@ input, select, textarea { transition: none !important; } - input, textarea, select { - font-family: 'Source Sans Pro', sans-serif; - font-size: 18pt; - line-height: 1.75em; +/* Type */ + + html { + font-size: 16pt; + } + + @media screen and (max-width: 1680px) { + + html { + font-size: 12pt; + } + + } + + @media screen and (max-width: 736px) { + + html { + font-size: 11pt; + } + + } + + @media screen and (max-width: 360px) { + + html { + font-size: 10pt; + } + + } + + body, input, select, textarea { + color: #ffffff; + font-family: "Source Sans Pro", sans-serif; font-weight: 300; - letter-spacing: 1px; - color: #3a3939; - text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25); - -webkit-text-stroke: 0.25px; + font-size: 1rem; + line-height: 1.65; } - h1, h2, h3, h4, h5, h6 { - font-weight: 400; - text-transform: uppercase; - line-height: 1.75em; - } - - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - color: inherit; + 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); text-decoration: none; + color: inherit; } - h2 { - font-size: 1.25em; - letter-spacing: 8px; - } - - h3 { - font-size: 1em; - letter-spacing: 5px; - } + a:hover { + border-bottom-color: transparent; + } strong, b { - font-weight: 400; + color: #ffffff; + font-weight: 600; } em, i { font-style: italic; } - a { - -moz-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out; - -webkit-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out; - -ms-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out; - transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out; - color: #35b88f; - text-shadow: 0 0 0.5px rgba(53, 184, 143, 0.25); - text-decoration: none; - border-bottom: dotted 1px rgba(53, 184, 143, 0.5); + p { + margin: 0 0 2rem 0; } - a:hover { - border-bottom-color: rgba(53, 184, 143, 0); + h1, h2, h3, h4, h5, h6 { + color: #ffffff; + font-weight: 600; + line-height: 1.5; + margin: 0 0 1rem 0; + text-transform: uppercase; + letter-spacing: 0.2rem; + } + + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + 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; + } + + h2 { + font-size: 1.5rem; + line-height: 1.4; + letter-spacing: 0.5rem; + } + + h3 { + font-size: 1rem; + } + + h4 { + font-size: 0.8rem; + } + + h5 { + font-size: 0.7rem; + } + + 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; + } + + } + sub { + font-size: 0.8rem; position: relative; - top: 0.5em; - font-size: 0.8em; + top: 0.5rem; } sup { + font-size: 0.8rem; position: relative; - top: -0.5em; - font-size: 0.8em; - } - - hr { - border: 0; - border-top: solid 1px #dad9d9; - margin: 2em 0 2em 0; + top: -0.5rem; } blockquote { - border-left: solid 0.5em #eae9e9; - padding: 1em 0 1em 2em; + border-left: solid 4px #ffffff; font-style: italic; + margin: 0 0 2rem 0; + padding: 0.5rem 0 0.5rem 2rem; } - p, ul, ol, dl, table { - margin-bottom: 1em; + code { + background: rgba(255, 255, 255, 0.075); + border-radius: 4px; + font-family: "Courier New", monospace; + font-size: 0.9rem; + margin: 0 0.25rem; + padding: 0.25rem 0.65rem; } - header { - margin-bottom: 1em; + pre { + -webkit-overflow-scrolling: touch; + font-family: "Courier New", monospace; + font-size: 0.9rem; + margin: 0 0 2rem 0; } - header p { + pre code { display: block; - margin: 0.5em 0 0 0; - padding: 0 0 1.5em 0; + line-height: 1.75; + padding: 1rem 1.5rem; + overflow-x: auto; } - footer { - margin-top: 1em; - } - - br.clear { - clear: both; - } - -/* Container */ - - .container { - margin: 0 auto; - max-width: 100%; - width: 1380px; - } - - @media screen and (max-width: 1680px) { - - .container { - width: 960px; - } - - } - - @media screen and (max-width: 1080px) { - - .container { - width: 95%; - } - - } - -/* Row */ - - .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 { - order: -1; - } - - .row > .col-1 { - width: 8.33333%; - } - - .row > .off-1 { - margin-left: 8.33333%; - } - - .row > .col-2 { - width: 16.66667%; - } - - .row > .off-2 { - margin-left: 16.66667%; - } - - .row > .col-3 { - width: 25%; - } - - .row > .off-3 { - margin-left: 25%; - } - - .row > .col-4 { - width: 33.33333%; - } - - .row > .off-4 { - margin-left: 33.33333%; - } - - .row > .col-5 { - width: 41.66667%; - } - - .row > .off-5 { - margin-left: 41.66667%; - } - - .row > .col-6 { - width: 50%; - } - - .row > .off-6 { - margin-left: 50%; - } - - .row > .col-7 { - width: 58.33333%; - } - - .row > .off-7 { - margin-left: 58.33333%; - } - - .row > .col-8 { - width: 66.66667%; - } - - .row > .off-8 { - margin-left: 66.66667%; - } - - .row > .col-9 { - width: 75%; - } - - .row > .off-9 { - margin-left: 75%; - } - - .row > .col-10 { - width: 83.33333%; - } - - .row > .off-10 { - margin-left: 83.33333%; - } - - .row > .col-11 { - width: 91.66667%; - } - - .row > .off-11 { - margin-left: 91.66667%; - } - - .row > .col-12 { - width: 100%; - } - - .row > .off-12 { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0px; - margin-left: 0px; - } - - .row.gtr-0 > * { - padding: 0px 0 0 0px; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0px; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0px; - } - - .row.gtr-25 { - margin-top: -10px; - margin-left: -10px; - } - - .row.gtr-25 > * { - padding: 10px 0 0 10px; - } - - .row.gtr-25.gtr-uniform { - margin-top: -10px; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 10px; - } - - .row.gtr-50 { - margin-top: -20px; - margin-left: -20px; - } - - .row.gtr-50 > * { - padding: 20px 0 0 20px; - } - - .row.gtr-50.gtr-uniform { - margin-top: -20px; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 20px; - } - - .row { - margin-top: -40px; - margin-left: -40px; - } - - .row > * { - padding: 40px 0 0 40px; - } - - .row.gtr-uniform { - margin-top: -40px; - } - - .row.gtr-uniform > * { - padding-top: 40px; - } - - .row.gtr-150 { - margin-top: -60px; - margin-left: -60px; - } - - .row.gtr-150 > * { - padding: 60px 0 0 60px; - } - - .row.gtr-150.gtr-uniform { - margin-top: -60px; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 60px; - } - - .row.gtr-200 { - margin-top: -80px; - margin-left: -80px; - } - - .row.gtr-200 > * { - padding: 80px 0 0 80px; - } - - .row.gtr-200.gtr-uniform { - margin-top: -80px; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 80px; - } - - @media screen and (max-width: 1680px) { - - .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-wide { - order: -1; - } - - .row > .col-1-wide { - width: 8.33333%; - } - - .row > .off-1-wide { - margin-left: 8.33333%; - } - - .row > .col-2-wide { - width: 16.66667%; - } - - .row > .off-2-wide { - margin-left: 16.66667%; - } - - .row > .col-3-wide { - width: 25%; - } - - .row > .off-3-wide { - margin-left: 25%; - } - - .row > .col-4-wide { - width: 33.33333%; - } - - .row > .off-4-wide { - margin-left: 33.33333%; - } - - .row > .col-5-wide { - width: 41.66667%; - } - - .row > .off-5-wide { - margin-left: 41.66667%; - } - - .row > .col-6-wide { - width: 50%; - } - - .row > .off-6-wide { - margin-left: 50%; - } - - .row > .col-7-wide { - width: 58.33333%; - } - - .row > .off-7-wide { - margin-left: 58.33333%; - } - - .row > .col-8-wide { - width: 66.66667%; - } - - .row > .off-8-wide { - margin-left: 66.66667%; - } - - .row > .col-9-wide { - width: 75%; - } - - .row > .off-9-wide { - margin-left: 75%; - } - - .row > .col-10-wide { - width: 83.33333%; - } - - .row > .off-10-wide { - margin-left: 83.33333%; - } - - .row > .col-11-wide { - width: 91.66667%; - } - - .row > .off-11-wide { - margin-left: 91.66667%; - } - - .row > .col-12-wide { - width: 100%; - } - - .row > .off-12-wide { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0px; - margin-left: 0px; - } - - .row.gtr-0 > * { - padding: 0px 0 0 0px; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0px; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0px; - } - - .row.gtr-25 { - margin-top: -10px; - margin-left: -10px; - } - - .row.gtr-25 > * { - padding: 10px 0 0 10px; - } - - .row.gtr-25.gtr-uniform { - margin-top: -10px; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 10px; - } - - .row.gtr-50 { - margin-top: -20px; - margin-left: -20px; - } - - .row.gtr-50 > * { - padding: 20px 0 0 20px; - } - - .row.gtr-50.gtr-uniform { - margin-top: -20px; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 20px; - } - - .row { - margin-top: -40px; - margin-left: -40px; - } - - .row > * { - padding: 40px 0 0 40px; - } - - .row.gtr-uniform { - margin-top: -40px; - } - - .row.gtr-uniform > * { - padding-top: 40px; - } - - .row.gtr-150 { - margin-top: -60px; - margin-left: -60px; - } - - .row.gtr-150 > * { - padding: 60px 0 0 60px; - } - - .row.gtr-150.gtr-uniform { - margin-top: -60px; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 60px; - } - - .row.gtr-200 { - margin-top: -80px; - margin-left: -80px; - } - - .row.gtr-200 > * { - padding: 80px 0 0 80px; - } - - .row.gtr-200.gtr-uniform { - margin-top: -80px; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 80px; - } - - } - - @media screen and (max-width: 1080px) { - - .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-normal { - order: -1; - } - - .row > .col-1-normal { - width: 8.33333%; - } - - .row > .off-1-normal { - margin-left: 8.33333%; - } - - .row > .col-2-normal { - width: 16.66667%; - } - - .row > .off-2-normal { - margin-left: 16.66667%; - } - - .row > .col-3-normal { - width: 25%; - } - - .row > .off-3-normal { - margin-left: 25%; - } - - .row > .col-4-normal { - width: 33.33333%; - } - - .row > .off-4-normal { - margin-left: 33.33333%; - } - - .row > .col-5-normal { - width: 41.66667%; - } - - .row > .off-5-normal { - margin-left: 41.66667%; - } - - .row > .col-6-normal { - width: 50%; - } - - .row > .off-6-normal { - margin-left: 50%; - } - - .row > .col-7-normal { - width: 58.33333%; - } - - .row > .off-7-normal { - margin-left: 58.33333%; - } - - .row > .col-8-normal { - width: 66.66667%; - } - - .row > .off-8-normal { - margin-left: 66.66667%; - } - - .row > .col-9-normal { - width: 75%; - } - - .row > .off-9-normal { - margin-left: 75%; - } - - .row > .col-10-normal { - width: 83.33333%; - } - - .row > .off-10-normal { - margin-left: 83.33333%; - } - - .row > .col-11-normal { - width: 91.66667%; - } - - .row > .off-11-normal { - margin-left: 91.66667%; - } - - .row > .col-12-normal { - width: 100%; - } - - .row > .off-12-normal { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0px; - margin-left: 0px; - } - - .row.gtr-0 > * { - padding: 0px 0 0 0px; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0px; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0px; - } - - .row.gtr-25 { - margin-top: -10px; - margin-left: -10px; - } - - .row.gtr-25 > * { - padding: 10px 0 0 10px; - } - - .row.gtr-25.gtr-uniform { - margin-top: -10px; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 10px; - } - - .row.gtr-50 { - margin-top: -20px; - margin-left: -20px; - } - - .row.gtr-50 > * { - padding: 20px 0 0 20px; - } - - .row.gtr-50.gtr-uniform { - margin-top: -20px; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 20px; - } - - .row { - margin-top: -40px; - margin-left: -40px; - } - - .row > * { - padding: 40px 0 0 40px; - } - - .row.gtr-uniform { - margin-top: -40px; - } - - .row.gtr-uniform > * { - padding-top: 40px; - } - - .row.gtr-150 { - margin-top: -60px; - margin-left: -60px; - } - - .row.gtr-150 > * { - padding: 60px 0 0 60px; - } - - .row.gtr-150.gtr-uniform { - margin-top: -60px; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 60px; - } - - .row.gtr-200 { - margin-top: -80px; - margin-left: -80px; - } - - .row.gtr-200 > * { - padding: 80px 0 0 80px; - } - - .row.gtr-200.gtr-uniform { - margin-top: -80px; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 80px; - } - - } - - @media screen and (max-width: 840px) { - - .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-narrow { - order: -1; - } - - .row > .col-1-narrow { - width: 8.33333%; - } - - .row > .off-1-narrow { - margin-left: 8.33333%; - } - - .row > .col-2-narrow { - width: 16.66667%; - } - - .row > .off-2-narrow { - margin-left: 16.66667%; - } - - .row > .col-3-narrow { - width: 25%; - } - - .row > .off-3-narrow { - margin-left: 25%; - } - - .row > .col-4-narrow { - width: 33.33333%; - } - - .row > .off-4-narrow { - margin-left: 33.33333%; - } - - .row > .col-5-narrow { - width: 41.66667%; - } - - .row > .off-5-narrow { - margin-left: 41.66667%; - } - - .row > .col-6-narrow { - width: 50%; - } - - .row > .off-6-narrow { - margin-left: 50%; - } - - .row > .col-7-narrow { - width: 58.33333%; - } - - .row > .off-7-narrow { - margin-left: 58.33333%; - } - - .row > .col-8-narrow { - width: 66.66667%; - } - - .row > .off-8-narrow { - margin-left: 66.66667%; - } - - .row > .col-9-narrow { - width: 75%; - } - - .row > .off-9-narrow { - margin-left: 75%; - } - - .row > .col-10-narrow { - width: 83.33333%; - } - - .row > .off-10-narrow { - margin-left: 83.33333%; - } - - .row > .col-11-narrow { - width: 91.66667%; - } - - .row > .off-11-narrow { - margin-left: 91.66667%; - } - - .row > .col-12-narrow { - width: 100%; - } - - .row > .off-12-narrow { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0px; - margin-left: 0px; - } - - .row.gtr-0 > * { - padding: 0px 0 0 0px; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0px; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0px; - } - - .row.gtr-25 { - margin-top: -7.5px; - margin-left: -7.5px; - } - - .row.gtr-25 > * { - padding: 7.5px 0 0 7.5px; - } - - .row.gtr-25.gtr-uniform { - margin-top: -7.5px; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 7.5px; - } - - .row.gtr-50 { - margin-top: -15px; - margin-left: -15px; - } - - .row.gtr-50 > * { - padding: 15px 0 0 15px; - } - - .row.gtr-50.gtr-uniform { - margin-top: -15px; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 15px; - } - - .row { - margin-top: -30px; - margin-left: -30px; - } - - .row > * { - padding: 30px 0 0 30px; - } - - .row.gtr-uniform { - margin-top: -30px; - } - - .row.gtr-uniform > * { - padding-top: 30px; - } - - .row.gtr-150 { - margin-top: -45px; - margin-left: -45px; - } - - .row.gtr-150 > * { - padding: 45px 0 0 45px; - } - - .row.gtr-150.gtr-uniform { - margin-top: -45px; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 45px; - } - - .row.gtr-200 { - margin-top: -60px; - margin-left: -60px; - } - - .row.gtr-200 > * { - padding: 60px 0 0 60px; - } - - .row.gtr-200.gtr-uniform { - margin-top: -60px; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 60px; - } - - } - - @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-mobile { - order: -1; - } - - .row > .col-1-mobile { - width: 8.33333%; - } - - .row > .off-1-mobile { - margin-left: 8.33333%; - } - - .row > .col-2-mobile { - width: 16.66667%; - } - - .row > .off-2-mobile { - margin-left: 16.66667%; - } - - .row > .col-3-mobile { - width: 25%; - } - - .row > .off-3-mobile { - margin-left: 25%; - } - - .row > .col-4-mobile { - width: 33.33333%; - } - - .row > .off-4-mobile { - margin-left: 33.33333%; - } - - .row > .col-5-mobile { - width: 41.66667%; - } - - .row > .off-5-mobile { - margin-left: 41.66667%; - } - - .row > .col-6-mobile { - width: 50%; - } - - .row > .off-6-mobile { - margin-left: 50%; - } - - .row > .col-7-mobile { - width: 58.33333%; - } - - .row > .off-7-mobile { - margin-left: 58.33333%; - } - - .row > .col-8-mobile { - width: 66.66667%; - } - - .row > .off-8-mobile { - margin-left: 66.66667%; - } - - .row > .col-9-mobile { - width: 75%; - } - - .row > .off-9-mobile { - margin-left: 75%; - } - - .row > .col-10-mobile { - width: 83.33333%; - } - - .row > .off-10-mobile { - margin-left: 83.33333%; - } - - .row > .col-11-mobile { - width: 91.66667%; - } - - .row > .off-11-mobile { - margin-left: 91.66667%; - } - - .row > .col-12-mobile { - width: 100%; - } - - .row > .off-12-mobile { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0px; - margin-left: 0px; - } - - .row.gtr-0 > * { - padding: 0px 0 0 0px; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0px; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0px; - } - - .row.gtr-25 { - margin-top: -5px; - margin-left: -5px; - } - - .row.gtr-25 > * { - padding: 5px 0 0 5px; - } - - .row.gtr-25.gtr-uniform { - margin-top: -5px; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 5px; - } - - .row.gtr-50 { - margin-top: -10px; - margin-left: -10px; - } - - .row.gtr-50 > * { - padding: 10px 0 0 10px; - } - - .row.gtr-50.gtr-uniform { - margin-top: -10px; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 10px; - } - - .row { - margin-top: -20px; - margin-left: -20px; - } - - .row > * { - padding: 20px 0 0 20px; - } - - .row.gtr-uniform { - margin-top: -20px; - } - - .row.gtr-uniform > * { - padding-top: 20px; - } - - .row.gtr-150 { - margin-top: -30px; - margin-left: -30px; - } - - .row.gtr-150 > * { - padding: 30px 0 0 30px; - } - - .row.gtr-150.gtr-uniform { - margin-top: -30px; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 30px; - } - - .row.gtr-200 { - margin-top: -40px; - margin-left: -40px; - } - - .row.gtr-200 > * { - padding: 40px 0 0 40px; - } - - .row.gtr-200.gtr-uniform { - margin-top: -40px; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 40px; - } - - } - -/* Sections/Article */ - - section, article { - margin-bottom: 3em; - } - - section > :last-child, - article > :last-child, - section:last-child, - article:last-child { - margin-bottom: 0; - } - - .row > section, .row > article { - margin-bottom: 0; - } - -/* Image */ - - .image { - display: inline-block; + hr { border: 0; + border-bottom: solid 1px #ffffff; + margin: 2.75rem 0; } - .image img { - display: block; - width: 100%; - } - - .image.featured { - display: block; - width: 100%; - margin: 0 0 2em 0; - } - - .image.fit { - display: block; - width: 100%; - } - - .image.left { - float: left; - margin: 0 2em 2em 0; - } - - .image.centered { - display: block; - margin: 0 0 2em 0; - } - - .image.centered img { - margin: 0 auto; - width: auto; - } - -/* List */ - - ul { - list-style: disc; - padding-left: 1em; + .align-left { + text-align: left; } - ul li { - padding-left: 1.5em; - margin-top: 1.5em; - } - - ul li:first-child { - margin-top: 0; - } - - ol { - list-style: decimal; - padding-left: 1.25em; + .align-center { + text-align: center; } - ol li { - padding-left: 1.25em; - margin-top: 1.5em; - } - -/* Icons */ - - ul.icons { - cursor: default; - list-style: none; - padding-left: 0; + .align-right { + text-align: right; } - ul.icons li { - display: inline-block; - padding-left: 0; - margin-top: 0; - } - - ul.icons a { - display: inline-block; - width: 2.5em; - height: 2.5em; - line-height: 2.5em; - text-align: center; - border: 0; - } - -/* Menu */ - - ul.menu { - cursor: default; - list-style: none; - padding-left: 0; - } - - ul.menu li { - display: inline-block; - line-height: 1em; - border-left: solid 1px #dad9d9; - padding: 0 0 0 0.5em; - margin: 0 0 0 0.5em; - } - - ul.menu li:first-child { - border-left: 0; - padding-left: 0; - margin-left: 0; - } - -/* Actions */ - - ul.actions { - cursor: default; - list-style: none; - padding-left: 0; - } - - ul.actions li { - display: inline-block; - margin: 0 0 0 0.5em; - padding-left: 0; - margin-top: 0; - } - - ul.actions li:first-child { - margin-left: 0; - } - /* Form */ - form label { - display: block; - margin: 0 0 0.5em 0; + form { + margin: 0 0 2rem 0; } - form input[type="text"], - form input[type="email"], - form input[type="password"], - form select, - form textarea { - -moz-transition: background-color 0.35s ease-in-out; - -webkit-transition: background-color 0.35s ease-in-out; - -ms-transition: background-color 0.35s ease-in-out; - transition: background-color 0.35s ease-in-out; + 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 { + 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; + } + + 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; - border: 0; - background: #f1f1f1; + outline: 0; + padding: 0 1rem; + text-decoration: none; width: 100%; - padding: 0.75em; } - form input[type="text"]:focus, - form input[type="email"]:focus, - form input[type="password"]:focus, - form select:focus, - form textarea:focus { - background-color: #f8f8f8; + input[type="text"]:invalid, + input[type="password"]:invalid, + input[type="email"]:invalid, + input[type="tel"]:invalid, + select:invalid, + textarea:invalid { + box-shadow: none; } - form input[type="text"], - form input[type="email"], - form input[type="password"], - form select { - line-height: 1em; - } + 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; + } - form select { - background-size: 1.25em; + 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% - 1em) center; - padding-right: 1.25em; + background-position: calc(100% - 1rem) center; + height: 2.75rem; + padding-right: 2.75rem; text-overflow: ellipsis; - 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='%235a5959' /%3E%3C/svg%3E"); } - form select option { - color: #3a3939; - background: #ffffff; + select option { + color: #ffffff; + background: #1b1f22; } - form select:focus::-ms-value { + select:focus::-ms-value { background-color: transparent; } - form select::-ms-expand { + select::-ms-expand { display: none; } - form textarea { - min-height: 12em; + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: 2.75rem; } - form ::-webkit-input-placeholder { - color: #5a5959 !important; + textarea { + padding: 0.75rem 1rem; } - form :-moz-placeholder { - color: #5a5959 !important; - } - - form ::-moz-placeholder { - color: #5a5959 !important; - } - - form :-ms-input-placeholder { - color: #5a5959 !important; - } - - form ::-moz-focus-inner { - border: 0; - } - - form ul.actions { - margin-bottom: 0; - text-align: center; - } - -/* Table */ - - .table-wrapper { - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - - table { - width: 100%; - } - - table tbody tr { - border-top: solid 1px #eae9e9; - } - - table tbody tr:first-child { - border-top: 0; - } - - table td { - padding: 0.75em 1.25em 0.75em 1.25em; - } - - table th { - text-align: left; - font-weight: 400; - padding: 0.75em 1.25em 0.75em 1.25em; - } - - table thead { - background: #f5f5f5; - } - -/* Button */ - - input[type="button"], - input[type="submit"], - input[type="reset"], - button, - .button { - -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out; - -webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out; - -ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out; - transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out; + input[type="checkbox"], + input[type="radio"] { + -moz-appearance: none; -webkit-appearance: none; - position: relative; - display: inline-block; - border: 0; - background: #35b88f; - color: #fff; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); - cursor: pointer; - text-decoration: none; - outline: 0; - padding: 1em 3em 1em 3em; - text-align: center; - border-radius: 3em; - font-weight: 400; + -ms-appearance: none; + appearance: none; + display: block; + float: left; + margin-right: -2rem; + opacity: 0; + width: 1rem; + z-index: -1; } - input[type="button"]:hover, - input[type="submit"]:hover, - input[type="reset"]:hover, - button:hover, - .button:hover { - background: #45c89f; + 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; } - input[type="button"].style2, - input[type="submit"].style2, - input[type="reset"].style2, - button.style2, - .button.style2 { - color: #3a3939; - background: #fff; - box-shadow: inset 0 0 0 1px #fff; - } - - input[type="button"].style2:hover, - input[type="submit"].style2:hover, - input[type="reset"].style2:hover, - button.style2:hover, - .button.style2:hover { - background: rgba(255, 255, 255, 0.1); - color: #fff !important; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25) !important; + 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="button"].style3, - input[type="submit"].style3, - input[type="reset"].style3, - button.style3, - .button.style3 { - background: none; - color: #3a3939; - box-shadow: inset 0 0 0 1px #dad9d9; + 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; + } + + input[type="checkbox"]:checked + label:before, + input[type="radio"]:checked + label:before { + background: #ffffff !important; + border-color: #ffffff !important; + color: #1b1f22; + content: '\f00c'; } - input[type="button"].style3:hover, - input[type="submit"].style3:hover, - input[type="reset"].style3:hover, - button.style3:hover, - .button.style3:hover { - background: rgba(58, 57, 57, 0.025); - } + 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; + } + + input[type="checkbox"] + label:before { + border-radius: 4px; + } + + input[type="radio"] + label:before { + border-radius: 100%; + } + + ::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } + + :-moz-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } + + ::-moz-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } + + :-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } + + .formerize-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } /* Box */ .box { - position: relative; - margin-top: 9em; - margin-bottom: 0; + border-radius: 4px; + border: solid 1px #ffffff; + margin-bottom: 2rem; + padding: 1.5em; } - /* .box:after { - content: ''; - display: block; - position: absolute; - top: -9em; - left: 50%; - height: 9em; - border-left: solid 1px #fff; - } */ - - /* .box:before { - content: ''; - display: block; - width: 90px; - height: 66px; - position: absolute; - left: 50%; - top: -4.5em; - margin-left: -45px; - margin-top: -33px; - background: url("images/arrow.svg") no-repeat; - } */ - - .box :last-child { + .box > :last-child, + .box > :last-child > :last-child, + .box > :last-child > :last-child > :last-child { margin-bottom: 0; } - .box.style1 { - background: #fff; - padding: 3em; + .box.alt { + border: 0; + border-radius: 0; + padding: 0; } - .box.style1 .image { - display: block; - position: absolute; - top: 0; - width: 50%; - height: 100%; - background: #152E33; - overflow: hidden; - } - - .box.style1 .image img { - position: absolute; - top: 0; - height: 100%; - width: auto; - } - - .box.style1 .inner > :last-child { - margin: 0; - } - - .box.style1.right .image { - left: 0; - } - - .box.style1.right .image img { - right: 0; - } - - .box.style1.right .inner { - margin-left: 50%; - padding-left: 3em; - } - - .box.style1.left .image { - right: 0; - } - - .box.style1.left .image img { - left: 0; - } - - .box.style1.left .inner { - margin-right: 50%; - padding-right: 3em; - } - - .box.style2 { - text-align: center; - } - - .box.style2 header { - display: inline-block; - background: #fff; - padding: 2em 3em 2em 3em; - margin: 0; - } - - .box.style2 header p { - padding: 0; - } - - .box.style2 .inner { - position: relative; - padding: 40px 0 0px 0; - } - - .box.style2 .inner:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: 50%; - height: 100%; - border-left: solid 1px #fff; - } - - .box.style2 .inner .row { - position: relative; - } - - .box.style2 .inner .row:before { - content: ''; - display: block; - position: absolute; - top: 50%; - left: 20px; - width: calc(100% - 40px); - border-bottom: solid 1px #fff; - } - - .box.style2 .inner .image { - position: relative; - z-index: 1; - padding: 20px; - } - - .box.style3 { - background: #fff; - padding: 3em; - } - - .box.style3 header { - text-align: center; - } - -/* Icons */ +/* Icon */ .icon { text-decoration: none; - text-decoration: none; + border-bottom: none; + position: relative; } .icon:before { @@ -1971,14 +619,14 @@ input, select, textarea { font-weight: 400; } - .icon:before { - line-height: inherit; - } - .icon > .label { display: none; } + .icon:before { + line-height: inherit; + } + .icon.solid:before { font-weight: 900; } @@ -1987,644 +635,1027 @@ input, select, textarea { font-family: 'Font Awesome 5 Brands'; } -/* Header */ +/* Image */ - #header { - -moz-transition: opacity 2s ease-in-out; - -webkit-transition: opacity 2s ease-in-out; - -ms-transition: opacity 2s ease-in-out; - transition: opacity 2s ease-in-out; + .image { + border-radius: 4px; + border: 0; + display: inline-block; position: relative; - color: #fff; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); - text-align: center; - margin: 0; - padding: 14em 0 14em 0; - cursor: default; } - #header header { - display: inline-block; - padding: 0 0 4.5em 0; - } - - #header header h1 { - font-weight: 600; - font-size: 2em; - letter-spacing: 10px; - } - - #header header p { - border-top: solid 1px rgba(255, 255, 255, 0.5); - color: rgba(255, 255, 255, 0.75); - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.1875); - font-size: 1em; - text-transform: uppercase; - letter-spacing: 3px; - padding: 0; - margin-top: 0.35em; - } - - #header header p:before { - content: ''; - display: block; - border-top: solid 1px rgba(255, 255, 255, 0.5); - margin: 4px 0 0.8em 0; - } - - #header footer { - -moz-transition: opacity 2s ease-in-out, -moz-transform 1s ease-in-out; - -webkit-transition: opacity 2s ease-in-out, -webkit-transform 1s ease-in-out; - -ms-transition: opacity 2s ease-in-out, -ms-transform 1s ease-in-out; - transition: opacity 2s ease-in-out, transform 1s ease-in-out; - -moz-transition-delay: 1.25s; - -webkit-transition-delay: 1.25s; - -ms-transition-delay: 1.25s; - transition-delay: 1.25s; + .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; - bottom: 9em; - margin: 0; + top: 0; width: 100%; } - #header footer:after { + .image img { + border-radius: 4px; + display: block; + } + + .image.left, .image.right { + max-width: 40%; + } + + .image.left img, .image.right img { + width: 100%; + } + + .image.left { + float: left; + padding: 0 1.5em 1em 0; + top: 0.25em; + } + + .image.right { + float: right; + padding: 0 0 1em 1.5em; + top: 0.25em; + } + + .image.fit { + display: block; + margin: 0 0 2rem 0; + width: 100%; + } + + .image.fit img { + width: 100%; + } + + .image.main { + display: block; + margin: 2.5rem 0; + width: 100%; + } + + .image.main img { + width: 100%; + } + + @media screen and (max-width: 736px) { + + .image.main { + margin: 2rem 0; + } + + } + + @media screen and (max-width: 480px) { + + .image.main { + margin: 1.5rem 0; + } + + } + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 2rem 0; + padding-left: 1.25em; + } + + ol li { + padding-left: 0.25em; + } + + ul { + list-style: disc; + margin: 0 0 2rem 0; + padding-left: 1em; + } + + ul li { + padding-left: 0.5em; + } + + ul.alt { + list-style: none; + padding-left: 0; + } + + ul.alt li { + border-top: solid 1px #ffffff; + padding: 0.5em 0; + } + + ul.alt 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; + } + +/* 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; + } + + } + +/* Icons */ + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + } + + ul.icons li { + display: inline-block; + padding: 0 0.75em 0 0; + } + + ul.icons li:last-child { + padding-right: 0; + } + + 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); + } + + ul.icons li a:active { + background-color: rgba(255, 255, 255, 0.175); + } + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 2rem 0; + width: 100%; + } + + table tbody tr { + border: solid 1px #ffffff; + border-left: 0; + border-right: 0; + } + + table tbody tr:nth-child(2n + 1) { + background-color: rgba(255, 255, 255, 0.075); + } + + table td { + padding: 0.75em 0.75em; + } + + table th { + color: #ffffff; + font-size: 0.9em; + font-weight: 600; + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } + + table thead { + border-bottom: solid 2px #ffffff; + } + + table tfoot { + border-top: solid 2px #ffffff; + } + + table.alt { + border-collapse: separate; + } + + table.alt tbody tr td { + border: solid 1px #ffffff; + 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; + } + +/* 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, 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; + } + + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + button:hover, + .button:hover { + background-color: rgba(255, 255, 255, 0.075); + } + + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active, + button:active, + .button:active { + background-color: rgba(255, 255, 255, 0.175); + } + + 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; + } + + 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.6rem; + height: 2.0625rem; + line-height: 2.0625rem; + } + + 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; + } + + 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; + } + + input[type="submit"], + input[type="reset"], + input[type="button"], + button { + line-height: calc(2.75rem - 2px); + } + +/* BG */ + + #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; + } + + #bg:before, #bg:after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + #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.png"); + background-position: center; +/* background-size: cover;*/ + background-repeat: no-repeat; + z-index: 1; + } + + 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); + } + + body.is-preload #bg:before { + background-color: #000000; + } + +/* Wrapper */ + + #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: 7rem 2rem; + z-index: 3; + } + + #wrapper:before { + content: ''; + display: block; + } + + @media screen and (max-width: 1680px) { + + #wrapper { + padding: 10rem 2rem; + } + + } + + @media screen and (max-width: 736px) { + + #wrapper { + padding: 10rem 1rem; + } + + } + + @media screen and (max-width: 480px) { + + #wrapper { + padding: 1rem; + } + + } + +/* 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%; + text-align: center; + } + + #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; + } + + #header > *:before { content: ''; display: block; position: absolute; - bottom: -9em; - left: 50%; - height: 9em; - border-left: solid 1px #fff; + top: calc(-3.5rem - 1px); + left: calc(50% - 1px); + width: 1px; + height: calc(3.5rem + 1px); + background: #ffffff; } - #header footer:before { - content: ''; - display: block; - width: 90px; - height: 66px; - position: absolute; - left: 50%; - bottom: -4.5em; - margin-left: -45px; - margin-bottom: -33px; - background: url("images/arrow.svg") no-repeat; + #header > :first-child { + margin-top: 0; + } + + #header > :first-child:before { + display: none; } - body.is-preload #header { + #header .logo { + width: 5.5rem; + height: 5.5rem; + line-height: 5.5rem; + border: solid 1px #ffffff; + border-radius: 100%; + } + + #header .logo .icon:before { + font-size: 2rem; + } + + #header .content { + border-style: solid; + 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; + } + + #header nav ul { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + margin-bottom: 0; + list-style: none; + padding-left: 0; + border: solid 1px #ffffff; + border-radius: 4px; + } + + #header nav ul li { + padding-left: 0; + border-left: solid 1px #ffffff; + } + + #header nav ul li:first-child { + border-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); + } + + #header nav ul li a:active { + background-color: rgba(255, 255, 255, 0.175); + } + + #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; + } + + 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; } - body.is-preload #header footer { - -moz-transform: translateY(1em); - -webkit-transform: translateY(1em); - -ms-transform: translateY(1em); - transform: translateY(1em); + body.is-preload #header { + -moz-filter: blur(0.125rem); + -webkit-filter: blur(0.125rem); + -ms-filter: blur(0.125rem); + filter: blur(0.125rem); + } + + body.is-preload #header > * { opacity: 0; } -/* Banner */ + body.is-preload #header .content .inner { + max-height: 0; + padding-top: 0; + padding-bottom: 0; + opacity: 0; + } - #banner { + @media screen and (max-width: 980px) { + + #header .content p br { + display: none; + } + + } + + @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; + } + + #header .logo .icon:before { + font-size: 1.75rem; + } + + #header .content .inner { + padding: 2.5rem 1rem; + } + + #header .content p { + line-height: 1.875; + } + + } + + @media screen and (max-width: 480px) { + + #header { + padding: 1.5rem 0; + } + + #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%; + } + + #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; + } + + } + +/* Main */ + + #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; - color: #fff; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); - text-align: center; - background: #35b88f url("images/banner.svg") bottom center no-repeat; - padding: 5em 0 5em 0; - margin: 0; - background-size: 125% auto; + max-width: 100%; + z-index: 3; } - #banner .button { - color: #35b882; - text-shadow: 0 0 0.5px rgba(53, 184, 130, 0.25); + #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; } - #banner header { - margin: 0 0 2em 0; - } - - #banner header h2 { - font-weight: 400; - font-size: 1.75em; - letter-spacing: 8px; + #main article.active { + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; } - #banner p { - margin: 0; - } - - #banner footer { - margin: 2em 0 0 0; - } - - #banner a { - color: inherit; - border-bottom-color: rgba(255, 255, 255, 0.5); - } - - #banner a:hover { - border-bottom-color: rgba(255, 255, 255, 0); + #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; + } + + #main article .close:hover:before { + background-color: rgba(255, 255, 255, 0.075); + } + + #main article .close:active:before { + background-color: rgba(255, 255, 255, 0.175); + } + + @media screen and (max-width: 736px) { + + #main article { + padding: 3.5rem 2rem 0.5rem 2rem ; + } + + #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) { + + #main article { + padding: 3rem 1.5rem 0.5rem 1.5rem ; + } + + } + /* Footer */ #footer { - position: relative; - color: #fff; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); + -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; - margin: 4.5em 0 0 0; } - #footer:after { - content: ''; - display: block; - position: absolute; - top: -4.5em; - left: 50%; - height: 4.5em; - border-left: solid 1px #fff; - } - - #footer a { - color: #fff; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); - border-bottom-color: rgba(255, 255, 255, 0.5); - } - - #footer a:hover { - color: #35b88f; - text-shadow: 0 0 0.5px rgba(69, 200, 159, 0.25); - border-bottom-color: rgba(53, 184, 143, 0.5); - } - - #footer .icons { - padding: 0.75em 2em 0.75em 2em; - border-radius: 3em; - border: solid 1px #fff; - display: inline-block; - margin: 0 0 3em 0; - } - #footer .copyright { - margin: 0 0 9em 0; - font-size: 0.8em; + letter-spacing: 0.2rem; + font-size: 0.6rem; + opacity: 0.75; + margin-bottom: 0; + text-transform: uppercase; } -/* Poptrox */ - - .poptrox-popup { - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - -ms-box-sizing: content-box; - box-sizing: content-box; - } - - .poptrox-popup .loader { - width: 48px; - height: 48px; - background: url("images/loader.gif"); - position: absolute; - top: 50%; - left: 50%; - margin: -24px 0 0 -24px; - } - - .poptrox-popup .nav-next, - .poptrox-popup .nav-previous { - -moz-transition: opacity 0.5s ease-in-out; - -webkit-transition: opacity 0.5s ease-in-out; - -ms-transition: opacity 0.5s ease-in-out; - transition: opacity 0.5s ease-in-out; - position: absolute; - top: 0; - width: 50%; - height: 100%; + 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; - cursor: pointer; - background: rgba(0, 0, 0, 0.01); - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } - .poptrox-popup .nav-next:before, - .poptrox-popup .nav-previous:before { - content: ''; - position: absolute; - width: 96px; - height: 64px; - background: url("images/poptrox-nav.svg"); - top: calc(50% - 1.5em); - margin: -32px 0 0 0; - } - - .poptrox-popup:hover .nav-next, - .poptrox-popup:hover .nav-previous { - opacity: 0.5; - } - - .poptrox-popup:hover .nav-next:hover, - .poptrox-popup:hover .nav-previous:hover { - opacity: 1.0; - } - - .poptrox-popup .nav-next { - right: 0; - } - - .poptrox-popup .nav-next:before { - right: 0; - } - - .poptrox-popup .nav-previous { - left: 0; - } - - .poptrox-popup .nav-previous:before { - -moz-transform: scaleX(-1); - -webkit-transform: scaleX(-1); - -ms-transform: scaleX(-1); - transform: scaleX(-1); - left: 0; - -ms-filter: "FlipH"; - filter: FlipH; - } - - .poptrox-popup .closer { - -moz-transition: opacity 0.5s ease-in-out; - -webkit-transition: opacity 0.5s ease-in-out; - -ms-transition: opacity 0.5s ease-in-out; - transition: opacity 0.5s ease-in-out; - position: absolute; - top: 0; - right: 0; - width: 64px; - height: 64px; - text-indent: -9999px; - z-index: 2; + body.is-preload #footer { opacity: 0; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - } - - .poptrox-popup .closer:before { - -moz-transition: background-color 0.5s ease-in-out; - -webkit-transition: background-color 0.5s ease-in-out; - -ms-transition: background-color 0.5s ease-in-out; - transition: background-color 0.5s ease-in-out; - content: ''; - display: block; - position: absolute; - right: 16px; - top: 16px; - width: 40px; - height: 40px; - border-radius: 100%; - box-shadow: inset 0 0 0 1px #fff; - background: rgba(255, 255, 255, 0.1) url("images/poptrox-closer.svg") center center; - color: #fff !important; - } - - .poptrox-popup:hover .closer { - opacity: 0.5; - } - - .poptrox-popup:hover .closer:hover { - opacity: 1.0; - } - -/* Wide */ - - @media screen and (max-width: 1680px) { - - /* Basic */ - - body, input, textarea, select { - font-size: 16pt; - } - - /* Header */ - - #header { - padding: 10em 0 12em 0; - } - - } - -/* Normal */ - - @media screen and (max-width: 1080px) { - - /* Banner */ - - #banner { - padding: 4em 0 4em 0; - background-size: auto, 175% auto; - } - - /* Header */ - - #header { - padding: 8em 0 10em 0; - } - - } - -/* Narrow */ - - @media screen and (max-width: 840px) { - - /* Basic */ - - body { - background-color: #1b998bff; - background-image: url("../../images/logo-s.png"); - background-repeat: no-repeat; - background-size: 100% auto; - background-position: top center; - background-attachment: scroll; - font-size: 14pt; - } - - input, textarea, select { - font-size: 14pt; - } - - h1, h2, h3, h4, h5, h6 { - line-height: 1.5em; - } - - header p { - margin: 0.25em 0 0 0; - padding: 0 0 0.5em 0; - } - - /* Box */ - - .box { - position: relative; - } - - .box section { - margin: 0 0 2em 0; - } - - .box.style1 { - padding: 2.5em 2em 2.5em 2em; - } - - .box.style1.right .inner { - padding-left: 2em; - } - - .box.style1.left .inner { - padding-right: 2em; - } - - .box.style2 header { - padding: 2em; - } - - .box.style2 .inner { - position: relative; - padding: 30px 0 0 0; - } - - .box.style3 { - padding: 2.5em 2em 2.5em 2em; - } - - /* Header */ - - #header { - padding: 10em 0 12em 0; - } - - /* Banner */ - - #banner { - padding: 3.5em; - background-size: 200% auto; - } - - #banner br { - display: none; - } - - } - -/* Mobile */ - - @media screen and (max-width: 736px) { - - /* Basic */ - - * { - text-shadow: none !important; - } - - body, input, textarea, select { - line-height: 1.5em; - font-size: 12pt; - letter-spacing: 0; - } - - h2, h3, h4, h5, h6 { - font-size: 1em; - } - - h2 { - font-size: 1.25em; - letter-spacing: 4px; - } - - /* List */ - - ul li { - padding-left: 0.5em; - } - - ol li { - padding-left: 0.25em; - } - - /* Icons */ - - ul.icons a { - width: 2em; - height: 2em; - line-height: 2em; - } - - /* Menu */ - - ul.menu li { - display: block; - padding: 0; - border: 0; - margin: 1em 0 0 0; - } - - ul.menu li:first-child { - margin-top: 0; - } - - /* Actions */ - - ul.actions li { - display: block; - margin: 1em 0 0 0; - } - - ul.actions li:first-child { - margin-top: 0; - } - - /* Button */ - - input[type="button"], - input[type="submit"], - input[type="reset"], - button, - .button { - padding: 0.75em 0 0.75em 0; - width: 100%; - max-width: 320px; - } - - /* Box */ - - .box { - margin-top: 4.5em; - } - - /* .box:after { - top: -4.5em; - height: 4.5em; - } */ - - /* .box:before { - width: 45px; - height: 33px; - top: -2.25em; - margin-left: -22.5px; - margin-top: -16.5px; - background-size: 45px 33px; - } */ - - .box.style1 { - padding: 0; - text-align: center; - } - - .box.style1 .image { - position: relative !important; - left: 0 !important; - width: 100% !important; - height: auto !important; - } - - .box.style1 .image img { - position: relative; - height: auto; - width: 100%; - } - - .box.style1 .inner { - margin: 0 !important; - padding: 2em 1.25em 2em 1.25em !important; - } - - .box.style2 .inner .row:before { - display: none; - } - - .box.style2 .inner .image { - padding: 0; - max-width: 250px; - margin: 0 auto 20px auto; - } - - .box.style3 { - padding: 2em 1.25em 2em 1.25em; - } - - /* Header */ - - #header { - padding: 6em 0 6em 0; - } - - #header header { - padding-left: 2em; - padding-right: 2em; - } - - #header header h1 { - font-size: 1.75em; - letter-spacing: 6px; - } - - #header footer { - bottom: 4.5em; - padding: 0 2em 0 2em; - } - - #header footer:after { - bottom: -4.5em; - left: 50%; - height: 4.5em; - } - - #header footer:before { - width: 45px; - height: 33px; - bottom: -2.25em; - margin-left: -22.5px; - margin-bottom: -16.5px; - background-size: 45px 33px; - } - - /* Banner */ - - #banner { - padding: 3em 2em 3em 2em; - background-size: auto 150%; - } - - #banner header { - margin: 0 0 1em 0; - } - - #banner header h2 { - font-size: 1.5em; - letter-spacing: 6px; - } - - /* Footer */ - - #footer .icons { - padding: 0.5em 1.25em 0.5em 1.25em; - } - - #footer .copyright { - font-size: 1em; - margin: 0 0 4em 0; - } - - /* Poptrox */ - - .poptrox-popup .nav-next, - .poptrox-popup .nav-previous { - opacity: 1.0; - } - - .poptrox-popup .nav-next:before, - .poptrox-popup .nav-previous:before { - display: none; - } - - .poptrox-popup .closer { - opacity: 0.5; - } - - } \ 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 955f2e9..cc89b0f 100644 --- a/assets/css/noscript.css +++ b/assets/css/noscript.css @@ -1,19 +1,37 @@ -/* - Overflow by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/* + Dimension 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 */ body.is-preload #header { - opacity: 1; + -moz-filter: none; + -webkit-filter: none; + -ms-filter: none; + filter: none; } - body.is-preload #header footer { - -moz-transform: none; - -webkit-transform: none; - -ms-transform: none; - transform: none; + body.is-preload #header > * { opacity: 1; - } \ No newline at end of file + } + + body.is-preload #header .content .inner { + max-height: none; + padding: 3rem 2rem; + opacity: 1; + } + +/* Main */ + + #main article { + opacity: 1; + margin: 4rem 0 0 0; + } \ No newline at end of file diff --git a/assets/js/breakpoints.min.js b/assets/js/breakpoints.min.js index e20ae89..32419cc 100644 --- a/assets/js/breakpoints.min.js +++ b/assets/js/breakpoints.min.js @@ -1,2 +1,2 @@ -/* breakpoints.js v1.0 | @ajlkn | MIT licensed */ +/* breakpoints.js v1.0 | @ajlkn | MIT licensed */ var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e0:!!("ontouchstart"in window),e.mobile="wp"==e.os||"android"==e.os||"ios"==e.os||"bb"==e.os}};return e.init(),e}();!function(e,n){"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?module.exports=n():e.browser=n()}(this,function(){return browser}); diff --git a/assets/js/main.js b/assets/js/main.js index 7d9c058..f5fcd8c 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,105 +1,401 @@ -/* - Overflow by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -(function($) { - - var $window = $(window), - $body = $('body'), - settings = { - - // Parallax background effect? - parallax: true, - - // Parallax factor (lower = more intense, higher = less intense). - parallaxFactor: 10 - - }; - - // Breakpoints. - breakpoints({ - wide: [ '1081px', '1680px' ], - normal: [ '841px', '1080px' ], - narrow: [ '737px', '840px' ], - mobile: [ null, '736px' ] - }); - - // Mobile? - if (browser.mobile) - $body.addClass('is-scroll'); - - // Play initial animations on page load. - $window.on('load', function() { - window.setTimeout(function() { - $body.removeClass('is-preload'); - }, 100); - }); - - // Scrolly. - $('.scrolly-middle').scrolly({ - speed: 1000, - anchor: 'middle' - }); - - $('.scrolly').scrolly({ - speed: 1000, - offset: function() { return (breakpoints.active('<=mobile') ? 70 : 190); } - }); - - // Parallax background. - - // Disable parallax on IE/Edge (smooth scrolling is jerky), and on mobile platforms (= better performance). - if (browser.name == 'ie' - || browser.name == 'edge' - || browser.mobile) - settings.parallax = false; - - if (settings.parallax) { - - var $dummy = $(), $bg; - - $window - .on('scroll.overflow_parallax', function() { - - // Adjust background position. - $bg.css('background-position', 'center ' + (-1 * (parseInt($window.scrollTop()) / settings.parallaxFactor)) + 'px'); - - }) - .on('resize.overflow_parallax', function() { - - // If we're in a situation where we need to temporarily disable parallax, do so. - if (breakpoints.active('<=narrow')) { - - $body.css('background-position', ''); - $bg = $dummy; - - } - - // Otherwise, continue as normal. - else - $bg = $body; - - // Trigger scroll handler. - $window.triggerHandler('scroll.overflow_parallax'); - - }) - .trigger('resize.overflow_parallax'); - - } - - // Poptrox. - $('.gallery').poptrox({ - useBodyOverflow: false, - usePopupEasyClose: false, - overlayColor: '#0a1919', - overlayOpacity: 0.75, - usePopupDefaultStyling: false, - usePopupCaption: true, - popupLoaderText: '', - windowMargin: 10, - usePopupNav: true - }); - +/* + Dimension by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +(function($) { + + var $window = $(window), + $body = $('body'), + $wrapper = $('#wrapper'), + $header = $('#header'), + $footer = $('#footer'), + $main = $('#main'), + $main_articles = $main.children('article'); + + // Breakpoints. + breakpoints({ + xlarge: [ '1281px', '1680px' ], + large: [ '981px', '1280px' ], + medium: [ '737px', '980px' ], + small: [ '481px', '736px' ], + xsmall: [ '361px', '480px' ], + xxsmall: [ null, '360px' ] + }); + + // Play initial animations on page load. + $window.on('load', function() { + window.setTimeout(function() { + $body.removeClass('is-preload'); + }, 100); + }); + + // Fix: Flexbox min-height bug on IE. + if (browser.name == 'ie') { + + var flexboxFixTimeoutId; + + $window.on('resize.flexbox-fix', function() { + + clearTimeout(flexboxFixTimeoutId); + + flexboxFixTimeoutId = setTimeout(function() { + + if ($wrapper.prop('scrollHeight') > $window.height()) + $wrapper.css('height', 'auto'); + else + $wrapper.css('height', '100vh'); + + }, 250); + + }).triggerHandler('resize.flexbox-fix'); + + } + + // 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'); + + } + + // Main. + var delay = 325, + locked = false; + + // Methods. + $main._show = function(id, initial) { + + var $article = $main_articles.filter('#' + id); + + // No such article? Bail. + if ($article.length == 0) + return; + + // 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'); + + // Deactivate all articles (just in case one's already active). + $main_articles.removeClass('active'); + + // Hide header, footer. + $header.hide(); + $footer.hide(); + + // Show main, article. + $main.show(); + $article.show(); + + // Activate article. + $article.addClass('active'); + + // Unlock. + locked = false; + + // Unmark as switching. + setTimeout(function() { + $body.removeClass('is-switching'); + }, (initial ? 1000 : 0)); + + return; + + } + + // Lock. + locked = true; + + // Article already visible? Just swap articles. + if ($body.hasClass('is-article-visible')) { + + // Deactivate current article. + var $currentArticle = $main_articles.filter('.active'); + + $currentArticle.removeClass('active'); + + // Show article. + setTimeout(function() { + + // Hide current article. + $currentArticle.hide(); + + // Show article. + $article.show(); + + // Activate article. + setTimeout(function() { + + $article.addClass('active'); + + // Window stuff. + $window + .scrollTop(0) + .triggerHandler('resize.flexbox-fix'); + + // Unlock. + setTimeout(function() { + locked = false; + }, delay); + + }, 25); + + }, delay); + + } + + // 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'); + + // Window stuff. + $window + .scrollTop(0) + .triggerHandler('resize.flexbox-fix'); + + // Unlock. + setTimeout(function() { + locked = false; + }, delay); + + }, 25); + + }, delay); + + } + + }; + + $main._hide = function(addState) { + + var $article = $main_articles.filter('.active'); + + // Article not visible? Bail. + if (!$body.hasClass('is-article-visible')) + return; + + // Add state? + if (typeof addState != 'undefined' + && addState === true) + history.pushState(null, null, '#'); + + // Handle lock. + + // Already locked? Speed through "hide" steps w/o delays. + if (locked) { + + // Mark as switching. + $body.addClass('is-switching'); + + // Deactivate article. + $article.removeClass('active'); + + // Hide article, main. + $article.hide(); + $main.hide(); + + // Show footer, header. + $footer.show(); + $header.show(); + + // Unmark as visible. + $body.removeClass('is-article-visible'); + + // Unlock. + locked = false; + + // Unmark as switching. + $body.removeClass('is-switching'); + + // Window stuff. + $window + .scrollTop(0) + .triggerHandler('resize.flexbox-fix'); + + return; + + } + + // 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() { + + oldScrollPos = scrollPos; + scrollPos = $htmlbody.scrollTop(); + + }) + .on('hashchange', function() { + $window.scrollTop(oldScrollPos); + }); + + } + + // 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/js/util.js b/assets/js/util.js index ecf7b37..bdb8e9f 100644 --- a/assets/js/util.js +++ b/assets/js/util.js @@ -1,587 +1,587 @@ -(function($) { - - /** - * Generate an indented list of links from a nav. Meant for use with panel(). - * @return {jQuery} jQuery object. - */ - $.fn.navList = function() { - - var $this = $(this); - $a = $this.find('a'), - b = []; - - $a.each(function() { - - var $this = $(this), - indent = Math.max(0, $this.parents('li').length - 1), - href = $this.attr('href'), - target = $this.attr('target'); - - b.push( - '' + - '' + - $this.text() + - '' - ); - - }); - - return b.join(''); - - }; - - /** - * Panel-ify an element. - * @param {object} userConfig User config. - * @return {jQuery} jQuery object. - */ - $.fn.panel = function(userConfig) { - - // No elements? - if (this.length == 0) - return $this; - - // Multiple elements? - if (this.length > 1) { - - for (var i=0; i < this.length; i++) - $(this[i]).panel(userConfig); - - return $this; - - } - - // Vars. - var $this = $(this), - $body = $('body'), - $window = $(window), - id = $this.attr('id'), - config; - - // Config. - config = $.extend({ - - // Delay. - delay: 0, - - // Hide panel on link click. - hideOnClick: false, - - // Hide panel on escape keypress. - hideOnEscape: false, - - // Hide panel on swipe. - hideOnSwipe: false, - - // Reset scroll position on hide. - resetScroll: false, - - // Reset forms on hide. - resetForms: false, - - // Side of viewport the panel will appear. - side: null, - - // Target element for "class". - target: $this, - - // Class to toggle. - visibleClass: 'visible' - - }, userConfig); - - // Expand "target" if it's not a jQuery object already. - if (typeof config.target != 'jQuery') - config.target = $(config.target); - - // Panel. - - // Methods. - $this._hide = function(event) { - - // Already hidden? Bail. - if (!config.target.hasClass(config.visibleClass)) - return; - - // If an event was provided, cancel it. - if (event) { - - event.preventDefault(); - event.stopPropagation(); - - } - - // Hide. - config.target.removeClass(config.visibleClass); - - // Post-hide stuff. - window.setTimeout(function() { - - // Reset scroll position. - if (config.resetScroll) - $this.scrollTop(0); - - // Reset forms. - if (config.resetForms) - $this.find('form').each(function() { - this.reset(); - }); - - }, config.delay); - - }; - - // Vendor fixes. - $this - .css('-ms-overflow-style', '-ms-autohiding-scrollbar') - .css('-webkit-overflow-scrolling', 'touch'); - - // Hide on click. - if (config.hideOnClick) { - - $this.find('a') - .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); - - $this - .on('click', 'a', function(event) { - - var $a = $(this), - href = $a.attr('href'), - target = $a.attr('target'); - - if (!href || href == '#' || href == '' || href == '#' + id) - return; - - // Cancel original event. - event.preventDefault(); - event.stopPropagation(); - - // Hide panel. - $this._hide(); - - // Redirect to href. - window.setTimeout(function() { - - if (target == '_blank') - window.open(href); - else - window.location.href = href; - - }, config.delay + 10); - - }); - - } - - // Event: Touch stuff. - $this.on('touchstart', function(event) { - - $this.touchPosX = event.originalEvent.touches[0].pageX; - $this.touchPosY = event.originalEvent.touches[0].pageY; - - }) - - $this.on('touchmove', function(event) { - - if ($this.touchPosX === null - || $this.touchPosY === null) - return; - - var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, - diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, - th = $this.outerHeight(), - ts = ($this.get(0).scrollHeight - $this.scrollTop()); - - // Hide on swipe? - if (config.hideOnSwipe) { - - var result = false, - boundary = 20, - delta = 50; - - switch (config.side) { - - case 'left': - result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); - break; - - case 'right': - result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); - break; - - case 'top': - result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); - break; - - case 'bottom': - result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); - break; - - default: - break; - - } - - if (result) { - - $this.touchPosX = null; - $this.touchPosY = null; - $this._hide(); - - return false; - - } - - } - - // Prevent vertical scrolling past the top or bottom. - if (($this.scrollTop() < 0 && diffY < 0) - || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { - - event.preventDefault(); - event.stopPropagation(); - - } - - }); - - // Event: Prevent certain events inside the panel from bubbling. - $this.on('click touchend touchstart touchmove', function(event) { - event.stopPropagation(); - }); - - // Event: Hide panel if a child anchor tag pointing to its ID is clicked. - $this.on('click', 'a[href="#' + id + '"]', function(event) { - - event.preventDefault(); - event.stopPropagation(); - - config.target.removeClass(config.visibleClass); - - }); - - // Body. - - // Event: Hide panel on body click/tap. - $body.on('click touchend', function(event) { - $this._hide(event); - }); - - // Event: Toggle. - $body.on('click', 'a[href="#' + id + '"]', function(event) { - - event.preventDefault(); - event.stopPropagation(); - - config.target.toggleClass(config.visibleClass); - - }); - - // Window. - - // Event: Hide on ESC. - if (config.hideOnEscape) - $window.on('keydown', function(event) { - - if (event.keyCode == 27) - $this._hide(event); - - }); - - return $this; - - }; - - /** - * Apply "placeholder" attribute polyfill to one or more forms. - * @return {jQuery} jQuery object. - */ - $.fn.placeholder = function() { - - // Browser natively supports placeholders? Bail. - if (typeof (document.createElement('input')).placeholder != 'undefined') - return $(this); - - // No elements? - if (this.length == 0) - return $this; - - // Multiple elements? - if (this.length > 1) { - - for (var i=0; i < this.length; i++) - $(this[i]).placeholder(); - - return $this; - - } - - // Vars. - var $this = $(this); - - // Text, TextArea. - $this.find('input[type=text],textarea') - .each(function() { - - var i = $(this); - - if (i.val() == '' - || i.val() == i.attr('placeholder')) - i - .addClass('polyfill-placeholder') - .val(i.attr('placeholder')); - - }) - .on('blur', function() { - - var i = $(this); - - if (i.attr('name').match(/-polyfill-field$/)) - return; - - if (i.val() == '') - i - .addClass('polyfill-placeholder') - .val(i.attr('placeholder')); - - }) - .on('focus', function() { - - var i = $(this); - - if (i.attr('name').match(/-polyfill-field$/)) - return; - - if (i.val() == i.attr('placeholder')) - i - .removeClass('polyfill-placeholder') - .val(''); - - }); - - // Password. - $this.find('input[type=password]') - .each(function() { - - var i = $(this); - var x = $( - $('
') - .append(i.clone()) - .remove() - .html() - .replace(/type="password"/i, 'type="text"') - .replace(/type=password/i, 'type=text') - ); - - if (i.attr('id') != '') - x.attr('id', i.attr('id') + '-polyfill-field'); - - if (i.attr('name') != '') - x.attr('name', i.attr('name') + '-polyfill-field'); - - x.addClass('polyfill-placeholder') - .val(x.attr('placeholder')).insertAfter(i); - - if (i.val() == '') - i.hide(); - else - x.hide(); - - i - .on('blur', function(event) { - - event.preventDefault(); - - var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); - - if (i.val() == '') { - - i.hide(); - x.show(); - - } - - }); - - x - .on('focus', function(event) { - - event.preventDefault(); - - var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']'); - - x.hide(); - - i - .show() - .focus(); - - }) - .on('keypress', function(event) { - - event.preventDefault(); - x.val(''); - - }); - - }); - - // Events. - $this - .on('submit', function() { - - $this.find('input[type=text],input[type=password],textarea') - .each(function(event) { - - var i = $(this); - - if (i.attr('name').match(/-polyfill-field$/)) - i.attr('name', ''); - - if (i.val() == i.attr('placeholder')) { - - i.removeClass('polyfill-placeholder'); - i.val(''); - - } - - }); - - }) - .on('reset', function(event) { - - event.preventDefault(); - - $this.find('select') - .val($('option:first').val()); - - $this.find('input,textarea') - .each(function() { - - var i = $(this), - x; - - i.removeClass('polyfill-placeholder'); - - switch (this.type) { - - case 'submit': - case 'reset': - break; - - case 'password': - i.val(i.attr('defaultValue')); - - x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); - - if (i.val() == '') { - i.hide(); - x.show(); - } - else { - i.show(); - x.hide(); - } - - break; - - case 'checkbox': - case 'radio': - i.attr('checked', i.attr('defaultValue')); - break; - - case 'text': - case 'textarea': - i.val(i.attr('defaultValue')); - - if (i.val() == '') { - i.addClass('polyfill-placeholder'); - i.val(i.attr('placeholder')); - } - - break; - - default: - i.val(i.attr('defaultValue')); - break; - - } - }); - - }); - - return $this; - - }; - - /** - * Moves elements to/from the first positions of their respective parents. - * @param {jQuery} $elements Elements (or selector) to move. - * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations. - */ - $.prioritize = function($elements, condition) { - - var key = '__prioritize'; - - // Expand $elements if it's not already a jQuery object. - if (typeof $elements != 'jQuery') - $elements = $($elements); - - // Step through elements. - $elements.each(function() { - - var $e = $(this), $p, - $parent = $e.parent(); - - // No parent? Bail. - if ($parent.length == 0) - return; - - // Not moved? Move it. - if (!$e.data(key)) { - - // Condition is false? Bail. - if (!condition) - return; - - // Get placeholder (which will serve as our point of reference for when this element needs to move back). - $p = $e.prev(); - - // Couldn't find anything? Means this element's already at the top, so bail. - if ($p.length == 0) - return; - - // Move element to top of parent. - $e.prependTo($parent); - - // Mark element as moved. - $e.data(key, $p); - - } - - // Moved already? - else { - - // Condition is true? Bail. - if (condition) - return; - - $p = $e.data(key); - - // Move element back to its original location (using our placeholder). - $e.insertAfter($p); - - // Unmark element as moved. - $e.removeData(key); - - } - - }); - - }; - +(function($) { + + /** + * Generate an indented list of links from a nav. Meant for use with panel(). + * @return {jQuery} jQuery object. + */ + $.fn.navList = function() { + + var $this = $(this); + $a = $this.find('a'), + b = []; + + $a.each(function() { + + var $this = $(this), + indent = Math.max(0, $this.parents('li').length - 1), + href = $this.attr('href'), + target = $this.attr('target'); + + b.push( + '' + + '' + + $this.text() + + '' + ); + + }); + + return b.join(''); + + }; + + /** + * Panel-ify an element. + * @param {object} userConfig User config. + * @return {jQuery} jQuery object. + */ + $.fn.panel = function(userConfig) { + + // No elements? + if (this.length == 0) + return $this; + + // Multiple elements? + if (this.length > 1) { + + for (var i=0; i < this.length; i++) + $(this[i]).panel(userConfig); + + return $this; + + } + + // Vars. + var $this = $(this), + $body = $('body'), + $window = $(window), + id = $this.attr('id'), + config; + + // Config. + config = $.extend({ + + // Delay. + delay: 0, + + // Hide panel on link click. + hideOnClick: false, + + // Hide panel on escape keypress. + hideOnEscape: false, + + // Hide panel on swipe. + hideOnSwipe: false, + + // Reset scroll position on hide. + resetScroll: false, + + // Reset forms on hide. + resetForms: false, + + // Side of viewport the panel will appear. + side: null, + + // Target element for "class". + target: $this, + + // Class to toggle. + visibleClass: 'visible' + + }, userConfig); + + // Expand "target" if it's not a jQuery object already. + if (typeof config.target != 'jQuery') + config.target = $(config.target); + + // Panel. + + // Methods. + $this._hide = function(event) { + + // Already hidden? Bail. + if (!config.target.hasClass(config.visibleClass)) + return; + + // If an event was provided, cancel it. + if (event) { + + event.preventDefault(); + event.stopPropagation(); + + } + + // Hide. + config.target.removeClass(config.visibleClass); + + // Post-hide stuff. + window.setTimeout(function() { + + // Reset scroll position. + if (config.resetScroll) + $this.scrollTop(0); + + // Reset forms. + if (config.resetForms) + $this.find('form').each(function() { + this.reset(); + }); + + }, config.delay); + + }; + + // Vendor fixes. + $this + .css('-ms-overflow-style', '-ms-autohiding-scrollbar') + .css('-webkit-overflow-scrolling', 'touch'); + + // Hide on click. + if (config.hideOnClick) { + + $this.find('a') + .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); + + $this + .on('click', 'a', function(event) { + + var $a = $(this), + href = $a.attr('href'), + target = $a.attr('target'); + + if (!href || href == '#' || href == '' || href == '#' + id) + return; + + // Cancel original event. + event.preventDefault(); + event.stopPropagation(); + + // Hide panel. + $this._hide(); + + // Redirect to href. + window.setTimeout(function() { + + if (target == '_blank') + window.open(href); + else + window.location.href = href; + + }, config.delay + 10); + + }); + + } + + // Event: Touch stuff. + $this.on('touchstart', function(event) { + + $this.touchPosX = event.originalEvent.touches[0].pageX; + $this.touchPosY = event.originalEvent.touches[0].pageY; + + }) + + $this.on('touchmove', function(event) { + + if ($this.touchPosX === null + || $this.touchPosY === null) + return; + + var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, + diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, + th = $this.outerHeight(), + ts = ($this.get(0).scrollHeight - $this.scrollTop()); + + // Hide on swipe? + if (config.hideOnSwipe) { + + var result = false, + boundary = 20, + delta = 50; + + switch (config.side) { + + case 'left': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); + break; + + case 'right': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); + break; + + case 'top': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); + break; + + case 'bottom': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); + break; + + default: + break; + + } + + if (result) { + + $this.touchPosX = null; + $this.touchPosY = null; + $this._hide(); + + return false; + + } + + } + + // Prevent vertical scrolling past the top or bottom. + if (($this.scrollTop() < 0 && diffY < 0) + || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { + + event.preventDefault(); + event.stopPropagation(); + + } + + }); + + // Event: Prevent certain events inside the panel from bubbling. + $this.on('click touchend touchstart touchmove', function(event) { + event.stopPropagation(); + }); + + // Event: Hide panel if a child anchor tag pointing to its ID is clicked. + $this.on('click', 'a[href="#' + id + '"]', function(event) { + + event.preventDefault(); + event.stopPropagation(); + + config.target.removeClass(config.visibleClass); + + }); + + // Body. + + // Event: Hide panel on body click/tap. + $body.on('click touchend', function(event) { + $this._hide(event); + }); + + // Event: Toggle. + $body.on('click', 'a[href="#' + id + '"]', function(event) { + + event.preventDefault(); + event.stopPropagation(); + + config.target.toggleClass(config.visibleClass); + + }); + + // Window. + + // Event: Hide on ESC. + if (config.hideOnEscape) + $window.on('keydown', function(event) { + + if (event.keyCode == 27) + $this._hide(event); + + }); + + return $this; + + }; + + /** + * Apply "placeholder" attribute polyfill to one or more forms. + * @return {jQuery} jQuery object. + */ + $.fn.placeholder = function() { + + // Browser natively supports placeholders? Bail. + if (typeof (document.createElement('input')).placeholder != 'undefined') + return $(this); + + // No elements? + if (this.length == 0) + return $this; + + // Multiple elements? + if (this.length > 1) { + + for (var i=0; i < this.length; i++) + $(this[i]).placeholder(); + + return $this; + + } + + // Vars. + var $this = $(this); + + // Text, TextArea. + $this.find('input[type=text],textarea') + .each(function() { + + var i = $(this); + + if (i.val() == '' + || i.val() == i.attr('placeholder')) + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); + + }) + .on('blur', function() { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + return; + + if (i.val() == '') + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); + + }) + .on('focus', function() { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + return; + + if (i.val() == i.attr('placeholder')) + i + .removeClass('polyfill-placeholder') + .val(''); + + }); + + // Password. + $this.find('input[type=password]') + .each(function() { + + var i = $(this); + var x = $( + $('
') + .append(i.clone()) + .remove() + .html() + .replace(/type="password"/i, 'type="text"') + .replace(/type=password/i, 'type=text') + ); + + if (i.attr('id') != '') + x.attr('id', i.attr('id') + '-polyfill-field'); + + if (i.attr('name') != '') + x.attr('name', i.attr('name') + '-polyfill-field'); + + x.addClass('polyfill-placeholder') + .val(x.attr('placeholder')).insertAfter(i); + + if (i.val() == '') + i.hide(); + else + x.hide(); + + i + .on('blur', function(event) { + + event.preventDefault(); + + var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); + + if (i.val() == '') { + + i.hide(); + x.show(); + + } + + }); + + x + .on('focus', function(event) { + + event.preventDefault(); + + var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']'); + + x.hide(); + + i + .show() + .focus(); + + }) + .on('keypress', function(event) { + + event.preventDefault(); + x.val(''); + + }); + + }); + + // Events. + $this + .on('submit', function() { + + $this.find('input[type=text],input[type=password],textarea') + .each(function(event) { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + i.attr('name', ''); + + if (i.val() == i.attr('placeholder')) { + + i.removeClass('polyfill-placeholder'); + i.val(''); + + } + + }); + + }) + .on('reset', function(event) { + + event.preventDefault(); + + $this.find('select') + .val($('option:first').val()); + + $this.find('input,textarea') + .each(function() { + + var i = $(this), + x; + + i.removeClass('polyfill-placeholder'); + + switch (this.type) { + + case 'submit': + case 'reset': + break; + + case 'password': + i.val(i.attr('defaultValue')); + + x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); + + if (i.val() == '') { + i.hide(); + x.show(); + } + else { + i.show(); + x.hide(); + } + + break; + + case 'checkbox': + case 'radio': + i.attr('checked', i.attr('defaultValue')); + break; + + case 'text': + case 'textarea': + i.val(i.attr('defaultValue')); + + if (i.val() == '') { + i.addClass('polyfill-placeholder'); + i.val(i.attr('placeholder')); + } + + break; + + default: + i.val(i.attr('defaultValue')); + break; + + } + }); + + }); + + return $this; + + }; + + /** + * Moves elements to/from the first positions of their respective parents. + * @param {jQuery} $elements Elements (or selector) to move. + * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations. + */ + $.prioritize = function($elements, condition) { + + var key = '__prioritize'; + + // Expand $elements if it's not already a jQuery object. + if (typeof $elements != 'jQuery') + $elements = $($elements); + + // Step through elements. + $elements.each(function() { + + var $e = $(this), $p, + $parent = $e.parent(); + + // No parent? Bail. + if ($parent.length == 0) + return; + + // Not moved? Move it. + if (!$e.data(key)) { + + // Condition is false? Bail. + if (!condition) + return; + + // Get placeholder (which will serve as our point of reference for when this element needs to move back). + $p = $e.prev(); + + // Couldn't find anything? Means this element's already at the top, so bail. + if ($p.length == 0) + return; + + // Move element to top of parent. + $e.prependTo($parent); + + // Mark element as moved. + $e.data(key, $p); + + } + + // Moved already? + else { + + // Condition is true? Bail. + if (condition) + return; + + $p = $e.data(key); + + // Move element back to its original location (using our placeholder). + $e.insertAfter($p); + + // Unmark element as moved. + $e.removeData(key); + + } + + }); + + }; + })(jQuery); \ No newline at end of file diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss index a4eb57d..2c33426 100644 --- a/assets/sass/base/_page.scss +++ b/assets/sass/base/_page.scss @@ -1,78 +1,42 @@ -@import '../libs/vars'; -@import '../libs/functions'; -@import '../libs/mixins'; - -/// -/// Identity by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Basic */ - - // Ensures page width is always >=320px. - @include breakpoint(xsmall) { - html, body { - min-width: 320px; - } - } - - body { - - // Prevents animation/transition "flicker" on page load. - // Automatically added/removed by js/main.js. - &.is-loading { - *, *:before, *:after { - @include vendor('animation', 'none !important'); - @include vendor('transition', 'none !important'); - } - } - - } - - html { - height: 100%; - } - - body { - height: 100%; - background-color: _palette(bg); - @include vendor('background-image', ( - 'url("images/overlay.png")', - 'linear-gradient(60deg, #{transparentize(_palette(accent1), 0.5)} 5%, #{transparentize(_palette(accent2), 0.65)})', - 'url("../../images/bg.jpg")' - )); - background-repeat: repeat, no-repeat, no-repeat; - background-size: 100px 100px, cover, cover; - background-position: top left, center center, bottom center; - background-attachment: fixed, fixed, fixed; - - &:after { - content: ''; - display: block; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: inherit; - opacity: 0; - z-index: 1; - - background-color: _palette(bg); - @include vendor('background-image', ( - 'url("images/overlay.png")', - 'linear-gradient(60deg, #{transparentize(_palette(accent1), 0.5)} 5%, #{transparentize(_palette(accent2), 0.65)})' - )); - background-repeat: repeat, no-repeat; - background-size: 100px 100px, cover; - background-position: top left, center center; - - @include vendor('transition', 'opacity #{_duration(bg)} ease-out'); - } - - &.is-loading { - &:after { - opacity: 1; - } - } +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Basic */ + + // MSIE: Required for IEMobile. + @-ms-viewport { + width: device-width; + } + + // Ensures page width is always >=320px. + @include breakpoint('<=xsmall') { + html, body { + min-width: 320px; + } + } + + // Set box model to border-box. + // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice + html { + box-sizing: border-box; + } + + *, *:before, *:after { + box-sizing: inherit; + } + + body { + background: _palette(bg); + + // Stops initial animations until page loads. + &.is-preload { + *, *:before, *:after { + @include vendor('animation', 'none !important'); + @include vendor('transition', 'none !important'); + } + } + } \ No newline at end of file diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss new file mode 100644 index 0000000..ddcf73e --- /dev/null +++ b/assets/sass/base/_reset.scss @@ -0,0 +1,76 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +// Reset. +// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain) + + html, body, div, span, applet, object, + iframe, h1, h2, h3, h4, h5, h6, p, blockquote, + pre, a, abbr, acronym, address, big, cite, + code, del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, b, + u, i, center, dl, dt, dd, ol, ul, li, fieldset, + form, label, legend, table, caption, tbody, + tfoot, thead, tr, th, td, article, aside, + canvas, details, embed, figure, figcaption, + footer, header, hgroup, menu, nav, output, ruby, + section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + + body { + line-height: 1; + } + + ol, ul { + list-style:none; + } + + blockquote, q { + quotes: none; + + &:before, + &:after { + content: ''; + content: none; + } + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + body { + -webkit-text-size-adjust: none; + } + + mark { + background-color: transparent; + color: inherit; + } + + input::-moz-focus-inner { + border: 0; + padding: 0; + } + + input, select, textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + } \ No newline at end of file diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss index a9ef65e..bc9b7cc 100644 --- a/assets/sass/base/_typography.scss +++ b/assets/sass/base/_typography.scss @@ -1,123 +1,183 @@ -@import '../libs/vars'; -@import '../libs/functions'; -@import '../libs/mixins'; - -/// -/// Identity by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Type */ - - body, input, select, textarea { - color: _palette(fg); - font-family: _font(family); - font-size: 14pt; - font-weight: _font(weight); - line-height: 2; - letter-spacing: _size(letter-spacing); - text-transform: uppercase; - - @include breakpoint(xlarge) { - font-size: 11pt; - } - - @include breakpoint(xsmall) { - font-size: 10pt; - line-height: 1.75; - } - } - - a { - @include vendor('transition', ( - 'color #{_duration(transition)} ease', - 'border-color #{_duration(transition)} ease' - )); - color: inherit; - text-decoration: none; - - &:before { - @include vendor('transition', ( - 'color #{_duration(transition)} ease', - 'text-shadow #{_duration(transition)} ease' - )); - } - - &:hover { - color: _palette(highlight); - } - } - - strong, b { - color: _palette(fg-bold); - } - - em, i { - font-style: italic; - } - - p { - margin: 0 0 _size(element-margin) 0; - } - - h1, h2, h3, h4, h5, h6 { - color: _palette(fg-bold); - line-height: 1.5; - margin: 0 0 (_size(element-margin) * 0.5) 0; - - a { - color: inherit; - text-decoration: none; - } - } - - h1 { - font-size: 1.85em; - letter-spacing: (_size(letter-spacing) * 1.1); - margin: 0 0 (_size(element-margin) * 0.35) 0; - } - - h2 { - font-size: 1.25em; - } - - h3 { - font-size: 1em; - } - - h4 { - font-size: 1em; - } - - h5 { - font-size: 1em; - } - - h6 { - font-size: 1em; - } - - @include breakpoint(xsmall) { - h1 { - font-size: 1.65em; - } - } - - sub { - font-size: 0.8em; - position: relative; - top: 0.5em; - } - - sup { - font-size: 0.8em; - position: relative; - top: -0.5em; - } - - hr { - border: 0; - border-bottom: solid _size(border-width) _palette(border); - margin: (_size(element-margin) * 2) 0; +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Type */ + + html { + font-size: 16pt; + + @include breakpoint('<=xlarge') { + font-size: 12pt; + } + + @include breakpoint('<=small') { + font-size: 11pt; + } + + @include breakpoint('<=xxsmall') { + font-size: 10pt; + } + } + + body, input, select, textarea { + color: _palette(fg); + font-family: _font(family); + font-weight: _font(weight); + font-size: 1rem; + line-height: 1.65; + } + + 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-bottom: dotted 1px _palette(fg-light); + text-decoration: none; + color: inherit; + + &:hover { + border-bottom-color: transparent; + } + } + + strong, b { + color: _palette(fg-bold); + font-weight: _font(weight-bold); + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 _size(element-margin) 0; + } + + h1, h2, h3, h4, h5, h6 { + color: _palette(fg-bold); + font-weight: _font(weight-bold); + line-height: 1.5; + margin: 0 0 (_size(element-margin) * 0.5) 0; + text-transform: uppercase; + letter-spacing: _font(letter-spacing); + + a { + 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); + } + + h2 { + font-size: 1.5rem; + line-height: 1.4; + letter-spacing: _font(letter-spacing-heading); + } + + h3 { + font-size: 1rem; + } + + h4 { + font-size: 0.8rem; + } + + h5 { + font-size: 0.7rem; + } + + 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; + } + } + + sub { + font-size: 0.8rem; + position: relative; + top: 0.5rem; + } + + sup { + font-size: 0.8rem; + position: relative; + top: -0.5rem; + } + + blockquote { + border-left: solid (_size(border-width) * 4) _palette(border); + font-style: italic; + margin: 0 0 _size(element-margin) 0; + padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); + } + + code { + background: _palette(border-bg); + border-radius: _size(border-radius); + font-family: _font(family-fixed); + font-size: 0.9rem; + margin: 0 0.25rem; + padding: 0.25rem 0.65rem; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: _font(family-fixed); + font-size: 0.9rem; + margin: 0 0 _size(element-margin) 0; + + code { + display: block; + line-height: 1.75; + padding: 1rem 1.5rem; + overflow-x: auto; + } + } + + hr { + border: 0; + border-bottom: solid _size(border-width) _palette(border); + margin: (_size(element-margin) * 1.375) 0; + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; } \ No newline at end of file diff --git a/assets/sass/components/_actions.scss b/assets/sass/components/_actions.scss new file mode 100644 index 0000000..c3605a0 --- /dev/null +++ b/assets/sass/components/_actions.scss @@ -0,0 +1,101 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Actions */ + + ul.actions { + @include vendor('display', 'flex'); + cursor: default; + list-style: none; + margin-left: (_size(element-margin) * -0.5); + padding-left: 0; + + li { + padding: 0 0 0 (_size(element-margin) * 0.5); + vertical-align: middle; + } + + &.special { + @include vendor('justify-content', 'center'); + width: 100%; + margin-left: 0; + + li { + &:first-child { + padding-left: 0; + } + } + } + + &.stacked { + @include vendor('flex-direction', 'column'); + margin-left: 0; + + li { + padding: (_size(element-margin) * 0.65) 0 0 0; + + &:first-child { + padding-top: 0; + } + } + } + + &.fit { + width: calc(100% + #{_size(element-margin) * 0.5}); + + li { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + width: 100%; + + > * { + width: 100%; + } + } + + &.stacked { + width: 100%; + } + } + + @include breakpoint('<=xsmall') { + &:not(.fixed) { + @include vendor('flex-direction', 'column'); + margin-left: 0; + width: 100% !important; + + li { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + padding: (_size(element-margin) * 0.5) 0 0 0; + text-align: center; + width: 100%; + + > * { + width: 100%; + } + + &:first-child { + padding-top: 0; + } + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + width: 100%; + + &.icon { + &:before { + margin-left: -0.5em; + } + } + } + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_box.scss b/assets/sass/components/_box.scss new file mode 100644 index 0000000..ec5ab0d --- /dev/null +++ b/assets/sass/components/_box.scss @@ -0,0 +1,26 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Box */ + + .box { + border-radius: _size(border-radius); + border: solid _size(border-width) _palette(border); + margin-bottom: _size(element-margin); + padding: 1.5em; + + > :last-child, + > :last-child > :last-child, + > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + &.alt { + border: 0; + border-radius: 0; + padding: 0; + } + } \ No newline at end of file diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss index c7499c9..61fe069 100644 --- a/assets/sass/components/_button.scss +++ b/assets/sass/components/_button.scss @@ -1,69 +1,84 @@ -@import '../libs/vars'; -@import '../libs/functions'; -@import '../libs/mixins'; - -/// -/// Identity by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Button */ - - input[type="submit"], - input[type="reset"], - input[type="button"], - button, - .button { - @include vendor('appearance', 'none'); - @include vendor('transition', ( - 'background-color #{_duration(transition)} ease-in-out', - 'border-color #{_duration(transition)} ease-in-out', - 'color #{_duration(transition)} ease-in-out' - )); - display: inline-block; - height: _size(element-height); - line-height: _size(element-height); - padding: 0 1.5em; - background-color: transparent; - border-radius: _size(border-radius); - border: solid 1px _palette(border); - color: _palette(fg) !important; - cursor: pointer; - text-align: center; - text-decoration: none; - white-space: nowrap; - - &:hover { - border-color: _palette(highlight); - color: _palette(highlight) !important; - } - - &.icon { - padding-left: 1.35em; - - &:before { - margin-right: 0.5em; - } - } - - &.fit { - display: block; - width: 100%; - margin: 0 0 (_size(element-margin) * 0.5) 0; - } - - &.small { - font-size: 0.8em; - } - - &.big { - font-size: 1.35em; - } - - &.disabled, - &:disabled { - @include vendor('pointer-events', 'none'); - opacity: 0.5; - } +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + 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); + border: 0; + box-shadow: inset 0 0 0 _size(border-width) _palette(border); + color: _palette(fg-bold) !important; + cursor: pointer; + display: inline-block; + 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)); + 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; + } + } + + &.fit { + width: 100%; + } + + &.small { + font-size: 0.6rem; + height: (_size(element-height) * 0.75); + line-height: (_size(element-height) * 0.75); + } + + &.primary { + background-color: _palette(fg-bold); + color: _palette(bg) !important; + font-weight: _font(weight-bold); + + &:hover { + } + + &:active { + } + } + + &.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 diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss index 5b1238e..fdae12e 100644 --- a/assets/sass/components/_form.scss +++ b/assets/sass/components/_form.scss @@ -1,181 +1,252 @@ -@import '../libs/vars'; -@import '../libs/functions'; -@import '../libs/mixins'; - -/// -/// Identity by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Form */ - - form { - margin: 0 0 _size(element-margin) 0; - - > .field { - margin: 0 0 _size(element-margin) 0; - - > :last-child { - margin-bottom: 0; - } - } - } - - label { - color: _palette(fg-bold); - display: block; - font-size: 0.9em; - margin: 0 0 (_size(element-margin) * 0.5) 0; - } - - input[type="text"], - input[type="password"], - input[type="email"], - input[type="tel"], - select, - textarea { - @include vendor('appearance', 'none'); - border-radius: _size(border-radius); - border: solid 1px _palette(border); - color: inherit; - display: block; - outline: 0; - padding: 0 1em; - text-decoration: none; - width: 100%; - - &:invalid { - box-shadow: none; - } - - &:focus { - border-color: _palette(highlight); - } - } - - .select-wrapper { - @include icon('\f078'); - display: block; - position: relative; - - &:before { - color: _palette(border); - display: block; - height: _size(element-height); - line-height: _size(element-height); - pointer-events: none; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: _size(element-height); - } - - select::-ms-expand { - display: none; - } - } - - input[type="text"], - input[type="password"], - input[type="email"], - select { - height: _size(element-height); - } - - textarea { - padding: 0.75em 1em; - } - - input[type="checkbox"], - input[type="radio"], { - @include vendor('appearance', 'none'); - display: block; - float: left; - margin-right: -2em; - opacity: 0; - width: 1em; - z-index: -1; - - & + label { - @include icon; - color: _palette(fg); - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: _font(weight); - padding-left: (_size(element-height) * 0.6) + 0.75em; - padding-right: 0.75em; - position: relative; - - &:before { - background: _palette(border-bg); - border-radius: _size(border-radius); - border: solid 1px _palette(border); - content: ''; - display: inline-block; - height: (_size(element-height) * 0.6); - left: 0; - line-height: (_size(element-height) * 0.575); - position: absolute; - text-align: center; - top: 0.15em; - width: (_size(element-height) * 0.6); - } - } - - &:checked + label { - &:before { - color: _palette(highlight); - content: '\f00c'; - } - } - - &:focus + label { - &:before { - border-color: _palette(highlight); - } - } - } - - input[type="checkbox"] { - & + label { - &:before { - border-radius: _size(border-radius); - } - } - } - - input[type="radio"] { - & + label { - &:before { - border-radius: 100%; - } - } - } - - ::-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; +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Form */ + + form { + margin: 0 0 _size(element-margin) 0; + + > :last-child { + margin-bottom: 0; + } + + > .fields { + $gutter: (_size(element-margin) * 0.75); + + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + width: calc(100% + #{$gutter * 2}); + margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); + + > .field { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + padding: $gutter 0 0 $gutter; + width: calc(100% - #{$gutter * 1}); + + &.half { + width: calc(50% - #{$gutter * 0.5}); + } + + &.third { + width: calc(#{100% / 3} - #{$gutter * (1 / 3)}); + } + + &.quarter { + width: calc(25% - #{$gutter * 0.25}); + } + } + } + + @include breakpoint('<=xsmall') { + > .fields { + $gutter: (_size(element-margin) * 0.75); + + width: calc(100% + #{$gutter * 2}); + margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); + + > .field { + padding: $gutter 0 0 $gutter; + width: calc(100% - #{$gutter * 1}); + + &.half { + width: calc(100% - #{$gutter * 1}); + } + + &.third { + width: calc(100% - #{$gutter * 1}); + } + + &.quarter { + width: calc(100% - #{$gutter * 1}); + } + } + } + } + } + + label { + color: _palette(fg-bold); + display: block; + font-size: 0.8rem; + font-weight: _font(weight); + letter-spacing: _font(letter-spacing); + line-height: 1.5; + margin: 0 0 (_size(element-margin) * 0.5) 0; + text-transform: uppercase; + } + + 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); + color: inherit; + display: block; + outline: 0; + padding: 0 1rem; + text-decoration: none; + width: 100%; + + &: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; + height: _size(element-height); + padding-right: _size(element-height); + text-overflow: ellipsis; + + option { + color: _palette(fg); + background: _palette(bg); + } + + &:focus { + &::-ms-value { + background-color: transparent; + } + } + + &::-ms-expand { + display: none; + } + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: _size(element-height); + } + + textarea { + padding: 0.75rem 1rem; + } + + input[type="checkbox"], + input[type="radio"], { + @include vendor('appearance', 'none'); + display: block; + float: left; + margin-right: -2rem; + opacity: 0; + width: 1rem; + z-index: -1; + + & + label { + @include icon(false, solid); + @include vendor('user-select', 'none'); + color: _palette(fg); + cursor: pointer; + display: inline-block; + font-size: 0.8rem; + 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; + 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); + content: ''; + display: inline-block; + height: (_size(element-height) * 0.6); + left: 0; + line-height: (_size(element-height) * 0.6); + //line-height: calc(#{_size(element-height) * 0.6} + 0em); + position: absolute; + text-align: center; + top: -0.15rem; + 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); + } + } + } + + input[type="radio"] { + & + label { + &:before { + border-radius: 100%; + } + } + } + + ::-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 diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss index 13d22d2..4726114 100644 --- a/assets/sass/components/_icon.scss +++ b/assets/sass/components/_icon.scss @@ -1,21 +1,33 @@ -@import '../libs/vars'; -@import '../libs/functions'; -@import '../libs/mixins'; - -/// -/// Identity by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Icon */ - - .icon { - @include icon; - position: relative; - border-bottom: none; - - > .label { - display: none; - } +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Icon */ + + .icon { + @include icon; + border-bottom: none; + position: relative; + + > .label { + display: none; + } + + &:before { + line-height: inherit; + } + + &.solid { + &:before { + font-weight: 900; + } + } + + &.brands { + &:before { + font-family: 'Font Awesome 5 Brands'; + } + } } \ No newline at end of file diff --git a/assets/sass/components/_icons.scss b/assets/sass/components/_icons.scss new file mode 100644 index 0000000..f096a32 --- /dev/null +++ b/assets/sass/components/_icons.scss @@ -0,0 +1,40 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Icons */ + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 0.75em 0 0; + + &: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); + } + + &:active { + background-color: _palette(border-bg-alt); + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss new file mode 100644 index 0000000..ed94ed7 --- /dev/null +++ b/assets/sass/components/_image.scss @@ -0,0 +1,87 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Image */ + + .image { + border-radius: _size(border-radius); + border: 0; + 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; + } + + &.left, + &.right { + max-width: 40%; + + img { + width: 100%; + } + } + + &.left { + float: left; + padding: 0 1.5em 1em 0; + top: 0.25em; + } + + &.right { + float: right; + padding: 0 0 1em 1.5em; + top: 0.25em; + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + + &.main { + display: block; + margin: (_size(element-margin) * 1.25) 0; + width: 100%; + + img { + width: 100%; + } + } + + @include breakpoint('<=small') { + &.main { + margin: (_size(element-margin) * 1) 0; + } + } + + @include breakpoint('<=xsmall') { + &.main { + margin: (_size(element-margin) * 0.75) 0; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss index d4aead9..1b384c2 100644 --- a/assets/sass/components/_list.scss +++ b/assets/sass/components/_list.scss @@ -1,129 +1,56 @@ -@import '../libs/vars'; -@import '../libs/functions'; -@import '../libs/mixins'; - -/// -/// Identity by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* List */ - - ol { - list-style: decimal; - margin: 0 0 _size(element-margin) 0; - padding-left: 1.25em; - - li { - padding-left: 0.25em; - } - } - - ul { - list-style: disc; - margin: 0 0 _size(element-margin) 0; - padding-left: 1em; - - li { - padding-left: 0.5em; - } - - &.alt { - list-style: none; - padding-left: 0; - - li { - border-top: solid 1px _palette(border); - padding: 0.5em 0; - - &:first-child { - border-top: 0; - padding-top: 0; - } - } - } - - &.icons { - cursor: default; - list-style: none; - padding-left: 0; - margin-top: -0.675em; - - li { - display: inline-block; - padding: 0.675em 0.5em; - - a { - @include icon-alt(false, true); - position: relative; - display: block; - width: 3.75em; - height: 3.75em; - border-radius: 100%; - border: solid _size(border-width) _palette(border); - line-height: 3.75em; - overflow: hidden; - text-align: center; - text-indent: 3.75em; - white-space: nowrap; - - &:before { - position: absolute; - top: 0; - left: 0; - width: inherit; - height: inherit; - font-size: 1.85rem; - line-height: inherit; - text-align: center; - text-indent: 0; - } - - &:hover { - border-color: _palette(highlight); - } - } - } - - @include breakpoint(xsmall) { - li { - a { - &:before { - font-size: 1.5rem; - } - } - } - } - } - - &.actions { - cursor: default; - list-style: none; - padding-left: 0; - - li { - display: inline-block; - padding: 0 (_size(element-margin) * 0.5) 0 0; - vertical-align: middle; - - &:last-child { - padding-right: 0; - } - } - } - } - - dl { - margin: 0 0 _size(element-margin) 0; - - dt { - display: block; - font-weight: _font(weight-bold); - margin: 0 0 (_size(element-margin) * 0.5) 0; - } - - dd { - margin-left: _size(element-margin); - } +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 _size(element-margin) 0; + padding-left: 1.25em; + + li { + padding-left: 0.25em; + } + } + + ul { + list-style: disc; + margin: 0 0 _size(element-margin) 0; + padding-left: 1em; + + li { + padding-left: 0.5em; + } + + &.alt { + list-style: none; + padding-left: 0; + + li { + border-top: solid _size(border-width) _palette(border); + padding: 0.5em 0; + + &:first-child { + border-top: 0; + padding-top: 0; + } + } + } + } + + dl { + margin: 0 0 _size(element-margin) 0; + + dt { + display: block; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + dd { + margin-left: _size(element-margin); + } } \ No newline at end of file diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss new file mode 100644 index 0000000..0c51148 --- /dev/null +++ b/assets/sass/components/_table.scss @@ -0,0 +1,81 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 _size(element-margin) 0; + width: 100%; + + tbody { + tr { + border: solid _size(border-width) _palette(border); + border-left: 0; + border-right: 0; + + &:nth-child(2n + 1) { + background-color: _palette(border-bg); + } + } + } + + td { + padding: 0.75em 0.75em; + } + + th { + color: _palette(fg-bold); + font-size: 0.9em; + font-weight: _font(weight-bold); + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } + + thead { + border-bottom: solid (_size(border-width) * 2) _palette(border); + } + + tfoot { + border-top: solid (_size(border-width) * 2) _palette(border); + } + + &.alt { + border-collapse: separate; + + tbody { + tr { + td { + border: solid _size(border-width) _palette(border); + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: _size(border-width); + } + } + + &:first-child { + td { + border-top-width: _size(border-width); + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_bg.scss b/assets/sass/layout/_bg.scss new file mode 100644 index 0000000..ab1b8b6 --- /dev/null +++ b/assets/sass/layout/_bg.scss @@ -0,0 +1,68 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* BG */ + + #bg { + @include vendor('transform', 'scale(1.0)'); + -webkit-backface-visibility: hidden; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + z-index: 1; + + &:before, &:after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + &:before { + @include vendor('transition', 'background-color #{_duration(bg)} ease-in-out'); + @include vendor('transition-delay', '#{_duration(intro)}'); + background-image: linear-gradient(to top, #{_palette(bg-overlay)}, #{_palette(bg-overlay)}), + url('../../images/overlay.png'); + background-size: auto, + 256px 256px; + background-position: center, + center; + background-repeat: no-repeat, + repeat; + z-index: 2; + } + + &:after { + @include vendor('transform', 'scale(1.125)'); + @include vendor('transition', ( + 'transform #{_duration(article)} ease-in-out', + 'filter #{_duration(article)} ease-in-out' + )); + background-image: url('../../images/bg.jpg'); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + z-index: 1; + } + + body.is-article-visible & { + &:after { + @include vendor('transform', 'scale(1.0825)'); + @include vendor('filter', 'blur(0.2rem)'); + } + } + + body.is-preload & { + &:before { + background-color: _palette(bg-alt); + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss index e308164..b87cc7a 100644 --- a/assets/sass/layout/_footer.scss +++ b/assets/sass/layout/_footer.scss @@ -1,39 +1,37 @@ -@import '../libs/vars'; -@import '../libs/functions'; -@import '../libs/mixins'; - -/// -/// Identity by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Footer */ - - #footer { - @include vendor('align-self', 'flex-end'); - width: 100%; - padding: _size(element-margin) 0 0 0; - color: rgba(255,255,255,0.75); - cursor: default; - text-align: center; - - .copyright { - margin: 0; - padding: 0; - font-size: 0.9em; - list-style: none; - - li { - display: inline-block; - margin: 0 0 0 (0.85em - (_size(letter-spacing) * 2)); - padding: 0 0 0 0.85em; - border-left: solid _size(border-width) rgba(255,255,255,0.5); - line-height: 1; - - &:first-child { - border-left: 0; - } - } - } +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* 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; + text-align: center; + + .copyright { + letter-spacing: _font(letter-spacing); + font-size: 0.6rem; + opacity: 0.75; + margin-bottom: 0; + text-transform: uppercase; + } + + body.is-article-visible & { + @include vendor('transform', 'scale(0.95)'); + @include vendor('filter', 'blur(0.1rem)'); + opacity: 0; + } + + body.is-preload & { + opacity: 0; + } } \ No newline at end of file diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss new file mode 100644 index 0000000..52b3ce5 --- /dev/null +++ b/assets/sass/layout/_header.scss @@ -0,0 +1,261 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Header */ + + #header { + @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%; + 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; + } + } + + .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 { + border-style: solid; + border-color: _palette(border); + border-top-width: _size(border-width); + border-bottom-width: _size(border-width); + max-width: 100%; + + .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; + } + } + } + + @include breakpoint('<=medium') { + .content { + p { + br { + display: none; + } + } + } + } + + @include breakpoint('<=small') { + > * { + margin-top: 2rem; + + &:before { + top: calc(-2rem - 1px); + height: calc(2rem + 1px); + } + } + + .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; + } + } + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss index e9f65bf..0588446 100644 --- a/assets/sass/layout/_main.scss +++ b/assets/sass/layout/_main.scss @@ -1,74 +1,102 @@ -@import '../libs/vars'; -@import '../libs/functions'; -@import '../libs/mixins'; - -/// -/// Identity by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Main */ - - #main { - position: relative; - max-width: 100%; - min-width: 27em; - @include padding(4.5em, 3em); - - background: _palette(bg); - border-radius: _size(border-radius); - cursor: default; - opacity: 0.95; - text-align: center; - - @include vendor('transform-origin', '50% 50%'); - @include vendor('transform', 'rotateX(0deg)'); - @include vendor('transition', ( - 'opacity #{_duration(main)} ease', - 'transform #{_duration(main)} ease' - )); - - .avatar { - position: relative; - display: block; - margin-bottom: _size(element-margin); - - img { - display: block; - margin: 0 auto; - border-radius: 100%; - box-shadow: 0 0 0 1.5em _palette(bg); - } - - &:before { - content: ''; - display: block; - position: absolute; - top: 50%; - left: -3em; - width: calc(100% + 6em); - height: _size(border-width); - z-index: -1; - background: _palette(border); - } - } - - @include breakpoint(xsmall) { - min-width: 0; - width: 100%; - @include padding(4em, 2em); - - .avatar { - &:before { - left: -2em; - width: calc(100% + 4em); - } - } - } - - body.is-loading & { - opacity: 0; - @include vendor('transform', 'rotateX(15deg)'); - } +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* 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'); + 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; + } + + .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; + } + + &:hover { + &:before { + background-color: _palette(border-bg); + } + } + + &:active { + &:before { + background-color: _palette(border-bg-alt); + } + } + } + } + + @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; + } + } + } + } + + @include breakpoint('<=xsmall') { + article { + @include padding(2rem, 1.5rem, (1rem, 0, 0.5rem, 0)); + } + } } \ No newline at end of file diff --git a/assets/sass/layout/_wrapper.scss b/assets/sass/layout/_wrapper.scss index 684efb5..9a8c9ca 100644 --- a/assets/sass/layout/_wrapper.scss +++ b/assets/sass/layout/_wrapper.scss @@ -1,40 +1,36 @@ -@import '../libs/vars'; -@import '../libs/functions'; -@import '../libs/mixins'; - -/// -/// Identity by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Wrapper */ - - #wrapper { - @include vendor('display', 'flex'); - @include vendor('align-items', 'center'); - @include vendor('justify-content', 'space-between'); - @include vendor('flex-direction', 'column'); - @include vendor('perspective', '1000px'); - position: relative; - min-height: 100%; - padding: _size(element-margin); - z-index: 2; - - > * { - z-index: 1; - } - - &:before { - content: ''; - display: block; - } - - @include breakpoint(xxsmall) { - padding: (_size(element-margin) * 0.5); - } - - body.is-ie & { - height: 100%; - } +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Wrapper */ + + #wrapper { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'space-between'); + position: relative; + min-height: 100vh; + width: 100%; + padding: 4rem 2rem; + z-index: 3; + + &:before { + content: ''; + display: block; + } + + @include breakpoint('<=xlarge') { + padding: 3rem 2rem; + } + + @include breakpoint('<=small') { + padding: 2rem 1rem; + } + + @include breakpoint('<=xsmall') { + padding: 1rem; + } } \ No newline at end of file diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss index 3358992..3be728c 100644 --- a/assets/sass/libs/_vars.scss +++ b/assets/sass/libs/_vars.scss @@ -1,22 +1,43 @@ // Misc. $misc: ( - z-index-base: 10000 + z-index-base: 10000 ); // Duration. $duration: ( - navPanel: 0.5s + transition: 0.2s, + bg: 2.5s, + intro: 0.75s, + article: 0.325s ); // Size. $size: ( - navPanel: 275px + border-radius: 4px, + border-width: 1px, + element-height: 2.75rem, + element-margin: 2rem ); // 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 ); // 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) ); \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 2984a32..2ab4be5 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,1431 +1,50 @@ -@import 'libs/vars'; -@import 'libs/functions'; -@import 'libs/mixins'; -@import 'libs/vendor'; -@import 'libs/breakpoints'; -@import 'libs/html-grid'; -@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600'); -@import url('fontawesome-all.min.css'); - -/* - Overflow by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -// Breakpoints. - - @include breakpoints(( - wide: ( 1081px, 1680px ), - normal: ( 841px, 1080px ), - narrow: ( 737px, 840px ), - mobile: ( null, 736px ) - )); - -// Reset. -// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain) - - html, body, div, span, applet, object, - iframe, h1, h2, h3, h4, h5, h6, p, blockquote, - pre, a, abbr, acronym, address, big, cite, - code, del, dfn, em, img, ins, kbd, q, s, samp, - small, strike, strong, sub, sup, tt, var, b, - u, i, center, dl, dt, dd, ol, ul, li, fieldset, - form, label, legend, table, caption, tbody, - tfoot, thead, tr, th, td, article, aside, - canvas, details, embed, figure, figcaption, - footer, header, hgroup, menu, nav, output, ruby, - section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - } - - article, aside, details, figcaption, figure, - footer, header, hgroup, menu, nav, section { - display: block; - } - - body { - line-height: 1; - } - - ol, ul { - list-style:none; - } - - blockquote, q { - quotes: none; - - &:before, - &:after { - content: ''; - content: none; - } - } - - table { - border-collapse: collapse; - border-spacing: 0; - } - - body { - -webkit-text-size-adjust: none; - } - - mark { - background-color: transparent; - color: inherit; - } - - input::-moz-focus-inner { - border: 0; - padding: 0; - } - - input, select, textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - } - -/* Basic */ - - // Set box model to border-box. - // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice - html { - box-sizing: border-box; - } - - *, *:before, *:after { - box-sizing: inherit; - } - - body { - background-color: #183026; - background-image: url('images/overlay.png'), url('../../images/bg.jpg'); - background-repeat: repeat, no-repeat; - background-size: auto, cover; - background-position: top left, center 0; - background-attachment: fixed, fixed; - font-family: 'Source Sans Pro', sans-serif; - font-size: 18pt; - line-height: 1.75em; - font-weight: 300; - letter-spacing: 1px; - color: #3a3939; - text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25); - -webkit-text-stroke: 0.25px; - - &.is-scroll { - background-attachment: scroll, scroll; - background-size: auto, 100% auto; - } - - // Stops initial animations until page loads. - &.is-preload { - *, *:before, *:after { - @include vendor('animation', 'none !important'); - @include vendor('transition', 'none !important'); - } - } - - } - - input, textarea, select { - font-family: 'Source Sans Pro', sans-serif; - font-size: 18pt; - line-height: 1.75em; - font-weight: 300; - letter-spacing: 1px; - color: #3a3939; - text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25); - -webkit-text-stroke: 0.25px; - } - - h1, h2, h3, h4, h5, h6 { - font-weight: 400; - text-transform: uppercase; - line-height: 1.75em; - } - - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - color: inherit; - text-decoration: none; - } - - h2 { - font-size: 1.25em; - letter-spacing: 8px; - } - - h3 { - font-size: 1em; - letter-spacing: 5px; - } - - strong, b { - font-weight: 400; - } - - em, i { - font-style: italic; - } - - a { - @include vendor('transition', ('border-color 0.35s ease-in-out', 'color 0.35s ease-in-out')); - color: #35b88f; - text-shadow: 0 0 0.5px rgba(53, 184, 143, 0.25); - text-decoration: none; - border-bottom: dotted 1px rgba(53, 184, 143, 0.5); - - &:hover { - border-bottom-color: rgba(53, 184, 143, 0); - } - } - - sub { - position: relative; - top: 0.5em; - font-size: 0.8em; - } - - sup { - position: relative; - top: -0.5em; - font-size: 0.8em; - } - - hr { - border: 0; - border-top: solid 1px #dad9d9; - margin: 2em 0 2em 0; - } - - blockquote { - border-left: solid 0.5em #eae9e9; - padding: 1em 0 1em 2em; - font-style: italic; - } - - p, ul, ol, dl, table { - margin-bottom: 1em; - } - - header { - margin-bottom: 1em; - - p { - display: block; - margin: 0.5em 0 0 0; - padding: 0 0 1.5em 0; - } - } - - footer { - margin-top: 1em; - } - - br.clear { - clear: both; - } - -/* Container */ - - .container { - margin: 0 auto; - max-width: 100%; - width: 1140px; - - @include breakpoint('<=wide') { - width: 960px; - } - - @include breakpoint('<=normal') { - width: 95%; - } - } - -/* Row */ - - .row { - @include html-grid((40px, 40px)); - - @include breakpoint('<=wide') { - @include html-grid((40px, 40px), 'wide'); - } - - @include breakpoint('<=normal') { - @include html-grid((40px, 40px), 'normal'); - } - - @include breakpoint('<=narrow') { - @include html-grid((30px, 30px), 'narrow'); - } - - @include breakpoint('<=mobile') { - @include html-grid((20px, 20px), 'mobile'); - } - } - -/* Sections/Article */ - - section, article { - margin-bottom: 3em; - } - - section > :last-child, - article > :last-child, - section:last-child, - article:last-child { - margin-bottom: 0; - } - - .row > { - section, article { - margin-bottom: 0; - } - } - -/* Image */ - - .image { - display: inline-block; - border: 0; - - img { - display: block; - width: 100%; - } - - &.featured { - display: block; - width: 100%; - margin: 0 0 2em 0; - } - - &.fit { - display: block; - width: 100%; - } - - &.left { - float: left; - margin: 0 2em 2em 0; - } - - &.centered { - display: block; - margin: 0 0 2em 0; - - img { - margin: 0 auto; - width: auto; - } - } - } - -/* List */ - - ul { - list-style: disc; - padding-left: 1em; - - li { - padding-left: 1.5em; - margin-top: 1.5em; - - &:first-child { - margin-top: 0; - } - } - } - - ol { - list-style: decimal; - padding-left: 1.25em; - - li { - padding-left: 1.25em; - margin-top: 1.5em; - } - } - -/* Icons */ - - ul.icons { - cursor: default; - list-style: none; - padding-left: 0; - - li { - display: inline-block; - padding-left: 0; - margin-top: 0; - } - - a { - display: inline-block; - width: 2.5em; - height: 2.5em; - line-height: 2.5em; - text-align: center; - border: 0; - } - } - -/* Menu */ - - ul.menu { - cursor: default; - list-style: none; - padding-left: 0; - - li { - display: inline-block; - line-height: 1em; - border-left: solid 1px #dad9d9; - padding: 0 0 0 0.5em; - margin: 0 0 0 0.5em; - - &:first-child { - border-left: 0; - padding-left: 0; - margin-left: 0; - } - } - } - -/* Actions */ - - ul.actions { - cursor: default; - list-style: none; - padding-left: 0; - - li { - display: inline-block; - margin: 0 0 0 0.5em; - padding-left: 0; - margin-top: 0; - - &:first-child { - margin-left: 0; - } - } - } - -/* Form */ - - form { - label { - display: block; - margin: 0 0 0.5em 0; - } - - input[type="text"], - input[type="email"], - input[type="password"], - select, - textarea { - @include vendor('transition', 'background-color 0.35s ease-in-out'); - -webkit-appearance: none; - display: block; - border: 0; - background: #f1f1f1; - width: 100%; - padding: 0.75em; - - &:focus { - background-color: #f8f8f8; - } - } - - input[type="text"], - input[type="email"], - input[type="password"], - select { - line-height: 1em; - } - - select { - background-size: 1.25em; - background-repeat: no-repeat; - background-position: calc(100% - 1em) center; - padding-right: 1.25em; - text-overflow: ellipsis; - background-image: svg-url(""); - - option { - color: #3a3939; - background: #ffffff; - } - - &:focus { - &::-ms-value { - background-color: transparent; - } - } - - &::-ms-expand { - display: none; - } - } - - textarea { - min-height: 12em; - } - - ::-webkit-input-placeholder { - color: #5a5959 !important; - } - - :-moz-placeholder { - color: #5a5959 !important; - } - - ::-moz-placeholder { - color: #5a5959 !important; - } - - :-ms-input-placeholder { - color: #5a5959 !important; - } - - ::-moz-focus-inner { - border: 0; - } - - ul { - &.actions { - margin-bottom: 0; - text-align: center; - } - } - } - -/* Table */ - - .table-wrapper { - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - - table { - width: 100%; - - tbody { - tr { - border-top: solid 1px #eae9e9; - - &:first-child { - border-top: 0; - } - } - } - - td { - padding: 0.75em 1.25em 0.75em 1.25em; - } - - th { - text-align: left; - font-weight: 400; - padding: 0.75em 1.25em 0.75em 1.25em; - } - - thead { - background: #f5f5f5; - } - } - -/* Button */ - - input[type="button"], - input[type="submit"], - input[type="reset"], - button, - .button { - @include vendor('transition', ('background-color 0.35s ease-in-out', 'color 0.35s ease-in-out')); - -webkit-appearance: none; - position: relative; - display: inline-block; - border: 0; - background: #35b88f; - color: #fff; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); - cursor: pointer; - text-decoration: none; - outline: 0; - padding: 1em 3em 1em 3em; - text-align: center; - border-radius: 3em; - font-weight: 400; - - &:hover { - background: #45c89f; - } - - &.style2 { - color: #3a3939; - background: #fff; - box-shadow: inset 0 0 0 1px #fff; - - &:hover { - background: rgba(255, 255, 255, 0.1); - color: #fff !important; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25) !important; - } - } - - &.style3 { - background: none; - color: #3a3939; - box-shadow: inset 0 0 0 1px #dad9d9; - - &:hover { - background: rgba(58, 57, 57, 0.025); - } - } - } - -/* Box */ - - .box { - position: relative; - margin-top: 9em; - margin-bottom: 0; - - &:after { - content: ''; - display: block; - position: absolute; - top: -9em; - left: 50%; - height: 9em; - border-left: solid 1px #fff; - } - - &:before { - content: ''; - display: block; - width: 90px; - height: 66px; - position: absolute; - left: 50%; - top: -4.5em; - margin-left: -45px; - margin-top: -33px; - background: url('images/arrow.svg') no-repeat; - } - - :last-child { - margin-bottom: 0; - } - - &.style1 { - background: #fff; - padding: 3em; - - .image { - display: block; - position: absolute; - top: 0; - width: 50%; - height: 100%; - background: #152E33; - overflow: hidden; - - img { - position: absolute; - top: 0; - height: 100%; - width: auto; - } - } - - .inner { - > :last-child { - margin: 0; - } - } - - &.right { - .image { - left: 0; - - img { - right: 0; - } - } - - .inner { - margin-left: 50%; - padding-left: 3em; - } - } - - &.left { - .image { - right: 0; - - img { - left: 0; - } - } - - .inner { - margin-right: 50%; - padding-right: 3em; - } - } - } - - &.style2 { - text-align: center; - - header { - display: inline-block; - background: #fff; - padding: 2em 3em 2em 3em; - margin: 0; - - p { - padding: 0; - } - } - - .inner { - position: relative; - padding: 40px 0 0px 0; - - &:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: 50%; - height: 100%; - border-left: solid 1px #fff; - } - - .row { - position: relative; - - &:before { - content: ''; - display: block; - position: absolute; - top: 50%; - left: 20px; - width: calc(100% - 40px); - border-bottom: solid 1px #fff; - } - } - - .image { - position: relative; - z-index: 1; - padding: 20px; - } - } - } - - &.style3 { - background: #fff; - padding: 3em; - - header { - text-align: center; - } - } - } - -/* Icons */ - - .icon { - @include icon; - text-decoration: none; - - &:before { - line-height: inherit; - } - - > .label { - display: none; - } - - &.solid { - &:before { - font-weight: 900; - } - } - - &.brands { - &:before { - font-family: 'Font Awesome 5 Brands'; - } - } - } - -/* Header */ - - #header { - @include vendor('transition', 'opacity 2s ease-in-out'); - position: relative; - color: #fff; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); - text-align: center; - margin: 0; - padding: 14em 0 14em 0; - cursor: default; - - header { - display: inline-block; - padding: 0 0 4.5em 0; - - h1 { - font-weight: 600; - font-size: 2em; - letter-spacing: 10px; - } - - p { - border-top: solid 1px rgba(255, 255, 255, 0.5); - color: rgba(255, 255, 255, 0.75); - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.1875); - font-size: 1em; - text-transform: uppercase; - letter-spacing: 3px; - padding: 0; - margin-top: 0.35em; - - &:before { - content: ''; - display: block; - border-top: solid 1px rgba(255, 255, 255, 0.5); - margin: 4px 0 0.8em 0; - } - } - } - - footer { - @include vendor('transition', ( - 'opacity 2s ease-in-out', - 'transform 1s ease-in-out' - )); - @include vendor('transition-delay', '1.25s'); - position: absolute; - bottom: 9em; - margin: 0; - width: 100%; - - &:after { - content: ''; - display: block; - position: absolute; - bottom: -9em; - left: 50%; - height: 9em; - border-left: solid 1px #fff; - } - - &:before { - content: ''; - display: block; - width: 90px; - height: 66px; - position: absolute; - left: 50%; - bottom: -4.5em; - margin-left: -45px; - margin-bottom: -33px; - background: url('images/arrow.svg') no-repeat; - } - } - - body.is-preload & { - opacity: 0; - - footer { - @include vendor('transform', 'translateY(1em)'); - opacity: 0; - } - } - } - -/* Banner */ - - #banner { - position: relative; - color: #fff; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); - text-align: center; - background: #35b88f url('images/banner.svg') bottom center no-repeat; - padding: 5em 0 5em 0; - margin: 0; - background-size: 125% auto; - - .button { - color: #35b882; - text-shadow: 0 0 0.5px rgba(53, 184, 130, 0.25); - } - - header { - margin: 0 0 2em 0; - - h2 { - font-weight: 400; - font-size: 1.75em; - letter-spacing: 8px; - } - } - - p { - margin: 0; - } - - footer { - margin: 2em 0 0 0; - } - - a { - color: inherit; - border-bottom-color: rgba(255, 255, 255, 0.5); - - &:hover { - border-bottom-color: rgba(255, 255, 255, 0); - } - } - } - -/* Footer */ - - #footer { - position: relative; - color: #fff; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); - text-align: center; - margin: 4.5em 0 0 0; - - &:after { - content: ''; - display: block; - position: absolute; - top: -4.5em; - left: 50%; - height: 4.5em; - border-left: solid 1px #fff; - } - - a { - color: #fff; - text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); - border-bottom-color: rgba(255, 255, 255, 0.5); - - &:hover { - color: #35b88f; - text-shadow: 0 0 0.5px rgba(69, 200, 159, 0.25); - border-bottom-color: rgba(53, 184, 143, 0.5); - } - } - - .icons { - padding: 0.75em 2em 0.75em 2em; - border-radius: 3em; - border: solid 1px #fff; - display: inline-block; - margin: 0 0 3em 0; - } - - .copyright { - margin: 0 0 9em 0; - font-size: 0.8em; - } - } - -/* Poptrox */ - - .poptrox-popup { - @include vendor('box-sizing', 'content-box'); - background: #fff; - padding-bottom: 3em; - - .loader { - width: 48px; - height: 48px; - background: url('images/loader.gif'); - position: absolute; - top: 50%; - left: 50%; - margin: -24px 0 0 -24px; - } - - .caption { - position: absolute; - bottom: 0; - left: 0; - background: #fff; - width: 100%; - height: 3em; - line-height: 3em; - text-align: center; - cursor: default; - z-index: 1; - } - - .nav-next, - .nav-previous { - @include vendor('transition', 'opacity 0.5s ease-in-out'); - position: absolute; - top: 0; - width: 50%; - height: 100%; - opacity: 0; - cursor: pointer; - background: rgba(0, 0, 0, 0.01); - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - - &:before { - content: ''; - position: absolute; - width: 96px; - height: 64px; - background: url('images/poptrox-nav.svg'); - top: calc(50% - 1.5em); - margin: -32px 0 0 0; - } - } - - &:hover { - .nav-next, - .nav-previous { - opacity: 0.5; - - &:hover { - opacity: 1.0; - } - } - } - - .nav-next { - right: 0; - - &:before { - right: 0; - } - } - - .nav-previous { - left: 0; - - &:before { - @include vendor('transform', 'scaleX(-1)'); - left: 0; - -ms-filter: "FlipH"; - filter: FlipH; - } - } - - .closer { - @include vendor('transition', 'opacity 0.5s ease-in-out'); - position: absolute; - top: 0; - right: 0; - width: 64px; - height: 64px; - text-indent: -9999px; - z-index: 2; - opacity: 0; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - - &:before { - @include vendor('transition', 'background-color 0.5s ease-in-out'); - content: ''; - display: block; - position: absolute; - right: 16px; - top: 16px; - width: 40px; - height: 40px; - border-radius: 100%; - box-shadow: inset 0 0 0 1px #fff; - background: rgba(255, 255, 255, 0.1) url('images/poptrox-closer.svg') center center; - color: #fff !important; - } - } - - &:hover { - .closer { - opacity: 0.5; - - &:hover { - opacity: 1.0; - } - } - } - } - -/* Wide */ - - @include breakpoint('<=wide') { - - /* Basic */ - - body, input, textarea, select { - font-size: 16pt; - } - - /* Header */ - - #header { - padding: 10em 0 12em 0; - } - - } - -/* Normal */ - - @include breakpoint('<=normal') { - - /* Banner */ - - #banner { - padding: 4em 0 4em 0; - background-size: auto, 175% auto; - } - - /* Header */ - - #header { - padding: 8em 0 10em 0; - } - - } - -/* Narrow */ - - @include breakpoint('<=narrow') { - - /* Basic */ - - body { - background-color: #203936; - background-image: url('images/overlay.png'), url('../../images/bg-alt.jpg'); - background-repeat: repeat, no-repeat; - background-size: auto, 100% auto; - background-position: top left, top center; - background-attachment: scroll, scroll; - font-size: 14pt; - } - - input, textarea, select { - font-size: 14pt; - } - - h1, h2, h3, h4, h5, h6 { - line-height: 1.5em; - } - - header { - p { - margin: 0.25em 0 0 0; - padding: 0 0 0.5em 0; - } - } - - /* Box */ - .box { - position: relative; - - section { - margin: 0 0 2em 0; - } - - &.style1 { - padding: 2.5em 2em 2.5em 2em; - - &.right { - .inner { - padding-left: 2em; - } - } - - &.left { - .inner { - padding-right: 2em; - } - } - } - - &.style2 { - - header { - padding: 2em; - } - - .inner { - position: relative; - padding: 30px 0 0 0; - } - } - - &.style3 { - padding: 2.5em 2em 2.5em 2em; - } - } - - /* Header */ - - #header { - padding: 10em 0 12em 0; - } - - /* Banner */ - - #banner { - padding: 3.5em; - background-size: 200% auto; - - br { - display: none; - } - } - - } - -/* Mobile */ - - @include breakpoint('<=mobile') { - - /* Basic */ - - * { - text-shadow: none !important; - } - - body, input, textarea, select { - line-height: 1.5em; - font-size: 12pt; - letter-spacing: 0; - } - - h2, h3, h4, h5, h6 { - font-size: 1em; - } - - h2 { - font-size: 1.25em; - letter-spacing: 4px; - } - - /* List */ - - ul { - li { - padding-left: 0.5em; - } - } - - ol { - li { - padding-left: 0.25em; - } - } - - /* Icons */ - - ul.icons { - a { - width: 2em; - height: 2em; - line-height: 2em; - } - } - - /* Menu */ - - ul.menu { - li { - display: block; - padding: 0; - border: 0; - margin: 1em 0 0 0; - - &:first-child { - margin-top: 0; - } - } - } - - /* Actions */ - - ul.actions { - li { - display: block; - margin: 1em 0 0 0; - - &:first-child { - margin-top: 0; - } - } - } - - /* Button */ - - input[type="button"], - input[type="submit"], - input[type="reset"], - button, - .button { - padding: 0.75em 0 0.75em 0; - width: 100%; - max-width: 320px; - } - - /* Box */ - - .box { - margin-top: 4.5em; - - &:after { - top: -4.5em; - height: 4.5em; - } - - &:before { - width: 45px; - height: 33px; - top: -2.25em; - margin-left: -22.5px; - margin-top: -16.5px; - background-size: 45px 33px; - } - - &.style1 { - padding: 0; - text-align: center; - - .image { - position: relative !important; - left: 0 !important; - width: 100% !important; - height: auto !important; - - img { - position: relative; - height: auto; - width: 100%; - } - } - - .inner { - margin: 0 !important; - padding: 2em 1.25em 2em 1.25em !important; - } - } - - &.style2 { - .inner { - .row:before { - display: none; - } - - .image { - padding: 0; - max-width: 250px; - margin: 0 auto 20px auto; - } - } - } - - &.style3 { - padding: 2em 1.25em 2em 1.25em; - } - } - - /* Header */ - #header { - padding: 6em 0 6em 0; - - header { - padding-left: 2em; - padding-right: 2em; - - h1 { - font-size: 1.75em; - letter-spacing: 6px; - } - } - - footer { - bottom: 4.5em; - padding: 0 2em 0 2em; - - &:after { - bottom: -4.5em; - left: 50%; - height: 4.5em; - } - - &:before { - width: 45px; - height: 33px; - bottom: -2.25em; - margin-left: -22.5px; - margin-bottom: -16.5px; - background-size: 45px 33px; - } - } - } - - /* Banner */ - #banner { - padding: 3em 2em 3em 2em; - background-size: auto 150%; - - header { - margin: 0 0 1em 0; - - h2 { - font-size: 1.5em; - letter-spacing: 6px; - } - } - } - - /* Footer */ - - #footer { - .icons { - padding: 0.5em 1.25em 0.5em 1.25em; - } - - .copyright { - font-size: 1em; - margin: 0 0 4em 0; - } - } - - /* Poptrox */ - .poptrox-popup { - .nav-next, - .nav-previous { - opacity: 1.0; - - &:before { - display: none; - } - } - - .closer { - opacity: 0.5; - } - } - - } \ No newline at end of file +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; +@import 'fontawesome-all.min.css'; +@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600'); + +/* + Dimension by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +// Breakpoints. + + @include breakpoints(( + xlarge: ( 1281px, 1680px ), + large: ( 981px, 1280px ), + medium: ( 737px, 980px ), + small: ( 481px, 736px ), + xsmall: ( 361px, 480px ), + xxsmall: ( null, 360px ) + )); + +// Base. + + @import 'base/reset'; + @import 'base/page'; + @import 'base/typography'; + +// Component. + + @import 'components/form'; + @import 'components/box'; + @import 'components/icon'; + @import 'components/image'; + @import 'components/list'; + @import 'components/actions'; + @import 'components/icons'; + @import 'components/table'; + @import 'components/button'; + +// Layout. + + @import 'layout/bg'; + @import 'layout/wrapper'; + @import 'layout/header'; + @import 'layout/main'; + @import 'layout/footer'; \ No newline at end of file diff --git a/assets/sass/noscript.scss b/assets/sass/noscript.scss index 55ed28f..b101db7 100644 --- a/assets/sass/noscript.scss +++ b/assets/sass/noscript.scss @@ -1,25 +1,50 @@ -@import 'libs/vars'; -@import 'libs/functions'; -@import 'libs/mixins'; -@import 'libs/vendor'; -@import 'libs/breakpoints'; -@import 'libs/html-grid'; - -/* - Overflow by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -/* Header */ - - #header { - body.is-preload & { - opacity: 1; - - footer { - @include vendor('transform', 'none'); - opacity: 1; - } - } +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; + +/* + Dimension by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* BG */ + + #bg { + body.is-preload & { + &:before { + background-color: transparent; + } + } + } + +/* Header */ + + #header { + body.is-preload & { + > * { + opacity: 1; + } + + @include vendor('filter', 'none'); + + .content { + .inner { + max-height: none; + padding: 3rem 2rem; + opacity: 1; + } + } + } + } + +/* Main */ + + #main { + article { + opacity: 1; + margin: (_size(element-margin) * 2) 0 0 0; + } } \ No newline at end of file diff --git a/images/fulls/01.jpg b/images/01.jpg similarity index 100% rename from images/fulls/01.jpg rename to images/01.jpg diff --git a/images/fulls/02.jpg b/images/02.jpg similarity index 100% rename from images/fulls/02.jpg rename to images/02.jpg diff --git a/images/fulls/03.jpg b/images/03.jpg similarity index 100% rename from images/fulls/03.jpg rename to images/03.jpg diff --git a/images/fulls/04.jpg b/images/04.jpg similarity index 100% rename from images/fulls/04.jpg rename to images/04.jpg diff --git a/images/fulls/05.jpg b/images/05.jpg similarity index 100% rename from images/fulls/05.jpg rename to images/05.jpg diff --git a/images/fulls/06.jpg b/images/06.jpg similarity index 100% rename from images/fulls/06.jpg rename to images/06.jpg diff --git a/images/fulls/07.jpg b/images/07.jpg similarity index 100% rename from images/fulls/07.jpg rename to images/07.jpg diff --git a/images/fulls/08.jpg b/images/08.jpg similarity index 100% rename from images/fulls/08.jpg rename to images/08.jpg diff --git a/images/fulls/09.jpg b/images/09.jpg similarity index 100% rename from images/fulls/09.jpg rename to images/09.jpg diff --git a/images/fulls/10.jpg b/images/10.jpg similarity index 100% rename from images/fulls/10.jpg rename to images/10.jpg diff --git a/images/fulls/11.jpg b/images/11.jpg similarity index 100% rename from images/fulls/11.jpg rename to images/11.jpg diff --git a/images/fulls/12.jpg b/images/12.jpg similarity index 100% rename from images/fulls/12.jpg rename to images/12.jpg diff --git a/images/bg-alt.jpg b/images/bg-alt.jpg deleted file mode 100644 index bf106a9..0000000 Binary files a/images/bg-alt.jpg and /dev/null differ diff --git a/images/bg.jpg b/images/bg.jpg deleted file mode 100644 index ea491e6..0000000 Binary files a/images/bg.jpg and /dev/null differ diff --git a/images/bg.png b/images/bg.png new file mode 100644 index 0000000..34b7f7c Binary files /dev/null and b/images/bg.png differ diff --git a/images/icon.png b/images/icon.png new file mode 100644 index 0000000..2e2cd1e Binary files /dev/null and b/images/icon.png differ diff --git a/images/logo-s.png b/images/logo-s.png deleted file mode 100644 index dda9a5d..0000000 Binary files a/images/logo-s.png and /dev/null differ diff --git a/images/logo.png b/images/logo.png deleted file mode 100644 index 4cccc0d..0000000 Binary files a/images/logo.png and /dev/null differ diff --git a/images/pic01.jpg b/images/pic01.jpg deleted file mode 100644 index f13393f..0000000 Binary files a/images/pic01.jpg and /dev/null differ diff --git a/images/pic02.jpg b/images/pic02.jpg deleted file mode 100644 index 7bea989..0000000 Binary files a/images/pic02.jpg and /dev/null differ diff --git a/images/thumbs/01.jpg b/images/thumbs/01.jpg deleted file mode 100644 index a599ccc..0000000 Binary files a/images/thumbs/01.jpg and /dev/null differ diff --git a/images/thumbs/02.jpg b/images/thumbs/02.jpg deleted file mode 100644 index 60e4e37..0000000 Binary files a/images/thumbs/02.jpg and /dev/null differ diff --git a/images/thumbs/03.jpg b/images/thumbs/03.jpg deleted file mode 100644 index 3dd82ce..0000000 Binary files a/images/thumbs/03.jpg and /dev/null differ diff --git a/images/thumbs/04.jpg b/images/thumbs/04.jpg deleted file mode 100644 index bcd9cd6..0000000 Binary files a/images/thumbs/04.jpg and /dev/null differ diff --git a/images/thumbs/05.jpg b/images/thumbs/05.jpg deleted file mode 100644 index ef8969a..0000000 Binary files a/images/thumbs/05.jpg and /dev/null differ diff --git a/images/thumbs/06.jpg b/images/thumbs/06.jpg deleted file mode 100644 index 014169d..0000000 Binary files a/images/thumbs/06.jpg and /dev/null differ diff --git a/images/thumbs/07.jpg b/images/thumbs/07.jpg deleted file mode 100644 index c27d699..0000000 Binary files a/images/thumbs/07.jpg and /dev/null differ diff --git a/images/thumbs/08.jpg b/images/thumbs/08.jpg deleted file mode 100644 index 3470f9a..0000000 Binary files a/images/thumbs/08.jpg and /dev/null differ diff --git a/images/thumbs/09.jpg b/images/thumbs/09.jpg deleted file mode 100644 index bf2ed72..0000000 Binary files a/images/thumbs/09.jpg and /dev/null differ diff --git a/images/thumbs/10.jpg b/images/thumbs/10.jpg deleted file mode 100644 index 91bd0a9..0000000 Binary files a/images/thumbs/10.jpg and /dev/null differ diff --git a/images/thumbs/11.jpg b/images/thumbs/11.jpg deleted file mode 100644 index a54a7c4..0000000 Binary files a/images/thumbs/11.jpg and /dev/null differ diff --git a/images/thumbs/12.jpg b/images/thumbs/12.jpg deleted file mode 100644 index 4f1e6af..0000000 Binary files a/images/thumbs/12.jpg and /dev/null differ diff --git a/index.html b/index.html index 7565042..2d3078d 100644 --- a/index.html +++ b/index.html @@ -1,174 +1,135 @@ - - - - - CharienkO - - - - - - - - - - -
-
-

CHARIENKO

-

Groupe de musique du monde.
- Produit des bonnes ondes de musique tzigane dans la région nantaise.

-
-
- -
- -
-
-

Antoine

-
-

- Autodidacte et amoureux de la musique, du jazz à l’électronique en passant par le rap et les musiques du monde, - il fait battre le coeur de ses Komarades en tenant la pulsation. Ses outils ? La guitare, le cajon ou la basse, - il n’hésite pas non plus à taper du pied et à faire vibrer les cymbalettes. -

-
-
- -
- -
-
-

Claire

-
-

- Internationaliste de coeur, elle a grandit au son des guitares manouche et flamenca mais a la passion secrète - des musiques extrêmes. Linguiste et poète, elle voyage. Son moyen de transport préféré ? Le train, là où les - langues se confondent. -

-
-
- -
- -
-
-

Jacques

-
-

- Un transmetteur du language par lequel il exprime ses émotions depuis plus d’une trentaine d’années déjà. Il a - écouté Ravi Shankar, chanté du Brassens et du Ferré. Il en a bu des coupes pleines de jazz, s’en est tellement - enivré qu’il en a fait son métier. Avide de découvertes, il joue volontiers ce que les autres ont à dire. -

-
-
- -
- -
-
-

Laurence

-
-

- Elle connaît les mystères classico-mélodiques et déchiffre la portée aussi vite que son ombre. Elle a le souci - du détail mais ne s’interdit pas de belles envolées acrobatiques quand le coeur lui en dit. Un petit pécher mignon ? - Les jeux ( on se ferait pas une petite partie de ton Galèrapagos ? ) -

-
-
- -
- -
-
-

Pamphile

-
-

- On a pour habitude de dire qu’il est tombé dans la soupe musicale étant petit, outre le fait qu’il aime bien manger, - c’est indéniablement un virtuose de l’accordéon. Petite libellule sans cesse en quête de nouvelles inspirations, - il joue pour le théâtre, crée ses propres courts-métrage, s’adonne au rock celtique, rien ne semble l’arrêter ! -

-
-
- - -
-
-

Photos

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - + + + + + CHARIENKO + + + + + + + + +
+ + + + + +
+ + +
+

CHARIENKO

+

+ Groupe de musique du monde
+ Produit des bonnes ondes de musique tzigane dans la région nantaise. +

+
+ + +
+

Le groupe

+ +

ANTOINE

+

+ Autodidacte et amoureux de la musique, du jazz à l’électronique en passant par le rap et les musiques du monde, + il fait battre le coeur de ses Komarades en tenant la pulsation. Ses outils ? La guitare, le cajon ou la basse, + il n’hésite pas non plus à taper du pied et à faire vibrer les cymbalettes. +

+ +

CLAIRE

+

+ Internationaliste de coeur, elle a grandit au son des guitares manouche et flamenca mais a la passion secrète + des musiques extrêmes. Linguiste et poète, elle voyage. Son moyen de transport préféré ? Le train, là où les + langues se confondent. +

+ +

JACQUES

+

+ Un transmetteur du language par lequel il exprime ses émotions depuis plus d’une trentaine d’années déjà. Il a + écouté Ravi Shankar, chanté du Brassens et du Ferré. Il en a bu des coupes pleines de jazz, s’en est tellement + enivré qu’il en a fait son métier. Avide de découvertes, il joue volontiers ce que les autres ont à dire. +

+ +

LAURENCE

+

+ Elle connaît les mystères classico-mélodiques et déchiffre la portée aussi vite que son ombre. Elle a le souci + du détail mais ne s’interdit pas de belles envolées acrobatiques quand le coeur lui en dit. Un petit pécher mignon ? + Les jeux ( on se ferait pas une petite partie de ton Galèrapagos ? ) +

+ +

PAMPHILE

+

+ On a pour habitude de dire qu’il est tombé dans la soupe musicale étant petit, outre le fait qu’il aime bien manger, + c’est indéniablement un virtuose de l’accordéon. Petite libellule sans cesse en quête de nouvelles inspirations, + il joue pour le théâtre, crée ses propres courts-métrage, s’adonne au rock celtique, rien ne semble l’arrêter ! +

+
+ + +
+

En concert...

+ + + + + + + + + + + + +
+ + + +
+
+ + +
+ + + + + + + + + \ No newline at end of file