parent
4a2fec7f49
commit
3007807b81
41 changed files with 11893 additions and 0 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,887 @@ |
|||||||
|
@import url(fontawesome-all.min.css); |
||||||
|
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700"); |
||||||
|
/* |
||||||
|
Eventually by HTML5 UP |
||||||
|
html5up.net | @ajlkn |
||||||
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
*/ |
||||||
|
html, body, div, span, applet, object, |
||||||
|
iframe, h1, h2, h3, h4, h5, h6, p, blockquote, |
||||||
|
pre, a, abbr, acronym, address, big, cite, |
||||||
|
code, del, dfn, em, img, ins, kbd, q, s, samp, |
||||||
|
small, strike, strong, sub, sup, tt, var, b, |
||||||
|
u, i, center, dl, dt, dd, ol, ul, li, fieldset, |
||||||
|
form, label, legend, table, caption, tbody, |
||||||
|
tfoot, thead, tr, th, td, article, aside, |
||||||
|
canvas, details, embed, figure, figcaption, |
||||||
|
footer, header, hgroup, menu, nav, output, ruby, |
||||||
|
section, summary, time, mark, audio, video { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
border: 0; |
||||||
|
font-size: 100%; |
||||||
|
font: inherit; |
||||||
|
vertical-align: baseline; } |
||||||
|
|
||||||
|
article, aside, details, figcaption, figure, |
||||||
|
footer, header, hgroup, menu, nav, section { |
||||||
|
display: block; } |
||||||
|
|
||||||
|
body { |
||||||
|
line-height: 1; } |
||||||
|
|
||||||
|
ol, ul { |
||||||
|
list-style: none; } |
||||||
|
|
||||||
|
blockquote, q { |
||||||
|
quotes: none; } |
||||||
|
blockquote:before, blockquote:after, q:before, q:after { |
||||||
|
content: ''; |
||||||
|
content: none; } |
||||||
|
|
||||||
|
table { |
||||||
|
border-collapse: collapse; |
||||||
|
border-spacing: 0; } |
||||||
|
|
||||||
|
body { |
||||||
|
-webkit-text-size-adjust: none; } |
||||||
|
|
||||||
|
mark { |
||||||
|
background-color: transparent; |
||||||
|
color: inherit; } |
||||||
|
|
||||||
|
input::-moz-focus-inner { |
||||||
|
border: 0; |
||||||
|
padding: 0; } |
||||||
|
|
||||||
|
input, select, textarea { |
||||||
|
-moz-appearance: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
-ms-appearance: none; |
||||||
|
appearance: none; } |
||||||
|
|
||||||
|
/* Basic */ |
||||||
|
@-ms-viewport { |
||||||
|
width: device-width; } |
||||||
|
|
||||||
|
body { |
||||||
|
-ms-overflow-style: scrollbar; } |
||||||
|
|
||||||
|
@media screen and (max-width: 480px) { |
||||||
|
html, body { |
||||||
|
min-width: 320px; } } |
||||||
|
|
||||||
|
html { |
||||||
|
box-sizing: border-box; } |
||||||
|
|
||||||
|
*, *:before, *:after { |
||||||
|
box-sizing: inherit; } |
||||||
|
|
||||||
|
html, body { |
||||||
|
height: 100%; |
||||||
|
overflow-x: hidden; |
||||||
|
width: 100%; } |
||||||
|
@media screen and (max-height: 640px) { |
||||||
|
html, body { |
||||||
|
height: auto; |
||||||
|
min-height: 100%; } } |
||||||
|
|
||||||
|
body { |
||||||
|
display: -moz-flex; |
||||||
|
display: -webkit-flex; |
||||||
|
display: -ms-flex; |
||||||
|
display: flex; |
||||||
|
-moz-flex-direction: column; |
||||||
|
-webkit-flex-direction: column; |
||||||
|
-ms-flex-direction: column; |
||||||
|
flex-direction: column; |
||||||
|
-moz-justify-content: center; |
||||||
|
-webkit-justify-content: center; |
||||||
|
-ms-justify-content: center; |
||||||
|
justify-content: center; |
||||||
|
background-color: #000; |
||||||
|
padding: 6em 4em 4em 4em; } |
||||||
|
body.is-preload *, body.is-preload *:before, body.is-preload *:after { |
||||||
|
-moz-animation: none !important; |
||||||
|
-webkit-animation: none !important; |
||||||
|
-ms-animation: none !important; |
||||||
|
animation: none !important; |
||||||
|
-moz-transition: none !important; |
||||||
|
-webkit-transition: none !important; |
||||||
|
-ms-transition: none !important; |
||||||
|
transition: none !important; } |
||||||
|
body > * { |
||||||
|
position: relative; |
||||||
|
z-index: 2; } |
||||||
|
@media screen and (max-width: 1680px) { |
||||||
|
body { |
||||||
|
padding: 6em 3.5em 3.5em 3.5em; } } |
||||||
|
@media screen and (max-width: 736px) { |
||||||
|
body { |
||||||
|
padding: 5em 2em 2em 2em; } } |
||||||
|
@media screen and (max-width: 360px) { |
||||||
|
body { |
||||||
|
padding: 5em 1.25em 1.25em 1.25em; } } |
||||||
|
|
||||||
|
/* BG */ |
||||||
|
#bg { |
||||||
|
-moz-transition: opacity 2s ease-in-out; |
||||||
|
-webkit-transition: opacity 2s ease-in-out; |
||||||
|
-ms-transition: opacity 2s ease-in-out; |
||||||
|
transition: opacity 2s ease-in-out; |
||||||
|
height: 100%; |
||||||
|
left: 0; |
||||||
|
opacity: 0.375; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
width: 100%; |
||||||
|
z-index: 1; } |
||||||
|
#bg div { |
||||||
|
-moz-transition: opacity 3s ease; |
||||||
|
-webkit-transition: opacity 3s ease; |
||||||
|
-ms-transition: opacity 3s ease; |
||||||
|
transition: opacity 3s ease; |
||||||
|
background-size: cover; |
||||||
|
height: 100%; |
||||||
|
left: 0; |
||||||
|
opacity: 0; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
visibility: hidden; |
||||||
|
width: 150%; } |
||||||
|
#bg div.visible { |
||||||
|
-moz-animation: bg 45s linear infinite; |
||||||
|
-webkit-animation: bg 45s linear infinite; |
||||||
|
-ms-animation: bg 45s linear infinite; |
||||||
|
animation: bg 45s linear infinite; |
||||||
|
opacity: 1; |
||||||
|
visibility: visible; |
||||||
|
z-index: 1; } |
||||||
|
#bg div.visible.top { |
||||||
|
z-index: 2; } |
||||||
|
@media screen and (max-width: 1280px) { |
||||||
|
#bg div.visible { |
||||||
|
-moz-animation: bg 29.25s linear infinite; |
||||||
|
-webkit-animation: bg 29.25s linear infinite; |
||||||
|
-ms-animation: bg 29.25s linear infinite; |
||||||
|
animation: bg 29.25s linear infinite; } } |
||||||
|
@media screen and (max-width: 736px) { |
||||||
|
#bg div.visible { |
||||||
|
-moz-animation: bg 18s linear infinite; |
||||||
|
-webkit-animation: bg 18s linear infinite; |
||||||
|
-ms-animation: bg 18s linear infinite; |
||||||
|
animation: bg 18s linear infinite; } } |
||||||
|
#bg div:only-child { |
||||||
|
-moz-animation-direction: alternate !important; |
||||||
|
-webkit-animation-direction: alternate !important; |
||||||
|
-ms-animation-direction: alternate !important; |
||||||
|
animation-direction: alternate !important; } |
||||||
|
body.is-preload #bg { |
||||||
|
opacity: 0; } |
||||||
|
|
||||||
|
@-moz-keyframes bg { |
||||||
|
0% { |
||||||
|
-moz-transform: translateX(0); |
||||||
|
-webkit-transform: translateX(0); |
||||||
|
-ms-transform: translateX(0); |
||||||
|
transform: translateX(0); } |
||||||
|
100% { |
||||||
|
-moz-transform: translateX(-25%); |
||||||
|
-webkit-transform: translateX(-25%); |
||||||
|
-ms-transform: translateX(-25%); |
||||||
|
transform: translateX(-25%); } } |
||||||
|
|
||||||
|
@-webkit-keyframes bg { |
||||||
|
0% { |
||||||
|
-moz-transform: translateX(0); |
||||||
|
-webkit-transform: translateX(0); |
||||||
|
-ms-transform: translateX(0); |
||||||
|
transform: translateX(0); } |
||||||
|
100% { |
||||||
|
-moz-transform: translateX(-25%); |
||||||
|
-webkit-transform: translateX(-25%); |
||||||
|
-ms-transform: translateX(-25%); |
||||||
|
transform: translateX(-25%); } } |
||||||
|
|
||||||
|
@-ms-keyframes bg { |
||||||
|
0% { |
||||||
|
-moz-transform: translateX(0); |
||||||
|
-webkit-transform: translateX(0); |
||||||
|
-ms-transform: translateX(0); |
||||||
|
transform: translateX(0); } |
||||||
|
100% { |
||||||
|
-moz-transform: translateX(-25%); |
||||||
|
-webkit-transform: translateX(-25%); |
||||||
|
-ms-transform: translateX(-25%); |
||||||
|
transform: translateX(-25%); } } |
||||||
|
|
||||||
|
@keyframes bg { |
||||||
|
0% { |
||||||
|
-moz-transform: translateX(0); |
||||||
|
-webkit-transform: translateX(0); |
||||||
|
-ms-transform: translateX(0); |
||||||
|
transform: translateX(0); } |
||||||
|
100% { |
||||||
|
-moz-transform: translateX(-25%); |
||||||
|
-webkit-transform: translateX(-25%); |
||||||
|
-ms-transform: translateX(-25%); |
||||||
|
transform: translateX(-25%); } } |
||||||
|
|
||||||
|
/* Type */ |
||||||
|
body, input, select, textarea { |
||||||
|
color: rgba(255, 255, 255, 0.75); |
||||||
|
font-family: "Roboto", sans-serif; |
||||||
|
font-size: 16pt; |
||||||
|
font-weight: 400; |
||||||
|
letter-spacing: -0.01em; |
||||||
|
line-height: 1.65em; } |
||||||
|
@media screen and (max-width: 1680px) { |
||||||
|
body, input, select, textarea { |
||||||
|
font-size: 12pt; } } |
||||||
|
@media screen and (max-width: 1280px) { |
||||||
|
body, input, select, textarea { |
||||||
|
font-size: 11pt; } } |
||||||
|
@media screen and (max-width: 980px) { |
||||||
|
body, input, select, textarea { |
||||||
|
font-size: 12pt; } } |
||||||
|
@media screen and (max-width: 736px) { |
||||||
|
body, input, select, textarea { |
||||||
|
font-size: 12pt; } } |
||||||
|
@media screen and (max-width: 480px) { |
||||||
|
body, input, select, textarea { |
||||||
|
font-size: 12pt; } } |
||||||
|
|
||||||
|
a { |
||||||
|
-moz-transition: border-bottom-color 0.2s ease, color 0.2s ease; |
||||||
|
-webkit-transition: border-bottom-color 0.2s ease, color 0.2s ease; |
||||||
|
-ms-transition: border-bottom-color 0.2s ease, color 0.2s ease; |
||||||
|
transition: border-bottom-color 0.2s ease, color 0.2s ease; |
||||||
|
border-bottom: dotted 1px rgba(255, 255, 255, 0.25); |
||||||
|
color: #1cb495; |
||||||
|
text-decoration: none; } |
||||||
|
a:hover { |
||||||
|
border-bottom-color: transparent; |
||||||
|
color: #1cb495 !important; |
||||||
|
text-decoration: none; } |
||||||
|
|
||||||
|
strong, b { |
||||||
|
color: #fff; |
||||||
|
font-weight: 700; } |
||||||
|
|
||||||
|
em, i { |
||||||
|
font-style: italic; } |
||||||
|
|
||||||
|
p { |
||||||
|
margin: 0 0 2em 0; } |
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 { |
||||||
|
color: #fff; |
||||||
|
font-weight: 700; |
||||||
|
line-height: 1em; |
||||||
|
margin: 0 0 1em 0; } |
||||||
|
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { |
||||||
|
color: inherit; |
||||||
|
text-decoration: none; } |
||||||
|
|
||||||
|
h1 { |
||||||
|
font-size: 2.5em; |
||||||
|
line-height: 1.25em; } |
||||||
|
|
||||||
|
h2 { |
||||||
|
font-size: 1.75em; |
||||||
|
line-height: 1.5em; } |
||||||
|
|
||||||
|
h3 { |
||||||
|
font-size: 1.35em; |
||||||
|
line-height: 1.5em; } |
||||||
|
|
||||||
|
h4 { |
||||||
|
font-size: 1.1em; |
||||||
|
line-height: 1.5em; } |
||||||
|
|
||||||
|
h5 { |
||||||
|
font-size: 0.9em; |
||||||
|
line-height: 1.5em; } |
||||||
|
|
||||||
|
h6 { |
||||||
|
font-size: 0.7em; |
||||||
|
line-height: 1.5em; } |
||||||
|
|
||||||
|
sub { |
||||||
|
font-size: 0.8em; |
||||||
|
position: relative; |
||||||
|
top: 0.5em; } |
||||||
|
|
||||||
|
sup { |
||||||
|
font-size: 0.8em; |
||||||
|
position: relative; |
||||||
|
top: -0.5em; } |
||||||
|
|
||||||
|
blockquote { |
||||||
|
border-left: solid 8px rgba(255, 255, 255, 0.35); |
||||||
|
font-style: italic; |
||||||
|
margin: 0 0 2em 0; |
||||||
|
padding: 0.5em 0 0.5em 2em; } |
||||||
|
|
||||||
|
code { |
||||||
|
background: rgba(255, 255, 255, 0.125); |
||||||
|
border-radius: 6px; |
||||||
|
border: solid 2px rgba(255, 255, 255, 0.35); |
||||||
|
font-family: "Courier New", monospace; |
||||||
|
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.9em; |
||||||
|
margin: 0 0 2em 0; } |
||||||
|
pre code { |
||||||
|
display: block; |
||||||
|
line-height: 1.75em; |
||||||
|
padding: 1em 1.5em; |
||||||
|
overflow-x: auto; } |
||||||
|
|
||||||
|
hr { |
||||||
|
border: 0; |
||||||
|
border-bottom: solid 2px rgba(255, 255, 255, 0.35); |
||||||
|
margin: 2em 0; } |
||||||
|
hr.major { |
||||||
|
margin: 3em 0; } |
||||||
|
|
||||||
|
/* Section/Article */ |
||||||
|
section.special, article.special { |
||||||
|
text-align: center; } |
||||||
|
|
||||||
|
header p { |
||||||
|
color: rgba(255, 255, 255, 0.5); |
||||||
|
position: relative; |
||||||
|
margin: 0 0 1.5em 0; } |
||||||
|
|
||||||
|
header h2 + p { |
||||||
|
font-size: 1.25em; |
||||||
|
margin-top: -1em; |
||||||
|
line-height: 1.5em; } |
||||||
|
|
||||||
|
header h3 + p { |
||||||
|
font-size: 1.1em; |
||||||
|
margin-top: -0.8em; |
||||||
|
line-height: 1.5em; } |
||||||
|
|
||||||
|
header h4 + p, |
||||||
|
header h5 + p, |
||||||
|
header h6 + p { |
||||||
|
font-size: 0.9em; |
||||||
|
margin-top: -0.6em; |
||||||
|
line-height: 1.5em; } |
||||||
|
|
||||||
|
@media screen and (max-width: 980px) { |
||||||
|
header br { |
||||||
|
display: none; } } |
||||||
|
|
||||||
|
@media screen and (max-width: 736px) { |
||||||
|
header br { |
||||||
|
display: inline; } } |
||||||
|
|
||||||
|
@media screen and (max-width: 480px) { |
||||||
|
header br { |
||||||
|
display: none; } } |
||||||
|
|
||||||
|
/* Icon */ |
||||||
|
.icon { |
||||||
|
text-decoration: none; |
||||||
|
border-bottom: none; |
||||||
|
position: relative; } |
||||||
|
.icon:before { |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
display: inline-block; |
||||||
|
font-style: normal; |
||||||
|
font-variant: normal; |
||||||
|
text-rendering: auto; |
||||||
|
line-height: 1; |
||||||
|
text-transform: none !important; |
||||||
|
font-family: 'Font Awesome 5 Free'; |
||||||
|
font-weight: 400; } |
||||||
|
.icon > .label { |
||||||
|
display: none; } |
||||||
|
.icon:before { |
||||||
|
line-height: inherit; } |
||||||
|
.icon.solid:before { |
||||||
|
font-weight: 900; } |
||||||
|
.icon.brands:before { |
||||||
|
font-family: 'Font Awesome 5 Brands'; } |
||||||
|
|
||||||
|
/* List */ |
||||||
|
ol { |
||||||
|
list-style: decimal; |
||||||
|
margin: 0 0 2em 0; |
||||||
|
padding-left: 1.25em; } |
||||||
|
ol li { |
||||||
|
padding-left: 0.25em; } |
||||||
|
|
||||||
|
ul { |
||||||
|
list-style: disc; |
||||||
|
margin: 0 0 2em 0; |
||||||
|
padding-left: 1em; } |
||||||
|
ul li { |
||||||
|
padding-left: 0.5em; } |
||||||
|
|
||||||
|
/* Icons */ |
||||||
|
ul.icons { |
||||||
|
cursor: default; |
||||||
|
list-style: none; |
||||||
|
padding-left: 0; } |
||||||
|
ul.icons li { |
||||||
|
display: inline-block; |
||||||
|
padding: 0 1em 0 0; } |
||||||
|
ul.icons li:last-child { |
||||||
|
padding-right: 0; } |
||||||
|
ul.icons li .icon:before { |
||||||
|
font-size: 1.25em; } |
||||||
|
ul.icons li a { |
||||||
|
color: inherit; } |
||||||
|
|
||||||
|
/* Form */ |
||||||
|
form { |
||||||
|
margin: 0 0 2em 0; } |
||||||
|
form .message { |
||||||
|
text-decoration: none; |
||||||
|
-moz-transition: opacity 0.2s ease-in-out, -moz-transform 0.2s ease-in-out; |
||||||
|
-webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; |
||||||
|
-ms-transition: opacity 0.2s ease-in-out, -ms-transform 0.2s ease-in-out; |
||||||
|
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; |
||||||
|
-moz-transform: scale(1.05); |
||||||
|
-webkit-transform: scale(1.05); |
||||||
|
-ms-transform: scale(1.05); |
||||||
|
transform: scale(1.05); |
||||||
|
height: 2.75em; |
||||||
|
line-height: 2.75em; |
||||||
|
opacity: 0; } |
||||||
|
form .message:before { |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
display: inline-block; |
||||||
|
font-style: normal; |
||||||
|
font-variant: normal; |
||||||
|
text-rendering: auto; |
||||||
|
line-height: 1; |
||||||
|
text-transform: none !important; |
||||||
|
font-family: 'Font Awesome 5 Free'; |
||||||
|
font-weight: 900; } |
||||||
|
form .message:before { |
||||||
|
margin-right: 0.5em; } |
||||||
|
form .message.visible { |
||||||
|
-moz-transform: scale(1); |
||||||
|
-webkit-transform: scale(1); |
||||||
|
-ms-transform: scale(1); |
||||||
|
transform: scale(1); |
||||||
|
opacity: 1; } |
||||||
|
form .message.success { |
||||||
|
color: #1cb495; } |
||||||
|
form .message.success:before { |
||||||
|
content: '\f00c'; } |
||||||
|
form .message.failure { |
||||||
|
color: #ff2361; } |
||||||
|
form .message.failure:before { |
||||||
|
content: '\f119'; } |
||||||
|
|
||||||
|
label { |
||||||
|
color: #fff; |
||||||
|
display: block; |
||||||
|
font-size: 0.9em; |
||||||
|
font-weight: 700; |
||||||
|
margin: 0 0 1em 0; } |
||||||
|
|
||||||
|
@-moz-keyframes focus { |
||||||
|
0% { |
||||||
|
-moz-transform: scale(1); |
||||||
|
-webkit-transform: scale(1); |
||||||
|
-ms-transform: scale(1); |
||||||
|
transform: scale(1); } |
||||||
|
50% { |
||||||
|
-moz-transform: scale(1.025); |
||||||
|
-webkit-transform: scale(1.025); |
||||||
|
-ms-transform: scale(1.025); |
||||||
|
transform: scale(1.025); } |
||||||
|
100% { |
||||||
|
-moz-transform: scale(1); |
||||||
|
-webkit-transform: scale(1); |
||||||
|
-ms-transform: scale(1); |
||||||
|
transform: scale(1); } } |
||||||
|
|
||||||
|
@-webkit-keyframes focus { |
||||||
|
0% { |
||||||
|
-moz-transform: scale(1); |
||||||
|
-webkit-transform: scale(1); |
||||||
|
-ms-transform: scale(1); |
||||||
|
transform: scale(1); } |
||||||
|
50% { |
||||||
|
-moz-transform: scale(1.025); |
||||||
|
-webkit-transform: scale(1.025); |
||||||
|
-ms-transform: scale(1.025); |
||||||
|
transform: scale(1.025); } |
||||||
|
100% { |
||||||
|
-moz-transform: scale(1); |
||||||
|
-webkit-transform: scale(1); |
||||||
|
-ms-transform: scale(1); |
||||||
|
transform: scale(1); } } |
||||||
|
|
||||||
|
@-ms-keyframes focus { |
||||||
|
0% { |
||||||
|
-moz-transform: scale(1); |
||||||
|
-webkit-transform: scale(1); |
||||||
|
-ms-transform: scale(1); |
||||||
|
transform: scale(1); } |
||||||
|
50% { |
||||||
|
-moz-transform: scale(1.025); |
||||||
|
-webkit-transform: scale(1.025); |
||||||
|
-ms-transform: scale(1.025); |
||||||
|
transform: scale(1.025); } |
||||||
|
100% { |
||||||
|
-moz-transform: scale(1); |
||||||
|
-webkit-transform: scale(1); |
||||||
|
-ms-transform: scale(1); |
||||||
|
transform: scale(1); } } |
||||||
|
|
||||||
|
@keyframes focus { |
||||||
|
0% { |
||||||
|
-moz-transform: scale(1); |
||||||
|
-webkit-transform: scale(1); |
||||||
|
-ms-transform: scale(1); |
||||||
|
transform: scale(1); } |
||||||
|
50% { |
||||||
|
-moz-transform: scale(1.025); |
||||||
|
-webkit-transform: scale(1.025); |
||||||
|
-ms-transform: scale(1.025); |
||||||
|
transform: scale(1.025); } |
||||||
|
100% { |
||||||
|
-moz-transform: scale(1); |
||||||
|
-webkit-transform: scale(1); |
||||||
|
-ms-transform: scale(1); |
||||||
|
transform: scale(1); } } |
||||||
|
|
||||||
|
input[type="text"], |
||||||
|
input[type="password"], |
||||||
|
input[type="email"], |
||||||
|
select, |
||||||
|
textarea { |
||||||
|
-moz-appearance: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
-ms-appearance: none; |
||||||
|
appearance: none; |
||||||
|
-moz-transform: scale(1); |
||||||
|
-webkit-transform: scale(1); |
||||||
|
-ms-transform: scale(1); |
||||||
|
transform: scale(1); |
||||||
|
-moz-transition: border-color 0.2s ease, background-color 0.2s ease; |
||||||
|
-webkit-transition: border-color 0.2s ease, background-color 0.2s ease; |
||||||
|
-ms-transition: border-color 0.2s ease, background-color 0.2s ease; |
||||||
|
transition: border-color 0.2s ease, background-color 0.2s ease; |
||||||
|
background-color: transparent; |
||||||
|
border-radius: 6px; |
||||||
|
border: none; |
||||||
|
border: solid 2px rgba(255, 255, 255, 0.35); |
||||||
|
color: inherit; |
||||||
|
display: block; |
||||||
|
outline: 0; |
||||||
|
padding: 0 1em; |
||||||
|
text-decoration: none; |
||||||
|
width: 100%; } |
||||||
|
input[type="text"]:invalid, |
||||||
|
input[type="password"]:invalid, |
||||||
|
input[type="email"]:invalid, |
||||||
|
select:invalid, |
||||||
|
textarea:invalid { |
||||||
|
box-shadow: none; } |
||||||
|
input[type="text"]:focus, |
||||||
|
input[type="password"]:focus, |
||||||
|
input[type="email"]:focus, |
||||||
|
select:focus, |
||||||
|
textarea:focus { |
||||||
|
-moz-animation: focus 0.1s; |
||||||
|
-webkit-animation: focus 0.1s; |
||||||
|
-ms-animation: focus 0.1s; |
||||||
|
animation: focus 0.1s; |
||||||
|
background-color: rgba(255, 255, 255, 0.125); |
||||||
|
border-color: #1cb495; } |
||||||
|
|
||||||
|
select { |
||||||
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.35)' /%3E%3C/svg%3E"); |
||||||
|
background-size: 1.25rem; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: calc(100% - 1rem) center; |
||||||
|
height: 2.75em; |
||||||
|
padding-right: 2.75em; |
||||||
|
text-overflow: ellipsis; } |
||||||
|
select option { |
||||||
|
color: #fff; |
||||||
|
background: #000; } |
||||||
|
select:focus::-ms-value { |
||||||
|
background-color: transparent; } |
||||||
|
select::-ms-expand { |
||||||
|
display: none; } |
||||||
|
|
||||||
|
input[type="text"], |
||||||
|
input[type="password"], |
||||||
|
input[type="email"], |
||||||
|
select { |
||||||
|
height: 2.75em; } |
||||||
|
|
||||||
|
textarea { |
||||||
|
padding: 0.75em 1em; } |
||||||
|
|
||||||
|
input[type="checkbox"], |
||||||
|
input[type="radio"] { |
||||||
|
-moz-appearance: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
-ms-appearance: none; |
||||||
|
appearance: none; |
||||||
|
display: block; |
||||||
|
float: left; |
||||||
|
margin-right: -2em; |
||||||
|
opacity: 0; |
||||||
|
width: 1em; |
||||||
|
z-index: -1; } |
||||||
|
input[type="checkbox"] + label, |
||||||
|
input[type="radio"] + label { |
||||||
|
text-decoration: none; |
||||||
|
color: rgba(255, 255, 255, 0.75); |
||||||
|
cursor: pointer; |
||||||
|
display: inline-block; |
||||||
|
font-size: 1em; |
||||||
|
font-weight: 400; |
||||||
|
padding-left: 2.4em; |
||||||
|
padding-right: 0.75em; |
||||||
|
position: relative; } |
||||||
|
input[type="checkbox"] + label:before, |
||||||
|
input[type="radio"] + label:before { |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
display: inline-block; |
||||||
|
font-style: normal; |
||||||
|
font-variant: normal; |
||||||
|
text-rendering: auto; |
||||||
|
line-height: 1; |
||||||
|
text-transform: none !important; |
||||||
|
font-family: 'Font Awesome 5 Free'; |
||||||
|
font-weight: 900; } |
||||||
|
input[type="checkbox"] + label:before, |
||||||
|
input[type="radio"] + label:before { |
||||||
|
background: rgba(255, 255, 255, 0.125); |
||||||
|
border-radius: 6px; |
||||||
|
border: solid 2px rgba(255, 255, 255, 0.35); |
||||||
|
content: ''; |
||||||
|
display: inline-block; |
||||||
|
font-size: 0.8em; |
||||||
|
height: 1.65em; |
||||||
|
left: 0; |
||||||
|
line-height: 1.65em; |
||||||
|
position: absolute; |
||||||
|
text-align: center; |
||||||
|
top: 0; |
||||||
|
width: 1.65em; } |
||||||
|
input[type="checkbox"]:checked + label:before, |
||||||
|
input[type="radio"]:checked + label:before { |
||||||
|
background: #1cb495; |
||||||
|
border-color: #1cb495; |
||||||
|
color: #ffffff; |
||||||
|
content: '\f00c'; } |
||||||
|
input[type="checkbox"]:focus + label:before, |
||||||
|
input[type="radio"]:focus + label:before { |
||||||
|
border-color: #1cb495; |
||||||
|
box-shadow: 0 0 0 2px #1cb495; } |
||||||
|
|
||||||
|
input[type="checkbox"] + label:before { |
||||||
|
border-radius: 6px; } |
||||||
|
|
||||||
|
input[type="radio"] + label:before { |
||||||
|
border-radius: 100%; } |
||||||
|
|
||||||
|
::-webkit-input-placeholder { |
||||||
|
color: rgba(255, 255, 255, 0.5) !important; |
||||||
|
opacity: 1.0; } |
||||||
|
|
||||||
|
:-moz-placeholder { |
||||||
|
color: rgba(255, 255, 255, 0.5) !important; |
||||||
|
opacity: 1.0; } |
||||||
|
|
||||||
|
::-moz-placeholder { |
||||||
|
color: rgba(255, 255, 255, 0.5) !important; |
||||||
|
opacity: 1.0; } |
||||||
|
|
||||||
|
:-ms-input-placeholder { |
||||||
|
color: rgba(255, 255, 255, 0.5) !important; |
||||||
|
opacity: 1.0; } |
||||||
|
|
||||||
|
.formerize-placeholder { |
||||||
|
color: rgba(255, 255, 255, 0.5) !important; |
||||||
|
opacity: 1.0; } |
||||||
|
|
||||||
|
/* Button */ |
||||||
|
input[type="submit"], |
||||||
|
input[type="reset"], |
||||||
|
input[type="button"], |
||||||
|
button, |
||||||
|
.button { |
||||||
|
-moz-appearance: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
-ms-appearance: none; |
||||||
|
appearance: none; |
||||||
|
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out; |
||||||
|
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out; |
||||||
|
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out; |
||||||
|
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out; |
||||||
|
background-color: #1cb495; |
||||||
|
border-radius: 6px; |
||||||
|
border: 0; |
||||||
|
color: #ffffff !important; |
||||||
|
cursor: pointer; |
||||||
|
display: inline-block; |
||||||
|
font-weight: 700; |
||||||
|
height: 2.75em; |
||||||
|
line-height: 2.75em; |
||||||
|
padding: 0 1.125em; |
||||||
|
text-align: center; |
||||||
|
text-decoration: none; |
||||||
|
white-space: nowrap; } |
||||||
|
input[type="submit"]:hover, |
||||||
|
input[type="reset"]:hover, |
||||||
|
input[type="button"]:hover, |
||||||
|
button:hover, |
||||||
|
.button:hover { |
||||||
|
background-color: #1fcaa7; } |
||||||
|
input[type="submit"]:active, |
||||||
|
input[type="reset"]:active, |
||||||
|
input[type="button"]:active, |
||||||
|
button:active, |
||||||
|
.button:active { |
||||||
|
background-color: #199e83; } |
||||||
|
input[type="submit"].disabled, input[type="submit"]:disabled, |
||||||
|
input[type="reset"].disabled, |
||||||
|
input[type="reset"]:disabled, |
||||||
|
input[type="button"].disabled, |
||||||
|
input[type="button"]:disabled, |
||||||
|
button.disabled, |
||||||
|
button:disabled, |
||||||
|
.button.disabled, |
||||||
|
.button:disabled { |
||||||
|
opacity: 0.5; } |
||||||
|
@media screen and (max-width: 480px) { |
||||||
|
input[type="submit"], |
||||||
|
input[type="reset"], |
||||||
|
input[type="button"], |
||||||
|
button, |
||||||
|
.button { |
||||||
|
padding: 0; } } |
||||||
|
|
||||||
|
/* Header */ |
||||||
|
#header h1 { |
||||||
|
font-size: 3.25em; |
||||||
|
margin: 0 0 0.55em 0; } |
||||||
|
|
||||||
|
#header p { |
||||||
|
font-size: 1.35em; |
||||||
|
line-height: 1.65em; } |
||||||
|
|
||||||
|
#header a { |
||||||
|
color: inherit; } |
||||||
|
|
||||||
|
@media screen and (max-width: 736px) { |
||||||
|
#header h1 { |
||||||
|
font-size: 2em; } |
||||||
|
#header p { |
||||||
|
font-size: 1em; } } |
||||||
|
|
||||||
|
@media screen and (max-width: 480px) { |
||||||
|
#header { |
||||||
|
margin: 0 0 1em 0; } } |
||||||
|
|
||||||
|
/* Signup Form */ |
||||||
|
#signup-form { |
||||||
|
display: -moz-flex; |
||||||
|
display: -webkit-flex; |
||||||
|
display: -ms-flex; |
||||||
|
display: flex; |
||||||
|
position: relative; } |
||||||
|
#signup-form input[type="text"], |
||||||
|
#signup-form input[type="password"], |
||||||
|
#signup-form input[type="email"] { |
||||||
|
width: 18em; } |
||||||
|
#signup-form > * { |
||||||
|
margin: 0 0 0 1em; } |
||||||
|
#signup-form > :first-child { |
||||||
|
margin: 0 0 0 0; } |
||||||
|
@media screen and (max-width: 480px) { |
||||||
|
#signup-form { |
||||||
|
-moz-flex-direction: column; |
||||||
|
-webkit-flex-direction: column; |
||||||
|
-ms-flex-direction: column; |
||||||
|
flex-direction: column; } |
||||||
|
#signup-form input[type="type"], |
||||||
|
#signup-form input[type="password"], |
||||||
|
#signup-form input[type="email"] { |
||||||
|
width: 100%; } |
||||||
|
#signup-form > * { |
||||||
|
margin: 1.25em 0 0 0; } |
||||||
|
#signup-form .message { |
||||||
|
bottom: -1.5em; |
||||||
|
font-size: 0.9em; |
||||||
|
height: 1em; |
||||||
|
left: 0; |
||||||
|
line-height: inherit; |
||||||
|
margin-top: 0; |
||||||
|
position: absolute; } } |
||||||
|
|
||||||
|
/* Footer */ |
||||||
|
#footer { |
||||||
|
-moz-transition: opacity 0.5s ease-in-out; |
||||||
|
-webkit-transition: opacity 0.5s ease-in-out; |
||||||
|
-ms-transition: opacity 0.5s ease-in-out; |
||||||
|
transition: opacity 0.5s ease-in-out; |
||||||
|
bottom: 4em; |
||||||
|
color: rgba(255, 255, 255, 0.5); |
||||||
|
left: 4em; |
||||||
|
opacity: 0.5; |
||||||
|
position: absolute; } |
||||||
|
#footer .icons { |
||||||
|
margin: 0 0 0.5em 0; } |
||||||
|
#footer .copyright { |
||||||
|
font-size: 0.8em; |
||||||
|
list-style: none; |
||||||
|
padding: 0; } |
||||||
|
#footer .copyright li { |
||||||
|
border-left: solid 1px rgba(255, 255, 255, 0.25); |
||||||
|
display: inline-block; |
||||||
|
line-height: 1em; |
||||||
|
margin: 0 0 0 0.75em; |
||||||
|
padding: 0 0 0 0.75em; } |
||||||
|
#footer .copyright li:first-child { |
||||||
|
border-left: 0; |
||||||
|
margin-left: 0; |
||||||
|
padding-left: 0; } |
||||||
|
#footer .copyright a { |
||||||
|
color: inherit; } |
||||||
|
#footer:hover { |
||||||
|
opacity: 1; } |
||||||
|
#footer > :last-child { |
||||||
|
margin-bottom: 0; } |
||||||
|
@media screen and (max-width: 1680px) { |
||||||
|
#footer { |
||||||
|
bottom: 3.5em; |
||||||
|
left: 3.5em; } } |
||||||
|
@media screen and (max-width: 736px) { |
||||||
|
#footer { |
||||||
|
bottom: 2em; |
||||||
|
left: 2em; } } |
||||||
|
@media screen and (max-width: 360px) { |
||||||
|
#footer { |
||||||
|
bottom: 1.25em; |
||||||
|
left: 1.25em; } } |
||||||
|
@media screen and (max-height: 640px) { |
||||||
|
#footer { |
||||||
|
bottom: auto; |
||||||
|
left: auto; |
||||||
|
margin: 1em 0 0 0; |
||||||
|
position: relative; } } |
@ -0,0 +1,171 @@ |
|||||||
|
/* |
||||||
|
Eventually by HTML5 UP |
||||||
|
html5up.net | @ajlkn |
||||||
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
*/ |
||||||
|
|
||||||
|
(function() { |
||||||
|
|
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $body = document.querySelector('body'); |
||||||
|
|
||||||
|
// Methods/polyfills.
|
||||||
|
|
||||||
|
// classList | (c) @remy | github.com/remy/polyfills | rem.mit-license.org
|
||||||
|
!function(){function t(t){this.el=t;for(var n=t.className.replace(/^\s+|\s+$/g,"").split(/\s+/),i=0;i<n.length;i++)e.call(this,n[i])}function n(t,n,i){Object.defineProperty?Object.defineProperty(t,n,{get:i}):t.__defineGetter__(n,i)}if(!("undefined"==typeof window.Element||"classList"in document.documentElement)){var i=Array.prototype,e=i.push,s=i.splice,o=i.join;t.prototype={add:function(t){this.contains(t)||(e.call(this,t),this.el.className=this.toString())},contains:function(t){return-1!=this.el.className.indexOf(t)},item:function(t){return this[t]||null},remove:function(t){if(this.contains(t)){for(var n=0;n<this.length&&this[n]!=t;n++);s.call(this,n,1),this.el.className=this.toString()}},toString:function(){return o.call(this," ")},toggle:function(t){return this.contains(t)?this.remove(t):this.add(t),this.contains(t)}},window.DOMTokenList=t,n(Element.prototype,"classList",function(){return new t(this)})}}(); |
||||||
|
|
||||||
|
// canUse
|
||||||
|
window.canUse=function(p){if(!window._canUse)window._canUse=document.createElement("div");var e=window._canUse.style,up=p.charAt(0).toUpperCase()+p.slice(1);return p in e||"Moz"+up in e||"Webkit"+up in e||"O"+up in e||"ms"+up in e}; |
||||||
|
|
||||||
|
// window.addEventListener
|
||||||
|
(function(){if("addEventListener"in window)return;window.addEventListener=function(type,f){window.attachEvent("on"+type,f)}})(); |
||||||
|
|
||||||
|
// Play initial animations on page load.
|
||||||
|
window.addEventListener('load', function() { |
||||||
|
window.setTimeout(function() { |
||||||
|
$body.classList.remove('is-preload'); |
||||||
|
}, 100); |
||||||
|
}); |
||||||
|
|
||||||
|
// Slideshow Background.
|
||||||
|
(function() { |
||||||
|
|
||||||
|
// Settings.
|
||||||
|
var settings = { |
||||||
|
|
||||||
|
// Images (in the format of 'url': 'alignment').
|
||||||
|
images: {}, |
||||||
|
|
||||||
|
// Delay.
|
||||||
|
delay: 6000 |
||||||
|
|
||||||
|
}; |
||||||
|
for(var iii = 0; iii < 3; iii ++){ |
||||||
|
settings.images['https://api.yimian.xyz/img/?type=wallpaper&t='+(Math.random()*(new Date().valueOf()))] = "center"; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Vars.
|
||||||
|
var pos = 0, lastPos = 0, |
||||||
|
$wrapper, $bgs = [], $bg, |
||||||
|
k, v; |
||||||
|
|
||||||
|
// Create BG wrapper, BGs.
|
||||||
|
$wrapper = document.createElement('div'); |
||||||
|
$wrapper.id = 'bg'; |
||||||
|
$body.appendChild($wrapper); |
||||||
|
|
||||||
|
for (k in settings.images) { |
||||||
|
|
||||||
|
// Create BG.
|
||||||
|
$bg = document.createElement('div'); |
||||||
|
$bg.style.backgroundImage = 'url("' + k + '")'; |
||||||
|
$bg.style.backgroundPosition = settings.images[k]; |
||||||
|
$wrapper.appendChild($bg); |
||||||
|
|
||||||
|
// Add it to array.
|
||||||
|
$bgs.push($bg); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// Main loop.
|
||||||
|
$bgs[pos].classList.add('visible'); |
||||||
|
$bgs[pos].classList.add('top'); |
||||||
|
|
||||||
|
// Bail if we only have a single BG or the client doesn't support transitions.
|
||||||
|
if ($bgs.length == 1 |
||||||
|
|| !canUse('transition')) |
||||||
|
return; |
||||||
|
|
||||||
|
window.setInterval(function() { |
||||||
|
|
||||||
|
lastPos = pos; |
||||||
|
pos++; |
||||||
|
|
||||||
|
// Wrap to beginning if necessary.
|
||||||
|
if (pos >= $bgs.length) |
||||||
|
pos = 0; |
||||||
|
|
||||||
|
// Swap top images.
|
||||||
|
$bgs[lastPos].classList.remove('top'); |
||||||
|
$bgs[pos].classList.add('visible'); |
||||||
|
$bgs[pos].classList.add('top'); |
||||||
|
|
||||||
|
// Hide last image after a short delay.
|
||||||
|
window.setTimeout(function() { |
||||||
|
$bgs[lastPos].classList.remove('visible'); |
||||||
|
}, settings.delay / 2); |
||||||
|
|
||||||
|
}, settings.delay); |
||||||
|
|
||||||
|
})(); |
||||||
|
|
||||||
|
// Signup Form.
|
||||||
|
(function() { |
||||||
|
|
||||||
|
// Vars.
|
||||||
|
var $form = document.querySelectorAll('#signup-form')[0], |
||||||
|
$submit = document.querySelectorAll('#signup-form input[type="submit"]')[0], |
||||||
|
$message; |
||||||
|
|
||||||
|
// Bail if addEventListener isn't supported.
|
||||||
|
if (!('addEventListener' in $form)) |
||||||
|
return; |
||||||
|
|
||||||
|
// Message.
|
||||||
|
$message = document.createElement('span'); |
||||||
|
$message.classList.add('message'); |
||||||
|
$form.appendChild($message); |
||||||
|
|
||||||
|
$message._show = function(type, text) { |
||||||
|
|
||||||
|
$message.innerHTML = text; |
||||||
|
$message.classList.add(type); |
||||||
|
$message.classList.add('visible'); |
||||||
|
|
||||||
|
window.setTimeout(function() { |
||||||
|
$message._hide(); |
||||||
|
}, 3000); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
$message._hide = function() { |
||||||
|
$message.classList.remove('visible'); |
||||||
|
}; |
||||||
|
|
||||||
|
// Events.
|
||||||
|
// Note: If you're *not* using AJAX, get rid of this event listener.
|
||||||
|
$form.addEventListener('submit', function(event) { |
||||||
|
|
||||||
|
event.stopPropagation(); |
||||||
|
event.preventDefault(); |
||||||
|
|
||||||
|
// Hide message.
|
||||||
|
$message._hide(); |
||||||
|
|
||||||
|
// Disable submit.
|
||||||
|
$submit.disabled = true; |
||||||
|
|
||||||
|
// Process form.
|
||||||
|
// Note: Doesn't actually do anything yet (other than report back with a "thank you"),
|
||||||
|
// but there's enough here to piece together a working AJAX submission call that does.
|
||||||
|
window.setTimeout(function() { |
||||||
|
|
||||||
|
// Reset form.
|
||||||
|
$form.reset(); |
||||||
|
|
||||||
|
// Enable submit.
|
||||||
|
$submit.disabled = false; |
||||||
|
|
||||||
|
// Show message.
|
||||||
|
$message._show('success', 'Thank you!'); |
||||||
|
//$message._show('failure', 'Something went wrong. Please try again.');
|
||||||
|
|
||||||
|
}, 750); |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
})(); |
||||||
|
|
||||||
|
})(); |
@ -0,0 +1,67 @@ |
|||||||
|
/// |
||||||
|
/// Eventually 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('transition', 'opacity #{_duration(bg-fadein)} ease-in-out'); |
||||||
|
height: 100%; |
||||||
|
left: 0; |
||||||
|
opacity: 0.375; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
width: 100%; |
||||||
|
z-index: 1; |
||||||
|
|
||||||
|
div { |
||||||
|
@include vendor('transition', ('opacity #{_duration(bg-transition)} ease')); |
||||||
|
background-size: cover; |
||||||
|
height: 100%; |
||||||
|
left: 0; |
||||||
|
opacity: 0; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
visibility: hidden; |
||||||
|
width: 150%; |
||||||
|
|
||||||
|
&.visible { |
||||||
|
@include vendor('animation', 'bg #{_duration(bg-slide)} linear infinite'); |
||||||
|
opacity: 1; |
||||||
|
visibility: visible; |
||||||
|
z-index: 1; |
||||||
|
|
||||||
|
&.top { |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=large') { |
||||||
|
@include vendor('animation', 'bg #{_duration(bg-slide) * 0.65} linear infinite'); |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=small') { |
||||||
|
@include vendor('animation', 'bg #{_duration(bg-slide) * 0.4} linear infinite'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:only-child { |
||||||
|
@include vendor('animation-direction', 'alternate !important'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
body.is-preload & { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@include keyframes(bg) { |
||||||
|
0% { |
||||||
|
@include vendor('transform', 'translateX(0)'); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
@include vendor('transform', 'translateX(-25%)'); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,78 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
/* Basic */ |
||||||
|
|
||||||
|
// MSIE: Required for IEMobile. |
||||||
|
@-ms-viewport { |
||||||
|
width: device-width; |
||||||
|
} |
||||||
|
|
||||||
|
// MSIE: Prevents scrollbar from overlapping content. |
||||||
|
body { |
||||||
|
-ms-overflow-style: scrollbar; |
||||||
|
} |
||||||
|
|
||||||
|
// Ensures page width is always >=320px. |
||||||
|
@include breakpoint('<=xsmall') { |
||||||
|
html, body { |
||||||
|
min-width: 320px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Set box model to border-box. |
||||||
|
// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice |
||||||
|
html { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
*, *:before, *:after { |
||||||
|
box-sizing: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
html, body { |
||||||
|
height: 100%; |
||||||
|
overflow-x: hidden; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
@include breakpoint('short') { |
||||||
|
height: auto; |
||||||
|
min-height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
@include vendor('display', 'flex'); |
||||||
|
@include vendor('flex-direction', 'column'); |
||||||
|
@include vendor('justify-content', 'center'); |
||||||
|
background-color: _palette(bg); |
||||||
|
padding: 6em 4em 4em 4em; |
||||||
|
|
||||||
|
// Stops initial animations until page loads. |
||||||
|
&.is-preload { |
||||||
|
*, *:before, *:after { |
||||||
|
@include vendor('animation', 'none !important'); |
||||||
|
@include vendor('transition', 'none !important'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
> * { |
||||||
|
position: relative; |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=xlarge') { |
||||||
|
padding: 6em 3.5em 3.5em 3.5em; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=small') { |
||||||
|
padding: 5em 2em 2em 2em; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=xxsmall') { |
||||||
|
padding: 5em 1.25em 1.25em 1.25em; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,76 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
// Reset. |
||||||
|
// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain) |
||||||
|
|
||||||
|
html, body, div, span, applet, object, |
||||||
|
iframe, h1, h2, h3, h4, h5, h6, p, blockquote, |
||||||
|
pre, a, abbr, acronym, address, big, cite, |
||||||
|
code, del, dfn, em, img, ins, kbd, q, s, samp, |
||||||
|
small, strike, strong, sub, sup, tt, var, b, |
||||||
|
u, i, center, dl, dt, dd, ol, ul, li, fieldset, |
||||||
|
form, label, legend, table, caption, tbody, |
||||||
|
tfoot, thead, tr, th, td, article, aside, |
||||||
|
canvas, details, embed, figure, figcaption, |
||||||
|
footer, header, hgroup, menu, nav, output, ruby, |
||||||
|
section, summary, time, mark, audio, video { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
border: 0; |
||||||
|
font-size: 100%; |
||||||
|
font: inherit; |
||||||
|
vertical-align: baseline; |
||||||
|
} |
||||||
|
|
||||||
|
article, aside, details, figcaption, figure, |
||||||
|
footer, header, hgroup, menu, nav, section { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
|
||||||
|
ol, ul { |
||||||
|
list-style:none; |
||||||
|
} |
||||||
|
|
||||||
|
blockquote, q { |
||||||
|
quotes: none; |
||||||
|
|
||||||
|
&:before, |
||||||
|
&:after { |
||||||
|
content: ''; |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
table { |
||||||
|
border-collapse: collapse; |
||||||
|
border-spacing: 0; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
-webkit-text-size-adjust: none; |
||||||
|
} |
||||||
|
|
||||||
|
mark { |
||||||
|
background-color: transparent; |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
input::-moz-focus-inner { |
||||||
|
border: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
input, select, textarea { |
||||||
|
-moz-appearance: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
-ms-appearance: none; |
||||||
|
appearance: none; |
||||||
|
} |
@ -0,0 +1,160 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
/* Type */ |
||||||
|
|
||||||
|
body, input, select, textarea { |
||||||
|
color: _palette(fg); |
||||||
|
font-family: _font(family); |
||||||
|
font-size: 16pt; |
||||||
|
font-weight: _font(weight); |
||||||
|
letter-spacing: _font(letter-spacing); |
||||||
|
line-height: 1.65em; |
||||||
|
|
||||||
|
@include breakpoint('<=xlarge') { |
||||||
|
font-size: 12pt; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=large') { |
||||||
|
font-size: 11pt; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=medium') { |
||||||
|
font-size: 12pt; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=small') { |
||||||
|
font-size: 12pt; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=xsmall') { |
||||||
|
font-size: 12pt; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
@include vendor('transition', ( |
||||||
|
'border-bottom-color #{_duration(transition)} ease', |
||||||
|
'color #{_duration(transition)} ease' |
||||||
|
)); |
||||||
|
border-bottom: dotted 1px _palette(border2); |
||||||
|
color: _palette(accent, bg); |
||||||
|
text-decoration: none; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
border-bottom-color: transparent; |
||||||
|
color: _palette(accent, bg) !important; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
strong, b { |
||||||
|
color: _palette(fg-bold); |
||||||
|
font-weight: _font(weight-bold); |
||||||
|
} |
||||||
|
|
||||||
|
em, i { |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
margin: 0 0 _size(element-margin) 0; |
||||||
|
} |
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 { |
||||||
|
color: _palette(fg-bold); |
||||||
|
font-weight: _font(weight-bold); |
||||||
|
line-height: 1em; |
||||||
|
margin: 0 0 (_size(element-margin) * 0.5) 0; |
||||||
|
|
||||||
|
a { |
||||||
|
color: inherit; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
h1 { |
||||||
|
font-size: 2.5em; |
||||||
|
line-height: 1.25em; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
font-size: 1.75em; |
||||||
|
line-height: 1.5em; |
||||||
|
} |
||||||
|
|
||||||
|
h3 { |
||||||
|
font-size: 1.35em; |
||||||
|
line-height: 1.5em; |
||||||
|
} |
||||||
|
|
||||||
|
h4 { |
||||||
|
font-size: 1.1em; |
||||||
|
line-height: 1.5em; |
||||||
|
} |
||||||
|
|
||||||
|
h5 { |
||||||
|
font-size: 0.9em; |
||||||
|
line-height: 1.5em; |
||||||
|
} |
||||||
|
|
||||||
|
h6 { |
||||||
|
font-size: 0.7em; |
||||||
|
line-height: 1.5em; |
||||||
|
} |
||||||
|
|
||||||
|
sub { |
||||||
|
font-size: 0.8em; |
||||||
|
position: relative; |
||||||
|
top: 0.5em; |
||||||
|
} |
||||||
|
|
||||||
|
sup { |
||||||
|
font-size: 0.8em; |
||||||
|
position: relative; |
||||||
|
top: -0.5em; |
||||||
|
} |
||||||
|
|
||||||
|
blockquote { |
||||||
|
border-left: solid (_size(border-width) * 4) _palette(border); |
||||||
|
font-style: italic; |
||||||
|
margin: 0 0 _size(element-margin) 0; |
||||||
|
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); |
||||||
|
} |
||||||
|
|
||||||
|
code { |
||||||
|
background: _palette(border-bg); |
||||||
|
border-radius: _size(border-radius); |
||||||
|
border: solid _size(border-width) _palette(border); |
||||||
|
font-family: _font(family-fixed); |
||||||
|
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.9em; |
||||||
|
margin: 0 0 _size(element-margin) 0; |
||||||
|
|
||||||
|
code { |
||||||
|
display: block; |
||||||
|
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) 0; |
||||||
|
|
||||||
|
&.major { |
||||||
|
margin: (_size(element-margin) * 1.5) 0; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,50 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
/* Button */ |
||||||
|
|
||||||
|
input[type="submit"], |
||||||
|
input[type="reset"], |
||||||
|
input[type="button"], |
||||||
|
button, |
||||||
|
.button { |
||||||
|
@include vendor('appearance', 'none'); |
||||||
|
@include vendor('transition', ( |
||||||
|
'background-color #{_duration(transition)} ease-in-out', |
||||||
|
'color #{_duration(transition)} ease-in-out', |
||||||
|
'opacity #{_duration(transition)} ease-in-out' |
||||||
|
)); |
||||||
|
background-color: _palette(accent, bg); |
||||||
|
border-radius: _size(border-radius); |
||||||
|
border: 0; |
||||||
|
color: _palette(accent, fg-bold) !important; |
||||||
|
cursor: pointer; |
||||||
|
display: inline-block; |
||||||
|
font-weight: _font(weight-bold); |
||||||
|
height: _size(element-height); |
||||||
|
line-height: _size(element-height); |
||||||
|
padding: 0 1.125em; |
||||||
|
text-align: center; |
||||||
|
text-decoration: none; |
||||||
|
white-space: nowrap; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background-color: lighten(_palette(accent, bg), 5); |
||||||
|
} |
||||||
|
|
||||||
|
&:active { |
||||||
|
background-color: darken(_palette(accent, bg), 5); |
||||||
|
} |
||||||
|
|
||||||
|
&.disabled, |
||||||
|
&:disabled { |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=xsmall') { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,227 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
/* Form */ |
||||||
|
|
||||||
|
form { |
||||||
|
margin: 0 0 _size(element-margin) 0; |
||||||
|
|
||||||
|
.message { |
||||||
|
@include icon(false, solid); |
||||||
|
@include vendor('transition', ( |
||||||
|
'opacity #{_duration(transition)} ease-in-out', |
||||||
|
'transform #{_duration(transition)} ease-in-out' |
||||||
|
)); |
||||||
|
@include vendor('transform', 'scale(1.05)'); |
||||||
|
height: _size(element-height); |
||||||
|
line-height: _size(element-height); |
||||||
|
opacity: 0; |
||||||
|
|
||||||
|
&:before { |
||||||
|
margin-right: 0.5em; |
||||||
|
} |
||||||
|
|
||||||
|
&.visible { |
||||||
|
@include vendor('transform', 'scale(1)'); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
&.success { |
||||||
|
color: _palette(positive, bg); |
||||||
|
|
||||||
|
&:before { |
||||||
|
content: '\f00c'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.failure { |
||||||
|
color: _palette(negative, bg); |
||||||
|
|
||||||
|
&:before { |
||||||
|
content: '\f119'; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
color: _palette(fg-bold); |
||||||
|
display: block; |
||||||
|
font-size: 0.9em; |
||||||
|
font-weight: _font(weight-bold); |
||||||
|
margin: 0 0 (_size(element-margin) * 0.5) 0; |
||||||
|
} |
||||||
|
|
||||||
|
@include keyframes(focus) { |
||||||
|
0% { @include vendor('transform', 'scale(1)'); } |
||||||
|
50% { @include vendor('transform', 'scale(1.025)'); } |
||||||
|
100% { @include vendor('transform', 'scale(1)'); } |
||||||
|
} |
||||||
|
|
||||||
|
input[type="text"], |
||||||
|
input[type="password"], |
||||||
|
input[type="email"], |
||||||
|
select, |
||||||
|
textarea { |
||||||
|
@include vendor('appearance', 'none'); |
||||||
|
@include vendor('transform', 'scale(1)'); |
||||||
|
@include vendor('transition', ( |
||||||
|
'border-color #{_duration(transition)} ease', |
||||||
|
'background-color #{_duration(transition)} ease' |
||||||
|
)); |
||||||
|
background-color: transparent; |
||||||
|
border-radius: _size(border-radius); |
||||||
|
border: none; |
||||||
|
border: solid _size(border-width) _palette(border); |
||||||
|
color: inherit; |
||||||
|
display: block; |
||||||
|
outline: 0; |
||||||
|
padding: 0 1em; |
||||||
|
text-decoration: none; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
&:invalid { |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
&:focus { |
||||||
|
@include vendor('animation', 'focus 0.1s'); |
||||||
|
background-color: _palette(border-bg); |
||||||
|
border-color: _palette(accent, bg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
select { |
||||||
|
background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>"); |
||||||
|
background-size: 1.25rem; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: calc(100% - 1rem) center; |
||||||
|
height: _size(element-height); |
||||||
|
padding-right: _size(element-height); |
||||||
|
text-overflow: ellipsis; |
||||||
|
|
||||||
|
option { |
||||||
|
color: _palette(fg-bold); |
||||||
|
background: _palette(bg); |
||||||
|
} |
||||||
|
|
||||||
|
&:focus { |
||||||
|
&::-ms-value { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&::-ms-expand { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input[type="text"], |
||||||
|
input[type="password"], |
||||||
|
input[type="email"], |
||||||
|
select { |
||||||
|
height: _size(element-height); |
||||||
|
} |
||||||
|
|
||||||
|
textarea { |
||||||
|
padding: 0.75em 1em; |
||||||
|
} |
||||||
|
|
||||||
|
input[type="checkbox"], |
||||||
|
input[type="radio"], { |
||||||
|
@include vendor('appearance', 'none'); |
||||||
|
display: block; |
||||||
|
float: left; |
||||||
|
margin-right: -2em; |
||||||
|
opacity: 0; |
||||||
|
width: 1em; |
||||||
|
z-index: -1; |
||||||
|
|
||||||
|
& + label { |
||||||
|
@include icon(false, solid); |
||||||
|
color: _palette(fg); |
||||||
|
cursor: pointer; |
||||||
|
display: inline-block; |
||||||
|
font-size: 1em; |
||||||
|
font-weight: _font(weight); |
||||||
|
padding-left: (_size(element-height) * 0.6) + 0.75em; |
||||||
|
padding-right: 0.75em; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&:before { |
||||||
|
background: _palette(border-bg); |
||||||
|
border-radius: _size(border-radius); |
||||||
|
border: solid _size(border-width) _palette(border); |
||||||
|
content: ''; |
||||||
|
display: inline-block; |
||||||
|
font-size: 0.8em; |
||||||
|
height: (_size(element-height) * 0.6); |
||||||
|
left: 0; |
||||||
|
line-height: (_size(element-height) * 0.6); |
||||||
|
position: absolute; |
||||||
|
text-align: center; |
||||||
|
top: 0; |
||||||
|
width: (_size(element-height) * 0.6); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:checked + label { |
||||||
|
&:before { |
||||||
|
background: _palette(accent, bg); |
||||||
|
border-color: _palette(accent, bg); |
||||||
|
color: _palette(accent, fg-bold); |
||||||
|
content: '\f00c'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:focus + label { |
||||||
|
&:before { |
||||||
|
border-color: _palette(accent, bg); |
||||||
|
box-shadow: 0 0 0 _size(border-width) _palette(accent, bg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input[type="checkbox"] { |
||||||
|
& + label { |
||||||
|
&:before { |
||||||
|
border-radius: _size(border-radius); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input[type="radio"] { |
||||||
|
& + label { |
||||||
|
&:before { |
||||||
|
border-radius: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
::-webkit-input-placeholder { |
||||||
|
color: _palette(fg-light) !important; |
||||||
|
opacity: 1.0; |
||||||
|
} |
||||||
|
|
||||||
|
:-moz-placeholder { |
||||||
|
color: _palette(fg-light) !important; |
||||||
|
opacity: 1.0; |
||||||
|
} |
||||||
|
|
||||||
|
::-moz-placeholder { |
||||||
|
color: _palette(fg-light) !important; |
||||||
|
opacity: 1.0; |
||||||
|
} |
||||||
|
|
||||||
|
:-ms-input-placeholder { |
||||||
|
color: _palette(fg-light) !important; |
||||||
|
opacity: 1.0; |
||||||
|
} |
||||||
|
|
||||||
|
.formerize-placeholder { |
||||||
|
color: _palette(fg-light) !important; |
||||||
|
opacity: 1.0; |
||||||
|
} |
@ -0,0 +1,33 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
/* Icon */ |
||||||
|
|
||||||
|
.icon { |
||||||
|
@include icon; |
||||||
|
border-bottom: none; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
> .label { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
&:before { |
||||||
|
line-height: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
&.solid { |
||||||
|
&:before { |
||||||
|
font-weight: 900; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.brands { |
||||||
|
&:before { |
||||||
|
font-family: 'Font Awesome 5 Brands'; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,32 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
/* Icons */ |
||||||
|
|
||||||
|
ul.icons { |
||||||
|
cursor: default; |
||||||
|
list-style: none; |
||||||
|
padding-left: 0; |
||||||
|
|
||||||
|
li { |
||||||
|
display: inline-block; |
||||||
|
padding: 0 1em 0 0; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
padding-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.icon { |
||||||
|
&:before { |
||||||
|
font-size: 1.25em; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,27 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
/* List */ |
||||||
|
|
||||||
|
ol { |
||||||
|
list-style: decimal; |
||||||
|
margin: 0 0 _size(element-margin) 0; |
||||||
|
padding-left: 1.25em; |
||||||
|
|
||||||
|
li { |
||||||
|
padding-left: 0.25em; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ul { |
||||||
|
list-style: disc; |
||||||
|
margin: 0 0 _size(element-margin) 0; |
||||||
|
padding-left: 1em; |
||||||
|
|
||||||
|
li { |
||||||
|
padding-left: 0.5em; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,59 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
/* Section/Article */ |
||||||
|
|
||||||
|
section, article { |
||||||
|
&.special { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
header { |
||||||
|
p { |
||||||
|
color: _palette(fg-light); |
||||||
|
position: relative; |
||||||
|
margin: 0 0 (_size(element-margin) * 0.75) 0; |
||||||
|
} |
||||||
|
|
||||||
|
h2 + p { |
||||||
|
font-size: 1.25em; |
||||||
|
margin-top: (_size(element-margin) * -0.5); |
||||||
|
line-height: 1.5em; |
||||||
|
} |
||||||
|
|
||||||
|
h3 + p { |
||||||
|
font-size: 1.1em; |
||||||
|
margin-top: (_size(element-margin) * -0.4); |
||||||
|
line-height: 1.5em; |
||||||
|
} |
||||||
|
|
||||||
|
h4 + p, |
||||||
|
h5 + p, |
||||||
|
h6 + p { |
||||||
|
font-size: 0.9em; |
||||||
|
margin-top: (_size(element-margin) * -0.3); |
||||||
|
line-height: 1.5em; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=medium') { |
||||||
|
br { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=small') { |
||||||
|
br { |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=xsmall') { |
||||||
|
br { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,74 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
/* Footer */ |
||||||
|
|
||||||
|
#footer { |
||||||
|
@include vendor('transition', 'opacity 0.5s ease-in-out'); |
||||||
|
bottom: 4em; |
||||||
|
color: _palette(fg-light); |
||||||
|
left: 4em; |
||||||
|
opacity: 0.5; |
||||||
|
position: absolute; |
||||||
|
|
||||||
|
.icons { |
||||||
|
margin: 0 0 (_size(element-margin) * 0.25) 0; |
||||||
|
} |
||||||
|
|
||||||
|
.copyright { |
||||||
|
font-size: 0.8em; |
||||||
|
list-style: none; |
||||||
|
padding: 0; |
||||||
|
|
||||||
|
li { |
||||||
|
border-left: solid 1px _palette(border2); |
||||||
|
display: inline-block; |
||||||
|
line-height: 1em; |
||||||
|
margin: 0 0 0 0.75em; |
||||||
|
padding: 0 0 0 0.75em; |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-left: 0; |
||||||
|
margin-left: 0; |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
> :last-child { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=xlarge') { |
||||||
|
bottom: 3.5em; |
||||||
|
left: 3.5em; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=small') { |
||||||
|
bottom: 2em; |
||||||
|
left: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=xxsmall') { |
||||||
|
bottom: 1.25em; |
||||||
|
left: 1.25em; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('short') { |
||||||
|
bottom: auto; |
||||||
|
left: auto; |
||||||
|
margin: (_size(element-margin) * 0.5) 0 0 0; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,37 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
/* Header */ |
||||||
|
|
||||||
|
#header { |
||||||
|
h1 { |
||||||
|
font-size: 3.25em; |
||||||
|
margin: 0 0 (_size(element-margin) * 0.275) 0; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
font-size: 1.35em; |
||||||
|
line-height: 1.65em; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=small') { |
||||||
|
h1 { |
||||||
|
font-size: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
font-size: 1em; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=xsmall') { |
||||||
|
margin: 0 0 (_size(element-margin) * 0.5) 0; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,50 @@ |
|||||||
|
/// |
||||||
|
/// Eventually by HTML5 UP |
||||||
|
/// html5up.net | @ajlkn |
||||||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
/// |
||||||
|
|
||||||
|
/* Signup Form */ |
||||||
|
|
||||||
|
#signup-form { |
||||||
|
@include vendor('display', 'flex'); |
||||||
|
position: relative; |
||||||
|
|
||||||
|
input[type="text"], |
||||||
|
input[type="password"], |
||||||
|
input[type="email"] { |
||||||
|
width: 18em; |
||||||
|
} |
||||||
|
|
||||||
|
> * { |
||||||
|
margin: 0 0 0 1em; |
||||||
|
} |
||||||
|
|
||||||
|
> :first-child { |
||||||
|
margin: 0 0 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
@include breakpoint('<=xsmall') { |
||||||
|
@include vendor('flex-direction', 'column'); |
||||||
|
|
||||||
|
input[type="type"], |
||||||
|
input[type="password"], |
||||||
|
input[type="email"] { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
> * { |
||||||
|
margin: 1.25em 0 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
.message { |
||||||
|
bottom: -1.5em; |
||||||
|
font-size: 0.9em; |
||||||
|
height: 1em; |
||||||
|
left: 0; |
||||||
|
line-height: inherit; |
||||||
|
margin-top: 0; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,223 @@ |
|||||||
|
// breakpoints.scss v1.0 | @ajlkn | MIT licensed */ |
||||||
|
|
||||||
|
// Vars. |
||||||
|
|
||||||
|
/// Breakpoints. |
||||||
|
/// @var {list} |
||||||
|
$breakpoints: () !global; |
||||||
|
|
||||||
|
// Mixins. |
||||||
|
|
||||||
|
/// Sets breakpoints. |
||||||
|
/// @param {map} $x Breakpoints. |
||||||
|
@mixin breakpoints($x: ()) { |
||||||
|
$breakpoints: $x !global; |
||||||
|
} |
||||||
|
|
||||||
|
/// Wraps @content in a @media block targeting a specific orientation. |
||||||
|
/// @param {string} $orientation Orientation. |
||||||
|
@mixin orientation($orientation) { |
||||||
|
@media screen and (orientation: #{$orientation}) { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/// Wraps @content in a @media block using a given query. |
||||||
|
/// @param {string} $query Query. |
||||||
|
@mixin breakpoint($query: null) { |
||||||
|
|
||||||
|
$breakpoint: null; |
||||||
|
$op: null; |
||||||
|
$media: null; |
||||||
|
|
||||||
|
// Determine operator, breakpoint. |
||||||
|
|
||||||
|
// Greater than or equal. |
||||||
|
@if (str-slice($query, 0, 2) == '>=') { |
||||||
|
|
||||||
|
$op: 'gte'; |
||||||
|
$breakpoint: str-slice($query, 3); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// Less than or equal. |
||||||
|
@elseif (str-slice($query, 0, 2) == '<=') { |
||||||
|
|
||||||
|
$op: 'lte'; |
||||||
|
$breakpoint: str-slice($query, 3); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// Greater than. |
||||||
|
@elseif (str-slice($query, 0, 1) == '>') { |
||||||
|
|
||||||
|
$op: 'gt'; |
||||||
|
$breakpoint: str-slice($query, 2); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// Less than. |
||||||
|
@elseif (str-slice($query, 0, 1) == '<') { |
||||||
|
|
||||||
|
$op: 'lt'; |
||||||
|
$breakpoint: str-slice($query, 2); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// Not. |
||||||
|
@elseif (str-slice($query, 0, 1) == '!') { |
||||||
|
|
||||||
|
$op: 'not'; |
||||||
|
$breakpoint: str-slice($query, 2); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// Equal. |
||||||
|
@else { |
||||||
|
|
||||||
|
$op: 'eq'; |
||||||
|
$breakpoint: $query; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// Build media. |
||||||
|
@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) { |
||||||
|
|
||||||
|
$a: map-get($breakpoints, $breakpoint); |
||||||
|
|
||||||
|
// Range. |
||||||
|
@if (type-of($a) == 'list') { |
||||||
|
|
||||||
|
$x: nth($a, 1); |
||||||
|
$y: nth($a, 2); |
||||||
|
|
||||||
|
// Max only. |
||||||
|
@if ($x == null) { |
||||||
|
|
||||||
|
// Greater than or equal (>= 0 / anything) |
||||||
|
@if ($op == 'gte') { |
||||||
|
$media: 'screen'; |
||||||
|
} |
||||||
|
|
||||||
|
// Less than or equal (<= y) |
||||||
|
@elseif ($op == 'lte') { |
||||||
|
$media: 'screen and (max-width: ' + $y + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
// Greater than (> y) |
||||||
|
@elseif ($op == 'gt') { |
||||||
|
$media: 'screen and (min-width: ' + ($y + 1) + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
// Less than (< 0 / invalid) |
||||||
|
@elseif ($op == 'lt') { |
||||||
|
$media: 'screen and (max-width: -1px)'; |
||||||
|
} |
||||||
|
|
||||||
|
// Not (> y) |
||||||
|
@elseif ($op == 'not') { |
||||||
|
$media: 'screen and (min-width: ' + ($y + 1) + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
// Equal (<= y) |
||||||
|
@else { |
||||||
|
$media: 'screen and (max-width: ' + $y + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// Min only. |
||||||
|
@else if ($y == null) { |
||||||
|
|
||||||
|
// Greater than or equal (>= x) |
||||||
|
@if ($op == 'gte') { |
||||||
|
$media: 'screen and (min-width: ' + $x + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
// Less than or equal (<= inf / anything) |
||||||
|
@elseif ($op == 'lte') { |
||||||
|
$media: 'screen'; |
||||||
|
} |
||||||
|
|
||||||
|
// Greater than (> inf / invalid) |
||||||
|
@elseif ($op == 'gt') { |
||||||
|
$media: 'screen and (max-width: -1px)'; |
||||||
|
} |
||||||
|
|
||||||
|
// Less than (< x) |
||||||
|
@elseif ($op == 'lt') { |
||||||
|
$media: 'screen and (max-width: ' + ($x - 1) + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
// Not (< x) |
||||||
|
@elseif ($op == 'not') { |
||||||
|
$media: 'screen and (max-width: ' + ($x - 1) + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
// Equal (>= x) |
||||||
|
@else { |
||||||
|
$media: 'screen and (min-width: ' + $x + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// Min and max. |
||||||
|
@else { |
||||||
|
|
||||||
|
// Greater than or equal (>= x) |
||||||
|
@if ($op == 'gte') { |
||||||
|
$media: 'screen and (min-width: ' + $x + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
// Less than or equal (<= y) |
||||||
|
@elseif ($op == 'lte') { |
||||||
|
$media: 'screen and (max-width: ' + $y + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
// Greater than (> y) |
||||||
|
@elseif ($op == 'gt') { |
||||||
|
$media: 'screen and (min-width: ' + ($y + 1) + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
// Less than (< x) |
||||||
|
@elseif ($op == 'lt') { |
||||||
|
$media: 'screen and (max-width: ' + ($x - 1) + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
// Not (< x and > y) |
||||||
|
@elseif ($op == 'not') { |
||||||
|
$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
// Equal (>= x and <= y) |
||||||
|
@else { |
||||||
|
$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')'; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// String. |
||||||
|
@else { |
||||||
|
|
||||||
|
// Missing a media type? Prefix with "screen". |
||||||
|
@if (str-slice($a, 0, 1) == '(') { |
||||||
|
$media: 'screen and ' + $a; |
||||||
|
} |
||||||
|
|
||||||
|
// Otherwise, use as-is. |
||||||
|
@else { |
||||||
|
$media: $a; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// Output. |
||||||
|
@media #{$media} { |
||||||
|
@content; |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,90 @@ |
|||||||
|
/// Removes a specific item from a list. |
||||||
|
/// @author Hugo Giraudel |
||||||
|
/// @param {list} $list List. |
||||||
|
/// @param {integer} $index Index. |
||||||
|
/// @return {list} Updated list. |
||||||
|
@function remove-nth($list, $index) { |
||||||
|
|
||||||
|
$result: null; |
||||||
|
|
||||||
|
@if type-of($index) != number { |
||||||
|
@warn "$index: #{quote($index)} is not a number for `remove-nth`."; |
||||||
|
} |
||||||
|
@else if $index == 0 { |
||||||
|
@warn "List index 0 must be a non-zero integer for `remove-nth`."; |
||||||
|
} |
||||||
|
@else if abs($index) > length($list) { |
||||||
|
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; |
||||||
|
} |
||||||
|
@else { |
||||||
|
|
||||||
|
$result: (); |
||||||
|
$index: if($index < 0, length($list) + $index + 1, $index); |
||||||
|
|
||||||
|
@for $i from 1 through length($list) { |
||||||
|
|
||||||
|
@if $i != $index { |
||||||
|
$result: append($result, nth($list, $i)); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
@return $result; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/// Gets a value from a map. |
||||||
|
/// @author Hugo Giraudel |
||||||
|
/// @param {map} $map Map. |
||||||
|
/// @param {string} $keys Key(s). |
||||||
|
/// @return {string} Value. |
||||||
|
@function val($map, $keys...) { |
||||||
|
|
||||||
|
@if nth($keys, 1) == null { |
||||||
|
$keys: remove-nth($keys, 1); |
||||||
|
} |
||||||
|
|
||||||
|
@each $key in $keys { |
||||||
|
$map: map-get($map, $key); |
||||||
|
} |
||||||
|
|
||||||
|
@return $map; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/// Gets a duration value. |
||||||
|
/// @param {string} $keys Key(s). |
||||||
|
/// @return {string} Value. |
||||||
|
@function _duration($keys...) { |
||||||
|
@return val($duration, $keys...); |
||||||
|
} |
||||||
|
|
||||||
|
/// Gets a font value. |
||||||
|
/// @param {string} $keys Key(s). |
||||||
|
/// @return {string} Value. |
||||||
|
@function _font($keys...) { |
||||||
|
@return val($font, $keys...); |
||||||
|
} |
||||||
|
|
||||||
|
/// Gets a misc value. |
||||||
|
/// @param {string} $keys Key(s). |
||||||
|
/// @return {string} Value. |
||||||
|
@function _misc($keys...) { |
||||||
|
@return val($misc, $keys...); |
||||||
|
} |
||||||
|
|
||||||
|
/// Gets a palette value. |
||||||
|
/// @param {string} $keys Key(s). |
||||||
|
/// @return {string} Value. |
||||||
|
@function _palette($keys...) { |
||||||
|
@return val($palette, $keys...); |
||||||
|
} |
||||||
|
|
||||||
|
/// Gets a size value. |
||||||
|
/// @param {string} $keys Key(s). |
||||||
|
/// @return {string} Value. |
||||||
|
@function _size($keys...) { |
||||||
|
@return val($size, $keys...); |
||||||
|
} |
@ -0,0 +1,78 @@ |
|||||||
|
/// Makes an element's :before pseudoelement a FontAwesome icon. |
||||||
|
/// @param {string} $content Optional content value to use. |
||||||
|
/// @param {string} $category Optional category to use. |
||||||
|
/// @param {string} $where Optional pseudoelement to target (before or after). |
||||||
|
@mixin icon($content: false, $category: regular, $where: before) { |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
|
||||||
|
&:#{$where} { |
||||||
|
|
||||||
|
@if $content { |
||||||
|
content: $content; |
||||||
|
} |
||||||
|
|
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
display: inline-block; |
||||||
|
font-style: normal; |
||||||
|
font-variant: normal; |
||||||
|
text-rendering: auto; |
||||||
|
line-height: 1; |
||||||
|
text-transform: none !important; |
||||||
|
|
||||||
|
@if ($category == brands) { |
||||||
|
font-family: 'Font Awesome 5 Brands'; |
||||||
|
} |
||||||
|
@elseif ($category == solid) { |
||||||
|
font-family: 'Font Awesome 5 Free'; |
||||||
|
font-weight: 900; |
||||||
|
} |
||||||
|
@else { |
||||||
|
font-family: 'Font Awesome 5 Free'; |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/// Applies padding to an element, taking the current element-margin value into account. |
||||||
|
/// @param {mixed} $tb Top/bottom padding. |
||||||
|
/// @param {mixed} $lr Left/right padding. |
||||||
|
/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) |
||||||
|
/// @param {bool} $important If true, adds !important. |
||||||
|
@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { |
||||||
|
|
||||||
|
@if $important { |
||||||
|
$important: '!important'; |
||||||
|
} |
||||||
|
|
||||||
|
$x: 0.1em; |
||||||
|
|
||||||
|
@if unit(_size(element-margin)) == 'rem' { |
||||||
|
$x: 0.1rem; |
||||||
|
} |
||||||
|
|
||||||
|
padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). |
||||||
|
/// @param {string} $svg SVG data URL. |
||||||
|
/// @return {string} Encoded SVG data URL. |
||||||
|
@function svg-url($svg) { |
||||||
|
|
||||||
|
$svg: str-replace($svg, '"', '\''); |
||||||
|
$svg: str-replace($svg, '%', '%25'); |
||||||
|
$svg: str-replace($svg, '<', '%3C'); |
||||||
|
$svg: str-replace($svg, '>', '%3E'); |
||||||
|
$svg: str-replace($svg, '&', '%26'); |
||||||
|
$svg: str-replace($svg, '#', '%23'); |
||||||
|
$svg: str-replace($svg, '{', '%7B'); |
||||||
|
$svg: str-replace($svg, '}', '%7D'); |
||||||
|
$svg: str-replace($svg, ';', '%3B'); |
||||||
|
|
||||||
|
@return url("data:image/svg+xml;charset=utf8,#{$svg}"); |
||||||
|
|
||||||
|
} |
@ -0,0 +1,59 @@ |
|||||||
|
// Misc. |
||||||
|
$misc: ( |
||||||
|
); |
||||||
|
|
||||||
|
// Duration. |
||||||
|
$duration: ( |
||||||
|
nav: 0.5s, |
||||||
|
transition: 0.2s, |
||||||
|
bg-fadein: 2s, |
||||||
|
bg-transition: 3s, |
||||||
|
bg-slide: 45s // (lower = faster, higher = slower) |
||||||
|
); |
||||||
|
|
||||||
|
// Size. |
||||||
|
$size: ( |
||||||
|
border-radius: 6px, |
||||||
|
border-width: 2px, |
||||||
|
element-height: 2.75em, |
||||||
|
element-margin: 2em |
||||||
|
); |
||||||
|
|
||||||
|
// Font. |
||||||
|
$font: ( |
||||||
|
family: ('Roboto', sans-serif), |
||||||
|
family-fixed: ('Courier New', monospace), |
||||||
|
weight: 400, |
||||||
|
weight-bold: 700, |
||||||
|
letter-spacing: -0.01em |
||||||
|
); |
||||||
|
|
||||||
|
// Palette. |
||||||
|
$palette: ( |
||||||
|
bg: #000, |
||||||
|
fg: rgba(255,255,255,0.75), |
||||||
|
fg-bold: #fff, |
||||||
|
fg-light: rgba(255,255,255,0.5), |
||||||
|
border: rgba(255,255,255,0.35), |
||||||
|
border-bg: rgba(255,255,255,0.125), |
||||||
|
border2: rgba(255,255,255,0.25), |
||||||
|
|
||||||
|
accent: ( |
||||||
|
bg: #1cb495, |
||||||
|
fg: mix(#1cb495, #ffffff, 25%), |
||||||
|
fg-bold: #ffffff, |
||||||
|
fg-light: mix(#1cb495, #ffffff, 40%), |
||||||
|
border: rgba(255,255,255,0.25), |
||||||
|
border-bg: rgba(255,255,255,0.075), |
||||||
|
), |
||||||
|
|
||||||
|
positive: ( |
||||||
|
bg: #1cb495, |
||||||
|
fg: #ffffff |
||||||
|
), |
||||||
|
|
||||||
|
negative: ( |
||||||
|
bg: #ff2361, |
||||||
|
fg: #ffffff |
||||||
|
) |
||||||
|
); |
@ -0,0 +1,376 @@ |
|||||||
|
// vendor.scss v1.0 | @ajlkn | MIT licensed */ |
||||||
|
|
||||||
|
// Vars. |
||||||
|
|
||||||
|
/// Vendor prefixes. |
||||||
|
/// @var {list} |
||||||
|
$vendor-prefixes: ( |
||||||
|
'-moz-', |
||||||
|
'-webkit-', |
||||||
|
'-ms-', |
||||||
|
'' |
||||||
|
); |
||||||
|
|
||||||
|
/// Properties that should be vendorized. |
||||||
|
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org |
||||||
|
/// @var {list} |
||||||
|
$vendor-properties: ( |
||||||
|
|
||||||
|
// Animation. |
||||||
|
'animation', |
||||||
|
'animation-delay', |
||||||
|
'animation-direction', |
||||||
|
'animation-duration', |
||||||
|
'animation-fill-mode', |
||||||
|
'animation-iteration-count', |
||||||
|
'animation-name', |
||||||
|
'animation-play-state', |
||||||
|
'animation-timing-function', |
||||||
|
|
||||||
|
// Appearance. |
||||||
|
'appearance', |
||||||
|
|
||||||
|
// Backdrop filter. |
||||||
|
'backdrop-filter', |
||||||
|
|
||||||
|
// Background image options. |
||||||
|
'background-clip', |
||||||
|
'background-origin', |
||||||
|
'background-size', |
||||||
|
|
||||||
|
// Box sizing. |
||||||
|
'box-sizing', |
||||||
|
|
||||||
|
// Clip path. |
||||||
|
'clip-path', |
||||||
|
|
||||||
|
// Filter effects. |
||||||
|
'filter', |
||||||
|
|
||||||
|
// Flexbox. |
||||||
|
'align-content', |
||||||
|
'align-items', |
||||||
|
'align-self', |
||||||
|
'flex', |
||||||
|
'flex-basis', |
||||||
|
'flex-direction', |
||||||
|
'flex-flow', |
||||||
|
'flex-grow', |
||||||
|
'flex-shrink', |
||||||
|
'flex-wrap', |
||||||
|
'justify-content', |
||||||
|
'order', |
||||||
|
|
||||||
|
// Font feature. |
||||||
|
'font-feature-settings', |
||||||
|
'font-language-override', |
||||||
|
'font-variant-ligatures', |
||||||
|
|
||||||
|
// Font kerning. |
||||||
|
'font-kerning', |
||||||
|
|
||||||
|
// Fragmented borders and backgrounds. |
||||||
|
'box-decoration-break', |
||||||
|
|
||||||
|
// Grid layout. |
||||||
|
'grid-column', |
||||||
|
'grid-column-align', |
||||||
|
'grid-column-end', |
||||||
|
'grid-column-start', |
||||||
|
'grid-row', |
||||||
|
'grid-row-align', |
||||||
|
'grid-row-end', |
||||||
|
'grid-row-start', |
||||||
|
'grid-template-columns', |
||||||
|
'grid-template-rows', |
||||||
|
|
||||||
|
// Hyphens. |
||||||
|
'hyphens', |
||||||
|
'word-break', |
||||||
|
|
||||||
|
// Masks. |
||||||
|
'mask', |
||||||
|
'mask-border', |
||||||
|
'mask-border-outset', |
||||||
|
'mask-border-repeat', |
||||||
|
'mask-border-slice', |
||||||
|
'mask-border-source', |
||||||
|
'mask-border-width', |
||||||
|
'mask-clip', |
||||||
|
'mask-composite', |
||||||
|
'mask-image', |
||||||
|
'mask-origin', |
||||||
|
'mask-position', |
||||||
|
'mask-repeat', |
||||||
|
'mask-size', |
||||||
|
|
||||||
|
// Multicolumn. |
||||||
|
'break-after', |
||||||
|
'break-before', |
||||||
|
'break-inside', |
||||||
|
'column-count', |
||||||
|
'column-fill', |
||||||
|
'column-gap', |
||||||
|
'column-rule', |
||||||
|
'column-rule-color', |
||||||
|
'column-rule-style', |
||||||
|
'column-rule-width', |
||||||
|
'column-span', |
||||||
|
'column-width', |
||||||
|
'columns', |
||||||
|
|
||||||
|
// Object fit. |
||||||
|
'object-fit', |
||||||
|
'object-position', |
||||||
|
|
||||||
|
// Regions. |
||||||
|
'flow-from', |
||||||
|
'flow-into', |
||||||
|
'region-fragment', |
||||||
|
|
||||||
|
// Scroll snap points. |
||||||
|
'scroll-snap-coordinate', |
||||||
|
'scroll-snap-destination', |
||||||
|
'scroll-snap-points-x', |
||||||
|
'scroll-snap-points-y', |
||||||
|
'scroll-snap-type', |
||||||
|
|
||||||
|
// Shapes. |
||||||
|
'shape-image-threshold', |
||||||
|
'shape-margin', |
||||||
|
'shape-outside', |
||||||
|
|
||||||
|
// Tab size. |
||||||
|
'tab-size', |
||||||
|
|
||||||
|
// Text align last. |
||||||
|
'text-align-last', |
||||||
|
|
||||||
|
// Text decoration. |
||||||
|
'text-decoration-color', |
||||||
|
'text-decoration-line', |
||||||
|
'text-decoration-skip', |
||||||
|
'text-decoration-style', |
||||||
|
|
||||||
|
// Text emphasis. |
||||||
|
'text-emphasis', |
||||||
|
'text-emphasis-color', |
||||||
|
'text-emphasis-position', |
||||||
|
'text-emphasis-style', |
||||||
|
|
||||||
|
// Text size adjust. |
||||||
|
'text-size-adjust', |
||||||
|
|
||||||
|
// Text spacing. |
||||||
|
'text-spacing', |
||||||
|
|
||||||
|
// Transform. |
||||||
|
'transform', |
||||||
|
'transform-origin', |
||||||
|
|
||||||
|
// Transform 3D. |
||||||
|
'backface-visibility', |
||||||
|
'perspective', |
||||||
|
'perspective-origin', |
||||||
|
'transform-style', |
||||||
|
|
||||||
|
// Transition. |
||||||
|
'transition', |
||||||
|
'transition-delay', |
||||||
|
'transition-duration', |
||||||
|
'transition-property', |
||||||
|
'transition-timing-function', |
||||||
|
|
||||||
|
// Unicode bidi. |
||||||
|
'unicode-bidi', |
||||||
|
|
||||||
|
// User select. |
||||||
|
'user-select', |
||||||
|
|
||||||
|
// Writing mode. |
||||||
|
'writing-mode', |
||||||
|
|
||||||
|
); |
||||||
|
|
||||||
|
/// Values that should be vendorized. |
||||||
|
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org |
||||||
|
/// @var {list} |
||||||
|
$vendor-values: ( |
||||||
|
|
||||||
|
// Cross fade. |
||||||
|
'cross-fade', |
||||||
|
|
||||||
|
// Element function. |
||||||
|
'element', |
||||||
|
|
||||||
|
// Filter function. |
||||||
|
'filter', |
||||||
|
|
||||||
|
// Flexbox. |
||||||
|
'flex', |
||||||
|
'inline-flex', |
||||||
|
|
||||||
|
// Grab cursors. |
||||||
|
'grab', |
||||||
|
'grabbing', |
||||||
|
|
||||||
|
// Gradients. |
||||||
|
'linear-gradient', |
||||||
|
'repeating-linear-gradient', |
||||||
|
'radial-gradient', |
||||||
|
'repeating-radial-gradient', |
||||||
|
|
||||||
|
// Grid layout. |
||||||
|
'grid', |
||||||
|
'inline-grid', |
||||||
|
|
||||||
|
// Image set. |
||||||
|
'image-set', |
||||||
|
|
||||||
|
// Intrinsic width. |
||||||
|
'max-content', |
||||||
|
'min-content', |
||||||
|
'fit-content', |
||||||
|
'fill', |
||||||
|
'fill-available', |
||||||
|
'stretch', |
||||||
|
|
||||||
|
// Sticky position. |
||||||
|
'sticky', |
||||||
|
|
||||||
|
// Transform. |
||||||
|
'transform', |
||||||
|
|
||||||
|
// Zoom cursors. |
||||||
|
'zoom-in', |
||||||
|
'zoom-out', |
||||||
|
|
||||||
|
); |
||||||
|
|
||||||
|
// Functions. |
||||||
|
|
||||||
|
/// Removes a specific item from a list. |
||||||
|
/// @author Hugo Giraudel |
||||||
|
/// @param {list} $list List. |
||||||
|
/// @param {integer} $index Index. |
||||||
|
/// @return {list} Updated list. |
||||||
|
@function remove-nth($list, $index) { |
||||||
|
|
||||||
|
$result: null; |
||||||
|
|
||||||
|
@if type-of($index) != number { |
||||||
|
@warn "$index: #{quote($index)} is not a number for `remove-nth`."; |
||||||
|
} |
||||||
|
@else if $index == 0 { |
||||||
|
@warn "List index 0 must be a non-zero integer for `remove-nth`."; |
||||||
|
} |
||||||
|
@else if abs($index) > length($list) { |
||||||
|
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; |
||||||
|
} |
||||||
|
@else { |
||||||
|
|
||||||
|
$result: (); |
||||||
|
$index: if($index < 0, length($list) + $index + 1, $index); |
||||||
|
|
||||||
|
@for $i from 1 through length($list) { |
||||||
|
|
||||||
|
@if $i != $index { |
||||||
|
$result: append($result, nth($list, $i)); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
@return $result; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/// Replaces a substring within another string. |
||||||
|
/// @author Hugo Giraudel |
||||||
|
/// @param {string} $string String. |
||||||
|
/// @param {string} $search Substring. |
||||||
|
/// @param {string} $replace Replacement. |
||||||
|
/// @return {string} Updated string. |
||||||
|
@function str-replace($string, $search, $replace: '') { |
||||||
|
|
||||||
|
$index: str-index($string, $search); |
||||||
|
|
||||||
|
@if $index { |
||||||
|
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); |
||||||
|
} |
||||||
|
|
||||||
|
@return $string; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/// Replaces a substring within each string in a list. |
||||||
|
/// @param {list} $strings List of strings. |
||||||
|
/// @param {string} $search Substring. |
||||||
|
/// @param {string} $replace Replacement. |
||||||
|
/// @return {list} Updated list of strings. |
||||||
|
@function str-replace-all($strings, $search, $replace: '') { |
||||||
|
|
||||||
|
@each $string in $strings { |
||||||
|
$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); |
||||||
|
} |
||||||
|
|
||||||
|
@return $strings; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// Mixins. |
||||||
|
|
||||||
|
/// Wraps @content in vendorized keyframe blocks. |
||||||
|
/// @param {string} $name Name. |
||||||
|
@mixin keyframes($name) { |
||||||
|
|
||||||
|
@-moz-keyframes #{$name} { @content; } |
||||||
|
@-webkit-keyframes #{$name} { @content; } |
||||||
|
@-ms-keyframes #{$name} { @content; } |
||||||
|
@keyframes #{$name} { @content; } |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/// Vendorizes a declaration's property and/or value(s). |
||||||
|
/// @param {string} $property Property. |
||||||
|
/// @param {mixed} $value String/list of value(s). |
||||||
|
@mixin vendor($property, $value) { |
||||||
|
|
||||||
|
// Determine if property should expand. |
||||||
|
$expandProperty: index($vendor-properties, $property); |
||||||
|
|
||||||
|
// Determine if value should expand (and if so, add '-prefix-' placeholder). |
||||||
|
$expandValue: false; |
||||||
|
|
||||||
|
@each $x in $value { |
||||||
|
@each $y in $vendor-values { |
||||||
|
@if $y == str-slice($x, 1, str-length($y)) { |
||||||
|
|
||||||
|
$value: set-nth($value, index($value, $x), '-prefix-' + $x); |
||||||
|
$expandValue: true; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Expand property? |
||||||
|
@if $expandProperty { |
||||||
|
@each $vendor in $vendor-prefixes { |
||||||
|
#{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Expand just the value? |
||||||
|
@elseif $expandValue { |
||||||
|
@each $vendor in $vendor-prefixes { |
||||||
|
#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Neither? Treat them as a normal declaration. |
||||||
|
@else { |
||||||
|
#{$property}: #{$value}; |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,47 @@ |
|||||||
|
@import 'libs/vars'; |
||||||
|
@import 'libs/functions'; |
||||||
|
@import 'libs/mixins'; |
||||||
|
@import 'libs/vendor'; |
||||||
|
@import 'libs/breakpoints'; |
||||||
|
@import 'fontawesome-all.min.css'; |
||||||
|
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); |
||||||
|
|
||||||
|
/* |
||||||
|
Eventually by HTML5 UP |
||||||
|
html5up.net | @ajlkn |
||||||
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
*/ |
||||||
|
|
||||||
|
// Breakpoints. |
||||||
|
|
||||||
|
@include breakpoints(( |
||||||
|
xlarge: ( 1281px, 1680px ), |
||||||
|
large: ( 981px, 1280px ), |
||||||
|
medium: ( 737px, 980px ), |
||||||
|
small: ( 481px, 736px ), |
||||||
|
xsmall: ( 361px, 480px ), |
||||||
|
xxsmall: ( null, 360px ), |
||||||
|
short: '(max-height: 640px)' |
||||||
|
)); |
||||||
|
|
||||||
|
// Base. |
||||||
|
|
||||||
|
@import 'base/reset'; |
||||||
|
@import 'base/page'; |
||||||
|
@import 'base/bg'; |
||||||
|
@import 'base/typography'; |
||||||
|
|
||||||
|
// Components. |
||||||
|
|
||||||
|
@import 'components/section'; |
||||||
|
@import 'components/icon'; |
||||||
|
@import 'components/list'; |
||||||
|
@import 'components/icons'; |
||||||
|
@import 'components/form'; |
||||||
|
@import 'components/button'; |
||||||
|
|
||||||
|
// Layout. |
||||||
|
|
||||||
|
@import 'layout/header'; |
||||||
|
@import 'layout/signup-form'; |
||||||
|
@import 'layout/footer'; |
Binary file not shown.
After Width: | Height: | Size: 674 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 141 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 820 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 186 KiB |
After Width: | Height: | Size: 112 KiB |
After Width: | Height: | Size: 108 KiB |
@ -0,0 +1,93 @@ |
|||||||
|
<!DOCTYPE HTML> |
||||||
|
<!-- |
||||||
|
Eventually by HTML5 UP |
||||||
|
html5up.net | @ajlkn |
||||||
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||||
|
--> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>Ushio Login</title> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> |
||||||
|
<link rel="stylesheet" href="assets/css/main.css" /> |
||||||
|
<script type="text/javascript">block_aplayer = true;</script> |
||||||
|
<script src="https://cdn.yimian.xyz/ushio-js/ushio-head.min.js"></script> |
||||||
|
<script type="text/javascript">page.auth = ['nickname']</script> |
||||||
|
</head> |
||||||
|
<body class="is-preload"> |
||||||
|
|
||||||
|
<!-- Header --> |
||||||
|
<header id="header"> |
||||||
|
<h1 id="nickname">Loading...</h1> |
||||||
|
<p><strong>Uid: </strong><span id="uid"></span></p> |
||||||
|
<p><strong>Email: </strong><span id="email"></span></p> |
||||||
|
<p><strong>Tel: </strong><span id="tel"></span></p> |
||||||
|
<p><strong>Group: </strong><span id="group"></span></p> |
||||||
|
</header> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Signup Form --> |
||||||
|
<form id="signup-form" method="post" action="#"> |
||||||
|
|
||||||
|
<button id="update" style="display: none">Update</button> <button id="logout" style="display: none" onClick="window.location.href='/logout.html'">Logout</button> |
||||||
|
</form> |
||||||
|
|
||||||
|
|
||||||
|
<!-- Footer --> |
||||||
|
<footer id="footer"> |
||||||
|
|
||||||
|
<ul class="copyright"> |
||||||
|
<li>© 2018-<script type="text/javascript">document.write(new Date().getFullYear())</script> <a href="https://iotcat.me">iotcat</a></li><li>Powered by <a href="https://ushio.cool">Ushio</a></li><li>Credits: <a href="http://html5up.net">HTML5 UP</a></li> |
||||||
|
</ul> |
||||||
|
</footer> |
||||||
|
|
||||||
|
<!-- Scripts --> |
||||||
|
<script src="assets/js/main.js"></script> |
||||||
|
<script type="text/javascript" src="https://cdn.yimian.xyz/ushio-js/ushio-footer.min.js"></script> |
||||||
|
<script type="text/javascript"> |
||||||
|
session.onload(function(){ |
||||||
|
$('#nickname').html(session.get('nickname')); |
||||||
|
$('#uid').html(session.get('uid')); |
||||||
|
$('#tel').html(session.get('tel')); |
||||||
|
$('#email').html(session.get('email')); |
||||||
|
$('#group').html(session.get('group')); |
||||||
|
$('#update').show(); |
||||||
|
$('#logout').show(); |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
$("#update").click(function(){ |
||||||
|
tips.question({ |
||||||
|
timeout: 20000, |
||||||
|
close: false, |
||||||
|
overlay: true, |
||||||
|
displayMode: 'once', |
||||||
|
//id: 'question', |
||||||
|
zindex: 999, |
||||||
|
title: 'Update', |
||||||
|
message: '', |
||||||
|
position: 'center', |
||||||
|
buttons: [ |
||||||
|
['<button><b>Nickname</b></button>', function (instance, toast) { |
||||||
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
||||||
|
window.location.href = '/index.html?require=nickname'; |
||||||
|
}, true], |
||||||
|
['<button><b>Tel</b></button>', function (instance, toast) { |
||||||
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
||||||
|
window.location.href = '/index.html?require=tel'; |
||||||
|
}, true], |
||||||
|
['<button><b>Email</b></button>', function (instance, toast) { |
||||||
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
||||||
|
window.location.href = '/index.html?require=email'; |
||||||
|
}, true], |
||||||
|
['<button><b>close</b></button>', function (instance, toast) { |
||||||
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
||||||
|
}, true], |
||||||
|
] |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
Loading…
Reference in new issue