From 50a33d5e92a4741d2864b9e2fd13b323b16ab2ea Mon Sep 17 00:00:00 2001 From: DO1JLR Date: Mon, 23 Apr 2018 23:14:38 +0200 Subject: [PATCH] Renew design Former-commit-id: 9ab2bcb826eaba89f86497c00d82650767370cd3 [formerly c316949da5dc69fc2409af15185770d99eb82df3] Former-commit-id: df9e90fb55585d1bf164a8a57d59fb11420be236 --- .gitignore | 7 + assets/css/ie8.css | 163 + assets/css/ie9.css | 102 +- assets/css/images/close.svg | 7 + assets/css/main.css | 3853 +++++++++++++++++----- assets/css/noscript.css | 12 - assets/favicon.ico | Bin 1150 -> 0 bytes assets/images/pic04.jpg | Bin 0 -> 5677 bytes assets/images/pic05.jpg | Bin 0 -> 5936 bytes assets/images/pic06.jpg | Bin 0 -> 5887 bytes assets/images/pic07.jpg | Bin 0 -> 6325 bytes assets/images/pic08.jpg | Bin 0 -> 10066 bytes assets/js/ie/PIE.htc | 96 + assets/js/ie/backgroundsize.min.htc | 7 + assets/js/ie/html5shiv.js | 8 + assets/js/ie/respond.min.js | 6 + assets/js/jquery.scrollex.min.js | 2 + assets/js/main.js | 427 +-- assets/sass/base/_page.scss | 25 +- assets/sass/base/_typography.scss | 159 +- assets/sass/components/_box.scss | 4 +- assets/sass/components/_button.scss | 67 +- assets/sass/components/_features.scss | 71 + assets/sass/components/_form.scss | 143 +- assets/sass/components/_icon.scss | 2 +- assets/sass/components/_image.scss | 31 +- assets/sass/components/_list.scss | 134 +- assets/sass/components/_section.scss | 13 + assets/sass/components/_table.scss | 14 +- assets/sass/ie8.scss | 190 ++ assets/sass/ie9.scss | 98 +- assets/sass/layout/_banner.scss | 140 + assets/sass/layout/_bg.scss | 68 - assets/sass/layout/_footer.scss | 150 +- assets/sass/layout/_header.scss | 309 +- assets/sass/layout/_main.scss | 102 - assets/sass/layout/_menu.scss | 127 + assets/sass/layout/_wrapper.scss | 305 +- assets/sass/libs/_vars.scss | 59 +- assets/sass/main.scss | 32 +- assets/sass/noscript.scss | 19 - content/contents.lr | 2 + content/{about => impressum}/contents.lr | 0 templates/home.html | 79 + templates/layout.html | 159 +- 45 files changed, 5222 insertions(+), 1970 deletions(-) create mode 100644 .gitignore create mode 100644 assets/css/ie8.css create mode 100644 assets/css/images/close.svg delete mode 100644 assets/css/noscript.css delete mode 100644 assets/favicon.ico create mode 100644 assets/images/pic04.jpg create mode 100644 assets/images/pic05.jpg create mode 100644 assets/images/pic06.jpg create mode 100644 assets/images/pic07.jpg create mode 100644 assets/images/pic08.jpg create mode 100644 assets/js/ie/PIE.htc create mode 100644 assets/js/ie/backgroundsize.min.htc create mode 100644 assets/js/ie/html5shiv.js create mode 100644 assets/js/ie/respond.min.js create mode 100644 assets/js/jquery.scrollex.min.js create mode 100644 assets/sass/components/_features.scss create mode 100644 assets/sass/components/_section.scss create mode 100644 assets/sass/ie8.scss create mode 100644 assets/sass/layout/_banner.scss delete mode 100644 assets/sass/layout/_bg.scss delete mode 100644 assets/sass/layout/_main.scss create mode 100644 assets/sass/layout/_menu.scss delete mode 100644 assets/sass/noscript.scss rename content/{about => impressum}/contents.lr (100%) create mode 100644 templates/home.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..99e6614 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +assets/solid-state/ +*.swp +**.swp +*.tmp +*.directory +**.tmp +**.directory diff --git a/assets/css/ie8.css b/assets/css/ie8.css new file mode 100644 index 0000000..be2b4aa --- /dev/null +++ b/assets/css/ie8.css @@ -0,0 +1,163 @@ +/* + Solid State by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Basic */ + + body { + -ms-behavior: url("assets/js/backgroundsize.min.htc"); + } + +/* Type */ + + h1.major, h2.major, h3.major, h4.major, h5.major, h6.major { + border-bottom: solid 2px #ffffff; + } + + blockquote { + border-left: solid 4px #ffffff; + } + + code { + border: solid 2px #ffffff; + } + + hr { + border-bottom: solid 2px #ffffff; + } + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + position: relative; + -ms-behavior: url("assets/js/ie/PIE.htc"); + border: solid 2px #ffffff; + } + + input[type="submit"].special, + input[type="reset"].special, + input[type="button"].special, + button.special, + .button.special { + border: 0; + } + +/* Form */ + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + select, + textarea { + position: relative; + -ms-behavior: url("assets/js/ie/PIE.htc"); + background: transparent; + border: solid 2px #ffffff; + } + +/* Table */ + + table tbody tr { + border: solid 1px #ffffff; + border-left: 0; + border-right: 0; + } + + 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; + } + +/* Features */ + + .features article { + -ms-behavior: url("assets/js/ie/PIE.htc"); + position: relative; + width: 44%; + } + + .features article .image { + margin-top: 0; + margin-left: 0; + width: 100%; + } + +/* Menu */ + + #menu { + background: #2e3141; + } + + #menu h2 { + border-bottom: solid 2px #ffffff; + } + +/* Header */ + + #header { + background-color: #353849; + } + +/* Wrapper */ + + .wrapper { + margin: 0; + } + + .wrapper:before, .wrapper:after { + display: none; + } + + .wrapper.spotlight .image { + -ms-behavior: url("assets/js/ie/PIE.htc"); + } + + .wrapper.spotlight .image img { + position: relative; + -ms-behavior: url("assets/js/ie/PIE.htc"); + } + +/* Banner */ + + #banner .logo .icon { + border: solid 2px #ffffff; + -ms-behavior: url("assets/js/ie/PIE.htc"); + } + + #banner h2 { + border-bottom: solid 2px #ffffff; + } + +/* Footer */ + + #footer .inner .copyright { + border-top: solid 2px #ffffff; + } + + #footer .inner .copyright li { + border-left: solid 2px #ffffff; + } \ No newline at end of file diff --git a/assets/css/ie9.css b/assets/css/ie9.css index 92031cc..214b972 100644 --- a/assets/css/ie9.css +++ b/assets/css/ie9.css @@ -1,35 +1,89 @@ /* - Dimension by HTML5 UP + Solid State by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -/* BG */ +/* Basic */ - #bg:before { - background: rgba(19, 21, 25, 0.5); + body { + background-color: #2e3141; + background-image: url("../../images/bg.jpg"); + background-size: cover; + background-attachment: fixed; + background-position: center; } -/* Header */ - - #header .logo { - margin: 0 auto; - } - - #header .content { - display: inline-block; - } - - #header nav ul { - display: inline-block; - } - - #header nav ul li { - display: inline-block; + body:before { + background: rgba(46, 49, 65, 0.8); + content: ''; + display: block; + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; } -/* Main */ + body > * { + position: relative; + z-index: 1; + } - #main article { - margin: 0 auto; - } \ No newline at end of file +/* Features */ + + .features article { + display: inline-block; + width: 45%; + } + +/* Menu */ + + #menu .inner { + margin: 4em auto; + } + +/* Wrapper */ + + #wrapper > header { + background: none !important; + } + + .wrapper.spotlight .inner { + text-align: left !important; + } + + .wrapper.spotlight .image { + display: inline-block; + margin: 0 3em 2em 0 !important; + vertical-align: middle; + width: 24%; + } + + .wrapper.spotlight .content { + display: inline-block; + vertical-align: middle; + width: 70%; + } + +/* Banner */ + + #banner { + background: none !important; + } + +/* Footer */ + + #footer { + background: none !important; + } + + #footer .inner form { + display: inline-block; + width: 45%; + } + + #footer .inner .contact { + display: inline-block; + width: 45%; + } \ No newline at end of file diff --git a/assets/css/images/close.svg b/assets/css/images/close.svg new file mode 100644 index 0000000..7c35469 --- /dev/null +++ b/assets/css/images/close.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index 55cae7e..7014e3a 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,8 +1,8 @@ @import url(font-awesome.min.css); -@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600"); +@import url("https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic"); /* - Dimension by HTML5 UP + Solid State by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ @@ -56,13 +56,1565 @@ box-sizing: border-box; } +/* Grid */ + + .row { + border-bottom: solid 1px transparent; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + .row > * { + float: left; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + .row:after, .row:before { + content: ''; + display: block; + clear: both; + height: 0; + } + + .row.uniform > * > :first-child { + margin-top: 0; + } + + .row.uniform > * > :last-child { + margin-bottom: 0; + } + + .row.\30 \25 > * { + padding: 0 0 0 0em; + } + + .row.\30 \25 { + margin: 0 0 -1px 0em; + } + + .row.uniform.\30 \25 > * { + padding: 0em 0 0 0em; + } + + .row.uniform.\30 \25 { + margin: 0em 0 -1px 0em; + } + + .row > * { + padding: 0 0 0 1.75em; + } + + .row { + margin: 0 0 -1px -1.75em; + } + + .row.uniform > * { + padding: 1.75em 0 0 1.75em; + } + + .row.uniform { + margin: -1.75em 0 -1px -1.75em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 3.5em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -3.5em; + } + + .row.uniform.\32 00\25 > * { + padding: 3.5em 0 0 3.5em; + } + + .row.uniform.\32 00\25 { + margin: -3.5em 0 -1px -3.5em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 2.625em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -2.625em; + } + + .row.uniform.\31 50\25 > * { + padding: 2.625em 0 0 2.625em; + } + + .row.uniform.\31 50\25 { + margin: -2.625em 0 -1px -2.625em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 0.875em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -0.875em; + } + + .row.uniform.\35 0\25 > * { + padding: 0.875em 0 0 0.875em; + } + + .row.uniform.\35 0\25 { + margin: -0.875em 0 -1px -0.875em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.4375em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.4375em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.4375em 0 0 0.4375em; + } + + .row.uniform.\32 5\25 { + margin: -0.4375em 0 -1px -0.4375em; + } + + .\31 2u, .\31 2u\24 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u, .\31 1u\24 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u, .\31 0u\24 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u, .\39 u\24 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u, .\38 u\24 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u, .\37 u\24 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u, .\36 u\24 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u, .\35 u\24 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u, .\34 u\24 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u, .\33 u\24 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u, .\32 u\24 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u, .\31 u\24 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24 + *, + .\31 1u\24 + *, + .\31 0u\24 + *, + .\39 u\24 + *, + .\38 u\24 + *, + .\37 u\24 + *, + .\36 u\24 + *, + .\35 u\24 + *, + .\34 u\24 + *, + .\33 u\24 + *, + .\32 u\24 + *, + .\31 u\24 + * { + clear: left; + } + + .\-11u { + margin-left: 91.66667%; + } + + .\-10u { + margin-left: 83.33333%; + } + + .\-9u { + margin-left: 75%; + } + + .\-8u { + margin-left: 66.66667%; + } + + .\-7u { + margin-left: 58.33333%; + } + + .\-6u { + margin-left: 50%; + } + + .\-5u { + margin-left: 41.66667%; + } + + .\-4u { + margin-left: 33.33333%; + } + + .\-3u { + margin-left: 25%; + } + + .\-2u { + margin-left: 16.66667%; + } + + .\-1u { + margin-left: 8.33333%; + } + + @media screen and (max-width: 1680px) { + + .row > * { + padding: 0 0 0 1.75em; + } + + .row { + margin: 0 0 -1px -1.75em; + } + + .row.uniform > * { + padding: 1.75em 0 0 1.75em; + } + + .row.uniform { + margin: -1.75em 0 -1px -1.75em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 3.5em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -3.5em; + } + + .row.uniform.\32 00\25 > * { + padding: 3.5em 0 0 3.5em; + } + + .row.uniform.\32 00\25 { + margin: -3.5em 0 -1px -3.5em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 2.625em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -2.625em; + } + + .row.uniform.\31 50\25 > * { + padding: 2.625em 0 0 2.625em; + } + + .row.uniform.\31 50\25 { + margin: -2.625em 0 -1px -2.625em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 0.875em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -0.875em; + } + + .row.uniform.\35 0\25 > * { + padding: 0.875em 0 0 0.875em; + } + + .row.uniform.\35 0\25 { + margin: -0.875em 0 -1px -0.875em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.4375em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.4375em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.4375em 0 0 0.4375em; + } + + .row.uniform.\32 5\25 { + margin: -0.4375em 0 -1px -0.4375em; + } + + .\31 2u\28xlarge\29, .\31 2u\24\28xlarge\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28xlarge\29, .\31 1u\24\28xlarge\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28xlarge\29, .\31 0u\24\28xlarge\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28xlarge\29, .\39 u\24\28xlarge\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28xlarge\29, .\38 u\24\28xlarge\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28xlarge\29, .\37 u\24\28xlarge\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28xlarge\29, .\36 u\24\28xlarge\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28xlarge\29, .\35 u\24\28xlarge\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28xlarge\29, .\34 u\24\28xlarge\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28xlarge\29, .\33 u\24\28xlarge\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28xlarge\29, .\32 u\24\28xlarge\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28xlarge\29, .\31 u\24\28xlarge\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28xlarge\29 + *, + .\31 1u\24\28xlarge\29 + *, + .\31 0u\24\28xlarge\29 + *, + .\39 u\24\28xlarge\29 + *, + .\38 u\24\28xlarge\29 + *, + .\37 u\24\28xlarge\29 + *, + .\36 u\24\28xlarge\29 + *, + .\35 u\24\28xlarge\29 + *, + .\34 u\24\28xlarge\29 + *, + .\33 u\24\28xlarge\29 + *, + .\32 u\24\28xlarge\29 + *, + .\31 u\24\28xlarge\29 + * { + clear: left; + } + + .\-11u\28xlarge\29 { + margin-left: 91.66667%; + } + + .\-10u\28xlarge\29 { + margin-left: 83.33333%; + } + + .\-9u\28xlarge\29 { + margin-left: 75%; + } + + .\-8u\28xlarge\29 { + margin-left: 66.66667%; + } + + .\-7u\28xlarge\29 { + margin-left: 58.33333%; + } + + .\-6u\28xlarge\29 { + margin-left: 50%; + } + + .\-5u\28xlarge\29 { + margin-left: 41.66667%; + } + + .\-4u\28xlarge\29 { + margin-left: 33.33333%; + } + + .\-3u\28xlarge\29 { + margin-left: 25%; + } + + .\-2u\28xlarge\29 { + margin-left: 16.66667%; + } + + .\-1u\28xlarge\29 { + margin-left: 8.33333%; + } + + } + + @media screen and (max-width: 1280px) { + + .row > * { + padding: 0 0 0 1.75em; + } + + .row { + margin: 0 0 -1px -1.75em; + } + + .row.uniform > * { + padding: 1.75em 0 0 1.75em; + } + + .row.uniform { + margin: -1.75em 0 -1px -1.75em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 3.5em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -3.5em; + } + + .row.uniform.\32 00\25 > * { + padding: 3.5em 0 0 3.5em; + } + + .row.uniform.\32 00\25 { + margin: -3.5em 0 -1px -3.5em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 2.625em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -2.625em; + } + + .row.uniform.\31 50\25 > * { + padding: 2.625em 0 0 2.625em; + } + + .row.uniform.\31 50\25 { + margin: -2.625em 0 -1px -2.625em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 0.875em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -0.875em; + } + + .row.uniform.\35 0\25 > * { + padding: 0.875em 0 0 0.875em; + } + + .row.uniform.\35 0\25 { + margin: -0.875em 0 -1px -0.875em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.4375em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.4375em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.4375em 0 0 0.4375em; + } + + .row.uniform.\32 5\25 { + margin: -0.4375em 0 -1px -0.4375em; + } + + .\31 2u\28large\29, .\31 2u\24\28large\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28large\29, .\31 1u\24\28large\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28large\29, .\31 0u\24\28large\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28large\29, .\39 u\24\28large\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28large\29, .\38 u\24\28large\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28large\29, .\37 u\24\28large\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28large\29, .\36 u\24\28large\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28large\29, .\35 u\24\28large\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28large\29, .\34 u\24\28large\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28large\29, .\33 u\24\28large\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28large\29, .\32 u\24\28large\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28large\29, .\31 u\24\28large\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28large\29 + *, + .\31 1u\24\28large\29 + *, + .\31 0u\24\28large\29 + *, + .\39 u\24\28large\29 + *, + .\38 u\24\28large\29 + *, + .\37 u\24\28large\29 + *, + .\36 u\24\28large\29 + *, + .\35 u\24\28large\29 + *, + .\34 u\24\28large\29 + *, + .\33 u\24\28large\29 + *, + .\32 u\24\28large\29 + *, + .\31 u\24\28large\29 + * { + clear: left; + } + + .\-11u\28large\29 { + margin-left: 91.66667%; + } + + .\-10u\28large\29 { + margin-left: 83.33333%; + } + + .\-9u\28large\29 { + margin-left: 75%; + } + + .\-8u\28large\29 { + margin-left: 66.66667%; + } + + .\-7u\28large\29 { + margin-left: 58.33333%; + } + + .\-6u\28large\29 { + margin-left: 50%; + } + + .\-5u\28large\29 { + margin-left: 41.66667%; + } + + .\-4u\28large\29 { + margin-left: 33.33333%; + } + + .\-3u\28large\29 { + margin-left: 25%; + } + + .\-2u\28large\29 { + margin-left: 16.66667%; + } + + .\-1u\28large\29 { + margin-left: 8.33333%; + } + + } + + @media screen and (max-width: 980px) { + + .row > * { + padding: 0 0 0 1.75em; + } + + .row { + margin: 0 0 -1px -1.75em; + } + + .row.uniform > * { + padding: 1.75em 0 0 1.75em; + } + + .row.uniform { + margin: -1.75em 0 -1px -1.75em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 3.5em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -3.5em; + } + + .row.uniform.\32 00\25 > * { + padding: 3.5em 0 0 3.5em; + } + + .row.uniform.\32 00\25 { + margin: -3.5em 0 -1px -3.5em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 2.625em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -2.625em; + } + + .row.uniform.\31 50\25 > * { + padding: 2.625em 0 0 2.625em; + } + + .row.uniform.\31 50\25 { + margin: -2.625em 0 -1px -2.625em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 0.875em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -0.875em; + } + + .row.uniform.\35 0\25 > * { + padding: 0.875em 0 0 0.875em; + } + + .row.uniform.\35 0\25 { + margin: -0.875em 0 -1px -0.875em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.4375em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.4375em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.4375em 0 0 0.4375em; + } + + .row.uniform.\32 5\25 { + margin: -0.4375em 0 -1px -0.4375em; + } + + .\31 2u\28medium\29, .\31 2u\24\28medium\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28medium\29, .\31 1u\24\28medium\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28medium\29, .\31 0u\24\28medium\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28medium\29, .\39 u\24\28medium\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28medium\29, .\38 u\24\28medium\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28medium\29, .\37 u\24\28medium\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28medium\29, .\36 u\24\28medium\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28medium\29, .\35 u\24\28medium\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28medium\29, .\34 u\24\28medium\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28medium\29, .\33 u\24\28medium\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28medium\29, .\32 u\24\28medium\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28medium\29, .\31 u\24\28medium\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28medium\29 + *, + .\31 1u\24\28medium\29 + *, + .\31 0u\24\28medium\29 + *, + .\39 u\24\28medium\29 + *, + .\38 u\24\28medium\29 + *, + .\37 u\24\28medium\29 + *, + .\36 u\24\28medium\29 + *, + .\35 u\24\28medium\29 + *, + .\34 u\24\28medium\29 + *, + .\33 u\24\28medium\29 + *, + .\32 u\24\28medium\29 + *, + .\31 u\24\28medium\29 + * { + clear: left; + } + + .\-11u\28medium\29 { + margin-left: 91.66667%; + } + + .\-10u\28medium\29 { + margin-left: 83.33333%; + } + + .\-9u\28medium\29 { + margin-left: 75%; + } + + .\-8u\28medium\29 { + margin-left: 66.66667%; + } + + .\-7u\28medium\29 { + margin-left: 58.33333%; + } + + .\-6u\28medium\29 { + margin-left: 50%; + } + + .\-5u\28medium\29 { + margin-left: 41.66667%; + } + + .\-4u\28medium\29 { + margin-left: 33.33333%; + } + + .\-3u\28medium\29 { + margin-left: 25%; + } + + .\-2u\28medium\29 { + margin-left: 16.66667%; + } + + .\-1u\28medium\29 { + margin-left: 8.33333%; + } + + } + + @media screen and (max-width: 736px) { + + .row > * { + padding: 0 0 0 1.25em; + } + + .row { + margin: 0 0 -1px -1.25em; + } + + .row.uniform > * { + padding: 1.25em 0 0 1.25em; + } + + .row.uniform { + margin: -1.25em 0 -1px -1.25em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 2.5em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -2.5em; + } + + .row.uniform.\32 00\25 > * { + padding: 2.5em 0 0 2.5em; + } + + .row.uniform.\32 00\25 { + margin: -2.5em 0 -1px -2.5em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 1.875em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -1.875em; + } + + .row.uniform.\31 50\25 > * { + padding: 1.875em 0 0 1.875em; + } + + .row.uniform.\31 50\25 { + margin: -1.875em 0 -1px -1.875em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 0.625em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -0.625em; + } + + .row.uniform.\35 0\25 > * { + padding: 0.625em 0 0 0.625em; + } + + .row.uniform.\35 0\25 { + margin: -0.625em 0 -1px -0.625em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.3125em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.3125em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.3125em 0 0 0.3125em; + } + + .row.uniform.\32 5\25 { + margin: -0.3125em 0 -1px -0.3125em; + } + + .\31 2u\28small\29, .\31 2u\24\28small\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28small\29, .\31 1u\24\28small\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28small\29, .\31 0u\24\28small\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28small\29, .\39 u\24\28small\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28small\29, .\38 u\24\28small\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28small\29, .\37 u\24\28small\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28small\29, .\36 u\24\28small\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28small\29, .\35 u\24\28small\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28small\29, .\34 u\24\28small\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28small\29, .\33 u\24\28small\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28small\29, .\32 u\24\28small\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28small\29, .\31 u\24\28small\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28small\29 + *, + .\31 1u\24\28small\29 + *, + .\31 0u\24\28small\29 + *, + .\39 u\24\28small\29 + *, + .\38 u\24\28small\29 + *, + .\37 u\24\28small\29 + *, + .\36 u\24\28small\29 + *, + .\35 u\24\28small\29 + *, + .\34 u\24\28small\29 + *, + .\33 u\24\28small\29 + *, + .\32 u\24\28small\29 + *, + .\31 u\24\28small\29 + * { + clear: left; + } + + .\-11u\28small\29 { + margin-left: 91.66667%; + } + + .\-10u\28small\29 { + margin-left: 83.33333%; + } + + .\-9u\28small\29 { + margin-left: 75%; + } + + .\-8u\28small\29 { + margin-left: 66.66667%; + } + + .\-7u\28small\29 { + margin-left: 58.33333%; + } + + .\-6u\28small\29 { + margin-left: 50%; + } + + .\-5u\28small\29 { + margin-left: 41.66667%; + } + + .\-4u\28small\29 { + margin-left: 33.33333%; + } + + .\-3u\28small\29 { + margin-left: 25%; + } + + .\-2u\28small\29 { + margin-left: 16.66667%; + } + + .\-1u\28small\29 { + margin-left: 8.33333%; + } + + } + + @media screen and (max-width: 640px) { + + .row > * { + padding: 0 0 0 1.25em; + } + + .row { + margin: 0 0 -1px -1.25em; + } + + .row.uniform > * { + padding: 1.25em 0 0 1.25em; + } + + .row.uniform { + margin: -1.25em 0 -1px -1.25em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 2.5em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -2.5em; + } + + .row.uniform.\32 00\25 > * { + padding: 2.5em 0 0 2.5em; + } + + .row.uniform.\32 00\25 { + margin: -2.5em 0 -1px -2.5em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 1.875em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -1.875em; + } + + .row.uniform.\31 50\25 > * { + padding: 1.875em 0 0 1.875em; + } + + .row.uniform.\31 50\25 { + margin: -1.875em 0 -1px -1.875em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 0.625em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -0.625em; + } + + .row.uniform.\35 0\25 > * { + padding: 0.625em 0 0 0.625em; + } + + .row.uniform.\35 0\25 { + margin: -0.625em 0 -1px -0.625em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.3125em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.3125em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.3125em 0 0 0.3125em; + } + + .row.uniform.\32 5\25 { + margin: -0.3125em 0 -1px -0.3125em; + } + + .\31 2u\28xsmall\29, .\31 2u\24\28xsmall\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28xsmall\29, .\31 1u\24\28xsmall\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28xsmall\29, .\31 0u\24\28xsmall\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28xsmall\29, .\39 u\24\28xsmall\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28xsmall\29, .\38 u\24\28xsmall\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28xsmall\29, .\37 u\24\28xsmall\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28xsmall\29, .\36 u\24\28xsmall\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28xsmall\29, .\35 u\24\28xsmall\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28xsmall\29, .\34 u\24\28xsmall\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28xsmall\29, .\33 u\24\28xsmall\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28xsmall\29, .\32 u\24\28xsmall\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28xsmall\29, .\31 u\24\28xsmall\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28xsmall\29 + *, + .\31 1u\24\28xsmall\29 + *, + .\31 0u\24\28xsmall\29 + *, + .\39 u\24\28xsmall\29 + *, + .\38 u\24\28xsmall\29 + *, + .\37 u\24\28xsmall\29 + *, + .\36 u\24\28xsmall\29 + *, + .\35 u\24\28xsmall\29 + *, + .\34 u\24\28xsmall\29 + *, + .\33 u\24\28xsmall\29 + *, + .\32 u\24\28xsmall\29 + *, + .\31 u\24\28xsmall\29 + * { + clear: left; + } + + .\-11u\28xsmall\29 { + margin-left: 91.66667%; + } + + .\-10u\28xsmall\29 { + margin-left: 83.33333%; + } + + .\-9u\28xsmall\29 { + margin-left: 75%; + } + + .\-8u\28xsmall\29 { + margin-left: 66.66667%; + } + + .\-7u\28xsmall\29 { + margin-left: 58.33333%; + } + + .\-6u\28xsmall\29 { + margin-left: 50%; + } + + .\-5u\28xsmall\29 { + margin-left: 41.66667%; + } + + .\-4u\28xsmall\29 { + margin-left: 33.33333%; + } + + .\-3u\28xsmall\29 { + margin-left: 25%; + } + + .\-2u\28xsmall\29 { + margin-left: 16.66667%; + } + + .\-1u\28xsmall\29 { + margin-left: 8.33333%; + } + + } + + @media screen and (max-width: 360px) { + + .row > * { + padding: 0 0 0 1.25em; + } + + .row { + margin: 0 0 -1px -1.25em; + } + + .row.uniform > * { + padding: 1.25em 0 0 1.25em; + } + + .row.uniform { + margin: -1.25em 0 -1px -1.25em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 2.5em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -2.5em; + } + + .row.uniform.\32 00\25 > * { + padding: 2.5em 0 0 2.5em; + } + + .row.uniform.\32 00\25 { + margin: -2.5em 0 -1px -2.5em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 1.875em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -1.875em; + } + + .row.uniform.\31 50\25 > * { + padding: 1.875em 0 0 1.875em; + } + + .row.uniform.\31 50\25 { + margin: -1.875em 0 -1px -1.875em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 0.625em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -0.625em; + } + + .row.uniform.\35 0\25 > * { + padding: 0.625em 0 0 0.625em; + } + + .row.uniform.\35 0\25 { + margin: -0.625em 0 -1px -0.625em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.3125em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.3125em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.3125em 0 0 0.3125em; + } + + .row.uniform.\32 5\25 { + margin: -0.3125em 0 -1px -0.3125em; + } + + .\31 2u\28xxsmall\29, .\31 2u\24\28xxsmall\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28xxsmall\29, .\31 1u\24\28xxsmall\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28xxsmall\29, .\31 0u\24\28xxsmall\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28xxsmall\29, .\39 u\24\28xxsmall\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28xxsmall\29, .\38 u\24\28xxsmall\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28xxsmall\29, .\37 u\24\28xxsmall\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28xxsmall\29, .\36 u\24\28xxsmall\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28xxsmall\29, .\35 u\24\28xxsmall\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28xxsmall\29, .\34 u\24\28xxsmall\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28xxsmall\29, .\33 u\24\28xxsmall\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28xxsmall\29, .\32 u\24\28xxsmall\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28xxsmall\29, .\31 u\24\28xxsmall\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28xxsmall\29 + *, + .\31 1u\24\28xxsmall\29 + *, + .\31 0u\24\28xxsmall\29 + *, + .\39 u\24\28xxsmall\29 + *, + .\38 u\24\28xxsmall\29 + *, + .\37 u\24\28xxsmall\29 + *, + .\36 u\24\28xxsmall\29 + *, + .\35 u\24\28xxsmall\29 + *, + .\34 u\24\28xxsmall\29 + *, + .\33 u\24\28xxsmall\29 + *, + .\32 u\24\28xxsmall\29 + *, + .\31 u\24\28xxsmall\29 + * { + clear: left; + } + + .\-11u\28xxsmall\29 { + margin-left: 91.66667%; + } + + .\-10u\28xxsmall\29 { + margin-left: 83.33333%; + } + + .\-9u\28xxsmall\29 { + margin-left: 75%; + } + + .\-8u\28xxsmall\29 { + margin-left: 66.66667%; + } + + .\-7u\28xxsmall\29 { + margin-left: 58.33333%; + } + + .\-6u\28xxsmall\29 { + margin-left: 50%; + } + + .\-5u\28xxsmall\29 { + margin-left: 41.66667%; + } + + .\-4u\28xxsmall\29 { + margin-left: 33.33333%; + } + + .\-3u\28xxsmall\29 { + margin-left: 25%; + } + + .\-2u\28xxsmall\29 { + margin-left: 16.66667%; + } + + .\-1u\28xxsmall\29 { + margin-left: 8.33333%; + } + + } + /* Basic */ @-ms-viewport { width: device-width; } - @media screen and (max-width: 480px) { + body { + -ms-overflow-style: scrollbar; + } + + @media screen and (max-width: 640px) { html, body { min-width: 320px; @@ -71,10 +1623,14 @@ } body { - background: #1b1f22; + background-color: #2e3141; + background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg"); + background-size: auto, cover; + background-attachment: fixed, fixed; + background-position: center, center; } - body.is-loading *, body.is-loading *:before, body.is-loading *:after, body.is-switching *, body.is-switching *:before, body.is-switching *:after { + body.is-loading *, body.is-loading *:before, body.is-loading *:after { -moz-animation: none !important; -webkit-animation: none !important; -ms-animation: none !important; @@ -83,21 +1639,37 @@ -webkit-transition: none !important; -ms-transition: none !important; transition: none !important; - -moz-transition-delay: none !important; - -webkit-transition-delay: none !important; - -ms-transition-delay: none !important; - transition-delay: none !important; } /* Type */ - html { - font-size: 16pt; + body, input, select, textarea { + color: #ffffff; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 16.5pt; + font-weight: 300; + line-height: 1.65; } @media screen and (max-width: 1680px) { - html { + body, input, select, textarea { + font-size: 13pt; + } + + } + + @media screen and (max-width: 1280px) { + + body, input, select, textarea { + font-size: 12pt; + } + + } + + @media screen and (max-width: 980px) { + + body, input, select, textarea { font-size: 12pt; } @@ -105,42 +1677,83 @@ @media screen and (max-width: 736px) { - html { - font-size: 11pt; + body, input, select, textarea { + font-size: 12pt; } } - @media screen and (max-width: 360px) { + @media screen and (max-width: 640px) { - html { - font-size: 10pt; + body, input, select, textarea { + font-size: 12pt; } } - body, input, select, textarea { - color: #ffffff; - font-family: "Source Sans Pro", sans-serif; - font-weight: 300; - font-size: 1rem; - line-height: 1.65; - } - a { - -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - border-bottom: dotted 1px rgba(255, 255, 255, 0.5); + -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + border-bottom: dotted 1px rgba(255, 255, 255, 0.35); + color: #ffffff; text-decoration: none; - color: inherit; } a:hover { border-bottom-color: transparent; + color: #ffffff !important; } + a.special:not(.button) { + text-decoration: none; + border-bottom: 0; + display: block; + font-family: Raleway, Helvetica, sans-serif; + font-size: 0.8em; + font-weight: 700; + letter-spacing: 0.1em; + margin: 0 0 2em 0; + text-transform: uppercase; + } + + a.special:not(.button):before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } + + a.special:not(.button):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; + border-radius: 100%; + border: solid 2px rgba(255, 255, 255, 0.125); + content: '\f105'; + display: inline-block; + font-size: 1.25em; + height: 2em; + line-height: 1.65em; + margin-right: 0.85em; + text-align: center; + text-indent: 0.15em; + vertical-align: middle; + width: 2em; + } + + a.special:not(.button):hover:before { + background-color: rgba(255, 255, 255, 0.025); + } + + a.special:not(.button):active:before { + background-color: rgba(255, 255, 255, 0.075); + } + strong, b { color: #ffffff; font-weight: 600; @@ -151,16 +1764,16 @@ } p { - margin: 0 0 2rem 0; + margin: 0 0 2em 0; } h1, h2, h3, h4, h5, h6 { color: #ffffff; - font-weight: 600; - line-height: 1.5; - margin: 0 0 1rem 0; + font-family: Raleway, Helvetica, sans-serif; + font-weight: 700; + letter-spacing: 0.1em; + margin: 0 0 1em 0; text-transform: uppercase; - letter-spacing: 0.2rem; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { @@ -168,106 +1781,100 @@ 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 span, h2 span, h3 span, h4 span, h5 span, h6 span { + font-weight: 200; } - h1 { - font-size: 2.25rem; - line-height: 1.3; - letter-spacing: 0.5rem; - } + h1.major, h2.major, h3.major, h4.major, h5.major, h6.major { + padding-bottom: 1em; + border-bottom: solid 2px rgba(255, 255, 255, 0.125); + } h2 { - font-size: 1.5rem; - line-height: 1.4; - letter-spacing: 0.5rem; + font-size: 1.2em; } h3 { - font-size: 1rem; + font-size: 0.9em; } h4 { - font-size: 0.8rem; + font-size: 0.7em; } h5 { - font-size: 0.7rem; + font-size: 0.7em; } h6 { - font-size: 0.6rem; + font-size: 0.7em; } @media screen and (max-width: 736px) { - h1 { - font-size: 1.75rem; - line-height: 1.4; + h2 { + font-size: 1em; } - h2 { - font-size: 1.25em; - line-height: 1.5; + h3 { + font-size: 0.8em; } } sub { - font-size: 0.8rem; + font-size: 0.8em; position: relative; - top: 0.5rem; + top: 0.5em; } sup { - font-size: 0.8rem; + font-size: 0.8em; position: relative; - top: -0.5rem; + top: -0.5em; } blockquote { - border-left: solid 4px #ffffff; + border-left: solid 4px rgba(255, 255, 255, 0.125); font-style: italic; - margin: 0 0 2rem 0; - padding: 0.5rem 0 0.5rem 2rem; + margin: 0 0 2em 0; + padding: 0.5em 0 0.5em 2em; } code { - background: rgba(255, 255, 255, 0.075); - border-radius: 4px; + background: rgba(255, 255, 255, 0.025); + border-radius: 5px; + border: solid 2px rgba(255, 255, 255, 0.125); font-family: "Courier New", monospace; - font-size: 0.9rem; - margin: 0 0.25rem; - padding: 0.25rem 0.65rem; + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; } pre { -webkit-overflow-scrolling: touch; font-family: "Courier New", monospace; - font-size: 0.9rem; - margin: 0 0 2rem 0; + font-size: 0.9em; + margin: 0 0 2em 0; } pre code { display: block; - line-height: 1.75; - padding: 1rem 1.5rem; + line-height: 1.75em; + padding: 1em 1.5em; overflow-x: auto; } hr { border: 0; - border-bottom: solid 1px #ffffff; - margin: 2.75rem 0; + border-bottom: solid 2px rgba(255, 255, 255, 0.125); + margin: 2.5em 0; } + hr.major { + margin: 4em 0; + } + .align-left { text-align: left; } @@ -280,72 +1887,42 @@ text-align: right; } +/* Section/Article */ + + section.special, article.special { + text-align: center; + } + /* Form */ form { - margin: 0 0 2.5rem 0; + margin: 0 0 2em 0; } form .field { - margin: 0 0 1.5rem 0; + margin: 0 0 2em 0; } - form .field.half { - width: 50%; - float: left; - padding: 0 0 0 0.75rem; + form .field label { + margin-top: -1.5em; } - form .field.half.first { - padding: 0 0.75rem 0 0; - } - - form > .actions { - margin: 1.875rem 0 0 0 !important; - } - - @media screen and (max-width: 736px) { - - form .field { - margin: 0 0 1.125rem 0; + form .field:first-child label { + margin-top: 0; } - form .field.half { - padding: 0 0 0 0.5625rem; - } - - form .field.half.first { - padding: 0 0.5625rem 0 0; - } - - form > .actions { - margin: 1.5rem 0 0 0 !important; - } - - } - - @media screen and (max-width: 480px) { - - form .field.half { - width: 100%; - float: none; - padding: 0; - } - - form .field.half.first { - padding: 0; - } - + form > :last-child { + margin-bottom: 0; } 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; + font-family: Raleway, Helvetica, sans-serif; + font-size: 0.8em; + font-weight: 700; + letter-spacing: 0.1em; + margin: 0 0 0.7em 0; text-transform: uppercase; } @@ -359,17 +1936,14 @@ -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: transparent; - border-radius: 4px; - border: solid 1px #ffffff; + background: rgba(255, 255, 255, 0.025); + border-radius: 5px; + border: none; + border: solid 2px rgba(255, 255, 255, 0.125); color: inherit; display: block; outline: 0; - padding: 0 1rem; + padding: 0 1em; text-decoration: none; width: 100%; } @@ -389,16 +1963,9 @@ 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; + border-color: #5b6ba6; } - select option { - background: #1b1f22; - color: #ffffff; - } - .select-wrapper { text-decoration: none; display: block; @@ -415,32 +1982,37 @@ } .select-wrapper:before { - color: #ffffff; - content: '\f107'; + color: rgba(255, 255, 255, 0.125); + content: '\f078'; display: block; - height: 2.75rem; - line-height: calc(2.75rem + 0em); + height: 2.75em; + line-height: 2.75em; pointer-events: none; position: absolute; right: 0; text-align: center; top: 0; - width: 2.75rem; + width: 2.75em; } .select-wrapper select::-ms-expand { display: none; } + select option { + color: #ffffff; + background: #2e3141; + } + input[type="text"], input[type="password"], input[type="email"], select { - height: 2.75rem; + height: 2.75em; } textarea { - padding: 0.75rem 1rem; + padding: 0.75em 1em; } input[type="checkbox"], @@ -451,27 +2023,25 @@ appearance: none; display: block; float: left; - margin-right: -2rem; + margin-right: -2em; opacity: 0; - width: 1rem; + width: 1em; z-index: -1; } 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-size: 1em; + font-family: "Source Sans Pro", Helvetica, sans-serif; + text-transform: none; + letter-spacing: 0; font-weight: 300; - margin: 0 0 0.5rem 0; - padding-left: 2.65rem; - padding-right: 0.75rem; + padding-left: 2.4em; + padding-right: 0.75em; position: relative; } @@ -487,40 +2057,35 @@ 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; + background: rgba(255, 255, 255, 0.025); + border-radius: 5px; + border: solid 2px rgba(255, 255, 255, 0.125); content: ''; display: inline-block; - height: 1.65rem; + height: 1.65em; left: 0; - line-height: calc(1.58125rem + 0em); + line-height: 1.58125em; position: absolute; text-align: center; - top: -0.125rem; - width: 1.65rem; + top: 0; + width: 1.65em; } input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before { - background: #ffffff !important; - border-color: #ffffff !important; - color: #1b1f22; + background: #ffffff; + border-color: #ffffff; content: '\f00c'; + color: #2e3141; } 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; + border-color: #4c5c96; } input[type="checkbox"] + label:before { - border-radius: 4px; + border-radius: 5px; } input[type="radio"] + label:before { @@ -528,36 +2093,36 @@ } ::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.5) !important; + color: rgba(255, 255, 255, 0.35) !important; opacity: 1.0; } :-moz-placeholder { - color: rgba(255, 255, 255, 0.5) !important; + color: rgba(255, 255, 255, 0.35) !important; opacity: 1.0; } ::-moz-placeholder { - color: rgba(255, 255, 255, 0.5) !important; + color: rgba(255, 255, 255, 0.35) !important; opacity: 1.0; } :-ms-input-placeholder { - color: rgba(255, 255, 255, 0.5) !important; + color: rgba(255, 255, 255, 0.35) !important; opacity: 1.0; } - .formerize-placeholder { - color: rgba(255, 255, 255, 0.5) !important; + .polyfill-placeholder { + color: rgba(255, 255, 255, 0.35) !important; opacity: 1.0; } /* Box */ .box { - border-radius: 4px; - border: solid 1px #ffffff; - margin-bottom: 2rem; + border-radius: 5px; + border: solid 2px rgba(255, 255, 255, 0.125); + margin-bottom: 2em; padding: 1.5em; } @@ -597,32 +2162,14 @@ /* Image */ .image { - border-radius: 4px; + border-radius: 5px; border: 0; display: inline-block; position: relative; } - .image:before { - -moz-pointer-events: none; - -webkit-pointer-events: none; - -ms-pointer-events: none; - pointer-events: none; - background-image: url("../../images/overlay.png"); - background-color: rgba(19, 21, 25, 0.5); - border-radius: 4px; - content: ''; - display: block; - height: 100%; - left: 0; - opacity: 0.5; - position: absolute; - top: 0; - width: 100%; - } - .image img { - border-radius: 4px; + border-radius: 5px; display: block; } @@ -648,7 +2195,7 @@ .image.fit { display: block; - margin: 0 0 2rem 0; + margin: 0 0 2em 0; width: 100%; } @@ -658,7 +2205,7 @@ .image.main { display: block; - margin: 2.5rem 0; + margin: 0 0 3em 0; width: 100%; } @@ -666,27 +2213,11 @@ 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; + margin: 0 0 2em 0; padding-left: 1.25em; } @@ -696,7 +2227,7 @@ ul { list-style: disc; - margin: 0 0 2rem 0; + margin: 0 0 2em 0; padding-left: 1em; } @@ -710,7 +2241,7 @@ } ul.alt li { - border-top: solid 1px #ffffff; + border-top: solid 1px rgba(255, 255, 255, 0.125); padding: 0.5em 0; } @@ -727,31 +2258,17 @@ ul.icons li { display: inline-block; - padding: 0 0.75em 0 0; + padding: 0 1em 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 .icon:before { + font-size: 1.25em; } - 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); - } - ul.actions { cursor: default; list-style: none; @@ -760,7 +2277,7 @@ ul.actions li { display: inline-block; - padding: 0 1rem 0 0; + padding: 0 1em 0 0; vertical-align: middle; } @@ -769,12 +2286,12 @@ } ul.actions.small li { - padding: 0 0.5rem 0 0; + padding: 0 0.5em 0 0; } ul.actions.vertical li { display: block; - padding: 1rem 0 0 0; + padding: 1em 0 0 0; } ul.actions.vertical li:first-child { @@ -786,7 +2303,7 @@ } ul.actions.vertical.small li { - padding: 0.5rem 0 0 0; + padding: 0.5em 0 0 0; } ul.actions.vertical.small li:first-child { @@ -795,15 +2312,15 @@ ul.actions.fit { display: table; - margin-left: -1rem; + margin-left: -1em; padding: 0; table-layout: fixed; - width: calc(100% + 1rem); + width: calc(100% + 1em); } ul.actions.fit li { display: table-cell; - padding: 0 0 0 1rem; + padding: 0 0 0 1em; } ul.actions.fit li > * { @@ -811,22 +2328,22 @@ } ul.actions.fit.small { - margin-left: -0.5rem; - width: calc(100% + 0.5rem); + margin-left: -0.5em; + width: calc(100% + 0.5em); } ul.actions.fit.small li { - padding: 0 0 0 0.5rem; + padding: 0 0 0 0.5em; } - @media screen and (max-width: 480px) { + @media screen and (max-width: 640px) { ul.actions { - margin: 0 0 2rem 0; + margin: 0 0 2em 0; } ul.actions li { - padding: 1rem 0 0 0; + padding: 1em 0 0 0; display: block; text-align: center; width: 100%; @@ -841,12 +2358,8 @@ margin: 0 !important; } - ul.actions li > *.icon:before { - margin-left: -2em; - } - ul.actions.small li { - padding: 0.5rem 0 0 0; + padding: 0.5em 0 0 0; } ul.actions.small li:first-child { @@ -855,18 +2368,133 @@ } + ul.contact { + list-style: none; + padding: 0; + } + + ul.contact li { + text-decoration: none; + margin: 2.5em 0 0 0; + padding: 0 0 0 3.25em; + position: relative; + } + + ul.contact li:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } + + ul.contact li:before { + border-radius: 100%; + border: solid 2px rgba(255, 255, 255, 0.125); + display: inline-block; + font-size: 0.8em; + height: 2.5em; + left: 0; + line-height: 2.35em; + position: absolute; + text-align: center; + top: 0; + width: 2.5em; + } + + ul.contact li:first-child { + margin-top: 0; + } + + @media screen and (max-width: 736px) { + + ul.contact li { + margin: 1.5em 0 0 0; + } + + } + + ul.pagination { + cursor: default; + list-style: none; + padding-left: 0; + } + + ul.pagination li { + display: inline-block; + padding-left: 0; + vertical-align: middle; + } + + ul.pagination li > .page { + -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; + border-bottom: 0; + border-radius: 5px; + display: inline-block; + height: 1.5em; + line-height: 1.5em; + margin: 0 0.125em; + min-width: 1.5em; + padding: 0 0.5em; + text-align: center; + } + + ul.pagination li > .page:hover { + background-color: rgba(255, 255, 255, 0.025); + } + + ul.pagination li > .page.active { + background-color: #4c5c96; + } + + ul.pagination li:first-child { + padding-right: 0.75em; + } + + ul.pagination li:last-child { + padding-left: 0.75em; + } + + @media screen and (max-width: 640px) { + + ul.pagination li:nth-child(n+2):nth-last-child(n+2) { + display: none; + } + + ul.pagination li .button { + width: 100%; + } + + ul.pagination li:first-child { + width: calc(50% - 2px); + text-align: left; + padding-right: 0.325em; + } + + ul.pagination li:last-child { + width: calc(50% - 2px); + text-align: right; + padding-left: 0.325em; + } + + } + dl { - margin: 0 0 2rem 0; + margin: 0 0 2em 0; } dl dt { display: block; font-weight: 600; - margin: 0 0 1rem 0; + margin: 0 0 1em 0; } dl dd { - margin-left: 2rem; + margin-left: 2em; } /* Table */ @@ -877,18 +2505,18 @@ } table { - margin: 0 0 2rem 0; + margin: 0 0 2em 0; width: 100%; } table tbody tr { - border: solid 1px #ffffff; + border: solid 1px rgba(255, 255, 255, 0.125); border-left: 0; border-right: 0; } table tbody tr:nth-child(2n + 1) { - background-color: rgba(255, 255, 255, 0.075); + background-color: rgba(255, 255, 255, 0.025); } table td { @@ -904,11 +2532,11 @@ } table thead { - border-bottom: solid 2px #ffffff; + border-bottom: solid 2px rgba(255, 255, 255, 0.125); } table tfoot { - border-top: solid 2px #ffffff; + border-top: solid 2px rgba(255, 255, 255, 0.125); } table.alt { @@ -916,7 +2544,7 @@ } table.alt tbody tr td { - border: solid 1px #ffffff; + border: solid 1px rgba(255, 255, 255, 0.125); border-left-width: 0; border-top-width: 0; } @@ -948,24 +2576,24 @@ -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; + -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; background-color: transparent; - border-radius: 4px; + border-radius: 5px; border: 0; - box-shadow: inset 0 0 0 1px #ffffff; + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125); 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; + font-family: Raleway, Helvetica, sans-serif; + font-size: 0.8em; + font-weight: 700; + height: 3.75em; + letter-spacing: 0.1em; + line-height: 3.75em; + padding: 0 2.25em; text-align: center; text-decoration: none; text-transform: uppercase; @@ -977,7 +2605,7 @@ input[type="button"]:hover, button:hover, .button:hover { - background-color: rgba(255, 255, 255, 0.075); + background-color: rgba(255, 255, 255, 0.025); } input[type="submit"]:active, @@ -985,7 +2613,7 @@ input[type="button"]:active, button:active, .button:active { - background-color: rgba(255, 255, 255, 0.175); + background-color: rgba(255, 255, 255, 0.075); } input[type="submit"].icon:before, @@ -994,16 +2622,7 @@ 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 { - display: block; - margin: 0 0 1rem 0; - width: 100%; + color: rgba(255, 255, 255, 0.35); } input[type="submit"].special, @@ -1011,9 +2630,58 @@ input[type="button"].special, button.special, .button.special { - background-color: #ffffff; - color: #1b1f22 !important; - font-weight: 600; + background-color: #4c5c96; + box-shadow: none; + } + + input[type="submit"].special:hover, + input[type="reset"].special:hover, + input[type="button"].special:hover, + button.special:hover, + .button.special:hover { + background-color: #53639e; + } + + input[type="submit"].special:active, + input[type="reset"].special:active, + input[type="button"].special:active, + button.special:active, + .button.special:active { + background-color: #45558d; + } + + input[type="submit"].special.icon:before, + input[type="reset"].special.icon:before, + input[type="button"].special.icon:before, + button.special.icon:before, + .button.special.icon:before { + color: #7985b0; + } + + input[type="submit"].fit, + input[type="reset"].fit, + input[type="button"].fit, + button.fit, + .button.fit { + display: block; + margin: 0 0 1em 0; + width: 100%; + } + + input[type="submit"].small, + input[type="reset"].small, + input[type="button"].small, + button.small, + .button.small { + font-size: 0.6em; + } + + input[type="submit"].big, + input[type="reset"].big, + input[type="button"].big, + button.big, + .button.big { + font-size: 1em; } input[type="submit"].disabled, input[type="submit"]:disabled, @@ -1025,570 +2693,1175 @@ button:disabled, .button.disabled, .button:disabled { - -moz-pointer-events: none; - -webkit-pointer-events: none; - -ms-pointer-events: none; - pointer-events: none; - cursor: default; opacity: 0.25; } - input[type="submit"], - input[type="reset"], - input[type="button"], - button { - line-height: calc(2.75rem - 2px); - } + @media screen and (max-width: 640px) { -/* BG */ + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + padding: 0; + } - #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; - } +/* Features */ - #bg:after { - -moz-transform: scale(1.125); - -webkit-transform: scale(1.125); - -ms-transform: scale(1.125); - transform: scale(1.125); - -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out; - -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out; - -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out; - transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out; - background-image: url("../../images/bg.jpg"); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - z-index: 1; - } - - 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-loading #bg:before { - background-color: #000000; - } - -/* Wrapper */ - - #wrapper { + .features { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - -moz-justify-content: space-between; - -webkit-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - position: relative; - min-height: 100vh; - width: 100%; - padding: 4rem 2rem; - z-index: 3; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: 0 0 2em 0; } - #wrapper:before { - content: ''; - display: block; + .features article { + padding: 1.75em 1.75em 0.1em 1.75em ; + background-color: #353849; + border-radius: 5px; + margin: 1.5em 3em 1.5em 0; + width: calc(50% - 1.5em); } - @media screen and (max-width: 1680px) { + .features article:nth-child(2n) { + margin-right: 0; + } - #wrapper { - padding: 3rem 2rem; + .features article .image { + border-radius: 5px 5px 0 0; + display: block; + margin-bottom: 1.75em; + margin-left: -1.75em; + margin-top: -1.75em; + position: relative; + width: calc(100% + 3.5em); + } + + .features article .image img { + border-radius: 5px 5px 0 0; + width: 100%; + } + + @media screen and (max-width: 980px) { + + .features article { + margin: 1em 2em 1em 0; + width: calc(50% - 1em); } } @media screen and (max-width: 736px) { - #wrapper { - padding: 2rem 1rem; + .features article { + padding: 1.5em 1.5em 0.1em 1.5em ; + margin: 0.875em 1.75em 0.875em 0; + width: calc(50% - 0.875em - 1px); } + .features article .image { + margin-bottom: 1.5em; + margin-left: -1.5em; + margin-top: -1.5em; + width: calc(100% + 3em); + } + } - @media screen and (max-width: 480px) { + @media screen and (max-width: 640px) { - #wrapper { - padding: 1rem; + .features { + display: block; } + .features article { + width: 100%; + margin: 0 0 2em 0 !important; + } + } /* 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%, transparent 55%); - background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.25) 25%, transparent 55%); - background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.25) 25%, transparent 55%); - background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, transparent 55%); - max-width: 100%; - text-align: center; + -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; + background-color: rgba(53, 56, 73, 0.95); + height: 3.5em; + left: 0; + line-height: 3.5em; + padding: 0 1.25em; + position: fixed; + top: 0; + width: 100%; + z-index: 10000; } - #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; - top: calc(-3.5rem - 1px); - left: calc(50% - 1px); - width: 1px; - height: calc(3.5rem + 1px); - background: #ffffff; - } - - #header > :first-child { - margin-top: 0; - } - - #header > :first-child:before { - display: none; - } - - #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; + #header h1 { + -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s; + -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s; + -ms-transition: opacity 0.2s ease-in-out, visibility 0.2s; + transition: opacity 0.2s ease-in-out, visibility 0.2s; + border-bottom: 0; + font-size: 0.8em; margin-bottom: 0; - list-style: none; - padding-left: 0; - border: solid 1px #ffffff; - border-radius: 4px; + opacity: 1; + visibility: visible; } - #header nav ul li { - padding-left: 0; - border-left: solid 1px #ffffff; + #header h1 a { + border: 0; } - #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; + #header nav { + font-family: Raleway, Helvetica, sans-serif; + font-size: 0.8em; + font-weight: 700; + height: 3em; + letter-spacing: 0.1em; + line-height: 3em; position: absolute; - top: 0; - left: calc(50% - 1px); - width: 1px; - height: 100%; - background: #ffffff; + right: 0.7em; + text-transform: uppercase; + top: 0.7em; } - #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-loading #header { - -moz-filter: blur(0.125rem); - -webkit-filter: blur(0.125rem); - -ms-filter: blur(0.125rem); - filter: blur(0.125rem); - } - - body.is-loading #header > * { - opacity: 0; + #header nav a { + border: 0; + display: inline-block; + padding: 0 1em; } - body.is-loading #header .content .inner { - max-height: 0; - padding-top: 0; - padding-bottom: 0; - opacity: 0; - } - - @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 nav a:before { + float: right; + margin-left: 0.75em; } - #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; - max-width: 100%; - z-index: 3; - } - - #main article { - -moz-transform: translateY(0.25rem); - -webkit-transform: translateY(0.25rem); - -ms-transform: translateY(0.25rem); - transform: translateY(0.25rem); - -moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out; - -webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out; - -ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out; - transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out; - padding: 4.5rem 2.5rem 1.5rem 2.5rem ; - position: relative; - width: 40rem; - max-width: 100%; - background-color: rgba(27, 31, 34, 0.85); - border-radius: 4px; - opacity: 0; - } - - #main article.active { - -moz-transform: translateY(0); - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - opacity: 1; - } - - #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 { + #header nav a[href="#menu"] { + text-decoration: none; -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; + border-radius: 5px; + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125); + padding: 0 1.35em; } - #main article .close:hover:before { - background-color: rgba(255, 255, 255, 0.075); - } + #header nav a[href="#menu"]:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } - #main article .close:active:before { - background-color: rgba(255, 255, 255, 0.175); - } + #header nav a[href="#menu"]:before { + content: '\f0c9'; + } + + #header nav a[href="#menu"]:hover { + background-color: rgba(255, 255, 255, 0.025); + } + + #header nav a[href="#menu"]:active { + background-color: rgba(255, 255, 255, 0.075); + } + + #header.alt { + background-color: transparent; + } + + #header.alt h1 { + opacity: 0; + visibility: hidden; + } @media screen and (max-width: 736px) { - #main article { - padding: 3.5rem 2rem 0.5rem 2rem ; + #header { + height: 2.75em; + line-height: 2.75em; } - #main article .close:before { - top: 0.875rem; - left: 0.875rem; - width: 2.25rem; - height: 2.25rem; - background-size: 14px 14px; + #header nav { + top: 0; + right: 0; + height: inherit; + line-height: inherit; + } + + #header nav a { + height: inherit; + line-height: inherit; + } + + #header nav a[href="#menu"] { + box-shadow: none; + padding: 0 1em; + border-radius: 0; + } + + #header nav a[href="#menu"]:hover, #header nav a[href="#menu"]:active { + background-color: inherit; + } + + } + + @media screen and (max-width: 640px) { + + #header nav a[href="#menu"] { + width: 4em; + white-space: nowrap; + text-indent: 4em; + position: relative; + } + + #header nav a[href="#menu"]:before { + width: inherit; + position: absolute; + top: 0; + left: 0; + text-indent: 0; + text-align: right; + margin-left: 0; + padding-right: 1.25em; } } - @media screen and (max-width: 480px) { +/* Menu */ - #main article { - padding: 3rem 1.5rem 0.5rem 1.5rem ; + #page-wrapper { + -moz-transition: -moz-filter 0.25s ease; + -webkit-transition: -webkit-filter 0.25s ease; + -ms-transition: -ms-filter 0.25s ease; + transition: filter 0.25s ease; + } + + #menu { + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + -moz-transition: opacity 0.35s ease, visibility 0.35s; + -webkit-transition: opacity 0.35s ease, visibility 0.35s; + -ms-transition: opacity 0.35s ease, visibility 0.35s; + transition: opacity 0.35s ease, visibility 0.35s; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; + background: rgba(46, 49, 65, 0.8); + cursor: default; + height: 100%; + left: 0; + opacity: 0; + position: fixed; + text-align: center; + top: 0; + visibility: hidden; + width: 100%; + } + + #menu .inner { + padding: 2.5em 1.5em 0.5em 1.5em ; + -moz-transform: translateY(0.5em); + -webkit-transform: translateY(0.5em); + -ms-transform: translateY(0.5em); + transform: translateY(0.5em); + -moz-transition: opacity 0.35s ease, -moz-transform 0.35s ease; + -webkit-transition: opacity 0.35s ease, -webkit-transform 0.35s ease; + -ms-transition: opacity 0.35s ease, -ms-transform 0.35s ease; + transition: opacity 0.35s ease, transform 0.35s ease; + -webkit-overflow-scrolling: touch; + background: #4c5c96; + border-radius: 5px; + display: block; + max-width: 100%; + opacity: 0; + position: relative; + width: 18em; + } + + #menu h2 { + border-bottom: solid 2px rgba(255, 255, 255, 0.125); + padding-bottom: 1em; + } + + #menu .close { + background-image: url("images/close.svg"); + background-position: 75% 25%; + background-repeat: no-repeat; + background-size: 2em 2em; + border: 0; + content: ''; + display: block; + height: 4em; + overflow: hidden; + position: absolute; + right: 0; + text-align: center; + text-indent: 4em; + top: 0; + width: 4em; + } + + #menu .links { + list-style: none; + margin-bottom: 1.5em; + padding: 0; + } + + #menu .links li { + padding: 0; + } + + #menu .links li a { + border-radius: 5px; + border: 0; + display: block; + font-family: Raleway, Helvetica, sans-serif; + font-size: 0.8em; + font-weight: 200; + letter-spacing: 0.1em; + line-height: 1.85em; + padding: 0.75em 0; + text-transform: uppercase; + } + + #menu .links li a:hover { + background: #45558d; + } + + @media screen and (max-width: 736px) { + + #menu .inner { + max-height: 100%; + overflow-y: auto; + overflow-x: hidden; + } + + #menu .inner .close { + background-size: 1.5em 1.5em; + } + + } + + body.is-menu-visible #page-wrapper { + -moz-filter: blur(1.5px); + -webkit-filter: blur(1.5px); + -ms-filter: blur(1.5px); + filter: blur(1.5px); + } + + body.is-menu-visible #menu { + -moz-pointer-events: auto; + -webkit-pointer-events: auto; + -ms-pointer-events: auto; + pointer-events: auto; + opacity: 1; + visibility: visible; + } + + body.is-menu-visible #menu .inner { + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + +/* Banner */ + + #banner { + padding: 10em 0 4.75em 0 ; + } + + #banner .inner { + margin: 0 auto; + width: 55em; + } + + #banner .logo { + -moz-transition: opacity 2s ease, -moz-transform 1s ease; + -webkit-transition: opacity 2s ease, -webkit-transform 1s ease; + -ms-transition: opacity 2s ease, -ms-transform 1s ease; + transition: opacity 2s ease, transform 1s ease; + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + margin: 0 0 1.3em 0; + } + + #banner .logo .icon { + border-radius: 100%; + border: solid 2px rgba(255, 255, 255, 0.125); + cursor: default; + display: inline-block; + font-size: 2em; + height: 2.25em; + line-height: 2.25em; + text-align: center; + width: 2.25em; + } + + #banner h2 { + -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease, -moz-filter 0.25s ease; + -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease, -webkit-filter 0.25s ease; + -ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease, -ms-filter 0.25s ease; + transition: opacity 0.5s ease, transform 0.5s ease, filter 0.25s ease; + -moz-transform: translateX(0); + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -moz-transition-delay: 0.65s; + -webkit-transition-delay: 0.65s; + -ms-transition-delay: 0.65s; + transition-delay: 0.65s; + -moz-filter: blur(0); + -webkit-filter: blur(0); + -ms-filter: blur(0); + filter: blur(0); + opacity: 1; + border-bottom: solid 2px rgba(255, 255, 255, 0.125); + font-size: 2.25em; + margin-bottom: 0.8em; + padding-bottom: 0.4em; + } + + #banner p { + -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease, -moz-filter 0.25s ease; + -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease, -webkit-filter 0.25s ease; + -ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease, -ms-filter 0.25s ease; + transition: opacity 0.5s ease, transform 0.5s ease, filter 0.25s ease; + -moz-transform: translateX(0); + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -moz-transition-delay: 0.8s; + -webkit-transition-delay: 0.8s; + -ms-transition-delay: 0.8s; + transition-delay: 0.8s; + -moz-filter: blur(0); + -webkit-filter: blur(0); + -ms-filter: blur(0); + filter: blur(0); + opacity: 1; + font-family: Raleway, Helvetica, sans-serif; + font-size: 1em; + font-weight: 200; + letter-spacing: 0.1em; + line-height: 2; + text-transform: uppercase; + } + + @media screen and (max-width: 1280px) { + + #banner { + padding: 7em 0 8.25em 0 ; + background-color: #2e3141; + background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg"); + background-size: auto, cover; + background-position: center, center; + margin-bottom: -6.5em; + } + + } + + @media screen and (max-width: 980px) { + + #banner { + padding: 12em 3em 12.375em 3em ; + margin-bottom: -4.75em; + } + + #banner .inner { + width: 100%; + } + + } + + @media screen and (max-width: 736px) { + + #banner { + padding: 5em 2em 4.25em 2em ; + margin-bottom: -2.5em; + } + + #banner .logo { + margin: 0 0 1em 0; + } + + #banner .logo .icon { + font-size: 1.5em; + } + + #banner h2 { + font-size: 1.5em; + } + + #banner p { + font-size: 0.8em; + } + + } + + body.is-loading #banner .logo { + -moz-transform: translateY(0.5em); + -webkit-transform: translateY(0.5em); + -ms-transform: translateY(0.5em); + transform: translateY(0.5em); + opacity: 0; + } + + body.is-loading #banner h2 { + opacity: 0; + -moz-transform: translateX(0.25em); + -webkit-transform: translateX(0.25em); + -ms-transform: translateX(0.25em); + transform: translateX(0.25em); + -moz-filter: blur(2px); + -webkit-filter: blur(2px); + -ms-filter: blur(2px); + filter: blur(2px); + } + + body.is-loading #banner p { + opacity: 0; + -moz-transform: translateX(0.5em); + -webkit-transform: translateX(0.5em); + -ms-transform: translateX(0.5em); + transform: translateX(0.5em); + -moz-filter: blur(2px); + -webkit-filter: blur(2px); + -ms-filter: blur(2px); + filter: blur(2px); + } + +/* Wrapper */ + + #wrapper > header { + padding: 11em 0 2.25em 0 ; + } + + #wrapper > header .inner { + margin: 0 auto; + width: 55em; + } + + #wrapper > header h2 { + border-bottom: solid 2px rgba(255, 255, 255, 0.125); + font-size: 2em; + margin-bottom: 0.8em; + padding-bottom: 0.4em; + } + + #wrapper > header p { + font-family: Raleway, Helvetica, sans-serif; + font-size: 1em; + font-weight: 200; + letter-spacing: 0.1em; + line-height: 2; + text-transform: uppercase; + } + + @media screen and (max-width: 1280px) { + + #wrapper > header { + padding: 9em 0 6.25em 0 ; + background-color: #2e3141; + background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg"); + background-size: auto, cover; + background-position: center, 0% 30%; + margin-bottom: -6.5em; + } + + } + + @media screen and (max-width: 980px) { + + #wrapper > header { + padding: 11em 3em 7.375em 3em ; + background-size: auto, cover; + background-position: center, 0% 0%; + margin-bottom: -4.75em; + } + + #wrapper > header .inner { + width: 100%; + } + + } + + @media screen and (max-width: 736px) { + + #wrapper > header { + padding: 6.5em 2em 3em 2em ; + background-size: auto, 125%; + margin-bottom: -2.5em; + } + + #wrapper > header h2 { + font-size: 1.25em; + } + + #wrapper > header p { + font-size: 0.8em; + } + + } + + .wrapper { + background-color: #2e3141; + margin: 6.5em 0; + position: relative; + } + + .wrapper:before, .wrapper:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232e3141%3B' /%3E%3C/svg%3E"); + } + + .wrapper:before { + box-shadow: inset 0 -1px 0 0 #2e3141, 0 1px 0 0 #2e3141; + } + + .wrapper:after { + box-shadow: inset 0 -1px 0 0 #2e3141, 0 1px 0 0 #2e3141; + } + + .wrapper:before, .wrapper:after { + background-repeat: no-repeat; + background-size: 100% 100%; + content: ''; + display: block; + height: 6.5em; + position: absolute; + width: 100%; + } + + .wrapper:before { + left: 0; + top: -6.5em; + } + + .wrapper:after { + -moz-transform: scaleY(-1); + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); + bottom: -6.5em; + left: 0; + } + + .wrapper.alt:before { + -moz-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + -ms-transform: scaleX(-1); + transform: scaleX(-1); + } + + .wrapper.alt:after { + -moz-transform: scaleY(-1) scaleX(-1); + -webkit-transform: scaleY(-1) scaleX(-1); + -ms-transform: scaleY(-1) scaleX(-1); + transform: scaleY(-1) scaleX(-1); + } + + .wrapper .inner { + padding: 3em 0 1em 0 ; + margin: 0 auto; + width: 55em; + } + + .wrapper.style2 { + background-color: #353849; + } + + .wrapper.style2:before, .wrapper.style2:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23353849%3B' /%3E%3C/svg%3E"); + } + + .wrapper.style2:before { + box-shadow: inset 0 -1px 0 0 #353849, 0 1px 0 0 #353849; + } + + .wrapper.style2:after { + box-shadow: inset 0 -1px 0 0 #353849, 0 1px 0 0 #353849; + } + + .wrapper.style3 { + background-color: #3d4051; + } + + .wrapper.style3:before, .wrapper.style3:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233d4051%3B' /%3E%3C/svg%3E"); + } + + .wrapper.style3:before { + box-shadow: inset 0 -1px 0 0 #3d4051, 0 1px 0 0 #3d4051; + } + + .wrapper.style3:after { + box-shadow: inset 0 -1px 0 0 #3d4051, 0 1px 0 0 #3d4051; + } + + .wrapper.style4 { + background-color: #454858; + } + + .wrapper.style4:before, .wrapper.style4:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23454858%3B' /%3E%3C/svg%3E"); + } + + .wrapper.style4:before { + box-shadow: inset 0 -1px 0 0 #454858, 0 1px 0 0 #454858; + } + + .wrapper.style4:after { + box-shadow: inset 0 -1px 0 0 #454858, 0 1px 0 0 #454858; + } + + .wrapper.style5 { + background-color: #4d5060; + } + + .wrapper.style5:before, .wrapper.style5:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%234d5060%3B' /%3E%3C/svg%3E"); + } + + .wrapper.style5:before { + box-shadow: inset 0 -1px 0 0 #4d5060, 0 1px 0 0 #4d5060; + } + + .wrapper.style5:after { + box-shadow: inset 0 -1px 0 0 #4d5060, 0 1px 0 0 #4d5060; + } + + .wrapper.style6 { + background-color: #555867; + } + + .wrapper.style6:before, .wrapper.style6:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23555867%3B' /%3E%3C/svg%3E"); + } + + .wrapper.style6:before { + box-shadow: inset 0 -1px 0 0 #555867, 0 1px 0 0 #555867; + } + + .wrapper.style6:after { + box-shadow: inset 0 -1px 0 0 #555867, 0 1px 0 0 #555867; + } + + .wrapper.spotlight { + background-color: #4c5c96; + } + + .wrapper.spotlight:before, .wrapper.spotlight:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%234c5c96%3B' /%3E%3C/svg%3E"); + } + + .wrapper.spotlight:before { + box-shadow: inset 0 -1px 0 0 #4c5c96, 0 1px 0 0 #4c5c96; + } + + .wrapper.spotlight:after { + box-shadow: inset 0 -1px 0 0 #4c5c96, 0 1px 0 0 #4c5c96; + } + + .wrapper.spotlight .inner { + 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-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + + .wrapper.spotlight .image { + border-radius: 100%; + margin: 0 3em 2em 0; + width: 22em; + overflow: hidden; + -ms-flex: 1; + } + + .wrapper.spotlight .image img { + border-radius: 100%; + width: 100%; + } + + .wrapper.spotlight .content { + width: 100%; + -ms-flex: 2; + } + + .wrapper.spotlight:nth-child(2n - 1) .inner { + -moz-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + text-align: right; + } + + .wrapper.spotlight:nth-child(2n - 1) .image { + margin: 0 0 2em 3em; + } + + .wrapper.spotlight.style2 { + background-color: #45558d; + } + + .wrapper.spotlight.style2:before, .wrapper.spotlight.style2:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2345558d%3B' /%3E%3C/svg%3E"); + } + + .wrapper.spotlight.style2:before { + box-shadow: inset 0 -1px 0 0 #45558d, 0 1px 0 0 #45558d; + } + + .wrapper.spotlight.style2:after { + box-shadow: inset 0 -1px 0 0 #45558d, 0 1px 0 0 #45558d; + } + + .wrapper.spotlight.style3 { + background-color: #3f4e85; + } + + .wrapper.spotlight.style3:before, .wrapper.spotlight.style3:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233f4e85%3B' /%3E%3C/svg%3E"); + } + + .wrapper.spotlight.style3:before { + box-shadow: inset 0 -1px 0 0 #3f4e85, 0 1px 0 0 #3f4e85; + } + + .wrapper.spotlight.style3:after { + box-shadow: inset 0 -1px 0 0 #3f4e85, 0 1px 0 0 #3f4e85; + } + + .wrapper.spotlight.style4 { + background-color: #39477c; + } + + .wrapper.spotlight.style4:before, .wrapper.spotlight.style4:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2339477c%3B' /%3E%3C/svg%3E"); + } + + .wrapper.spotlight.style4:before { + box-shadow: inset 0 -1px 0 0 #39477c, 0 1px 0 0 #39477c; + } + + .wrapper.spotlight.style4:after { + box-shadow: inset 0 -1px 0 0 #39477c, 0 1px 0 0 #39477c; + } + + .wrapper.spotlight.style5 { + background-color: #324072; + } + + .wrapper.spotlight.style5:before, .wrapper.spotlight.style5:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23324072%3B' /%3E%3C/svg%3E"); + } + + .wrapper.spotlight.style5:before { + box-shadow: inset 0 -1px 0 0 #324072, 0 1px 0 0 #324072; + } + + .wrapper.spotlight.style5:after { + box-shadow: inset 0 -1px 0 0 #324072, 0 1px 0 0 #324072; + } + + .wrapper.spotlight.style6 { + background-color: #2d3a69; + } + + .wrapper.spotlight.style6:before, .wrapper.spotlight.style6:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232d3a69%3B' /%3E%3C/svg%3E"); + } + + .wrapper.spotlight.style6:before { + box-shadow: inset 0 -1px 0 0 #2d3a69, 0 1px 0 0 #2d3a69; + } + + .wrapper.spotlight.style6:after { + box-shadow: inset 0 -1px 0 0 #2d3a69, 0 1px 0 0 #2d3a69; + } + + @media screen and (max-width: 980px) { + + .wrapper { + margin: 4.75em 0; + } + + .wrapper:before, .wrapper:after { + height: 4.75em; + } + + .wrapper:before { + top: -4.75em; + } + + .wrapper:after { + bottom: -4.75em; + left: 0; + } + + .wrapper .inner { + padding: 3em 3em 1em 3em ; + width: 100%; + } + + .wrapper.spotlight .image { + margin: 0 2em 2em 0; + width: 32em; + } + + .wrapper.spotlight:nth-child(2n - 1) .image { + margin: 0 0 2em 2em; + } + + } + + @media screen and (max-width: 736px) { + + .wrapper { + margin: 2.5em 0; + } + + .wrapper:before, .wrapper:after { + height: 2.5em; + } + + .wrapper:before { + top: -2.5em; + } + + .wrapper:after { + bottom: -2.5em; + left: 0; + } + + .wrapper .inner { + padding: 2em 2em 0.1em 2em ; + } + + .wrapper.spotlight .inner { + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + } + + .wrapper.spotlight .image { + width: 19em; + margin: 0 1.75em 2em 0; + } + + .wrapper.spotlight:nth-child(2n - 1) .image { + margin: 0 0 2em 1.75em; + } + + } + + @media screen and (max-width: 640px) { + + .wrapper.spotlight .inner { + display: block; + } + + .wrapper.spotlight .image { + margin: 0 0 1em 0 !important; + max-width: 85%; + width: 12em; + } + + } + + @media screen and (max-width: 360px) { + + .wrapper .inner { + padding: 2em 1.5em 0.1em 1.5em ; } } /* Footer */ - #footer { - -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - width: 100%; - max-width: 100%; - margin-top: 2rem; - text-align: center; + #footer .inner { + padding: 5em 0 3em 0 ; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: 0 auto; + width: 55em; } - #footer .copyright { - letter-spacing: 0.2rem; - font-size: 0.6rem; - opacity: 0.75; - margin-bottom: 0; - text-transform: uppercase; + #footer .inner > * { + width: 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; + #footer .inner form { + margin: 0 3em 0 0; + width: calc(50% - 1.5em); } - body.is-loading #footer { - opacity: 0; - } \ No newline at end of file + #footer .inner .contact { + width: calc(50% - 1.5em); + } + + #footer .inner .copyright { + border-top: solid 2px rgba(255, 255, 255, 0.125); + list-style: none; + margin: 4em 0 2em 0; + padding: 2em 0 0 0; + width: 100%; + } + + #footer .inner .copyright li { + border-left: solid 2px rgba(255, 255, 255, 0.125); + color: rgba(255, 255, 255, 0.35); + display: inline-block; + font-size: 0.9em; + line-height: 1; + margin-left: 1em; + padding: 0; + padding-left: 1em; + } + + #footer .inner .copyright li:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + #footer .inner .copyright li a { + color: inherit; + } + + @media screen and (max-width: 1280px) { + + #footer { + background-color: #2e3141; + background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg"); + background-size: auto, cover; + background-position: center, center; + margin-top: -6.5em; + padding-top: 6.5em; + } + + } + + @media screen and (max-width: 980px) { + + #footer { + margin-top: -4.75em; + padding-top: 4.75em; + } + + #footer .inner { + padding: 3em 3em 1em 3em ; + display: block; + width: 100%; + } + + #footer .inner form { + width: 100%; + margin: 0 0 4em 0; + } + + #footer .inner .contact { + width: 100%; + margin: 0 0 4em 0; + } + + #footer .inner .copyright { + margin: 4em 0 2em 0; + } + + } + + @media screen and (max-width: 736px) { + + #footer { + margin-top: -2.5em; + padding-top: 2.5em; + } + + #footer .inner { + padding: 2em 2em 0.1em 2em ; + } + + #footer .inner form { + margin: 0 0 3em 0; + } + + #footer .inner .contact { + margin: 0 0 3em 0; + } + + } + + @media screen and (max-width: 640px) { + + #footer .inner .copyright li { + border-left: 0; + display: block; + margin: 1em 0 0 0; + padding-left: 0; + } + + #footer .inner .copyright li:first-child { + margin-top: 0; + } + + } + + @media screen and (max-width: 360px) { + + #footer .inner { + padding: 2em 1.5em 0.1em 1.5em ; + } + + } \ No newline at end of file diff --git a/assets/css/noscript.css b/assets/css/noscript.css deleted file mode 100644 index 61ee6e1..0000000 --- a/assets/css/noscript.css +++ /dev/null @@ -1,12 +0,0 @@ -/* - Dimension by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -/* Main */ - - #main article { - opacity: 1; - margin: 4rem 0 0 0; - } \ No newline at end of file diff --git a/assets/favicon.ico b/assets/favicon.ico deleted file mode 100644 index 847f6ef601f259ccefb603019fceb5b4a6559f7d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1150 zcma)4TTok76x~3nJen7|H#f=6&CUDXkc99^3N3{6;f%C?)Gw{AiZhPbTI*D#Uw(+S zGL`b04pZKcgja!LQKzNO)JH|FqLn&04%!KMkx^f&!sJ?0=4@=Uhk?NvjH-tj1}a3NrqJC&X5_32#(;nLXhZOkew-2D|a70p{(iq zi9S7tmQVyu!6;HEKKYA!vb9TD{D>f-Es(1;!4}E_a?S;L77yVo1gU~m%POj0r)#=a zH7z$#+Y>|ENCM5niFKwUf|@rzUZJ1utj}@mGiNJ|kez3QT-pX2`!>*v9)|WGY^7>C z?=nqaqh%z8?zd8?>4_rKxrl|6NfahlP}?wbM_GO5l*CwWA!ZP#AdO-Km2Ss@0o_Z1 zU-^!2kqs;%+ZRRQTmp@ODDr_g7ERqk_vA8)6St9XocTp{pkYA5c`GCaFD*0rnlwlH z?ociBXc$al{@4=g`(vo;h+^@D6qa8kx}*>1coN;`Q)nMsMqB4Mf0%1~zf)B{^(Ou3 z$!Wf0{=R8wLzm3i8$n|zj@H2#a)B7(SjN(+6naQ>jxM1s7)Nm=iQ<{hk$<`&p?>ws zg1mKsU=nBq>A$Op+?4<*nVilI21K^=1V_4B(>&0P0Ec|5;ZF>)-3Qx!M2# diff --git a/assets/images/pic04.jpg b/assets/images/pic04.jpg new file mode 100644 index 0000000000000000000000000000000000000000..01a96a21b9a21c98c49a319ae6c9009f50f9bab5 GIT binary patch literal 5677 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 Jw0Gur{|hlC=~(~( literal 0 HcmV?d00001 diff --git a/assets/images/pic05.jpg b/assets/images/pic05.jpg new file mode 100644 index 0000000000000000000000000000000000000000..06ef1a057629f90079e0c3c29fd848154a6608ab GIT binary patch literal 5936 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 A0RR91 literal 0 HcmV?d00001 diff --git a/assets/images/pic06.jpg b/assets/images/pic06.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0a615d9598b12092e35119d761fe369f3a5013fd GIT binary patch literal 5887 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 literal 0 HcmV?d00001 diff --git a/assets/images/pic07.jpg b/assets/images/pic07.jpg new file mode 100644 index 0000000000000000000000000000000000000000..251251c6575c70c012b2f464c527efad56992930 GIT binary patch literal 6325 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 i)lX3wN%62mO;ef&)T%1{FAfO|G-~JzXI3|k# literal 0 HcmV?d00001 diff --git a/assets/js/ie/PIE.htc b/assets/js/ie/PIE.htc new file mode 100644 index 0000000..ca3b547 --- /dev/null +++ b/assets/js/ie/PIE.htc @@ -0,0 +1,96 @@ + + + + + + + + + diff --git a/assets/js/ie/backgroundsize.min.htc b/assets/js/ie/backgroundsize.min.htc new file mode 100644 index 0000000..3d9960d --- /dev/null +++ b/assets/js/ie/backgroundsize.min.htc @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/assets/js/ie/html5shiv.js b/assets/js/ie/html5shiv.js new file mode 100644 index 0000000..dcf351c --- /dev/null +++ b/assets/js/ie/html5shiv.js @@ -0,0 +1,8 @@ +/* + HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed +*/ +(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); +a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; +c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| +"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); +for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d #mq-test-1 { width: 42px; }',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b1){for(var r=0;r=i&&o>=t};break;case"bottom":h=function(t,e,n,i,o){return n>=i&&o>=n};break;case"middle":h=function(t,e,n,i,o){return e>=i&&o>=e};break;case"top-only":h=function(t,e,n,i,o){return i>=t&&n>=i};break;case"bottom-only":h=function(t,e,n,i,o){return n>=o&&o>=t};break;default:case"default":h=function(t,e,n,i,o){return n>=i&&o>=t}}return c=function(t){var i,o,l,s,r,a,u=this.state,h=!1,c=this.$element.offset();i=n.height(),o=t+i/2,l=t+i,s=this.$element.outerHeight(),r=c.top+e(this.options.top,s,i),a=c.top+s-e(this.options.bottom,s,i),h=this.test(t,o,l,r,a),h!=u&&(this.state=h,h?this.options.enter&&this.options.enter.apply(this.element):this.options.leave&&this.options.leave.apply(this.element)),this.options.scroll&&this.options.scroll.apply(this.element,[(o-r)/(a-r)])},p={id:a,options:u,test:h,handler:c,state:null,element:this,$element:s,timeoutId:null},o[a]=p,s.data("_scrollexId",p.id),p.options.initialize&&p.options.initialize.apply(this),s},jQuery.fn.unscrollex=function(){var e=t(this);if(0==this.length)return e;if(this.length>1){for(var n=0;n 0 + && $header.hasClass('alt')) { - clearTimeout(flexboxFixTimeoutId); + $window.on('resize', function() { $window.trigger('scroll'); }); - flexboxFixTimeoutId = setTimeout(function() { - - if ($wrapper.prop('scrollHeight') > $window.height()) - $wrapper.css('height', 'auto'); - else - $wrapper.css('height', '100vh'); - - }, 250); - - }).triggerHandler('resize.flexbox-fix'); + $banner.scrollex({ + bottom: $header.outerHeight(), + terminate: function() { $header.removeClass('alt'); }, + enter: function() { $header.addClass('alt'); }, + leave: function() { $header.removeClass('alt'); } + }); } - // Nav. - var $nav = $header.children('nav'), - $nav_li = $nav.find('li'); + // Menu. + var $menu = $('#menu'); - // Add "middle" alignment classes if we're dealing with an even number of items. - if ($nav_li.length % 2 == 0) { + $menu._locked = false; - $nav.addClass('use-middle'); - $nav_li.eq( ($nav_li.length / 2) ).addClass('is-middle'); + $menu._lock = function() { - } + if ($menu._locked) + return false; - // Main. - var delay = 325, - locked = false; + $menu._locked = true; - // Methods. - $main._show = function(id, initial) { + window.setTimeout(function() { + $menu._locked = false; + }, 350); - var $article = $main_articles.filter('#' + id); + return true; - // No such article? Bail. - if ($article.length == 0) - return; + }; - // Handle lock. + $menu._show = function() { - // Already locked? Speed through "show" steps w/o delays. - if (locked || (typeof initial != 'undefined' && initial === true)) { + if ($menu._lock()) + $body.addClass('is-menu-visible'); - // Mark as switching. - $body.addClass('is-switching'); + }; - // Mark as visible. - $body.addClass('is-article-visible'); + $menu._hide = function() { - // Deactivate all articles (just in case one's already active). - $main_articles.removeClass('active'); + if ($menu._lock()) + $body.removeClass('is-menu-visible'); - // Hide header, footer. - $header.hide(); - $footer.hide(); + }; - // Show main, article. - $main.show(); - $article.show(); + $menu._toggle = function() { - // Activate article. - $article.addClass('active'); + if ($menu._lock()) + $body.toggleClass('is-menu-visible'); - // Unlock. - locked = false; + }; - // Unmark as switching. - setTimeout(function() { - $body.removeClass('is-switching'); - }, (initial ? 1000 : 0)); + $menu + .appendTo($body) + .on('click', function(event) { - return; + event.stopPropagation(); - } + // Hide. + $menu._hide(); - // Lock. - locked = true; + }) + .find('.inner') + .on('click', '.close', function(event) { - // Article already visible? Just swap articles. - if ($body.hasClass('is-article-visible')) { + event.preventDefault(); + event.stopPropagation(); + event.stopImmediatePropagation(); - // Deactivate current article. - var $currentArticle = $main_articles.filter('.active'); + // Hide. + $menu._hide(); - $currentArticle.removeClass('active'); + }) + .on('click', function(event) { + event.stopPropagation(); + }) + .on('click', 'a', function(event) { - // Show article. - setTimeout(function() { + var href = $(this).attr('href'); - // Hide current article. - $currentArticle.hide(); + event.preventDefault(); + event.stopPropagation(); - // Show article. - $article.show(); + // Hide. + $menu._hide(); - // Activate article. - setTimeout(function() { + // Redirect. + window.setTimeout(function() { + window.location.href = href; + }, 350); - $article.addClass('active'); + }); - // Window stuff. - $window - .scrollTop(0) - .triggerHandler('resize.flexbox-fix'); + $body + .on('click', 'a[href="#menu"]', function(event) { - // Unlock. - setTimeout(function() { - locked = false; - }, delay); + event.stopPropagation(); + event.preventDefault(); - }, 25); + // Toggle. + $menu._toggle(); - }, delay); + }) + .on('keydown', function(event) { - } - - // 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(); - }); + // Hide on escape. + if (event.keyCode == 27) + $menu._hide(); }); - // 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/sass/base/_page.scss b/assets/sass/base/_page.scss index 1eba1f9..84e97e3 100644 --- a/assets/sass/base/_page.scss +++ b/assets/sass/base/_page.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Solid State by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -11,6 +11,11 @@ width: device-width; } + // MSIE: Prevents scrollbar from overlapping content. + body { + -ms-overflow-style: scrollbar; + } + // Ensures page width is always >=320px. @include breakpoint(xsmall) { html, body { @@ -19,16 +24,26 @@ } body { - background: _palette(bg); + background-color: _palette(bg); + + background-image: linear-gradient(to top, transparentize(_palette(bg), 0.2), transparentize(_palette(bg), 0.2)), + url('../../images/bg.jpg'); + + background-size: auto, + cover; + + background-attachment: fixed, + fixed; + + background-position: center, + center; // Prevents animation/transition "flicker" on page load. // Automatically added/removed by js/main.js. - &.is-loading, - &.is-switching { + &.is-loading { *, *:before, *:after { @include vendor('animation', 'none !important'); @include vendor('transition', 'none !important'); - @include vendor('transition-delay', 'none !important'); } } diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss index 3447b3a..fa8845a 100644 --- a/assets/sass/base/_typography.scss +++ b/assets/sass/base/_typography.scss @@ -1,47 +1,88 @@ /// -/// Dimension by HTML5 UP +/// Solid State 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; + body, input, select, textarea { + color: _palette(fg); + font-family: _font(family); + font-size: 16.5pt; + font-weight: _font(weight); + line-height: 1.65; @include breakpoint(xlarge) { + font-size: 13pt; + } + + @include breakpoint(large) { + font-size: 12pt; + } + + @include breakpoint(medium) { font-size: 12pt; } @include breakpoint(small) { - font-size: 11pt; + font-size: 12pt; } - @include breakpoint(xxsmall) { - font-size: 10pt; + @include breakpoint(xsmall) { + font-size: 12pt; } } - 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' - )); + @include vendor('transition', 'color #{_duration(transition)} ease-in-out, border-bottom-color #{_duration(transition)} ease-in-out'); border-bottom: dotted 1px _palette(fg-light); + color: _palette(fg-bold); text-decoration: none; - color: inherit; &:hover { border-bottom-color: transparent; + color: _palette(fg-bold) !important; + } + + &.special:not(.button) { + @include icon; + border-bottom: 0; + display: block; + font-family: _font(family-heading); + font-size: 0.8em; + font-weight: _font(weight-heading-bold); + letter-spacing: _font(kern-heading); + margin: 0 0 _size(element-margin) 0; + text-transform: uppercase; + + &:before { + @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); + border-radius: 100%; + border: solid 2px _palette(border); + content: '\f105'; + display: inline-block; + font-size: 1.25em; + height: 2em; + line-height: 1.65em; + margin-right: 0.85em; + text-align: center; + text-indent: 0.15em; + vertical-align: middle; + width: 2em; + } + + &:hover { + &:before { + background-color: _palette(border-bg); + } + } + + &:active { + &:before { + background-color: _palette(border2-bg); + } + } } } @@ -60,82 +101,71 @@ h1, h2, h3, h4, h5, h6 { color: _palette(fg-bold); - font-weight: _font(weight-bold); - line-height: 1.5; + font-family: _font(family-heading); + font-weight: _font(weight-heading-bold); + letter-spacing: _font(kern-heading); 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; + span { + font-weight: _font(weight-heading); } - } - h1 { - font-size: 2.25rem; - line-height: 1.3; - letter-spacing: _font(letter-spacing-heading); + &.major { + padding-bottom: 1em; + border-bottom: solid 2px _palette(border); + } } h2 { - font-size: 1.5rem; - line-height: 1.4; - letter-spacing: _font(letter-spacing-heading); + font-size: 1.2em; } h3 { - font-size: 1rem; + font-size: 0.9em; } h4 { - font-size: 0.8rem; + font-size: 0.7em; } h5 { - font-size: 0.7rem; + font-size: 0.7em; } h6 { - font-size: 0.6rem; + font-size: 0.7em; } @include breakpoint(small) { - h1 { - font-size: 1.75rem; - line-height: 1.4; + h2 { + font-size: 1em; } - h2 { - font-size: 1.25em; - line-height: 1.5; + h3 { + font-size: 0.8em } } sub { - font-size: 0.8rem; + font-size: 0.8em; position: relative; - top: 0.5rem; + top: 0.5em; } sup { - font-size: 0.8rem; + font-size: 0.8em; position: relative; - top: -0.5rem; + top: -0.5em; } blockquote { - border-left: solid (_size(border-width) * 4) _palette(border); + border-left: solid 4px _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); @@ -144,30 +174,35 @@ code { background: _palette(border-bg); border-radius: _size(border-radius); + border: solid 2px _palette(border); font-family: _font(family-fixed); - font-size: 0.9rem; - margin: 0 0.25rem; - padding: 0.25rem 0.65rem; + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; } pre { -webkit-overflow-scrolling: touch; font-family: _font(family-fixed); - font-size: 0.9rem; + font-size: 0.9em; margin: 0 0 _size(element-margin) 0; code { display: block; - line-height: 1.75; - padding: 1rem 1.5rem; + line-height: 1.75em; + padding: 1em 1.5em; overflow-x: auto; } } hr { border: 0; - border-bottom: solid _size(border-width) _palette(border); - margin: (_size(element-margin) * 1.375) 0; + border-bottom: solid 2px _palette(border); + margin: (_size(element-margin) * 1.25) 0; + + &.major { + margin: (_size(element-margin) * 2) 0; + } } .align-left { diff --git a/assets/sass/components/_box.scss b/assets/sass/components/_box.scss index ec5ab0d..61a4d9b 100644 --- a/assets/sass/components/_box.scss +++ b/assets/sass/components/_box.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Solid State by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -8,7 +8,7 @@ .box { border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border); + border: solid 2px _palette(border); margin-bottom: _size(element-margin); padding: 1.5em; diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss index bfa2b2d..1a62702 100644 --- a/assets/sass/components/_button.scss +++ b/assets/sass/components/_button.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Solid State by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -12,21 +12,21 @@ button, .button { @include vendor('appearance', 'none'); - @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out'); + @include vendor('transition', 'background-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); + box-shadow: inset 0 0 0 2px _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)); + font-family: _font(family-heading); + font-size: 0.8em; + font-weight: _font(weight-heading-bold); + height: 3.75em; + letter-spacing: _font(kern-heading); + line-height: 3.75em; + padding: 0 2.25em; text-align: center; text-decoration: none; text-transform: uppercase; @@ -37,12 +37,32 @@ } &:active { - background-color: _palette(border-bg-alt); + background-color: _palette(border2-bg); } &.icon { &:before { margin-right: 0.5em; + color: _palette(fg-light); + } + } + + &.special { + background-color: _palette(accent); + box-shadow: none; + + &:hover { + background-color: desaturate(lighten(_palette(accent), 3), 1.5); + } + + &:active { + background-color: saturate(darken(_palette(accent), 3), 1.5); + } + + &.icon { + &:before { + color: mix(_palette(fg-bold), _palette(accent), 25%); + } } } @@ -52,29 +72,20 @@ width: 100%; } - &.special { - background-color: _palette(fg-bold); - color: _palette(bg) !important; - font-weight: _font(weight-bold); + &.small { + font-size: 0.6em; + } - &:hover { - } - - &:active { - } + &.big { + font-size: 1em; } &.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); + @include breakpoint(xsmall) { + padding: 0; + } } \ No newline at end of file diff --git a/assets/sass/components/_features.scss b/assets/sass/components/_features.scss new file mode 100644 index 0000000..9c6041c --- /dev/null +++ b/assets/sass/components/_features.scss @@ -0,0 +1,71 @@ +/// +/// Solid State by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Features */ + + .features { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + margin: 0 0 _size(element-margin) 0; + + article { + @include padding(1.75em, 1.75em); + background-color: desaturate(lighten(_palette(bg), 3), 1.5); + border-radius: _size(border-radius); + margin: (_size(section-spacing, large) * 0.5) _size(section-spacing, large) (_size(section-spacing, large) * 0.5) 0; + width: calc(50% - #{_size(section-spacing, large) * 0.5}); + + &:nth-child(2n) { + margin-right: 0; + } + + .image { + border-radius: _size(border-radius) _size(border-radius) 0 0; + display: block; + margin-bottom: 1.75em; + margin-left: -1.75em; + margin-top: -1.75em; + position: relative; + width: calc(100% + #{3.5em}); + + img { + border-radius: _size(border-radius) _size(border-radius) 0 0; + width: 100%; + } + } + } + + @include breakpoint(medium) { + article { + margin: (_size(section-spacing, medium) * 0.5) _size(section-spacing, medium) (_size(section-spacing, medium) * 0.5) 0; + width: calc(50% - #{_size(section-spacing, medium) * 0.5}); + } + } + + @include breakpoint(small) { + article { + @include padding(1.5em, 1.5em); + margin: (_size(section-spacing, small) * 0.5) _size(section-spacing, small) (_size(section-spacing, small) * 0.5) 0; + width: calc(50% - #{_size(section-spacing, small) * 0.5} - 1px); + + .image { + margin-bottom: 1.5em; + margin-left: -1.5em; + margin-top: -1.5em; + width: calc(100% + #{3em}); + } + } + } + + @include breakpoint(xsmall) { + display: block; + + article { + width: 100%; + margin: 0 0 _size(element-margin) 0 !important; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss index 56f8013..2b61b5d 100644 --- a/assets/sass/components/_form.scss +++ b/assets/sass/components/_form.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Solid State by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,69 +7,35 @@ /* Form */ form { - $gutter: _size(element-margin) * 0.75; - - margin: 0 0 (_size(element-margin) * 1.25) 0; + margin: 0 0 _size(element-margin) 0; .field { - margin: 0 0 ($gutter * 1) 0; + margin: 0 0 _size(element-margin) 0; - &.half { - width: 50%; - float: left; - padding: 0 0 0 ($gutter * 1 * 0.5); + label { + margin-top: _size(element-margin) * -0.75; + } - &.first { - padding: 0 ($gutter * 1 * 0.5) 0 0; + &:first-child { + label { + margin-top: 0; } } } - > .actions { - margin: ($gutter * 1.25) 0 0 0 !important; - } - - @include breakpoint(small) { - .field { - margin: 0 0 ($gutter * 0.75) 0; - - &.half { - padding: 0 0 0 ($gutter * 0.75 * 0.5); - - &.first { - padding: 0 ($gutter * 0.75 * 0.5) 0 0; - } - } - } - - > .actions { - margin: ($gutter * 1) 0 0 0 !important; - } - } - - @include breakpoint(xsmall) { - .field { - &.half { - width: 100%; - float: none; - padding: 0; - - &.first { - padding: 0; - } - } - } + > :last-child { + margin-bottom: 0; } } 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; + font-family: _font(family-heading); + font-size: 0.8em; + font-weight: _font(weight-heading-bold); + letter-spacing: _font(kern-heading); + margin: 0 0 (_size(element-margin) * 0.35) 0; text-transform: uppercase; } @@ -80,18 +46,14 @@ 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: transparent; + background: _palette(border-bg); border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border); + border: none; + border: solid 2px _palette(border); color: inherit; display: block; outline: 0; - padding: 0 1rem; + padding: 0 1em; text-decoration: none; width: 100%; @@ -100,16 +62,7 @@ } &:focus { - background: _palette(border-bg); - border-color: _palette(fg-bold); - box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); - } - } - - select { - option { - background: _palette(bg); - color: _palette(fg); + border-color: desaturate(lighten(_palette(accent), 6), 3); } } @@ -120,11 +73,10 @@ &:before { color: _palette(border); - content: '\f107'; + content: '\f078'; display: block; height: _size(element-height); - //line-height: _size(element-height); - line-height: calc(#{_size(element-height)} + 0em); + line-height: _size(element-height); pointer-events: none; position: absolute; right: 0; @@ -138,6 +90,13 @@ } } + select { + option { + color: _palette(fg-bold); + background: _palette(bg); + } + } + input[type="text"], input[type="password"], input[type="email"], @@ -146,7 +105,7 @@ } textarea { - padding: 0.75rem 1rem; + padding: 0.75em 1em; } input[type="checkbox"], @@ -154,59 +113,53 @@ @include vendor('appearance', 'none'); display: block; float: left; - margin-right: -2rem; + margin-right: -2em; opacity: 0; - width: 1rem; + width: 1em; z-index: -1; & + label { @include icon; - @include vendor('user-select', 'none'); color: _palette(fg); cursor: pointer; display: inline-block; - font-size: 0.8rem; + font-size: 1em; + font-family: _font(family); + text-transform: none; + letter-spacing: 0; font-weight: _font(weight); - margin: 0 0 (_size(element-margin) * 0.25) 0; - padding-left: (_size(element-height) * 0.6) + 1rem; - padding-right: 0.75rem; + padding-left: (_size(element-height) * 0.6) + 0.75em; + padding-right: 0.75em; 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' - )); + background: _palette(border-bg); border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border); + border: solid 2px _palette(border); content: ''; display: inline-block; height: (_size(element-height) * 0.6); left: 0; - //line-height: (_size(element-height) * 0.575); - line-height: calc(#{_size(element-height) * 0.575} + 0em); + line-height: (_size(element-height) * 0.575); position: absolute; text-align: center; - top: -0.125rem; + top: 0; width: (_size(element-height) * 0.6); } } &:checked + label { &:before { - background: _palette(fg-bold) !important; - border-color: _palette(fg-bold) !important; - color: _palette(bg); + background: _palette(fg-bold); + border-color: _palette(fg-bold); content: '\f00c'; + color: _palette(bg); } } &:focus + label { &:before { - background: _palette(border-bg); - border-color: _palette(fg-bold); - box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); + border-color: _palette(accent); } } } @@ -247,7 +200,7 @@ opacity: 1.0; } - .formerize-placeholder { + .polyfill-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 96b8add..f0c4a96 100644 --- a/assets/sass/components/_icon.scss +++ b/assets/sass/components/_icon.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Solid State by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss index a883cda..b8f6a48 100644 --- a/assets/sass/components/_image.scss +++ b/assets/sass/components/_image.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Solid State by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -12,21 +12,6 @@ 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; @@ -65,23 +50,11 @@ &.main { display: block; - margin: (_size(element-margin) * 1.25) 0; + margin: 0 0 (_size(element-margin) * 1.5) 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 cceffdd..224ccc1 100644 --- a/assets/sass/components/_list.scss +++ b/assets/sass/components/_list.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Solid State by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -30,7 +30,7 @@ padding-left: 0; li { - border-top: solid _size(border-width) _palette(border); + border-top: solid 1px _palette(border); padding: 0.5em 0; &:first-child { @@ -47,27 +47,15 @@ li { display: inline-block; - padding: 0 0.75em 0 0; + padding: 0 1em 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); + .icon { + &:before { + font-size: 1.25em; } } } @@ -161,12 +149,6 @@ > * { width: 100%; margin: 0 !important; - - &.icon { - &:before { - margin-left: -2em; - } - } } } @@ -181,6 +163,110 @@ } } } + + &.contact { + list-style: none; + padding: 0; + + li { + @include icon; + margin: (_size(element-margin) * 1.25) 0 0 0; + padding: 0 0 0 3.25em; + position: relative; + + &:before { + border-radius: 100%; + border: solid 2px _palette(border); + display: inline-block; + font-size: 0.8em; + height: 2.5em; + left: 0; + line-height: 2.35em; + position: absolute; + text-align: center; + top: 0; + width: 2.5em; + } + + &:first-child { + margin-top: 0; + } + } + + @include breakpoint(small) { + li { + margin: (_size(element-margin) * 0.75) 0 0 0; + } + } + } + + &.pagination { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding-left: 0; + vertical-align: middle; + + > .page { + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + border-bottom: 0; + border-radius: _size(border-radius); + display: inline-block; + height: 1.5em; + line-height: 1.5em; + margin: 0 0.125em; + min-width: 1.5em; + padding: 0 0.5em; + text-align: center; + + &:hover { + background-color: _palette(border-bg); + } + + &.active { + background-color: _palette(accent); + } + } + + &:first-child { + padding-right: 0.75em; + } + + &:last-child { + padding-left: 0.75em; + } + } + + @include breakpoint(xsmall) { + li { + &:nth-child(n+2):nth-last-child(n+2) { + display: none; + } + + .button { + width: 100%; + } + + &:first-child { + width: calc(50% - 2px); + text-align: left; + padding-right: 0.325em; + } + + &:last-child { + width: calc(50% - 2px); + text-align: right; + padding-left: 0.325em; + } + } + } + } } dl { diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss new file mode 100644 index 0000000..fe22c6a --- /dev/null +++ b/assets/sass/components/_section.scss @@ -0,0 +1,13 @@ +/// +/// Solid State by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Section/Article */ + + section, article { + &.special { + text-align: center; + } + } \ No newline at end of file diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss index 0c51148..6d5c37c 100644 --- a/assets/sass/components/_table.scss +++ b/assets/sass/components/_table.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Solid State by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -17,7 +17,7 @@ tbody { tr { - border: solid _size(border-width) _palette(border); + border: solid 1px _palette(border); border-left: 0; border-right: 0; @@ -40,11 +40,11 @@ } thead { - border-bottom: solid (_size(border-width) * 2) _palette(border); + border-bottom: solid 2px _palette(border); } tfoot { - border-top: solid (_size(border-width) * 2) _palette(border); + border-top: solid 2px _palette(border); } &.alt { @@ -53,18 +53,18 @@ tbody { tr { td { - border: solid _size(border-width) _palette(border); + border: solid 1px _palette(border); border-left-width: 0; border-top-width: 0; &:first-child { - border-left-width: _size(border-width); + border-left-width: 1px; } } &:first-child { td { - border-top-width: _size(border-width); + border-top-width: 1px; } } } diff --git a/assets/sass/ie8.scss b/assets/sass/ie8.scss new file mode 100644 index 0000000..bc084c7 --- /dev/null +++ b/assets/sass/ie8.scss @@ -0,0 +1,190 @@ +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/skel'; + +/* + Solid State by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Basic */ + + body { + -ms-behavior: url('assets/js/backgroundsize.min.htc'); + } + +/* Type */ + + h1, h2, h3, h4, h5, h6 { + &.major { + border-bottom: solid 2px _palette(fg-bold); + } + } + + blockquote { + border-left: solid 4px _palette(fg-bold); + } + + code { + border: solid 2px _palette(fg-bold); + } + + hr { + border-bottom: solid 2px _palette(fg-bold); + } + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + position: relative; + -ms-behavior: url('assets/js/ie/PIE.htc'); + border: solid 2px _palette(fg-bold); + + &.special { + border: 0; + } + } + +/* Form */ + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + select, + textarea { + position: relative; + -ms-behavior: url('assets/js/ie/PIE.htc'); + background: transparent; + border: solid 2px _palette(fg-bold); + } + +/* Table */ + + table { + tbody { + tr { + border: solid 1px _palette(fg-bold); + border-left: 0; + border-right: 0; + } + } + + &.alt { + tbody { + tr { + td { + border: solid 1px _palette(fg-bold); + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: 1px; + } + } + + &:first-child { + td { + border-top-width: 1px; + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + } + +/* Features */ + + .features { + article { + -ms-behavior: url('assets/js/ie/PIE.htc'); + position: relative; + width: 44%; + + .image { + margin-top: 0; + margin-left: 0; + width: 100%; + } + } + } + +/* Menu */ + + #menu { + background: _palette(bg); + + h2 { + border-bottom: solid 2px _palette(fg-bold); + } + } + +/* Header */ + + #header { + background-color: desaturate(lighten(_palette(bg), 3), 1.5); + } + +/* Wrapper */ + + .wrapper { + &:before, &:after { + display: none; + } + + margin: 0; + + &.spotlight { + .image { + -ms-behavior: url('assets/js/ie/PIE.htc'); + + img { + position: relative; + -ms-behavior: url('assets/js/ie/PIE.htc'); + } + } + } + } + +/* Banner */ + + #banner { + .logo { + .icon { + border: solid 2px _palette(fg-bold); + -ms-behavior: url('assets/js/ie/PIE.htc'); + } + } + + h2 { + border-bottom: solid 2px _palette(fg-bold); + } + } + +/* Footer */ + + #footer { + .inner { + .copyright { + border-top: solid 2px _palette(fg-bold); + + li { + border-left: solid 2px _palette(fg-bold); + } + } + } + } \ No newline at end of file diff --git a/assets/sass/ie9.scss b/assets/sass/ie9.scss index f485c36..e3a87ad 100644 --- a/assets/sass/ie9.scss +++ b/assets/sass/ie9.scss @@ -4,45 +4,103 @@ @import 'libs/skel'; /* - Dimension by HTML5 UP + Solid State by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -/* BG */ +/* Basic */ + + body { + background-color: _palette(bg); + background-image: url('../../images/bg.jpg'); + background-size: cover; + background-attachment: fixed; + background-position: center; - #bg { &:before { - background: _palette(bg-overlay); + background: transparentize(_palette(bg), 0.2); + content: ''; + display: block; + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + } + + > * { + position: relative; + z-index: 1; } } -/* Header */ +/* Features */ - #header { - .logo { - margin: 0 auto; - } - - .content { + .features { + article { display: inline-block; + width: 45%; } + } - nav { - ul { +/* Menu */ + + #menu { + .inner { + margin: 4em auto; + } + } + +/* Wrapper */ + + #wrapper { + > header { + background: none !important; + } + } + + .wrapper { + &.spotlight { + .inner { + text-align: left !important; + } + + .image { display: inline-block; + margin: 0 _size(section-spacing, large) _size(element-margin) 0 !important; + vertical-align: middle; + width: 24%; + } - li { - display: inline-block; - } + .content { + display: inline-block; + vertical-align: middle; + width: 70%; } } } -/* Main */ +/* Banner */ - #main { - article { - margin: 0 auto; + #banner { + background: none !important; + } + +/* Footer */ + + #footer { + background: none !important; + + .inner { + form { + display: inline-block; + width: 45%; + } + + .contact { + display: inline-block; + width: 45%; + } } } \ No newline at end of file diff --git a/assets/sass/layout/_banner.scss b/assets/sass/layout/_banner.scss new file mode 100644 index 0000000..c9dcf56 --- /dev/null +++ b/assets/sass/layout/_banner.scss @@ -0,0 +1,140 @@ +/// +/// Solid State by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Banner */ + + #banner { + @include padding(10em, 0, (0, 0, _size(wrapper-edges, large) * -0.5, 0)); + + .inner { + margin: 0 auto; + width: _size(inner); + } + + .logo { + @include vendor('transition', ( + 'opacity 2s ease', + 'transform 1s ease', + )); + @include vendor('transform', 'translateY(0)'); + opacity: 1; + margin: 0 0 (_size(element-margin) * 0.65) 0; + + .icon { + border-radius: 100%; + border: solid 2px _palette(border); + cursor: default; + display: inline-block; + font-size: 2em; + height: 2.25em; + line-height: 2.25em; + text-align: center; + width: 2.25em; + } + } + + h2 { + @include vendor('transition', ( + 'opacity 0.5s ease', + 'transform 0.5s ease', + 'filter 0.25s ease', + )); + @include vendor('transform', 'translateX(0)'); + @include vendor('transition-delay', '0.65s'); + @include vendor('filter', 'blur(0)'); + opacity: 1; + border-bottom: solid 2px _palette(border); + font-size: 2.25em; + margin-bottom: _size(element-margin) * 0.4; + padding-bottom: _size(element-margin) * 0.2; + } + + p { + @include vendor('transition', ( + 'opacity 0.5s ease', + 'transform 0.5s ease', + 'filter 0.25s ease', + )); + @include vendor('transform', 'translateX(0)'); + @include vendor('transition-delay', '0.8s'); + @include vendor('filter', 'blur(0)'); + opacity: 1; + font-family: _font(family-heading); + font-size: 1em; + font-weight: _font(weight-heading); + letter-spacing: _font(kern-heading); + line-height: 2; + text-transform: uppercase; + } + + @include breakpoint(large) { + @include padding(7em, 0, (0, 0, _size(wrapper-edges, large) * 0.5, 0)); + + background-color: _palette(bg); + + background-image: linear-gradient(to top, transparentize(_palette(bg), 0.2), transparentize(_palette(bg), 0.2)), + url('../../images/bg.jpg'); + + background-size: auto, + cover; + + background-position: center, + center; + + margin-bottom: (_size(wrapper-edges, large) * -1); + } + + @include breakpoint(medium) { + @include padding(12em, 3em, (0, 0, _size(wrapper-edges, medium) * 0.5, 0)); + + margin-bottom: (_size(wrapper-edges, medium) * -1); + + .inner { + width: 100%; + } + } + + @include breakpoint(small) { + @include padding(5em, 2em, (0, 0, _size(wrapper-edges, small) * 0.5, 0)); + + margin-bottom: (_size(wrapper-edges, small) * -1); + + .logo { + margin: 0 0 (_size(element-margin) * 0.5) 0; + + .icon { + font-size: 1.5em; + } + } + + h2 { + font-size: 1.5em; + } + + p { + font-size: 0.8em; + } + } + + body.is-loading & { + .logo { + @include vendor('transform', 'translateY(0.5em)'); + opacity: 0; + } + + h2 { + opacity: 0; + @include vendor('transform', 'translateX(0.25em)'); + @include vendor('filter', 'blur(2px)'); + } + + p { + opacity: 0; + @include vendor('transform', 'translateX(0.5em)'); + @include vendor('filter', 'blur(2px)'); + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_bg.scss b/assets/sass/layout/_bg.scss deleted file mode 100644 index 98b78dd..0000000 --- a/assets/sass/layout/_bg.scss +++ /dev/null @@ -1,68 +0,0 @@ -/// -/// 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-loading & { - &: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 61edf19..cded8b4 100644 --- a/assets/sass/layout/_footer.scss +++ b/assets/sass/layout/_footer.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Solid State by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,31 +7,137 @@ /* 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; + .inner { + @include padding(5em, 0); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row'); + @include vendor('flex-wrap', 'wrap'); + margin: 0 auto; + width: _size(inner); - .copyright { - letter-spacing: _font(letter-spacing); - font-size: 0.6rem; - opacity: 0.75; - margin-bottom: 0; - text-transform: uppercase; + > * { + width: 100%; + } + + form { + margin: 0 _size(section-spacing, large) 0 0; + width: calc(50% - #{_size(section-spacing, large) * 0.5}); + } + + .contact { + width: calc(50% - #{_size(section-spacing, large) * 0.5}); + } + + .copyright { + border-top: solid 2px _palette(border); + list-style: none; + margin: (_size(element-margin) * 2) 0 _size(element-margin) 0; + padding: _size(element-margin) 0 0 0; + width: 100%; + + li { + border-left: solid 2px _palette(border); + color: _palette(fg-light); + display: inline-block; + font-size: 0.9em; + line-height: 1; + margin-left: 1em; + padding: 0; + padding-left: 1em; + + &:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + a { + color: inherit; + } + } + } } - body.is-article-visible & { - @include vendor('transform', 'scale(0.95)'); - @include vendor('filter', 'blur(0.1rem)'); - opacity: 0; + @include breakpoint(large) { + + background-color: _palette(bg); + + background-image: linear-gradient(to top, transparentize(_palette(bg), 0.2), transparentize(_palette(bg), 0.2)), + url('../../images/bg.jpg'); + + background-size: auto, + cover; + + background-position: center, + center; + + margin-top: (_size(wrapper-edges, large) * -1); + padding-top: _size(wrapper-edges, large); + } - body.is-loading & { - opacity: 0; + @include breakpoint(medium) { + margin-top: (_size(wrapper-edges, medium) * -1); + padding-top: _size(wrapper-edges, medium); + + .inner { + @include padding(3em, 3em); + display: block; + width: 100%; + + form { + width: 100%; + margin: 0 0 (_size(element-margin) * 2) 0; + } + + .contact { + width: 100%; + margin: 0 0 (_size(element-margin) * 2) 0; + } + + .copyright { + margin: (_size(element-margin) * 2) 0 _size(element-margin) 0; + } + } + } + + @include breakpoint(small) { + margin-top: (_size(wrapper-edges, small) * -1); + padding-top: _size(wrapper-edges, small); + + .inner { + @include padding(2em, 2em); + + form { + margin: 0 0 (_size(element-margin) * 1.5) 0; + } + + .contact { + margin: 0 0 (_size(element-margin) * 1.5) 0; + } + } + } + + @include breakpoint(xsmall) { + .inner { + .copyright { + li { + border-left: 0; + display: block; + margin: 1em 0 0 0; + padding-left: 0; + + &:first-child { + margin-top: 0; + } + } + } + } + } + + @include breakpoint(xxsmall) { + .inner { + @include padding(2em, 1.5em); + } } } \ No newline at end of file diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss index 4ce5734..cdd57a3 100644 --- a/assets/sass/layout/_header.scss +++ b/assets/sass/layout/_header.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Solid State by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,253 +7,132 @@ /* 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', 'background-color #{_duration(transition)} ease-in-out'); + background-color: transparentize(desaturate(lighten(_palette(bg), 3), 1.5), 0.05); + height: 3.5em; + left: 0; + line-height: 3.5em; + padding: 0 1.25em; + position: fixed; + top: 0; + width: 100%; + z-index: _misc(z-index-base); - > * { - @include vendor('transition', 'opacity #{_duration(article)} ease-in-out'); - position: relative; - margin-top: 3.5rem; + h1 { + @include vendor('transition', ( + 'opacity #{_duration(transition)} ease-in-out', + 'visibility #{_duration(transition)}' + )); + border-bottom: 0; + font-size: 0.8em; + margin-bottom: 0; + opacity: 1; + visibility: visible; - &: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; + a { + border: 0; } } 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); + font-family: _font(family-heading); + font-size: 0.8em; + font-weight: _font(weight-heading-bold); + height: 3em; + letter-spacing: _font(kern-heading); + line-height: 3em; + position: absolute; + right: 0.7em; + text-transform: uppercase; + top: 0.7em; - li { - padding-left: 0; - border-left: solid _size(border-width) _palette(border); + a { + border: 0; + display: inline-block; + padding: 0 1em; - &: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); + &:before { + float: right; + margin-left: 0.75em; } - ul { - li { - &.is-middle { - border-left: 0; - } + &[href="#menu"] { + @include icon; + @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); + border-radius: _size(border-radius); + box-shadow: inset 0 0 0 2px _palette(border); + padding: 0 1.35em; + + &:before { + content: '\f0c9'; + } + + &:hover { + background-color: _palette(border-bg); + } + + &:active { + background-color: _palette(border2-bg); } } } } - body.is-article-visible & { - @include vendor('transform', 'scale(0.95)'); - @include vendor('filter', 'blur(0.1rem)'); - opacity: 0; - } + &.alt { + background-color: transparent; - body.is-loading & { - > * { + h1 { 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; - } - } + visibility: hidden; } } @include breakpoint(small) { - > * { - margin-top: 2rem; + height: 2.75em; + line-height: 2.75em; - &:before { - top: calc(-2rem - 1px); - height: calc(2rem + 1px); - } - } + nav { + top: 0; + right: 0; + height: inherit; + line-height: inherit; - .logo { - width: 4.75rem; - height: 4.75rem; - line-height: 4.75rem; + a { + height: inherit; + line-height: inherit; - .icon { - &:before { - font-size: 1.75rem; + &[href="#menu"] { + box-shadow: none; + padding: 0 1em; + border-radius: 0; + + &:hover, &:active { + background-color: inherit; + } } } } - - .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%; + a { + &[href="#menu"] { + width: 4em; + white-space: nowrap; + text-indent: 4em; + position: relative; - li { - border-left: 0; - border-top: solid _size(border-width) _palette(border); - - &:first-child { - border-top: 0; + &:before { + width: inherit; + position: absolute; + top: 0; + left: 0; + text-indent: 0; + text-align: right; + margin-left: 0; + padding-right: 1.25em; } - - a { - height: 3rem; - line-height: 3rem; - min-width: 0; - width: 100%; - } - } - } - - &.use-middle { - &:after { - display: none; } } } diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss deleted file mode 100644 index 05bd2c3..0000000 --- a/assets/sass/layout/_main.scss +++ /dev/null @@ -1,102 +0,0 @@ -/// -/// 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/_menu.scss b/assets/sass/layout/_menu.scss new file mode 100644 index 0000000..adbc452 --- /dev/null +++ b/assets/sass/layout/_menu.scss @@ -0,0 +1,127 @@ +/// +/// Solid State by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Menu */ + + #page-wrapper { + @include vendor('transition', 'filter 0.25s ease'); + } + + #menu { + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('justify-content', 'center'); + @include vendor('pointer-events', 'none'); + @include vendor('transition', ('opacity #{_duration(menu)} ease', 'visibility #{_duration(menu)}')); + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0,0,0,0); + background: transparentize(_palette(bg), 0.2); + cursor: default; + height: 100%; + left: 0; + opacity: 0; + position: fixed; + text-align: center; + top: 0; + visibility: hidden; + width: 100%; + + .inner { + @include padding(2.5em, 1.5em); + @include vendor('transform', 'translateY(0.5em)'); + @include vendor('transition', ('opacity #{_duration(menu)} ease','transform #{_duration(menu)} ease')); + -webkit-overflow-scrolling: touch; + background: _palette(accent); + border-radius: _size(border-radius); + display: block; + max-width: 100%; + opacity: 0; + position: relative; + width: 18em; + } + + h2 { + border-bottom: solid 2px _palette(border); + padding-bottom: 1em; + } + + .close { + background-image: url('images/close.svg'); + background-position: 75% 25%; + background-repeat: no-repeat; + background-size: 2em 2em; + border: 0; + content: ''; + display: block; + height: 4em; + overflow: hidden; + position: absolute; + right: 0; + text-align: center; + text-indent: 4em; + top: 0; + width: 4em; + } + + .links { + list-style: none; + margin-bottom: (_size(element-margin) - 0.5em); + padding: 0; + + li { + padding: 0; + + a { + border-radius: _size(border-radius); + border: 0; + display: block; + font-family: _font(family-heading); + font-size: 0.8em; + font-weight: _font(weight-heading); + letter-spacing: _font(kern-heading); + line-height: 1.85em; + padding: 0.75em 0; + text-transform: uppercase; + + &:hover { + background: saturate(darken(_palette(accent), 3), 1.5); + } + } + } + } + + @include breakpoint(small) { + .inner { + max-height: 100%; + overflow-y: auto; + overflow-x: hidden; + + .close { + background-size: 1.5em 1.5em; + } + } + } + } + + body.is-menu-visible { + #page-wrapper { + @include vendor('filter', 'blur(1.5px)'); + } + + #menu { + @include vendor('pointer-events', 'auto'); + opacity: 1; + visibility: visible; + + .inner { + @include vendor('transform', 'translateY(0)'); + opacity: 1; + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_wrapper.scss b/assets/sass/layout/_wrapper.scss index b422a9c..48b3a3b 100644 --- a/assets/sass/layout/_wrapper.scss +++ b/assets/sass/layout/_wrapper.scss @@ -1,36 +1,303 @@ /// -/// Dimension by HTML5 UP +/// Solid State 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; + /// Sets the colors of the wrapper's top/bottom edges. + /// @param {string} $color Color. + @mixin wrapper-edges-color($color: black) { + &:before, &:after { + background-image: svg-url(''); } - @include breakpoint(xlarge) { - padding: 3rem 2rem; + &:before { + box-shadow: inset 0 -1px 0 0 $color, 0 1px 0 0 $color; + } + + &:after { + box-shadow: inset 0 -1px 0 0 $color, 0 1px 0 0 $color; + } + } + + #wrapper { + > header { + @include padding(7.5em, 0, (3.5em, 0, _size(wrapper-edges, large) * -0.5, 0)); + + .inner { + margin: 0 auto; + width: _size(inner); + } + + h2 { + border-bottom: solid 2px _palette(border); + font-size: 2em; + margin-bottom: _size(element-margin) * 0.4; + padding-bottom: _size(element-margin) * 0.2; + } + + p { + font-family: _font(family-heading); + font-size: 1em; + font-weight: _font(weight-heading); + letter-spacing: _font(kern-heading); + line-height: 2; + text-transform: uppercase; + } + } + + @include breakpoint(large) { + > header { + @include padding(5em, 0, (4em, 0, _size(wrapper-edges, large) * 0.5, 0)); + + background-color: _palette(bg); + + background-image: linear-gradient(to top, transparentize(_palette(bg), 0.2), transparentize(_palette(bg), 0.2)), + url('../../images/bg.jpg'); + + background-size: auto, + cover; + + background-position: center, + 0% 30%; + + margin-bottom: (_size(wrapper-edges, large) * -1); + } + } + + @include breakpoint(medium) { + > header { + @include padding(7em, 3em, (4em, 0, _size(wrapper-edges, medium) * 0.5, 0)); + + background-size: auto, + cover; + + background-position: center, + 0% 0%; + + margin-bottom: (_size(wrapper-edges, medium) * -1); + + .inner { + width: 100%; + } + } } @include breakpoint(small) { - padding: 2rem 1rem; + > header { + @include padding(3.75em, 2em, (2.75em, 0, _size(wrapper-edges, small) * 0.5, 0)); + + background-size: auto, + 125%; + + margin-bottom: (_size(wrapper-edges, small) * -1); + + h2 { + font-size: 1.25em; + } + + p { + font-size: 0.8em; + } + } + } + } + + .wrapper { + background-color: _palette(bg); + margin: _size(wrapper-edges, large) 0; + position: relative; + @include wrapper-edges-color(_palette(bg)); + + &:before, &:after { + background-repeat: no-repeat; + background-size: 100% 100%; + content: ''; + display: block; + height: _size(wrapper-edges, large); + position: absolute; + width: 100%; + } + + &:before { + left: 0; + top: (_size(wrapper-edges, large) * -1); + } + + &:after { + @include vendor('transform', 'scaleY(-1)'); + bottom: (_size(wrapper-edges, large) * -1); + left: 0; + } + + &.alt { + &:before { + @include vendor('transform', 'scaleX(-1)'); + } + + &:after { + @include vendor('transform', 'scaleY(-1) scaleX(-1)'); + } + } + + .inner { + @include padding(3em, 0); + margin: 0 auto; + width: _size(inner); + } + + @for $i from 2 through _misc(max-wrapper-styles) { + $j: 3 * ($i - 1); + $color: desaturate(lighten(_palette(bg), $j), $j * 0.5); + + &.style#{$i} { + background-color: $color; + @include wrapper-edges-color($color); + } + } + + &.spotlight { + @include wrapper-edges-color(_palette(accent)); + background-color: _palette(accent); + + .inner { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + @include vendor('flex-direction', 'row'); + } + + .image { + border-radius: 100%; + margin: 0 _size(section-spacing, large) _size(element-margin) 0; + width: 22em; + overflow: hidden; + -ms-flex: 1; + + img { + border-radius: 100%; + width: 100%; + } + } + + .content { + width: 100%; + -ms-flex: 2; + } + + &:nth-child(2n - 1) { + .inner { + @include vendor('flex-direction', 'row-reverse'); + text-align: right; + } + + .image { + margin: 0 0 _size(element-margin) _size(section-spacing, large); + } + } + + @for $i from 2 through _misc(max-wrapper-styles) { + $j: 3 * ($i - 1); + $color: saturate(darken(_palette(accent), $j), $j * 0.5); + + &.style#{$i} { + background-color: $color; + @include wrapper-edges-color($color); + } + } + } + + @include breakpoint(medium) { + margin: _size(wrapper-edges, medium) 0; + + &:before, &:after { + height: _size(wrapper-edges, medium); + } + + &:before { + top: (_size(wrapper-edges, medium) * -1); + } + + &:after { + bottom: (_size(wrapper-edges, medium) * -1); + left: 0; + } + + .inner { + @include padding(3em, 3em); + width: 100%; + } + + &.spotlight { + .image { + margin: 0 _size(section-spacing, medium) _size(element-margin) 0; + width: 32em; + } + + &:nth-child(2n - 1) { + .image { + margin: 0 0 _size(element-margin) _size(section-spacing, medium); + } + } + } + } + + @include breakpoint(small) { + margin: _size(wrapper-edges, small) 0; + + &:before, &:after { + height: _size(wrapper-edges, small); + } + + &:before { + top: (_size(wrapper-edges, small) * -1); + } + + &:after { + bottom: (_size(wrapper-edges, small) * -1); + left: 0; + } + + .inner { + @include padding(2em, 2em); + } + + &.spotlight { + .inner { + @include vendor('align-items', 'flex-start'); + } + + .image { + width: 19em; + margin: 0 _size(section-spacing, small) _size(element-margin) 0; + } + + &:nth-child(2n - 1) { + .image { + margin: 0 0 _size(element-margin) _size(section-spacing, small); + } + } + } } @include breakpoint(xsmall) { - padding: 1rem; + &.spotlight { + .inner { + display: block; + } + + .image { + margin: 0 0 (_size(element-margin) * 0.5) 0 !important; + max-width: 85%; + width: 12em; + } + } + } + + @include breakpoint(xxsmall) { + .inner { + @include padding(2em, 1.5em); + } } } \ No newline at end of file diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss index 3be728c..fb5eec9 100644 --- a/assets/sass/libs/_vars.scss +++ b/assets/sass/libs/_vars.scss @@ -1,43 +1,54 @@ // Misc. $misc: ( - z-index-base: 10000 + z-index-base: 10000, + max-wrapper-styles: 6 ); // Duration. $duration: ( - transition: 0.2s, - bg: 2.5s, - intro: 0.75s, - article: 0.325s + menu: 0.35s, + transition: 0.2s ); // Size. $size: ( - border-radius: 4px, - border-width: 1px, - element-height: 2.75rem, - element-margin: 2rem + border-radius: 5px, + element-height: 2.75em, + element-margin: 2em, + inner: 55em, + section-spacing: ( + large: 3em, + medium: 2em, + small: 1.75em + ), + wrapper-edges: ( + large: 6.5em, + medium: 4.75em, + small: 2.5em + ) ); // Font. $font: ( - family: ('Source Sans Pro', sans-serif), - family-fixed: ('Courier New', monospace), - weight: 300, - weight-bold: 600, - letter-spacing: 0.2rem, - letter-spacing-heading: 0.5rem + family: ('Source Sans Pro', Helvetica, sans-serif), + family-fixed: ('Courier New', monospace), + family-heading: (Raleway, Helvetica, sans-serif), + weight: 300, + weight-bold: 600, + weight-heading: 200, + weight-heading-bold: 700, + kern-heading: 0.1em ); // 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) + bg: #2e3141, + fg: #ffffff, + fg-bold: #ffffff, + fg-light: rgba(255,255,255,0.35), + border: rgba(255,255,255,0.125), + border-bg: rgba(255,255,255,0.025), + border2: rgba(255,255,255,0.25), + border2-bg: rgba(255,255,255,0.075), + accent: #4c5c96 ); \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 49f3acd..2975e1d 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -3,26 +3,32 @@ @import 'libs/mixins'; @import 'libs/skel'; @import 'font-awesome.min.css'; -@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600'); +@import url('https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic'); /* - Dimension by HTML5 UP + Solid State by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ @include skel-breakpoints(( - xlarge: '(max-width: 1680px)', - large: '(max-width: 1280px)', - medium: '(max-width: 980px)', - small: '(max-width: 736px)', - xsmall: '(max-width: 480px)', - xxsmall: '(max-width: 360px)' + xlarge: '(max-width: 1680px)', + large: '(max-width: 1280px)', + medium: '(max-width: 980px)', + small: '(max-width: 736px)', + xsmall: '(max-width: 640px)', + xxsmall: '(max-width: 360px)' )); @include skel-layout(( reset: 'full', - boxModel: 'border' + boxModel: 'border', + grid: ( gutters: 1.75em ), + breakpoints: ( + small: ( + grid: ( gutters: 1.25em ) + ) + ) )); // Base. @@ -32,6 +38,7 @@ // Component. + @import 'components/section'; @import 'components/form'; @import 'components/box'; @import 'components/icon'; @@ -39,11 +46,12 @@ @import 'components/list'; @import 'components/table'; @import 'components/button'; + @import 'components/features'; // Layout. - @import 'layout/bg'; - @import 'layout/wrapper'; @import 'layout/header'; - @import 'layout/main'; + @import 'layout/menu'; + @import 'layout/banner'; + @import 'layout/wrapper'; @import 'layout/footer'; \ No newline at end of file diff --git a/assets/sass/noscript.scss b/assets/sass/noscript.scss deleted file mode 100644 index e94e554..0000000 --- a/assets/sass/noscript.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import 'libs/vars'; -@import 'libs/functions'; -@import 'libs/mixins'; -@import 'libs/skel'; - -/* - Dimension by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -/* Main */ - - #main { - article { - opacity: 1; - margin: (_size(element-margin) * 2) 0 0 0; - } - } \ No newline at end of file diff --git a/content/contents.lr b/content/contents.lr index 5b6730b..05bc15e 100644 --- a/content/contents.lr +++ b/content/contents.lr @@ -6,3 +6,5 @@ Das C3 Waffel Operation Center möchte die ganze Welt mit Waffeln versorgen! Daher haben wir es uns zum Ziel gesetzt zufällig an verschiedenen Chaosevents, in Hackerspacen und bei Chaostreffs aufzutauchen und Waffeln zu machen. Notfalls auch mit Waffelgewalt. +--- +_template: home.html diff --git a/content/about/contents.lr b/content/impressum/contents.lr similarity index 100% rename from content/about/contents.lr rename to content/impressum/contents.lr diff --git a/templates/home.html b/templates/home.html new file mode 100644 index 0000000..3f0eb35 --- /dev/null +++ b/templates/home.html @@ -0,0 +1,79 @@ +{% extends "layout.html" %} +{% block title %}{{ this.title }}{% endblock %} +{% block body %} + +
+
+ +
+

Magna arcu feugiat

+

Lorem ipsum dolor sit amet, etiam lorem adipiscing elit. Cras turpis ante, nullam sit amet turpis non, sollicitudin posuere urna. Mauris id tellus arcu. Nunc vehicula id nulla dignissim dapibus. Nullam ultrices, neque et faucibus viverra, ex nulla cursus.

+ Learn more +
+
+
+ + +
+
+ +
+

Tempus adipiscing

+

Lorem ipsum dolor sit amet, etiam lorem adipiscing elit. Cras turpis ante, nullam sit amet turpis non, sollicitudin posuere urna. Mauris id tellus arcu. Nunc vehicula id nulla dignissim dapibus. Nullam ultrices, neque et faucibus viverra, ex nulla cursus.

+ Learn more +
+
+
+ + +
+
+ +
+

Nullam dignissim

+

Lorem ipsum dolor sit amet, etiam lorem adipiscing elit. Cras turpis ante, nullam sit amet turpis non, sollicitudin posuere urna. Mauris id tellus arcu. Nunc vehicula id nulla dignissim dapibus. Nullam ultrices, neque et faucibus viverra, ex nulla cursus.

+ Learn more +
+
+
+ + +
+
+

Vitae phasellus

+

Cras mattis ante fermentum, malesuada neque vitae, eleifend erat. Phasellus non pulvinar erat. Fusce tincidunt, nisl eget mattis egestas, purus ipsum consequat orci, sit amet lobortis lorem lacus in tellus. Sed ac elementum arcu. Quisque placerat auctor laoreet.

+
+
+ +

Sed feugiat lorem

+

Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id nulla dignissim dapibus ultrices.

+ Learn more +
+
+ +

Nisl placerat

+

Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id nulla dignissim dapibus ultrices.

+ Learn more +
+
+ +

Ante fermentum

+

Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id nulla dignissim dapibus ultrices.

+ Learn more +
+
+ +

Fusce consequat

+

Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id nulla dignissim dapibus ultrices.

+ Learn more +
+
+ +
+
+ + + +{% endblock %} diff --git a/templates/layout.html b/templates/layout.html index fe25e42..65ee793 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -1,55 +1,104 @@ - - - - - - - - {% block title %}Welcome{% endblock %} c3woc - - - - -
- -
-
- {% block body %}{% endblock %} -
-
-
- © Copyright 2018 by L3D | News -
-
-
- - - - - - + + + + + {% block title %}Startseite{% endblock %} + + + + + + + + + + + + +
+ + + + + + + + + + +
+ + {% block body %}{% endblock %} +
+ + + + +
+ + + + + + + + +