Skip to content

Commit 74c7643

Browse files
bennettfeelybennettfeely
committed
Add share to twitter button
1 parent 22fc7d3 commit 74c7643

File tree

4 files changed

+66
-7
lines changed

4 files changed

+66
-7
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta content="ie=edge" http-equiv="x-ua-compatible"><meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport"><title>CSS Creatures</title><meta content="#283377" name="theme-color"><meta content="CSS Creatures" name="application-name"><meta content="See your own creature appear here by tweeting to @csscreatures!" name="description"><meta content="General" name="rating"><meta content="yes" name="mobile-web-app-capable"><link href="manifest.json" rel="manifest"><link href="license.txt" rel="license"><meta content="Bennett Feely" property="article:author"><meta content="See your own creature appear here by tweeting to @csscreatures!" property="og:description"><meta content="img/creatures.png" property="og:image"><meta content="en_US" property="og:locale"><meta content="CSS Creatures" property="og:site_name"><meta content="CSS Creatures" property="og:title"><meta content="website" property="og:type"><meta content="https://bennettfeely.com/csscreatures" property="og:url"><meta content="summary" name="twitter:card"><meta content="@bennettfeely" name="twitter:creator"><meta content="See your own creature appear here by tweeting to @csscreatures!" name="twitter:description"><meta content="img/creatures.png" name="twitter:image"><meta content="@csscreatures" name="twitter:site"><meta content="CSS Creatures" name="twitter:title"><meta content="https://bennettfeely.com/csscreatures" name="twitter:url"><link href="img/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"><link href="img/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"><link href="img/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"><link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"><link href="style.min.css" rel="stylesheet"><meta content="webkit" name="renderer"></head><body><header><div class="container"><div class="content"><a class="logo" href="https://bennettfeely.com/csscreatures">CSS Creatures</a><div class="directions-toggle"><span>Make your own</span><svg class="close" height="16" preserveAspectRatio="xMaxYMid" viewBox="0 0 16 16" width="16"><path d="M 5 5, L 11 11, M 11 5, L 5 11"></path></svg></div></div><div class="directions-box"><div class="container"><h2 class="instructions">Create your CSS Creature by tweeting to <span class="handle-highlight">@csscreatures</span>. You can customize <span class="color-highlight">color</span>, <span class="personality-highlight">personality</span>, and <span class="more-highlight">more</span>!</h2></div><div class="examples"><h3>Examples:</h3><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="personality-highlight">happy</span> <span class="more-highlight">teeth</span> <span class="color-highlight">turquoise</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="color-highlight">#db2</span> <span class="more-highlight">tiny</span> <span class="personality-highlight">hungry</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="more-highlight">moustache</span> <span class="color-highlight">lightblue</span> <span class="more-highlight">tooth</span> <span class="more-highlight">winking</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="more-highlight">cyclops</span> <span class="color-highlight">#62822B</span> <span class="more-highlight">teeth</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div></div><div class="container"><h3>Creatures take roughly 15-30 seconds to cook. Refresh this page and you'll see your creature here soon.</h3></div></div></div></header><main><div class="container"><div class="creatures"></div></div></main><footer><div class="container"><h2>CSS Creatures are generated from 100% all-natural HTML and fresh-squeezed CSS.</h2><div class="directions-toggle"><span>Make your own</span></div><h2>Brought to you by <a href="https://twitter.com/bennettfeely">@bennettfeely</a>. Find this project on <a href="https://github.com/bennettfeely/csscreatures">GitHub</a>.</h2></div></footer></body><script src="creatures.min.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-35724550-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-35724550-1")</script></html>
1+
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta content="ie=edge" http-equiv="x-ua-compatible"><meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport"><title>CSS Creatures</title><meta content="#283377" name="theme-color"><meta content="CSS Creatures" name="application-name"><meta content="See your own creature appear here by tweeting to @csscreatures!" name="description"><meta content="General" name="rating"><meta content="yes" name="mobile-web-app-capable"><link href="manifest.json" rel="manifest"><link href="license.txt" rel="license"><meta content="Bennett Feely" property="article:author"><meta content="See your own creature appear here by tweeting to @csscreatures!" property="og:description"><meta content="img/creatures.png" property="og:image"><meta content="en_US" property="og:locale"><meta content="CSS Creatures" property="og:site_name"><meta content="CSS Creatures" property="og:title"><meta content="website" property="og:type"><meta content="https://bennettfeely.com/csscreatures" property="og:url"><meta content="summary" name="twitter:card"><meta content="@bennettfeely" name="twitter:creator"><meta content="See your own creature appear here by tweeting to @csscreatures!" name="twitter:description"><meta content="img/creatures.png" name="twitter:image"><meta content="@csscreatures" name="twitter:site"><meta content="CSS Creatures" name="twitter:title"><meta content="https://bennettfeely.com/csscreatures" name="twitter:url"><link href="img/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"><link href="img/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"><link href="img/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"><link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"><link href="style.min.css" rel="stylesheet"><meta content="webkit" name="renderer"></head><body><header><div class="container"><div class="content"><a class="logo" href="https://bennettfeely.com/csscreatures">CSS Creatures</a><div class="directions-toggle"><span>Make your own</span><svg class="close" height="16" preserveAspectRatio="xMaxYMid" viewBox="0 0 16 16" width="16"><path d="M 5 5, L 11 11, M 11 5, L 5 11"></path></svg></div></div><div class="directions-box"><div class="container"><h2 class="instructions">Create your CSS Creature by tweeting to <span class="handle-highlight">@csscreatures</span>. You can customize <span class="color-highlight">color</span>, <span class="personality-highlight">personality</span>, and <span class="more-highlight">more</span>!</h2></div><div class="examples"><h3>Examples:</h3><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="personality-highlight">happy</span> <span class="more-highlight">teeth</span> <span class="color-highlight">turquoise</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="color-highlight">#db2</span> <span class="more-highlight">tiny</span> <span class="personality-highlight">hungry</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="more-highlight">moustache</span> <span class="color-highlight">lightblue</span> <span class="more-highlight">tooth</span> <span class="more-highlight">winking</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="more-highlight">cyclops</span> <span class="color-highlight">#62822B</span> <span class="more-highlight">teeth</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div></div><div class="container"><h3>Creatures take roughly 15-30 seconds to cook. Refresh this page and you'll see your creature here soon.</h3></div></div></div></header><main><div class="container"><div class="creatures"></div></div></main><footer><div class="container"><h2>CSS Creatures are generated from 100% all-natural HTML and fresh-squeezed CSS.</h2><h3>Brought to you by <a href="https://twitter.com/bennettfeely">@bennettfeely</a>. Find this project on <a href="https://github.com/bennettfeely/csscreatures">GitHub</a>.</h3><h3><div class="directions-toggle"><span>Make your own</span></div><div class="share"><a class="twitter share-button" href="http://twitter.com/share?text=Make%20a%20CSS%20creature%20from%20a%20tweet%20%20https%3A%2F%2Fbennettfeely.com%2Fcsscreatures"><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg>Share this page</a></div></h3></div></footer></body><script src="creatures.min.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-35724550-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-35724550-1")</script></html>

