mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-09-01 02:01:56 +02:00
Merge branch 'develop' of https://github.com/nostalgic-css/NES.css into dialog
This commit is contained in:
soph-iest
@@ -9,11 +9,24 @@ samp {
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
html {
|
||||
cursor: $cursor-url, auto;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: $font-size;
|
||||
color: $base-color;
|
||||
background-color: $background-color;
|
||||
-webkit-font-smoothing: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
cursor: $cursor-click-url, pointer;
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -22,3 +35,9 @@ button,
|
||||
[type="submit"] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// Prevent stray pixels on focused inputs such as checkboxes and radios
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,39 @@
|
||||
// Font
|
||||
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
|
||||
$font-family: "Press Start 2P" !default;
|
||||
$font-size: 16px !default;
|
||||
|
||||
$base-color: $color-black;
|
||||
$background-color: $color-white;
|
||||
|
||||
$cursor-url: url(../assets/cursor.png);
|
||||
$cursor-click-url: url(../assets/cursor-click.png);
|
||||
|
||||
$default-colors: (
|
||||
normal: $background-color,
|
||||
hover: #e7e7e7,
|
||||
shadow: #adafbc
|
||||
);
|
||||
$disabled-colors: (
|
||||
normal: #d3d3d3,
|
||||
shadow: #adafbc
|
||||
);
|
||||
$primary-colors: (
|
||||
normal: #209cee,
|
||||
hover: #108de0,
|
||||
shadow: #006bb3
|
||||
);
|
||||
$success-colors: (
|
||||
normal: #92cc41,
|
||||
hover: #76c442,
|
||||
shadow: #4aa52e
|
||||
);
|
||||
$warning-colors: (
|
||||
normal: #f7d51d,
|
||||
hover: #f2c409,
|
||||
shadow: #e59400
|
||||
);
|
||||
$error-colors: (
|
||||
normal: #e76e55,
|
||||
hover: #ce372b,
|
||||
shadow: #8c2022
|
||||
);
|
||||
|
||||
@@ -6,3 +6,5 @@
|
||||
@import "checkboxes.scss";
|
||||
@import "balloons.scss";
|
||||
@import "tables.scss";
|
||||
@import "progress.scss";
|
||||
@import "avatar.scss";
|
||||
|
||||
23
scss/elements/avatar.scss
Normal file
23
scss/elements/avatar.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
@mixin img-style($param) {
|
||||
$size: $param * 16;
|
||||
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
&.is-rounded {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
.nes-avatar {
|
||||
@include img-style(2px);
|
||||
|
||||
&.is-small {
|
||||
@include img-style(1px);
|
||||
}
|
||||
&.is-medium {
|
||||
@include img-style(3px);
|
||||
}
|
||||
&.is-large {
|
||||
@include img-style(4px);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
.balloon {
|
||||
.nes-balloon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 1rem 1.5rem;
|
||||
@@ -49,18 +49,19 @@
|
||||
&::after {
|
||||
bottom: -18px;
|
||||
width: 18px;
|
||||
height: 3px;
|
||||
height: 4px;
|
||||
margin-right: 8px;
|
||||
color: $base-color;
|
||||
background-color: $background-color;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
-4px 0 $base-color,
|
||||
4px 0 $base-color,
|
||||
-4px 0,
|
||||
4px 0,
|
||||
-4px 4px $background-color,
|
||||
0 4px $base-color,
|
||||
-8px 4px $base-color,
|
||||
-4px 8px $base-color,
|
||||
-8px 8px $base-color;
|
||||
0 4px,
|
||||
-8px 4px,
|
||||
-4px 8px,
|
||||
-8px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,18 +83,18 @@
|
||||
&::after {
|
||||
bottom: -18px;
|
||||
width: 18px;
|
||||
height: 3px;
|
||||
height: 4px;
|
||||
margin-left: 8px;
|
||||
background-color: $background-color;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
-4px 0 $base-color,
|
||||
4px 0 $base-color,
|
||||
-4px 0,
|
||||
4px 0,
|
||||
4px 4px $background-color,
|
||||
0 4px $base-color,
|
||||
8px 4px $base-color,
|
||||
4px 8px $base-color,
|
||||
8px 8px $base-color;
|
||||
0 4px,
|
||||
8px 4px,
|
||||
4px 8px,
|
||||
8px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,8 +14,67 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-extra-pixelize-style($color, $background, $hover-background, $shadow) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $hover-background;
|
||||
outline: 0;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $hover-background,
|
||||
inset 0 -2px $shadow,
|
||||
0 -8px $base-color,
|
||||
4px 0 $shadow,
|
||||
4px -4px $base-color,
|
||||
8px 0 $base-color,
|
||||
0 4px $shadow,
|
||||
4px 4px $base-color,
|
||||
0 8px $base-color,
|
||||
-4px 0 $hover-background,
|
||||
inset -2px 0 $shadow,
|
||||
-4px -4px $base-color,
|
||||
-8px 0 $base-color,
|
||||
-4px 4px $base-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $shadow,
|
||||
0 -8px $base-color,
|
||||
4px 0 $hover-background,
|
||||
4px -4px $base-color,
|
||||
8px 0 $base-color,
|
||||
0 4px $hover-background,
|
||||
4px 4px $base-color,
|
||||
0 8px $base-color,
|
||||
-4px 0 $shadow,
|
||||
-4px -4px $base-color,
|
||||
-8px 0 $base-color,
|
||||
-4px 4px $base-color;
|
||||
}
|
||||
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $background,
|
||||
0 -8px $base-color,
|
||||
4px 0 $shadow,
|
||||
4px -4px $base-color,
|
||||
8px 0 $base-color,
|
||||
0 4px $shadow,
|
||||
4px 4px $base-color,
|
||||
0 8px $base-color,
|
||||
-4px 0 $background,
|
||||
-4px -4px $base-color,
|
||||
-8px 0 $base-color,
|
||||
-4px 4px $base-color;
|
||||
}
|
||||
|
||||
// Default style
|
||||
.btn {
|
||||
.nes-btn {
|
||||
$border-size: 4px;
|
||||
|
||||
position: relative;
|
||||
@@ -24,10 +83,16 @@
|
||||
margin: $border-size;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
cursor: $cursor-click-url, pointer;
|
||||
user-select: none;
|
||||
border: none;
|
||||
|
||||
@include btn-style($base-color, #fff, #e7e7e7, #adafbc);
|
||||
@include btn-style(
|
||||
$base-color,
|
||||
map-get($default-colors, "normal"),
|
||||
map-get($default-colors, "hover"),
|
||||
map-get($default-colors, "shadow")
|
||||
);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@@ -59,17 +124,53 @@
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&.is-disabled:hover,
|
||||
&.is-disabled:focus {
|
||||
color: $base-color;
|
||||
cursor: not-allowed;
|
||||
background-color: map-get($disabled-colors, "normal");
|
||||
box-shadow: inset -4px -4px map-get($disabled-colors, "shadow");
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
// Other styles
|
||||
// prettier-ignore
|
||||
$types:
|
||||
"primary" #fff #209cee #108de0 #006bb3,
|
||||
"success" #fff #92cc41 #76c442 #4aa52e,
|
||||
"warning" $base-color #f7d51d #f2c409 #e59400,
|
||||
"error" #fff #e76e55 #ce372b #8c2022;
|
||||
"primary" $background-color map-get($primary-colors, "normal") map-get($primary-colors, "hover") map-get($primary-colors, "shadow"),
|
||||
"success" $background-color map-get($success-colors, "normal") map-get($success-colors, "hover") map-get($success-colors, "shadow"),
|
||||
"warning" $base-color map-get($warning-colors, "normal") map-get($warning-colors, "hover") map-get($warning-colors, "shadow"),
|
||||
"error" $background-color map-get($error-colors, "normal") map-get($error-colors, "hover") map-get($error-colors, "shadow");
|
||||
|
||||
@each $type in $types {
|
||||
&.is-#{nth($type, 1)} {
|
||||
@include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
|
||||
}
|
||||
}
|
||||
|
||||
&.is-rounded {
|
||||
box-sizing: content-box;
|
||||
padding: 6px 8px;
|
||||
@include btn-extra-pixelize-style(
|
||||
$base-color,
|
||||
map-get($default-colors, "normal"),
|
||||
map-get($default-colors, "hover"),
|
||||
map-get($default-colors, "shadow")
|
||||
);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-width: 0;
|
||||
}
|
||||
@each $type in $types {
|
||||
&.is-#{nth($type, 1)} {
|
||||
@include btn-extra-pixelize-style(
|
||||
nth($type, 2),
|
||||
nth($type, 3),
|
||||
nth($type, 4),
|
||||
nth($type, 5)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.checkbox {
|
||||
.nes-checkbox {
|
||||
// prettier-ignore
|
||||
$checkbox: (
|
||||
(1,1,1,1,1,1,1,1,0,0),
|
||||
@@ -45,7 +45,7 @@
|
||||
(2,0,0,1,0,0,0,2,0,0),
|
||||
(2,2,2,2,2,2,2,2,0,0)
|
||||
);
|
||||
$colors: ($base-color, #adafbb);
|
||||
$colors: ($base-color, map-get($default-colors, "shadow"));
|
||||
|
||||
margin-left: 28px;
|
||||
-webkit-appearance: none;
|
||||
@@ -54,7 +54,7 @@
|
||||
|
||||
& + span {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
cursor: $cursor-click-url, pointer;
|
||||
}
|
||||
|
||||
& + span::before,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.container {
|
||||
.nes-container {
|
||||
position: relative;
|
||||
padding: 1.5rem 2rem;
|
||||
|
||||
@@ -31,23 +31,74 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&.is-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.is-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.with-title {
|
||||
padding-top: 2rem;
|
||||
|
||||
> .title {
|
||||
display: table;
|
||||
padding: 0 0.5rem;
|
||||
margin: -2rem 0 1rem;
|
||||
font-size: 1rem;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
&.is-center {
|
||||
> .title {
|
||||
margin: -2rem auto 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-right {
|
||||
> .title {
|
||||
margin: -2rem 0 1rem auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
color: $background-color;
|
||||
&::before {
|
||||
background-color: $base-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
&.with-title {
|
||||
> .title {
|
||||
color: $background-color;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rounded($base, $background) {
|
||||
color: $base;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $background,
|
||||
0 -8px $base,
|
||||
0 -8px,
|
||||
4px 0 $background,
|
||||
4px -4px $base,
|
||||
8px 0 $base,
|
||||
4px -4px,
|
||||
8px 0,
|
||||
0 4px $background,
|
||||
0 8px $base,
|
||||
0 8px,
|
||||
-4px 0 $background,
|
||||
-4px 4px $base,
|
||||
-8px 0 $base,
|
||||
-4px -4px $base,
|
||||
4px 4px $base;
|
||||
-4px 4px,
|
||||
-8px 0,
|
||||
-4px -4px,
|
||||
4px 4px;
|
||||
}
|
||||
|
||||
&.is-rounded {
|
||||
@@ -70,49 +121,22 @@
|
||||
left: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.with-title {
|
||||
padding-top: 2rem;
|
||||
|
||||
> .title {
|
||||
display: table;
|
||||
padding: 0 0.5rem;
|
||||
margin: -2rem 0 1rem;
|
||||
font-size: 1rem;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
&.is-center {
|
||||
text-align: center;
|
||||
|
||||
> .title {
|
||||
margin: -2rem auto 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-right {
|
||||
text-align: right;
|
||||
|
||||
> .title {
|
||||
margin: -2rem 0 1rem auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
&::before {
|
||||
background-color: $base-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
&.with-title {
|
||||
> .title {
|
||||
color: $background-color;
|
||||
background-color: $base-color;
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
||||
&.is-center {
|
||||
> .title {
|
||||
margin: -1.5rem auto 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-right {
|
||||
> .title {
|
||||
margin: -1.5rem 0 1rem auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
108
scss/elements/progress.scss
Normal file
108
scss/elements/progress.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
.nes-progress {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
color: $base-color;
|
||||
background-color: $background-color;
|
||||
box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
@mixin progress-style($color) {
|
||||
&::-webkit-progress-bar {
|
||||
background-color: $background-color;
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
background-color: $color;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background-color: $color;
|
||||
}
|
||||
&::-ms-fill {
|
||||
background-color: $color;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include progress-style($base-color);
|
||||
|
||||
&.is-primary {
|
||||
@include progress-style(map-get($primary-colors, "normal"));
|
||||
}
|
||||
|
||||
&.is-success {
|
||||
@include progress-style(map-get($success-colors, "normal"));
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
@include progress-style(map-get($warning-colors, "normal"));
|
||||
}
|
||||
|
||||
&.is-error {
|
||||
@include progress-style(map-get($error-colors, "normal"));
|
||||
}
|
||||
|
||||
&.is-pattern {
|
||||
&::-webkit-progress-value {
|
||||
background-color: $base-color;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
$background-color 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
$background-color 75%,
|
||||
$background-color
|
||||
),
|
||||
linear-gradient(
|
||||
45deg,
|
||||
$background-color 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
$background-color 75%,
|
||||
$background-color
|
||||
);
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: $base-color;
|
||||
background-image: -moz-linear-gradient(
|
||||
45deg,
|
||||
$background-color 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
$background-color 75%,
|
||||
$background-color
|
||||
),
|
||||
-moz-linear-gradient(45deg, $background-color 25%, transparent 25%, transparent 75%, $background-color
|
||||
75%, $background-color);
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
&::-ms-fill {
|
||||
background-color: $base-color;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
$background-color 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
$background-color 75%,
|
||||
$background-color
|
||||
),
|
||||
linear-gradient(
|
||||
45deg,
|
||||
$background-color 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
$background-color 75%,
|
||||
$background-color
|
||||
);
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-size: 20px 20px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
.radio {
|
||||
.nes-radio {
|
||||
// prettier-ignore
|
||||
$radio: (
|
||||
(1,1,0,0,0,0),
|
||||
@@ -19,7 +19,7 @@
|
||||
(2,2,2,2,0,0),
|
||||
(2,2,0,0,0,0),
|
||||
);
|
||||
$colors: ($base-color, #adafbc);
|
||||
$colors: ($base-color, map-get($default-colors, "shadow"));
|
||||
|
||||
margin-right: 20px;
|
||||
-webkit-appearance: none;
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
& + span {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
cursor: $cursor-click-url, pointer;
|
||||
}
|
||||
|
||||
&:checked + span::before {
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
.table {
|
||||
.nes-table {
|
||||
table-layout: fixed;
|
||||
background-color: #fff;
|
||||
|
||||
&.is-centered th {
|
||||
text-align: center;
|
||||
}
|
||||
&.is-bordered {
|
||||
box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
|
||||
|
||||
background-color: $background-color;
|
||||
@mixin thsAndTdsBoxShadow($color) {
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem;
|
||||
@@ -16,14 +10,46 @@
|
||||
|
||||
tr {
|
||||
th + th {
|
||||
box-shadow: -4px 0 $base-color;
|
||||
box-shadow: -4px 0 $color;
|
||||
}
|
||||
td {
|
||||
box-shadow: 0 -4px $base-color;
|
||||
box-shadow: 0 -4px $color;
|
||||
}
|
||||
td:not(:first-child) {
|
||||
box-shadow: -4px 0 $base-color, 0 -4px $base-color;
|
||||
box-shadow: -4px 0 $color, 0 -4px $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-centered th {
|
||||
text-align: center;
|
||||
}
|
||||
&.is-bordered {
|
||||
margin: 4px;
|
||||
box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
|
||||
@include thsAndTdsBoxShadow($base-color);
|
||||
}
|
||||
&.is-dark {
|
||||
position: relative;
|
||||
color: $background-color;
|
||||
background-color: $base-color;
|
||||
box-shadow: 4px -4px $base-color, -4px -4px $base-color, -4px 4px $base-color,
|
||||
4px 4px $base-color;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
background: linear-gradient(to left, transparent 4px, $background-color 4px) no-repeat,
|
||||
linear-gradient(to bottom, transparent 4px, $background-color 4px) no-repeat,
|
||||
linear-gradient(to right, transparent 4px, $background-color 4px) no-repeat,
|
||||
linear-gradient(to top, transparent 4px, $background-color 4px) no-repeat;
|
||||
background-position: 100% 0, 100% 0, 0 100%, 0 100%;
|
||||
background-size: calc(100% - 4px) 4px, 4px calc(100% - 4px);
|
||||
}
|
||||
|
||||
@include thsAndTdsBoxShadow($background-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
.input {
|
||||
.nes-input,
|
||||
.nes-textarea {
|
||||
@mixin border-style($border, $outline) {
|
||||
outline-color: $outline;
|
||||
// prettier-ignore
|
||||
@@ -9,29 +10,30 @@
|
||||
-4px 0 $border;
|
||||
}
|
||||
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 4px;
|
||||
border: none;
|
||||
|
||||
@include border-style($base-color, #e7e7e7);
|
||||
@include border-style($base-color, map-get($default-colors, "hover"));
|
||||
|
||||
&.is-success {
|
||||
@include border-style(#92cc41, #76c442);
|
||||
@include border-style(map-get($success-colors, "normal"), map-get($success-colors, "hover"));
|
||||
}
|
||||
&.is-warning {
|
||||
@include border-style(#f7d51d, #f2c409);
|
||||
@include border-style(map-get($warning-colors, "normal"), map-get($warning-colors, "hover"));
|
||||
}
|
||||
&.is-error {
|
||||
@include border-style(#e76e55, #ce372b);
|
||||
@include border-style(map-get($error-colors, "normal"), map-get($error-colors, "hover"));
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
.nes-field {
|
||||
> label {
|
||||
display: block;
|
||||
}
|
||||
.input {
|
||||
.nes-input,
|
||||
.nes-textarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -47,9 +49,25 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.input {
|
||||
.nes-input,
|
||||
.nes-textarea {
|
||||
flex-basis: 0;
|
||||
flex-grow: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.field.is-inline {
|
||||
display: block;
|
||||
|
||||
> label {
|
||||
margin-bottom: 0.5rem; // reboot.css:label
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
20
scss/icons/google.scss
Normal file
20
scss/icons/google.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
$icon-google-colors: (#4285f4, #fff, #db4437, #f4b400, #0f9d58);
|
||||
// prettier-ignore
|
||||
$icon-google: (
|
||||
( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
|
||||
( 2,2,2,2,2,3,3,3,3,3,3,2,2,2,2,2 ),
|
||||
( 2,2,2,3,3,3,3,3,3,3,3,3,3,2,2,2 ),
|
||||
( 2,2,3,3,3,3,3,3,3,3,3,3,2,2,2,2 ),
|
||||
( 2,3,3,3,3,2,2,2,2,2,3,2,2,2,2,2 ),
|
||||
( 4,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2 ),
|
||||
( 4,4,3,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
|
||||
( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
|
||||
( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
|
||||
( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
|
||||
( 4,4,5,2,2,2,2,2,2,2,2,2,1,1,1,2 ),
|
||||
( 4,5,5,5,2,2,2,2,2,2,2,1,1,1,1,2 ),
|
||||
( 2,5,5,5,5,2,2,2,2,2,5,1,1,1,2,2 ),
|
||||
( 2,2,5,5,5,5,5,5,5,5,5,5,1,1,2,2 ),
|
||||
( 2,2,2,5,5,5,5,5,5,5,5,5,5,2,2,2 ),
|
||||
( 0,2,2,2,2,5,5,5,5,5,5,2,2,2,2,0 )
|
||||
);
|
||||
@@ -8,12 +8,17 @@
|
||||
@import "facebook.scss";
|
||||
@import "github.scss";
|
||||
@import "youtube.scss";
|
||||
@import "google.scss";
|
||||
@import "medium.scss";
|
||||
@import "twitch.scss";
|
||||
@import "reddit.scss";
|
||||
@import "whatsapp.scss";
|
||||
|
||||
// others
|
||||
@import "close.scss";
|
||||
@import "trophy.scss";
|
||||
|
||||
.icon {
|
||||
.nes-icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@@ -47,10 +52,19 @@
|
||||
&.star.is-empty::before {
|
||||
@include pixelize($icon-star-empty, $icon-star-empty-colors, $px);
|
||||
}
|
||||
&.star.is-half::before {
|
||||
@include pixelize($icon-star-half, $icon-star-colors, $px);
|
||||
}
|
||||
&.star.is-transparent::before {
|
||||
@include pixelize($icon-star-transparent, $icon-star-colors, $px);
|
||||
}
|
||||
|
||||
&.trophy::before {
|
||||
@include pixelize($icon-trophy, $icon-trophy-colors, $px);
|
||||
}
|
||||
&.trophy.is-empty::before {
|
||||
@include pixelize($icon-trophy-empty, $icon-trophy-empty-colors, $px);
|
||||
}
|
||||
|
||||
&.like::before {
|
||||
@include pixelize($icon-like, $icon-like-colors, $px);
|
||||
@@ -71,18 +85,42 @@
|
||||
@include pixelize($icon-github, $icon-github-colors, $px);
|
||||
}
|
||||
|
||||
&.youtube::before {
|
||||
@include pixelize($icon-youtube, $icon-youtube-colors, $px);
|
||||
}
|
||||
|
||||
&.close::before {
|
||||
@include pixelize($icon-close, $icon-close-colors, $px);
|
||||
}
|
||||
|
||||
&.youtube::before {
|
||||
@include pixelize($icon-youtube, $icon-youtube-colors, $px);
|
||||
&.google::before {
|
||||
@include pixelize($icon-google, $icon-google-colors, $px);
|
||||
}
|
||||
|
||||
&.medium::before {
|
||||
@include pixelize($icon-medium, $icon-medium-colors, $px);
|
||||
}
|
||||
|
||||
&.twitch::before {
|
||||
@include pixelize($icon-twitch, $icon-twitch-colors, $px);
|
||||
}
|
||||
|
||||
&.reddit::before {
|
||||
@include pixelize($icon-reddit, $icon-reddit-colors, $px);
|
||||
}
|
||||
|
||||
&.whatsapp::before {
|
||||
@include pixelize($icon-whatsapp, $icon-whatsapp-colors, $px);
|
||||
}
|
||||
}
|
||||
|
||||
// default
|
||||
@include setup(2px);
|
||||
|
||||
&.is-small {
|
||||
@include setup(1px);
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
@include setup(3px);
|
||||
}
|
||||
|
||||
20
scss/icons/medium.scss
Normal file
20
scss/icons/medium.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
$icon-medium-colors: (#fff, #12100e);
|
||||
// prettier-ignore
|
||||
$icon-medium: (
|
||||
( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
|
||||
( 2,1,1,1,2,2,2,2,2,2,2,1,1,1,1,2 ),
|
||||
( 2,2,1,1,2,2,2,2,2,2,2,1,1,1,2,2 ),
|
||||
( 2,2,1,1,1,2,2,2,2,2,2,1,1,1,2,2 ),
|
||||
( 2,2,1,1,1,1,2,2,2,2,1,1,1,1,2,2 ),
|
||||
( 2,2,1,1,1,1,2,2,2,2,1,1,1,1,2,2 ),
|
||||
( 2,2,1,1,1,1,2,2,2,1,1,1,1,1,2,2 ),
|
||||
( 2,2,1,2,1,1,1,2,2,1,1,1,1,1,2,2 ),
|
||||
( 2,2,1,2,1,1,1,2,1,1,2,1,1,1,2,2 ),
|
||||
( 2,2,1,2,2,1,1,1,1,1,2,1,1,1,2,2 ),
|
||||
( 2,2,1,2,2,1,1,1,1,2,2,1,1,1,2,2 ),
|
||||
( 2,2,1,2,2,2,1,1,1,2,2,1,1,1,2,2 ),
|
||||
( 2,2,1,2,2,2,1,1,2,2,2,1,1,1,2,2 ),
|
||||
( 2,2,1,2,2,2,2,1,2,2,2,1,1,1,2,2 ),
|
||||
( 2,1,1,1,2,2,2,2,2,2,1,1,1,1,1,2 ),
|
||||
( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
|
||||
);
|
||||
20
scss/icons/reddit.scss
Normal file
20
scss/icons/reddit.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
$icon-reddit-colors: (#fff, #f40);
|
||||
// prettier-ignore
|
||||
$icon-reddit: (
|
||||
( 0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0 ),
|
||||
( 0,2,2,2,2,2,2,2,1,1,1,2,1,2,2,0 ),
|
||||
( 2,2,2,2,2,2,2,1,2,2,2,1,1,1,2,2 ),
|
||||
( 2,2,2,2,2,2,2,1,2,2,2,2,1,2,2,2 ),
|
||||
( 2,2,2,2,2,2,1,1,1,1,2,2,2,2,2,2 ),
|
||||
( 2,1,1,2,1,1,1,1,1,1,1,1,2,1,1,2 ),
|
||||
( 2,1,2,1,1,1,1,1,1,1,1,1,1,2,1,2 ),
|
||||
( 2,2,1,1,1,2,2,1,1,2,2,1,1,1,2,2 ),
|
||||
( 2,1,1,1,1,2,2,1,1,2,2,1,1,1,1,2 ),
|
||||
( 2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2 ),
|
||||
( 2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2 ),
|
||||
( 2,2,1,1,1,2,1,1,1,1,2,1,1,1,2,2 ),
|
||||
( 2,2,2,1,1,1,2,2,2,2,1,1,1,2,2,2 ),
|
||||
( 2,2,2,2,1,1,1,1,1,1,1,1,2,2,2,2 ),
|
||||
( 0,2,2,2,2,2,1,1,1,1,2,2,2,2,2,0 ),
|
||||
( 0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0 )
|
||||
);
|
||||
@@ -39,3 +39,41 @@ $icon-star-empty: (
|
||||
(1,0,0,1,1,0,0,0,0,0,1,1,0,0,1,0),
|
||||
(1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0)
|
||||
);
|
||||
|
||||
$icon-star-half: (
|
||||
(0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0),
|
||||
(0, 0, 0, 0, 0, 0, 2, 3, 2, 0, 0, 0, 0, 0, 0, 0),
|
||||
(0, 0, 0, 0, 0, 0, 2, 3, 2, 0, 0, 0, 0, 0, 0, 0),
|
||||
(0, 0, 0, 0, 0, 2, 3, 3, 0, 2, 0, 0, 0, 0, 0, 0),
|
||||
(0, 0, 0, 0, 0, 2, 3, 3, 0, 2, 0, 0, 0, 0, 0, 0),
|
||||
(2, 2, 2, 2, 2, 2, 3, 3, 0, 0, 2, 2, 2, 2, 2, 0),
|
||||
(2, 3, 3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 2, 0),
|
||||
(0, 2, 3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 2, 0, 0),
|
||||
(0, 0, 2, 3, 3, 3, 3, 3, 0, 0, 0, 0, 2, 0, 0, 0),
|
||||
(0, 0, 0, 2, 3, 3, 3, 3, 0, 0, 0, 2, 0, 0, 0, 0),
|
||||
(0, 0, 2, 3, 3, 3, 3, 4, 0, 0, 0, 0, 2, 0, 0, 0),
|
||||
(0, 0, 2, 3, 3, 3, 4, 4, 0, 0, 0, 0, 2, 0, 0, 0),
|
||||
(0, 2, 3, 3, 4, 4, 4, 2, 0, 0, 0, 0, 0, 2, 0, 0),
|
||||
(0, 2, 3, 4, 4, 2, 2, 0, 2, 2, 0, 0, 0, 2, 0, 0),
|
||||
(2, 4, 4, 2, 2, 0, 0, 0, 0, 0, 2, 2, 0, 0, 2, 0),
|
||||
(2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 0)
|
||||
);
|
||||
|
||||
$icon-star-transparent: (
|
||||
(0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0),
|
||||
(0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 0, 0),
|
||||
(0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 0, 0),
|
||||
(0, 0, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0),
|
||||
(0, 0, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0),
|
||||
(2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0),
|
||||
(2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0),
|
||||
(0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0),
|
||||
(0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0),
|
||||
(0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0),
|
||||
(0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0),
|
||||
(0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0),
|
||||
(0, 2, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 2, 0, 0),
|
||||
(0, 2, 0, 0, 0, 2, 2, 0, 2, 2, 0, 0, 0, 2, 0, 0),
|
||||
(2, 0, 0, 2, 2, 0, 0, 0, 0, 0, 2, 2, 0, 0, 2, 0),
|
||||
(2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 0)
|
||||
);
|
||||
|
||||
@@ -16,10 +16,26 @@ $icon-trophy: (
|
||||
(0,0,0,0,0,0,2,3,2,0,0,0,0,0,0,0),
|
||||
(0,0,0,0,0,2,2,3,2,2,0,0,0,0,0,0),
|
||||
(0,0,0,0,2,3,3,3,3,4,2,0,0,0,0,0),
|
||||
(0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0),
|
||||
(0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0)
|
||||
);
|
||||
|
||||
// 2 black
|
||||
// 3 yellow
|
||||
// 1 white
|
||||
// 4 orange
|
||||
$icon-trophy-empty-colors: (#adafbb);
|
||||
// prettier-ignore
|
||||
$icon-trophy-empty: (
|
||||
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0),
|
||||
(0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
|
||||
(1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0),
|
||||
(1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0),
|
||||
(1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0),
|
||||
(0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0),
|
||||
(0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
|
||||
(0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
|
||||
(0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0),
|
||||
(0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0),
|
||||
(0,0,0,0,0,1,0,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,0,1,0,1,0,0,0,0,0,0,0),
|
||||
(0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0),
|
||||
(0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0),
|
||||
(0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0)
|
||||
);
|
||||
|
||||
20
scss/icons/twitch.scss
Normal file
20
scss/icons/twitch.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
$icon-twitch-colors: (#fff, #6441a4);
|
||||
// prettier-ignore
|
||||
$icon-twitch: (
|
||||
( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
|
||||
( 2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,2 ),
|
||||
( 2,1,1,2,2,2,2,2,2,2,2,2,2,2,1,2 ),
|
||||
( 2,1,1,2,2,2,2,2,2,2,2,2,2,2,1,2 ),
|
||||
( 2,1,1,2,2,2,2,1,2,2,1,2,2,2,1,2 ),
|
||||
( 2,1,1,2,2,2,2,1,2,2,1,2,2,2,1,2 ),
|
||||
( 2,1,1,2,2,2,2,1,2,2,1,2,2,2,1,2 ),
|
||||
( 2,1,1,2,2,2,2,1,2,2,1,2,2,2,1,2 ),
|
||||
( 2,1,1,2,2,2,2,2,2,2,2,2,2,2,1,2 ),
|
||||
( 2,1,1,2,2,2,2,2,2,2,2,2,2,1,1,2 ),
|
||||
( 2,1,1,2,2,2,2,2,2,2,2,2,1,1,2,2 ),
|
||||
( 2,1,1,1,1,2,2,1,1,1,1,1,1,2,2,2 ),
|
||||
( 2,1,1,1,1,2,1,1,1,1,1,1,2,2,2,2 ),
|
||||
( 2,2,2,2,1,1,1,1,2,2,2,2,2,2,2,2 ),
|
||||
( 2,2,2,2,1,1,2,2,2,2,2,2,2,2,2,2 ),
|
||||
( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 )
|
||||
);
|
||||
19
scss/icons/whatsapp.scss
Normal file
19
scss/icons/whatsapp.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
$icon-whatsapp-colors: (#00ba37, #fff);
|
||||
// prettier-ignore
|
||||
$icon-whatsapp: (
|
||||
( 0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0 ),
|
||||
( 0,0,1,1,1,2,2,2,2,2,2,2,1,1,1,0 ),
|
||||
( 0,1,1,1,2,1,1,1,1,1,1,1,2,1,1,1 ),
|
||||
( 0,1,1,2,1,1,1,1,1,1,1,1,1,2,1,1 ),
|
||||
( 0,1,1,2,1,2,2,1,1,1,1,1,1,2,1,1 ),
|
||||
( 0,1,2,1,1,2,2,1,1,1,1,1,1,1,2,1 ),
|
||||
( 0,1,2,1,1,2,1,1,1,1,1,1,1,1,2,1 ),
|
||||
( 0,1,2,1,1,1,2,2,1,1,1,1,1,1,2,1 ),
|
||||
( 0,1,2,1,1,1,1,2,2,1,1,1,1,1,2,1 ),
|
||||
( 0,1,2,1,1,1,1,1,2,1,2,2,1,1,2,1 ),
|
||||
( 0,1,1,2,1,1,1,1,1,2,2,2,1,2,1,1 ),
|
||||
( 0,1,1,2,1,1,1,1,1,1,1,1,1,2,1,1 ),
|
||||
( 0,1,2,1,2,1,1,1,1,1,1,1,2,1,1,1 ),
|
||||
( 0,1,2,2,1,2,2,2,2,2,2,2,1,1,1,0 ),
|
||||
( 0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0 )
|
||||
);
|
||||
@@ -5,4 +5,13 @@
|
||||
@import "snes-icon.scss";
|
||||
@import "snes-jp-icon.scss";
|
||||
@import "bcrikko.scss";
|
||||
@import "ash.scss";
|
||||
@import "octocat.scss";
|
||||
@import "mario.scss";
|
||||
@import "pokeball.scss";
|
||||
@import "bulbasaur.scss";
|
||||
@import "charmander.scss";
|
||||
@import "squirtle.scss";
|
||||
@import "phone.scss";
|
||||
@import "smartphone.scss";
|
||||
@import "kirby.scss";
|
||||
|
||||
39
scss/pixel-arts/ash.scss
Normal file
39
scss/pixel-arts/ash.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
.nes-ash {
|
||||
$px: 6px;
|
||||
// prettier-ignore
|
||||
$ash-colors: (#f8f8ff, #ff614e, #007f7f,
|
||||
#181818, #ffe3c5, #426adb, #4169e1);
|
||||
// prettier-ignore
|
||||
$ash: (
|
||||
(0,0,0,0,4,4,4,4,4,4,0,0,0,0),
|
||||
(0,0,0,4,2,2,2,1,1,3,4,0,0,0),
|
||||
(0,0,4,2,2,2,2,1,1,1,1,4,1,0),
|
||||
(0,0,4,2,2,2,2,1,1,3,3,4,4,0),
|
||||
(0,4,4,4,2,2,2,2,2,2,2,2,2,4),
|
||||
(0,4,4,4,4,4,4,4,2,2,2,4,4,1),
|
||||
(4,4,4,4,4,4,4,5,5,4,5,4,1,1),
|
||||
(0,4,4,5,5,5,4,5,5,4,5,4,1,1),
|
||||
(0,0,4,5,5,5,5,5,5,5,5,4,0,0),
|
||||
(0,4,7,4,4,5,5,5,5,5,4,0,0,0),
|
||||
(0,4,7,4,4,4,4,4,4,4,0,0,0,0),
|
||||
(0,4,4,5,5,4,7,7,4,4,4,0,0,0),
|
||||
(4,3,4,5,5,4,7,4,4,3,3,4,0,0),
|
||||
(4,3,3,4,4,4,4,4,3,3,4,0,0,0),
|
||||
(0,4,4,0,0,0,0,0,4,4,0,0,0,0)
|
||||
);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $px * 14;
|
||||
height: $px * 15;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: $px * -1;
|
||||
left: $px * -1;
|
||||
content: "";
|
||||
background: transparent;
|
||||
|
||||
@include pixelize($ash, $ash-colors, $px);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
.bcrikko {
|
||||
.nes-bcrikko {
|
||||
$px: 4px;
|
||||
$bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff);
|
||||
|
||||
|
||||
41
scss/pixel-arts/bulbasaur.scss
Normal file
41
scss/pixel-arts/bulbasaur.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
.nes-bulbasaur {
|
||||
$px: 6px;
|
||||
// prettier-ignore
|
||||
$bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1,
|
||||
#3fc3b5, #fdfdf5, #ca242a);
|
||||
// prettier-ignore
|
||||
$bulbasaur: (
|
||||
(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,1,2,2,2,1),
|
||||
(0,0,0,0,0,0,0,0,0,1,1,1,2,2,2,1),
|
||||
(0,0,0,0,0,0,0,1,1,2,2,3,2,2,3,2,1,1),
|
||||
(0,0,0,1,1,0,1,2,2,2,3,3,2,2,3,2,2,2,1),
|
||||
(0,0,1,4,4,1,1,2,2,3,2,3,2,2,2,3,2,2,2,1),
|
||||
(0,0,1,4,4,4,1,1,3,2,3,2,2,2,2,2,3,2,2,1),
|
||||
(0,0,1,4,4,4,4,5,1,2,3,2,2,2,2,2,3,2,2,1),
|
||||
(0,1,4,4,5,4,5,5,4,1,1,1,2,2,2,2,3,2,1),
|
||||
(1,1,5,4,4,4,4,4,4,4,4,1,2,2,2,1,1,1,1),
|
||||
(1,1,5,4,4,4,5,4,4,4,1,5,1,1,1,5,5,5,1),
|
||||
(1,4,4,4,4,5,4,1,1,4,5,5,5,5,5,1,5,6,1),
|
||||
(1,5,4,4,4,4,1,7,6,6,5,5,1,5,5,1,1,1),
|
||||
(0,1,5,4,4,4,1,7,6,4,5,1,5,5,1),
|
||||
(0,0,1,1,5,5,5,5,5,5,1,5,5,5,1),
|
||||
(0,0,0,0,1,1,1,1,1,1,1,6,5,6,1),
|
||||
(0,0,0,0,0,0,0,0,0,0,0,1,1,1,0),
|
||||
);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $px * 20;
|
||||
height: $px * 17;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: $px * -1;
|
||||
left: $px * -1;
|
||||
content: "";
|
||||
background: transparent;
|
||||
|
||||
@include pixelize($bulbasaur, $bulbasaur-colors, $px);
|
||||
}
|
||||
}
|
||||
42
scss/pixel-arts/charmander.scss
Normal file
42
scss/pixel-arts/charmander.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
.nes-charmander {
|
||||
$px: 6px;
|
||||
// prettier-ignore
|
||||
$charmander-colors: (#000202, #f77702, #eb2010,
|
||||
#fdfcff, #e5d70a, #e7d70e);
|
||||
// prettier-ignore
|
||||
$charmander: (
|
||||
(0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1),
|
||||
(0,0,0,1,2,2,2,2,1,0,0,0,0,0,0,0,1,3,1),
|
||||
(0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1),
|
||||
(0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1),
|
||||
(0,1,2,2,2,2,2,2,2,2,1,0,0,0,0,1,3,3,2,3,1),
|
||||
(1,2,2,2,2,4,1,2,2,2,1,0,0,0,0,1,3,2,6,3,1),
|
||||
(1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,1,3,5,5,3,1),
|
||||
(1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,0,1,5,1,1),
|
||||
(0,1,2,2,2,2,2,2,2,2,2,2,1,0,0,0,1,2,1),
|
||||
(0,0,1,1,2,2,2,2,2,2,2,2,2,1,0,1,2,2,1),
|
||||
(0,0,0,0,1,1,1,2,2,1,2,2,2,1,1,2,2,1),
|
||||
(0,0,0,0,0,1,6,5,1,2,2,2,2,2,1,2,2,1),
|
||||
(0,0,0,0,0,1,5,5,5,1,1,2,2,2,1,2,1),
|
||||
(0,0,0,0,1,4,1,6,5,5,2,2,2,2,1,1),
|
||||
(0,0,0,0,0,1,1,1,5,5,2,2,2,1,1),
|
||||
(0,0,0,0,0,0,0,0,1,1,1,0,1,1),
|
||||
(0,0,0,0,0,0,0,0,0,1,4,0,4,1),
|
||||
(0,0,0,0,0,0,0,0,0,0,1,1,1,0)
|
||||
);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $px * 21;
|
||||
height: $px * 18;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: $px * -1;
|
||||
left: $px * -1;
|
||||
content: "";
|
||||
background: transparent;
|
||||
|
||||
@include pixelize($charmander, $charmander-colors, $px);
|
||||
}
|
||||
}
|
||||
38
scss/pixel-arts/kirby.scss
Normal file
38
scss/pixel-arts/kirby.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
.nes-kirby {
|
||||
$px: 6px;
|
||||
$kirby-colors: (#000, #ffaccc, #ff5478);
|
||||
// prettier-ignore
|
||||
$kirby: (
|
||||
(0,0,1,1,0,1,1,1,1,1,0,0,0,0),
|
||||
(0,1,2,2,1,2,2,2,2,2,1,1,0,0),
|
||||
(1,2,2,1,2,2,2,2,2,2,2,2,1,0),
|
||||
(1,2,2,2,2,2,1,2,1,2,2,2,2,1),
|
||||
(1,2,2,2,2,2,1,2,1,2,2,2,2,1,),
|
||||
(1,2,2,2,2,2,1,2,1,2,2,2,2,2,1),
|
||||
(1,2,2,2,3,3,2,2,2,3,3,2,2,2,2,1),
|
||||
(1,2,2,2,2,2,2,1,2,2,2,2,2,2,2,1),
|
||||
(0,1,2,2,2,2,2,1,2,2,2,2,2,2,2,1),
|
||||
(0,1,2,2,2,2,2,2,2,2,2,2,1,1,1,0),
|
||||
(0,1,2,2,2,2,2,2,2,2,2,1,3,3,3,1),
|
||||
(0,0,1,2,2,2,2,2,2,2,1,3,3,3,3,1),
|
||||
(0,0,1,1,2,2,2,2,2,2,1,3,3,3,3,1),
|
||||
(0,1,3,3,1,1,2,2,2,1,3,3,3,3,1),
|
||||
(1,3,3,3,3,3,1,1,1,1,1,3,3,1),
|
||||
(0,1,1,1,1,1,1,0,0,0,1,1,1,0)
|
||||
);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $px * 16;
|
||||
height: $px * 16;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: $px * -1;
|
||||
left: $px * -1;
|
||||
content: "";
|
||||
background: transparent;
|
||||
|
||||
@include pixelize($kirby, $kirby-colors, $px);
|
||||
}
|
||||
}
|
||||
40
scss/pixel-arts/mario.scss
Normal file
40
scss/pixel-arts/mario.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
.nes-mario {
|
||||
$px: 6px;
|
||||
// prettier-ignore
|
||||
$mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,
|
||||
#1560ad, #aeaeac, #fef102);
|
||||
// prettier-ignore
|
||||
$mario: (
|
||||
(0,0,0,0,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,2,2,2,3,3,4,3,0,0,0,0),
|
||||
(0,0,2,3,2,3,3,3,4,3,3,3,0,0),
|
||||
(0,0,2,3,2,2,3,3,3,4,3,3,3,0),
|
||||
(0,0,2,2,3,3,3,3,4,4,4,4,0,0),
|
||||
(0,0,0,0,3,3,3,3,3,3,3,0,0,0),
|
||||
(0,0,0,0,1,5,1,1,5,0,0,0,0,0),
|
||||
(0,0,1,1,1,5,1,1,5,1,1,1,0,0),
|
||||
(0,1,1,1,1,5,5,5,5,1,1,1,1,0),
|
||||
(0,6,6,1,5,7,5,5,7,5,1,6,6,0),
|
||||
(0,6,6,6,5,5,5,5,5,5,6,6,6,0),
|
||||
(0,6,6,5,5,5,5,5,5,5,5,6,6,0),
|
||||
(0,0,0,5,5,5,0,0,5,5,5,0,0,0),
|
||||
(0,0,2,2,2,0,0,0,0,2,2,2,0,0),
|
||||
(0,2,2,2,2,0,0,0,0,2,2,2,2,0)
|
||||
);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $px * 14;
|
||||
height: $px * 16;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: $px * -1;
|
||||
left: $px * -1;
|
||||
content: "";
|
||||
background: transparent;
|
||||
|
||||
@include pixelize($mario, $mario-colors, $px);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
.octocat {
|
||||
.nes-octocat {
|
||||
$px: 6px;
|
||||
$octocat-colors: (#333, #ffdec4, #cb7066);
|
||||
// prettier-ignore
|
||||
|
||||
43
scss/pixel-arts/phone.scss
Normal file
43
scss/pixel-arts/phone.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
.nes-phone {
|
||||
$px: 6px;
|
||||
$phone-colors: (#596985, #3c4665, #000);
|
||||
// prettier-ignore
|
||||
$phone: (
|
||||
(0,0,3,3,3,3,3,3),
|
||||
(0,3,3,2,2,2,1,3),
|
||||
(3,3,2,2,2,2,1,3),
|
||||
(3,2,2,2,2,2,1,3),
|
||||
(3,2,2,2,2,2,1,3),
|
||||
(3,2,2,2,2,2,1,3),
|
||||
(3,2,2,3,3,3,3,3),
|
||||
(3,2,2,3,0,0,0,0),
|
||||
(3,2,2,3,0,0,0,0),
|
||||
(3,2,2,3,0,0,0,0),
|
||||
(3,2,2,3,0,0,0,0),
|
||||
(3,2,2,3,0,0,0,0),
|
||||
(3,2,2,3,0,0,0,0),
|
||||
(3,2,2,3,0,0,0,0),
|
||||
(3,2,2,3,3,3,3,3),
|
||||
(3,2,2,2,2,2,1,3),
|
||||
(3,2,2,2,2,2,1,3),
|
||||
(3,2,2,2,2,2,1,3),
|
||||
(3,3,2,2,2,2,1,3),
|
||||
(0,3,3,2,2,2,1,3),
|
||||
(0,0,3,3,3,3,3,3)
|
||||
);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $px * 8;
|
||||
height: $px * 21;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: $px * -1;
|
||||
left: $px * -1;
|
||||
content: "";
|
||||
background: transparent;
|
||||
|
||||
@include pixelize($phone, $phone-colors, $px);
|
||||
}
|
||||
}
|
||||
38
scss/pixel-arts/pokeball.scss
Normal file
38
scss/pixel-arts/pokeball.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
.nes-pokeball {
|
||||
$px: 6px;
|
||||
$pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1);
|
||||
// prettier-ignore
|
||||
$pokeball: (
|
||||
(0,0,0,0,0,1,1,1,1,0,0,0,0,0),
|
||||
(0,0,0,1,1,2,2,2,2,1,1,0,0,0),
|
||||
(0,0,1,3,3,2,2,2,2,2,2,1,0,0),
|
||||
(0,1,3,3,2,2,2,2,2,2,2,1,1,0),
|
||||
(0,1,3,2,2,2,2,2,2,2,2,2,1,0),
|
||||
(1,3,2,2,2,2,2,2,2,2,2,2,2,1),
|
||||
(1,1,1,2,2,2,2,1,1,1,2,2,2,1),
|
||||
(1,1,1,1,2,2,1,3,3,3,1,2,2,1),
|
||||
(1,4,3,1,1,1,1,3,3,3,1,1,1,1),
|
||||
(0,1,3,3,3,1,1,3,3,3,1,3,1,0),
|
||||
(0,1,3,3,3,3,3,1,1,1,3,3,1,0),
|
||||
(0,0,1,4,4,3,3,3,3,3,3,1,0,0),
|
||||
(0,0,0,1,1,4,4,4,4,1,1,0,0,0),
|
||||
(0,0,0,0,0,1,1,1,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,0,0,0,0,0,0,0,0,0),
|
||||
);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $px * 14;
|
||||
height: $px * 14;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: $px * -1;
|
||||
left: $px * -1;
|
||||
content: "";
|
||||
background: transparent;
|
||||
|
||||
@include pixelize($pokeball, $pokeball-colors, $px);
|
||||
}
|
||||
}
|
||||
49
scss/pixel-arts/smartphone.scss
Normal file
49
scss/pixel-arts/smartphone.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
.nes-smartphone {
|
||||
$px: 6px;
|
||||
$smartphone-colors: (#fff, #060606);
|
||||
// prettier-ignore
|
||||
$smartphone: (
|
||||
(0,2,2,2,2,2,2,2,2,2,2,2,2,2),
|
||||
(2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
|
||||
(2,1,1,1,2,2,2,2,2,2,2,1,1,1,2),
|
||||
(2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
|
||||
(2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
|
||||
(2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
|
||||
(2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
|
||||
(2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
|
||||
(0,2,2,2,2,2,2,2,2,2,2,2,2,2)
|
||||
);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $px * 16;
|
||||
height: $px * 27;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: $px * -1;
|
||||
left: $px * -1;
|
||||
content: "";
|
||||
background: transparent;
|
||||
|
||||
@include pixelize($smartphone, $smartphone-colors, $px);
|
||||
}
|
||||
}
|
||||
41
scss/pixel-arts/squirtle.scss
Normal file
41
scss/pixel-arts/squirtle.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
.nes-squirtle {
|
||||
$px: 6px;
|
||||
// prettier-ignore
|
||||
$squirtle-colors: (#000, #9cf, #cb6633,
|
||||
#9fa1a1, #fff, #f89934, #ff3);
|
||||
// prettier-ignore
|
||||
$squirtle: (
|
||||
(0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1),
|
||||
(0,0,1,2,2,2,2,1,1,0,0,0,0,0,0,1,2,2,2,1),
|
||||
(0,1,2,2,2,2,2,2,2,1,1,0,0,0,1,2,2,2,2,2,1),
|
||||
(0,1,2,2,2,2,2,2,2,1,6,1,1,0,1,2,2,2,1,2,1),
|
||||
(1,3,2,2,2,2,2,2,2,2,6,6,6,1,2,2,2,1,2,2,1),
|
||||
(1,2,2,2,2,5,1,2,2,2,5,6,6,6,1,2,2,1,2,1),
|
||||
(1,2,2,2,2,1,3,2,2,2,5,6,6,6,1,2,1,1,1),
|
||||
(0,1,2,2,2,1,3,2,2,2,1,5,6,6,6,1,1),
|
||||
(0,0,1,1,2,2,2,2,1,1,2,2,5,6,6,1),
|
||||
(0,0,1,2,1,1,1,1,2,2,2,2,5,6,6,1),
|
||||
(0,0,0,1,1,7,7,1,2,2,2,1,5,6,6,1),
|
||||
(0,0,0,0,0,1,7,7,1,1,1,1,5,6,6,1),
|
||||
(0,0,0,0,1,2,1,7,7,7,7,7,1,5,1,0),
|
||||
(0,0,0,0,0,1,1,1,1,7,7,2,1,5,1,0),
|
||||
(0,0,0,0,0,0,0,0,1,1,1,2,1,1),
|
||||
(0,0,0,0,0,0,0,0,0,1,2,2,2,1),
|
||||
(0,0,0,0,0,0,0,0,0,0,1,1,1,0),
|
||||
);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $px * 21;
|
||||
height: $px * 17;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: $px * -1;
|
||||
left: $px * -1;
|
||||
content: "";
|
||||
background: transparent;
|
||||
|
||||
@include pixelize($squirtle, $squirtle-colors, $px);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,27 @@
|
||||
@mixin pixelize($matrix, $colors, $size) {
|
||||
@mixin pixelize($matrix, $colors, $size, $default-color: null) {
|
||||
$ret: "";
|
||||
$moz: "";
|
||||
@if ($default-color == null) {
|
||||
// count number of each color in matrix and decide main color by highest count
|
||||
$matrix-colors: ();
|
||||
$counts: ();
|
||||
@each $row in $matrix {
|
||||
@each $item in $row {
|
||||
@if $item != 0 {
|
||||
$index: index($matrix-colors, $item);
|
||||
@if not $index {
|
||||
$matrix-colors: append($matrix-colors, $item);
|
||||
$counts: append($counts, 1);
|
||||
} @else {
|
||||
$count: nth($counts, $index) + 1;
|
||||
$counts: set-nth($counts, $index, $count);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// use index of the highest count to get the corresponding matrix color
|
||||
$default-color: nth($colors, nth($matrix-colors, index($counts, max($counts...))));
|
||||
}
|
||||
|
||||
@for $i from 1 through length($matrix) {
|
||||
$row: nth($matrix, $i);
|
||||
@@ -15,14 +36,20 @@
|
||||
}
|
||||
|
||||
$color: nth($colors, $dot);
|
||||
$ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
|
||||
$moz: $moz + ($j * $size)+" "+ ($i * $size)+" 0 0.020em " + $color;
|
||||
@if $color == $default-color {
|
||||
$ret: $ret + ($j * $size) + " " + ($i * $size);
|
||||
$moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em";
|
||||
} @else {
|
||||
$ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
|
||||
$moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em " + $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
width: $size;
|
||||
height: $size;
|
||||
color: $default-color;
|
||||
box-shadow: unquote($ret);
|
||||
@-moz-document url-prefix() {
|
||||
-webkit-box-shadow: unquote($moz);
|
||||
|
||||
Reference in New Issue
Block a user