mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-25 07:01:11 +02:00
docs: add share buttons
This commit is contained in:
@@ -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">
|
||||||
<p>NES-style CSS Framework.</p>
|
<h1><i class="snes-jp-logo brand-logo"></i>NES.css</h1>
|
||||||
|
<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">©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>
|
||||||
|
@@ -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);
|
||||||
|
|
||||||
|
@@ -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 */
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user