Implement redesign first stage

dariemjnr · Sep 27, 2015 · a7e08ea · a7e08ea
1 parent d1baa30
commit a7e08ea
Show file tree

Hide file tree

Showing 9 changed files with 869 additions and 68 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /_site/
 *.DS_Store
+node_modules
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,47 @@
+module.exports = function(grunt) {
+    // Project configuration
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+        less: {
+            dist: {
+                options: {
+                    cleancss: true,
+                    ieCompat: true
+                },
+                files: {
+                    "css/all.css": "less/all.less"
+                }
+            }
+        },
+        postcss: {
+            options: {
+                map: true,
+                processors: [
+                    require('autoprefixer')({
+                        browsers: ['last 2 versions', 'ie 9']
+                    })
+                ]
+            },
+            dist: {
+                src: 'css/all.css'
+            }
+        },
+        watch: {
+            less: {
+                files: ['less/**/*.less'],
+                tasks: ['less:dist', 'postcss:dist'],
+                options: {
+                    spawn: false
+                }
+            }
+        }
+    });
+
+    // Load plugins
+    grunt.loadNpmTasks('grunt-contrib-less');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-postcss');
+
+    // Default task(s)
+    grunt.registerTask('default', ['less', 'postcss:dist']);
+};
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -12,10 +12,7 @@
         <meta property="og:site_name" content="PHP: The Right Way"/>
         <meta property="og:type" content="website"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-        <link href='//fonts.googleapis.com/css?family=Alfa+Slab+One|Droid+Serif:400,700' rel='stylesheet' type='text/css'>
-        <link rel="stylesheet" href="{{ site.baseurl }}styles/all.css"/>
-        <link rel="stylesheet" href="{{ site.baseurl }}styles/print.css" media="print, handheld"/>
-        <link rel="stylesheet" href="{{ site.baseurl }}styles/syntax.css"/>
+        <link rel="stylesheet" href="{{ site.baseurl }}css/all.css"/>
         <link rel="icon" href="{{ site.baseurl }}images/favicon.png" type="image/png"/>
         <script>
         var _gaq = _gaq || [];
@@ -29,8 +26,18 @@
         </script>
     </head>
     <body>
-        <nav class="site-navigation">
+        <header class="site-header">
+            <h1><a href="/">PHP <em>The Right Way</em></a></h1>
             <div class="build-date">Last Updated: {{ site.time }}</div>
+            <div class="share">
+                <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.phptherightway.com/" data-size="large" data-hashtags="php">Tweet</a>
+            </div>
+            <a class="fork-me" href="https://github.com/codeguy/php-the-right-way" target="_blank">
+                <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"/>
+            </a>
+        </header>
+
+        <nav class="site-navigation">
             <ul>
                 <li><a href="/#site-header">Welcome</a>
                     <ul>
@@ -59,50 +66,31 @@
                 {% endfor %}
                     </ul>
                 </li>
-                <li><a href="/#site-footer">Credits</a></li>
+                <li><a href="/#credits">Credits</a></li>
             </ul>
         </nav>
-        <div class="site-content">
-
-            <a class="fork-me" href="https://github.com/codeguy/php-the-right-way">
-                <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
-            </a>
 
-            <header class="site-header" id="site-header">
-                <hgroup>
-                    <h1 class="site-title"><a href="/">PHP</a></h1>
-                    <h2 class="site-slogan">The Right Way.</h2>
-                </hgroup>
-                <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.phptherightway.com/" data-size="large" data-hashtags="php">Tweet</a>
-            </header>
+        <div class="site-content chapters">
             {{ content }}
-            <div id="site-footer">
-                <h1 id="site-footer_title">Credits</h1>
-                <footer class="site-footer" id="site-footer">
-                    <h2 class="epsilon">Created and maintained by</h2>
-                    <ul>
-                        <li><a href="http://twitter.com/codeguy">Josh Lockhart</a></li>
-                    </ul>
-                    <h2 class="epsilon">Project collaborators</h2>
-                    <ul>
-                        <li><a href="http://krisjordan.com/">Kris Jordan</a></li>
-                        <li><a href="http://philsturgeon.co.uk/">Phil Sturgeon</a></li>
-                    </ul>
-                    <h2 class="epsilon">Project contributors</h2>
-                    <div id="contributors">Loading&hellip;</div>
-                    <h2 class="epsilon">Project sponsors</h2>
-                    <ul class="mbd">
-                        <li><a href="http://www.newmediacampaigns.com">New Media Campaigns</a></li>
-                    </ul>
-                    <p>
-                        <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="//i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">PHP: The Right Way</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.twitter.com/codeguy" property="cc:attributionName" rel="cc:attributionURL">Josh Lockhart</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://www.phptherightway.com" rel="dct:source">www.phptherightway.com</a>.
-                    </p>
-                </footer>
-            </div>
         </div>
 
