mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-01-17 13:48:13 +01:00
Code Issues Releases Wiki Activity

🚿 再開発

Browse Source
This commit is contained in:
BcRikko 2018-11-18 09:54:03 +09:00
parent 8c62eee7a6
commit db0ac66528
32 changed files with 324 additions and 2016 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

746
css/nes.css
View File

@ -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 */

31
css/nes.css.map
View File

File diff suppressed because one or more lines are too long

6
css/nes.min.css vendored
View File

File diff suppressed because one or more lines are too long

590
index.html
View File

@ -1,296 +1,338 @@
<!DOCTYPE html>
<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>
<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>
<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">
<link href="./style.css" rel="stylesheet">
<meta property="og:type" content="website" />
<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">
<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">
<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">
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-41640153-4"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41640153-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag("config", "UA-41640153-4");
</script>
</head>
gtag('config', 'UA-41640153-4');
</script>
<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>
</head>
<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>
<main>
<section class="container">
<h3 class="title -is-4">Buttons</h3>
<h4 class="title -is-5">sizes</h4>
<a class="button -small">small</a>
<a class="button">normal</a>
<a class="button -medium">medium</a>
<a class="button -large">large</a>
<h2 class="title -is-3">Form</h2>
<section class="container">
<h3 class="title -is-4">Buttons</h3>
<h4 class="title -is-5">sizes</h4>
<a class="button -small">small</a> <a class="button">normal</a>
<a class="button -medium">medium</a>
<a class="button -large">large</a>
<h4 class="title -is-5">colors</h4>
<a class="button -primary">primary</a>
<a class="button -success">success</a>
<a class="button -warning">warning</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>
<h4 class="title -is-5">colors</h4>
<a class="button -primary">primary</a>
<a class="button -success">success</a>
<a class="button -warning">warning</a>
<a class="button -error">error</a>
</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 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="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 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>
<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 class="conversation">
<div class="balloon -right">
<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 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 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>
</section>
</section>
<section class="container">
<h2 class="title -is-3">Icons</h2>
<h3 class="title -is-4">sns</h3>
<a href="https://twitter.com/bc_rikko" target="_blank">
<i class="icon -twitter"></i>
<i class="icon -medium -twitter"></i>
<i class="icon -large -twitter"></i>
</a>
<i class="icon -facebook"></i>
<i class="icon -medium -facebook"></i>
<i class="icon -large -facebook"></i>
<a href="https://github.com/BcRikko" target="_blank">
<i class="icon -github"></i>
<i class="icon -medium -github"></i>
<i class="icon -large -github"></i>
</a>
<a href="https://www.youtube.com/channel/UCVVtxw2Cnn4qL7oZQa2awPA" target="_blank">
<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>
<section class="container">
<h2 class="title -is-3">Icons</h2>
<h3 class="title -is-4">sns</h3>
<a href="https://twitter.com/bc_rikko" target="_blank">
<i class="icon -twitter"></i> <i class="icon -medium -twitter"></i>
<i class="icon -large -twitter"></i>
</a>
<i class="icon -facebook"></i> <i class="icon -medium -facebook"></i>
<i class="icon -large -facebook"></i>
<a href="https://github.com/BcRikko" target="_blank">
<i class="icon -github"></i> <i class="icon -medium -github"></i>
<i class="icon -large -github"></i>
</a>
<a href="https://www.youtube.com/user/bcrikko" target="_blank">
<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>
</html>

7
scss/base/_index.scss
View File

@ -1,7 +0,0 @@
@charset "utf-8";
@import "reset.scss";
@import "variables.scss";
@import "generic.scss";
@import "animation.scss";
@import "helper.scss";

9
scss/base/animation.scss
View File

@ -1,9 +0,0 @@
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
}

26
scss/base/generic.scss
View File

@ -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;
}

7
scss/base/helper.scss
View File

@ -1,7 +0,0 @@
._dark {
color: $white;
}
._right {
text-align: right;
}

83
scss/base/reset.scss
View File

@ -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;
}

41
scss/base/variables.scss
View File

@ -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;

9
scss/elements/_index.scss
View File

@ -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";

94
scss/elements/balloon.scss
View File

@ -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;
}
}
}

89
scss/elements/button.scss
View File

@ -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;
}
}
}

96
scss/elements/checkbox.scss
View File

@ -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;
}
}

78
scss/elements/container.scss
View File

@ -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;
}
}
}

27
scss/elements/description.scss
View File

@ -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;
}
}

45
scss/elements/radio.scss
View File

@ -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;
}
}
}

54
scss/elements/title.scss
View File

@ -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;
}
}
}

4
scss/form/_index.scss
View File

@ -1,4 +0,0 @@
@charset "utf-8";
@import "input.scss";
@import "group.scss";

14
scss/form/group.scss
View File

@ -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;
}
}

47
scss/form/input.scss
View File

@ -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;
}
}
}

3
scss/icons/_index.scss
View File

@ -1,3 +0,0 @@
@charset "utf-8";
@import "icons.scss";

19
scss/icons/facebook.scss
View File

@ -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)
);

19
scss/icons/github.scss
View File

@ -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 )
);

19
scss/icons/heart.scss
View File

@ -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 )
);

73
scss/icons/icons.scss
View File

@ -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);
}
}

19
scss/icons/like.scss
View File

@ -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 )
);

21
scss/icons/pixelize.scss
View File

@ -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 + ";");
}

19
scss/icons/star.scss
View File

@ -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)
);

19
scss/icons/twitter.scss
View File

@ -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 )
);

19
scss/icons/youtube.scss
View File

@ -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 )
);

7
scss/nes.scss
View File

@ -1,10 +1,5 @@
@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";