1
0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-30 17:30:23 +02:00

🎉 octocatを追加

This commit is contained in:
BcRikko
2018-11-26 22:54:02 +09:00
parent ac150b25fc
commit e5c89004a9
8 changed files with 147 additions and 211 deletions

View File

@@ -854,4 +854,39 @@ button,
height: 4px;
box-shadow: 8px 4px #333,12px 4px #333,16px 4px #333,20px 4px #333,24px 4px #333,28px 4px #333,32px 4px #333,36px 4px #333,40px 4px #333,44px 4px #333,48px 4px #333,52px 4px #333,56px 4px #333,60px 4px #333,4px 8px #333,8px 8px #333,12px 8px #333,16px 8px #333,24px 8px #333,28px 8px #333,32px 8px #333,36px 8px #333,40px 8px #333,44px 8px #333,48px 8px #333,52px 8px #333,60px 8px #333,64px 8px #333,4px 12px #333,8px 12px #333,12px 12px #333,16px 12px #333,28px 12px #333,32px 12px #333,36px 12px #333,40px 12px #333,44px 12px #333,48px 12px #333,60px 12px #333,64px 12px #333,4px 16px #333,8px 16px #333,12px 16px #333,16px 16px #333,60px 16px #333,64px 16px #333,4px 20px #333,8px 20px #333,12px 20px #333,64px 20px #333,4px 24px #333,8px 24px #333,12px 24px #333,64px 24px #333,4px 28px #333,8px 28px #333,12px 28px #333,64px 28px #333,4px 32px #333,8px 32px #333,12px 32px #333,64px 32px #333,4px 36px #333,8px 36px #333,12px 36px #333,16px 36px #333,60px 36px #333,64px 36px #333,4px 40px #333,8px 40px #333,12px 40px #333,16px 40px #333,20px 40px #333,56px 40px #333,60px 40px #333,64px 40px #333,4px 44px #333,16px 44px #333,20px 44px #333,24px 44px #333,28px 44px #333,48px 44px #333,52px 44px #333,56px 44px #333,60px 44px #333,64px 44px #333,4px 48px #333,8px 48px #333,12px 48px #333,20px 48px #333,24px 48px #333,52px 48px #333,56px 48px #333,60px 48px #333,64px 48px #333,4px 52px #333,8px 52px #333,12px 52px #333,16px 52px #333,52px 52px #333,56px 52px #333,60px 52px #333,64px 52px #333,4px 56px #333,8px 56px #333,12px 56px #333,16px 56px #333,20px 56px #333,24px 56px #333,52px 56px #333,56px 56px #333,60px 56px #333,64px 56px #333,4px 60px #333,8px 60px #333,12px 60px #333,16px 60px #333,20px 60px #333,24px 60px #333,52px 60px #333,56px 60px #333,60px 60px #333,64px 60px #333,8px 64px #333,12px 64px #333,16px 64px #333,20px 64px #333,24px 64px #333,28px 64px #333,32px 64px #333,36px 64px #333,40px 64px #333,44px 64px #333,48px 64px #333,52px 64px #333,56px 64px #333,60px 64px #333;;
}
.octocat {
position: relative;
display: inline-block;
width: 84px;
height: 90px;
}
.octocat::before {
position: absolute;
top: -6px;
left: -6px;
content: "";
background: transparent;
width: 6px;
height: 6px;
box-shadow: 24px 6px #333,78px 6px #333,24px 12px #333,30px 12px #333,72px 12px #333,78px 12px #333,24px 18px #333,30px 18px #333,36px 18px #333,42px 18px #333,48px 18px #333,54px 18px #333,60px 18px #333,66px 18px #333,72px 18px #333,78px 18px #333,18px 24px #333,24px 24px #333,30px 24px #333,36px 24px #333,42px 24px #333,48px 24px #333,54px 24px #333,60px 24px #333,66px 24px #333,72px 24px #333,78px 24px #333,84px 24px #333,18px 30px #333,24px 30px #333,30px 30px #333,36px 30px #333,42px 30px #333,48px 30px #333,54px 30px #333,60px 30px #333,66px 30px #333,72px 30px #333,78px 30px #333,84px 30px #333,18px 36px #333,24px 36px #333,30px 36px #333,36px 36px #ffdec4,42px 36px #ffdec4,48px 36px #ffdec4,54px 36px #ffdec4,60px 36px #ffdec4,66px 36px #ffdec4,72px 36px #333,78px 36px #333,84px 36px #333,18px 42px #333,24px 42px #333,30px 42px #ffdec4,36px 42px #cb7066,42px 42px #ffdec4,48px 42px #ffdec4,54px 42px #ffdec4,60px 42px #ffdec4,66px 42px #cb7066,72px 42px #ffdec4,78px 42px #333,84px 42px #333,18px 48px #333,24px 48px #333,30px 48px #ffdec4,36px 48px #cb7066,42px 48px #ffdec4,48px 48px #ffdec4,54px 48px #ffdec4,60px 48px #ffdec4,66px 48px #cb7066,72px 48px #ffdec4,78px 48px #333,84px 48px #333,24px 54px #333,30px 54px #333,36px 54px #ffdec4,42px 54px #ffdec4,48px 54px #cb7066,54px 54px #cb7066,60px 54px #ffdec4,66px 54px #ffdec4,72px 54px #333,78px 54px #333,6px 60px #333,12px 60px #333,42px 60px #333,48px 60px #333,54px 60px #333,60px 60px #333,18px 66px #333,24px 66px #333,36px 66px #333,42px 66px #333,48px 66px #333,54px 66px #333,60px 66px #333,66px 66px #333,24px 72px #333,30px 72px #333,36px 72px #333,42px 72px #333,48px 72px #333,54px 72px #333,60px 72px #333,66px 72px #333,36px 78px #333,48px 78px #333,54px 78px #333,66px 78px #333,36px 84px #333,48px 84px #333,54px 84px #333,66px 84px #333,30px 90px #333,42px 90px #333,60px 90px #333,72px 90px #333;;
}
.octocat.animate::before {
animation: wave 0.5s infinite steps(1);
}
@keyframes wave {
0% {
width: 6px;
height: 6px;
box-shadow: 24px 6px #333,78px 6px #333,24px 12px #333,30px 12px #333,72px 12px #333,78px 12px #333,24px 18px #333,30px 18px #333,36px 18px #333,42px 18px #333,48px 18px #333,54px 18px #333,60px 18px #333,66px 18px #333,72px 18px #333,78px 18px #333,18px 24px #333,24px 24px #333,30px 24px #333,36px 24px #333,42px 24px #333,48px 24px #333,54px 24px #333,60px 24px #333,66px 24px #333,72px 24px #333,78px 24px #333,84px 24px #333,18px 30px #333,24px 30px #333,30px 30px #333,36px 30px #333,42px 30px #333,48px 30px #333,54px 30px #333,60px 30px #333,66px 30px #333,72px 30px #333,78px 30px #333,84px 30px #333,18px 36px #333,24px 36px #333,30px 36px #333,36px 36px #ffdec4,42px 36px #ffdec4,48px 36px #ffdec4,54px 36px #ffdec4,60px 36px #ffdec4,66px 36px #ffdec4,72px 36px #333,78px 36px #333,84px 36px #333,18px 42px #333,24px 42px #333,30px 42px #ffdec4,36px 42px #cb7066,42px 42px #ffdec4,48px 42px #ffdec4,54px 42px #ffdec4,60px 42px #ffdec4,66px 42px #cb7066,72px 42px #ffdec4,78px 42px #333,84px 42px #333,18px 48px #333,24px 48px #333,30px 48px #ffdec4,36px 48px #cb7066,42px 48px #ffdec4,48px 48px #ffdec4,54px 48px #ffdec4,60px 48px #ffdec4,66px 48px #cb7066,72px 48px #ffdec4,78px 48px #333,84px 48px #333,24px 54px #333,30px 54px #333,36px 54px #ffdec4,42px 54px #ffdec4,48px 54px #cb7066,54px 54px #cb7066,60px 54px #ffdec4,66px 54px #ffdec4,72px 54px #333,78px 54px #333,6px 60px #333,12px 60px #333,42px 60px #333,48px 60px #333,54px 60px #333,60px 60px #333,18px 66px #333,24px 66px #333,36px 66px #333,42px 66px #333,48px 66px #333,54px 66px #333,60px 66px #333,66px 66px #333,24px 72px #333,30px 72px #333,36px 72px #333,42px 72px #333,48px 72px #333,54px 72px #333,60px 72px #333,66px 72px #333,36px 78px #333,48px 78px #333,54px 78px #333,66px 78px #333,36px 84px #333,48px 84px #333,54px 84px #333,66px 84px #333,30px 90px #333,42px 90px #333,60px 90px #333,72px 90px #333;;
}
50% {
width: 6px;
height: 6px;
box-shadow: 24px 6px #333,78px 6px #333,24px 12px #333,30px 12px #333,72px 12px #333,78px 12px #333,24px 18px #333,30px 18px #333,36px 18px #333,42px 18px #333,48px 18px #333,54px 18px #333,60px 18px #333,66px 18px #333,72px 18px #333,78px 18px #333,18px 24px #333,24px 24px #333,30px 24px #333,36px 24px #333,42px 24px #333,48px 24px #333,54px 24px #333,60px 24px #333,66px 24px #333,72px 24px #333,78px 24px #333,84px 24px #333,18px 30px #333,24px 30px #333,30px 30px #333,36px 30px #333,42px 30px #333,48px 30px #333,54px 30px #333,60px 30px #333,66px 30px #333,72px 30px #333,78px 30px #333,84px 30px #333,18px 36px #333,24px 36px #333,30px 36px #333,36px 36px #ffdec4,42px 36px #ffdec4,48px 36px #ffdec4,54px 36px #ffdec4,60px 36px #ffdec4,66px 36px #ffdec4,72px 36px #333,78px 36px #333,84px 36px #333,18px 42px #333,24px 42px #333,30px 42px #ffdec4,36px 42px #ffdec4,42px 42px #ffdec4,48px 42px #ffdec4,54px 42px #ffdec4,60px 42px #ffdec4,66px 42px #ffdec4,72px 42px #ffdec4,78px 42px #333,84px 42px #333,12px 48px #333,18px 48px #333,24px 48px #333,30px 48px #ffdec4,36px 48px #cb7066,42px 48px #ffdec4,48px 48px #ffdec4,54px 48px #ffdec4,60px 48px #ffdec4,66px 48px #cb7066,72px 48px #ffdec4,78px 48px #333,84px 48px #333,12px 54px #333,24px 54px #333,30px 54px #333,36px 54px #ffdec4,42px 54px #ffdec4,48px 54px #cb7066,54px 54px #cb7066,60px 54px #ffdec4,66px 54px #ffdec4,72px 54px #333,78px 54px #333,18px 60px #333,42px 60px #333,48px 60px #333,54px 60px #333,60px 60px #333,24px 66px #333,36px 66px #333,42px 66px #333,48px 66px #333,54px 66px #333,60px 66px #333,66px 66px #333,24px 72px #333,30px 72px #333,36px 72px #333,42px 72px #333,48px 72px #333,54px 72px #333,60px 72px #333,66px 72px #333,36px 78px #333,48px 78px #333,54px 78px #333,66px 78px #333,36px 84px #333,48px 84px #333,54px 84px #333,66px 84px #333,30px 90px #333,42px 90px #333,60px 90px #333,72px 90px #333;;
}
}
/*# sourceMappingURL=nes.css.map */

