Merge pull request #2 from iDreadful/gh-pages

artemkin · artemkin · commit 1cfdf0e06f7a · 2015-09-21T13:55:14.000+04:00
GitHub buttons
diff --git a/devices.css b/devices.css
@@ -10,8 +10,13 @@
   header {
     margin-top: 20px;
     line-height: 100px;
-    font-size: 36px;
-    font-weight: 100;
+    & h1 {
+      font-size: 36px;
+      font-weight: 100;
+    }
+    & .buttons {
+      top: calc(~"25% - 100px");
+    }
   }
 
   footer {
@@ -78,10 +83,15 @@
 
   header {
     margin-top: 10px;
-    padding: 0 50px;
-    font-size: 18px;
-    font-weight: 300;
-    line-height: auto;
+    padding: 0 10px;
+    & h1 {
+      font-size: 18px;
+      font-weight: 300;
+      line-height: auto;
+    }
+    & .buttons{
+      top: calc(~"25% - 70px");
+    }
   }
 
   footer {
diff --git a/index.html b/index.html
@@ -27,7 +27,11 @@
   </head>
   <body ng-app="app" ng-controller="appController as app">
     <header>
-      Cisco VPN Client Password Decoder
+      <h1>Cisco VPN Client Password Decoder</h1>
+      <div class="buttons">
+        <a class="github-button" href="https://github.com/artemkin" data-count-href="/artemkin/followers" data-count-api="/users/artemkin#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @artemkin on GitHub">Follow @artemkin</a>
+        <a class="github-button" href="https://github.com/artemkin/cisco-password-decoder" data-icon="octicon-star" data-count-href="/artemkin/cisco-password-decoder/stargazers" data-count-api="/repos/artemkin/cisco-password-decoder#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star artemkin/cisco-password-decoder on GitHub">Star</a>
+      </div>
     </header>
 
     <div class="section3d">
@@ -79,5 +83,6 @@
       <img src="shield.svg">
       This is completely safe. Client-side decryption does not require sending any data outside your computer.
     </footer>
+    <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -21,6 +21,13 @@ header {
   width: 100%;
   text-align: center;
   box-sizing: border-box;
+  & .buttons {
+    position: absolute;
+    text-align: center;
+    width: 300px;
+    margin-left: -150px;
+    left: 50%;
+  }  
 }
 
 footer {
