mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-25 15:10:48 +02:00
Code Issues Releases Wiki Activity

docs: add share buttons

Browse Source
This commit is contained in:
BcRikko
2019-02-23 17:28:05 +09:00
parent 17846a9719
commit 29fddfb9be
3 changed files with 44 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/index.html
View File

@@ -40,9 +40,21 @@
<body> <body>
<div id="nescss" class="wrapper"> <div id="nescss" class="wrapper">
<header> <header>
<h1><i class="snes-jp-logo brand"></i>NES.css</h1> <div class="brand">
<h1><i class="snes-jp-logo brand-logo"></i>NES.css</h1>
<p>NES-style CSS Framework.</p> <p>NES-style CSS Framework.</p>
</div>
<div class="social-buttons">
<p>Share on SNS</p>
<div class="share">
<a @click="share('twitter')"><i class="nes-icon twitter"></i></a>
<a @click="share('facebook')"><i class="nes-icon facebook"></i></a>
<a @click="share('linkedin')"><i class="nes-icon linkedin"></i></a>
</div>
</div>
</header> </header>
<main> <main>
<a class="github-link" href="https://github.com/nostalgic-css/NES.css" target="_blank" @mouseover="startAnimate" @mouseout="stopAnimate"> <a class="github-link" href="https://github.com/nostalgic-css/NES.css" target="_blank" @mouseover="startAnimate" @mouseout="stopAnimate">
<p class="nes-balloon from-right">Fork me<br />on GitHub</p> <p class="nes-balloon from-right">Fork me<br />on GitHub</p>
@@ -146,7 +158,7 @@
</section> </section>
<!-- Articles --> <!-- Articles -->
<section class="articles"> <section class="topic">
<h2 id="articles"><a href="#articles">#</a>Articles</h2> <h2 id="articles"><a href="#articles">#</a>Articles</h2>
<article v-for="article in articles"> <article v-for="article in articles">
<h3><a :href="article.url" target="_blank"><i class="nes-icon" :class="article.icon"></i>{{ article.title }}</a></h3> <h3><a :href="article.url" target="_blank"><i class="nes-icon" :class="article.icon"></i>{{ article.title }}</a></h3>
@@ -157,7 +169,7 @@
<footer> <footer>
<p> <p>
<a href="https://kuroeveryday.blogspot.com/" target="_blank">Black Everyday Company</a> <a href="https://kuroeveryday.blogspot.com/" target="_blank">&copy;2018 Black Everyday Company</a>
<span>-</span> <span>-</span>
<a href="https://twitter.com/bc_rikko" target="_blank">@bc_rikko</a> <a href="https://twitter.com/bc_rikko" target="_blank">@bc_rikko</a>
</p> </p>

14
docs/script.js
View File

@@ -541,6 +541,20 @@ new Vue({
}); });
}, },
methods: { methods: {
share(media) {
const url = (() => {
switch (media) {
case 'twitter':
return 'http://twitter.com/share?text=NES.css%EF%BD%9CNES-style%20CSS%20Framework%20%40bc_rikko&url=https://nostalgic-css.github.io/NES.css/';
case 'facebook':
return 'http://www.facebook.com/sharer.php?u=https://nostalgic-css.github.io/NES.css/&t=NES.css%EF%BD%9CNES-style%20CSS%20Framework';
case 'linkedin':
return 'https://www.linkedin.com/shareArticle?url=https%3A//nostalgic-css.github.io/NES.css/&title=NES.css%EF%BD%9CNES-style%20CSS%20Framework';
}
})();
window.open(url, '');
},
copy(event, id) { copy(event, id) {
this.showCopiedBalloon(event.pageY, event.pageX); this.showCopiedBalloon(event.pageY, event.pageX);

17
docs/style.css
View File

@@ -8,10 +8,22 @@ body {
margin: 0 auto; margin: 0 auto;
} }
header i.brand { header {
display: flex;
align-items: baseline;
border-bottom: 4px solid #D3D3D3;
}
header > .brand i.brand-logo {
margin-right: 1rem; margin-right: 1rem;
} }
header > .social-buttons {
margin-left: 2rem;
}
header > .social-buttons > p {
margin-bottom: 0;
}
footer { footer {
margin-top: 3rem; margin-top: 3rem;
text-align: center; text-align: center;
@@ -26,7 +38,7 @@ h2 > a {
} }
.topic { .topic {
margin-bottom: 3rem; margin-top: 3rem;
} }
/* github link */ /* github link */
@@ -192,4 +204,3 @@ h3.topic-title > i {
} }
/* Articles */ /* Articles */