Switched to css Github ribbon

reed-jones · Apr 8, 2017 · b9c5adf · b9c5adf
1 parent d0145bb
commit b9c5adf
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 16 deletions.
diff --git a/desktopicons.css b/desktopicons.css
@@ -176,3 +176,5 @@
 	border-style: solid;
 	border-color: #d3b100 transparent;
 }
+
+
diff --git a/getJSONHighScores.php → getJSONHighScores_example.php b/getJSONHighScores.php → getJSONHighScores_example.php
@@ -9,39 +9,41 @@
 		exit;
 	}
 
-	$json = '{"highscores": '."\n";
-	$json .= '{"easy": ['."\n";
+	header('Content-type:application/json;charset=utf-8');
+
+	$json = '{"highscores":';
+	$json .= '{"easy": [';
 	while ($row = pg_fetch_array($result))
 	{
 
-		$json .= "    " . $row[0] . ",\n"; 
+		$json .= $row[0] . ","; 
 	}
-	$json = trim($json, ",\n");
-	$json .= "\n  ],\n";
+	$json = trim($json, ",");
+	$json .= " ],";
 
 
 	$result = pg_query($con, "SELECT json_build_object('Name', name, 'Time', time) FROM (SELECT name, time FROM _Table_ WHERE difficulty = 1 ORDER BY time, id LIMIT 10) _Table_" );
 
-	$json .= '"medium": ['."\n";
+	$json .= '"medium": [';
 	while ($row = pg_fetch_array($result))
 	{
 
-		$json .= "    " . $row[0] . ",\n"; 
+		$json .= $row[0] . ","; 
 	}
-	$json = trim($json, ",\n");
-	$json .= "\n  ],\n";
+	$json = trim($json, ",");
+	$json .= " ],";
 
 
 	$result = pg_query($con, "SELECT json_build_object('Name', name, 'Time', time) FROM (SELECT name, time FROM _Table_ WHERE difficulty = 2 ORDER BY time, id LIMIT 10) _Table_" );
 
-	$json .= '"hard": ['."\n";
+	$json .= '"hard": [';
 	while ($row = pg_fetch_array($result))
 	{
 
-		$json .= "    " . $row[0] . ",\n"; 
+		$json .= $row[0] . ","; 
 	}
-	$json = trim($json, ",\n");
-	$json .= "\n  ]\n";
+	$json = trim($json, ",");
+	$json .= " ]";
 
 	$json .= "}}";
 

diff --git a/index.html b/index.html
@@ -47,7 +47,8 @@
     </head>
 
     <body>
-    <a href="https://github.com/reed-jones/minesweeper_js"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>
+        <a class="github-ribbon" href="https://github.com/reed-jones/minesweeper_js" title="Fork me on GitHub">Fork me on GitHub</a>
+
             <!-- Desktop Icons -->
         <div class="folder" name="newFolder" style="top:75px; left:100px;">
             <span>New Folder</span>

diff --git a/style.css b/style.css
@@ -217,7 +217,73 @@ body {
     font-size: 0.8em;
 }
 
+/*CSS Github ribbon found from https://github.com/simonwhitaker/github-fork-ribbon-css*/
+.github-ribbon {
+    width: 12.1em;
+    height: 12.1em;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    pointer-events: none;
+    font-size: 13px;
+    text-decoration: none;
+    text-indent: -999999px;
+}
 
-/********* icons *****************/
-body {
+
+
+.github-ribbon:before {
+    content: "";
+    padding: .38em 0;
+    background-color: #333;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
+    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+    -webkit-box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
+    pointer-events: auto;
+}
+.github-ribbon:after {
+    content: attr(title);
+    color: #fff;
+    font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
+    line-height: 1.54em;
+    text-decoration: none;
+    text-shadow: 0 -0.08em rgba(0, 0, 0, 0.5);
+    text-align: center;
+    text-indent: 0;
+
+    padding: .15em 0;
+    margin: .15em 0;
+
+    border-width: .08em 0;
+    border-style: dotted;
+    border-color: rgba(255, 255, 255, 0.7);
 }
+
+.github-ribbon:before, .github-ribbon:after {
+    position: absolute;
+    display: block;
+
+    width: 15.38em;
+    height: 1.54em;
+
+    top: 3.23em;
+    left: -3.23em;
+
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}