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