Skip to content

Commit 81eb665

Browse files
committed
v4
1 parent 49e2ce8 commit 81eb665

5 files changed

Lines changed: 26 additions & 39 deletions

File tree

app/index.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,11 @@
8383
<a
8484
href="https://twitter.com/intent/tweet?text=embed.js+%7C+A+JS+plugin+to+embed+emojis%2C+media%2C+maps%2C+tweets%2C+code%2C+services+and+parse+markdown+http%3A%2F%2Fbit.ly%2F1NIvT8A&url='http%3A%2F%2Fbit.ly%2F1NIvT8A'&hashtags=JavaScript"
8585
target="_blank">
86-
<button class="twitter-btn"><i class="fa fa-twitter"></i>Tweet</button>
86+
<i class="fa fa-twitter"></i>
8787
</a>
8888
</div>
8989
<div class="star">
90-
<iframe src="https://ghbtns.com/github-btn.html?user=ritz078&repo=embed.js&type=star&count=true&size=small"
91-
frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
90+
<a href="https://github.com/ritz078/embed.js"><i class="fa fa-github"></i></a>
9291
</div>
9392
</div>
9493
</div>

app/styles/main.scss

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
position: relative;
77
z-index: 9;
88
min-height: 200px;
9-
@media all
10-
and (max-device-width: 768px) {
9+
@media all and (max-device-width: 768px) {
1110
min-height: auto;
1211
}
1312
}
@@ -18,30 +17,12 @@
1817
z-index: 98;
1918
margin-top: 55px;
2019
padding-bottom: 40px;
21-
.twitter-btn{
22-
line-height: 20px;
23-
padding: 0 10px;
24-
height: 20px;
25-
background-color: #fff;
26-
border: 0;
27-
border-radius: 2px;
28-
text-transform: capitalize;
29-
letter-spacing: 0;
30-
color: #1B95E0;
31-
font-size: 10px;
32-
margin-top: 3px;
33-
i{
34-
font-size: 12px;
35-
margin-right: 4px;
36-
vertical-align: text-top;
37-
}
38-
}
3920
img {
4021
width: 200px;
4122
display: block;
4223
margin: 30px auto;
4324
}
44-
a{
25+
a {
4526
text-decoration: none;
4627
display: table;
4728
margin: 0 auto;
@@ -74,20 +55,27 @@
7455
.social-wrapper {
7556
display: table;
7657
margin: 20px auto;
58+
margin-top: 40px;
7759
margin-bottom: 0;
78-
.social {
79-
div {
80-
display: inline-block;
81-
vertical-align: top;
82-
}
83-
.star {
84-
padding-top: 3px;
85-
iframe {
86-
width: 85px;
87-
height: 30px;
88-
}
60+
a{
61+
display: inline-block;
62+
}
63+
i {
64+
font-size: 26px;
65+
color: #fff;
66+
opacity: 0.5;
67+
&:hover{
68+
opacity: 1;
8969
}
9070
}
71+
.twitter,.star{
72+
display: inline-block;
73+
vertical-align: top;
74+
padding: 0 10px;
75+
}
76+
.twitter{
77+
border-right:1px solid rgba(255,255,255,0.2);
78+
}
9179
}
9280
}
9381

@@ -122,7 +110,7 @@
122110
margin-right: 10px;
123111
margin-top: 5px;
124112
-webkit-filter: grayscale(10%);
125-
@media all and (-webkit-min-device-pixel-ratio : 1.5), all and (-o-min-device-pixel-ratio : 3/2), all and (min-device-pixel-ratio : 1.5), all and (min-resolution : 144dpi) {
113+
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min-device-pixel-ratio: 1.5), all and (min-resolution: 144dpi) {
126114
background-image: url("../images/homepage@2x.png");
127115
}
128116
&.twitter {

dist/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>embed.js</title> <meta name=description content="A JavaScript plugin that analyses the string and automatically embeds emojis, media, maps, tweets, code and services."> <meta name=viewport content="width=device-width,initial-scale=1"> <link rel="shortcut icon" href=favicon.e1d38bd4.ico> <link rel=apple-touch-icon href=apple-touch-icon.9727d3c2.png> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300" rel=stylesheet type=text/css> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel=stylesheet href=styles/vendor.d580b2ff.css> <link rel=stylesheet href=styles/main.68407fdf.css> <link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css> <body> <!--[if lt IE 10]>
1+
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>embed.js</title> <meta name=description content="A JavaScript plugin that analyses the string and automatically embeds emojis, media, maps, tweets, code and services."> <meta name=viewport content="width=device-width,initial-scale=1"> <link rel="shortcut icon" href=favicon.e1d38bd4.ico> <link rel=apple-touch-icon href=apple-touch-icon.9727d3c2.png> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300" rel=stylesheet type=text/css> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel=stylesheet href=styles/vendor.d580b2ff.css> <link rel=stylesheet href=styles/main.07ee64b9.css> <link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css> <body> <!--[if lt IE 10]>
22
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
33
your browser</a> to improve your experience.</p>
4-
<![endif]--> <header> <a href="/embed.js/" id=logo><img src=images/logo.439ed97e.png srcset="images/logo@2x.5ec020f5.png 2x" alt=""></a> <nav> <a href=#sidr class=nav><i class="fa fa-bars"></i></a> <ul> <a href="/embed.js/"> <li>Home</li> </a> <a href=https://embedjs.readme.io/docs/installation target=_blank> <li>Getting Started</li> </a> <a href=https://embedjs.readme.io/docs/basic-usage target=_blank> <li>Options</li> </a> <a href=https://embedjs.readme.io/docs/instance-methods target=_blank> <li>API</li> </a> <a href=https://embedjs.readme.io/docs/basic-example target=_blank> <li>Examples</li> </a> <a href=https://github.com/ritz078/embed.js target=_blank> <li><i class="fa fa-github"></i></li> </a> </ul> </nav> <div id=sidr-right> <!-- Your content --> <ul> <li><a href="/embed.js/">Home</a></li> <li><a target=_blank href=https://embedjs.readme.io/docs/installation>Getting Started</a></li> <li><a target=_blank href=https://embedjs.readme.io/docs/basic-usage>Options</a></li> <li><a target=_blank href=https://embedjs.readme.io/docs/instance-methods>API</a></li> <li><a target=_blank href=https://embedjs.readme.io/docs/basic-example>Examples</a></li> <li><a target=_blank href=https://github.com/ritz078/embed.js>Github</a></li> </ul> </div> </header> <div class=banner> <div class=banner-details> <span class=title>A pure JavaScript plugin to insert or embed <br><span class=typed>MP3 SONGS</span></span> <a href=https://github.com/ritz078/embed.js/archive/master.zip> <button class="button-primary download">Download v4.0.0</button> </a> <div class=social-wrapper> <div class=social> <div class=twitter> <a href="https://twitter.com/intent/tweet?text=embed.js+%7C+A+JS+plugin+to+embed+emojis%2C+media%2C+maps%2C+tweets%2C+code%2C+services+and+parse+markdown+http%3A%2F%2Fbit.ly%2F1NIvT8A&url='http%3A%2F%2Fbit.ly%2F1NIvT8A'&hashtags=JavaScript" target=_blank> <button class=twitter-btn><i class="fa fa-twitter"></i>Tweet</button> </a> </div> <div class=star> <iframe src="https://ghbtns.com/github-btn.html?user=ritz078&repo=embed.js&type=star&count=true&size=small" frameborder=0 scrolling=0 width=170px height=20px></iframe> </div> </div> </div> </div> </div> <!--<div class="browser-wrapper">--> <!--&lt;!&ndash;<img src="images/Browser.png" class="browser" srcset="images/Browser.png 1x, images/Browser@2x.png 2x" alt="">&ndash;&gt;--> <!--</div>--> <div class=container> <h5>Features</h5> <div class="row features"> <div class="six columns"> <div class=column-item> <div class="icon emoji"></div> <div class=text> <div class=title>Emoji & Font icons</div> Support for all emojis and font icons is present. You can even add your own emoji or customize the font smileys. </div> </div> <div class=column-item> <div class="icon twitter"> </div> <div class=text> <div class=title>Twitter</div> You can embed tweets by enabling the option and pass all the configuration options supported by twitter oEmbed API. </div> </div> <div class=column-item> <div class="icon github"> </div> <div class=text> <div class=title>Github Gists</div> Github Gists can be embedded without requiring any extra scripts. </div> </div> <div class=column-item> <div class="icon ted"> </div> <div class=text> <div class=title>Video Sharing Services</div> Services like YOUTUBE, VIMEO, VINE, USTREAM, DAILYMOTION and LIVELEAK are supported. </div> </div> <div class=column-item> <div class="icon codepen"> </div> <div class=text> <div class=title>Online Code Editors</div> Online Code Editors like CODEPEN, JSFIDDLE, JSBIN, IDEONE and PLUNKER are supported. </div> </div> <div class=column-item> <div class="icon instagram"> </div> <div class=text> <div class=title>Photo Sharing</div> Photo Sharing services like FLICKR and INSTAGRAM are supported currently. </div> </div> <div class=column-item> <div class="icon youtube"> </div> <div class=text> <div class=title>Video Details</div> The preview of videos with video description is supported for VIMEO and YOUTUBE videos. </div> </div> </div> <div class="six columns"> <div class=column-item> <div class="icon soundcloud"> </div> <div class=text> <div class=title>Music sharing</div> Music sharing services like SPOTIFY and SOUNDCLOUD are supported. </div> </div> <div class=column-item> <div class="icon gmap"> </div> <div class=text> <div class=title>Google Map</div> You can embed google maps pointing to a location in all possible configurations like streetview, place etc. </div> </div> <div class=column-item> <div class="icon markdown"> </div> <div class=text> <div class=title>Markdown</div> This plugin supports markdown parsing using the power of marked.js . </div> </div> <div class=column-item> <div class="icon url"> </div> <div class=text> <div class=title>URL</div> converts urls into HTML anchor tags. It also recognizes hundreds of shortened url like bit.ly, buff.ly etc. </div> </div> <div class=column-item> <div class="icon image"> </div> <div class=text> <div class=title>Image</div> Image files with extensions gif|jpg|jpeg|tiff|png|svg|webp are automatically embedded. </div> </div> <div class=column-item> <div class="icon media"> </div> <div class=text> <div class=title>Audio and Video Files</div> Audi files with extension wav|mp3|ogg and video files with extension ogv|webm|mp4 are supported. </div> </div> <div class=column-item> <div class="icon code"> </div> <div class=text> <div class=title>Code Highlighting</div> Get inline code syntax highlighting using the code's markdown syntax with customizable themes. </div> </div> </div> </div> </div> <footer> <span>Copyright &copy; 2016 &nbsp; | &nbsp; Made by <a href=https://twitter.com/ritz078 target=_blank>Ritesh Kumar</a></span> </footer> <script src=scripts/vendor.a6236245.js></script> <script src=scripts/main.5dc7ae3f.js></script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script>(function (b, o, i, l, e, r) {
4+
<![endif]--> <header> <a href="/embed.js/" id=logo><img src=images/logo.439ed97e.png srcset="images/logo@2x.5ec020f5.png 2x" alt=""></a> <nav> <a href=#sidr class=nav><i class="fa fa-bars"></i></a> <ul> <a href="/embed.js/"> <li>Home</li> </a> <a href=https://embedjs.readme.io/docs/installation target=_blank> <li>Getting Started</li> </a> <a href=https://embedjs.readme.io/docs/basic-usage target=_blank> <li>Options</li> </a> <a href=https://embedjs.readme.io/docs/instance-methods target=_blank> <li>API</li> </a> <a href=https://embedjs.readme.io/docs/basic-example target=_blank> <li>Examples</li> </a> <a href=https://github.com/ritz078/embed.js target=_blank> <li><i class="fa fa-github"></i></li> </a> </ul> </nav> <div id=sidr-right> <!-- Your content --> <ul> <li><a href="/embed.js/">Home</a></li> <li><a target=_blank href=https://embedjs.readme.io/docs/installation>Getting Started</a></li> <li><a target=_blank href=https://embedjs.readme.io/docs/basic-usage>Options</a></li> <li><a target=_blank href=https://embedjs.readme.io/docs/instance-methods>API</a></li> <li><a target=_blank href=https://embedjs.readme.io/docs/basic-example>Examples</a></li> <li><a target=_blank href=https://github.com/ritz078/embed.js>Github</a></li> </ul> </div> </header> <div class=banner> <div class=banner-details> <span class=title>A pure JavaScript plugin to insert or embed <br><span class=typed>MP3 SONGS</span></span> <a href=https://github.com/ritz078/embed.js/archive/master.zip> <button class="button-primary download">Download v4.0.0</button> </a> <div class=social-wrapper> <div class=social> <div class=twitter> <a href="https://twitter.com/intent/tweet?text=embed.js+%7C+A+JS+plugin+to+embed+emojis%2C+media%2C+maps%2C+tweets%2C+code%2C+services+and+parse+markdown+http%3A%2F%2Fbit.ly%2F1NIvT8A&url='http%3A%2F%2Fbit.ly%2F1NIvT8A'&hashtags=JavaScript" target=_blank> <i class="fa fa-twitter"></i> </a> </div> <div class=star> <a href=https://github.com/ritz078/embed.js><i class="fa fa-github"></i></a> </div> </div> </div> </div> </div> <!--<div class="browser-wrapper">--> <!--&lt;!&ndash;<img src="images/Browser.png" class="browser" srcset="images/Browser.png 1x, images/Browser@2x.png 2x" alt="">&ndash;&gt;--> <!--</div>--> <div class=container> <h5>Features</h5> <div class="row features"> <div class="six columns"> <div class=column-item> <div class="icon emoji"></div> <div class=text> <div class=title>Emoji & Font icons</div> Support for all emojis and font icons is present. You can even add your own emoji or customize the font smileys. </div> </div> <div class=column-item> <div class="icon twitter"> </div> <div class=text> <div class=title>Twitter</div> You can embed tweets by enabling the option and pass all the configuration options supported by twitter oEmbed API. </div> </div> <div class=column-item> <div class="icon github"> </div> <div class=text> <div class=title>Github Gists</div> Github Gists can be embedded without requiring any extra scripts. </div> </div> <div class=column-item> <div class="icon ted"> </div> <div class=text> <div class=title>Video Sharing Services</div> Services like YOUTUBE, VIMEO, VINE, USTREAM, DAILYMOTION and LIVELEAK are supported. </div> </div> <div class=column-item> <div class="icon codepen"> </div> <div class=text> <div class=title>Online Code Editors</div> Online Code Editors like CODEPEN, JSFIDDLE, JSBIN, IDEONE and PLUNKER are supported. </div> </div> <div class=column-item> <div class="icon instagram"> </div> <div class=text> <div class=title>Photo Sharing</div> Photo Sharing services like FLICKR and INSTAGRAM are supported currently. </div> </div> <div class=column-item> <div class="icon youtube"> </div> <div class=text> <div class=title>Video Details</div> The preview of videos with video description is supported for VIMEO and YOUTUBE videos. </div> </div> </div> <div class="six columns"> <div class=column-item> <div class="icon soundcloud"> </div> <div class=text> <div class=title>Music sharing</div> Music sharing services like SPOTIFY and SOUNDCLOUD are supported. </div> </div> <div class=column-item> <div class="icon gmap"> </div> <div class=text> <div class=title>Google Map</div> You can embed google maps pointing to a location in all possible configurations like streetview, place etc. </div> </div> <div class=column-item> <div class="icon markdown"> </div> <div class=text> <div class=title>Markdown</div> This plugin supports markdown parsing using the power of marked.js . </div> </div> <div class=column-item> <div class="icon url"> </div> <div class=text> <div class=title>URL</div> converts urls into HTML anchor tags. It also recognizes hundreds of shortened url like bit.ly, buff.ly etc. </div> </div> <div class=column-item> <div class="icon image"> </div> <div class=text> <div class=title>Image</div> Image files with extensions gif|jpg|jpeg|tiff|png|svg|webp are automatically embedded. </div> </div> <div class=column-item> <div class="icon media"> </div> <div class=text> <div class=title>Audio and Video Files</div> Audi files with extension wav|mp3|ogg and video files with extension ogv|webm|mp4 are supported. </div> </div> <div class=column-item> <div class="icon code"> </div> <div class=text> <div class=title>Code Highlighting</div> Get inline code syntax highlighting using the code's markdown syntax with customizable themes. </div> </div> </div> </div> </div> <footer> <span>Copyright &copy; 2016 &nbsp; | &nbsp; Made by <a href=https://twitter.com/ritz078 target=_blank>Ritesh Kumar</a></span> </footer> <script src=scripts/vendor.a6236245.js></script> <script src=scripts/main.5dc7ae3f.js></script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script>(function (b, o, i, l, e, r) {
55
b.GoogleAnalyticsObject = l;
66
b[l] || (b[l] =
77
function () {

0 commit comments

Comments
 (0)