feat: tweaks

remy · Jun 20, 2017 · d6dfaa4 · d6dfaa4
1 parent 596fc2d
commit d6dfaa4
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 17 deletions.
diff --git a/css/html5demos.css b/css/html5demos.css
@@ -2,7 +2,6 @@ body {
   font: normal 16px/20px "Helvetica Neue", Helvetica, sans-serif;
   background: rgb(237, 237, 236);
   margin: 0;
-  margin-top: 40px;
   padding: 0;
 }
 
@@ -11,7 +10,7 @@ section, header, footer {
 }
 
 #wrapper {
-  width: 600px;
+  max-width: 600px;
   margin: 0 auto;
   background: #fff url(../images/shade.jpg) repeat-x center bottom;
   -moz-border-radius: 10px;
@@ -85,20 +84,24 @@ li {
 
 #promo {
   font-size: 90%;
-  background: #333 url(../images/learn-js.jpg) no-repeat left center;
-  display: block;
-  color: #efefef;
+  /* background: #333 url(../images/learn-js.jpg) no-repeat left center; */
+  /* display: inline-block; */
+  /* color: #efefef; */
   text-decoration: none;
   cursor: pointer;
-  padding: 0px 20px 0px 260px;
-  border: 5px solid #006;
+  /* border: 5px solid #006; */
   height: 160px;
 }
 
 #promo:hover {
   border-color: #00f;
 }
 
+#promo img {
+  width: 100%;
+  display: block;
+}
+
 #ih5 {
   font-size: 90%;
   background: #442C0D url(../images/ih5.jpg) no-repeat left center;
@@ -317,3 +320,14 @@ pre { font-size: 14px; }
 .atn { color: #606; }
 .atv { color: #080; }
 .dec { color: #606; }
+
+#forkme {
+  display: none;
+}
+
+
+@media all and (min-width: 768px) {
+  body {
+    margin-top: 40px;
+  }
+}
diff --git a/images/terminal-training.png b/images/terminal-training.png
diff --git a/includes/footer.php b/includes/footer.php
@@ -1,9 +1,9 @@
 <a id="html5badge" href="http://www.w3.org/html/logo/">
 <img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage">
 </a>
-    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> 
+    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer>
 </section>
-<a href="https://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+<a id="forkme" href="https://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
 <script src="js/prettify.packed.js"></script>
 <script>
 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

diff --git a/includes/header.php b/includes/header.php
@@ -2,14 +2,15 @@
 <html lang="en"<?=$manifest?>>
 <head>
 <meta charset=utf-8>
-<meta name="viewport" content="width=620">
+<meta name="viewport" content="width=device-width">
 <title>HTML5 Demo: <?=$title?></title>
 <link rel="stylesheet" href="css/html5demos.css">
 <?php if (!$manifest) : ?><script src="js/h5utils.js"></script><?php endif ?>
 </head>
 <body>
 <section id="wrapper">
-<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+<div id="carbonads-container"><script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html5demoscom" id="_carbonads_js"></script>
+</div>
     <header>
       <h1><?=$title?></h1>
     </header>
diff --git a/index.php b/index.php
@@ -39,7 +39,7 @@ function spans($list) {
 <html id="home" lang="en">
 <head>
 <meta charset=utf-8 />
-<meta name="viewport" content="width=620" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>HTML5 Demos and Examples</title>
 <link rel="stylesheet" href="css/html5demos.css" />
 <script src="js/h5utils.js"></script>
@@ -62,9 +62,8 @@ function spans($list) {
 */ ?>
 
 <section>
-  <a href="http://2012.full-frontal.org/workshop/tooling#tooling" id="promo">
-    <p><strong>Learn the power tools for your job: git, SASS, require.js and more</strong></p>
-    <p>One day of tutorials run by 3 different teachers. Choose 4 topics from: git, require.js, SASS, testing, debugging and build processes - and master your tools.</u></p>
+  <a href="https://terminal.training" id="promo">
+    <img src="/images/terminal-training.png">
   </a>
   </section>
       <p id="tags" class="tags">
@@ -96,7 +95,7 @@ function spans($list) {
     </a>
     <footer><a id="built" href="http://twitter.com/rem">@rem built this</a></footer>
 </section>
-<a href="https://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+<a id="forkme" href="https://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script>
 (function() {

diff --git a/page.php b/page.php
@@ -10,7 +10,7 @@
   if ($request == 'offlineapp') { // specific change to support <html manifest=xyz>
     $manifest = ' manifest="html5demo.appcache"';
   }
-  
+
   include('includes/header.php');
   echo $file;
   include('includes/footer.php');