How to add a GitHub ribbon to Podcastpedia.org

---

---

Since the source code for Podcastpedia.org is now open on GitHub for everyone to have look at and contribute to, I might as well add a ribbon on the website celebrating that. After a short research on the web, I stepped over Simon Whitaker’s project github-fork-ribbon-css which I could easily integrate in  the website:

Source code for this post is available on Github - podcastpedia.org is an open source project.

In this post I’ll present the two simple steps required for that:

1. Transform the css file into scss

As you might recall from my blog post CSS Preprocessors – Introducing Sass to Podcastpedia.org, I am generating the css files needed for Podcastpedia.org from Sass, so I transformed the css file needed for Github ribbon – gh-fork-ribbon.css, into the following:

/*!
 * "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
 * https://github.com/simonwhitaker/github-fork-ribbon-css
*/

/* Left will inherit from right (so we don't need to duplicate code) */
.github-fork-ribbon {
  /* The right and left classes determine the side we attach our banner to */
  position: absolute;
  /* Add a bit of padding to give some substance outside the "stitching" */
  padding: 2px 0;
  /* Set the base colour */
  background-color: #a00;
  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  /* Add a drop shadow */
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  /* Set the font */
  font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
  z-index: 9999;
  pointer-events: auto;
  a {
    /* Set the text properties */
    color: #fff;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
    text-align: center;
    /* Set the geometry. If you fiddle with these you'll also need
       to tweak the top and right values in .github-fork-ribbon. */
    width: 200px;
    line-height: 20px;
    /* Set the layout properties */
    display: inline-block;
    padding: 2px 0;
    /* Add "stitching" effect */
    border-width: 1px 0;
    border-style: dotted;
    border-color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    &:hover {
      /* Set the text properties */
      color: #fff;
      text-decoration: none;
      text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
      text-align: center;
      /* Set the geometry. If you fiddle with these you'll also need
         to tweak the top and right values in .github-fork-ribbon. */
      width: 200px;
      line-height: 20px;
      /* Set the layout properties */
      display: inline-block;
      padding: 2px 0;
      /* Add "stitching" effect */
      border-width: 1px 0;
      border-style: dotted;
      border-color: #fff;
      border-color: rgba(255, 255, 255, 0.7);
    }
  }
}

.github-fork-ribbon-wrapper {
  width: 150px;
  height: 150px;
  position: absolute;
  overflow: hidden;
  top: 0;
  z-index: 9999; //should really be on top of everything
  pointer-events: none;
  @include until-mq(1340px){
    display: none;
  }
  &.fixed {
    position: fixed;
  }
  &.left {
    left: 0;
  }
  &.right {
    right: 0;
  }
  &.left-bottom {
    position: fixed;
    top: inherit;
    bottom: 0;
    left: 0;
  }
  &.right-bottom {
    position: fixed;
    top: inherit;
    bottom: 0;
    right: 0;
  }
}

$rotation-angle: 45deg;
.github-fork-ribbon-wrapper {
  &.right .github-fork-ribbon {
    top: 42px;
    right: -43px;
    transform: rotate($rotation-angle);
  }
  &.left .github-fork-ribbon {
    top: 42px;
    left: -43px;
    transform: rotate(-$rotation-angle);
  }
  &.left-bottom .github-fork-ribbon {
    top: 80px;
    left: -43px;
    transform: rotate($rotation-angle);
  }
  &.right-bottom .github-fork-ribbon {
    top: 80px;
    right: -43px;
    transform: rotate(-$rotation-angle);
  }
}

In Podcastpedia’s case the ribbon will be displayed only on big monitors with resolutions bigger than 1340px… This shouldn’t pose a problem for developers as they should use at least screens with full HD resolutions.

Note: By using the gulp-autoprefixer plugin, there was no need to replicate the CSS vendor prefixes present in the original .css file. See my post How to use Gulp to generate CSS from Sass/scss  for more details about that.

2. Add code snippet after the body tag

Following the instrunctions from GitHub, the second step was to add the highlighted html code snippet after the body tag:

<body id="<tiles:insertAttribute name="body-id" />">
	<!-- TOP LEFT RIBBON: START COPYING HERE -->
	<div class="github-fork-ribbon-wrapper left">
		<div class="github-fork-ribbon">
			<a href="https://github.com/podcastpedia/podcastpedia-web" target="_blank">Fork me on GitHub</a>
		</div>
	</div>
	...............
</body>

Well, it cannot get simpler than that… So thanks again Simon for this nice peace of work.

Source code for this post is available on Github - podcastpedia.org is an open source project.

Resources

GitHub

• simonwhiteker/github-fork-ribbon-css