mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-01-17 13:48:13 +01:00
🚿 再開発
This commit is contained in:
BcRikko
parent
8c62eee7a6
commit
db0ac66528
746
css/nes.css
746
css/nes.css
@ -1,748 +1,4 @@
|
|||||||
/*!
|
/*!
|
||||||
* NES.css v0.0.1(alpha)
|
* NES.css v0.0.2(alpha)
|
||||||
*/
|
*/
|
||||||
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
|
|
||||||
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
|
|
||||||
html,
|
|
||||||
body,
|
|
||||||
p,
|
|
||||||
ol,
|
|
||||||
ul,
|
|
||||||
li,
|
|
||||||
dl,
|
|
||||||
dt,
|
|
||||||
dd,
|
|
||||||
blockquote,
|
|
||||||
figure,
|
|
||||||
fieldset,
|
|
||||||
legend,
|
|
||||||
textarea,
|
|
||||||
pre,
|
|
||||||
iframe,
|
|
||||||
hr,
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-size: 100%;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
embed,
|
|
||||||
iframe,
|
|
||||||
object,
|
|
||||||
audio,
|
|
||||||
video {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-spacing: 0;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
padding: 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
body,
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
textarea,
|
|
||||||
select,
|
|
||||||
pre,
|
|
||||||
code {
|
|
||||||
font-family: "Press Start 2P";
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #333;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
p:not(:last-child) {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes blink {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
._dark {
|
|
||||||
color: #f7f7f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
._right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-weight: 700;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title:not(:first-child) {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title:not(:last-child) {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title.-is-1 {
|
|
||||||
font-size: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title.-is-2 {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title.-is-3 {
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title.-is-4 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title.-is-5 {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title.-is-6 {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle:not(:last-child) {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle.-is-1 {
|
|
||||||
font-size: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle.-is-2 {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle.-is-3 {
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle.-is-4 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle.-is-5 {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle.-is-6 {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 10px 12px;
|
|
||||||
margin: 3px;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: inset -4px -4px 0 0 #adafbc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover {
|
|
||||||
background-color: #e7e7e7;
|
|
||||||
box-shadow: inset -6px -6px 0 0 #adafbc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:active {
|
|
||||||
box-shadow: inset 4px 4px 0 0 #adafbc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button + .button {
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button::before, .button::after {
|
|
||||||
position: absolute;
|
|
||||||
box-sizing: content-box;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
content: "";
|
|
||||||
border-color: #333;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button::before {
|
|
||||||
top: -3px;
|
|
||||||
left: 0;
|
|
||||||
border-right: 6px;
|
|
||||||
border-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button::after {
|
|
||||||
top: 0;
|
|
||||||
left: -3px;
|
|
||||||
border-top: 6px;
|
|
||||||
border-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-primary {
|
|
||||||
color: #f7f7f7;
|
|
||||||
background-color: #92cc41;
|
|
||||||
box-shadow: inset -4px -4px 0 0 #4aa52e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-primary:hover {
|
|
||||||
background-color: #76c442;
|
|
||||||
box-shadow: inset -6px -6px 0 0 #4aa52e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-primary:active {
|
|
||||||
box-shadow: inset 4px 4px 0 0 #4aa52e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-success {
|
|
||||||
color: #f7f7f7;
|
|
||||||
background-color: #209cee;
|
|
||||||
box-shadow: inset -4px -4px 0 0 #006bb3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-success:hover {
|
|
||||||
background-color: #108de0;
|
|
||||||
box-shadow: inset -6px -6px 0 0 #006bb3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-success:active {
|
|
||||||
box-shadow: inset 4px 4px 0 0 #006bb3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-warning {
|
|
||||||
color: #f7f7f7;
|
|
||||||
background-color: #f7d51d;
|
|
||||||
box-shadow: inset -4px -4px 0 0 #e59400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-warning:hover {
|
|
||||||
background-color: #f2c409;
|
|
||||||
box-shadow: inset -6px -6px 0 0 #e59400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-warning:active {
|
|
||||||
box-shadow: inset 4px 4px 0 0 #e59400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-error {
|
|
||||||
color: #f7f7f7;
|
|
||||||
background-color: #e76e55;
|
|
||||||
box-shadow: inset -4px -4px 0 0 #8c2022;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-error:hover {
|
|
||||||
background-color: #ce372b;
|
|
||||||
box-shadow: inset -6px -6px 0 0 #8c2022;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-error:active {
|
|
||||||
box-shadow: inset 4px 4px 0 0 #8c2022;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-small {
|
|
||||||
font-size: 0.6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-medium {
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.-large {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radios {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radios:not(:last-child) {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radios > label {
|
|
||||||
display: flex;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radios > label:not(:last-child) {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radios > label > .radio[type="radio"] {
|
|
||||||
margin-right: 0.3rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radios > label > .radio[type="radio"]::before {
|
|
||||||
visibility: visible;
|
|
||||||
content: "";
|
|
||||||
animation: blink 1s infinite steps(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.radios > label > .radio[type="radio"]:checked::before {
|
|
||||||
content: "\203A";
|
|
||||||
}
|
|
||||||
|
|
||||||
.radios.-columns {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radios.-columns > label:not(:last-child) {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
padding: 1.5rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container::before, .container::after {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container::before {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: -2;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container::after {
|
|
||||||
top: 2px;
|
|
||||||
right: 2px;
|
|
||||||
bottom: 2px;
|
|
||||||
left: 2px;
|
|
||||||
z-index: -1;
|
|
||||||
border: 4px solid;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container:not(:last-child) {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container.-with-title {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
padding-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container.-with-title.-center {
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container.-with-title.-right {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container.-with-title > .title {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container._dark {
|
|
||||||
color: #f7f7f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container._dark::before {
|
|
||||||
background-color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container._dark::after {
|
|
||||||
border-color: #f7f7f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container._dark > .title {
|
|
||||||
color: #f7f7f7;
|
|
||||||
background-color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox[type="checkbox"] {
|
|
||||||
position: relative;
|
|
||||||
margin-right: 1rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox[type="checkbox"]::before {
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
left: -6px;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
visibility: visible;
|
|
||||||
content: "";
|
|
||||||
background-color: transparent;
|
|
||||||
box-shadow: 6px 6px 0 #333, 8px 6px 0 #333, 10px 6px 0 #333, 12px 6px 0 #333, 14px 6px 0 #333, 16px 6px 0 #333, 18px 6px 0 #333, 20px 6px 0 #333, 6px 8px 0 #333, 20px 8px 0 #333, 6px 10px 0 #333, 20px 10px 0 #333, 6px 12px 0 #333, 20px 12px 0 #333, 6px 14px 0 #333, 20px 14px 0 #333, 6px 16px 0 #333, 20px 16px 0 #333, 6px 18px 0 #333, 20px 18px 0 #333, 6px 20px 0 #333, 8px 20px 0 #333, 10px 20px 0 #333, 12px 20px 0 #333, 14px 20px 0 #333, 16px 20px 0 #333, 18px 20px 0 #333, 20px 20px 0 #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox[type="checkbox"]:checked::before {
|
|
||||||
box-shadow: 6px 6px 0 #333, 8px 6px 0 #333, 10px 6px 0 #333, 12px 6px 0 #333, 14px 6px 0 #333, 16px 6px 0 #333, 18px 6px 0 #333, 22px 6px 0 #333, 24px 6px 0 #333, 6px 8px 0 #333, 20px 8px 0 #333, 22px 8px 0 #333, 24px 8px 0 #333, 6px 10px 0 #333, 18px 10px 0 #333, 20px 10px 0 #333, 6px 12px 0 #333, 8px 12px 0 #333, 16px 12px 0 #333, 18px 12px 0 #333, 6px 14px 0 #333, 8px 14px 0 #333, 10px 14px 0 #333, 14px 14px 0 #333, 16px 14px 0 #333, 20px 14px 0 #333, 6px 16px 0 #333, 10px 16px 0 #333, 12px 16px 0 #333, 14px 16px 0 #333, 20px 16px 0 #333, 6px 18px 0 #333, 12px 18px 0 #333, 20px 18px 0 #333, 6px 20px 0 #333, 8px 20px 0 #333, 10px 20px 0 #333, 12px 20px 0 #333, 14px 20px 0 #333, 16px 20px 0 #333, 18px 20px 0 #333, 20px 20px 0 #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
dl.description {
|
|
||||||
display: grid;
|
|
||||||
grid-template: auto / 15rem 1fr;
|
|
||||||
grid-gap: 0.8rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
dl.description:not(:last-child) {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
dl.description > dt {
|
|
||||||
position: relative;
|
|
||||||
grid-column: 1;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
dl.description > dt.-colon::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: -1.5rem;
|
|
||||||
z-index: -1;
|
|
||||||
content: ":";
|
|
||||||
}
|
|
||||||
|
|
||||||
dl.description > dd {
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.balloon {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1rem;
|
|
||||||
margin-bottom: 26px;
|
|
||||||
box-shadow: 0 -4px #f7f7f7, 0 -8px #333, 4px 0 #f7f7f7, 4px -4px #333, 8px 0 #333, 0 4px #f7f7f7, 0 8px #333, -4px 0 #f7f7f7, -4px 4px #333, -8px 0 #333, -4px -4px #333, 4px 4px #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.balloon::before, .balloon::after {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
.balloon.-right::before, .balloon.-right::after {
|
|
||||||
right: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.balloon.-right::before {
|
|
||||||
bottom: -14px;
|
|
||||||
width: 26px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
border-right: 4px solid #333;
|
|
||||||
border-left: 4px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.balloon.-right::after {
|
|
||||||
bottom: -18px;
|
|
||||||
width: 18px;
|
|
||||||
height: 3px;
|
|
||||||
margin-left: 8px;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
box-shadow: -4px 0 #333, 4px 0 #333, 4px 4px #f7f7f7, 0 4px #333, 8px 4px #333, 4px 8px #333, 8px 8px #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.balloon.-left::before, .balloon.-left::after {
|
|
||||||
left: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.balloon.-left::before {
|
|
||||||
bottom: -14px;
|
|
||||||
width: 26px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
border-right: 4px solid #333;
|
|
||||||
border-left: 4px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.balloon.-left::after {
|
|
||||||
bottom: -18px;
|
|
||||||
width: 18px;
|
|
||||||
height: 3px;
|
|
||||||
margin-right: 8px;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
box-shadow: -4px 0 #333, 4px 0 #333, -4px 4px #f7f7f7, 0 4px #333, -8px 4px #333, -4px 8px #333, -8px 8px #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field .label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field .input {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem 1rem 0.5rem;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
border: 4px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field .input::placeholder {
|
|
||||||
font-weight: lighter;
|
|
||||||
color: rgba(51, 51, 51, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.field .input.-success {
|
|
||||||
border-color: #209cee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field .input.-warning {
|
|
||||||
color: #e59400;
|
|
||||||
border-color: #f7d51d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field .input.-error {
|
|
||||||
color: #e76e55;
|
|
||||||
border-color: #e76e55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field.-inline {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field.-inline .label {
|
|
||||||
width: 20rem;
|
|
||||||
margin: 0;
|
|
||||||
margin-right: 1rem;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group.-center {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group.-right {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon::before {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon::before {
|
|
||||||
top: -2px;
|
|
||||||
left: -2px;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-twitter::before {
|
|
||||||
box-shadow: 4px 2px 0 #1c9ceb,6px 2px 0 #1c9ceb,8px 2px 0 #1c9ceb,10px 2px 0 #1c9ceb,12px 2px 0 #1c9ceb,14px 2px 0 #1c9ceb,16px 2px 0 #1c9ceb,18px 2px 0 #1c9ceb,20px 2px 0 #1c9ceb,22px 2px 0 #1c9ceb,24px 2px 0 #1c9ceb,26px 2px 0 #1c9ceb,28px 2px 0 #1c9ceb,30px 2px 0 #1c9ceb,2px 4px 0 #1c9ceb,4px 4px 0 #1c9ceb,6px 4px 0 #1c9ceb,8px 4px 0 #1c9ceb,10px 4px 0 #1c9ceb,12px 4px 0 #1c9ceb,14px 4px 0 #1c9ceb,16px 4px 0 #1c9ceb,18px 4px 0 #1c9ceb,20px 4px 0 #1c9ceb,22px 4px 0 #1c9ceb,24px 4px 0 #1c9ceb,26px 4px 0 #1c9ceb,28px 4px 0 #1c9ceb,30px 4px 0 #1c9ceb,32px 4px 0 #1c9ceb,2px 6px 0 #1c9ceb,6px 6px 0 #1c9ceb,8px 6px 0 #1c9ceb,10px 6px 0 #1c9ceb,12px 6px 0 #1c9ceb,14px 6px 0 #1c9ceb,16px 6px 0 #1c9ceb,18px 6px 0 #1c9ceb,26px 6px 0 #1c9ceb,28px 6px 0 #1c9ceb,30px 6px 0 #1c9ceb,32px 6px 0 #1c9ceb,2px 8px 0 #1c9ceb,10px 8px 0 #1c9ceb,12px 8px 0 #1c9ceb,14px 8px 0 #1c9ceb,16px 8px 0 #1c9ceb,28px 8px 0 #1c9ceb,30px 8px 0 #1c9ceb,32px 8px 0 #1c9ceb,2px 10px 0 #1c9ceb,14px 10px 0 #1c9ceb,32px 10px 0 #1c9ceb,2px 12px 0 #1c9ceb,4px 12px 0 #1c9ceb,30px 12px 0 #1c9ceb,32px 12px 0 #1c9ceb,2px 14px 0 #1c9ceb,4px 14px 0 #1c9ceb,30px 14px 0 #1c9ceb,32px 14px 0 #1c9ceb,2px 16px 0 #1c9ceb,4px 16px 0 #1c9ceb,6px 16px 0 #1c9ceb,28px 16px 0 #1c9ceb,30px 16px 0 #1c9ceb,32px 16px 0 #1c9ceb,2px 18px 0 #1c9ceb,4px 18px 0 #1c9ceb,6px 18px 0 #1c9ceb,26px 18px 0 #1c9ceb,28px 18px 0 #1c9ceb,30px 18px 0 #1c9ceb,32px 18px 0 #1c9ceb,2px 20px 0 #1c9ceb,4px 20px 0 #1c9ceb,6px 20px 0 #1c9ceb,8px 20px 0 #1c9ceb,26px 20px 0 #1c9ceb,28px 20px 0 #1c9ceb,30px 20px 0 #1c9ceb,32px 20px 0 #1c9ceb,2px 22px 0 #1c9ceb,4px 22px 0 #1c9ceb,6px 22px 0 #1c9ceb,8px 22px 0 #1c9ceb,10px 22px 0 #1c9ceb,26px 22px 0 #1c9ceb,28px 22px 0 #1c9ceb,30px 22px 0 #1c9ceb,32px 22px 0 #1c9ceb,2px 24px 0 #1c9ceb,4px 24px 0 #1c9ceb,6px 24px 0 #1c9ceb,8px 24px 0 #1c9ceb,24px 24px 0 #1c9ceb,26px 24px 0 #1c9ceb,28px 24px 0 #1c9ceb,30px 24px 0 #1c9ceb,32px 24px 0 #1c9ceb,2px 26px 0 #1c9ceb,4px 26px 0 #1c9ceb,20px 26px 0 #1c9ceb,22px 26px 0 #1c9ceb,24px 26px 0 #1c9ceb,26px 26px 0 #1c9ceb,28px 26px 0 #1c9ceb,30px 26px 0 #1c9ceb,32px 26px 0 #1c9ceb,2px 28px 0 #1c9ceb,4px 28px 0 #1c9ceb,6px 28px 0 #1c9ceb,14px 28px 0 #1c9ceb,16px 28px 0 #1c9ceb,18px 28px 0 #1c9ceb,20px 28px 0 #1c9ceb,22px 28px 0 #1c9ceb,24px 28px 0 #1c9ceb,26px 28px 0 #1c9ceb,28px 28px 0 #1c9ceb,30px 28px 0 #1c9ceb,32px 28px 0 #1c9ceb,2px 30px 0 #1c9ceb,4px 30px 0 #1c9ceb,6px 30px 0 #1c9ceb,8px 30px 0 #1c9ceb,10px 30px 0 #1c9ceb,12px 30px 0 #1c9ceb,14px 30px 0 #1c9ceb,16px 30px 0 #1c9ceb,18px 30px 0 #1c9ceb,20px 30px 0 #1c9ceb,22px 30px 0 #1c9ceb,24px 30px 0 #1c9ceb,26px 30px 0 #1c9ceb,28px 30px 0 #1c9ceb,30px 30px 0 #1c9ceb,32px 30px 0 #1c9ceb,4px 32px 0 #1c9ceb,6px 32px 0 #1c9ceb,8px 32px 0 #1c9ceb,10px 32px 0 #1c9ceb,12px 32px 0 #1c9ceb,14px 32px 0 #1c9ceb,16px 32px 0 #1c9ceb,18px 32px 0 #1c9ceb,20px 32px 0 #1c9ceb,22px 32px 0 #1c9ceb,24px 32px 0 #1c9ceb,26px 32px 0 #1c9ceb,28px 32px 0 #1c9ceb,30px 32px 0 #1c9ceb;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-facebook::before {
|
|
||||||
box-shadow: 4px 2px 0 #4566ae,6px 2px 0 #4566ae,8px 2px 0 #4566ae,10px 2px 0 #4566ae,12px 2px 0 #4566ae,14px 2px 0 #4566ae,16px 2px 0 #4566ae,18px 2px 0 #4566ae,20px 2px 0 #4566ae,22px 2px 0 #4566ae,24px 2px 0 #4566ae,26px 2px 0 #4566ae,28px 2px 0 #4566ae,30px 2px 0 #4566ae,2px 4px 0 #4566ae,4px 4px 0 #4566ae,6px 4px 0 #4566ae,8px 4px 0 #4566ae,10px 4px 0 #4566ae,12px 4px 0 #4566ae,14px 4px 0 #4566ae,16px 4px 0 #4566ae,18px 4px 0 #4566ae,20px 4px 0 #4566ae,30px 4px 0 #4566ae,32px 4px 0 #4566ae,2px 6px 0 #4566ae,4px 6px 0 #4566ae,6px 6px 0 #4566ae,8px 6px 0 #4566ae,10px 6px 0 #4566ae,12px 6px 0 #4566ae,14px 6px 0 #4566ae,16px 6px 0 #4566ae,18px 6px 0 #4566ae,30px 6px 0 #4566ae,32px 6px 0 #4566ae,2px 8px 0 #4566ae,4px 8px 0 #4566ae,6px 8px 0 #4566ae,8px 8px 0 #4566ae,10px 8px 0 #4566ae,12px 8px 0 #4566ae,14px 8px 0 #4566ae,16px 8px 0 #4566ae,30px 8px 0 #4566ae,32px 8px 0 #4566ae,2px 10px 0 #4566ae,4px 10px 0 #4566ae,6px 10px 0 #4566ae,8px 10px 0 #4566ae,10px 10px 0 #4566ae,12px 10px 0 #4566ae,14px 10px 0 #4566ae,16px 10px 0 #4566ae,24px 10px 0 #4566ae,26px 10px 0 #4566ae,28px 10px 0 #4566ae,30px 10px 0 #4566ae,32px 10px 0 #4566ae,2px 12px 0 #4566ae,4px 12px 0 #4566ae,6px 12px 0 #4566ae,8px 12px 0 #4566ae,10px 12px 0 #4566ae,12px 12px 0 #4566ae,14px 12px 0 #4566ae,16px 12px 0 #4566ae,24px 12px 0 #4566ae,26px 12px 0 #4566ae,28px 12px 0 #4566ae,30px 12px 0 #4566ae,32px 12px 0 #4566ae,2px 14px 0 #4566ae,4px 14px 0 #4566ae,6px 14px 0 #4566ae,8px 14px 0 #4566ae,10px 14px 0 #4566ae,12px 14px 0 #4566ae,14px 14px 0 #4566ae,16px 14px 0 #4566ae,24px 14px 0 #4566ae,26px 14px 0 #4566ae,28px 14px 0 #4566ae,30px 14px 0 #4566ae,32px 14px 0 #4566ae,2px 16px 0 #4566ae,4px 16px 0 #4566ae,6px 16px 0 #4566ae,8px 16px 0 #4566ae,10px 16px 0 #4566ae,30px 16px 0 #4566ae,32px 16px 0 #4566ae,2px 18px 0 #4566ae,4px 18px 0 #4566ae,6px 18px 0 #4566ae,8px 18px 0 #4566ae,10px 18px 0 #4566ae,30px 18px 0 #4566ae,32px 18px 0 #4566ae,2px 20px 0 #4566ae,4px 20px 0 #4566ae,6px 20px 0 #4566ae,8px 20px 0 #4566ae,10px 20px 0 #4566ae,30px 20px 0 #4566ae,32px 20px 0 #4566ae,2px 22px 0 #4566ae,4px 22px 0 #4566ae,6px 22px 0 #4566ae,8px 22px 0 #4566ae,10px 22px 0 #4566ae,12px 22px 0 #4566ae,14px 22px 0 #4566ae,16px 22px 0 #4566ae,24px 22px 0 #4566ae,26px 22px 0 #4566ae,28px 22px 0 #4566ae,30px 22px 0 #4566ae,32px 22px 0 #4566ae,2px 24px 0 #4566ae,4px 24px 0 #4566ae,6px 24px 0 #4566ae,8px 24px 0 #4566ae,10px 24px 0 #4566ae,12px 24px 0 #4566ae,14px 24px 0 #4566ae,16px 24px 0 #4566ae,24px 24px 0 #4566ae,26px 24px 0 #4566ae,28px 24px 0 #4566ae,30px 24px 0 #4566ae,32px 24px 0 #4566ae,2px 26px 0 #4566ae,4px 26px 0 #4566ae,6px 26px 0 #4566ae,8px 26px 0 #4566ae,10px 26px 0 #4566ae,12px 26px 0 #4566ae,14px 26px 0 #4566ae,16px 26px 0 #4566ae,24px 26px 0 #4566ae,26px 26px 0 #4566ae,28px 26px 0 #4566ae,30px 26px 0 #4566ae,32px 26px 0 #4566ae,2px 28px 0 #4566ae,4px 28px 0 #4566ae,6px 28px 0 #4566ae,8px 28px 0 #4566ae,10px 28px 0 #4566ae,12px 28px 0 #4566ae,14px 28px 0 #4566ae,16px 28px 0 #4566ae,24px 28px 0 #4566ae,26px 28px 0 #4566ae,28px 28px 0 #4566ae,30px 28px 0 #4566ae,32px 28px 0 #4566ae,2px 30px 0 #4566ae,4px 30px 0 #4566ae,6px 30px 0 #4566ae,8px 30px 0 #4566ae,10px 30px 0 #4566ae,12px 30px 0 #4566ae,14px 30px 0 #4566ae,16px 30px 0 #4566ae,24px 30px 0 #4566ae,26px 30px 0 #4566ae,28px 30px 0 #4566ae,30px 30px 0 #4566ae,32px 30px 0 #4566ae,4px 32px 0 #4566ae,6px 32px 0 #4566ae,8px 32px 0 #4566ae,10px 32px 0 #4566ae,12px 32px 0 #4566ae,14px 32px 0 #4566ae,16px 32px 0 #4566ae,24px 32px 0 #4566ae,26px 32px 0 #4566ae,28px 32px 0 #4566ae,30px 32px 0 #4566ae;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-github::before {
|
|
||||||
box-shadow: 4px 2px 0 #333333,6px 2px 0 #333333,8px 2px 0 #333333,10px 2px 0 #333333,12px 2px 0 #333333,14px 2px 0 #333333,16px 2px 0 #333333,18px 2px 0 #333333,20px 2px 0 #333333,22px 2px 0 #333333,24px 2px 0 #333333,26px 2px 0 #333333,28px 2px 0 #333333,30px 2px 0 #333333,2px 4px 0 #333333,4px 4px 0 #333333,6px 4px 0 #333333,8px 4px 0 #333333,12px 4px 0 #333333,14px 4px 0 #333333,16px 4px 0 #333333,18px 4px 0 #333333,20px 4px 0 #333333,22px 4px 0 #333333,24px 4px 0 #333333,26px 4px 0 #333333,30px 4px 0 #333333,32px 4px 0 #333333,2px 6px 0 #333333,4px 6px 0 #333333,6px 6px 0 #333333,8px 6px 0 #333333,14px 6px 0 #333333,16px 6px 0 #333333,18px 6px 0 #333333,20px 6px 0 #333333,22px 6px 0 #333333,24px 6px 0 #333333,30px 6px 0 #333333,32px 6px 0 #333333,2px 8px 0 #333333,4px 8px 0 #333333,6px 8px 0 #333333,8px 8px 0 #333333,30px 8px 0 #333333,32px 8px 0 #333333,2px 10px 0 #333333,4px 10px 0 #333333,6px 10px 0 #333333,32px 10px 0 #333333,2px 12px 0 #333333,4px 12px 0 #333333,6px 12px 0 #333333,32px 12px 0 #333333,2px 14px 0 #333333,4px 14px 0 #333333,6px 14px 0 #333333,32px 14px 0 #333333,2px 16px 0 #333333,4px 16px 0 #333333,6px 16px 0 #333333,32px 16px 0 #333333,2px 18px 0 #333333,4px 18px 0 #333333,6px 18px 0 #333333,8px 18px 0 #333333,30px 18px 0 #333333,32px 18px 0 #333333,2px 20px 0 #333333,4px 20px 0 #333333,6px 20px 0 #333333,8px 20px 0 #333333,10px 20px 0 #333333,28px 20px 0 #333333,30px 20px 0 #333333,32px 20px 0 #333333,2px 22px 0 #333333,8px 22px 0 #333333,10px 22px 0 #333333,12px 22px 0 #333333,14px 22px 0 #333333,24px 22px 0 #333333,26px 22px 0 #333333,28px 22px 0 #333333,30px 22px 0 #333333,32px 22px 0 #333333,2px 24px 0 #333333,4px 24px 0 #333333,6px 24px 0 #333333,10px 24px 0 #333333,12px 24px 0 #333333,26px 24px 0 #333333,28px 24px 0 #333333,30px 24px 0 #333333,32px 24px 0 #333333,2px 26px 0 #333333,4px 26px 0 #333333,6px 26px 0 #333333,8px 26px 0 #333333,26px 26px 0 #333333,28px 26px 0 #333333,30px 26px 0 #333333,32px 26px 0 #333333,2px 28px 0 #333333,4px 28px 0 #333333,6px 28px 0 #333333,8px 28px 0 #333333,10px 28px 0 #333333,12px 28px 0 #333333,26px 28px 0 #333333,28px 28px 0 #333333,30px 28px 0 #333333,32px 28px 0 #333333,2px 30px 0 #333333,4px 30px 0 #333333,6px 30px 0 #333333,8px 30px 0 #333333,10px 30px 0 #333333,12px 30px 0 #333333,26px 30px 0 #333333,28px 30px 0 #333333,30px 30px 0 #333333,32px 30px 0 #333333,4px 32px 0 #333333,6px 32px 0 #333333,8px 32px 0 #333333,10px 32px 0 #333333,12px 32px 0 #333333,14px 32px 0 #333333,16px 32px 0 #333333,18px 32px 0 #333333,20px 32px 0 #333333,22px 32px 0 #333333,24px 32px 0 #333333,26px 32px 0 #333333,28px 32px 0 #333333,30px 32px 0 #333333;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-youtube::before {
|
|
||||||
box-shadow: 4px 2px 0 #ff0100,6px 2px 0 #ff0100,8px 2px 0 #ff0100,10px 2px 0 #ff0100,12px 2px 0 #ff0100,14px 2px 0 #ff0100,16px 2px 0 #ff0100,18px 2px 0 #ff0100,20px 2px 0 #ff0100,22px 2px 0 #ff0100,24px 2px 0 #ff0100,26px 2px 0 #ff0100,28px 2px 0 #ff0100,30px 2px 0 #ff0100,2px 4px 0 #ff0100,4px 4px 0 #ff0100,6px 4px 0 #ff0100,8px 4px 0 #ff0100,10px 4px 0 #ff0100,12px 4px 0 #ff0100,14px 4px 0 #ff0100,16px 4px 0 #ff0100,18px 4px 0 #ff0100,20px 4px 0 #ff0100,22px 4px 0 #ff0100,24px 4px 0 #ff0100,26px 4px 0 #ff0100,28px 4px 0 #ff0100,30px 4px 0 #ff0100,32px 4px 0 #ff0100,2px 6px 0 #ff0100,4px 6px 0 #ff0100,6px 6px 0 #ff0100,8px 6px 0 #ff0100,10px 6px 0 #ff0100,12px 6px 0 #ff0100,14px 6px 0 #ff0100,16px 6px 0 #ff0100,18px 6px 0 #ff0100,20px 6px 0 #ff0100,22px 6px 0 #ff0100,24px 6px 0 #ff0100,26px 6px 0 #ff0100,28px 6px 0 #ff0100,30px 6px 0 #ff0100,32px 6px 0 #ff0100,2px 8px 0 #ff0100,4px 8px 0 #ff0100,6px 8px 0 #ff0100,8px 8px 0 #ff0100,10px 8px 0 #ff0100,12px 8px 0 #ff0100,14px 8px 0 #ff0100,16px 8px 0 #ff0100,18px 8px 0 #ff0100,20px 8px 0 #ff0100,22px 8px 0 #ff0100,24px 8px 0 #ff0100,26px 8px 0 #ff0100,28px 8px 0 #ff0100,30px 8px 0 #ff0100,32px 8px 0 #ff0100,2px 10px 0 #ff0100,4px 10px 0 #ff0100,6px 10px 0 #ff0100,8px 10px 0 #ff0100,16px 10px 0 #ff0100,18px 10px 0 #ff0100,20px 10px 0 #ff0100,22px 10px 0 #ff0100,24px 10px 0 #ff0100,26px 10px 0 #ff0100,28px 10px 0 #ff0100,30px 10px 0 #ff0100,32px 10px 0 #ff0100,2px 12px 0 #ff0100,4px 12px 0 #ff0100,6px 12px 0 #ff0100,8px 12px 0 #ff0100,20px 12px 0 #ff0100,22px 12px 0 #ff0100,24px 12px 0 #ff0100,26px 12px 0 #ff0100,28px 12px 0 #ff0100,30px 12px 0 #ff0100,32px 12px 0 #ff0100,2px 14px 0 #ff0100,4px 14px 0 #ff0100,6px 14px 0 #ff0100,8px 14px 0 #ff0100,26px 14px 0 #ff0100,28px 14px 0 #ff0100,30px 14px 0 #ff0100,32px 14px 0 #ff0100,2px 16px 0 #ff0100,4px 16px 0 #ff0100,6px 16px 0 #ff0100,8px 16px 0 #ff0100,30px 16px 0 #ff0100,32px 16px 0 #ff0100,2px 18px 0 #ff0100,4px 18px 0 #ff0100,6px 18px 0 #ff0100,8px 18px 0 #ff0100,28px 18px 0 #ff0100,30px 18px 0 #ff0100,32px 18px 0 #ff0100,2px 20px 0 #ff0100,4px 20px 0 #ff0100,6px 20px 0 #ff0100,8px 20px 0 #ff0100,26px 20px 0 #ff0100,28px 20px 0 #ff0100,30px 20px 0 #ff0100,32px 20px 0 #ff0100,2px 22px 0 #ff0100,4px 22px 0 #ff0100,6px 22px 0 #ff0100,8px 22px 0 #ff0100,20px 22px 0 #ff0100,22px 22px 0 #ff0100,24px 22px 0 #ff0100,26px 22px 0 #ff0100,28px 22px 0 #ff0100,30px 22px 0 #ff0100,32px 22px 0 #ff0100,2px 24px 0 #ff0100,4px 24px 0 #ff0100,6px 24px 0 #ff0100,8px 24px 0 #ff0100,16px 24px 0 #ff0100,18px 24px 0 #ff0100,20px 24px 0 #ff0100,22px 24px 0 #ff0100,24px 24px 0 #ff0100,26px 24px 0 #ff0100,28px 24px 0 #ff0100,30px 24px 0 #ff0100,32px 24px 0 #ff0100,2px 26px 0 #ff0100,4px 26px 0 #ff0100,6px 26px 0 #ff0100,8px 26px 0 #ff0100,10px 26px 0 #ff0100,12px 26px 0 #ff0100,14px 26px 0 #ff0100,16px 26px 0 #ff0100,18px 26px 0 #ff0100,20px 26px 0 #ff0100,22px 26px 0 #ff0100,24px 26px 0 #ff0100,26px 26px 0 #ff0100,28px 26px 0 #ff0100,30px 26px 0 #ff0100,32px 26px 0 #ff0100,2px 28px 0 #ff0100,4px 28px 0 #ff0100,6px 28px 0 #ff0100,8px 28px 0 #ff0100,10px 28px 0 #ff0100,12px 28px 0 #ff0100,14px 28px 0 #ff0100,16px 28px 0 #ff0100,18px 28px 0 #ff0100,20px 28px 0 #ff0100,22px 28px 0 #ff0100,24px 28px 0 #ff0100,26px 28px 0 #ff0100,28px 28px 0 #ff0100,30px 28px 0 #ff0100,32px 28px 0 #ff0100,2px 30px 0 #ff0100,4px 30px 0 #ff0100,6px 30px 0 #ff0100,8px 30px 0 #ff0100,10px 30px 0 #ff0100,12px 30px 0 #ff0100,14px 30px 0 #ff0100,16px 30px 0 #ff0100,18px 30px 0 #ff0100,20px 30px 0 #ff0100,22px 30px 0 #ff0100,24px 30px 0 #ff0100,26px 30px 0 #ff0100,28px 30px 0 #ff0100,30px 30px 0 #ff0100,32px 30px 0 #ff0100,4px 32px 0 #ff0100,6px 32px 0 #ff0100,8px 32px 0 #ff0100,10px 32px 0 #ff0100,12px 32px 0 #ff0100,14px 32px 0 #ff0100,16px 32px 0 #ff0100,18px 32px 0 #ff0100,20px 32px 0 #ff0100,22px 32px 0 #ff0100,24px 32px 0 #ff0100,26px 32px 0 #ff0100,28px 32px 0 #ff0100,30px 32px 0 #ff0100;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-heart::before {
|
|
||||||
box-shadow: 6px 4px 0 #f11416,8px 4px 0 #f11416,10px 4px 0 #f11416,22px 4px 0 #f11416,24px 4px 0 #f11416,26px 4px 0 #f11416,4px 6px 0 #f11416,6px 6px 0 #f11416,8px 6px 0 #f11416,10px 6px 0 #f11416,12px 6px 0 #f11416,20px 6px 0 #f11416,22px 6px 0 #f11416,24px 6px 0 #f11416,26px 6px 0 #f11416,28px 6px 0 #f11416,2px 8px 0 #f11416,4px 8px 0 #f11416,10px 8px 0 #f11416,12px 8px 0 #f11416,14px 8px 0 #f11416,18px 8px 0 #f11416,20px 8px 0 #f11416,22px 8px 0 #f11416,24px 8px 0 #f11416,26px 8px 0 #f11416,28px 8px 0 #f11416,30px 8px 0 #f11416,2px 10px 0 #f11416,8px 10px 0 #f11416,10px 10px 0 #f11416,12px 10px 0 #f11416,14px 10px 0 #f11416,16px 10px 0 #f11416,18px 10px 0 #f11416,20px 10px 0 #f11416,22px 10px 0 #f11416,24px 10px 0 #f11416,26px 10px 0 #f11416,28px 10px 0 #f11416,30px 10px 0 #f11416,2px 12px 0 #f11416,6px 12px 0 #f11416,8px 12px 0 #f11416,10px 12px 0 #f11416,12px 12px 0 #f11416,14px 12px 0 #f11416,16px 12px 0 #f11416,18px 12px 0 #f11416,20px 12px 0 #f11416,22px 12px 0 #f11416,24px 12px 0 #f11416,26px 12px 0 #f11416,28px 12px 0 #f11416,30px 12px 0 #f11416,2px 14px 0 #f11416,4px 14px 0 #f11416,6px 14px 0 #f11416,8px 14px 0 #f11416,10px 14px 0 #f11416,12px 14px 0 #f11416,14px 14px 0 #f11416,16px 14px 0 #f11416,18px 14px 0 #f11416,20px 14px 0 #f11416,22px 14px 0 #f11416,24px 14px 0 #f11416,26px 14px 0 #f11416,28px 14px 0 #f11416,30px 14px 0 #f11416,2px 16px 0 #f11416,4px 16px 0 #f11416,6px 16px 0 #f11416,8px 16px 0 #f11416,10px 16px 0 #f11416,12px 16px 0 #f11416,14px 16px 0 #f11416,16px 16px 0 #f11416,18px 16px 0 #f11416,20px 16px 0 #f11416,22px 16px 0 #f11416,24px 16px 0 #f11416,26px 16px 0 #f11416,28px 16px 0 #f11416,30px 16px 0 #f11416,4px 18px 0 #f11416,6px 18px 0 #f11416,8px 18px 0 #f11416,10px 18px 0 #f11416,12px 18px 0 #f11416,14px 18px 0 #f11416,16px 18px 0 #f11416,18px 18px 0 #f11416,20px 18px 0 #f11416,22px 18px 0 #f11416,24px 18px 0 #f11416,26px 18px 0 #f11416,28px 18px 0 #f11416,6px 20px 0 #f11416,8px 20px 0 #f11416,10px 20px 0 #f11416,12px 20px 0 #f11416,14px 20px 0 #f11416,16px 20px 0 #f11416,18px 20px 0 #f11416,20px 20px 0 #f11416,22px 20px 0 #f11416,24px 20px 0 #f11416,26px 20px 0 #f11416,8px 22px 0 #f11416,10px 22px 0 #f11416,12px 22px 0 #f11416,14px 22px 0 #f11416,16px 22px 0 #f11416,18px 22px 0 #f11416,20px 22px 0 #f11416,22px 22px 0 #f11416,24px 22px 0 #f11416,10px 24px 0 #f11416,12px 24px 0 #f11416,14px 24px 0 #f11416,16px 24px 0 #f11416,18px 24px 0 #f11416,20px 24px 0 #f11416,22px 24px 0 #f11416,12px 26px 0 #f11416,14px 26px 0 #f11416,16px 26px 0 #f11416,18px 26px 0 #f11416,20px 26px 0 #f11416,14px 28px 0 #f11416,16px 28px 0 #f11416,18px 28px 0 #f11416,16px 30px 0 #f11416;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-star::before {
|
|
||||||
box-shadow: 16px 2px 0 #f7de4e,14px 4px 0 #f7de4e,16px 4px 0 #f7de4e,18px 4px 0 #f7de4e,14px 6px 0 #f7de4e,16px 6px 0 #f7de4e,18px 6px 0 #f7de4e,12px 8px 0 #f7de4e,14px 8px 0 #f7de4e,16px 8px 0 #f7de4e,18px 8px 0 #f7de4e,20px 8px 0 #f7de4e,12px 10px 0 #f7de4e,18px 10px 0 #f7de4e,20px 10px 0 #f7de4e,2px 12px 0 #f7de4e,4px 12px 0 #f7de4e,6px 12px 0 #f7de4e,8px 12px 0 #f7de4e,10px 12px 0 #f7de4e,12px 12px 0 #f7de4e,16px 12px 0 #f7de4e,18px 12px 0 #f7de4e,20px 12px 0 #f7de4e,22px 12px 0 #f7de4e,24px 12px 0 #f7de4e,26px 12px 0 #f7de4e,28px 12px 0 #f7de4e,30px 12px 0 #f7de4e,2px 14px 0 #f7de4e,4px 14px 0 #f7de4e,6px 14px 0 #f7de4e,8px 14px 0 #f7de4e,14px 14px 0 #f7de4e,16px 14px 0 #f7de4e,18px 14px 0 #f7de4e,20px 14px 0 #f7de4e,22px 14px 0 #f7de4e,24px 14px 0 #f7de4e,26px 14px 0 #f7de4e,28px 14px 0 #f7de4e,30px 14px 0 #f7de4e,4px 16px 0 #f7de4e,6px 16px 0 #f7de4e,8px 16px 0 #f7de4e,12px 16px 0 #f7de4e,14px 16px 0 #f7de4e,16px 16px 0 #f7de4e,18px 16px 0 #f7de4e,20px 16px 0 #f7de4e,22px 16px 0 #f7de4e,24px 16px 0 #f7de4e,26px 16px 0 #f7de4e,28px 16px 0 #f7de4e,6px 18px 0 #f7de4e,8px 18px 0 #f7de4e,10px 18px 0 #f7de4e,12px 18px 0 #f7de4e,14px 18px 0 #f7de4e,16px 18px 0 #f7de4e,18px 18px 0 #f7de4e,20px 18px 0 #f7de4e,22px 18px 0 #f7de4e,24px 18px 0 #f7de4e,26px 18px 0 #f7de4e,8px 20px 0 #f7de4e,10px 20px 0 #f7de4e,12px 20px 0 #f7de4e,14px 20px 0 #f7de4e,16px 20px 0 #f7de4e,18px 20px 0 #f7de4e,20px 20px 0 #f7de4e,22px 20px 0 #f7de4e,24px 20px 0 #f7de4e,6px 22px 0 #f7de4e,8px 22px 0 #f7de4e,10px 22px 0 #f7de4e,12px 22px 0 #f7de4e,14px 22px 0 #f7de4e,16px 22px 0 #f7de4e,18px 22px 0 #f7de4e,20px 22px 0 #f7de4e,22px 22px 0 #f7de4e,24px 22px 0 #f7de4e,26px 22px 0 #f7de4e,6px 24px 0 #f7de4e,8px 24px 0 #f7de4e,10px 24px 0 #f7de4e,12px 24px 0 #f7de4e,14px 24px 0 #f7de4e,16px 24px 0 #f7de4e,18px 24px 0 #f7de4e,20px 24px 0 #f7de4e,22px 24px 0 #f7de4e,24px 24px 0 #f7de4e,26px 24px 0 #f7de4e,4px 26px 0 #f7de4e,6px 26px 0 #f7de4e,8px 26px 0 #f7de4e,10px 26px 0 #f7de4e,12px 26px 0 #f7de4e,14px 26px 0 #f7de4e,16px 26px 0 #f7de4e,18px 26px 0 #f7de4e,20px 26px 0 #f7de4e,22px 26px 0 #f7de4e,24px 26px 0 #f7de4e,26px 26px 0 #f7de4e,28px 26px 0 #f7de4e,4px 28px 0 #f7de4e,6px 28px 0 #f7de4e,8px 28px 0 #f7de4e,10px 28px 0 #f7de4e,12px 28px 0 #f7de4e,14px 28px 0 #f7de4e,18px 28px 0 #f7de4e,20px 28px 0 #f7de4e,22px 28px 0 #f7de4e,24px 28px 0 #f7de4e,26px 28px 0 #f7de4e,28px 28px 0 #f7de4e,2px 30px 0 #f7de4e,4px 30px 0 #f7de4e,6px 30px 0 #f7de4e,8px 30px 0 #f7de4e,10px 30px 0 #f7de4e,22px 30px 0 #f7de4e,24px 30px 0 #f7de4e,26px 30px 0 #f7de4e,28px 30px 0 #f7de4e,30px 30px 0 #f7de4e,2px 32px 0 #f7de4e,4px 32px 0 #f7de4e,6px 32px 0 #f7de4e,26px 32px 0 #f7de4e,28px 32px 0 #f7de4e,30px 32px 0 #f7de4e;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-like::before {
|
|
||||||
box-shadow: 16px 2px 0 #1e77be,18px 2px 0 #1e77be,16px 4px 0 #1e77be,20px 4px 0 #1e77be,16px 6px 0 #1e77be,20px 6px 0 #1e77be,14px 8px 0 #1e77be,20px 8px 0 #1e77be,14px 10px 0 #1e77be,18px 10px 0 #1e77be,12px 12px 0 #1e77be,18px 12px 0 #1e77be,12px 14px 0 #1e77be,18px 14px 0 #1e77be,2px 16px 0 #1e77be,4px 16px 0 #1e77be,6px 16px 0 #1e77be,10px 16px 0 #1e77be,20px 16px 0 #1e77be,22px 16px 0 #1e77be,24px 16px 0 #1e77be,26px 16px 0 #1e77be,28px 16px 0 #1e77be,30px 16px 0 #1e77be,2px 18px 0 #1e77be,4px 18px 0 #1e77be,6px 18px 0 #1e77be,10px 18px 0 #1e77be,32px 18px 0 #1e77be,2px 20px 0 #1e77be,4px 20px 0 #1e77be,6px 20px 0 #1e77be,10px 20px 0 #1e77be,32px 20px 0 #1e77be,2px 22px 0 #1e77be,4px 22px 0 #1e77be,6px 22px 0 #1e77be,10px 22px 0 #1e77be,30px 22px 0 #1e77be,2px 24px 0 #1e77be,4px 24px 0 #1e77be,6px 24px 0 #1e77be,10px 24px 0 #1e77be,32px 24px 0 #1e77be,2px 26px 0 #1e77be,4px 26px 0 #1e77be,6px 26px 0 #1e77be,10px 26px 0 #1e77be,32px 26px 0 #1e77be,2px 28px 0 #1e77be,4px 28px 0 #1e77be,6px 28px 0 #1e77be,10px 28px 0 #1e77be,30px 28px 0 #1e77be,2px 30px 0 #1e77be,4px 30px 0 #1e77be,6px 30px 0 #1e77be,10px 30px 0 #1e77be,30px 30px 0 #1e77be,2px 32px 0 #1e77be,4px 32px 0 #1e77be,6px 32px 0 #1e77be,10px 32px 0 #1e77be,12px 32px 0 #1e77be,14px 32px 0 #1e77be,16px 32px 0 #1e77be,18px 32px 0 #1e77be,20px 32px 0 #1e77be,22px 32px 0 #1e77be,24px 32px 0 #1e77be,26px 32px 0 #1e77be,28px 32px 0 #1e77be;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-medium {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-medium::before {
|
|
||||||
top: -3px;
|
|
||||||
left: -3px;
|
|
||||||
width: 3px;
|
|
||||||
height: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-medium.-twitter::before {
|
|
||||||
box-shadow: 6px 3px 0 #1c9ceb,9px 3px 0 #1c9ceb,12px 3px 0 #1c9ceb,15px 3px 0 #1c9ceb,18px 3px 0 #1c9ceb,21px 3px 0 #1c9ceb,24px 3px 0 #1c9ceb,27px 3px 0 #1c9ceb,30px 3px 0 #1c9ceb,33px 3px 0 #1c9ceb,36px 3px 0 #1c9ceb,39px 3px 0 #1c9ceb,42px 3px 0 #1c9ceb,45px 3px 0 #1c9ceb,3px 6px 0 #1c9ceb,6px 6px 0 #1c9ceb,9px 6px 0 #1c9ceb,12px 6px 0 #1c9ceb,15px 6px 0 #1c9ceb,18px 6px 0 #1c9ceb,21px 6px 0 #1c9ceb,24px 6px 0 #1c9ceb,27px 6px 0 #1c9ceb,30px 6px 0 #1c9ceb,33px 6px 0 #1c9ceb,36px 6px 0 #1c9ceb,39px 6px 0 #1c9ceb,42px 6px 0 #1c9ceb,45px 6px 0 #1c9ceb,48px 6px 0 #1c9ceb,3px 9px 0 #1c9ceb,9px 9px 0 #1c9ceb,12px 9px 0 #1c9ceb,15px 9px 0 #1c9ceb,18px 9px 0 #1c9ceb,21px 9px 0 #1c9ceb,24px 9px 0 #1c9ceb,27px 9px 0 #1c9ceb,39px 9px 0 #1c9ceb,42px 9px 0 #1c9ceb,45px 9px 0 #1c9ceb,48px 9px 0 #1c9ceb,3px 12px 0 #1c9ceb,15px 12px 0 #1c9ceb,18px 12px 0 #1c9ceb,21px 12px 0 #1c9ceb,24px 12px 0 #1c9ceb,42px 12px 0 #1c9ceb,45px 12px 0 #1c9ceb,48px 12px 0 #1c9ceb,3px 15px 0 #1c9ceb,21px 15px 0 #1c9ceb,48px 15px 0 #1c9ceb,3px 18px 0 #1c9ceb,6px 18px 0 #1c9ceb,45px 18px 0 #1c9ceb,48px 18px 0 #1c9ceb,3px 21px 0 #1c9ceb,6px 21px 0 #1c9ceb,45px 21px 0 #1c9ceb,48px 21px 0 #1c9ceb,3px 24px 0 #1c9ceb,6px 24px 0 #1c9ceb,9px 24px 0 #1c9ceb,42px 24px 0 #1c9ceb,45px 24px 0 #1c9ceb,48px 24px 0 #1c9ceb,3px 27px 0 #1c9ceb,6px 27px 0 #1c9ceb,9px 27px 0 #1c9ceb,39px 27px 0 #1c9ceb,42px 27px 0 #1c9ceb,45px 27px 0 #1c9ceb,48px 27px 0 #1c9ceb,3px 30px 0 #1c9ceb,6px 30px 0 #1c9ceb,9px 30px 0 #1c9ceb,12px 30px 0 #1c9ceb,39px 30px 0 #1c9ceb,42px 30px 0 #1c9ceb,45px 30px 0 #1c9ceb,48px 30px 0 #1c9ceb,3px 33px 0 #1c9ceb,6px 33px 0 #1c9ceb,9px 33px 0 #1c9ceb,12px 33px 0 #1c9ceb,15px 33px 0 #1c9ceb,39px 33px 0 #1c9ceb,42px 33px 0 #1c9ceb,45px 33px 0 #1c9ceb,48px 33px 0 #1c9ceb,3px 36px 0 #1c9ceb,6px 36px 0 #1c9ceb,9px 36px 0 #1c9ceb,12px 36px 0 #1c9ceb,36px 36px 0 #1c9ceb,39px 36px 0 #1c9ceb,42px 36px 0 #1c9ceb,45px 36px 0 #1c9ceb,48px 36px 0 #1c9ceb,3px 39px 0 #1c9ceb,6px 39px 0 #1c9ceb,30px 39px 0 #1c9ceb,33px 39px 0 #1c9ceb,36px 39px 0 #1c9ceb,39px 39px 0 #1c9ceb,42px 39px 0 #1c9ceb,45px 39px 0 #1c9ceb,48px 39px 0 #1c9ceb,3px 42px 0 #1c9ceb,6px 42px 0 #1c9ceb,9px 42px 0 #1c9ceb,21px 42px 0 #1c9ceb,24px 42px 0 #1c9ceb,27px 42px 0 #1c9ceb,30px 42px 0 #1c9ceb,33px 42px 0 #1c9ceb,36px 42px 0 #1c9ceb,39px 42px 0 #1c9ceb,42px 42px 0 #1c9ceb,45px 42px 0 #1c9ceb,48px 42px 0 #1c9ceb,3px 45px 0 #1c9ceb,6px 45px 0 #1c9ceb,9px 45px 0 #1c9ceb,12px 45px 0 #1c9ceb,15px 45px 0 #1c9ceb,18px 45px 0 #1c9ceb,21px 45px 0 #1c9ceb,24px 45px 0 #1c9ceb,27px 45px 0 #1c9ceb,30px 45px 0 #1c9ceb,33px 45px 0 #1c9ceb,36px 45px 0 #1c9ceb,39px 45px 0 #1c9ceb,42px 45px 0 #1c9ceb,45px 45px 0 #1c9ceb,48px 45px 0 #1c9ceb,6px 48px 0 #1c9ceb,9px 48px 0 #1c9ceb,12px 48px 0 #1c9ceb,15px 48px 0 #1c9ceb,18px 48px 0 #1c9ceb,21px 48px 0 #1c9ceb,24px 48px 0 #1c9ceb,27px 48px 0 #1c9ceb,30px 48px 0 #1c9ceb,33px 48px 0 #1c9ceb,36px 48px 0 #1c9ceb,39px 48px 0 #1c9ceb,42px 48px 0 #1c9ceb,45px 48px 0 #1c9ceb;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-medium.-facebook::before {
|
|
||||||
box-shadow: 6px 3px 0 #4566ae,9px 3px 0 #4566ae,12px 3px 0 #4566ae,15px 3px 0 #4566ae,18px 3px 0 #4566ae,21px 3px 0 #4566ae,24px 3px 0 #4566ae,27px 3px 0 #4566ae,30px 3px 0 #4566ae,33px 3px 0 #4566ae,36px 3px 0 #4566ae,39px 3px 0 #4566ae,42px 3px 0 #4566ae,45px 3px 0 #4566ae,3px 6px 0 #4566ae,6px 6px 0 #4566ae,9px 6px 0 #4566ae,12px 6px 0 #4566ae,15px 6px 0 #4566ae,18px 6px 0 #4566ae,21px 6px 0 #4566ae,24px 6px 0 #4566ae,27px 6px 0 #4566ae,30px 6px 0 #4566ae,45px 6px 0 #4566ae,48px 6px 0 #4566ae,3px 9px 0 #4566ae,6px 9px 0 #4566ae,9px 9px 0 #4566ae,12px 9px 0 #4566ae,15px 9px 0 #4566ae,18px 9px 0 #4566ae,21px 9px 0 #4566ae,24px 9px 0 #4566ae,27px 9px 0 #4566ae,45px 9px 0 #4566ae,48px 9px 0 #4566ae,3px 12px 0 #4566ae,6px 12px 0 #4566ae,9px 12px 0 #4566ae,12px 12px 0 #4566ae,15px 12px 0 #4566ae,18px 12px 0 #4566ae,21px 12px 0 #4566ae,24px 12px 0 #4566ae,45px 12px 0 #4566ae,48px 12px 0 #4566ae,3px 15px 0 #4566ae,6px 15px 0 #4566ae,9px 15px 0 #4566ae,12px 15px 0 #4566ae,15px 15px 0 #4566ae,18px 15px 0 #4566ae,21px 15px 0 #4566ae,24px 15px 0 #4566ae,36px 15px 0 #4566ae,39px 15px 0 #4566ae,42px 15px 0 #4566ae,45px 15px 0 #4566ae,48px 15px 0 #4566ae,3px 18px 0 #4566ae,6px 18px 0 #4566ae,9px 18px 0 #4566ae,12px 18px 0 #4566ae,15px 18px 0 #4566ae,18px 18px 0 #4566ae,21px 18px 0 #4566ae,24px 18px 0 #4566ae,36px 18px 0 #4566ae,39px 18px 0 #4566ae,42px 18px 0 #4566ae,45px 18px 0 #4566ae,48px 18px 0 #4566ae,3px 21px 0 #4566ae,6px 21px 0 #4566ae,9px 21px 0 #4566ae,12px 21px 0 #4566ae,15px 21px 0 #4566ae,18px 21px 0 #4566ae,21px 21px 0 #4566ae,24px 21px 0 #4566ae,36px 21px 0 #4566ae,39px 21px 0 #4566ae,42px 21px 0 #4566ae,45px 21px 0 #4566ae,48px 21px 0 #4566ae,3px 24px 0 #4566ae,6px 24px 0 #4566ae,9px 24px 0 #4566ae,12px 24px 0 #4566ae,15px 24px 0 #4566ae,45px 24px 0 #4566ae,48px 24px 0 #4566ae,3px 27px 0 #4566ae,6px 27px 0 #4566ae,9px 27px 0 #4566ae,12px 27px 0 #4566ae,15px 27px 0 #4566ae,45px 27px 0 #4566ae,48px 27px 0 #4566ae,3px 30px 0 #4566ae,6px 30px 0 #4566ae,9px 30px 0 #4566ae,12px 30px 0 #4566ae,15px 30px 0 #4566ae,45px 30px 0 #4566ae,48px 30px 0 #4566ae,3px 33px 0 #4566ae,6px 33px 0 #4566ae,9px 33px 0 #4566ae,12px 33px 0 #4566ae,15px 33px 0 #4566ae,18px 33px 0 #4566ae,21px 33px 0 #4566ae,24px 33px 0 #4566ae,36px 33px 0 #4566ae,39px 33px 0 #4566ae,42px 33px 0 #4566ae,45px 33px 0 #4566ae,48px 33px 0 #4566ae,3px 36px 0 #4566ae,6px 36px 0 #4566ae,9px 36px 0 #4566ae,12px 36px 0 #4566ae,15px 36px 0 #4566ae,18px 36px 0 #4566ae,21px 36px 0 #4566ae,24px 36px 0 #4566ae,36px 36px 0 #4566ae,39px 36px 0 #4566ae,42px 36px 0 #4566ae,45px 36px 0 #4566ae,48px 36px 0 #4566ae,3px 39px 0 #4566ae,6px 39px 0 #4566ae,9px 39px 0 #4566ae,12px 39px 0 #4566ae,15px 39px 0 #4566ae,18px 39px 0 #4566ae,21px 39px 0 #4566ae,24px 39px 0 #4566ae,36px 39px 0 #4566ae,39px 39px 0 #4566ae,42px 39px 0 #4566ae,45px 39px 0 #4566ae,48px 39px 0 #4566ae,3px 42px 0 #4566ae,6px 42px 0 #4566ae,9px 42px 0 #4566ae,12px 42px 0 #4566ae,15px 42px 0 #4566ae,18px 42px 0 #4566ae,21px 42px 0 #4566ae,24px 42px 0 #4566ae,36px 42px 0 #4566ae,39px 42px 0 #4566ae,42px 42px 0 #4566ae,45px 42px 0 #4566ae,48px 42px 0 #4566ae,3px 45px 0 #4566ae,6px 45px 0 #4566ae,9px 45px 0 #4566ae,12px 45px 0 #4566ae,15px 45px 0 #4566ae,18px 45px 0 #4566ae,21px 45px 0 #4566ae,24px 45px 0 #4566ae,36px 45px 0 #4566ae,39px 45px 0 #4566ae,42px 45px 0 #4566ae,45px 45px 0 #4566ae,48px 45px 0 #4566ae,6px 48px 0 #4566ae,9px 48px 0 #4566ae,12px 48px 0 #4566ae,15px 48px 0 #4566ae,18px 48px 0 #4566ae,21px 48px 0 #4566ae,24px 48px 0 #4566ae,36px 48px 0 #4566ae,39px 48px 0 #4566ae,42px 48px 0 #4566ae,45px 48px 0 #4566ae;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-medium.-github::before {
|
|
||||||
box-shadow: 6px 3px 0 #333333,9px 3px 0 #333333,12px 3px 0 #333333,15px 3px 0 #333333,18px 3px 0 #333333,21px 3px 0 #333333,24px 3px 0 #333333,27px 3px 0 #333333,30px 3px 0 #333333,33px 3px 0 #333333,36px 3px 0 #333333,39px 3px 0 #333333,42px 3px 0 #333333,45px 3px 0 #333333,3px 6px 0 #333333,6px 6px 0 #333333,9px 6px 0 #333333,12px 6px 0 #333333,18px 6px 0 #333333,21px 6px 0 #333333,24px 6px 0 #333333,27px 6px 0 #333333,30px 6px 0 #333333,33px 6px 0 #333333,36px 6px 0 #333333,39px 6px 0 #333333,45px 6px 0 #333333,48px 6px 0 #333333,3px 9px 0 #333333,6px 9px 0 #333333,9px 9px 0 #333333,12px 9px 0 #333333,21px 9px 0 #333333,24px 9px 0 #333333,27px 9px 0 #333333,30px 9px 0 #333333,33px 9px 0 #333333,36px 9px 0 #333333,45px 9px 0 #333333,48px 9px 0 #333333,3px 12px 0 #333333,6px 12px 0 #333333,9px 12px 0 #333333,12px 12px 0 #333333,45px 12px 0 #333333,48px 12px 0 #333333,3px 15px 0 #333333,6px 15px 0 #333333,9px 15px 0 #333333,48px 15px 0 #333333,3px 18px 0 #333333,6px 18px 0 #333333,9px 18px 0 #333333,48px 18px 0 #333333,3px 21px 0 #333333,6px 21px 0 #333333,9px 21px 0 #333333,48px 21px 0 #333333,3px 24px 0 #333333,6px 24px 0 #333333,9px 24px 0 #333333,48px 24px 0 #333333,3px 27px 0 #333333,6px 27px 0 #333333,9px 27px 0 #333333,12px 27px 0 #333333,45px 27px 0 #333333,48px 27px 0 #333333,3px 30px 0 #333333,6px 30px 0 #333333,9px 30px 0 #333333,12px 30px 0 #333333,15px 30px 0 #333333,42px 30px 0 #333333,45px 30px 0 #333333,48px 30px 0 #333333,3px 33px 0 #333333,12px 33px 0 #333333,15px 33px 0 #333333,18px 33px 0 #333333,21px 33px 0 #333333,36px 33px 0 #333333,39px 33px 0 #333333,42px 33px 0 #333333,45px 33px 0 #333333,48px 33px 0 #333333,3px 36px 0 #333333,6px 36px 0 #333333,9px 36px 0 #333333,15px 36px 0 #333333,18px 36px 0 #333333,39px 36px 0 #333333,42px 36px 0 #333333,45px 36px 0 #333333,48px 36px 0 #333333,3px 39px 0 #333333,6px 39px 0 #333333,9px 39px 0 #333333,12px 39px 0 #333333,39px 39px 0 #333333,42px 39px 0 #333333,45px 39px 0 #333333,48px 39px 0 #333333,3px 42px 0 #333333,6px 42px 0 #333333,9px 42px 0 #333333,12px 42px 0 #333333,15px 42px 0 #333333,18px 42px 0 #333333,39px 42px 0 #333333,42px 42px 0 #333333,45px 42px 0 #333333,48px 42px 0 #333333,3px 45px 0 #333333,6px 45px 0 #333333,9px 45px 0 #333333,12px 45px 0 #333333,15px 45px 0 #333333,18px 45px 0 #333333,39px 45px 0 #333333,42px 45px 0 #333333,45px 45px 0 #333333,48px 45px 0 #333333,6px 48px 0 #333333,9px 48px 0 #333333,12px 48px 0 #333333,15px 48px 0 #333333,18px 48px 0 #333333,21px 48px 0 #333333,24px 48px 0 #333333,27px 48px 0 #333333,30px 48px 0 #333333,33px 48px 0 #333333,36px 48px 0 #333333,39px 48px 0 #333333,42px 48px 0 #333333,45px 48px 0 #333333;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-medium.-youtube::before {
|
|
||||||
box-shadow: 6px 3px 0 #ff0100,9px 3px 0 #ff0100,12px 3px 0 #ff0100,15px 3px 0 #ff0100,18px 3px 0 #ff0100,21px 3px 0 #ff0100,24px 3px 0 #ff0100,27px 3px 0 #ff0100,30px 3px 0 #ff0100,33px 3px 0 #ff0100,36px 3px 0 #ff0100,39px 3px 0 #ff0100,42px 3px 0 #ff0100,45px 3px 0 #ff0100,3px 6px 0 #ff0100,6px 6px 0 #ff0100,9px 6px 0 #ff0100,12px 6px 0 #ff0100,15px 6px 0 #ff0100,18px 6px 0 #ff0100,21px 6px 0 #ff0100,24px 6px 0 #ff0100,27px 6px 0 #ff0100,30px 6px 0 #ff0100,33px 6px 0 #ff0100,36px 6px 0 #ff0100,39px 6px 0 #ff0100,42px 6px 0 #ff0100,45px 6px 0 #ff0100,48px 6px 0 #ff0100,3px 9px 0 #ff0100,6px 9px 0 #ff0100,9px 9px 0 #ff0100,12px 9px 0 #ff0100,15px 9px 0 #ff0100,18px 9px 0 #ff0100,21px 9px 0 #ff0100,24px 9px 0 #ff0100,27px 9px 0 #ff0100,30px 9px 0 #ff0100,33px 9px 0 #ff0100,36px 9px 0 #ff0100,39px 9px 0 #ff0100,42px 9px 0 #ff0100,45px 9px 0 #ff0100,48px 9px 0 #ff0100,3px 12px 0 #ff0100,6px 12px 0 #ff0100,9px 12px 0 #ff0100,12px 12px 0 #ff0100,15px 12px 0 #ff0100,18px 12px 0 #ff0100,21px 12px 0 #ff0100,24px 12px 0 #ff0100,27px 12px 0 #ff0100,30px 12px 0 #ff0100,33px 12px 0 #ff0100,36px 12px 0 #ff0100,39px 12px 0 #ff0100,42px 12px 0 #ff0100,45px 12px 0 #ff0100,48px 12px 0 #ff0100,3px 15px 0 #ff0100,6px 15px 0 #ff0100,9px 15px 0 #ff0100,12px 15px 0 #ff0100,24px 15px 0 #ff0100,27px 15px 0 #ff0100,30px 15px 0 #ff0100,33px 15px 0 #ff0100,36px 15px 0 #ff0100,39px 15px 0 #ff0100,42px 15px 0 #ff0100,45px 15px 0 #ff0100,48px 15px 0 #ff0100,3px 18px 0 #ff0100,6px 18px 0 #ff0100,9px 18px 0 #ff0100,12px 18px 0 #ff0100,30px 18px 0 #ff0100,33px 18px 0 #ff0100,36px 18px 0 #ff0100,39px 18px 0 #ff0100,42px 18px 0 #ff0100,45px 18px 0 #ff0100,48px 18px 0 #ff0100,3px 21px 0 #ff0100,6px 21px 0 #ff0100,9px 21px 0 #ff0100,12px 21px 0 #ff0100,39px 21px 0 #ff0100,42px 21px 0 #ff0100,45px 21px 0 #ff0100,48px 21px 0 #ff0100,3px 24px 0 #ff0100,6px 24px 0 #ff0100,9px 24px 0 #ff0100,12px 24px 0 #ff0100,45px 24px 0 #ff0100,48px 24px 0 #ff0100,3px 27px 0 #ff0100,6px 27px 0 #ff0100,9px 27px 0 #ff0100,12px 27px 0 #ff0100,42px 27px 0 #ff0100,45px 27px 0 #ff0100,48px 27px 0 #ff0100,3px 30px 0 #ff0100,6px 30px 0 #ff0100,9px 30px 0 #ff0100,12px 30px 0 #ff0100,39px 30px 0 #ff0100,42px 30px 0 #ff0100,45px 30px 0 #ff0100,48px 30px 0 #ff0100,3px 33px 0 #ff0100,6px 33px 0 #ff0100,9px 33px 0 #ff0100,12px 33px 0 #ff0100,30px 33px 0 #ff0100,33px 33px 0 #ff0100,36px 33px 0 #ff0100,39px 33px 0 #ff0100,42px 33px 0 #ff0100,45px 33px 0 #ff0100,48px 33px 0 #ff0100,3px 36px 0 #ff0100,6px 36px 0 #ff0100,9px 36px 0 #ff0100,12px 36px 0 #ff0100,24px 36px 0 #ff0100,27px 36px 0 #ff0100,30px 36px 0 #ff0100,33px 36px 0 #ff0100,36px 36px 0 #ff0100,39px 36px 0 #ff0100,42px 36px 0 #ff0100,45px 36px 0 #ff0100,48px 36px 0 #ff0100,3px 39px 0 #ff0100,6px 39px 0 #ff0100,9px 39px 0 #ff0100,12px 39px 0 #ff0100,15px 39px 0 #ff0100,18px 39px 0 #ff0100,21px 39px 0 #ff0100,24px 39px 0 #ff0100,27px 39px 0 #ff0100,30px 39px 0 #ff0100,33px 39px 0 #ff0100,36px 39px 0 #ff0100,39px 39px 0 #ff0100,42px 39px 0 #ff0100,45px 39px 0 #ff0100,48px 39px 0 #ff0100,3px 42px 0 #ff0100,6px 42px 0 #ff0100,9px 42px 0 #ff0100,12px 42px 0 #ff0100,15px 42px 0 #ff0100,18px 42px 0 #ff0100,21px 42px 0 #ff0100,24px 42px 0 #ff0100,27px 42px 0 #ff0100,30px 42px 0 #ff0100,33px 42px 0 #ff0100,36px 42px 0 #ff0100,39px 42px 0 #ff0100,42px 42px 0 #ff0100,45px 42px 0 #ff0100,48px 42px 0 #ff0100,3px 45px 0 #ff0100,6px 45px 0 #ff0100,9px 45px 0 #ff0100,12px 45px 0 #ff0100,15px 45px 0 #ff0100,18px 45px 0 #ff0100,21px 45px 0 #ff0100,24px 45px 0 #ff0100,27px 45px 0 #ff0100,30px 45px 0 #ff0100,33px 45px 0 #ff0100,36px 45px 0 #ff0100,39px 45px 0 #ff0100,42px 45px 0 #ff0100,45px 45px 0 #ff0100,48px 45px 0 #ff0100,6px 48px 0 #ff0100,9px 48px 0 #ff0100,12px 48px 0 #ff0100,15px 48px 0 #ff0100,18px 48px 0 #ff0100,21px 48px 0 #ff0100,24px 48px 0 #ff0100,27px 48px 0 #ff0100,30px 48px 0 #ff0100,33px 48px 0 #ff0100,36px 48px 0 #ff0100,39px 48px 0 #ff0100,42px 48px 0 #ff0100,45px 48px 0 #ff0100;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-medium.-heart::before {
|
|
||||||
box-shadow: 9px 6px 0 #f11416,12px 6px 0 #f11416,15px 6px 0 #f11416,33px 6px 0 #f11416,36px 6px 0 #f11416,39px 6px 0 #f11416,6px 9px 0 #f11416,9px 9px 0 #f11416,12px 9px 0 #f11416,15px 9px 0 #f11416,18px 9px 0 #f11416,30px 9px 0 #f11416,33px 9px 0 #f11416,36px 9px 0 #f11416,39px 9px 0 #f11416,42px 9px 0 #f11416,3px 12px 0 #f11416,6px 12px 0 #f11416,15px 12px 0 #f11416,18px 12px 0 #f11416,21px 12px 0 #f11416,27px 12px 0 #f11416,30px 12px 0 #f11416,33px 12px 0 #f11416,36px 12px 0 #f11416,39px 12px 0 #f11416,42px 12px 0 #f11416,45px 12px 0 #f11416,3px 15px 0 #f11416,12px 15px 0 #f11416,15px 15px 0 #f11416,18px 15px 0 #f11416,21px 15px 0 #f11416,24px 15px 0 #f11416,27px 15px 0 #f11416,30px 15px 0 #f11416,33px 15px 0 #f11416,36px 15px 0 #f11416,39px 15px 0 #f11416,42px 15px 0 #f11416,45px 15px 0 #f11416,3px 18px 0 #f11416,9px 18px 0 #f11416,12px 18px 0 #f11416,15px 18px 0 #f11416,18px 18px 0 #f11416,21px 18px 0 #f11416,24px 18px 0 #f11416,27px 18px 0 #f11416,30px 18px 0 #f11416,33px 18px 0 #f11416,36px 18px 0 #f11416,39px 18px 0 #f11416,42px 18px 0 #f11416,45px 18px 0 #f11416,3px 21px 0 #f11416,6px 21px 0 #f11416,9px 21px 0 #f11416,12px 21px 0 #f11416,15px 21px 0 #f11416,18px 21px 0 #f11416,21px 21px 0 #f11416,24px 21px 0 #f11416,27px 21px 0 #f11416,30px 21px 0 #f11416,33px 21px 0 #f11416,36px 21px 0 #f11416,39px 21px 0 #f11416,42px 21px 0 #f11416,45px 21px 0 #f11416,3px 24px 0 #f11416,6px 24px 0 #f11416,9px 24px 0 #f11416,12px 24px 0 #f11416,15px 24px 0 #f11416,18px 24px 0 #f11416,21px 24px 0 #f11416,24px 24px 0 #f11416,27px 24px 0 #f11416,30px 24px 0 #f11416,33px 24px 0 #f11416,36px 24px 0 #f11416,39px 24px 0 #f11416,42px 24px 0 #f11416,45px 24px 0 #f11416,6px 27px 0 #f11416,9px 27px 0 #f11416,12px 27px 0 #f11416,15px 27px 0 #f11416,18px 27px 0 #f11416,21px 27px 0 #f11416,24px 27px 0 #f11416,27px 27px 0 #f11416,30px 27px 0 #f11416,33px 27px 0 #f11416,36px 27px 0 #f11416,39px 27px 0 #f11416,42px 27px 0 #f11416,9px 30px 0 #f11416,12px 30px 0 #f11416,15px 30px 0 #f11416,18px 30px 0 #f11416,21px 30px 0 #f11416,24px 30px 0 #f11416,27px 30px 0 #f11416,30px 30px 0 #f11416,33px 30px 0 #f11416,36px 30px 0 #f11416,39px 30px 0 #f11416,12px 33px 0 #f11416,15px 33px 0 #f11416,18px 33px 0 #f11416,21px 33px 0 #f11416,24px 33px 0 #f11416,27px 33px 0 #f11416,30px 33px 0 #f11416,33px 33px 0 #f11416,36px 33px 0 #f11416,15px 36px 0 #f11416,18px 36px 0 #f11416,21px 36px 0 #f11416,24px 36px 0 #f11416,27px 36px 0 #f11416,30px 36px 0 #f11416,33px 36px 0 #f11416,18px 39px 0 #f11416,21px 39px 0 #f11416,24px 39px 0 #f11416,27px 39px 0 #f11416,30px 39px 0 #f11416,21px 42px 0 #f11416,24px 42px 0 #f11416,27px 42px 0 #f11416,24px 45px 0 #f11416;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-medium.-star::before {
|
|
||||||
box-shadow: 24px 3px 0 #f7de4e,21px 6px 0 #f7de4e,24px 6px 0 #f7de4e,27px 6px 0 #f7de4e,21px 9px 0 #f7de4e,24px 9px 0 #f7de4e,27px 9px 0 #f7de4e,18px 12px 0 #f7de4e,21px 12px 0 #f7de4e,24px 12px 0 #f7de4e,27px 12px 0 #f7de4e,30px 12px 0 #f7de4e,18px 15px 0 #f7de4e,27px 15px 0 #f7de4e,30px 15px 0 #f7de4e,3px 18px 0 #f7de4e,6px 18px 0 #f7de4e,9px 18px 0 #f7de4e,12px 18px 0 #f7de4e,15px 18px 0 #f7de4e,18px 18px 0 #f7de4e,24px 18px 0 #f7de4e,27px 18px 0 #f7de4e,30px 18px 0 #f7de4e,33px 18px 0 #f7de4e,36px 18px 0 #f7de4e,39px 18px 0 #f7de4e,42px 18px 0 #f7de4e,45px 18px 0 #f7de4e,3px 21px 0 #f7de4e,6px 21px 0 #f7de4e,9px 21px 0 #f7de4e,12px 21px 0 #f7de4e,21px 21px 0 #f7de4e,24px 21px 0 #f7de4e,27px 21px 0 #f7de4e,30px 21px 0 #f7de4e,33px 21px 0 #f7de4e,36px 21px 0 #f7de4e,39px 21px 0 #f7de4e,42px 21px 0 #f7de4e,45px 21px 0 #f7de4e,6px 24px 0 #f7de4e,9px 24px 0 #f7de4e,12px 24px 0 #f7de4e,18px 24px 0 #f7de4e,21px 24px 0 #f7de4e,24px 24px 0 #f7de4e,27px 24px 0 #f7de4e,30px 24px 0 #f7de4e,33px 24px 0 #f7de4e,36px 24px 0 #f7de4e,39px 24px 0 #f7de4e,42px 24px 0 #f7de4e,9px 27px 0 #f7de4e,12px 27px 0 #f7de4e,15px 27px 0 #f7de4e,18px 27px 0 #f7de4e,21px 27px 0 #f7de4e,24px 27px 0 #f7de4e,27px 27px 0 #f7de4e,30px 27px 0 #f7de4e,33px 27px 0 #f7de4e,36px 27px 0 #f7de4e,39px 27px 0 #f7de4e,12px 30px 0 #f7de4e,15px 30px 0 #f7de4e,18px 30px 0 #f7de4e,21px 30px 0 #f7de4e,24px 30px 0 #f7de4e,27px 30px 0 #f7de4e,30px 30px 0 #f7de4e,33px 30px 0 #f7de4e,36px 30px 0 #f7de4e,9px 33px 0 #f7de4e,12px 33px 0 #f7de4e,15px 33px 0 #f7de4e,18px 33px 0 #f7de4e,21px 33px 0 #f7de4e,24px 33px 0 #f7de4e,27px 33px 0 #f7de4e,30px 33px 0 #f7de4e,33px 33px 0 #f7de4e,36px 33px 0 #f7de4e,39px 33px 0 #f7de4e,9px 36px 0 #f7de4e,12px 36px 0 #f7de4e,15px 36px 0 #f7de4e,18px 36px 0 #f7de4e,21px 36px 0 #f7de4e,24px 36px 0 #f7de4e,27px 36px 0 #f7de4e,30px 36px 0 #f7de4e,33px 36px 0 #f7de4e,36px 36px 0 #f7de4e,39px 36px 0 #f7de4e,6px 39px 0 #f7de4e,9px 39px 0 #f7de4e,12px 39px 0 #f7de4e,15px 39px 0 #f7de4e,18px 39px 0 #f7de4e,21px 39px 0 #f7de4e,24px 39px 0 #f7de4e,27px 39px 0 #f7de4e,30px 39px 0 #f7de4e,33px 39px 0 #f7de4e,36px 39px 0 #f7de4e,39px 39px 0 #f7de4e,42px 39px 0 #f7de4e,6px 42px 0 #f7de4e,9px 42px 0 #f7de4e,12px 42px 0 #f7de4e,15px 42px 0 #f7de4e,18px 42px 0 #f7de4e,21px 42px 0 #f7de4e,27px 42px 0 #f7de4e,30px 42px 0 #f7de4e,33px 42px 0 #f7de4e,36px 42px 0 #f7de4e,39px 42px 0 #f7de4e,42px 42px 0 #f7de4e,3px 45px 0 #f7de4e,6px 45px 0 #f7de4e,9px 45px 0 #f7de4e,12px 45px 0 #f7de4e,15px 45px 0 #f7de4e,33px 45px 0 #f7de4e,36px 45px 0 #f7de4e,39px 45px 0 #f7de4e,42px 45px 0 #f7de4e,45px 45px 0 #f7de4e,3px 48px 0 #f7de4e,6px 48px 0 #f7de4e,9px 48px 0 #f7de4e,39px 48px 0 #f7de4e,42px 48px 0 #f7de4e,45px 48px 0 #f7de4e;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-medium.-like::before {
|
|
||||||
box-shadow: 24px 3px 0 #1e77be,27px 3px 0 #1e77be,24px 6px 0 #1e77be,30px 6px 0 #1e77be,24px 9px 0 #1e77be,30px 9px 0 #1e77be,21px 12px 0 #1e77be,30px 12px 0 #1e77be,21px 15px 0 #1e77be,27px 15px 0 #1e77be,18px 18px 0 #1e77be,27px 18px 0 #1e77be,18px 21px 0 #1e77be,27px 21px 0 #1e77be,3px 24px 0 #1e77be,6px 24px 0 #1e77be,9px 24px 0 #1e77be,15px 24px 0 #1e77be,30px 24px 0 #1e77be,33px 24px 0 #1e77be,36px 24px 0 #1e77be,39px 24px 0 #1e77be,42px 24px 0 #1e77be,45px 24px 0 #1e77be,3px 27px 0 #1e77be,6px 27px 0 #1e77be,9px 27px 0 #1e77be,15px 27px 0 #1e77be,48px 27px 0 #1e77be,3px 30px 0 #1e77be,6px 30px 0 #1e77be,9px 30px 0 #1e77be,15px 30px 0 #1e77be,48px 30px 0 #1e77be,3px 33px 0 #1e77be,6px 33px 0 #1e77be,9px 33px 0 #1e77be,15px 33px 0 #1e77be,45px 33px 0 #1e77be,3px 36px 0 #1e77be,6px 36px 0 #1e77be,9px 36px 0 #1e77be,15px 36px 0 #1e77be,48px 36px 0 #1e77be,3px 39px 0 #1e77be,6px 39px 0 #1e77be,9px 39px 0 #1e77be,15px 39px 0 #1e77be,48px 39px 0 #1e77be,3px 42px 0 #1e77be,6px 42px 0 #1e77be,9px 42px 0 #1e77be,15px 42px 0 #1e77be,45px 42px 0 #1e77be,3px 45px 0 #1e77be,6px 45px 0 #1e77be,9px 45px 0 #1e77be,15px 45px 0 #1e77be,45px 45px 0 #1e77be,3px 48px 0 #1e77be,6px 48px 0 #1e77be,9px 48px 0 #1e77be,15px 48px 0 #1e77be,18px 48px 0 #1e77be,21px 48px 0 #1e77be,24px 48px 0 #1e77be,27px 48px 0 #1e77be,30px 48px 0 #1e77be,33px 48px 0 #1e77be,36px 48px 0 #1e77be,39px 48px 0 #1e77be,42px 48px 0 #1e77be;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-large {
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-large::before {
|
|
||||||
top: -4px;
|
|
||||||
left: -4px;
|
|
||||||
width: 4px;
|
|
||||||
height: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-large.-twitter::before {
|
|
||||||
box-shadow: 8px 4px 0 #1c9ceb,12px 4px 0 #1c9ceb,16px 4px 0 #1c9ceb,20px 4px 0 #1c9ceb,24px 4px 0 #1c9ceb,28px 4px 0 #1c9ceb,32px 4px 0 #1c9ceb,36px 4px 0 #1c9ceb,40px 4px 0 #1c9ceb,44px 4px 0 #1c9ceb,48px 4px 0 #1c9ceb,52px 4px 0 #1c9ceb,56px 4px 0 #1c9ceb,60px 4px 0 #1c9ceb,4px 8px 0 #1c9ceb,8px 8px 0 #1c9ceb,12px 8px 0 #1c9ceb,16px 8px 0 #1c9ceb,20px 8px 0 #1c9ceb,24px 8px 0 #1c9ceb,28px 8px 0 #1c9ceb,32px 8px 0 #1c9ceb,36px 8px 0 #1c9ceb,40px 8px 0 #1c9ceb,44px 8px 0 #1c9ceb,48px 8px 0 #1c9ceb,52px 8px 0 #1c9ceb,56px 8px 0 #1c9ceb,60px 8px 0 #1c9ceb,64px 8px 0 #1c9ceb,4px 12px 0 #1c9ceb,12px 12px 0 #1c9ceb,16px 12px 0 #1c9ceb,20px 12px 0 #1c9ceb,24px 12px 0 #1c9ceb,28px 12px 0 #1c9ceb,32px 12px 0 #1c9ceb,36px 12px 0 #1c9ceb,52px 12px 0 #1c9ceb,56px 12px 0 #1c9ceb,60px 12px 0 #1c9ceb,64px 12px 0 #1c9ceb,4px 16px 0 #1c9ceb,20px 16px 0 #1c9ceb,24px 16px 0 #1c9ceb,28px 16px 0 #1c9ceb,32px 16px 0 #1c9ceb,56px 16px 0 #1c9ceb,60px 16px 0 #1c9ceb,64px 16px 0 #1c9ceb,4px 20px 0 #1c9ceb,28px 20px 0 #1c9ceb,64px 20px 0 #1c9ceb,4px 24px 0 #1c9ceb,8px 24px 0 #1c9ceb,60px 24px 0 #1c9ceb,64px 24px 0 #1c9ceb,4px 28px 0 #1c9ceb,8px 28px 0 #1c9ceb,60px 28px 0 #1c9ceb,64px 28px 0 #1c9ceb,4px 32px 0 #1c9ceb,8px 32px 0 #1c9ceb,12px 32px 0 #1c9ceb,56px 32px 0 #1c9ceb,60px 32px 0 #1c9ceb,64px 32px 0 #1c9ceb,4px 36px 0 #1c9ceb,8px 36px 0 #1c9ceb,12px 36px 0 #1c9ceb,52px 36px 0 #1c9ceb,56px 36px 0 #1c9ceb,60px 36px 0 #1c9ceb,64px 36px 0 #1c9ceb,4px 40px 0 #1c9ceb,8px 40px 0 #1c9ceb,12px 40px 0 #1c9ceb,16px 40px 0 #1c9ceb,52px 40px 0 #1c9ceb,56px 40px 0 #1c9ceb,60px 40px 0 #1c9ceb,64px 40px 0 #1c9ceb,4px 44px 0 #1c9ceb,8px 44px 0 #1c9ceb,12px 44px 0 #1c9ceb,16px 44px 0 #1c9ceb,20px 44px 0 #1c9ceb,52px 44px 0 #1c9ceb,56px 44px 0 #1c9ceb,60px 44px 0 #1c9ceb,64px 44px 0 #1c9ceb,4px 48px 0 #1c9ceb,8px 48px 0 #1c9ceb,12px 48px 0 #1c9ceb,16px 48px 0 #1c9ceb,48px 48px 0 #1c9ceb,52px 48px 0 #1c9ceb,56px 48px 0 #1c9ceb,60px 48px 0 #1c9ceb,64px 48px 0 #1c9ceb,4px 52px 0 #1c9ceb,8px 52px 0 #1c9ceb,40px 52px 0 #1c9ceb,44px 52px 0 #1c9ceb,48px 52px 0 #1c9ceb,52px 52px 0 #1c9ceb,56px 52px 0 #1c9ceb,60px 52px 0 #1c9ceb,64px 52px 0 #1c9ceb,4px 56px 0 #1c9ceb,8px 56px 0 #1c9ceb,12px 56px 0 #1c9ceb,28px 56px 0 #1c9ceb,32px 56px 0 #1c9ceb,36px 56px 0 #1c9ceb,40px 56px 0 #1c9ceb,44px 56px 0 #1c9ceb,48px 56px 0 #1c9ceb,52px 56px 0 #1c9ceb,56px 56px 0 #1c9ceb,60px 56px 0 #1c9ceb,64px 56px 0 #1c9ceb,4px 60px 0 #1c9ceb,8px 60px 0 #1c9ceb,12px 60px 0 #1c9ceb,16px 60px 0 #1c9ceb,20px 60px 0 #1c9ceb,24px 60px 0 #1c9ceb,28px 60px 0 #1c9ceb,32px 60px 0 #1c9ceb,36px 60px 0 #1c9ceb,40px 60px 0 #1c9ceb,44px 60px 0 #1c9ceb,48px 60px 0 #1c9ceb,52px 60px 0 #1c9ceb,56px 60px 0 #1c9ceb,60px 60px 0 #1c9ceb,64px 60px 0 #1c9ceb,8px 64px 0 #1c9ceb,12px 64px 0 #1c9ceb,16px 64px 0 #1c9ceb,20px 64px 0 #1c9ceb,24px 64px 0 #1c9ceb,28px 64px 0 #1c9ceb,32px 64px 0 #1c9ceb,36px 64px 0 #1c9ceb,40px 64px 0 #1c9ceb,44px 64px 0 #1c9ceb,48px 64px 0 #1c9ceb,52px 64px 0 #1c9ceb,56px 64px 0 #1c9ceb,60px 64px 0 #1c9ceb;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-large.-facebook::before {
|
|
||||||
box-shadow: 8px 4px 0 #4566ae,12px 4px 0 #4566ae,16px 4px 0 #4566ae,20px 4px 0 #4566ae,24px 4px 0 #4566ae,28px 4px 0 #4566ae,32px 4px 0 #4566ae,36px 4px 0 #4566ae,40px 4px 0 #4566ae,44px 4px 0 #4566ae,48px 4px 0 #4566ae,52px 4px 0 #4566ae,56px 4px 0 #4566ae,60px 4px 0 #4566ae,4px 8px 0 #4566ae,8px 8px 0 #4566ae,12px 8px 0 #4566ae,16px 8px 0 #4566ae,20px 8px 0 #4566ae,24px 8px 0 #4566ae,28px 8px 0 #4566ae,32px 8px 0 #4566ae,36px 8px 0 #4566ae,40px 8px 0 #4566ae,60px 8px 0 #4566ae,64px 8px 0 #4566ae,4px 12px 0 #4566ae,8px 12px 0 #4566ae,12px 12px 0 #4566ae,16px 12px 0 #4566ae,20px 12px 0 #4566ae,24px 12px 0 #4566ae,28px 12px 0 #4566ae,32px 12px 0 #4566ae,36px 12px 0 #4566ae,60px 12px 0 #4566ae,64px 12px 0 #4566ae,4px 16px 0 #4566ae,8px 16px 0 #4566ae,12px 16px 0 #4566ae,16px 16px 0 #4566ae,20px 16px 0 #4566ae,24px 16px 0 #4566ae,28px 16px 0 #4566ae,32px 16px 0 #4566ae,60px 16px 0 #4566ae,64px 16px 0 #4566ae,4px 20px 0 #4566ae,8px 20px 0 #4566ae,12px 20px 0 #4566ae,16px 20px 0 #4566ae,20px 20px 0 #4566ae,24px 20px 0 #4566ae,28px 20px 0 #4566ae,32px 20px 0 #4566ae,48px 20px 0 #4566ae,52px 20px 0 #4566ae,56px 20px 0 #4566ae,60px 20px 0 #4566ae,64px 20px 0 #4566ae,4px 24px 0 #4566ae,8px 24px 0 #4566ae,12px 24px 0 #4566ae,16px 24px 0 #4566ae,20px 24px 0 #4566ae,24px 24px 0 #4566ae,28px 24px 0 #4566ae,32px 24px 0 #4566ae,48px 24px 0 #4566ae,52px 24px 0 #4566ae,56px 24px 0 #4566ae,60px 24px 0 #4566ae,64px 24px 0 #4566ae,4px 28px 0 #4566ae,8px 28px 0 #4566ae,12px 28px 0 #4566ae,16px 28px 0 #4566ae,20px 28px 0 #4566ae,24px 28px 0 #4566ae,28px 28px 0 #4566ae,32px 28px 0 #4566ae,48px 28px 0 #4566ae,52px 28px 0 #4566ae,56px 28px 0 #4566ae,60px 28px 0 #4566ae,64px 28px 0 #4566ae,4px 32px 0 #4566ae,8px 32px 0 #4566ae,12px 32px 0 #4566ae,16px 32px 0 #4566ae,20px 32px 0 #4566ae,60px 32px 0 #4566ae,64px 32px 0 #4566ae,4px 36px 0 #4566ae,8px 36px 0 #4566ae,12px 36px 0 #4566ae,16px 36px 0 #4566ae,20px 36px 0 #4566ae,60px 36px 0 #4566ae,64px 36px 0 #4566ae,4px 40px 0 #4566ae,8px 40px 0 #4566ae,12px 40px 0 #4566ae,16px 40px 0 #4566ae,20px 40px 0 #4566ae,60px 40px 0 #4566ae,64px 40px 0 #4566ae,4px 44px 0 #4566ae,8px 44px 0 #4566ae,12px 44px 0 #4566ae,16px 44px 0 #4566ae,20px 44px 0 #4566ae,24px 44px 0 #4566ae,28px 44px 0 #4566ae,32px 44px 0 #4566ae,48px 44px 0 #4566ae,52px 44px 0 #4566ae,56px 44px 0 #4566ae,60px 44px 0 #4566ae,64px 44px 0 #4566ae,4px 48px 0 #4566ae,8px 48px 0 #4566ae,12px 48px 0 #4566ae,16px 48px 0 #4566ae,20px 48px 0 #4566ae,24px 48px 0 #4566ae,28px 48px 0 #4566ae,32px 48px 0 #4566ae,48px 48px 0 #4566ae,52px 48px 0 #4566ae,56px 48px 0 #4566ae,60px 48px 0 #4566ae,64px 48px 0 #4566ae,4px 52px 0 #4566ae,8px 52px 0 #4566ae,12px 52px 0 #4566ae,16px 52px 0 #4566ae,20px 52px 0 #4566ae,24px 52px 0 #4566ae,28px 52px 0 #4566ae,32px 52px 0 #4566ae,48px 52px 0 #4566ae,52px 52px 0 #4566ae,56px 52px 0 #4566ae,60px 52px 0 #4566ae,64px 52px 0 #4566ae,4px 56px 0 #4566ae,8px 56px 0 #4566ae,12px 56px 0 #4566ae,16px 56px 0 #4566ae,20px 56px 0 #4566ae,24px 56px 0 #4566ae,28px 56px 0 #4566ae,32px 56px 0 #4566ae,48px 56px 0 #4566ae,52px 56px 0 #4566ae,56px 56px 0 #4566ae,60px 56px 0 #4566ae,64px 56px 0 #4566ae,4px 60px 0 #4566ae,8px 60px 0 #4566ae,12px 60px 0 #4566ae,16px 60px 0 #4566ae,20px 60px 0 #4566ae,24px 60px 0 #4566ae,28px 60px 0 #4566ae,32px 60px 0 #4566ae,48px 60px 0 #4566ae,52px 60px 0 #4566ae,56px 60px 0 #4566ae,60px 60px 0 #4566ae,64px 60px 0 #4566ae,8px 64px 0 #4566ae,12px 64px 0 #4566ae,16px 64px 0 #4566ae,20px 64px 0 #4566ae,24px 64px 0 #4566ae,28px 64px 0 #4566ae,32px 64px 0 #4566ae,48px 64px 0 #4566ae,52px 64px 0 #4566ae,56px 64px 0 #4566ae,60px 64px 0 #4566ae;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-large.-github::before {
|
|
||||||
box-shadow: 8px 4px 0 #333333,12px 4px 0 #333333,16px 4px 0 #333333,20px 4px 0 #333333,24px 4px 0 #333333,28px 4px 0 #333333,32px 4px 0 #333333,36px 4px 0 #333333,40px 4px 0 #333333,44px 4px 0 #333333,48px 4px 0 #333333,52px 4px 0 #333333,56px 4px 0 #333333,60px 4px 0 #333333,4px 8px 0 #333333,8px 8px 0 #333333,12px 8px 0 #333333,16px 8px 0 #333333,24px 8px 0 #333333,28px 8px 0 #333333,32px 8px 0 #333333,36px 8px 0 #333333,40px 8px 0 #333333,44px 8px 0 #333333,48px 8px 0 #333333,52px 8px 0 #333333,60px 8px 0 #333333,64px 8px 0 #333333,4px 12px 0 #333333,8px 12px 0 #333333,12px 12px 0 #333333,16px 12px 0 #333333,28px 12px 0 #333333,32px 12px 0 #333333,36px 12px 0 #333333,40px 12px 0 #333333,44px 12px 0 #333333,48px 12px 0 #333333,60px 12px 0 #333333,64px 12px 0 #333333,4px 16px 0 #333333,8px 16px 0 #333333,12px 16px 0 #333333,16px 16px 0 #333333,60px 16px 0 #333333,64px 16px 0 #333333,4px 20px 0 #333333,8px 20px 0 #333333,12px 20px 0 #333333,64px 20px 0 #333333,4px 24px 0 #333333,8px 24px 0 #333333,12px 24px 0 #333333,64px 24px 0 #333333,4px 28px 0 #333333,8px 28px 0 #333333,12px 28px 0 #333333,64px 28px 0 #333333,4px 32px 0 #333333,8px 32px 0 #333333,12px 32px 0 #333333,64px 32px 0 #333333,4px 36px 0 #333333,8px 36px 0 #333333,12px 36px 0 #333333,16px 36px 0 #333333,60px 36px 0 #333333,64px 36px 0 #333333,4px 40px 0 #333333,8px 40px 0 #333333,12px 40px 0 #333333,16px 40px 0 #333333,20px 40px 0 #333333,56px 40px 0 #333333,60px 40px 0 #333333,64px 40px 0 #333333,4px 44px 0 #333333,16px 44px 0 #333333,20px 44px 0 #333333,24px 44px 0 #333333,28px 44px 0 #333333,48px 44px 0 #333333,52px 44px 0 #333333,56px 44px 0 #333333,60px 44px 0 #333333,64px 44px 0 #333333,4px 48px 0 #333333,8px 48px 0 #333333,12px 48px 0 #333333,20px 48px 0 #333333,24px 48px 0 #333333,52px 48px 0 #333333,56px 48px 0 #333333,60px 48px 0 #333333,64px 48px 0 #333333,4px 52px 0 #333333,8px 52px 0 #333333,12px 52px 0 #333333,16px 52px 0 #333333,52px 52px 0 #333333,56px 52px 0 #333333,60px 52px 0 #333333,64px 52px 0 #333333,4px 56px 0 #333333,8px 56px 0 #333333,12px 56px 0 #333333,16px 56px 0 #333333,20px 56px 0 #333333,24px 56px 0 #333333,52px 56px 0 #333333,56px 56px 0 #333333,60px 56px 0 #333333,64px 56px 0 #333333,4px 60px 0 #333333,8px 60px 0 #333333,12px 60px 0 #333333,16px 60px 0 #333333,20px 60px 0 #333333,24px 60px 0 #333333,52px 60px 0 #333333,56px 60px 0 #333333,60px 60px 0 #333333,64px 60px 0 #333333,8px 64px 0 #333333,12px 64px 0 #333333,16px 64px 0 #333333,20px 64px 0 #333333,24px 64px 0 #333333,28px 64px 0 #333333,32px 64px 0 #333333,36px 64px 0 #333333,40px 64px 0 #333333,44px 64px 0 #333333,48px 64px 0 #333333,52px 64px 0 #333333,56px 64px 0 #333333,60px 64px 0 #333333;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-large.-youtube::before {
|
|
||||||
box-shadow: 8px 4px 0 #ff0100,12px 4px 0 #ff0100,16px 4px 0 #ff0100,20px 4px 0 #ff0100,24px 4px 0 #ff0100,28px 4px 0 #ff0100,32px 4px 0 #ff0100,36px 4px 0 #ff0100,40px 4px 0 #ff0100,44px 4px 0 #ff0100,48px 4px 0 #ff0100,52px 4px 0 #ff0100,56px 4px 0 #ff0100,60px 4px 0 #ff0100,4px 8px 0 #ff0100,8px 8px 0 #ff0100,12px 8px 0 #ff0100,16px 8px 0 #ff0100,20px 8px 0 #ff0100,24px 8px 0 #ff0100,28px 8px 0 #ff0100,32px 8px 0 #ff0100,36px 8px 0 #ff0100,40px 8px 0 #ff0100,44px 8px 0 #ff0100,48px 8px 0 #ff0100,52px 8px 0 #ff0100,56px 8px 0 #ff0100,60px 8px 0 #ff0100,64px 8px 0 #ff0100,4px 12px 0 #ff0100,8px 12px 0 #ff0100,12px 12px 0 #ff0100,16px 12px 0 #ff0100,20px 12px 0 #ff0100,24px 12px 0 #ff0100,28px 12px 0 #ff0100,32px 12px 0 #ff0100,36px 12px 0 #ff0100,40px 12px 0 #ff0100,44px 12px 0 #ff0100,48px 12px 0 #ff0100,52px 12px 0 #ff0100,56px 12px 0 #ff0100,60px 12px 0 #ff0100,64px 12px 0 #ff0100,4px 16px 0 #ff0100,8px 16px 0 #ff0100,12px 16px 0 #ff0100,16px 16px 0 #ff0100,20px 16px 0 #ff0100,24px 16px 0 #ff0100,28px 16px 0 #ff0100,32px 16px 0 #ff0100,36px 16px 0 #ff0100,40px 16px 0 #ff0100,44px 16px 0 #ff0100,48px 16px 0 #ff0100,52px 16px 0 #ff0100,56px 16px 0 #ff0100,60px 16px 0 #ff0100,64px 16px 0 #ff0100,4px 20px 0 #ff0100,8px 20px 0 #ff0100,12px 20px 0 #ff0100,16px 20px 0 #ff0100,32px 20px 0 #ff0100,36px 20px 0 #ff0100,40px 20px 0 #ff0100,44px 20px 0 #ff0100,48px 20px 0 #ff0100,52px 20px 0 #ff0100,56px 20px 0 #ff0100,60px 20px 0 #ff0100,64px 20px 0 #ff0100,4px 24px 0 #ff0100,8px 24px 0 #ff0100,12px 24px 0 #ff0100,16px 24px 0 #ff0100,40px 24px 0 #ff0100,44px 24px 0 #ff0100,48px 24px 0 #ff0100,52px 24px 0 #ff0100,56px 24px 0 #ff0100,60px 24px 0 #ff0100,64px 24px 0 #ff0100,4px 28px 0 #ff0100,8px 28px 0 #ff0100,12px 28px 0 #ff0100,16px 28px 0 #ff0100,52px 28px 0 #ff0100,56px 28px 0 #ff0100,60px 28px 0 #ff0100,64px 28px 0 #ff0100,4px 32px 0 #ff0100,8px 32px 0 #ff0100,12px 32px 0 #ff0100,16px 32px 0 #ff0100,60px 32px 0 #ff0100,64px 32px 0 #ff0100,4px 36px 0 #ff0100,8px 36px 0 #ff0100,12px 36px 0 #ff0100,16px 36px 0 #ff0100,56px 36px 0 #ff0100,60px 36px 0 #ff0100,64px 36px 0 #ff0100,4px 40px 0 #ff0100,8px 40px 0 #ff0100,12px 40px 0 #ff0100,16px 40px 0 #ff0100,52px 40px 0 #ff0100,56px 40px 0 #ff0100,60px 40px 0 #ff0100,64px 40px 0 #ff0100,4px 44px 0 #ff0100,8px 44px 0 #ff0100,12px 44px 0 #ff0100,16px 44px 0 #ff0100,40px 44px 0 #ff0100,44px 44px 0 #ff0100,48px 44px 0 #ff0100,52px 44px 0 #ff0100,56px 44px 0 #ff0100,60px 44px 0 #ff0100,64px 44px 0 #ff0100,4px 48px 0 #ff0100,8px 48px 0 #ff0100,12px 48px 0 #ff0100,16px 48px 0 #ff0100,32px 48px 0 #ff0100,36px 48px 0 #ff0100,40px 48px 0 #ff0100,44px 48px 0 #ff0100,48px 48px 0 #ff0100,52px 48px 0 #ff0100,56px 48px 0 #ff0100,60px 48px 0 #ff0100,64px 48px 0 #ff0100,4px 52px 0 #ff0100,8px 52px 0 #ff0100,12px 52px 0 #ff0100,16px 52px 0 #ff0100,20px 52px 0 #ff0100,24px 52px 0 #ff0100,28px 52px 0 #ff0100,32px 52px 0 #ff0100,36px 52px 0 #ff0100,40px 52px 0 #ff0100,44px 52px 0 #ff0100,48px 52px 0 #ff0100,52px 52px 0 #ff0100,56px 52px 0 #ff0100,60px 52px 0 #ff0100,64px 52px 0 #ff0100,4px 56px 0 #ff0100,8px 56px 0 #ff0100,12px 56px 0 #ff0100,16px 56px 0 #ff0100,20px 56px 0 #ff0100,24px 56px 0 #ff0100,28px 56px 0 #ff0100,32px 56px 0 #ff0100,36px 56px 0 #ff0100,40px 56px 0 #ff0100,44px 56px 0 #ff0100,48px 56px 0 #ff0100,52px 56px 0 #ff0100,56px 56px 0 #ff0100,60px 56px 0 #ff0100,64px 56px 0 #ff0100,4px 60px 0 #ff0100,8px 60px 0 #ff0100,12px 60px 0 #ff0100,16px 60px 0 #ff0100,20px 60px 0 #ff0100,24px 60px 0 #ff0100,28px 60px 0 #ff0100,32px 60px 0 #ff0100,36px 60px 0 #ff0100,40px 60px 0 #ff0100,44px 60px 0 #ff0100,48px 60px 0 #ff0100,52px 60px 0 #ff0100,56px 60px 0 #ff0100,60px 60px 0 #ff0100,64px 60px 0 #ff0100,8px 64px 0 #ff0100,12px 64px 0 #ff0100,16px 64px 0 #ff0100,20px 64px 0 #ff0100,24px 64px 0 #ff0100,28px 64px 0 #ff0100,32px 64px 0 #ff0100,36px 64px 0 #ff0100,40px 64px 0 #ff0100,44px 64px 0 #ff0100,48px 64px 0 #ff0100,52px 64px 0 #ff0100,56px 64px 0 #ff0100,60px 64px 0 #ff0100;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-large.-heart::before {
|
|
||||||
box-shadow: 12px 8px 0 #f11416,16px 8px 0 #f11416,20px 8px 0 #f11416,44px 8px 0 #f11416,48px 8px 0 #f11416,52px 8px 0 #f11416,8px 12px 0 #f11416,12px 12px 0 #f11416,16px 12px 0 #f11416,20px 12px 0 #f11416,24px 12px 0 #f11416,40px 12px 0 #f11416,44px 12px 0 #f11416,48px 12px 0 #f11416,52px 12px 0 #f11416,56px 12px 0 #f11416,4px 16px 0 #f11416,8px 16px 0 #f11416,20px 16px 0 #f11416,24px 16px 0 #f11416,28px 16px 0 #f11416,36px 16px 0 #f11416,40px 16px 0 #f11416,44px 16px 0 #f11416,48px 16px 0 #f11416,52px 16px 0 #f11416,56px 16px 0 #f11416,60px 16px 0 #f11416,4px 20px 0 #f11416,16px 20px 0 #f11416,20px 20px 0 #f11416,24px 20px 0 #f11416,28px 20px 0 #f11416,32px 20px 0 #f11416,36px 20px 0 #f11416,40px 20px 0 #f11416,44px 20px 0 #f11416,48px 20px 0 #f11416,52px 20px 0 #f11416,56px 20px 0 #f11416,60px 20px 0 #f11416,4px 24px 0 #f11416,12px 24px 0 #f11416,16px 24px 0 #f11416,20px 24px 0 #f11416,24px 24px 0 #f11416,28px 24px 0 #f11416,32px 24px 0 #f11416,36px 24px 0 #f11416,40px 24px 0 #f11416,44px 24px 0 #f11416,48px 24px 0 #f11416,52px 24px 0 #f11416,56px 24px 0 #f11416,60px 24px 0 #f11416,4px 28px 0 #f11416,8px 28px 0 #f11416,12px 28px 0 #f11416,16px 28px 0 #f11416,20px 28px 0 #f11416,24px 28px 0 #f11416,28px 28px 0 #f11416,32px 28px 0 #f11416,36px 28px 0 #f11416,40px 28px 0 #f11416,44px 28px 0 #f11416,48px 28px 0 #f11416,52px 28px 0 #f11416,56px 28px 0 #f11416,60px 28px 0 #f11416,4px 32px 0 #f11416,8px 32px 0 #f11416,12px 32px 0 #f11416,16px 32px 0 #f11416,20px 32px 0 #f11416,24px 32px 0 #f11416,28px 32px 0 #f11416,32px 32px 0 #f11416,36px 32px 0 #f11416,40px 32px 0 #f11416,44px 32px 0 #f11416,48px 32px 0 #f11416,52px 32px 0 #f11416,56px 32px 0 #f11416,60px 32px 0 #f11416,8px 36px 0 #f11416,12px 36px 0 #f11416,16px 36px 0 #f11416,20px 36px 0 #f11416,24px 36px 0 #f11416,28px 36px 0 #f11416,32px 36px 0 #f11416,36px 36px 0 #f11416,40px 36px 0 #f11416,44px 36px 0 #f11416,48px 36px 0 #f11416,52px 36px 0 #f11416,56px 36px 0 #f11416,12px 40px 0 #f11416,16px 40px 0 #f11416,20px 40px 0 #f11416,24px 40px 0 #f11416,28px 40px 0 #f11416,32px 40px 0 #f11416,36px 40px 0 #f11416,40px 40px 0 #f11416,44px 40px 0 #f11416,48px 40px 0 #f11416,52px 40px 0 #f11416,16px 44px 0 #f11416,20px 44px 0 #f11416,24px 44px 0 #f11416,28px 44px 0 #f11416,32px 44px 0 #f11416,36px 44px 0 #f11416,40px 44px 0 #f11416,44px 44px 0 #f11416,48px 44px 0 #f11416,20px 48px 0 #f11416,24px 48px 0 #f11416,28px 48px 0 #f11416,32px 48px 0 #f11416,36px 48px 0 #f11416,40px 48px 0 #f11416,44px 48px 0 #f11416,24px 52px 0 #f11416,28px 52px 0 #f11416,32px 52px 0 #f11416,36px 52px 0 #f11416,40px 52px 0 #f11416,28px 56px 0 #f11416,32px 56px 0 #f11416,36px 56px 0 #f11416,32px 60px 0 #f11416;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-large.-star::before {
|
|
||||||
box-shadow: 32px 4px 0 #f7de4e,28px 8px 0 #f7de4e,32px 8px 0 #f7de4e,36px 8px 0 #f7de4e,28px 12px 0 #f7de4e,32px 12px 0 #f7de4e,36px 12px 0 #f7de4e,24px 16px 0 #f7de4e,28px 16px 0 #f7de4e,32px 16px 0 #f7de4e,36px 16px 0 #f7de4e,40px 16px 0 #f7de4e,24px 20px 0 #f7de4e,36px 20px 0 #f7de4e,40px 20px 0 #f7de4e,4px 24px 0 #f7de4e,8px 24px 0 #f7de4e,12px 24px 0 #f7de4e,16px 24px 0 #f7de4e,20px 24px 0 #f7de4e,24px 24px 0 #f7de4e,32px 24px 0 #f7de4e,36px 24px 0 #f7de4e,40px 24px 0 #f7de4e,44px 24px 0 #f7de4e,48px 24px 0 #f7de4e,52px 24px 0 #f7de4e,56px 24px 0 #f7de4e,60px 24px 0 #f7de4e,4px 28px 0 #f7de4e,8px 28px 0 #f7de4e,12px 28px 0 #f7de4e,16px 28px 0 #f7de4e,28px 28px 0 #f7de4e,32px 28px 0 #f7de4e,36px 28px 0 #f7de4e,40px 28px 0 #f7de4e,44px 28px 0 #f7de4e,48px 28px 0 #f7de4e,52px 28px 0 #f7de4e,56px 28px 0 #f7de4e,60px 28px 0 #f7de4e,8px 32px 0 #f7de4e,12px 32px 0 #f7de4e,16px 32px 0 #f7de4e,24px 32px 0 #f7de4e,28px 32px 0 #f7de4e,32px 32px 0 #f7de4e,36px 32px 0 #f7de4e,40px 32px 0 #f7de4e,44px 32px 0 #f7de4e,48px 32px 0 #f7de4e,52px 32px 0 #f7de4e,56px 32px 0 #f7de4e,12px 36px 0 #f7de4e,16px 36px 0 #f7de4e,20px 36px 0 #f7de4e,24px 36px 0 #f7de4e,28px 36px 0 #f7de4e,32px 36px 0 #f7de4e,36px 36px 0 #f7de4e,40px 36px 0 #f7de4e,44px 36px 0 #f7de4e,48px 36px 0 #f7de4e,52px 36px 0 #f7de4e,16px 40px 0 #f7de4e,20px 40px 0 #f7de4e,24px 40px 0 #f7de4e,28px 40px 0 #f7de4e,32px 40px 0 #f7de4e,36px 40px 0 #f7de4e,40px 40px 0 #f7de4e,44px 40px 0 #f7de4e,48px 40px 0 #f7de4e,12px 44px 0 #f7de4e,16px 44px 0 #f7de4e,20px 44px 0 #f7de4e,24px 44px 0 #f7de4e,28px 44px 0 #f7de4e,32px 44px 0 #f7de4e,36px 44px 0 #f7de4e,40px 44px 0 #f7de4e,44px 44px 0 #f7de4e,48px 44px 0 #f7de4e,52px 44px 0 #f7de4e,12px 48px 0 #f7de4e,16px 48px 0 #f7de4e,20px 48px 0 #f7de4e,24px 48px 0 #f7de4e,28px 48px 0 #f7de4e,32px 48px 0 #f7de4e,36px 48px 0 #f7de4e,40px 48px 0 #f7de4e,44px 48px 0 #f7de4e,48px 48px 0 #f7de4e,52px 48px 0 #f7de4e,8px 52px 0 #f7de4e,12px 52px 0 #f7de4e,16px 52px 0 #f7de4e,20px 52px 0 #f7de4e,24px 52px 0 #f7de4e,28px 52px 0 #f7de4e,32px 52px 0 #f7de4e,36px 52px 0 #f7de4e,40px 52px 0 #f7de4e,44px 52px 0 #f7de4e,48px 52px 0 #f7de4e,52px 52px 0 #f7de4e,56px 52px 0 #f7de4e,8px 56px 0 #f7de4e,12px 56px 0 #f7de4e,16px 56px 0 #f7de4e,20px 56px 0 #f7de4e,24px 56px 0 #f7de4e,28px 56px 0 #f7de4e,36px 56px 0 #f7de4e,40px 56px 0 #f7de4e,44px 56px 0 #f7de4e,48px 56px 0 #f7de4e,52px 56px 0 #f7de4e,56px 56px 0 #f7de4e,4px 60px 0 #f7de4e,8px 60px 0 #f7de4e,12px 60px 0 #f7de4e,16px 60px 0 #f7de4e,20px 60px 0 #f7de4e,44px 60px 0 #f7de4e,48px 60px 0 #f7de4e,52px 60px 0 #f7de4e,56px 60px 0 #f7de4e,60px 60px 0 #f7de4e,4px 64px 0 #f7de4e,8px 64px 0 #f7de4e,12px 64px 0 #f7de4e,52px 64px 0 #f7de4e,56px 64px 0 #f7de4e,60px 64px 0 #f7de4e;;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.-large.-like::before {
|
|
||||||
box-shadow: 32px 4px 0 #1e77be,36px 4px 0 #1e77be,32px 8px 0 #1e77be,40px 8px 0 #1e77be,32px 12px 0 #1e77be,40px 12px 0 #1e77be,28px 16px 0 #1e77be,40px 16px 0 #1e77be,28px 20px 0 #1e77be,36px 20px 0 #1e77be,24px 24px 0 #1e77be,36px 24px 0 #1e77be,24px 28px 0 #1e77be,36px 28px 0 #1e77be,4px 32px 0 #1e77be,8px 32px 0 #1e77be,12px 32px 0 #1e77be,20px 32px 0 #1e77be,40px 32px 0 #1e77be,44px 32px 0 #1e77be,48px 32px 0 #1e77be,52px 32px 0 #1e77be,56px 32px 0 #1e77be,60px 32px 0 #1e77be,4px 36px 0 #1e77be,8px 36px 0 #1e77be,12px 36px 0 #1e77be,20px 36px 0 #1e77be,64px 36px 0 #1e77be,4px 40px 0 #1e77be,8px 40px 0 #1e77be,12px 40px 0 #1e77be,20px 40px 0 #1e77be,64px 40px 0 #1e77be,4px 44px 0 #1e77be,8px 44px 0 #1e77be,12px 44px 0 #1e77be,20px 44px 0 #1e77be,60px 44px 0 #1e77be,4px 48px 0 #1e77be,8px 48px 0 #1e77be,12px 48px 0 #1e77be,20px 48px 0 #1e77be,64px 48px 0 #1e77be,4px 52px 0 #1e77be,8px 52px 0 #1e77be,12px 52px 0 #1e77be,20px 52px 0 #1e77be,64px 52px 0 #1e77be,4px 56px 0 #1e77be,8px 56px 0 #1e77be,12px 56px 0 #1e77be,20px 56px 0 #1e77be,60px 56px 0 #1e77be,4px 60px 0 #1e77be,8px 60px 0 #1e77be,12px 60px 0 #1e77be,20px 60px 0 #1e77be,60px 60px 0 #1e77be,4px 64px 0 #1e77be,8px 64px 0 #1e77be,12px 64px 0 #1e77be,20px 64px 0 #1e77be,24px 64px 0 #1e77be,28px 64px 0 #1e77be,32px 64px 0 #1e77be,36px 64px 0 #1e77be,40px 64px 0 #1e77be,44px 64px 0 #1e77be,48px 64px 0 #1e77be,52px 64px 0 #1e77be,56px 64px 0 #1e77be;;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*# sourceMappingURL=nes.css.map */
|
/*# sourceMappingURL=nes.css.map */
|
||||||
File diff suppressed because one or more lines are too long
6
css/nes.min.css
vendored
6
css/nes.min.css
vendored
File diff suppressed because one or more lines are too long
590
index.html
590
index.html
@ -1,296 +1,338 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ja">
|
<html lang="ja">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
|
<meta name="description" content="NES.css is NES-style CSSFramework." />
|
||||||
|
<meta name="keywords" content="html5,css,framework,sass,NES,8bit" />
|
||||||
|
<meta name="author" content="© 2018 B.C.Rikko" />
|
||||||
|
<link
|
||||||
|
rel="shortcut icon"
|
||||||
|
href="https://bcrikko.github.io/NES.css/favicon.ico"
|
||||||
|
/>
|
||||||
|
|
||||||
<head>
|
<title>NES.css - NES-style CSS Framework</title>
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
||||||
<meta name="description" content="NES.css is NES-style CSSFramework.">
|
|
||||||
<meta name="keywords" content="html5,css,framework,sass,NES,8bit" />
|
|
||||||
<meta name="author" content="© 2018 B.C.Rikko">
|
|
||||||
<link rel="shortcut icon" href="https://bcrikko.github.io/NES.css/favicon.ico">
|
|
||||||
|
|
||||||
<title>NES.css - NES-style CSS Framework</title>
|
<link href="./css/nes.css" rel="stylesheet" />
|
||||||
|
<link href="./style.css" rel="stylesheet" />
|
||||||
|
|
||||||
<link href="./css/nes.css" rel="stylesheet">
|
<meta property="og:type" content="website" />
|
||||||
<link href="./style.css" rel="stylesheet">
|
<meta property="og:title" content="NES.css" />
|
||||||
|
<meta property="og:url" content="https://bcrikko.github.io/NES.css/" />
|
||||||
|
<meta property="og:description" content="NES-style CSS" />
|
||||||
|
<meta property="og:image" content="" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:site" content="@bc_rikko" />
|
||||||
|
<meta name="twitter:creator" content="@bc_rikko" />
|
||||||
|
<meta
|
||||||
|
name="twitter:image"
|
||||||
|
content="https://user-images.githubusercontent.com/5305599/45937791-a5db2100-bffe-11e8-8bfd-fc3f534b28aa.gif"
|
||||||
|
/>
|
||||||
|
|
||||||
<meta property="og:type" content="website">
|
<script
|
||||||
<meta property="og:title" content="NES.css">
|
async
|
||||||
<meta property="og:url" content="https://bcrikko.github.io/NES.css/">
|
src="https://www.googletagmanager.com/gtag/js?id=UA-41640153-4"
|
||||||
<meta property="og:description" content="NES-style CSS">
|
></script>
|
||||||
<meta property="og:image" content="">
|
<script>
|
||||||
<meta name="twitter:card" content="summary">
|
window.dataLayer = window.dataLayer || [];
|
||||||
<meta name="twitter:site" content="@bc_rikko">
|
function gtag() {
|
||||||
<meta name="twitter:creator" content="@bc_rikko">
|
dataLayer.push(arguments);
|
||||||
<meta name="twitter:image" content="https://user-images.githubusercontent.com/5305599/45937791-a5db2100-bffe-11e8-8bfd-fc3f534b28aa.gif">
|
}
|
||||||
|
gtag("js", new Date());
|
||||||
|
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41640153-4"></script>
|
gtag("config", "UA-41640153-4");
|
||||||
<script>
|
</script>
|
||||||
window.dataLayer = window.dataLayer || [];
|
</head>
|
||||||
function gtag() { dataLayer.push(arguments); }
|
|
||||||
gtag('js', new Date());
|
|
||||||
|
|
||||||
gtag('config', 'UA-41640153-4');
|
<body>
|
||||||
</script>
|
<header class="header">
|
||||||
|
<h1 class="title -is-1">NES.css</h1>
|
||||||
|
<p class="subtitle -is-6">NES-style CSS Framework.</p>
|
||||||
|
</header>
|
||||||
|
<a
|
||||||
|
class="github-link"
|
||||||
|
href="https://github.com/BcRikko/NES.css"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<p class="balloon">Fork<br />me on<br />GitHub</p>
|
||||||
|
<div class="octocat"></div>
|
||||||
|
</a>
|
||||||
|
|
||||||
</head>
|
<main>
|
||||||
|
|
||||||
<body>
|
|
||||||
<header class="header">
|
|
||||||
<h1 class="title -is-1">NES.css</h1>
|
|
||||||
<p class="subtitle -is-6">NES-style CSS Framework.</p>
|
|
||||||
</header>
|
|
||||||
<a class="github-link" href="https://github.com/BcRikko/NES.css" target="_blank">
|
|
||||||
<p class="balloon">Fork<br>me on<br>GitHub</p>
|
|
||||||
<div class="octocat"></div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="container">
|
|
||||||
<h2 class="title -is-3">Form</h2>
|
|
||||||
<section class="container">
|
<section class="container">
|
||||||
<h3 class="title -is-4">Buttons</h3>
|
<h2 class="title -is-3">Form</h2>
|
||||||
<h4 class="title -is-5">sizes</h4>
|
<section class="container">
|
||||||
<a class="button -small">small</a>
|
<h3 class="title -is-4">Buttons</h3>
|
||||||
<a class="button">normal</a>
|
<h4 class="title -is-5">sizes</h4>
|
||||||
<a class="button -medium">medium</a>
|
<a class="button -small">small</a> <a class="button">normal</a>
|
||||||
<a class="button -large">large</a>
|
<a class="button -medium">medium</a>
|
||||||
|
<a class="button -large">large</a>
|
||||||
|
|
||||||
<h4 class="title -is-5">colors</h4>
|
<h4 class="title -is-5">colors</h4>
|
||||||
<a class="button -primary">primary</a>
|
<a class="button -primary">primary</a>
|
||||||
<a class="button -success">success</a>
|
<a class="button -success">success</a>
|
||||||
<a class="button -warning">warning</a>
|
<a class="button -warning">warning</a>
|
||||||
<a class="button -error">error</a>
|
<a class="button -error">error</a>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="container">
|
|
||||||
<h3 class="title -is-4">Radios</h3>
|
|
||||||
<h4 class="title -is-5">rows</h4>
|
|
||||||
<div class="radios">
|
|
||||||
<label><input class="radio" type="radio" name="radios1" checked>FIGHT</label>
|
|
||||||
<label><input class="radio" type="radio" name="radios1">SPELL</label>
|
|
||||||
<label><input class="radio" type="radio" name="radios1">ITEM</label>
|
|
||||||
<label><input class="radio" type="radio" name="radios1">RUN</label>
|
|
||||||
</div>
|
|
||||||
<h4 class="title -is-5">columns</h4>
|
|
||||||
<div class="radios -columns">
|
|
||||||
<label><input class="radio" type="radio" name="radios2" checked>FIGHT</label>
|
|
||||||
<label><input class="radio" type="radio" name="radios2">SPELL</label>
|
|
||||||
<label><input class="radio" type="radio" name="radios2">ITEM</label>
|
|
||||||
<label><input class="radio" type="radio" name="radios2">RUN</label>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="container">
|
|
||||||
<h3 class="title -is-4">Checkbox</h3>
|
|
||||||
<label><input class="checkbox" type="checkbox" checked>agree</label>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="container">
|
|
||||||
<h3 class="title -is-4">Input</h3>
|
|
||||||
<h4 class="title -is-5">field</h4>
|
|
||||||
<div class="field">
|
|
||||||
<label class="label">field</label>
|
|
||||||
<input class="input" type="text" placeholder="hello nes">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4 class="title -is-5">inline field</h4>
|
|
||||||
<div class="field -inline">
|
|
||||||
<label class="label">inline field</label>
|
|
||||||
<input class="input" type="text" placeholder="hello nes">
|
|
||||||
</div>
|
|
||||||
<div class="field -inline">
|
|
||||||
<label class="label">success</label>
|
|
||||||
<input class="input -success" type="text" placeholder="hello nes" value="good">
|
|
||||||
</div>
|
|
||||||
<div class="field -inline">
|
|
||||||
<label class="label">warning</label>
|
|
||||||
<input class="input -warning" type="text" placeholder="hello nes" value="warn...">
|
|
||||||
</div>
|
|
||||||
<div class="field -inline">
|
|
||||||
<label class="label">error</label>
|
|
||||||
<input class="input -error" type="text" placeholder="hello nes" value="error...">
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="container">
|
|
||||||
<h3 class="title -is-4">Action group</h3>
|
|
||||||
<h4 class="title -is-5">default</h4>
|
|
||||||
<div class="group">
|
|
||||||
<button type="button" class="button -primary">submit</button>
|
|
||||||
<button type="button" class="button">cancel</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4 class="title -is-5">center</h4>
|
|
||||||
<div class="group -center">
|
|
||||||
<button type="button" class="button -primary">submit</button>
|
|
||||||
<button type="button" class="button">cancel</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4 class="title -is-5">right</h4>
|
|
||||||
<div class="group -right">
|
|
||||||
<button type="button" class="button -primary">submit</button>
|
|
||||||
<button type="button" class="button">cancel</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="container">
|
|
||||||
<h2 class="title -is-3">Container</h2>
|
|
||||||
<h3 class="title -is-4">normal</h3>
|
|
||||||
<section class="container">
|
|
||||||
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<h3 class="title -is-4">dark theme</h3>
|
|
||||||
<section class="container _dark">
|
|
||||||
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<h3 class="title -is-4">with title</h3>
|
|
||||||
<section class="container _dark -with-title">
|
|
||||||
<label class="title">Command</label>
|
|
||||||
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<h3 class="title -is-4">align <code>(-center, -right)</code></h3>
|
|
||||||
<section class="container _dark -with-title -center">
|
|
||||||
<label class="title">Command</label>
|
|
||||||
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="container">
|
|
||||||
<h2 class="title -is-3">Description</h2>
|
|
||||||
<h3 class="title -is-4">description list</h3>
|
|
||||||
<dl class="description">
|
|
||||||
<dt>Description list</dt>
|
|
||||||
<dd>Lorem ipsum dolor sit amet</dd>
|
|
||||||
<dt>Consectetur</dt>
|
|
||||||
<dd>adipiscing elit</dd>
|
|
||||||
<dt>sed do eiusmod</dt>
|
|
||||||
<dd>tempor incididunt ut labore et dolore magna aliqua</dd>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
<h3 class="title -is-4">with colon</h3>
|
|
||||||
<dl class="description">
|
|
||||||
<dt class="-colon">Description list</dt>
|
|
||||||
<dd>Lorem ipsum dolor sit amet</dd>
|
|
||||||
<dt class="-colon">Consectetur</dt>
|
|
||||||
<dd>adipiscing elit</dd>
|
|
||||||
<dt class="-colon">sed do eiusmod</dt>
|
|
||||||
<dd>tempor incididunt ut labore et dolore magna aliqua</dd>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
<h3 class="title -is-4">e.g. Dragon Quest-status</h3>
|
|
||||||
<section class="container _dark dq-like-grid">
|
|
||||||
<section class="overview container _dark -with-title -center _dark">
|
|
||||||
<label class=" title">ENlX</label>
|
|
||||||
<p>Hero</p>
|
|
||||||
<dl class="description">
|
|
||||||
<dt class="-colon">LV</dt>
|
|
||||||
<dd class="_right">10</dd>
|
|
||||||
<dt class="-colon">HP</dt>
|
|
||||||
<dd class="_right">58</dd>
|
|
||||||
<dt class="-colon">MP</dt>
|
|
||||||
<dd class="_right">18</dd>
|
|
||||||
</dl>
|
|
||||||
</section>
|
</section>
|
||||||
<section class="equipment container _dark">
|
|
||||||
<dl class="description">
|
<section class="container">
|
||||||
<dt>E</dt>
|
<h3 class="title -is-4">Radios</h3>
|
||||||
<dd>SWORD</dd>
|
<h4 class="title -is-5">rows</h4>
|
||||||
<dt>E</dt>
|
<div class="radios">
|
||||||
<dd>CLOTHES</dd>
|
<label
|
||||||
<dt>E</dt>
|
><input
|
||||||
<dd>POT LID</dd>
|
class="radio"
|
||||||
<dt>E</dt>
|
type="radio"
|
||||||
<dd>AMULET</dd>
|
name="radios1"
|
||||||
</dl>
|
checked
|
||||||
|
/>FIGHT</label
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
><input class="radio" type="radio" name="radios1" />SPELL</label
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
><input class="radio" type="radio" name="radios1" />ITEM</label
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
><input class="radio" type="radio" name="radios1" />RUN</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<h4 class="title -is-5">columns</h4>
|
||||||
|
<div class="radios -columns">
|
||||||
|
<label
|
||||||
|
><input
|
||||||
|
class="radio"
|
||||||
|
type="radio"
|
||||||
|
name="radios2"
|
||||||
|
checked
|
||||||
|
/>FIGHT</label
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
><input class="radio" type="radio" name="radios2" />SPELL</label
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
><input class="radio" type="radio" name="radios2" />ITEM</label
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
><input class="radio" type="radio" name="radios2" />RUN</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="status container _dark">
|
|
||||||
<dl class="description">
|
<section class="container">
|
||||||
<dt class="-colon">STRENGTH</dt>
|
<h3 class="title -is-4">Checkbox</h3>
|
||||||
<dd class="_right">15</dd>
|
<label><input class="checkbox" type="checkbox" checked />agree</label>
|
||||||
<dt class="-colon">AGILITY</dt>
|
</section>
|
||||||
<dd class="_right">36</dd>
|
|
||||||
<dt class="-colon">VITALITY</dt>
|
<section class="container">
|
||||||
<dd class="_right">41</dd>
|
<h3 class="title -is-4">Input</h3>
|
||||||
<dt class="-colon">INTELLIGENCE</dt>
|
<h4 class="title -is-5">field</h4>
|
||||||
<dd class="_right">7</dd>
|
<div class="field">
|
||||||
<dt class="-colon">LUCK</dt>
|
<label class="label">field</label>
|
||||||
<dd class="_right">6</dd>
|
<input class="input" type="text" placeholder="hello nes" />
|
||||||
<dt class="-colon">MAX HP</dt>
|
</div>
|
||||||
<dd class="_right">81</dd>
|
|
||||||
<dt class="-colon">MAX MP</dt>
|
<h4 class="title -is-5">inline field</h4>
|
||||||
<dd class="_right">50</dd>
|
<div class="field -inline">
|
||||||
<dt class="-colon">ATTACK POWER</dt>
|
<label class="label">inline field</label>
|
||||||
<dd class="_right">57</dd>
|
<input class="input" type="text" placeholder="hello nes" />
|
||||||
<dt class="-colon">DEFENSE POWER</dt>
|
</div>
|
||||||
<dd class="_right">87</dd>
|
<div class="field -inline">
|
||||||
<dt class="">EXP</dt>
|
<label class="label">success</label>
|
||||||
<dd class="_right">1316</dd>
|
<input
|
||||||
</dl>
|
class="input -success"
|
||||||
|
type="text"
|
||||||
|
placeholder="hello nes"
|
||||||
|
value="good"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="field -inline">
|
||||||
|
<label class="label">warning</label>
|
||||||
|
<input
|
||||||
|
class="input -warning"
|
||||||
|
type="text"
|
||||||
|
placeholder="hello nes"
|
||||||
|
value="warn..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="field -inline">
|
||||||
|
<label class="label">error</label>
|
||||||
|
<input
|
||||||
|
class="input -error"
|
||||||
|
type="text"
|
||||||
|
placeholder="hello nes"
|
||||||
|
value="error..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="container">
|
||||||
|
<h3 class="title -is-4">Action group</h3>
|
||||||
|
<h4 class="title -is-5">default</h4>
|
||||||
|
<div class="group">
|
||||||
|
<button type="button" class="button -primary">submit</button>
|
||||||
|
<button type="button" class="button">cancel</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="title -is-5">center</h4>
|
||||||
|
<div class="group -center">
|
||||||
|
<button type="button" class="button -primary">submit</button>
|
||||||
|
<button type="button" class="button">cancel</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="title -is-5">right</h4>
|
||||||
|
<div class="group -right">
|
||||||
|
<button type="button" class="button -primary">submit</button>
|
||||||
|
<button type="button" class="button">cancel</button>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="container">
|
<section class="container">
|
||||||
<h2 class="title -is-3">Balloons</h2>
|
<h2 class="title -is-3">Container</h2>
|
||||||
<div class="conversation">
|
<h3 class="title -is-4">normal</h3>
|
||||||
<div class="avatar -left">
|
<section class="container">
|
||||||
<img src="https://avatars0.githubusercontent.com/u/5305599?s=100">
|
|
||||||
</div>
|
|
||||||
<div class="balloon -left">
|
|
||||||
<p>Hello NES.css</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="conversation">
|
|
||||||
<div class="balloon -right">
|
|
||||||
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<h3 class="title -is-4">dark theme</h3>
|
||||||
|
<section class="container _dark">
|
||||||
|
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<h3 class="title -is-4">with title</h3>
|
||||||
|
<section class="container _dark -with-title">
|
||||||
|
<label class="title">Command</label>
|
||||||
|
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<h3 class="title -is-4">align <code>(-center, -right)</code></h3>
|
||||||
|
<section class="container _dark -with-title -center">
|
||||||
|
<label class="title">Command</label>
|
||||||
|
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="container">
|
||||||
|
<h2 class="title -is-3">Description</h2>
|
||||||
|
<h3 class="title -is-4">description list</h3>
|
||||||
|
<dl class="description">
|
||||||
|
<dt>Description list</dt>
|
||||||
|
<dd>Lorem ipsum dolor sit amet</dd>
|
||||||
|
<dt>Consectetur</dt>
|
||||||
|
<dd>adipiscing elit</dd>
|
||||||
|
<dt>sed do eiusmod</dt>
|
||||||
|
<dd>tempor incididunt ut labore et dolore magna aliqua</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h3 class="title -is-4">with colon</h3>
|
||||||
|
<dl class="description">
|
||||||
|
<dt class="-colon">Description list</dt>
|
||||||
|
<dd>Lorem ipsum dolor sit amet</dd>
|
||||||
|
<dt class="-colon">Consectetur</dt>
|
||||||
|
<dd>adipiscing elit</dd>
|
||||||
|
<dt class="-colon">sed do eiusmod</dt>
|
||||||
|
<dd>tempor incididunt ut labore et dolore magna aliqua</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<h3 class="title -is-4">e.g. Dragon Quest-status</h3>
|
||||||
|
<section class="container _dark dq-like-grid">
|
||||||
|
<section class="overview container _dark -with-title -center _dark">
|
||||||
|
<label class=" title">ENlX</label>
|
||||||
|
<p>Hero</p>
|
||||||
|
<dl class="description">
|
||||||
|
<dt class="-colon">LV</dt>
|
||||||
|
<dd class="_right">10</dd>
|
||||||
|
<dt class="-colon">HP</dt>
|
||||||
|
<dd class="_right">58</dd>
|
||||||
|
<dt class="-colon">MP</dt>
|
||||||
|
<dd class="_right">18</dd>
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
<section class="equipment container _dark">
|
||||||
|
<dl class="description">
|
||||||
|
<dt>E</dt>
|
||||||
|
<dd>SWORD</dd>
|
||||||
|
<dt>E</dt>
|
||||||
|
<dd>CLOTHES</dd>
|
||||||
|
<dt>E</dt>
|
||||||
|
<dd>POT LID</dd>
|
||||||
|
<dt>E</dt>
|
||||||
|
<dd>AMULET</dd>
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
<section class="status container _dark">
|
||||||
|
<dl class="description">
|
||||||
|
<dt class="-colon">STRENGTH</dt>
|
||||||
|
<dd class="_right">15</dd>
|
||||||
|
<dt class="-colon">AGILITY</dt>
|
||||||
|
<dd class="_right">36</dd>
|
||||||
|
<dt class="-colon">VITALITY</dt>
|
||||||
|
<dd class="_right">41</dd>
|
||||||
|
<dt class="-colon">INTELLIGENCE</dt>
|
||||||
|
<dd class="_right">7</dd>
|
||||||
|
<dt class="-colon">LUCK</dt>
|
||||||
|
<dd class="_right">6</dd>
|
||||||
|
<dt class="-colon">MAX HP</dt>
|
||||||
|
<dd class="_right">81</dd>
|
||||||
|
<dt class="-colon">MAX MP</dt>
|
||||||
|
<dd class="_right">50</dd>
|
||||||
|
<dt class="-colon">ATTACK POWER</dt>
|
||||||
|
<dd class="_right">57</dd>
|
||||||
|
<dt class="-colon">DEFENSE POWER</dt>
|
||||||
|
<dd class="_right">87</dd>
|
||||||
|
<dt class="">EXP</dt>
|
||||||
|
<dd class="_right">1316</dd>
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="container">
|
||||||
|
<h2 class="title -is-3">Balloons</h2>
|
||||||
|
<div class="conversation">
|
||||||
|
<div class="avatar -left">
|
||||||
|
<img src="https://avatars0.githubusercontent.com/u/5305599?s=100" />
|
||||||
|
</div>
|
||||||
|
<div class="balloon -left"><p>Hello NES.css</p></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="avatar -right">
|
|
||||||
<img src="https://avatars0.githubusercontent.com/u/5305599?s=100">
|
<div class="conversation">
|
||||||
|
<div class="balloon -right">
|
||||||
|
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
||||||
|
</div>
|
||||||
|
<div class="avatar -right">
|
||||||
|
<img src="https://avatars0.githubusercontent.com/u/5305599?s=100" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="container">
|
<section class="container">
|
||||||
<h2 class="title -is-3">Icons</h2>
|
<h2 class="title -is-3">Icons</h2>
|
||||||
<h3 class="title -is-4">sns</h3>
|
<h3 class="title -is-4">sns</h3>
|
||||||
<a href="https://twitter.com/bc_rikko" target="_blank">
|
<a href="https://twitter.com/bc_rikko" target="_blank">
|
||||||
<i class="icon -twitter"></i>
|
<i class="icon -twitter"></i> <i class="icon -medium -twitter"></i>
|
||||||
<i class="icon -medium -twitter"></i>
|
<i class="icon -large -twitter"></i>
|
||||||
<i class="icon -large -twitter"></i>
|
</a>
|
||||||
</a>
|
<i class="icon -facebook"></i> <i class="icon -medium -facebook"></i>
|
||||||
<i class="icon -facebook"></i>
|
<i class="icon -large -facebook"></i>
|
||||||
<i class="icon -medium -facebook"></i>
|
<a href="https://github.com/BcRikko" target="_blank">
|
||||||
<i class="icon -large -facebook"></i>
|
<i class="icon -github"></i> <i class="icon -medium -github"></i>
|
||||||
<a href="https://github.com/BcRikko" target="_blank">
|
<i class="icon -large -github"></i>
|
||||||
<i class="icon -github"></i>
|
</a>
|
||||||
<i class="icon -medium -github"></i>
|
<a href="https://www.youtube.com/user/bcrikko" target="_blank">
|
||||||
<i class="icon -large -github"></i>
|
<i class="icon -youtube"></i> <i class="icon -medium -youtube"></i>
|
||||||
</a>
|
<i class="icon -large -youtube"></i>
|
||||||
<a href="https://www.youtube.com/channel/UCVVtxw2Cnn4qL7oZQa2awPA" target="_blank">
|
</a>
|
||||||
<i class="icon -youtube"></i>
|
|
||||||
<i class="icon -medium -youtube"></i>
|
|
||||||
<i class="icon -large -youtube"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<h3 class="title -is-4">reaction</h3>
|
|
||||||
<i class="icon -heart"></i>
|
|
||||||
<i class="icon -medium -heart"></i>
|
|
||||||
<i class="icon -large -heart"></i>
|
|
||||||
<i class="icon -star"></i>
|
|
||||||
<i class="icon -medium -star"></i>
|
|
||||||
<i class="icon -large -star"></i>
|
|
||||||
<i class="icon -like"></i>
|
|
||||||
<i class="icon -medium -like"></i>
|
|
||||||
<i class="icon -large -like"></i>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
<h3 class="title -is-4">reaction</h3>
|
||||||
|
<i class="icon -heart"></i> <i class="icon -medium -heart"></i>
|
||||||
|
<i class="icon -large -heart"></i> <i class="icon -star"></i>
|
||||||
|
<i class="icon -medium -star"></i> <i class="icon -large -star"></i>
|
||||||
|
<i class="icon -like"></i> <i class="icon -medium -like"></i>
|
||||||
|
<i class="icon -large -like"></i>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
@charset "utf-8";
|
|
||||||
|
|
||||||
@import "reset.scss";
|
|
||||||
@import "variables.scss";
|
|
||||||
@import "generic.scss";
|
|
||||||
@import "animation.scss";
|
|
||||||
@import "helper.scss";
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
@keyframes blink {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
// Define
|
|
||||||
html {
|
|
||||||
font-size: $font-size;
|
|
||||||
color: $black;
|
|
||||||
background-color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
body,
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
textarea,
|
|
||||||
select,
|
|
||||||
pre,
|
|
||||||
code {
|
|
||||||
font-family: $font-family;
|
|
||||||
font-size: $font-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $black;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
p:not(:last-child) {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
._dark {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
._right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
|
|
||||||
html,
|
|
||||||
body,
|
|
||||||
p,
|
|
||||||
ol,
|
|
||||||
ul,
|
|
||||||
li,
|
|
||||||
dl,
|
|
||||||
dt,
|
|
||||||
dd,
|
|
||||||
blockquote,
|
|
||||||
figure,
|
|
||||||
fieldset,
|
|
||||||
legend,
|
|
||||||
textarea,
|
|
||||||
pre,
|
|
||||||
iframe,
|
|
||||||
hr,
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-size: 100%;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
embed,
|
|
||||||
iframe,
|
|
||||||
object,
|
|
||||||
audio,
|
|
||||||
video {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-spacing: 0;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
padding: 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
// Font
|
|
||||||
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
|
|
||||||
$font-family: "Press Start 2P" !default;
|
|
||||||
|
|
||||||
// Sizes
|
|
||||||
$font-size: 16px !default;
|
|
||||||
|
|
||||||
$h1-font-size: $font-size * 3 !default;
|
|
||||||
$h2-font-size: $font-size * 2.5 !default;
|
|
||||||
$h3-font-size: $font-size * 2 !default;
|
|
||||||
$h4-font-size: $font-size * 1.5 !default;
|
|
||||||
$h5-font-size: $font-size * 1.25 !default;
|
|
||||||
$h6-font-size: $font-size !default;
|
|
||||||
|
|
||||||
$small-font-size: 0.6em;
|
|
||||||
$medium-font-size: 1em;
|
|
||||||
$large-font-size: 2em;
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
$black: #333 !default;
|
|
||||||
$white: #f7f7f7 !default;
|
|
||||||
|
|
||||||
$background-color: $white !default;
|
|
||||||
$hover-background-color: #e7e7e7 !default;
|
|
||||||
$shadow-color: #adafbc !default;
|
|
||||||
|
|
||||||
$primary-background-color: #92cc41 !default;
|
|
||||||
$primary-hover-background-color: #76c442 !default;
|
|
||||||
$primary-shadow-color: #4aa52e !default;
|
|
||||||
|
|
||||||
$success-background-color: #209cee !default;
|
|
||||||
$success-hover-background-color: #108de0 !default;
|
|
||||||
$success-shadow-color: #006bb3 !default;
|
|
||||||
|
|
||||||
$warning-background-color: #f7d51d !default;
|
|
||||||
$warning-hover-background-color: #f2c409 !default;
|
|
||||||
$warning-shadow-color: #e59400 !default;
|
|
||||||
|
|
||||||
$error-background-color: #e76e55 !default;
|
|
||||||
$error-hover-background-color: #ce372b !default;
|
|
||||||
$error-shadow-color: #8c2022 !default;
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
@charset "utf-8";
|
|
||||||
|
|
||||||
@import "title.scss";
|
|
||||||
@import "button.scss";
|
|
||||||
@import "radio.scss";
|
|
||||||
@import "container.scss";
|
|
||||||
@import "checkbox.scss";
|
|
||||||
@import "description.scss";
|
|
||||||
@import "balloon.scss";
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
.balloon {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1rem;
|
|
||||||
margin-bottom: 26px;
|
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
box-shadow:
|
|
||||||
0 -4px $background-color,
|
|
||||||
0 -8px $black,
|
|
||||||
4px 0 $background-color,
|
|
||||||
4px -4px $black,
|
|
||||||
8px 0 $black,
|
|
||||||
0 4px $background-color,
|
|
||||||
0 8px $black,
|
|
||||||
-4px 0 $background-color,
|
|
||||||
-4px 4px $black,
|
|
||||||
-8px 0 $black,
|
|
||||||
-4px -4px $black,
|
|
||||||
4px 4px $black;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-right {
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
right: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
bottom: -14px;
|
|
||||||
width: 26px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: $background-color;
|
|
||||||
border-right: 4px solid $black;
|
|
||||||
border-left: 4px solid $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
bottom: -18px;
|
|
||||||
width: 18px;
|
|
||||||
height: 3px;
|
|
||||||
margin-left: 8px;
|
|
||||||
background-color: $background-color;
|
|
||||||
// prettier-ignore
|
|
||||||
box-shadow:
|
|
||||||
-4px 0 $black,
|
|
||||||
4px 0 $black,
|
|
||||||
4px 4px $background-color,
|
|
||||||
0 4px $black,
|
|
||||||
8px 4px $black,
|
|
||||||
4px 8px $black,
|
|
||||||
8px 8px $black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-left {
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
left: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
bottom: -14px;
|
|
||||||
width: 26px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: $background-color;
|
|
||||||
border-right: 4px solid $black;
|
|
||||||
border-left: 4px solid $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
bottom: -18px;
|
|
||||||
width: 18px;
|
|
||||||
height: 3px;
|
|
||||||
margin-right: 8px;
|
|
||||||
background-color: $background-color;
|
|
||||||
// prettier-ignore
|
|
||||||
box-shadow:
|
|
||||||
-4px 0 $black,
|
|
||||||
4px 0 $black,
|
|
||||||
-4px 4px $background-color,
|
|
||||||
0 4px $black,
|
|
||||||
-8px 4px $black,
|
|
||||||
-4px 8px $black,
|
|
||||||
-8px 8px $black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
$border-size: 6px;
|
|
||||||
|
|
||||||
.button {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 10px 12px;
|
|
||||||
margin: $border-size / 2;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: $background-color;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: inset -4px -4px 0 0 $shadow-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $hover-background-color;
|
|
||||||
box-shadow: inset -6px -6px 0 0 $shadow-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
box-shadow: inset 4px 4px 0 0 $shadow-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
& + & {
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// border
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
box-sizing: content-box;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
content: "";
|
|
||||||
border-color: $black;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
top: $border-size / 2 * -1;
|
|
||||||
left: 0;
|
|
||||||
border-right: $border-size;
|
|
||||||
border-left: $border-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
top: 0;
|
|
||||||
left: $border-size / 2 * -1;
|
|
||||||
border-top: $border-size;
|
|
||||||
border-bottom: $border-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Button types(type background-color hover:background-color box-shadow)
|
|
||||||
// prettier-ignore
|
|
||||||
$btn-types:
|
|
||||||
"primary" $primary-background-color $primary-hover-background-color $primary-shadow-color,
|
|
||||||
"success" $success-background-color $success-hover-background-color $success-shadow-color,
|
|
||||||
"warning" $warning-background-color $warning-hover-background-color $warning-shadow-color,
|
|
||||||
"error" $error-background-color $error-hover-background-color $error-shadow-color;
|
|
||||||
|
|
||||||
@each $type in $btn-types {
|
|
||||||
&.-#{nth($type, 1)} {
|
|
||||||
color: $white;
|
|
||||||
background-color: nth($type, 2);
|
|
||||||
box-shadow: inset -4px -4px 0 0 nth($type, 4);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: nth($type, 3);
|
|
||||||
box-shadow: inset -6px -6px 0 0 nth($type, 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
box-shadow: inset 4px 4px 0 0 nth($type, 4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
$btn-sizes:
|
|
||||||
"small" $small-font-size,
|
|
||||||
"medium" $medium-font-size,
|
|
||||||
"large" $large-font-size;
|
|
||||||
|
|
||||||
@each $name, $size in $btn-sizes {
|
|
||||||
&.-#{$name} {
|
|
||||||
font-size: $size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
.checkbox[type="checkbox"] {
|
|
||||||
position: relative;
|
|
||||||
margin-right: 1rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
visibility: hidden;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
left: -6px;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
visibility: visible;
|
|
||||||
content: "";
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
box-shadow:
|
|
||||||
6px 6px 0 $black,
|
|
||||||
8px 6px 0 $black,
|
|
||||||
10px 6px 0 $black,
|
|
||||||
12px 6px 0 $black,
|
|
||||||
14px 6px 0 $black,
|
|
||||||
16px 6px 0 $black,
|
|
||||||
18px 6px 0 $black,
|
|
||||||
20px 6px 0 $black,
|
|
||||||
6px 8px 0 $black,
|
|
||||||
20px 8px 0 $black,
|
|
||||||
6px 10px 0 $black,
|
|
||||||
20px 10px 0 $black,
|
|
||||||
6px 12px 0 $black,
|
|
||||||
20px 12px 0 $black,
|
|
||||||
6px 14px 0 $black,
|
|
||||||
20px 14px 0 $black,
|
|
||||||
6px 16px 0 $black,
|
|
||||||
20px 16px 0 $black,
|
|
||||||
6px 18px 0 $black,
|
|
||||||
20px 18px 0 $black,
|
|
||||||
6px 20px 0 $black,
|
|
||||||
8px 20px 0 $black,
|
|
||||||
10px 20px 0 $black,
|
|
||||||
12px 20px 0 $black,
|
|
||||||
14px 20px 0 $black,
|
|
||||||
16px 20px 0 $black,
|
|
||||||
18px 20px 0 $black,
|
|
||||||
20px 20px 0 $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked::before {
|
|
||||||
// prettier-ignore
|
|
||||||
box-shadow:
|
|
||||||
6px 6px 0 $black,
|
|
||||||
8px 6px 0 $black,
|
|
||||||
10px 6px 0 $black,
|
|
||||||
12px 6px 0 $black,
|
|
||||||
14px 6px 0 $black,
|
|
||||||
16px 6px 0 $black,
|
|
||||||
18px 6px 0 $black,
|
|
||||||
22px 6px 0 $black,
|
|
||||||
24px 6px 0 $black,
|
|
||||||
6px 8px 0 $black,
|
|
||||||
20px 8px 0 $black,
|
|
||||||
22px 8px 0 $black,
|
|
||||||
24px 8px 0 $black,
|
|
||||||
6px 10px 0 $black,
|
|
||||||
18px 10px 0 $black,
|
|
||||||
20px 10px 0 $black,
|
|
||||||
6px 12px 0 $black,
|
|
||||||
8px 12px 0 $black,
|
|
||||||
16px 12px 0 $black,
|
|
||||||
18px 12px 0 $black,
|
|
||||||
6px 14px 0 $black,
|
|
||||||
8px 14px 0 $black,
|
|
||||||
10px 14px 0 $black,
|
|
||||||
14px 14px 0 $black,
|
|
||||||
16px 14px 0 $black,
|
|
||||||
20px 14px 0 $black,
|
|
||||||
6px 16px 0 $black,
|
|
||||||
10px 16px 0 $black,
|
|
||||||
12px 16px 0 $black,
|
|
||||||
14px 16px 0 $black,
|
|
||||||
20px 16px 0 $black,
|
|
||||||
6px 18px 0 $black,
|
|
||||||
12px 18px 0 $black,
|
|
||||||
20px 18px 0 $black,
|
|
||||||
6px 20px 0 $black,
|
|
||||||
8px 20px 0 $black,
|
|
||||||
10px 20px 0 $black,
|
|
||||||
12px 20px 0 $black,
|
|
||||||
14px 20px 0 $black,
|
|
||||||
16px 20px 0 $black,
|
|
||||||
18px 20px 0 $black,
|
|
||||||
20px 20px 0 $black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
padding: 1.5rem 2rem;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: -2;
|
|
||||||
background-color: $background-color;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
top: 2px;
|
|
||||||
right: 2px;
|
|
||||||
bottom: 2px;
|
|
||||||
left: 2px;
|
|
||||||
z-index: -1;
|
|
||||||
border: 4px solid;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-with-title {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
padding-top: 2rem;
|
|
||||||
|
|
||||||
&.-center {
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-right {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .title {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
margin: 0;
|
|
||||||
font-size: $h6-font-size;
|
|
||||||
font-weight: 400;
|
|
||||||
background-color: $background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&._dark {
|
|
||||||
color: $white;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background-color: $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border-color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .title {
|
|
||||||
color: $white;
|
|
||||||
background-color: $black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
dl.description {
|
|
||||||
display: grid;
|
|
||||||
grid-template: auto / 15rem 1fr;
|
|
||||||
grid-gap: 0.8rem 2rem;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> dt {
|
|
||||||
position: relative;
|
|
||||||
grid-column: 1;
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
&.-colon::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: -1.5rem;
|
|
||||||
z-index: -1;
|
|
||||||
content: ":";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> dd {
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
.radios {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> label {
|
|
||||||
display: flex;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .radio[type="radio"] {
|
|
||||||
margin-right: 0.3rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
visibility: hidden;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
visibility: visible;
|
|
||||||
content: "";
|
|
||||||
animation: blink 1s infinite steps(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked::before {
|
|
||||||
content: "\203A";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-columns {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
> label:not(:last-child) {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
.title {
|
|
||||||
font-weight: 700;
|
|
||||||
word-break: break-word;
|
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
$sizes:
|
|
||||||
$h1-font-size,
|
|
||||||
$h2-font-size,
|
|
||||||
$h3-font-size,
|
|
||||||
$h4-font-size,
|
|
||||||
$h5-font-size,
|
|
||||||
$h6-font-size;
|
|
||||||
|
|
||||||
@each $size in $sizes {
|
|
||||||
$i: index($sizes, $size);
|
|
||||||
|
|
||||||
&.-is-#{$i} {
|
|
||||||
font-size: $size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
$sizes:
|
|
||||||
$h1-font-size,
|
|
||||||
$h2-font-size,
|
|
||||||
$h3-font-size,
|
|
||||||
$h4-font-size,
|
|
||||||
$h5-font-size,
|
|
||||||
$h6-font-size;
|
|
||||||
|
|
||||||
@each $size in $sizes {
|
|
||||||
$i: index($sizes, $size);
|
|
||||||
|
|
||||||
&.-is-#{$i} {
|
|
||||||
font-size: $size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
@charset "utf-8";
|
|
||||||
|
|
||||||
@import "input.scss";
|
|
||||||
@import "group.scss";
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
.group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin: 1rem 0;
|
|
||||||
|
|
||||||
&.-center {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-right {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
.field {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem 1rem 0.5rem;
|
|
||||||
background-color: $background-color;
|
|
||||||
border: 4px solid $black;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
font-weight: lighter;
|
|
||||||
color: rgba($black, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-success {
|
|
||||||
border-color: $success-background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-warning {
|
|
||||||
color: $warning-shadow-color;
|
|
||||||
border-color: $warning-background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-error {
|
|
||||||
color: $error-background-color;
|
|
||||||
border-color: $error-background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-inline {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
width: 20rem;
|
|
||||||
margin: 0;
|
|
||||||
margin-right: 1rem;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
@charset "utf-8";
|
|
||||||
|
|
||||||
@import "icons.scss";
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
// prettier-ignore
|
|
||||||
$facebook: (
|
|
||||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0) ,
|
|
||||||
( 1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1) ,
|
|
||||||
( 1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1) ,
|
|
||||||
( 1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1) ,
|
|
||||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
|
||||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
|
||||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
|
||||||
( 1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1) ,
|
|
||||||
( 1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1) ,
|
|
||||||
( 1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1) ,
|
|
||||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
|
||||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
|
||||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
|
||||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
|
||||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
|
||||||
( 0,1,1,1,1,1,1,1,0,0,0,1,1,1,1,0)
|
|
||||||
);
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
// prettier-ignore
|
|
||||||
$github: (
|
|
||||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
|
||||||
( 1,1,1,1,0,1,1,1,1,1,1,1,1,0,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1 ),
|
|
||||||
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
|
|
||||||
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
|
|
||||||
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
|
|
||||||
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1 ),
|
|
||||||
( 1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1 ),
|
|
||||||
( 1,0,0,1,1,1,1,0,0,0,0,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,0,1,1,0,0,0,0,0,0,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1 ),
|
|
||||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 )
|
|
||||||
);
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
// prettier-ignore
|
|
||||||
$heart: (
|
|
||||||
( 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ),
|
|
||||||
( 0,0,1,1,1,0,0,0,0,0,1,1,1,0,0,0 ),
|
|
||||||
( 0,1,1,1,1,1,0,0,0,1,1,1,1,1,0,0 ),
|
|
||||||
( 1,1,0,0,1,1,1,0,1,1,1,1,1,1,1,0 ),
|
|
||||||
( 1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
|
||||||
( 1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
|
||||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
|
||||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
|
||||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0 ),
|
|
||||||
( 0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0 ),
|
|
||||||
( 0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0 ),
|
|
||||||
( 0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0 ),
|
|
||||||
( 0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0 ),
|
|
||||||
( 0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0 ),
|
|
||||||
( 0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0 ),
|
|
||||||
( 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 )
|
|
||||||
);
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
@import "pixelize.scss";
|
|
||||||
@import "twitter.scss";
|
|
||||||
@import "facebook.scss";
|
|
||||||
@import "github.scss";
|
|
||||||
@import "youtube.scss";
|
|
||||||
@import "heart.scss";
|
|
||||||
@import "star.scss";
|
|
||||||
@import "like.scss";
|
|
||||||
|
|
||||||
@mixin setup($pixel) {
|
|
||||||
$size: $pixel * 16;
|
|
||||||
|
|
||||||
width: $size;
|
|
||||||
height: $size;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
top: $pixel * -1;
|
|
||||||
left: $pixel * -1;
|
|
||||||
width: $pixel;
|
|
||||||
height: $pixel;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-twitter::before {
|
|
||||||
@include pixelize($twitter, $pixel, #1c9ceb);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-facebook::before {
|
|
||||||
@include pixelize($facebook, $pixel, #4566ae);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-github::before {
|
|
||||||
@include pixelize($github, $pixel, #333333);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-youtube::before {
|
|
||||||
@include pixelize($youtube, $pixel, #ff0100);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-heart::before {
|
|
||||||
@include pixelize($heart, $pixel, #f11416);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-star::before {
|
|
||||||
@include pixelize($star, $pixel, #f7de4e);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-like::before {
|
|
||||||
@include pixelize($like, $pixel, #1e77be);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -default
|
|
||||||
@include setup(2px);
|
|
||||||
|
|
||||||
&.-medium {
|
|
||||||
@include setup(3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-large {
|
|
||||||
@include setup(4px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
// prettier-ignore
|
|
||||||
$like: (
|
|
||||||
( 0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0 ),
|
|
||||||
( 0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0 ),
|
|
||||||
( 0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0 ),
|
|
||||||
( 0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0 ),
|
|
||||||
( 0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0 ),
|
|
||||||
( 0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0 ),
|
|
||||||
( 0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0 ),
|
|
||||||
( 1,1,1,0,1,0,0,0,0,1,1,1,1,1,1,0 ),
|
|
||||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1 ),
|
|
||||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1 ),
|
|
||||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,1,0 ),
|
|
||||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1 ),
|
|
||||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1 ),
|
|
||||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,1,0 ),
|
|
||||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,1,0 ),
|
|
||||||
( 1,1,1,0,1,1,1,1,1,1,1,1,1,1,0,0 )
|
|
||||||
);
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
@mixin pixelize($matrix, $size, $color) {
|
|
||||||
$ret: "";
|
|
||||||
|
|
||||||
@for $i from 1 through length($matrix) {
|
|
||||||
$row: nth($matrix, $i);
|
|
||||||
|
|
||||||
@for $j from 1 through length($row) {
|
|
||||||
$dot: nth($row, $j);
|
|
||||||
|
|
||||||
@if $dot != 0 {
|
|
||||||
@if $ret != "" {
|
|
||||||
$ret: $ret + ",";
|
|
||||||
}
|
|
||||||
|
|
||||||
$ret: $ret + ($j * $size) + " " + ($i * $size) + " 0 " + $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
box-shadow: unquote($ret + ";");
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
// prettier-ignore
|
|
||||||
$star: (
|
|
||||||
(0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
|
|
||||||
(0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0),
|
|
||||||
(0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0),
|
|
||||||
(0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0),
|
|
||||||
(0,0,0,0,0,1,0,0,1,1,0,0,0,0,0,0),
|
|
||||||
(1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,0),
|
|
||||||
(1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,0),
|
|
||||||
(0,1,1,1,0,1,1,1,1,1,1,1,1,1,0,0),
|
|
||||||
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0),
|
|
||||||
(0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0),
|
|
||||||
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0),
|
|
||||||
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0),
|
|
||||||
(0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0),
|
|
||||||
(0,1,1,1,1,1,1,0,1,1,1,1,1,1,0,0),
|
|
||||||
(1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,0),
|
|
||||||
(1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0)
|
|
||||||
);
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
// prettier-ignore
|
|
||||||
$twitter: (
|
|
||||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
|
||||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,0,1,1,1,1,1,1,1,0,0,0,1,1,1,1 ),
|
|
||||||
( 1,0,0,0,1,1,1,1,0,0,0,0,0,1,1,1 ),
|
|
||||||
( 1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1 ),
|
|
||||||
( 1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1 ),
|
|
||||||
( 1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1 ),
|
|
||||||
( 1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1 ),
|
|
||||||
( 1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1 ),
|
|
||||||
( 1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
|
||||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 )
|
|
||||||
);
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
// prettier-ignore
|
|
||||||
$youtube: (
|
|
||||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
|
||||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
|
||||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
|
||||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 )
|
|
||||||
);
|
|
||||||
@ -1,10 +1,5 @@
|
|||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
|
|
||||||
/*!
|
/*!
|
||||||
* NES.css v0.0.1(alpha)
|
* NES.css v0.0.2(alpha)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "base/_index.scss";
|
|
||||||
@import "elements/_index.scss";
|
|
||||||
@import "form/_index.scss";
|
|
||||||
@import "icons/_index.scss";
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user