parent
8544b15a1e
commit
4029096075
45 changed files with 75 additions and 11932 deletions
File diff suppressed because one or more lines are too long
@ -1,887 +0,0 @@ |
|||||||
@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; } } |
|
@ -1,171 +0,0 @@ |
|||||||
/* |
|
||||||
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); |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
})(); |
|
||||||
|
|
||||||
})(); |
|
@ -1,67 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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%)'); |
|
||||||
} |
|
||||||
} |
|
@ -1,78 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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; |
|
||||||
} |
|
||||||
} |
|
@ -1,76 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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; |
|
||||||
} |
|
@ -1,160 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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; |
|
||||||
} |
|
||||||
} |
|
@ -1,50 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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; |
|
||||||
} |
|
||||||
} |
|
@ -1,227 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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; |
|
||||||
} |
|
@ -1,33 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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'; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
@ -1,32 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
@ -1,27 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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; |
|
||||||
} |
|
||||||
} |
|
@ -1,59 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
@ -1,74 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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; |
|
||||||
} |
|
||||||
} |
|
@ -1,37 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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; |
|
||||||
} |
|
||||||
} |
|
@ -1,50 +0,0 @@ |
|||||||
/// |
|
||||||
/// 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; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
@ -1,223 +0,0 @@ |
|||||||
// 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; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,90 +0,0 @@ |
|||||||
/// 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...); |
|
||||||
} |
|
@ -1,78 +0,0 @@ |
|||||||
/// 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}"); |
|
||||||
|
|
||||||
} |
|
@ -1,59 +0,0 @@ |
|||||||
// 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 |
|
||||||
) |
|
||||||
); |
|
@ -1,376 +0,0 @@ |
|||||||
// 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}; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,47 +0,0 @@ |
|||||||
@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.
Before Width: | Height: | Size: 674 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 141 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 820 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 186 KiB |
Before Width: | Height: | Size: 112 KiB |
Before Width: | Height: | Size: 108 KiB |
@ -1,93 +0,0 @@ |
|||||||
<!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