diff --git a/README.md b/README.md index e71d783..8855b8b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # NES.css -`NES.css` is NES-style CSS Framework. +`NES.css` is NES-style(8bit-like) CSS Framework. `NES.css`はファミコン風 CSS フレームワークです。 ![8bit](https://user-images.githubusercontent.com/5305599/45937791-a5db2100-bffe-11e8-8bfd-fc3f534b28aa.gif) diff --git a/docs/index.html b/docs/index.html index ec38da4..bd5667e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,11 +7,7 @@ NES.css - NES-style CSS Framework - + @@ -19,6 +15,10 @@

NES.css

NES-style CSS Framework.

+ +

Fork
me on
GitHub

+
+
diff --git a/docs/style.css b/docs/style.css new file mode 100644 index 0000000..cc2c6ab --- /dev/null +++ b/docs/style.css @@ -0,0 +1,219 @@ +body { + margin: 2rem; +} + +.github-link { + position: absolute; + top: 10px; + right: 10px; + display: flex; + justify-content: space-around; + height: 96px; +} + +.github-link:hover { + opacity: 0.7; +} + +.github-link .balloon { + position: relative; + height: 50px; + padding: 2px 5px; + + /* prettier-ignore */ + box-shadow: + 0 -3px #f7f7f7, + 0 -6px #000, + 3px 0 #f7f7f7, + 3px -3px #000, + 6px 0 #000, + 0 3px #f7f7f7, + 0 6px #000, + -3px 0 #f7f7f7, + -3px 3px #000, + -6px 0 #000, + -3px -3px #000, + 3px 3px #000; +} + +.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; +}