‎src/index.slim

+9-3
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,15 @@ html lang="en"
8686
footer
8787
.container
8888
h2 CSS Creatures are generated from 100% all-natural HTML and fresh-squeezed CSS.
89-
.directions-toggle
90-
span Make your own
91-
h2 Brought to you by <a href="https://twitter.com/bennettfeely">@bennettfeely</a>. Find this project on <a href="https://github.com/bennettfeely/csscreatures">GitHub</a>.
89+
h3 Brought to you by <a href="https://twitter.com/bennettfeely">@bennettfeely</a>. Find this project on <a href="https://github.com/bennettfeely/csscreatures">GitHub</a>.
90+
h3
91+
.directions-toggle
92+
span Make your own
93+
.share
94+
a.twitter.share-button href="http://twitter.com/share?text=Make%20a%20CSS%20creature%20from%20a%20tweet%20%20https%3A%2F%2Fbennettfeely.com%2Fcsscreatures"
95+
svg.twitter-logo xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 400 400"
96+
path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"
97+
| Share this page
9298

9399
script src="creatures.min.js"
94100
script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-35724550-1"

‎src/style.scss

+55-2
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,10 @@ header {
160160
margin-bottom: 0;
161161
}
162162

163+
footer & {
164+
font-size: 1em;
165+
}
166+
163167
.showing-directions header & {
164168
border-radius: $radius $radius 0 0;
165169
box-shadow: none;
@@ -285,12 +289,14 @@ header {
285289
.more-highlight { animation-delay: $highlight-duration * .75; }
286290
}
287291

292+
288293
.twitter-logo {
289-
position: absolute;
290294
width: 1.5em;
291295
height: 1.5em;
292-
left: .125em;
296+
vertical-align: middle;
297+
position: absolute;
293298
top: .125em;
299+
left: .125em;
294300

295301
path {
296302
fill: $blue_twitter;
@@ -762,3 +768,50 @@ header {
762768
footer {
763769
padding: 0 1em;
764770
}
771+
772+
773+
// Share =============================================================================
774+
.share {
775+
display: inline-block;
776+
font-size: 1em;
777+
margin-left: .5em;
778+
}
779+
780+
781+
.share-button {
782+
@extend %no-select;
783+
@extend %no-drag;
784+
display: inline-block;
785+
border-radius: $radius;
786+
text-decoration: none;
787+
box-shadow: $shadow;
788+
color: $white;
789+
padding: 1rem .7em;
790+
background: $blue;
791+
border: 0;
792+
box-shadow: inset .15em -.15em $shadow;
793+
transition:
794+
background $transition,
795+
color $transition;
796+
}
797+
798+
.share-button {
799+
position: relative;
800+
cursor: pointer;
801+
margin-right: .25em;
802+
padding-left: 2em;
803+
804+
.twitter-logo {
805+
top: .525em;
806+
left: .5em;
807+
808+
path {
809+
fill: $blue_twitter;
810+
}
811+
}
812+
813+
&:hover {
814+
color: white;
815+
border: 0;
816+
}
817+
}

0 commit comments

Comments
 (0)