mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-09-02 10:32:41 +02:00
Merge branch 'develop' into stray-pixels
This commit is contained in:
Abdullah Samman
GitHub
@@ -1,5 +1,6 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@import "reboot.scss";
|
||||
@import "color-palette.scss";
|
||||
@import "variables.scss";
|
||||
@import "generic.scss";
|
||||
|
||||
72
scss/base/color-palette.scss
Normal file
72
scss/base/color-palette.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
// https://en.wikipedia.org/wiki/List_of_video_game_console_palettes#NES
|
||||
|
||||
$color-black: #212529;
|
||||
$color-white: #fff;
|
||||
|
||||
$color-00: #7c7c7c;
|
||||
$color-01: #0000fc;
|
||||
$color-02: #0000bc;
|
||||
$color-03: #4428bc;
|
||||
$color-04: #940084;
|
||||
$color-05: #a80020;
|
||||
$color-06: #a81000;
|
||||
$color-07: #881400;
|
||||
$color-08: #503000;
|
||||
$color-09: #007800;
|
||||
$color-0A: #006800;
|
||||
$color-0B: #005800;
|
||||
$color-0C: #004058;
|
||||
$color-0D: #000;
|
||||
$color-0E: #000;
|
||||
$color-0F: #000;
|
||||
|
||||
$color-10: #bcbcbc;
|
||||
$color-11: #0078f8;
|
||||
$color-12: #0058f8;
|
||||
$color-13: #6844fc;
|
||||
$color-14: #d800cc;
|
||||
$color-15: #e40058;
|
||||
$color-16: #f83800;
|
||||
$color-17: #e45c10;
|
||||
$color-18: #ac7c00;
|
||||
$color-19: #00b800;
|
||||
$color-1A: #00a800;
|
||||
$color-1B: #00a844;
|
||||
$color-1C: #088;
|
||||
$color-1D: #000;
|
||||
$color-1E: #000;
|
||||
$color-1F: #000;
|
||||
|
||||
$color-20: #f8f8f8;
|
||||
$color-21: #3cbcfc;
|
||||
$color-22: #6888fc;
|
||||
$color-23: #9878f8;
|
||||
$color-24: #f878f8;
|
||||
$color-25: #f85898;
|
||||
$color-26: #f87858;
|
||||
$color-27: #fca044;
|
||||
$color-28: #f8b800;
|
||||
$color-29: #b8f818;
|
||||
$color-2A: #58d854;
|
||||
$color-2B: #58f898;
|
||||
$color-2C: #00e8d8;
|
||||
$color-2D: #787878;
|
||||
$color-2E: #000;
|
||||
$color-2F: #000;
|
||||
|
||||
$color-30: #fcfcfc;
|
||||
$color-31: #a4e4fc;
|
||||
$color-32: #b8b8f8;
|
||||
$color-33: #d8b8f8;
|
||||
$color-34: #f8b8f8;
|
||||
$color-35: #f8a4c0;
|
||||
$color-36: #f0d0b0;
|
||||
$color-37: #fbdfa6;
|
||||
$color-38: #f8d878;
|
||||
$color-39: #d8f878;
|
||||
$color-3A: #b8f8b8;
|
||||
$color-3B: #b8f8d8;
|
||||
$color-3C: #00fcfc;
|
||||
$color-3D: #d8d8d8;
|
||||
$color-3E: #000;
|
||||
$color-3F: #000;
|
||||
@@ -9,6 +9,10 @@ samp {
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
html {
|
||||
cursor: $cursor-url, auto;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: $font-size;
|
||||
color: $base-color;
|
||||
@@ -16,6 +20,15 @@ body {
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
cursor: $cursor-click-url, pointer;
|
||||
}
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
// Font
|
||||
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
|
||||
$font-family: "Press Start 2P" !default;
|
||||
$font-size: 16px !default;
|
||||
|
||||
$base-color: #212529;
|
||||
$background-color: #fff;
|
||||
$base-color: $color-black;
|
||||
$background-color: $color-white;
|
||||
|
||||
$cursor-url: url(../assets/cursor.png);
|
||||
$cursor-click-url: url(../assets/cursor-click.png);
|
||||
|
||||
@@ -5,3 +5,4 @@
|
||||
@import "radios.scss";
|
||||
@import "checkboxes.scss";
|
||||
@import "balloons.scss";
|
||||
@import "tables.scss";
|
||||
|
||||
@@ -14,6 +14,65 @@
|
||||
}
|
||||
}
|
||||
|
||||
@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 #212529,
|
||||
4px 0 $shadow,
|
||||
4px -4px #212529,
|
||||
8px 0 #212529,
|
||||
0 4px $shadow,
|
||||
4px 4px #212529,
|
||||
0 8px #212529,
|
||||
-4px 0 $hover-background,
|
||||
inset -2px 0 $shadow,
|
||||
-4px -4px #212529,
|
||||
-8px 0 #212529,
|
||||
-4px 4px #212529;
|
||||
}
|
||||
|
||||
&:active {
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $shadow,
|
||||
0 -8px #212529,
|
||||
4px 0 $hover-background,
|
||||
4px -4px #212529,
|
||||
8px 0 #212529,
|
||||
0 4px $hover-background,
|
||||
4px 4px #212529,
|
||||
0 8px #212529,
|
||||
-4px 0 $shadow,
|
||||
-4px -4px #212529,
|
||||
-8px 0 #212529,
|
||||
-4px 4px #212529;
|
||||
}
|
||||
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $background,
|
||||
0 -8px #212529,
|
||||
4px 0 $shadow,
|
||||
4px -4px #212529,
|
||||
8px 0 #212529,
|
||||
0 4px $shadow,
|
||||
4px 4px #212529,
|
||||
0 8px #212529,
|
||||
-4px 0 $background,
|
||||
-4px -4px #212529,
|
||||
-8px 0 #212529,
|
||||
-4px 4px #212529;
|
||||
}
|
||||
|
||||
// Default style
|
||||
.btn {
|
||||
$border-size: 4px;
|
||||
@@ -24,7 +83,7 @@
|
||||
margin: $border-size;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
cursor: $cursor-click-url, pointer;
|
||||
user-select: none;
|
||||
|
||||
@include btn-style($base-color, #fff, #e7e7e7, #adafbc);
|
||||
@@ -59,11 +118,21 @@
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&.is-disabled:hover,
|
||||
&.is-disabled:focus {
|
||||
color: $base-color;
|
||||
cursor: not-allowed;
|
||||
background-color: #d3d3d3;
|
||||
box-shadow: inset -4px -4px #adafbc;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
// Other styles
|
||||
// prettier-ignore
|
||||
$types:
|
||||
"primary" #fff #92cc41 #76c442 #4aa52e,
|
||||
"success" #fff #209cee #108de0 #006bb3,
|
||||
"primary" #fff #209cee #108de0 #006bb3,
|
||||
"success" #fff #92cc41 #76c442 #4aa52e,
|
||||
"warning" $base-color #f7d51d #f2c409 #e59400,
|
||||
"error" #fff #e76e55 #ce372b #8c2022;
|
||||
|
||||
@@ -72,4 +141,25 @@
|
||||
@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, #fff, #e7e7e7, #adafbc);
|
||||
|
||||
&::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)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
|
||||
& + span {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
cursor: $cursor-click-url, pointer;
|
||||
}
|
||||
|
||||
& + span::before,
|
||||
|
||||
@@ -72,27 +72,41 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.is-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.is-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.with-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-top: 2rem;
|
||||
|
||||
> .title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: table;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0;
|
||||
margin: -2rem 0 1rem;
|
||||
font-size: 1rem;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
&.is-rounded {
|
||||
> .title {
|
||||
margin-top: -2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-center {
|
||||
align-items: center;
|
||||
> .title {
|
||||
margin: -2.4rem auto 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-right {
|
||||
align-items: right;
|
||||
> .title {
|
||||
margin: -2.4rem 0 1rem auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -105,9 +119,11 @@
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
> .title {
|
||||
color: $background-color;
|
||||
background-color: $base-color;
|
||||
&.with-title {
|
||||
> .title {
|
||||
color: $background-color;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
& + span {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
cursor: $cursor-click-url, pointer;
|
||||
}
|
||||
|
||||
&:checked + span::before {
|
||||
|
||||
54
scss/elements/tables.scss
Normal file
54
scss/elements/tables.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.table {
|
||||
table-layout: fixed;
|
||||
background-color: $background-color;
|
||||
@mixin thsAndTdsBoxShadow($color) {
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
tr {
|
||||
th + th {
|
||||
box-shadow: -4px 0 $color;
|
||||
}
|
||||
td {
|
||||
box-shadow: 0 -4px $color;
|
||||
}
|
||||
td:not(:first-child) {
|
||||
box-shadow: -4px 0 $color, 0 -4px $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.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;
|
||||
@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);
|
||||
}
|
||||
}
|
||||
@@ -17,7 +17,7 @@
|
||||
@include border-style($base-color, #e7e7e7);
|
||||
|
||||
&.is-success {
|
||||
@include border-style(#209cee, #108de0);
|
||||
@include border-style(#92cc41, #76c442);
|
||||
}
|
||||
&.is-warning {
|
||||
@include border-style(#f7d51d, #f2c409);
|
||||
|
||||
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 )
|
||||
);
|
||||
@@ -18,3 +18,24 @@ $icon-heart: (
|
||||
(0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),
|
||||
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
|
||||
);
|
||||
|
||||
$icon-heart-empty-colors: (#adafbb);
|
||||
// prettier-ignore
|
||||
$icon-heart-empty: (
|
||||
(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,0,0,0,1,0,0,0,1,0,0,0,1,0,0),
|
||||
(1,0,0,0,0,0,1,0,1,0,0,0,0,0,1,0),
|
||||
(1,0,0,0,0,0,0,1,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,0,1,0),
|
||||
(1,0,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,1,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,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)
|
||||
);
|
||||
|
||||
@@ -7,9 +7,12 @@
|
||||
@import "twitter.scss";
|
||||
@import "facebook.scss";
|
||||
@import "github.scss";
|
||||
@import "youtube.scss";
|
||||
@import "google.scss";
|
||||
|
||||
// others
|
||||
@import "close.scss";
|
||||
@import "trophy.scss";
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
@@ -35,14 +38,27 @@
|
||||
&.heart::before {
|
||||
@include pixelize($icon-heart, $icon-heart-colors, $px);
|
||||
}
|
||||
&.heart.is-empty::before {
|
||||
@include pixelize($icon-heart-empty, $icon-heart-empty-colors, $px);
|
||||
}
|
||||
|
||||
&.star::before {
|
||||
@include pixelize($icon-star, $icon-star-colors, $px);
|
||||
}
|
||||
&.star.is-empty::before {
|
||||
@include pixelize($icon-star-empty, $icon-star-empty-colors, $px);
|
||||
}
|
||||
|
||||
&.trophy::before {
|
||||
@include pixelize($icon-trophy, $icon-trophy-colors, $px);
|
||||
}
|
||||
|
||||
&.like::before {
|
||||
@include pixelize($icon-like, $icon-like-colors, $px);
|
||||
}
|
||||
&.like.is-empty::before {
|
||||
@include pixelize($icon-like-empty, $icon-like-empty-colors, $px);
|
||||
}
|
||||
|
||||
&.twitter::before {
|
||||
@include pixelize($icon-twitter, $icon-twitter-colors, $px);
|
||||
@@ -59,6 +75,14 @@
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
|
||||
// default
|
||||
|
||||
@@ -18,3 +18,24 @@ $icon-like: (
|
||||
(0,2,2,2,0,2,2,2,2,2,2,2,2,0,0,0),
|
||||
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
|
||||
);
|
||||
|
||||
$icon-like-empty-colors: (#adafbb);
|
||||
// prettier-ignore
|
||||
$icon-like-empty: (
|
||||
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
|
||||
(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,0,1,1,1,1,1,1,0),
|
||||
(0,0,0,0,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),
|
||||
(1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1),
|
||||
(1,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0),
|
||||
(1,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0),
|
||||
(1,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0),
|
||||
(1,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0),
|
||||
(1,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0),
|
||||
(0,1,1,1,0,1,1,1,1,1,1,1,1,0,0,0),
|
||||
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
|
||||
);
|
||||
|
||||
@@ -18,3 +18,24 @@ $icon-star: (
|
||||
(2,4,4,2,2,0,0,0,0,0,2,2,4,4,2,0),
|
||||
(2,2,2,0,0,0,0,0,0,0,0,0,2,2,2,0)
|
||||
);
|
||||
|
||||
$icon-star-empty-colors: (#adafbb);
|
||||
// prettier-ignore
|
||||
$icon-star-empty: (
|
||||
(0,0,0,0,0,0,0,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,0,1,0,0,0,0,0,0),
|
||||
(0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0),
|
||||
(1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,0),
|
||||
(1,0,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,1,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,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,1,0,0,0,0,0,1,0,0,0,0,0,1,0,0),
|
||||
(0,1,0,0,0,1,1,0,1,1,0,0,0,1,0,0),
|
||||
(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)
|
||||
);
|
||||
|
||||
25
scss/icons/trophy.scss
Normal file
25
scss/icons/trophy.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
$icon-trophy-colors: (#fff, #444, #ebe527, #f59f54);
|
||||
// prettier-ignore
|
||||
$icon-trophy: (
|
||||
(0,0,2,2,2,2,2,2,2,2,2,2,2,0,0,0),
|
||||
(0,0,2,3,3,3,3,3,3,3,3,4,2,0,0,0),
|
||||
(2,2,2,3,1,3,3,3,3,3,3,4,2,2,2,0),
|
||||
(2,0,2,3,1,3,3,3,3,3,3,4,2,0,2,0),
|
||||
(2,0,2,3,1,3,3,3,3,3,3,4,2,0,2,0),
|
||||
(0,2,2,3,1,3,3,3,3,3,3,4,2,2,0,0),
|
||||
(0,0,2,3,1,3,3,3,3,3,3,4,2,0,0,0),
|
||||
(0,0,2,3,3,3,3,3,3,3,3,4,2,0,0,0),
|
||||
(0,0,0,2,3,3,3,3,3,3,4,2,0,0,0,0),
|
||||
(0,0,0,0,2,3,3,3,3,4,2,0,0,0,0,0),
|
||||
(0,0,0,0,0,2,3,3,4,2,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,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),
|
||||
);
|
||||
|
||||
// 2 black
|
||||
// 3 yellow
|
||||
// 1 white
|
||||
// 4 orange
|
||||
20
scss/icons/youtube.scss
Normal file
20
scss/icons/youtube.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
$icon-youtube-colors: (#fff, #f00);
|
||||
// prettier-ignore
|
||||
$icon-youtube: (
|
||||
( 0,2,2,2,2,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,2,2 ),
|
||||
( 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
|
||||
( 2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2 ),
|
||||
( 2,2,2,2,2,2,1,1,2,2,2,2,2,2,2,2 ),
|
||||
( 2,2,2,2,2,2,1,1,1,2,2,2,2,2,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,1,1,1,2,2,2,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,1,2,2,2,2,2,2,2 ),
|
||||
( 2,2,2,2,2,2,1,1,2,2,2,2,2,2,2,2 ),
|
||||
( 2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2 ),
|
||||
( 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
|
||||
( 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
|
||||
( 2,2,2,2,2,2,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 )
|
||||
);
|
||||
@@ -1,6 +1,6 @@
|
||||
.snes-logo {
|
||||
$px: 3px;
|
||||
$logo-colors: (#333, #d7d7d7, #8932e5);
|
||||
$logo-colors: (#333, #d7d7d7, #8932e5, #ad6df0);
|
||||
|
||||
// prettier-ignore
|
||||
$logo: (
|
||||
@@ -9,8 +9,8 @@
|
||||
(0,0,0,0,0,0,0,1,0,0,0,0,0,0,0),
|
||||
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0),
|
||||
(0,1,2,2,2,2,2,2,2,2,2,2,2,1,0),
|
||||
(1,2,2,1,2,2,2,2,2,2,2,3,2,2,1),
|
||||
(1,2,1,1,1,2,2,2,2,2,3,2,3,2,1),
|
||||
(1,2,2,1,2,2,2,2,2,2,2,4,2,2,1),
|
||||
(1,2,1,1,1,2,2,2,2,2,4,2,3,2,1),
|
||||
(1,2,2,1,2,2,1,2,1,2,2,3,2,2,1),
|
||||
(0,1,2,2,2,2,2,2,2,2,2,2,2,1,0),
|
||||
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0)
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@mixin pixelize($matrix, $colors, $size) {
|
||||
$ret: "";
|
||||
$moz: "";
|
||||
|
||||
@for $i from 1 through length($matrix) {
|
||||
$row: nth($matrix, $i);
|
||||
@@ -10,10 +11,12 @@
|
||||
@if $dot != 0 {
|
||||
@if $ret != "" {
|
||||
$ret: $ret + ",";
|
||||
$moz: $moz + ",";
|
||||
}
|
||||
|
||||
$color: nth($colors, $dot);
|
||||
$ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
|
||||
$moz: $moz + ($j * $size)+" "+ ($i * $size)+" 0 0.020em " + $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -21,4 +24,7 @@
|
||||
width: $size;
|
||||
height: $size;
|
||||
box-shadow: unquote($ret);
|
||||
@-moz-document url-prefix() {
|
||||
-webkit-box-shadow: unquote($moz);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user