This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

update to match Andy's new stuff, again. :)

  • Loading branch information...
jina committed May 18, 2012
1 parent c33e5a3 commit 7a17798fe3187084cff10c162786ab27f5a82237
Showing with 3,114 additions and 1,138 deletions.
  1. +3 −1 .gitignore
  2. BIN .sass-cache/03a1edd726be3fb84a61415e9eb206639df30f76/_shared.scssc
  3. BIN .sass-cache/456158f61ae34c7c9f5c62b9af41f0ce642dc602/_ellipsis.scssc
  4. BIN .sass-cache/542558ecc268dff7bf1b90af83cbceab28f41eb5/ellipsis.scssc
  5. BIN .sass-cache/5a5bea4d1ffaec0c7e6e1e3d522ac991499b6778/_support.scssc
  6. +0 −26 320andup.html
  7. BIN css/.DS_Store
  8. +429 −29 css/{320andup_sass_compass.css → 320andup-sass-compass.css}
  9. +382 −25 css/320andup-sass.css
  10. +429 −29 css/{320andup_scss_compass.css → 320andup-scss-compass.css}
  11. +382 −25 css/320andup-scss.css
  12. +0 −72 css/320andup.css
  13. BIN img/a-rss.png
  14. +1 −6 index.html
  15. +5 −1 less/320andup.less
  16. +3 −29 less/768.less
  17. +0 −58 less/page.less
  18. +82 −0 less/upstarts/320andup-display-table/index.html
  19. +118 −0 less/upstarts/320andup-display-table/upstart.less
  20. BIN sass-compass/.DS_Store
  21. +4 −0 sass_compass/320andup_sass_compass.sass → sass-compass/320andup-sass-compass.sass
  22. 0 {sass_compass → sass-compass}/_1382.sass
  23. 0 {sass_compass → sass-compass}/_2x.sass
  24. 0 {sass_compass → sass-compass}/_480.sass
  25. 0 {sass_compass → sass-compass}/_600.sass
  26. +20 −0 sass-compass/_768.sass
  27. 0 {sass_compass → sass-compass}/_992.sass
  28. +25 −20 {sass_compass → sass-compass}/_buttons.sass
  29. +154 −0 sass-compass/_colour.sass
  30. +4 −4 {sass_compass → sass-compass}/_elements.sass
  31. +0 −2 {sass_compass → sass-compass}/_font-awesome.sass
  32. +99 −91 {sass_compass → sass-compass}/_forms.sass
  33. +0 −1 {sass_compass → sass-compass}/_mixins.sass
  34. 0 {sass_compass → sass-compass}/_modernizr.sass
  35. +8 −0 sass-compass/_page.sass
  36. 0 {sass_compass → sass-compass}/_print.sass
  37. 0 {sass_compass → sass-compass}/_reset.sass
  38. 0 {sass_compass → sass-compass}/_site.sass
  39. +16 −19 {sass_compass → sass-compass}/_tables.sass
  40. 0 {sass_compass → sass-compass}/_texture.sass
  41. +38 −37 {sass_compass → sass-compass}/_typography.sass
  42. 0 {sass_compass → sass-compass}/_variables.sass
  43. BIN sass-compass/upstarts/320andup-display-table/.DS_Store
  44. +39 −3 sass_compass/_page.sass → sass-compass/upstarts/320andup-display-table/_upstart.sass
  45. +82 −0 sass-compass/upstarts/320andup-display-table/index.html
  46. BIN sass-compass/upstarts/320andup-modules/.DS_Store
  47. +50 −51 {sass_compass → sass-compass}/upstarts/320andup-modules/_upstart.sass
  48. +1 −1 {scss_compass → sass-compass}/upstarts/320andup-modules/example.html
  49. +1 −1 {scss_compass → sass-compass}/upstarts/320andup-modules/index.html
  50. BIN sass-compass/upstarts/320andup-panels/.DS_Store
  51. +11 −14 {sass_compass → sass-compass}/upstarts/320andup-panels/_upstart.sass
  52. +1 −1 {scss_compass → sass-compass}/upstarts/320andup-panels/index.html
  53. BIN sass/.DS_Store
  54. +4 −0 sass/320andup-sass.sass
  55. +3 −27 sass/_768.sass
  56. +1 −1 sass/_forms.sass
  57. +0 −54 sass/_page.sass
  58. +1 −1 sass/_variables.sass
  59. BIN sass/upstarts/320andup-display-table/.DS_Store
  60. +98 −0 sass/upstarts/320andup-display-table/_upstart.sass
  61. +82 −0 sass/upstarts/320andup-display-table/index.html
  62. BIN sass/upstarts/320andup-modules/.DS_Store
  63. BIN sass/upstarts/320andup-panels/.DS_Store
  64. +3 −3 sass/upstarts/320andup-panels/index.html
  65. +0 −44 sass_compass/_768.sass
  66. +0 −142 sass_compass/_colour.sass
  67. +5 −1 scss_compass/320andup_scss_compass.scss → scss-compass/320andup-scss-compass.scss
  68. 0 {scss_compass → scss-compass}/_1382.scss
  69. 0 {scss_compass → scss-compass}/_2x.scss
  70. 0 {scss_compass → scss-compass}/_480.scss
  71. 0 {scss_compass → scss-compass}/_600.scss
  72. +20 −0 scss-compass/_768.scss
  73. 0 {scss_compass → scss-compass}/_992.scss
  74. +12 −14 {scss_compass → scss-compass}/_buttons.scss
  75. +30 −36 {scss_compass → scss-compass}/_colour.scss
  76. +3 −3 {scss_compass → scss-compass}/_elements.scss
  77. +0 −2 {scss_compass → scss-compass}/_font-awesome.scss
  78. +40 −44 {scss_compass → scss-compass}/_forms.scss
  79. +0 −1 {scss_compass → scss-compass}/_mixins.scss
  80. 0 {scss_compass → scss-compass}/_modernizr.scss
  81. +11 −0 scss-compass/_page.scss
  82. 0 {scss_compass → scss-compass}/_print.scss
  83. 0 {scss_compass → scss-compass}/_reset.scss
  84. 0 {scss_compass → scss-compass}/_site.scss
  85. +14 −17 {scss_compass → scss-compass}/_tables.scss
  86. 0 {scss_compass → scss-compass}/_texture.scss
  87. +18 −19 {scss_compass → scss-compass}/_typography.scss
  88. 0 {scss_compass → scss-compass}/_variables.scss
  89. +59 −10 scss_compass/_page.scss → scss-compass/upstarts/320andup-display-table/_upstart.scss
  90. +82 −0 scss-compass/upstarts/320andup-display-table/index.html
  91. +18 −21 {scss_compass → scss-compass}/upstarts/320andup-modules/_upstart.scss
  92. +1 −1 {sass_compass → scss-compass}/upstarts/320andup-modules/example.html
  93. +1 −1 {sass_compass → scss-compass}/upstarts/320andup-modules/index.html
  94. +10 −13 {scss_compass → scss-compass}/upstarts/320andup-panels/_upstart.scss
  95. +3 −3 {sass_compass → scss-compass}/upstarts/320andup-panels/index.html
  96. +5 −1 scss/320andup-scss.scss
  97. +3 −29 scss/_768.scss
  98. +0 −58 scss/_page.scss
  99. +118 −0 scss/upstarts/320andup-display-table/_upstart.scss
  100. +82 −0 scss/upstarts/320andup-display-table/index.html
  101. +0 −46 scss_compass/_768.scss
View
@@ -1,3 +1,5 @@
/.esproj/
/.dropbox
-/Icon
+/Icon
+/.sass-cache/
+/.DS_Store
View
@@ -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
Binary file not shown.

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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
@@ -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
@@ -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
@@ -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%; }
-}
@@ -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>
Oops, something went wrong.

0 comments on commit 7a17798

Please sign in to comment.