diff --git a/assets/css/main.css b/assets/css/main.css index b074f78..f0427e6 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -438,339 +438,6 @@ ul.icons { 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; @@ -793,42 +460,6 @@ button, #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; diff --git a/index.html b/index.html index ed41c93..3e366b0 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,6 @@ @@ -31,7 +30,7 @@