+        <footer class="site-footer" id="credits">
+            <h2>Created and maintained by</h2>
+            <ul>
+                <li><a href="http://joshlockhart.com" target="_blank">Josh Lockhart</a></li>
+                <li><a href="http://philsturgeon.co.uk/" target="_blank">Phil Sturgeon</a></li>
+                <li><a href="https://github.com/codeguy/php-the-right-way/graphs/contributors" target="_blank">Project Contributors</a></li>
+            </ul>
+            <div class="license">
+                <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="//i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a>
+                <br />
+                <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">PHP: The Right Way</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://joshlockhart.com" property="cc:attributionName" rel="cc:attributionURL">Josh Lockhart</a>
+                <br/>
+                is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://www.phptherightway.com" rel="dct:source">www.phptherightway.com</a>.
+            </div>
+        </footer>
+
+        <!-- Twitter -->
         <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
-        <script src="/scripts/setup.js"></script>
     </body>
 </html>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -12,9 +12,7 @@
         <meta property="og:site_name" content="PHP: The Right Way"/>
         <meta property="og:type" content="website"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-        <link href='//fonts.googleapis.com/css?family=Alfa+Slab+One|Droid+Serif:400,700' rel='stylesheet' type='text/css'>
-        <link rel="stylesheet" href="{{ site.baseurl }}styles/all.css"/>
-        <link rel="stylesheet" href="{{ site.baseurl }}styles/syntax.css"/>
+        <link rel="stylesheet" href="{{ site.baseurl }}css/all.css"/>
         <link rel="icon" href="{{ site.baseurl }}images/favicon.png" type="image/png"/>
         <script>
         var _gaq = _gaq || [];
@@ -28,23 +26,38 @@
         </script>
     </head>
     <body>
-        <header class="interior-site-header">
-            <div class="site-title"><a href="/">PHP</a></div>
-            <div class="site-slogan">The Right Way.</div>
-            <a class="btn btn-h" href="/">Return to Main Page</a>
-            <a class="fork-me" href="https://github.com/codeguy/php-the-right-way">
-                <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
+        <header class="site-header">
+            <h1><a href="/">PHP <em>The Right Way</em></a></h1>
+            <div class="build-date">Last Updated: {{ site.time }}</div>
+            <div class="share">
+                <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.phptherightway.com/" data-size="large" data-hashtags="php">Tweet</a>
+            </div>
+            <a class="fork-me" href="https://github.com/codeguy/php-the-right-way" target="_blank">
+                <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"/>
             </a>
         </header>
-        <div class="interior-site-content">
-            <div class="pbh"><em>You are reading extended content about&hellip;</em></div>
+
+        <div class="site-content">
             {{ content }}
-            <a href="/">Return to Main Page</a>
-            <footer class="site-footer" id="site-footer">
-                <p>
-                    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="//i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">PHP: The Right Way</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.twitter.com/codeguy" property="cc:attributionName" rel="cc:attributionURL">Josh Lockhart</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://www.phptherightway.com" rel="dct:source">www.phptherightway.com</a>.
-                </p>
-            </footer>
         </div>
+
+        <footer class="site-footer" id="credits">
+            <h2>Created and maintained by</h2>
+            <ul>
+                <li><a href="http://joshlockhart.com" target="_blank">Josh Lockhart</a></li>
+                <li><a href="http://philsturgeon.co.uk/" target="_blank">Phil Sturgeon</a></li>
+                <li><a href="https://github.com/codeguy/php-the-right-way/graphs/contributors" target="_blank">Project Contributors</a></li>
+            </ul>
+            <div class="license">
+                <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="//i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a>
+                <br />
+                <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">PHP: The Right Way</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://joshlockhart.com" property="cc:attributionName" rel="cc:attributionURL">Josh Lockhart</a>
+                <br/>
+                is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://www.phptherightway.com" rel="dct:source">www.phptherightway.com</a>.
+            </div>
+        </footer>
+
+        <!-- Twitter -->
+        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
     </body>
 </html>
diff --git a/banners.md b/banners.md
@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: page
 title: Website Banners
 description: "Spread the word! Use these banner to let new PHP programmers know about PHP: The Right Way"
 sitemap: true