Better share

adamschwartz · Apr 3, 2014 · 51fb563 · 51fb563
1 parent 24ccb5e
commit 51fb563
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 18 deletions.
diff --git a/css/home.css b/css/home.css
@@ -28,16 28,34 @@ p.author {
  text-decoration: none;
  color: inherit; }
 
-.share iframe {
- display: block;
- margin: -1em auto 0.7em;
- opacity: 0.5;
- border: 0;
- height: 2.4rem;
- width: 13.6rem;
 .share {
  margin-top: -0.7rem;
  margin-bottom: 0.7rem;
  padding-left: 0.6rem;
- -webkit-filter: invert(1);
- -webkit-transform: traslateZ(0); }
  font-size: 0; }
  .share iframe {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  background: #eeeeee;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  height: 2.4rem;
  width: 13.6rem;
  height: 1.6rem;
  opacity: 0.8; }
  .share iframe:hover {
  opacity: 1; }
  .share iframe.github {
  width: 8rem;
  margin-right: 0.7rem; }
  .share iframe.twitter {
  width: 5.5rem; }
 
 h2 {
  font-weight: 300;

diff --git a/index.html b/index.html
@@ -24,9 24,8 @@
  <a class="logo animated" href="/magic-of-css"><h1>The Magic of CSS</h1><div class="the-magic-of">The Magic Of</div><div class="css-rainbow"><div class="css-letter css-rainbow-c"><div class="rainbow"><div class="bands"></div></div></div><div class="css-letter css-rainbow-s css-rainbow-s-1"><div class="top-half"><div class="rainbow"><div class="bands"></div></div></div><div class="bottom-half"><div class="rainbow"><div class="bands"></div></div></div></div><div class="css-letter css-rainbow-s css-rainbow-s-2"><div class="top-half"><div class="rainbow"><div class="bands"></div></div></div><div class="bottom-half"><div class="rainbow"><div class="bands"></div></div></div></div></div></a>
  <p class="author"><a href="http://twitter.com/adamfschwartz">by @adamfschwartz</a></p>
  <div class="share">
- <a href="https://github.com/adamschwartz/magic-of-css">
- <iframe src="http://hubstar.io/github/spin/adamschwartz/magic-of-css?name= "></iframe>
- </a>
  <iframe class="github" src="http://hubstar.io/github/spin/adamschwartz/magic-of-css?name= "></iframe>
  <iframe class="twitter" src="http://hubstar.io/twitter/spin/?name= &amp;url=http://adamschwartz.co/magic-of-css&amp;text=Become a CSS magician&amp;via=adamfschwartz"></iframe>
  </div>
  <div class="separator"></div>
  <div class="preface-link">

diff --git a/sass/home.sass b/sass/home.sass
@@ -37,17 37,32 @@ p.author
  color: inherit
 
 .share
  margin-top: -.7rem
  margin-bottom: .7rem
  padding-left: .6rem
  font-size: 0
 
  iframe
- display: block
- margin: -1em auto 0.7em
- opacity: 0.5
   inline-block
  background: #eee
  border-radius: 5px
  margin-left: auto
  margin-right: auto
  border: 0
  height: 2.4rem
  width: 13.6rem
- padding-left: .6rem
- -webkit-filter: invert(1)
- -webkit-transform: traslateZ(0)
  height: 1.6rem
  opacity: .8
 
  &:hover
  opacity: 1
 
  &.github
  width: 8rem
  margin-right: .7rem
 
  &.twitter
  width: 5.5rem
 
 h2
  font-weight: 300