Skip to content
This repository
Browse code

Bug fixes

  • Loading branch information...
commit addc0951b311f836ee1f6bc897576eee5d85a863 1 parent f6c4315
Andy Clarke authored
26 320andup.html
@@ -40,29 +40,8 @@
40 40 <!-- JavaScript -->
41 41 <script src="js/modernizr-2.5.3-min.js"></script>
42 42
43   -<!-- For iPhone 4 -->
44   -<!-- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png"> -->
45   -<!-- For iPad 1-->
46   -<!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> -->
47   -<!-- For the new iPad -->
48   -<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png">
49   -<!-- For iPhone 3G, iPod Touch and Android -->
50   -<!-- <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> -->
51   -<!-- For Nokia -->
52   -<!-- <link rel="shortcut icon" href="img/l/apple-touch-icon.png"> -->
53   -<!-- For everything else -->
54 43 <link rel="shortcut icon" href="/favicon.ico">
55 44
56   -<!--iOS -->
57   -<!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->
58   -<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
59   -<!-- <link rel="apple-touch-startup-image" href="img/splash.png"> -->
60   -
61   -<!-- <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> -->
62   -<!--Microsoft -->
63   -
64   -<!-- Prevents links from opening in mobile Safari -->
65   -<!-- <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> -->
66 45 <meta http-equiv="cleartype" content="on">
67 46 </head>
68 47
@@ -70,7 +49,6 @@
70 49
71 50 <header role="banner" class="clearfix">
72 51 <h2><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a></h2>
73   -<a href="#navigation" title="Jump to navigation"><i class="icon-chevron-down"></i></a>
74 52 </header>
75 53
76 54 <div class="content clearfix">
@@ -733,10 +711,6 @@ <h3 class="h4">Table (table-bordered and table-striped)</h3>
733 711
734 712 </div><!-- / content -->
735 713
736   -<nav role="navigation" id="navigation">
737   -<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>
738   -</nav>
739   -
740 714 <footer role="contentinfo">
741 715 <small>320 and Up, a Fashionably Flexible &#169; responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
742 716 <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>
0  Icon
No changes.
72 css/320andup.css
@@ -1832,63 +1832,6 @@ table tbody tr:hover th {
1832 1832 .table-striped tbody tr:nth-child(odd) th {
1833 1833 background-color: #c7ced6;
1834 1834 }
1835   -/* Banner =================================================== */
1836   -[role="banner"] {
1837   - margin: 0 auto;
1838   - padding-top: 1.5em;
1839   - width: 90%;
1840   -}
1841   -[role="banner"] a[href="#navigation"] {
1842   - display: block;
1843   - position: absolute;
1844   - top: 11px;
1845   - right: 22px;
1846   - width: 43px;
1847   - height: 43px;
1848   - white-space: nowrap;
1849   - overflow: hidden;
1850   - background-color: #586879;
1851   - border: 1px solid #4d5b6a;
1852   - -webkit-border-radius: 4px;
1853   - -moz-border-radius: 4px;
1854   - border-radius: 4px;
1855   - color: #f3f5f6;
1856   - font-size: 32px;
1857   - font-size: 3.2rem;
1858   - line-height: 42px;
1859   - text-align: center;
1860   - text-decoration: none;
1861   -}
1862   -/* Navigation =================================================== */
1863   -[role="navigation"] {
1864   - margin: 0 auto 1.5em;
1865   - width: 90%;
1866   - background-color: #586879;
1867   - border: 1px solid #4d5b6a;
1868   -}
1869   -[role="navigation"] p {
1870   - margin-bottom: 0;
1871   - padding: 6px 11px;
1872   - color: #ffffff;
1873   -}
1874   -[role="navigation"] a {
1875   - color: #ffffff;
1876   -}
1877   -/* Content =================================================== */
1878   -.content {
1879   - margin: 0 auto;
1880   - width: 90%;
1881   -}
1882   -/* contentinfo =================================================== */
1883   -[role="contentinfo"] {
1884   - padding: 1.5em 0;
1885   - border-top: 3px solid #c7ced6;
1886   -}
1887   -[role="contentinfo"] small {
1888   - display: block;
1889   - margin: 0 auto 1.5em;
1890   - width: 90%;
1891   -}
1892 1835 @media print {
1893 1836 /* Print =================================================== */
1894 1837 * {
@@ -1950,21 +1893,6 @@ table tbody tr:hover th {
1950 1893 }
1951 1894 @media only screen and (min-width: 768px) {
1952 1895 /* 768 =================================================== */
1953   - body {
1954   - display: table;
1955   - border-collapse: collapse;
1956   - }
1957   - [role="banner"] a[href="#navigation"] {
1958   - display: none !important;
1959   - visibility: hidden;
1960   - }
1961   - [role="navigation"] {
1962   - display: table-header-group;
1963   - }
1964   - [role="navigation"] p {
1965   - margin: 0 auto;
1966   - width: 90%;
1967   - }
1968 1896 }
1969 1897 @media only screen and (min-width: 992px) {
1970 1898 /* 992 =================================================== */
BIN  img/a-rss.png
7 index.html
@@ -45,7 +45,7 @@
45 45 <!-- For iPad 1-->
46 46 <!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> -->
47 47 <!-- For the new iPad -->
48   -<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png">
  48 +<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png"> -->
49 49 <!-- For iPhone 3G, iPod Touch and Android -->
50 50 <!-- <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> -->
51 51 <!-- For Nokia -->
@@ -70,7 +70,6 @@
70 70
71 71 <header role="banner" class="clearfix">
72 72 <h1><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a></h1>
73   -<a href="#navigation" title="Jump to navigation"><i class="icon-chevron-down"></i></a>
74 73 </header>
75 74
76 75 <div class="content clearfix">
@@ -103,10 +102,6 @@ <h2 class="h3">&#8216;320 and Up&#8217; contains:</h2>
103 102
104 103 </div><!-- / content -->
105 104
106   -<nav role="navigation" id="navigation">
107   -<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>
108   -</nav>
109   -
110 105 <footer role="contentinfo">
111 106 <small>320 and Up, a Fashionably Flexible &#169; responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
112 107 <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>
6 less/320andup.less
@@ -102,5 +102,9 @@ only screen and (min-device-pixel-ratio: 1.5) {
102 102
103 103 // 11. UPSTARTS ==============================
104 104
  105 +// Modules and panels
105 106 @import "upstarts/320andup-modules/upstart.less";
106   -@import "upstarts/320andup-panels/upstart.less";
  107 +@import "upstarts/320andup-panels/upstart.less";
  108 +
  109 +// Layout option using display:table for navigation positioning
  110 +// @import "upstarts/320andup-display-table/upstart.less";
32 less/768.less
@@ -10,37 +10,11 @@
10 10 /* 768 =================================================== */
11 11
12 12 // 1. ROOT ==============================
13   -
14   -body {
15   -display : table;
16   -border-collapse : collapse; }
17   -
18 13 // 2. TYPOGRAPHY ==============================
19 14 // 3. COLOUR ==============================
20 15 // 4. TEXTURE ==============================
21 16 // 5. ELEMENTS ==============================
22 17 // 6. LAYOUT ==============================
23   -
24   -// BANNER ==============================
25   -
26   -[role="banner"] a[href="#navigation"] {
27   -.hidden; }
28   -
29   -// NAVIGATION ==============================
30   -
31   -[role="navigation"] {
32   -display : table-header-group;
33   -
34   -p {
35   -margin : 0 auto;
36   -width : 90%; }
37   -}
38   -
39   -// CONTENT ==============================
40   -// 11 MAIN ==============================
41   -// COMPLEMENTARY ==============================
42   -// CONTENTINFO ==============================
43   -
44   -// 7. VENDOR-SPECIFIC ==============================
45   -// 8. MODERNIZR ==============================
46   -// 9. TEMPLATE SPECIFICS ==============================
  18 +// 7. VENDOR-SPECIFIC ==============================
  19 +// 8. MODERNIZR ==============================
  20 +// 9. TEMPLATE SPECIFICS ==============================
58 less/page.less
@@ -7,63 +7,5 @@
7 7
8 8 // ==========================================================
9 9
10   -/* Banner =================================================== */
11 10
12   -[role="banner"] {
13   -margin : 0 auto;
14   -padding-top : @baselineheight;
15   -width : 90%;
16 11
17   -a[href="#navigation"] {
18   -display : block;
19   -position : absolute;
20   -top : 11px;
21   -right : 22px;
22   -width : 43px;
23   -height : 43px;
24   -white-space : nowrap;
25   -overflow : hidden;
26   -background-color : lighten(@basecolor, 20%);
27   -border : 1px solid lighten(@basecolor, 15%);
28   -.rounded(4px);
29   -color : lighten(@basecolor, 75%);
30   -.font-size(32);
31   -line-height : 42px;
32   -text-align : center;
33   -text-decoration : none; }
34   -}
35   -
36   -/* Navigation =================================================== */
37   -
38   -[role="navigation"] {
39   -margin : 0 auto @baselineheight;
40   -width : 90%;
41   -background-color : lighten(@basecolor, 20%);
42   -border : 1px solid lighten(@basecolor, 15%);
43   -
44   -p {
45   -margin-bottom : 0;
46   -padding : 6px 11px;
47   -color : @white; }
48   -
49   -a {
50   -color : @white; }
51   -}
52   -
53   -/* Content =================================================== */
54   -
55   -.content {
56   -margin : 0 auto;
57   -width : 90%; }
58   -
59   -/* contentinfo =================================================== */
60   -
61   -[role="contentinfo"] {
62   -padding : @baselineheight 0;
63   -border-top : 3px solid lighten(@basecolor, 60%);
64   -
65   -small {
66   -display : block;
67   -margin : 0 auto @baselineheight;
68   -width : 90%; }
69   -}
82 less/upstarts/320andup-display-table/index.html
... ... @@ -0,0 +1,82 @@
  1 +<!doctype html>
  2 +
  3 +<!--
  4 +320 and Up
  5 +Author: Andy Clarke (http://stuffandnonsense.co.uk)
  6 +Author: Keith Clark (http://twitter.com/keithclarkcouk)
  7 +Version: 3
  8 +URL: http://stuffandnonsense.co.uk/projects/320andup/
  9 +License: http://creativecommons.org/licenses/MIT/
  10 +-->
  11 +
  12 +<!-- HTML5 Mobile Boilerplate -->
  13 +<!--[if IEMobile 7]><html class="no-js iem7"><![endif]-->
  14 +<!--[if (gt IEMobile 7)|!(IEMobile)]><!--><html class="no-js" lang="en"><!--<![endif]-->
  15 +
  16 +<!-- HTML5 Boilerplate -->
  17 +<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  18 +<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
  19 +<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
  20 +<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
  21 +
  22 +<head>
  23 +<meta charset="utf-8">
  24 +
  25 +<title>Display table-based navigation | Upstart | 320 and Up</title>
  26 +
  27 +<meta name="description" content="">
  28 +<meta name="author" content="">
  29 +
  30 +<!-- http://t.co/dKP3o1e -->
  31 +<meta name="HandheldFriendly" content="True">
  32 +<meta name="MobileOptimized" content="320">
  33 +<meta name="viewport" content="width=device-width, initial-scale=1.0">
  34 +
  35 +<!-- For all browsers -->
  36 +<link rel="stylesheet" href="../../../css/320andup.css">
  37 +
  38 +<!--[if (lt IE 9) & (!IEMobile)]>
  39 +<script src="../../../js/selectivizr-min.js"></script>
  40 +<![endif]-->
  41 +
  42 +<!-- JavaScript -->
  43 +<script src="../../../js/modernizr-2.5.3-min.js"></script>
  44 +
  45 +<link rel="shortcut icon" href="/favicon.ico">
  46 +<meta http-equiv="cleartype" content="on">
  47 +</head>
  48 +
  49 +<body class="clearfix">
  50 +
  51 +<header role="banner" class="clearfix">
  52 +<h1><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a></h1>
  53 +<a href="#navigation" title="Jump to navigation"><i class="icon-chevron-down"></i></a>
  54 +</header>
  55 +
  56 +<div class="content clearfix">
  57 +<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>
  58 +</div><!-- / content -->
  59 +
  60 +<nav role="navigation" id="navigation">
  61 +<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>
  62 +</nav>
  63 +
  64 +<footer role="contentinfo">
  65 +<small>320 and Up, a Fashionably Flexible &#169; responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
  66 +<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>
  67 +</footer>
  68 +
  69 +<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  70 +<script>window.jQuery || document.write('<script src="../../../js/jquery-1.7.2.min.js"><\/script>')</script>
  71 +
  72 +<script src="../../../js/plugins.js"></script>
  73 +<script src="../../../js/script.js"></script>
  74 +<script src="../../../js/helper.js"></script>
  75 +<script>
  76 +var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
  77 +(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
  78 +g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
  79 +s.parentNode.insertBefore(g,s)}(document,"script"));
  80 +</script>
  81 +</body>
  82 +</html>
118 less/upstarts/320andup-display-table/upstart.less
... ... @@ -0,0 +1,118 @@
  1 +// ==========================================================
  2 +
  3 +/* 320 and Up */
  4 +/* Display table-based navigation upstart*/
  5 +/* Version: 1.0 */
  6 +/* Author: Andy Clarke */
  7 +/* URL: http://stuffandnonsense.co.uk/projects/320andup */
  8 +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
  9 +
  10 +// ==========================================================
  11 +
  12 +/* Banner =================================================== */
  13 +
  14 +[role="banner"] {
  15 +margin : 0 auto;
  16 +padding-top : @baselineheight;
  17 +width : 90%;
  18 +
  19 +a[href="#navigation"] {
  20 +display : block;
  21 +position : absolute;
  22 +top : 11px;
  23 +right : 22px;
  24 +width : 43px;
  25 +height : 43px;
  26 +white-space : nowrap;
  27 +overflow : hidden;
  28 +background-color : lighten(@basecolor, 20%);
  29 +border : 1px solid lighten(@basecolor, 15%);
  30 +.rounded(4px);
  31 +color : lighten(@basecolor, 75%);
  32 +.font-size(32);
  33 +line-height : 42px;
  34 +text-align : center;
  35 +text-decoration : none; }
  36 +}
  37 +
  38 +/* Navigation =================================================== */
  39 +
  40 +[role="navigation"] {
  41 +margin : 0 auto @baselineheight;
  42 +width : 90%;
  43 +background-color : lighten(@basecolor, 20%);
  44 +border : 1px solid lighten(@basecolor, 15%);
  45 +
  46 +p {
  47 +margin-bottom : 0;
  48 +padding : 6px 11px;
  49 +color : @white; }
  50 +
  51 +a {
  52 +color : @white; }
  53 +}
  54 +
  55 +/* Content =================================================== */
  56 +
  57 +.content {
  58 +margin : 0 auto;
  59 +width : 90%; }
  60 +
  61 +/* contentinfo =================================================== */
  62 +
  63 +[role="contentinfo"] {
  64 +padding : @baselineheight 0;
  65 +border-top : 3px solid lighten(@basecolor, 60%);
  66 +
  67 +small {
  68 +display : block;
  69 +margin : 0 auto @baselineheight;
  70 +width : 90%; }
  71 +}
  72 +
  73 +// 480px
  74 +@media only screen and (min-width: 480px) {
  75 +/* Styles */
  76 +}
  77 +
  78 +// 600px
  79 +@media only screen and (min-width: 600px) {
  80 +/* Styles */
  81 +}
  82 +
  83 +// 768px
  84 +@media only screen and (min-width: 768px) {
  85 +
  86 +body {
  87 +display : table;
  88 +border-collapse : collapse; }
  89 +
  90 +[role="banner"] a[href="#navigation"] {
  91 +.hidden; }
  92 +
  93 +[role="navigation"] {
  94 +display : table-header-group;
  95 +
  96 +p {
  97 +margin : 0 auto;
  98 +width : 90%; }
  99 +}
  100 +
  101 +}
  102 +
  103 +// 992px
  104 +@media only screen and (min-width: 992px) {
  105 +/* Styles */
  106 +}
  107 +
  108 +// 1382px
  109 +@media only screen and (min-width: 1382px) {
  110 +/* Styles */
  111 +}
  112 +
  113 +// 2x
  114 +@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  115 +only screen and (min--moz-device-pixel-ratio: 1.5),
  116 +only screen and (min-device-pixel-ratio: 1.5) {
  117 +/* Styles */
  118 +}

0 comments on commit addc095

Please sign in to comment.
Something went wrong with that request. Please try again.