Remove GitHub ribbon when screen < 450px

heliom · Apr 6, 2012 · 96bbb0b · 96bbb0b
1 parent 004da80
commit 96bbb0b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/css/styles.css b/css/styles.css
@@ -868,6 +868,9 @@ html[os="iPhone/iPod"] #game #player-cards .card, html[os="iPhone/iPod"] #game #
       height: 337.333333px; }
       #game .card .icons {
         display: none; } }
+@media screen and (max-width: 450px) {
+  #github-ribbon {
+    display: none; } }
 @media screen and (max-width: 480px) and (max-height: 320px) {
   #game h1 {
     margin: 2% auto 0 auto; }

diff --git a/css/styles.scss b/css/styles.scss
@@ -665,6 +665,9 @@ html[os="iPhone/iPod"] {
     }
   }
 }
+@media screen and (max-width: 450px) {
+  #github-ribbon { display: none; }
+}
 @media screen and (max-width: 480px) and (max-height: 320px){
   #game {
   	h1 {

diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   </head>
   <body>
-   <a href="https://github.com/heliom/bytesjack"><img style="z-index: 1; position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+   <a id="github-ribbon" href="https://github.com/heliom/bytesjack"><img style="z-index: 1; position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
     <div id="game">
       <h1>BytesJack</h1>
       <div id="dealer-cards">