Permalink
Browse files

Bug fixes

  • Loading branch information...
1 parent f6c4315 commit addc0951b311f836ee1f6bc897576eee5d85a863 Andy Clarke committed May 18, 2012
View
26 320andup.html
@@ -40,37 +40,15 @@
<!-- JavaScript -->
<script src="js/modernizr-2.5.3-min.js"></script>
-<!-- For iPhone 4 -->
-<!-- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png"> -->
-<!-- For iPad 1-->
-<!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> -->
-<!-- For the new iPad -->
-<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png">
-<!-- For iPhone 3G, iPod Touch and Android -->
-<!-- <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> -->
-<!-- For Nokia -->
-<!-- <link rel="shortcut icon" href="img/l/apple-touch-icon.png"> -->
-<!-- For everything else -->
<link rel="shortcut icon" href="/favicon.ico">
-<!--iOS -->
-<!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->
-<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
-<!-- <link rel="apple-touch-startup-image" href="img/splash.png"> -->
-
-<!-- <script>(function(){var p,l,r=window.devicePixelRatio;if(navigator.platform==="iPad"){p=r===2?"img/startup/startup-tablet-portrait-retina.png":"img/startup/startup-tablet-portrait.png";l=r===2?"img/startup/startup-tablet-landscape-retina.png":"img/startup/startup-tablet-landscape.png";document.write('<link rel="apple-touch-startup-image" href="'+l+'" media="screen and (orientation: landscape)"/><link rel="apple-touch-startup-image" href="'+p+'" media="screen and (orientation: portrait)"/>');}else{p=r===2?"img/startup/startup-retina.png":"img/startup/startup.png";document.write('<link rel="apple-touch-startup-image" href="'+p+'"/>');}})()</script> -->
-<!--Microsoft -->
-
-<!-- Prevents links from opening in mobile Safari -->
-<!-- <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script> -->
<meta http-equiv="cleartype" content="on">
</head>
<body class="clearfix">
<header role="banner" class="clearfix">
<h2><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a></h2>
-<a href="#navigation" title="Jump to navigation"><i class="icon-chevron-down"></i></a>
</header>
<div class="content clearfix">
@@ -733,10 +711,6 @@ <h3 class="h4">Table (table-bordered and table-striped)</h3>
</div><!-- / content -->
-<nav role="navigation" id="navigation">
-<p><a href="http://stuffandnonsense.co.uk/blog/about/the_new_320_and_up">Read more about &#8216;320 and Up&#8217; on Andy&#8217;s blog</a></p>
-</nav>
-
<footer role="contentinfo">
<small>320 and Up, a Fashionably Flexible &#169; responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
<small>&#8216;320 and Up&#8217; wouldn&#8217;t be possible without <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://framelessgrid.com/">Frameless grid</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>. The Font Awesome webfont, CSS, and LESS files are licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</small>
View
0 Icon
No changes.
View
72 css/320andup.css
@@ -1832,63 +1832,6 @@ table tbody tr:hover th {
.table-striped tbody tr:nth-child(odd) th {
background-color: #c7ced6;
}
-/* Banner =================================================== */
-[role="banner"] {
- margin: 0 auto;
- padding-top: 1.5em;
- width: 90%;
-}
-[role="banner"] a[href="#navigation"] {
- display: block;
- position: absolute;
- top: 11px;
- right: 22px;
- width: 43px;
- height: 43px;
- white-space: nowrap;
- overflow: hidden;
- background-color: #586879;
- border: 1px solid #4d5b6a;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- color: #f3f5f6;
- font-size: 32px;
- font-size: 3.2rem;
- line-height: 42px;
- text-align: center;
- text-decoration: none;
-}
-/* Navigation =================================================== */
-[role="navigation"] {
- margin: 0 auto 1.5em;
- width: 90%;
- background-color: #586879;
- border: 1px solid #4d5b6a;
-}
-[role="navigation"] p {
- margin-bottom: 0;
- padding: 6px 11px;
- color: #ffffff;
-}
-[role="navigation"] a {
- color: #ffffff;
-}
-/* Content =================================================== */
-.content {
- margin: 0 auto;
- width: 90%;
-}
-/* contentinfo =================================================== */
-[role="contentinfo"] {
- padding: 1.5em 0;
- border-top: 3px solid #c7ced6;
-}
-[role="contentinfo"] small {
- display: block;
- margin: 0 auto 1.5em;
- width: 90%;
-}
@media print {
/* Print =================================================== */
* {
@@ -1950,21 +1893,6 @@ table tbody tr:hover th {
}
@media only screen and (min-width: 768px) {
/* 768 =================================================== */
- body {
- display: table;
- border-collapse: collapse;
- }
- [role="banner"] a[href="#navigation"] {
- display: none !important;
- visibility: hidden;
- }
- [role="navigation"] {
- display: table-header-group;
- }
- [role="navigation"] p {
- margin: 0 auto;
- width: 90%;
- }
}
@media only screen and (min-width: 992px) {
/* 992 =================================================== */
View
BIN img/a-rss.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
7 index.html
@@ -45,7 +45,7 @@
<!-- For iPad 1-->
<!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> -->
<!-- For the new iPad -->
-<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png">
+<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png"> -->
<!-- For iPhone 3G, iPod Touch and Android -->
<!-- <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> -->
<!-- For Nokia -->
@@ -70,7 +70,6 @@
<header role="banner" class="clearfix">
<h1><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a></h1>
-<a href="#navigation" title="Jump to navigation"><i class="icon-chevron-down"></i></a>
</header>
<div class="content clearfix">
@@ -103,10 +102,6 @@ <h2 class="h3">&#8216;320 and Up&#8217; contains:</h2>
</div><!-- / content -->
-<nav role="navigation" id="navigation">
-<p><a href="http://stuffandnonsense.co.uk/blog/about/the_new_320_and_up">Read more about &#8216;320 and Up&#8217; on Andy&#8217;s blog</a></p>
-</nav>
-
<footer role="contentinfo">
<small>320 and Up, a Fashionably Flexible &#169; responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
<small>&#8216;320 and Up&#8217; wouldn&#8217;t be possible without <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://framelessgrid.com/">Frameless grid</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>. The Font Awesome webfont, CSS, and LESS files are licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</small>
View
6 less/320andup.less
@@ -102,5 +102,9 @@ only screen and (min-device-pixel-ratio: 1.5) {
// 11. UPSTARTS ==============================
+// Modules and panels
@import "upstarts/320andup-modules/upstart.less";
-@import "upstarts/320andup-panels/upstart.less";
+@import "upstarts/320andup-panels/upstart.less";
+
+// Layout option using display:table for navigation positioning
+// @import "upstarts/320andup-display-table/upstart.less";
View
32 less/768.less
@@ -10,37 +10,11 @@
/* 768 =================================================== */
// 1. ROOT ==============================
-
-body {
-display : table;
-border-collapse : collapse; }
-
// 2. TYPOGRAPHY ==============================
// 3. COLOUR ==============================
// 4. TEXTURE ==============================
// 5. ELEMENTS ==============================
// 6. LAYOUT ==============================
-
-// BANNER ==============================
-
-[role="banner"] a[href="#navigation"] {
-.hidden; }
-
-// NAVIGATION ==============================
-
-[role="navigation"] {
-display : table-header-group;
-
-p {
-margin : 0 auto;
-width : 90%; }
-}
-
-// CONTENT ==============================
-// 11 MAIN ==============================
-// COMPLEMENTARY ==============================
-// CONTENTINFO ==============================
-
-// 7. VENDOR-SPECIFIC ==============================
-// 8. MODERNIZR ==============================
-// 9. TEMPLATE SPECIFICS ==============================
+// 7. VENDOR-SPECIFIC ==============================
+// 8. MODERNIZR ==============================
+// 9. TEMPLATE SPECIFICS ==============================
View
58 less/page.less
@@ -7,63 +7,5 @@
// ==========================================================
-/* Banner =================================================== */
-[role="banner"] {
-margin : 0 auto;
-padding-top : @baselineheight;
-width : 90%;
-a[href="#navigation"] {
-display : block;
-position : absolute;
-top : 11px;
-right : 22px;
-width : 43px;
-height : 43px;
-white-space : nowrap;
-overflow : hidden;
-background-color : lighten(@basecolor, 20%);
-border : 1px solid lighten(@basecolor, 15%);
-.rounded(4px);
-color : lighten(@basecolor, 75%);
-.font-size(32);
-line-height : 42px;
-text-align : center;
-text-decoration : none; }
-}
-
-/* Navigation =================================================== */
-
-[role="navigation"] {
-margin : 0 auto @baselineheight;
-width : 90%;
-background-color : lighten(@basecolor, 20%);
-border : 1px solid lighten(@basecolor, 15%);
-
-p {
-margin-bottom : 0;
-padding : 6px 11px;
-color : @white; }
-
-a {
-color : @white; }
-}
-
-/* Content =================================================== */
-
-.content {
-margin : 0 auto;
-width : 90%; }
-
-/* contentinfo =================================================== */
-
-[role="contentinfo"] {
-padding : @baselineheight 0;
-border-top : 3px solid lighten(@basecolor, 60%);
-
-small {
-display : block;
-margin : 0 auto @baselineheight;
-width : 90%; }
-}
View
82 less/upstarts/320andup-display-table/index.html
@@ -0,0 +1,82 @@
+<!doctype html>
+
+<!--
+320 and Up
+Author: Andy Clarke (http://stuffandnonsense.co.uk)
+Author: Keith Clark (http://twitter.com/keithclarkcouk)
+Version: 3
+URL: http://stuffandnonsense.co.uk/projects/320andup/
+License: http://creativecommons.org/licenses/MIT/
+-->
+
+<!-- HTML5 Mobile Boilerplate -->
+<!--[if IEMobile 7]><html class="no-js iem7"><![endif]-->
+<!--[if (gt IEMobile 7)|!(IEMobile)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+
+<!-- HTML5 Boilerplate -->
+<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
+<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
+
+<head>
+<meta charset="utf-8">
+
+<title>Display table-based navigation | Upstart | 320 and Up</title>
+
+<meta name="description" content="">
+<meta name="author" content="">
+
+<!-- http://t.co/dKP3o1e -->
+<meta name="HandheldFriendly" content="True">
+<meta name="MobileOptimized" content="320">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<!-- For all browsers -->
+<link rel="stylesheet" href="../../../css/320andup.css">
+
+<!--[if (lt IE 9) & (!IEMobile)]>
+<script src="../../../js/selectivizr-min.js"></script>
+<![endif]-->
+
+<!-- JavaScript -->
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
+
+<link rel="shortcut icon" href="/favicon.ico">
+<meta http-equiv="cleartype" content="on">
+</head>
+
+<body class="clearfix">
+
+<header role="banner" class="clearfix">
+<h1><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a></h1>
+<a href="#navigation" title="Jump to navigation"><i class="icon-chevron-down"></i></a>
+</header>
+
+<div class="content clearfix">
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+</div><!-- / content -->
+
+<nav role="navigation" id="navigation">
+<p><a href="http://stuffandnonsense.co.uk/blog/about/the_new_320_and_up">Read more about &#8216;320 and Up&#8217; on Andy&#8217;s blog</a></p>
+</nav>
+
+<footer role="contentinfo">
+<small>320 and Up, a Fashionably Flexible &#169; responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
+<small>&#8216;320 and Up&#8217; wouldn&#8217;t be possible without <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://framelessgrid.com/">Frameless grid</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>. The Font Awesome webfont, CSS, and LESS files are licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</small>
+</footer>
+
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script>window.jQuery || document.write('<script src="../../../js/jquery-1.7.2.min.js"><\/script>')</script>
+
+<script src="../../../js/plugins.js"></script>
+<script src="../../../js/script.js"></script>
+<script src="../../../js/helper.js"></script>
+<script>
+var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
+(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
+g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
+s.parentNode.insertBefore(g,s)}(document,"script"));
+</script>
+</body>
+</html>
View
118 less/upstarts/320andup-display-table/upstart.less
@@ -0,0 +1,118 @@
+// ==========================================================
+
+/* 320 and Up */
+/* Display table-based navigation upstart*/
+/* Version: 1.0 */
+/* Author: Andy Clarke */
+/* URL: http://stuffandnonsense.co.uk/projects/320andup */
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Banner =================================================== */
+
+[role="banner"] {
+margin : 0 auto;
+padding-top : @baselineheight;
+width : 90%;
+
+a[href="#navigation"] {
+display : block;
+position : absolute;
+top : 11px;
+right : 22px;
+width : 43px;
+height : 43px;
+white-space : nowrap;
+overflow : hidden;
+background-color : lighten(@basecolor, 20%);
+border : 1px solid lighten(@basecolor, 15%);
+.rounded(4px);
+color : lighten(@basecolor, 75%);
+.font-size(32);
+line-height : 42px;
+text-align : center;
+text-decoration : none; }
+}
+
+/* Navigation =================================================== */
+
+[role="navigation"] {
+margin : 0 auto @baselineheight;
+width : 90%;
+background-color : lighten(@basecolor, 20%);
+border : 1px solid lighten(@basecolor, 15%);
+
+p {
+margin-bottom : 0;
+padding : 6px 11px;
+color : @white; }
+
+a {
+color : @white; }
+}
+
+/* Content =================================================== */
+
+.content {
+margin : 0 auto;
+width : 90%; }
+
+/* contentinfo =================================================== */
+
+[role="contentinfo"] {
+padding : @baselineheight 0;
+border-top : 3px solid lighten(@basecolor, 60%);
+
+small {
+display : block;
+margin : 0 auto @baselineheight;
+width : 90%; }
+}
+
+// 480px
+@media only screen and (min-width: 480px) {
+/* Styles */
+}
+
+// 600px
+@media only screen and (min-width: 600px) {
+/* Styles */
+}
+
+// 768px
+@media only screen and (min-width: 768px) {
+
+body {
+display : table;
+border-collapse : collapse; }
+
+[role="banner"] a[href="#navigation"] {
+.hidden; }
+
+[role="navigation"] {
+display : table-header-group;
+
+p {
+margin : 0 auto;
+width : 90%; }
+}
+
+}
+
+// 992px
+@media only screen and (min-width: 992px) {
+/* Styles */
+}
+
+// 1382px
+@media only screen and (min-width: 1382px) {
+/* Styles */
+}
+
+// 2x
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+/* Styles */
+}

0 comments on commit addc095

Please sign in to comment.