Permalink
Browse files

Removed depricated "center" tags

  • Loading branch information...
1 parent 0ce8e46 commit 06dc2bf3c86eeb8c9560b124a94de7d1d3006667 @grant grant committed Mar 24, 2014
Showing with 80 additions and 70 deletions.
  1. +14 −16 demos.html
  2. +40 −44 index.html
  3. +26 −10 style.css
View
@@ -8,20 +8,18 @@
</head>
<body class="style-a articles">
<section id="top-home-section" class="top-section color-a">
- <center>
- <h1>Browserify Demos</h1>
- <h3 id="top-subtitle" class="large-font">All demos on this page are self-contained and used Browserify to bundle the require()'d dependencies into a single JavaScript bundle</h3>
- <a href="index.html">
- <button class="top-button" id="top-button2">
- Home
- </button>
- </a>
- <a href="articles.html">
- <button class="top-button" id="top-button2">
- Articles
- </button>
- </a>
- </center>
+ <h1>Browserify Demos</h1>
+ <h3 id="top-subtitle" class="large-font">All demos on this page are self-contained and used Browserify to bundle the require()'d dependencies into a single JavaScript bundle</h3>
+ <a href="index.html">
+ <button class="top-button" id="top-button2">
+ Home
+ </button>
+ </a>
+ <a href="articles.html">
+ <button class="top-button" id="top-button2">
+ Articles
+ </button>
+ </a>
</section>
<section id="middle-section" class="middle-section color-b" >
<div class="content">
@@ -38,14 +36,14 @@ <h2 class="subtitle" style="font-size: 18px; margin-bottom: 30px;">Exploding Dot
<p>Here is the above code running in an iframe, click it to run the animation.</p>
<iframe height="315" src="http://requirebin.com/embed?gist=maxogden/9556868" frameborder="0" allowfullscreen></iframe>
<hr>
-
+
<h2 class="subtitle" style="font-size: 18px; margin-bottom: 30px;">Infinite 2D Cave Generator</h2>
<p>This demo by @hughsk uses 7 small modules to create an explorable 2D procedurally generated cave.</p>
<script src="https://gist.github.com/maxogden/9557700.js?file=index.js"></script>
<p>Click the canvas to give it focus and then use WSAD or Arrow keys to explore.</p>
<iframe height="315" src="http://requirebin.com/embed?gist=maxogden/9557700" frameborder="0" allowfullscreen></iframe>
<hr>
-
+
<h2 class="subtitle" style="font-size: 18px; margin-bottom: 30px;">2D velocity control</h2>
<p>This demo by @sethvincent uses some modules from his <a href="http://crtrdg.com/">CRTRDG</a> 2D game library.</p>
<script src="https://gist.github.com/maxogden/9557776.js?file=index.js"></script>
View
@@ -8,33 +8,31 @@
</head>
<body class="style-a">
<section id="top-home-section" class="top-section color-a">
- <center>
- <div id="top-home-image"></div>
- <h1 id="top-title">
- <img src="images/browserify.png">
- </h1>
- <h3 id="top-subtitle" class="large-font">Browserify lets you require(<span class="color-d">'modules'</span>) in the browser by bundling up all of your dependencies.</h3>
- <a href="#install">
- <button class="top-button" id="top-button1">
- Install
- </button>
- </a>
- <a href="https://github.com/substack/node-browserify#usage">
- <button class="top-button" id="top-button2">
- Documentation
- </button>
- </a>
- <a href="articles.html">
- <button class="top-button" id="top-button2">
- Help + Articles
- </button>
- </a>
- <a href="demos.html">
- <button class="top-button" id="top-button2">
- Sweet Demos
- </button>
- </a>
- </center>
+ <div id="top-home-image"></div>
+ <h1 id="top-title">
+ <img src="images/browserify.png">
+ </h1>
+ <h3 id="top-subtitle" class="large-font">Browserify lets you require(<span class="color-d">'modules'</span>) in the browser by bundling up all of your dependencies.</h3>
+ <a href="#install">
+ <button class="top-button" id="top-button1">
+ Install
+ </button>
+ </a>
+ <a href="https://github.com/substack/node-browserify#usage">
+ <button class="top-button" id="top-button2">
+ Documentation
+ </button>
+ </a>
+ <a href="articles.html">
+ <button class="top-button" id="top-button2">
+ Help + Articles
+ </button>
+ </a>
+ <a href="demos.html">
+ <button class="top-button" id="top-button2">
+ Sweet Demos
+ </button>
+ </a>
</section>
<section id="bottom-section" class="bottom-section color-c">
<header>
@@ -71,7 +69,7 @@ <h2 class="subtitle">Bundle up your first module</h2>
<div class="step">
Install the <span class="blue">uniq</span> module with <a href="https://npmjs.org">npm</a>:
</div>
-
+
<pre class="code"><span class="blue">npm</span> install uniq</pre>
<div class="step">
@@ -91,7 +89,7 @@ <h2 class="subtitle">Bundle up your first module</h2>
<pre class="code"><span class="blue">&lt;script</span> src="<span class="blue">bundle.js</span>"<span class="blue">&gt;&lt;/script&gt;</span></pre>
<h3><a name="more" href="#more">More</a></h3>
-
+
<div class="step">
<ul>
<li>
@@ -132,55 +130,53 @@ <h2 class="subtitle">Bundle up your first module</h2>
<li>Use <a href="https://www.npmjs.org/package/watchify">watchify</a> for super-fast bundle rebuilds as you develop.</li>
</ul>
</div>
-
+
<div class="community">
<h3><a name="community" href="#community">Community</a></h3>
-
+
<div class="step">
Join <span class="blue">irc.freenode.net/#browserify</span> for help, or tweet <a href="http://twitter.com/browserify">@browserify</a>.
</div>
</div>
</div>
</section>
-
+
<section class="review-section color-a" id="who-section">
<header>
<h1 class="title" id="users"><a>Who Uses Browserify</a></h1>
<h2 class="subtitle">here are some things people have said</h2>
</header>
-
- <div class="content">
+
+ <div class="content">
<div class="quote">
<blockquote>At Mapbox we build our website and JavaScript API with Browserify. It makes the structure and modularity of our code rock.
<span class="attrib">- <a href="https://github.com/tmcw">tmcw</a>, developer at <a href="http://mapbox.com">Mapbox</a>.</span>
</blockquote>
-
+
</div>
-
+
<div class="quote">
<blockquote>Browserify does exactly what it says it does and it does it well. I'm glad it exists.
<span class="attrib">- <a href="https://github.com/zpao">zpao</a>, developer on the <a href="https://github.com/facebook/react">React</a> team at Facebook (React uses Browserify).</span>
</blockquote>
-
+
</div>
-
+
<div class="quote">
<blockquote>Browserify radically sped up builds, simplified builds and encouraged modularity.
<span class="attrib">- <a href="https://github.com/terinjokes">terinjokes</a>, developer at CloudFlare.</span>
</blockquote>
</div>
-
+
<div>View more at the <a href="https://github.com/substack/node-browserify/wiki/browserify-in-the-wild">Browserify in the wild</a> page.</div>
-
+
</div>
</section>
-
+
<section id="footer" class="color-c">
<div class="content">
<div id="banner">
- <center>
- <a href="http://browserling.com"><img src="images/created_by_browserling_banner.png"></a>
- </center>
+ <a href="http://browserling.com"><img src="images/created_by_browserling_banner.png"></a>
</div>
<p>
This website is open source and you can fork it <a href="https://github.com/substack/browserify-website">on GitHub</a>. CSS was originally forked from <a href="https://github.com/the-gss/the-gss.github.io">the-gss</a>.
View
@@ -6,7 +6,7 @@
url('fonts/adelle.svg') format('svg')
}
-*, *:after, *::before {
+*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@@ -110,7 +110,7 @@ h2 {
.subtitle {
font-size: 18px;
text-transform: uppercase;
- letter-spacing: .16em;
+ letter-spacing: .16em;
}
.content h2 {
font-style: normal;
@@ -127,6 +127,7 @@ div, p, blockquote, button {
font-size: 14px;
overflow: hidden;
}
+#banner { text-align: center; }
#footer a { color: #e6b35a; }
blockquote {
@@ -140,7 +141,7 @@ blockquote {
font-style: italic;
}
-ul, ol, li {
+ul, ol, li {
margin: 14px 0;
}
@@ -168,7 +169,7 @@ button {
a {
color: inherit;
- text-decoration: none;
+ text-decoration: none;
}
p a {
@@ -242,24 +243,27 @@ button:hover, button.transparent:hover {
.color-a {
background-color: #f0f0f0;
color: #3C6991;
-}
+}
.color-c {
background-color: #222;
color: #F2F4FF;
-}
+}
#top-home-section {
+ text-align: center;
overflow: auto;
}
#top-home-image {
- width: 200px; height: 150px;
+ width: 200px; height: 150px;
background-image: url('images/wizard_hat_blue.png');
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
margin-top: -25px;
+ margin-left: auto;
+ margin-right: auto;
}
h1, h2, h3, p, div { padding: 0 5px; }
@@ -272,7 +276,14 @@ h1, h2, h3, p, div { padding: 0 5px; }
#top-title img {
width: 300px;
}
-#top-subtitle { font-size: 16px; line-height: 24px; max-width: 720px; padding-bottom: 30px; }
+#top-subtitle {
+ font-size: 16px;
+ line-height: 24px;
+ max-width: 720px;
+ padding-bottom: 30px;
+ margin-left: auto;
+ margin-right: auto;
+}
.top-button { font-size: 14px; }
h1 { font-size: 30px; }
@@ -334,6 +345,12 @@ a:hover, button:hover { cursor: pointer; cursor: hand;}
}
}
+@media only screen and (min-width : 480px) {
+ #bottom-section {
+ background-position: 20px 20px;
+ }
+}
+
@media only screen and (min-height : 500px) {
h1 { font-size: 40px; }
#top-home-image { height: 250px; }
@@ -380,5 +397,4 @@ a:hover, button:hover { cursor: pointer; cursor: hand;}
.subtitle { margin-bottom: 40px; }
.community { margin: 40px; }
.badge img { width: 400px;}
-
-}
+}

0 comments on commit 06dc2bf

Please sign in to comment.