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 847f6ef..0000000 Binary files a/assets/favicon.ico and /dev/null differ diff --git a/assets/images/pic04.jpg b/assets/images/pic04.jpg new file mode 100644 index 0000000..01a96a2 Binary files /dev/null and b/assets/images/pic04.jpg differ diff --git a/assets/images/pic05.jpg b/assets/images/pic05.jpg new file mode 100644 index 0000000..06ef1a0 Binary files /dev/null and b/assets/images/pic05.jpg differ diff --git a/assets/images/pic06.jpg b/assets/images/pic06.jpg new file mode 100644 index 0000000..0a615d9 Binary files /dev/null and b/assets/images/pic06.jpg differ diff --git a/assets/images/pic07.jpg b/assets/images/pic07.jpg new file mode 100644 index 0000000..251251c Binary files /dev/null and b/assets/images/pic07.jpg differ diff --git a/assets/images/pic08.jpg b/assets/images/pic08.jpg new file mode 100644 index 0000000..9c3c97c Binary files /dev/null and b/assets/images/pic08.jpg differ 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 %} +
+ + + + +
+ + + + + + + + +