devaroop · devaroop · Dec 27, 2017 · Nov 10, 2017
diff --git a/README.md b/README.md
@@ -5,30 +5,30 @@ Github User Pull Request Viewer :)
 
 ![alt tag](http://devaroop.github.io/github_user_pullRequestViewer/assets/images/site_shot.png)
 
-##How to use?
+## How to use?
 
 * Try the above URL, enter your Github Login and hit 'enter'. Thats it !
 * You can paginate results to see more using the "Next Page" button at the bottom.
 
-##How it works?
+## How it works?
 
 * It fetches user's activity details using the Github Events API (https://developer.github.com/v3/activity/events/)
 * Filters the pull requests opened by the user
 * Displays on the screen, thats it !
 
-#####Challenges:
+##### Challenges:
 
 * This application does not use any server, its all in the browser :) Thanks to the events API supporting CORS requests..yee
 * The events API returns only 30 (max) results per request but allows pagination and hence the number of items may be different in each page.
 * Some API result pages may not contain any pullRequestEvent for the user, in that case, it automatically switches to the next page until there are no activities of the user.
 * The application can only provide results till the 10th page :( Why? The events API only limits pagination upto 10 pages.
 
 
-##Contributing
+## Contributing
 
 * If you have any suggestions, or want to contribute, feel free to fork and open a pull request.
 * Once you do that, just try the application on your browser and see if your above pull request appeared in the list :) Just kidding !
 
-##Development
+## Development
 
-* Download the code, load the 'index.html' using a web server on your machine, and start developing.
+* Download the code, load the 'index.html' using a web server on your machine, and start developing.
diff --git a/assets/css/cover.css b/assets/css/cover.css
@@ -0,0 +1,163 @@
+/*
+ * Globals
+ */
+
+/* Links */
+a,
+a:focus,
+a:hover {
+  color: #fff;
+}
+
+/* Custom default button */
+.btn-default,
+.btn-default:hover,
+.btn-default:focus {
+  color: #333;
+  text-shadow: none; /* Prevent inheritance from `body` */
+  background-color: #fff;
+  border: 1px solid #fff;
+}
+
+
+/*
+ * Base structure
+ */
+
+html,
+body {
+  height: 100%;
+  background-color: #333;
+}
+body {
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 1px 3px rgba(0,0,0,.5);
+}
+
+/* Extra markup and styles for table-esque vertical and horizontal centering */
+.site-wrapper {
+  display: table;
+  width: 100%;
+  height: 100%; /* For at least Firefox */
+  min-height: 100%;
+  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+          box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+}
+.site-wrapper-inner {
+  display: table-cell;
+  vertical-align: top;
+}
+.cover-container {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/* Padding for spacing */
+.inner {
+  padding: 30px;
+}
+
+
+/*
+ * Header
+ */
+.masthead-brand {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.masthead-nav > li {
+  display: inline-block;
+}
+.masthead-nav > li + li {
+  margin-left: 20px;
+}
+.masthead-nav > li > a {
+  padding-right: 0;
+  padding-left: 0;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff; /* IE8 proofing */
+  color: rgba(255,255,255,.75);
+  border-bottom: 2px solid transparent;
+}
+.masthead-nav > li > a:hover,
+.masthead-nav > li > a:focus {
+  background-color: transparent;
+  border-bottom-color: #a9a9a9;
+  border-bottom-color: rgba(255,255,255,.25);
+}
+.masthead-nav > .active > a,
+.masthead-nav > .active > a:hover,
+.masthead-nav > .active > a:focus {
+  color: #fff;
+  border-bottom-color: #fff;
+}
+
+@media (min-width: 768px) {
+  .masthead-brand {
+    float: left;
+  }
+  .masthead-nav {
+    float: right;
+  }
+}
+
+
+/*
+ * Cover
+ */
+
+.cover {
+  padding: 0 20px;
+}
+.cover .btn-lg {
+  padding: 10px 20px;
+  font-weight: bold;
+}
+
+
+/*
+ * Footer
+ */
+
+.mastfoot {
+  color: #999; /* IE8 proofing */
+  color: rgba(255,255,255,.5);
+}
+
+
+/*
+ * Affix and center
+ */
+
+@media (min-width: 768px) {
+  /* Pull out the header and footer */
+  .masthead {
+    position: fixed;
+    top: 0;
+  }
+  .mastfoot {
+    position: fixed;
+    bottom: 0;
+  }
+  /* Start the vertical centering */
+  .site-wrapper-inner {
+    vertical-align: middle;
+  }
+  /* Handle the widths */
+  .masthead,
+  .mastfoot,
+  .cover-container {
+    width: 100%; /* Must be percentage or pixels for horizontal alignment */
+  }
+}
+
+@media (min-width: 992px) {
+  .masthead,
+  .mastfoot,
+  .cover-container {
+    width: 700px;
+  }
+}
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
     <link href="./assets/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Custom styles for this template -->
-    <link href="http://getbootstrap.com/examples/cover/cover.css" rel="stylesheet">
+    <link href="./assets/css/cover.css" rel="stylesheet">
 
     <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -57,12 +57,12 @@ <h1 class="cover-heading">Enter a Github login</h1>
               </p>
             </form>
           </div>
-          
+
           <div id="results" class="text-left">
           </div>
 
           <button id="next_page" class="btn btn-default" style="display:none">Next Page</button>
-          
+
           <div style="margin-top: 20px">
             <!-- share on twitter -->
             <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://devaroop.github.io/github_user_pullRequestViewer/" data-text="Check this tool to know your open source contributions on GitHub" data-via="devaroop123" data-related="devaroop123" data-hashtags="pullRequestViewer">Tweet</a>