File diff suppressed because one or more lines are too long

12
css/nes.min.css vendored

File diff suppressed because one or more lines are too long

View File

@@ -45,6 +45,11 @@
<p>NES-style CSS Framework.</p>
</header>
<a class="github-link" href="https://github.com/BcRikko/NES.css" target="_blank">
<p class="balloon from-right">Fork me<br />on GitHub</p>
<i class="octocat"></i>
</a>
<button type="button" class="btn">Normal</button>
<button type="button" class="btn is-primary">Primary</button>
<button type="button" class="btn is-success">Success</button>
@@ -95,5 +100,17 @@
<i class="icon github"></i> <i class="icon github is-medium"></i>
<i class="icon github is-large"></i>
<i class="octocat animate"></i>
</body>
<script>
var link = document.querySelector("a.github-link");
var octocat = document.querySelector("a.github-link > i.octocat");
link.addEventListener("mouseover", function() {
octocat.classList.add("animate");
});
link.addEventListener("mouseout", function() {
octocat.classList.remove("animate");
});
</script>
</html>

View File

@@ -8,3 +8,4 @@
@import "utilities/_index.scss";
@import "elements/_index.scss";
@import "icons/_index.scss";
@import "pixel-arts/_index.scss";

View File

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

View File

@@ -0,0 +1,68 @@
.octocat {
$px: 6px;
$octocat-colors: (#333, #ffdec4, #cb7066);
// prettier-ignore
$octocat-1: (
(0,0,0,1,0,0,0,0,0,0,0,0,1,0),
(0,0,0,1,1,0,0,0,0,0,0,1,1,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),
(0,0,1,1,1,1,1,1,1,1,1,1,1,1),
(0,0,1,1,1,2,2,2,2,2,2,1,1,1),
(0,0,1,1,2,3,2,2,2,2,3,2,1,1),
(0,0,1,1,2,3,2,2,2,2,3,2,1,1),
(0,0,0,1,1,2,2,3,3,2,2,1,1,0),
(1,1,0,0,0,0,1,1,1,1,0,0,0,0),
(0,0,1,1,0,1,1,1,1,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,0,1,1,0,1,0,0,0),
(0,0,0,0,0,1,0,1,1,0,1,0,0,0),
(0,0,0,0,1,0,1,0,0,1,0,1,0,0)
);
// prettier-ignore
$octocat-2: (
(0,0,0,1,0,0,0,0,0,0,0,0,1,0),
(0,0,0,1,1,0,0,0,0,0,0,1,1,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),
(0,0,1,1,1,1,1,1,1,1,1,1,1,1),
(0,0,1,1,1,2,2,2,2,2,2,1,1,1),
(0,0,1,1,2,2,2,2,2,2,2,2,1,1),
(0,1,1,1,2,3,2,2,2,2,3,2,1,1),
(0,1,0,1,1,2,2,3,3,2,2,1,1,0),
(0,0,1,0,0,0,1,1,1,1,0,0,0,0),
(0,0,0,1,0,1,1,1,1,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,0,1,1,0,1,0,0,0),
(0,0,0,0,0,1,0,1,1,0,1,0,0,0),
(0,0,0,0,1,0,1,0,0,1,0,1,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($octocat-1, $octocat-colors, $px);
}
&.animate::before {
animation: wave 0.5s infinite steps(1);
}
@keyframes wave {
0% {
@include pixelize($octocat-1, $octocat-colors, $px);
}
50% {
@include pixelize($octocat-2, $octocat-colors, $px);
}
}
}

216
style.css
View File

@@ -75,214 +75,20 @@ body {
right: 10px;
z-index: 999;
display: flex;
justify-content: space-around;
height: 96px;
height: 100px;
color: #333;
text-decoration: none;
}
.github-link:hover {
opacity: 0.7;
text-decoration: none;
}
.github-link .balloon {
position: relative;
height: 50px;
padding: 2px 5px;
background-color: #f7f7f7;
/* prettier-ignore */
box-shadow:
0 -3px #f7f7f7,
0 -6px #333,
3px 0 #f7f7f7,
3px -3px #333,
6px 0 #333,
0 3px #f7f7f7,
0 6px #333,
-3px 0 #f7f7f7,
-3px 3px #333,
-6px 0 #333,
-3px -3px #333,
3px 3px #333;
.github-link > p.balloon {
align-self: flex-start;
padding: 0.2rem 0.5rem;
font-size: 0.8rem;
color: #333;
}
.github-link .balloon::before,
.github-link .balloon::after {
position: absolute;
right: 15px;
box-sizing: border-box;
display: block;
content: "";
}
.github-link .balloon::after {
bottom: -14px;
width: 9px;
height: 3px;
margin-left: 6px;
background: #f7f7f7;
/* prettier-ignore */
box-shadow:
-3px 0 #333,
3px 0 #333,
3px 3px #f7f7f7,
0 3px #333,
6px 3px #333,
3px 6px #333,
6px 6px #333;
}
.github-link .balloon::before {
bottom: -11px;
width: 15px;
height: 8px;
background: #f7f7f7;
border-right: 3px solid #333;
border-left: 3px solid #333;
}
.github-link .octocat {
position: relative;
width: 84px;
}
.github-link .octocat::after {
position: absolute;
top: -6px;
left: -6px;
width: 6px;
height: 6px;
content: "";
background: transparent;
/* prettier-ignore */
box-shadow:
24px 6px 0 #333,
78px 6px 0 #333,
24px 12px 0 #333,
30px 12px 0 #333,
72px 12px 0 #333,
78px 12px 0 #333,
24px 18px 0 #333,
30px 18px 0 #333,
36px 18px 0 #333,
42px 18px 0 #333,
48px 18px 0 #333,
54px 18px 0 #333,
60px 18px 0 #333,
66px 18px 0 #333,
72px 18px 0 #333,
78px 18px 0 #333,
18px 24px 0 #333,
24px 24px 0 #333,
30px 24px 0 #333,
36px 24px 0 #333,
42px 24px 0 #333,
48px 24px 0 #333,
54px 24px 0 #333,
60px 24px 0 #333,
66px 24px 0 #333,
72px 24px 0 #333,
78px 24px 0 #333,
84px 24px 0 #333,
18px 30px 0 #333,
24px 30px 0 #333,
30px 30px 0 #333,
36px 30px 0 #333,
42px 30px 0 #333,
48px 30px 0 #333,
54px 30px 0 #333,
60px 30px 0 #333,
66px 30px 0 #333,
72px 30px 0 #333,
78px 30px 0 #333,
84px 30px 0 #333,
18px 36px 0 #333,
24px 36px 0 #333,
30px 36px 0 #333,
36px 36px 0 #ffdec4,
42px 36px 0 #ffdec4,
48px 36px 0 #ffdec4,
54px 36px 0 #ffdec4,
60px 36px 0 #ffdec4,
66px 36px 0 #ffdec4,
72px 36px 0 #333,
78px 36px 0 #333,
84px 36px 0 #333,
18px 42px 0 #333,
24px 42px 0 #333,
30px 42px 0 #ffdec4,
36px 42px 0 #cb7066,
42px 42px 0 #ffdec4,
48px 42px 0 #ffdec4,
54px 42px 0 #ffdec4,
60px 42px 0 #ffdec4,
66px 42px 0 #cb7066,
72px 42px 0 #ffdec4,
78px 42px 0 #333,
84px 42px 0 #333,
18px 48px 0 #333,
24px 48px 0 #333,
30px 48px 0 #ffdec4,
36px 48px 0 #cb7066,
42px 48px 0 #ffdec4,
48px 48px 0 #ffdec4,
54px 48px 0 #ffdec4,
60px 48px 0 #ffdec4,
66px 48px 0 #cb7066,
72px 48px 0 #ffdec4,
78px 48px 0 #333,
84px 48px 0 #333,
24px 54px 0 #333,
30px 54px 0 #333,
36px 54px 0 #ffdec4,
42px 54px 0 #ffdec4,
48px 54px 0 #cb7066,
54px 54px 0 #cb7066,
60px 54px 0 #ffdec4,
66px 54px 0 #ffdec4,
72px 54px 0 #333,
78px 54px 0 #333,
30px 60px 0 #333,
36px 60px 0 #333,
42px 60px 0 #333,
48px 60px 0 #333,
54px 60px 0 #333,
60px 60px 0 #333,
66px 60px 0 #333,
72px 60px 0 #333,
6px 66px 0 #333,
12px 66px 0 #333,
42px 66px 0 #333,
48px 66px 0 #333,
54px 66px 0 #333,
60px 66px 0 #333,
18px 72px 0 #333,
24px 72px 0 #333,
36px 72px 0 #333,
42px 72px 0 #333,
48px 72px 0 #333,
54px 72px 0 #333,
60px 72px 0 #333,
66px 72px 0 #333,
24px 78px 0 #333,
30px 78px 0 #333,
36px 78px 0 #333,
42px 78px 0 #333,
48px 78px 0 #333,
54px 78px 0 #333,
60px 78px 0 #333,
66px 78px 0 #333,
36px 84px 0 #333,
48px 84px 0 #333,
54px 84px 0 #333,
66px 84px 0 #333,
36px 90px 0 #333,
48px 90px 0 #333,
54px 90px 0 #333,
66px 90px 0 #333,
30px 96px 0 #333,
42px 96px 0 #333,
60px 96px 0 #333,
72px 96px 0 #333;
.github-link > i.octocat {
align-self: flex-end;
}