diff --git a/README.md b/README.md deleted file mode 100644 index 282e4f3..0000000 --- a/README.md +++ /dev/null @@ -1,4 +0,0 @@ -Examples -======== - -A collection of HTML/CSS/DOM examples diff --git a/fancy-text-underlining/README.md b/fancy-text-underlining/README.md deleted file mode 100644 index 9953bfe..0000000 --- a/fancy-text-underlining/README.md +++ /dev/null @@ -1,4 +0,0 @@ -Fancy Text Underlining -======== - -Check out the live JSbin demo diff --git a/fancy-text-underlining/demo.html b/fancy-text-underlining/demo.html deleted file mode 100644 index 7405e69..0000000 --- a/fancy-text-underlining/demo.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - -
-

Frequently Bought Photography Equipment

-
- The underline of this page header should have breakpoints - when using the letters (q,y,p,g,j) which drop down below the text base. -


- JsFiddle -
- - diff --git a/feeds.xml b/feeds.xml new file mode 100644 index 0000000..dd39a00 --- /dev/null +++ b/feeds.xml @@ -0,0 +1,97 @@ + + + + + + Hello Feed 13! + http://google.com + test + + + + + Hello Feed 12! + http://google.com + test + + + + + Hello Feed 11! + http://google.com + test + + + + + Hello Feed 10! + http://google.com + test + + + + + Hello Feed 9! + http://google.com + test + + + + + Hello Feed 8! + http://google.com + test + + + + + Hello Feed 7! + http://google.com + test + + + + + Hello Feed 6! + http://google.com + test + + + + + Hello Feed 5! + http://google.com + test + + + + + Hello Feed 4! + http://google.com + test + + + + + + Hello Feed 3! + http://google.com + test + + + + + Hello Feed 2! + http://google.com + test + + + + + Hello Feed! + http://google.com + test + + + + diff --git a/fonts/copse-regular-webfont.eot b/fonts/copse-regular-webfont.eot new file mode 100644 index 0000000..af1f5e6 Binary files /dev/null and b/fonts/copse-regular-webfont.eot differ diff --git a/fonts/copse-regular-webfont.svg b/fonts/copse-regular-webfont.svg new file mode 100644 index 0000000..1e920b5 --- /dev/null +++ b/fonts/copse-regular-webfont.svg @@ -0,0 +1,247 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2010 Daniel Rhatigansparkyultrasparkyorg with Reserved Font Name Copse +Designer : Daniel Rhatigan +Foundry : Daniel Rhatigan + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/copse-regular-webfont.ttf b/fonts/copse-regular-webfont.ttf new file mode 100644 index 0000000..434b208 Binary files /dev/null and b/fonts/copse-regular-webfont.ttf differ diff --git a/fonts/copse-regular-webfont.woff b/fonts/copse-regular-webfont.woff new file mode 100644 index 0000000..a9a0450 Binary files /dev/null and b/fonts/copse-regular-webfont.woff differ diff --git a/fonts/quattrocentosans-bold-webfont.eot b/fonts/quattrocentosans-bold-webfont.eot new file mode 100644 index 0000000..c041ed9 Binary files /dev/null and b/fonts/quattrocentosans-bold-webfont.eot differ diff --git a/fonts/quattrocentosans-bold-webfont.svg b/fonts/quattrocentosans-bold-webfont.svg new file mode 100644 index 0000000..fb162e9 --- /dev/null +++ b/fonts/quattrocentosans-bold-webfont.svg @@ -0,0 +1,247 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2011 Pablo Impallari wwwimpallaricomimpallarigmailcomCopyright c 2011 Igino Marini wwwikerncommailiginomarinicomCopyright c 2011 Brenda Gallo gbrenda1987gmailcomwith Reserved Font Name Quattrocento Sans +Designer : Pablo Impallari +Foundry : Pablo Impallari Igino Marini Brenda Gallo +Foundry URL : wwwimpallaricom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/quattrocentosans-bold-webfont.ttf b/fonts/quattrocentosans-bold-webfont.ttf new file mode 100644 index 0000000..7389c87 Binary files /dev/null and b/fonts/quattrocentosans-bold-webfont.ttf differ diff --git a/fonts/quattrocentosans-bold-webfont.woff b/fonts/quattrocentosans-bold-webfont.woff new file mode 100644 index 0000000..fc14168 Binary files /dev/null and b/fonts/quattrocentosans-bold-webfont.woff differ diff --git a/fonts/quattrocentosans-bolditalic-webfont.eot b/fonts/quattrocentosans-bolditalic-webfont.eot new file mode 100644 index 0000000..7c1aa7a Binary files /dev/null and b/fonts/quattrocentosans-bolditalic-webfont.eot differ diff --git a/fonts/quattrocentosans-bolditalic-webfont.svg b/fonts/quattrocentosans-bolditalic-webfont.svg new file mode 100644 index 0000000..9070a8b --- /dev/null +++ b/fonts/quattrocentosans-bolditalic-webfont.svg @@ -0,0 +1,248 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2011 Pablo Impallari wwwimpallaricomimpallarigmailcomCopyright c 2011 Igino Marini wwwikerncommailiginomarinicomCopyright c 2011 Brenda Gallo gbrenda1987gmailcomwith Reserved Font Name Quattrocento Sans +Designer : Pablo Impallari +Foundry : Pablo Impallari Igino Marini Brenda Gallo +Foundry URL : wwwimpallaricom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/quattrocentosans-bolditalic-webfont.ttf b/fonts/quattrocentosans-bolditalic-webfont.ttf new file mode 100644 index 0000000..9766a17 Binary files /dev/null and b/fonts/quattrocentosans-bolditalic-webfont.ttf differ diff --git a/fonts/quattrocentosans-bolditalic-webfont.woff b/fonts/quattrocentosans-bolditalic-webfont.woff new file mode 100644 index 0000000..c436da0 Binary files /dev/null and b/fonts/quattrocentosans-bolditalic-webfont.woff differ diff --git a/fonts/quattrocentosans-italic-webfont.eot b/fonts/quattrocentosans-italic-webfont.eot new file mode 100644 index 0000000..379b383 Binary files /dev/null and b/fonts/quattrocentosans-italic-webfont.eot differ diff --git a/fonts/quattrocentosans-italic-webfont.svg b/fonts/quattrocentosans-italic-webfont.svg new file mode 100644 index 0000000..b613779 --- /dev/null +++ b/fonts/quattrocentosans-italic-webfont.svg @@ -0,0 +1,247 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2011 Pablo Impallari wwwimpallaricomimpallarigmailcomCopyright c 2011 Igino Marini wwwikerncommailiginomarinicomCopyright c 2011 Brenda Gallo gbrenda1987gmailcomwith Reserved Font Name Quattrocento Sans +Designer : Pablo Impallari +Foundry : Pablo Impallari Igino Marini Brenda Gallo +Foundry URL : wwwimpallaricom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/quattrocentosans-italic-webfont.ttf b/fonts/quattrocentosans-italic-webfont.ttf new file mode 100644 index 0000000..c7ba47a Binary files /dev/null and b/fonts/quattrocentosans-italic-webfont.ttf differ diff --git a/fonts/quattrocentosans-italic-webfont.woff b/fonts/quattrocentosans-italic-webfont.woff new file mode 100644 index 0000000..3798881 Binary files /dev/null and b/fonts/quattrocentosans-italic-webfont.woff differ diff --git a/fonts/quattrocentosans-regular-webfont.eot b/fonts/quattrocentosans-regular-webfont.eot new file mode 100644 index 0000000..346db6f Binary files /dev/null and b/fonts/quattrocentosans-regular-webfont.eot differ diff --git a/fonts/quattrocentosans-regular-webfont.svg b/fonts/quattrocentosans-regular-webfont.svg new file mode 100644 index 0000000..3470924 --- /dev/null +++ b/fonts/quattrocentosans-regular-webfont.svg @@ -0,0 +1,247 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2011 Pablo Impallari wwwimpallaricomimpallarigmailcomCopyright c 2011 Igino Marini wwwikerncommailiginomarinicomCopyright c 2011 Brenda Gallo gbrenda1987gmailcomwith Reserved Font Name Quattrocento Sans +Designer : Pablo Impallari +Foundry : Pablo Impallari Igino Marini Brenda Gallo +Foundry URL : wwwimpallaricom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/quattrocentosans-regular-webfont.ttf b/fonts/quattrocentosans-regular-webfont.ttf new file mode 100644 index 0000000..e414670 Binary files /dev/null and b/fonts/quattrocentosans-regular-webfont.ttf differ diff --git a/fonts/quattrocentosans-regular-webfont.woff b/fonts/quattrocentosans-regular-webfont.woff new file mode 100644 index 0000000..09ed324 Binary files /dev/null and b/fonts/quattrocentosans-regular-webfont.woff differ diff --git a/images/background.png b/images/background.png new file mode 100644 index 0000000..b63b420 Binary files /dev/null and b/images/background.png differ diff --git a/images/body-background.png b/images/body-background.png new file mode 100644 index 0000000..d6a152f Binary files /dev/null and b/images/body-background.png differ diff --git a/images/bullet.png b/images/bullet.png new file mode 100644 index 0000000..2b7dc9a Binary files /dev/null and b/images/bullet.png differ diff --git a/images/hr.gif b/images/hr.gif new file mode 100644 index 0000000..a64b56c Binary files /dev/null and b/images/hr.gif differ diff --git a/images/octocat-logo.png b/images/octocat-logo.png new file mode 100644 index 0000000..28a3ad1 Binary files /dev/null and b/images/octocat-logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..98d048d --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + Examples by HTML-CSS-DOM-chat + + + + + + + + + + +
+

Examples

+

A collection of HTML/CSS/DOM examples

+
+ + + +
+ +
+

+Hello

+ +

This is a test

+
+ +
+ + + + \ No newline at end of file diff --git a/javascripts/main.js b/javascripts/main.js new file mode 100644 index 0000000..c57e54c --- /dev/null +++ b/javascripts/main.js @@ -0,0 +1,53 @@ +var sectionHeight = function() { + var total = $(window).height(), + $section = $('section').css('height','auto'); + + if ($section.outerHeight(true) < total) { + var margin = $section.outerHeight(true) - $section.height(); + $section.height(total - margin - 20); + } else { + $section.css('height','auto'); + } +} + +$(window).resize(sectionHeight); + +$(document).ready(function(){ + $("section h1, section h2").each(function(){ + $("nav ul").append("
  • " + $(this).text() + "
    • "); + $(this).attr("id",$(this).text().toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g,'')); + $("nav ul li:first-child a").parent().addClass("active"); + }); + + $("nav ul li").on("click", "a", function(event) { + var position = $($(this).attr("href")).offset().top - 190; + $("html, body").animate({scrollTop: position}, 400); + $("nav ul li a").parent().removeClass("active"); + $(this).parent().addClass("active"); + event.preventDefault(); + }); + + sectionHeight(); + + $('img').load(sectionHeight); +}); + +fixScale = function(doc) { + + var addEvent = 'addEventListener', + type = 'gesturestart', + qsa = 'querySelectorAll', + scales = [1, 1], + meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; + + function fix() { + meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]; + doc.removeEventListener(type, fix, true); + } + + if ((meta = meta[meta.length - 1]) && addEvent in doc) { + fix(); + scales = [.25, 1.6]; + doc[addEvent](type, fix, true); + } +}; \ No newline at end of file diff --git a/javascripts/scale.fix.js b/javascripts/scale.fix.js new file mode 100644 index 0000000..87a40ca --- /dev/null +++ b/javascripts/scale.fix.js @@ -0,0 +1,17 @@ +var metas = document.getElementsByTagName('meta'); +var i; +if (navigator.userAgent.match(/iPhone/i)) { + for (i=0; iJSFiddle Demo diff --git a/linear-gradient-transition/demo.html b/linear-gradient-transition/demo.html deleted file mode 100644 index f4684f0..0000000 --- a/linear-gradient-transition/demo.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - -
    - -
    - -


    - - JsFiddle - -
    - - - diff --git a/params.json b/params.json new file mode 100644 index 0000000..a0e0d1b --- /dev/null +++ b/params.json @@ -0,0 +1 @@ +{"name":"Examples","tagline":"A collection of HTML/CSS/DOM examples ","body":"### Hello\r\nThis is a test","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file diff --git a/radio-btn-tabbed-content/README.md b/radio-btn-tabbed-content/README.md deleted file mode 100644 index 929b2ef..0000000 --- a/radio-btn-tabbed-content/README.md +++ /dev/null @@ -1,11 +0,0 @@ -Creating tabbed content using radio buttons -=========================================== - -Here is an example of how you can create tabbed content using CSS and radio buttons. - -Please note that this is **not cross browser compatible** because it relies on using the `:checked` CSS selector. -Browser support for this can be found in the MDN article. https://developer.mozilla.org/en-US/docs/Web/CSS/:checked#Browser_compatibility - -##View it on JS Bin: - -http://jsbin.com/difom/1/edit?html,css,output \ No newline at end of file diff --git a/radio-btn-tabbed-content/index.html b/radio-btn-tabbed-content/index.html deleted file mode 100644 index 92bfd15..0000000 --- a/radio-btn-tabbed-content/index.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - CSS basic animated tabs - - - -
    - -
    - - \ No newline at end of file diff --git a/radio-btn-tabbed-content/style.css b/radio-btn-tabbed-content/style.css deleted file mode 100644 index 2111adc..0000000 --- a/radio-btn-tabbed-content/style.css +++ /dev/null @@ -1,73 +0,0 @@ -#slider { - width: 500px; - height: 300px; - position: relative; - overflow: hidden; - border: 1px solid green; - padding: 20px; -} -#slider ul { - margin: 0; - padding: 0; - height: 100%; -} -#slider li { - display: inline-block; - margin-right: 10px; - height: 100%; -} -#slider label:hover { - cursor: pointer; -} -#slider label::after { - content: "/"; - padding-left: 10px; - font-weight: bold; -} -#slider input { - display: none; -} -#slider .content { - width: 480px; - /*for responsive layouts calc 100% width - padding, but provide a fallback for unsupported browsers*/ - width: calc(100% - 40px); - height: 220px; - /* top position + bottom content = 70px */ - height: calc(100% - 70px); - overflow: hidden; - position: absolute; - top: 50px; - left: 20px; - -webkit-transition: all 500ms ease-in-out; - -moz-transition: all 500ms ease-in-out; - -ms-transition: all 500ms ease-in-out; - -o-transition: all 500ms ease-in-out; - transition: all 500ms ease-in-out; -} - -/*default transition is applied to all slides*/ -#slider input:not(:checked) ~ .content { - opacity: 0; -} - -/*you could add these classes to the ul for it to affect all slides!*/ -#slider .fromTop input:not(:checked) ~ .content { - top: 500px; -} -#slider .fromRight input:not(:checked) ~ .content { - left: 600px; -} -#slider .scale input:not(:checked) ~ .content { - -webkit-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); - -o-transform: scale(0); - transform: scale(0); -} -#slider .spin input:not(:checked) ~ .content { - -webkit-transform: scale(0) rotate(360deg); - -moz-transform: scale(0) rotate(360deg); - -ms-transform: scale(0) rotate(360deg); - -o-transform: scale(0) rotate(360deg); - transform: scale(0) rotate(360deg); -} \ No newline at end of file diff --git a/radio-checkboxes-css/README.md b/radio-checkboxes-css/README.md deleted file mode 100644 index 46411b6..0000000 --- a/radio-checkboxes-css/README.md +++ /dev/null @@ -1,9 +0,0 @@ -Radio & Checkboxes CSS -====================== - -This example provides a nice CSS styling for checkboxes and radio buttons in HTML. - -Please note that this is **not cross browser compatible** because it relies on using the `:checked` CSS selector. -Browser support for this can be found in the MDN article. https://developer.mozilla.org/en-US/docs/Web/CSS/:checked#Browser_compatibility - -Click here for a live preview. diff --git a/radio-checkboxes-css/index.html b/radio-checkboxes-css/index.html deleted file mode 100644 index 68bf9ac..0000000 --- a/radio-checkboxes-css/index.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - -
    -
    Checkbox


    - -
    - -
    -
    - -
    -
    Radio


    -
    - -
    - - -
    - - -
    - - -
    -
    -
    - - diff --git a/radio-checkboxes-css/style.css b/radio-checkboxes-css/style.css deleted file mode 100644 index 34585ce..0000000 --- a/radio-checkboxes-css/style.css +++ /dev/null @@ -1,115 +0,0 @@ -.buttonContent { - display: inline; - margin: 1px 0 0 10px; - position: absolute; -} - -label { - display: inline; - cursor: pointer; -} - -.regular-checkbox { - display: none; -} - -.regular-checkbox + label { - background-color: #fafafa; - border: 1px solid #cacece; - box-shadow: 0 1px 2px rgba(0,0,0,0.05), - inset 0px -15px 10px -12px rgba(0,0,0,0.05); - padding: 9px; - border-radius: 3px; - display: inline-block; - position: relative; -} - -.regular-checkbox + label:active, -.regular-checkbox:checked + label:active { - box-shadow: 0 1px 2px rgba(0,0,0,0.05), - inset 0px 1px 3px rgba(0,0,0,0.1); -} - -.regular-checkbox:checked + label { - background-color: #e9ecee; - border: 1px solid #adb8c0; - box-shadow: 0 1px 2px rgba(0,0,0,0.05), - inset 0px -15px 10px -12px rgba(0,0,0,0.05), - inset 15px 10px -12px rgba(255,255,255,0.1); - color: #99a1a7; -} - -.regular-checkbox:checked + label:after { - content: '\2714'; - font-size: 14px; - position: absolute; - top: 0px; - left: 3px; - color: #99a1a7; -} - -.tag { - font-family: Arial, sans-serif; - width: 200px; - position: relative; - top: 5px; - font-weight: bold; - text-transform: uppercase; - display: block; - float: left; -} - -.radio-1 { - width: 193px; -} - -.button-holder { - float: left; -} - -/* RADIO */ - -.regular-radio { - display: none; -} - -.regular-radio + label { - -webkit-appearance: none; - background-color: #fafafa; - border: 1px solid #cacece; - box-shadow: 0 1px 2px rgba(0,0,0,0.05), - inset 0px -15px 10px -12px rgba(0,0,0,0.05); - padding: 9px; - border-radius: 50px; - display: inline-block; - position: relative; -} - -.regular-radio:checked + label:after { - content: ' '; - width: 12px; - height: 12px; - border-radius: 50px; - position: absolute; - top: 3px; - background: #99a1a7; - box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); - text-shadow: 0px; - left: 3px; - font-size: 32px; -} - -.regular-radio:checked + label { - background-color: #e9ecee; - color: #99a1a7; - border: 1px solid #adb8c0; - box-shadow: 0 1px 2px rgba(0,0,0,0.05), - inset 0px -15px 10px -12px rgba(0,0,0,0.05), - inset 15px 10px -12px rgba(255,255,255,0.1), - inset 0px 0px 10px rgba(0,0,0,0.1); -} - -.regular-radio + label:active, .regular-radio:checked + label:active { - box-shadow: 0 1px 2px rgba(0,0,0,0.05), - inset 0px 1px 3px rgba(0,0,0,0.1); -} diff --git a/stylesheets/normalize.css b/stylesheets/normalize.css new file mode 100644 index 0000000..bc2ba93 --- /dev/null +++ b/stylesheets/normalize.css @@ -0,0 +1,459 @@ +/* normalize.css 2012-02-07T12:37 UTC - http://github.com/necolas/normalize.css */ +/* ============================================================================= + HTML5 display definitions + ========================================================================== */ +/* + * Corrects block display not defined in IE6/7/8/9 & FF3 + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects inline-block display not defined in IE6/7/8/9 & FF3 + */ +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* + * Prevents modern browsers from displaying 'audio' without controls + */ +audio:not([controls]) { + display: none; +} + +/* + * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 + * Known issue: no IE6 support + */ +[hidden] { + display: none; +} + +/* ============================================================================= + Base + ========================================================================== */ +/* + * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units + * http://clagnut.com/blog/348/#c790 + * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + */ +html { + font-size: 100%; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -ms-text-size-adjust: 100%; + /* 2 */ +} + +/* + * Addresses font-family inconsistency between 'textarea' and other form elements. + */ +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/* + * Addresses margins handled incorrectly in IE6/7 + */ +body { + margin: 0; +} + +/* ============================================================================= + Links + ========================================================================== */ +/* + * Addresses outline displayed oddly in Chrome + */ +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers + * people.opera.com/patrickl/experiments/keyboard/test + */ +a:hover, +a:active { + outline: 0; +} + +/* ============================================================================= + Typography + ========================================================================== */ +/* + * Addresses font sizes and margins set differently in IE6/7 + * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.75em; + margin: 2.33em 0; +} + +/* + * Addresses styling not present in IE7/8/9, S5, Chrome + */ +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to 'bolder' in FF3+, S4/5, Chrome +*/ +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/* + * Addresses styling not present in S5, Chrome + */ +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE6/7/8/9 + */ +mark { + background: #ff0; + color: #000; +} + +/* + * Addresses margins set differently in IE6/7 + */ +p, +pre { + margin: 1em 0; +} + +/* + * Corrects font family set oddly in IE6, S4/5, Chrome + * en.wikipedia.org/wiki/User:Davidgothberg/Test59 + */ +pre, +code, +kbd, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/* + * 1. Addresses CSS quotes not supported in IE6/7 + * 2. Addresses quote property not supported in S4 + */ +/* 1 */ +q { + quotes: none; +} + +/* 2 */ +q:before, +q:after { + content: ''; + content: none; +} + +small { + font-size: 75%; +} + +/* + * Prevents sub and sup affecting line-height in all browsers + * gist.github.com/413930 + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ============================================================================= + Lists + ========================================================================== */ +/* + * Addresses margins set differently in IE6/7 + */ +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/* + * Addresses paddings set differently in IE6/7 + */ +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/* + * Corrects list images handled incorrectly in IE7 + */ +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ============================================================================= + Embedded content + ========================================================================== */ +/* + * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 + * 2. Improves image quality when scaled in IE7 + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + */ +img { + border: 0; + /* 1 */ + -ms-interpolation-mode: bicubic; + /* 2 */ +} + +/* + * Corrects overflow displayed oddly in IE9 + */ +svg:not(:root) { + overflow: hidden; +} + +/* ============================================================================= + Figures + ========================================================================== */ +/* + * Addresses margin not present in IE6/7/8/9, S5, O11 + */ +figure { + margin: 0; +} + +/* ============================================================================= + Forms + ========================================================================== */ +/* + * Corrects margin displayed oddly in IE6/7 + */ +form { + margin: 0; +} + +/* + * Define consistent border, margin, and padding + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE6/7/8/9 + * 2. Corrects text not wrapping in FF3 + * 3. Corrects alignment displayed oddly in IE6/7 + */ +legend { + border: 0; + /* 1 */ + padding: 0; + white-space: normal; + /* 2 */ + *margin-left: -7px; + /* 3 */ +} + +/* + * 1. Corrects font size not being inherited in all browsers + * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome + * 3. Improves appearance and consistency in all browsers + */ +button, +input, +select, +textarea { + font-size: 100%; + /* 1 */ + margin: 0; + /* 2 */ + vertical-align: baseline; + /* 3 */ + *vertical-align: middle; + /* 3 */ +} + +/* + * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet + */ +button, +input { + line-height: normal; + /* 1 */ +} + +/* + * 1. Improves usability and consistency of cursor style between image-type 'input' and others + * 2. Corrects inability to style clickable 'input' types in iOS + * 3. Removes inner spacing in IE7 without affecting normal text inputs + * Known issue: inner spacing remains in IE6 + */ +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + /* 1 */ + -webkit-appearance: button; + /* 2 */ + *overflow: visible; + /* 3 */ +} + +/* + * Re-set default cursor for disabled elements + */ +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to content-box in IE8/9 + * 2. Removes excess padding in IE8/9 + * 3. Removes excess padding in IE7 + Known issue: excess padding remains in IE6 + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ + *height: 13px; + /* 3 */ + *width: 13px; + /* 3 */ +} + +/* + * 1. Addresses appearance set to searchfield in S5, Chrome + * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in S5, Chrome on OS X + */ +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in FF3+ + * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE6/7/8/9 + * 2. Improves readability and alignment in all browsers + */ +textarea { + overflow: auto; + /* 1 */ + vertical-align: top; + /* 2 */ +} + +/* ============================================================================= + Tables + ========================================================================== */ +/* + * Remove most spacing between table cells + */ +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/stylesheets/pygment_trac.css b/stylesheets/pygment_trac.css new file mode 100644 index 0000000..62fd970 --- /dev/null +++ b/stylesheets/pygment_trac.css @@ -0,0 +1,70 @@ +.highlight .hll { background-color: #404040 } +.highlight { color: #d0d0d0 } +.highlight .c { color: #999999; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .g { color: #d0d0d0 } /* Generic */ +.highlight .k { color: #6ab825; font-weight: normal } /* Keyword */ +.highlight .l { color: #d0d0d0 } /* Literal */ +.highlight .n { color: #d0d0d0 } /* Name */ +.highlight .o { color: #d0d0d0 } /* Operator */ +.highlight .x { color: #d0d0d0 } /* Other */ +.highlight .p { color: #d0d0d0 } /* Punctuation */ +.highlight .cm { color: #999999; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #cd2828; font-weight: normal } /* Comment.Preproc */ +.highlight .c1 { color: #999999; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #e50808; font-weight: normal; background-color: #520000 } /* Comment.Special */ +.highlight .gd { color: #d22323 } /* Generic.Deleted */ +.highlight .ge { color: #d0d0d0; font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #d22323 } /* Generic.Error */ +.highlight .gh { color: #ffffff; font-weight: normal } /* Generic.Heading */ +.highlight .gi { color: #589819 } /* Generic.Inserted */ +.highlight .go { color: #cccccc } /* Generic.Output */ +.highlight .gp { color: #aaaaaa } /* Generic.Prompt */ +.highlight .gs { color: #d0d0d0; font-weight: normal } /* Generic.Strong */ +.highlight .gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */ +.highlight .gt { color: #d22323 } /* Generic.Traceback */ +.highlight .kc { color: #6ab825; font-weight: normal } /* Keyword.Constant */ +.highlight .kd { color: #6ab825; font-weight: normal } /* Keyword.Declaration */ +.highlight .kn { color: #6ab825; font-weight: normal } /* Keyword.Namespace */ +.highlight .kp { color: #6ab825 } /* Keyword.Pseudo */ +.highlight .kr { color: #6ab825; font-weight: normal } /* Keyword.Reserved */ +.highlight .kt { color: #6ab825; font-weight: normal } /* Keyword.Type */ +.highlight .ld { color: #d0d0d0 } /* Literal.Date */ +.highlight .m { color: #3677a9 } /* Literal.Number */ +.highlight .s { color: #ff8 } /* Literal.String */ +.highlight .na { color: #bbbbbb } /* Name.Attribute */ +.highlight .nb { color: #24909d } /* Name.Builtin */ +.highlight .nc { color: #447fcf; text-decoration: underline } /* Name.Class */ +.highlight .no { color: #40ffff } /* Name.Constant */ +.highlight .nd { color: #ffa500 } /* Name.Decorator */ +.highlight .ni { color: #d0d0d0 } /* Name.Entity */ +.highlight .ne { color: #bbbbbb } /* Name.Exception */ +.highlight .nf { color: #447fcf } /* Name.Function */ +.highlight .nl { color: #d0d0d0 } /* Name.Label */ +.highlight .nn { color: #447fcf; text-decoration: underline } /* Name.Namespace */ +.highlight .nx { color: #d0d0d0 } /* Name.Other */ +.highlight .py { color: #d0d0d0 } /* Name.Property */ +.highlight .nt { color: #6ab825;} /* Name.Tag */ +.highlight .nv { color: #40ffff } /* Name.Variable */ +.highlight .ow { color: #6ab825; font-weight: normal } /* Operator.Word */ +.highlight .w { color: #666666 } /* Text.Whitespace */ +.highlight .mf { color: #3677a9 } /* Literal.Number.Float */ +.highlight .mh { color: #3677a9 } /* Literal.Number.Hex */ +.highlight .mi { color: #3677a9 } /* Literal.Number.Integer */ +.highlight .mo { color: #3677a9 } /* Literal.Number.Oct */ +.highlight .sb { color: #ff8 } /* Literal.String.Backtick */ +.highlight .sc { color: #ff8 } /* Literal.String.Char */ +.highlight .sd { color: #ff8 } /* Literal.String.Doc */ +.highlight .s2 { color: #ff8 } /* Literal.String.Double */ +.highlight .se { color: #ff8 } /* Literal.String.Escape */ +.highlight .sh { color: #ff8 } /* Literal.String.Heredoc */ +.highlight .si { color: #ff8 } /* Literal.String.Interpol */ +.highlight .sx { color: #ffa500 } /* Literal.String.Other */ +.highlight .sr { color: #ff8 } /* Literal.String.Regex */ +.highlight .s1 { color: #ff8 } /* Literal.String.Single */ +.highlight .ss { color: #ff8 } /* Literal.String.Symbol */ +.highlight .bp { color: #24909d } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #40ffff } /* Name.Variable.Class */ +.highlight .vg { color: #40ffff } /* Name.Variable.Global */ +.highlight .vi { color: #40ffff } /* Name.Variable.Instance */ +.highlight .il { color: #3677a9 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/stylesheets/styles.css b/stylesheets/styles.css new file mode 100644 index 0000000..980ee2b --- /dev/null +++ b/stylesheets/styles.css @@ -0,0 +1,1010 @@ +/* +Leap Day for GitHub Pages +by Matt Graham +*/ +@font-face { + font-family: 'Quattrocento Sans'; + src: url("../fonts/quattrocentosans-bold-webfont.eot"); + src: url("../fonts/quattrocentosans-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/quattrocentosans-bold-webfont.woff") format("woff"), url("../fonts/quattrocentosans-bold-webfont.ttf") format("truetype"), url("../fonts/quattrocentosans-bold-webfont.svg#QuattrocentoSansBold") format("svg"); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Quattrocento Sans'; + src: url("../fonts/quattrocentosans-bolditalic-webfont.eot"); + src: url("../fonts/quattrocentosans-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/quattrocentosans-bolditalic-webfont.woff") format("woff"), url("../fonts/quattrocentosans-bolditalic-webfont.ttf") format("truetype"), url("../fonts/quattrocentosans-bolditalic-webfont.svg#QuattrocentoSansBoldItalic") format("svg"); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: 'Quattrocento Sans'; + src: url("../fonts/quattrocentosans-italic-webfont.eot"); + src: url("../fonts/quattrocentosans-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/quattrocentosans-italic-webfont.woff") format("woff"), url("../fonts/quattrocentosans-italic-webfont.ttf") format("truetype"), url("../fonts/quattrocentosans-italic-webfont.svg#QuattrocentoSansItalic") format("svg"); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'Quattrocento Sans'; + src: url("../fonts/quattrocentosans-regular-webfont.eot"); + src: url("../fonts/quattrocentosans-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/quattrocentosans-regular-webfont.woff") format("woff"), url("../fonts/quattrocentosans-regular-webfont.ttf") format("truetype"), url("../fonts/quattrocentosans-regular-webfont.svg#QuattrocentoSansRegular") format("svg"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Copse'; + src: url("../fonts/copse-regular-webfont.eot"); + src: url("../fonts/copse-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/copse-regular-webfont.woff") format("woff"), url("../fonts/copse-regular-webfont.ttf") format("truetype"), url("../fonts/copse-regular-webfont.svg#CopseRegular") format("svg"); + font-weight: normal; + font-style: normal; +} + +/* normalize.css 2012-02-07T12:37 UTC - http://github.com/necolas/normalize.css */ +/* ============================================================================= + HTML5 display definitions + ========================================================================== */ +/* + * Corrects block display not defined in IE6/7/8/9 & FF3 + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects inline-block display not defined in IE6/7/8/9 & FF3 + */ +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* + * Prevents modern browsers from displaying 'audio' without controls + */ +audio:not([controls]) { + display: none; +} + +/* + * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 + * Known issue: no IE6 support + */ +[hidden] { + display: none; +} + +/* ============================================================================= + Base + ========================================================================== */ +/* + * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units + * http://clagnut.com/blog/348/#c790 + * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + */ +html { + font-size: 100%; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -ms-text-size-adjust: 100%; + /* 2 */ +} + +/* + * Addresses font-family inconsistency between 'textarea' and other form elements. + */ +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/* + * Addresses margins handled incorrectly in IE6/7 + */ +body { + margin: 0; +} + +/* ============================================================================= + Links + ========================================================================== */ +/* + * Addresses outline displayed oddly in Chrome + */ +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers + * people.opera.com/patrickl/experiments/keyboard/test + */ +a:hover, +a:active { + outline: 0; +} + +/* ============================================================================= + Typography + ========================================================================== */ +/* + * Addresses font sizes and margins set differently in IE6/7 + * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.75em; + margin: 2.33em 0; +} + +/* + * Addresses styling not present in IE7/8/9, S5, Chrome + */ +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to 'bolder' in FF3+, S4/5, Chrome +*/ +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/* + * Addresses styling not present in S5, Chrome + */ +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE6/7/8/9 + */ +mark { + background: #ff0; + color: #000; +} + +/* + * Addresses margins set differently in IE6/7 + */ +p, +pre { + margin: 1em 0; +} + +/* + * Corrects font family set oddly in IE6, S4/5, Chrome + * en.wikipedia.org/wiki/User:Davidgothberg/Test59 + */ +pre, +code, +kbd, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/* + * 1. Addresses CSS quotes not supported in IE6/7 + * 2. Addresses quote property not supported in S4 + */ +/* 1 */ +q { + quotes: none; +} + +/* 2 */ +q:before, +q:after { + content: ''; + content: none; +} + +small { + font-size: 75%; +} + +/* + * Prevents sub and sup affecting line-height in all browsers + * gist.github.com/413930 + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ============================================================================= + Lists + ========================================================================== */ +/* + * Addresses margins set differently in IE6/7 + */ +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/* + * Addresses paddings set differently in IE6/7 + */ +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/* + * Corrects list images handled incorrectly in IE7 + */ +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ============================================================================= + Embedded content + ========================================================================== */ +/* + * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 + * 2. Improves image quality when scaled in IE7 + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + */ +img { + border: 0; + /* 1 */ + -ms-interpolation-mode: bicubic; + /* 2 */ +} + +/* + * Corrects overflow displayed oddly in IE9 + */ +svg:not(:root) { + overflow: hidden; +} + +/* ============================================================================= + Figures + ========================================================================== */ +/* + * Addresses margin not present in IE6/7/8/9, S5, O11 + */ +figure { + margin: 0; +} + +/* ============================================================================= + Forms + ========================================================================== */ +/* + * Corrects margin displayed oddly in IE6/7 + */ +form { + margin: 0; +} + +/* + * Define consistent border, margin, and padding + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE6/7/8/9 + * 2. Corrects text not wrapping in FF3 + * 3. Corrects alignment displayed oddly in IE6/7 + */ +legend { + border: 0; + /* 1 */ + padding: 0; + white-space: normal; + /* 2 */ + *margin-left: -7px; + /* 3 */ +} + +/* + * 1. Corrects font size not being inherited in all browsers + * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome + * 3. Improves appearance and consistency in all browsers + */ +button, +input, +select, +textarea { + font-size: 100%; + /* 1 */ + margin: 0; + /* 2 */ + vertical-align: baseline; + /* 3 */ + *vertical-align: middle; + /* 3 */ +} + +/* + * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet + */ +button, +input { + line-height: normal; + /* 1 */ +} + +/* + * 1. Improves usability and consistency of cursor style between image-type 'input' and others + * 2. Corrects inability to style clickable 'input' types in iOS + * 3. Removes inner spacing in IE7 without affecting normal text inputs + * Known issue: inner spacing remains in IE6 + */ +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + /* 1 */ + -webkit-appearance: button; + /* 2 */ + *overflow: visible; + /* 3 */ +} + +/* + * Re-set default cursor for disabled elements + */ +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to content-box in IE8/9 + * 2. Removes excess padding in IE8/9 + * 3. Removes excess padding in IE7 + Known issue: excess padding remains in IE6 + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ + *height: 13px; + /* 3 */ + *width: 13px; + /* 3 */ +} + +/* + * 1. Addresses appearance set to searchfield in S5, Chrome + * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in S5, Chrome on OS X + */ +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in FF3+ + * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE6/7/8/9 + * 2. Improves readability and alignment in all browsers + */ +textarea { + overflow: auto; + /* 1 */ + vertical-align: top; + /* 2 */ +} + +/* ============================================================================= + Tables + ========================================================================== */ +/* + * Remove most spacing between table cells + */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +body { + font: 14px/22px "Quattrocento Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #666; + font-weight: 300; + margin: 0px; + padding: 0px 0 20px 0px; + background: url(../images/body-background.png) #eae6d1; +} + +h1, h2, h3, h4, h5, h6 { + color: #333; + margin: 0 0 10px; +} + +p, ul, ol, table, pre, dl { + margin: 0 0 20px; +} + +h1, h2, h3 { + line-height: 1.1; +} + +h1 { + font-size: 28px; +} + +h2 { + font-size: 24px; + color: #393939; +} + +h3, h4, h5, h6 { + color: #666666; +} + +h3 { + font-size: 18px; + line-height: 24px; +} + +a { + color: #3399cc; + font-weight: 400; + text-decoration: none; +} + +a small { + font-size: 11px; + color: #666; + margin-top: -0.6em; + display: block; +} + +ul { + list-style-image: url("../images/bullet.png"); +} + +strong { + font-weight: bold; + color: #333; +} + +.wrapper { + width: 650px; + margin: 0 auto; + position: relative; +} + +section img { + max-width: 100%; +} + +blockquote { + border-left: 1px solid #ffcc00; + margin: 0; + padding: 0 0 0 20px; + font-style: italic; +} + +code { + font-family: "Lucida Sans", Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; + font-size: 13px; + color: #efefef; + text-shadow: 0px 1px 0px #000; + margin: 0 4px; + padding: 2px 6px; + background: #333; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -o-border-radius: 2px; + -ms-border-radius: 2px; + -khtml-border-radius: 2px; + border-radius: 2px; +} + +pre { + padding: 8px 15px; + background: #333333; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -o-border-radius: 3px; + -ms-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + border: 1px solid #c7c7c7; + overflow: auto; + overflow-y: hidden; +} +pre code { + margin: 0px; + padding: 0px; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th { + text-align: left; + padding: 5px 10px; + border-bottom: 1px solid #e5e5e5; + color: #444; +} + +td { + text-align: left; + padding: 5px 10px; + border-bottom: 1px solid #e5e5e5; + border-right: 1px solid #ffcc00; +} +td:first-child { + border-left: 1px solid #ffcc00; +} + +hr { + border: 0; + outline: none; + height: 11px; + background: transparent url("../images/hr.gif") center center repeat-x; + margin: 0 0 20px; +} + +dt { + color: #444; + font-weight: 700; +} + +header { + padding: 25px 20px 40px 20px; + margin: 0; + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100%; + text-align: center; + background: url(../images/background.png) #4276b6; + -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.75); + -o-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.75); + box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.75); + z-index: 99; + -webkit-font-smoothing: antialiased; + min-height: 76px; +} +header h1 { + font: 40px/48px "Copse", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #f3f3f3; + text-shadow: 0px 2px 0px #235796; + margin: 0px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + -ms-text-overflow: ellipsis; +} +header p { + color: #d8d8d8; + text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; + font-size: 18px; + margin: 0px; +} + +#banner { + z-index: 100; + left: 0; + right: 50%; + height: 50px; + margin-right: -382px; + position: fixed; + top: 115px; + background: #ffcc00; + border: 1px solid #f0b500; + -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); + -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); + -o-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); + -moz-border-radius: 0px 2px 2px 0px; + -webkit-border-radius: 0px 2px 2px 0px; + -o-border-radius: 0px 2px 2px 0px; + -ms-border-radius: 0px 2px 2px 0px; + -khtml-border-radius: 0px 2px 2px 0px; + border-radius: 0px 2px 2px 0px; + padding-right: 10px; +} +#banner .button { + border: 1px solid #dba500; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffe788), color-stop(100%, #ffce38)); + background: -webkit-linear-gradient(#ffe788, #ffce38); + background: -moz-linear-gradient(#ffe788, #ffce38); + background: -o-linear-gradient(#ffe788, #ffce38); + background: -ms-linear-gradient(#ffe788, #ffce38); + background: linear-gradient(#ffe788, #ffce38); + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -o-border-radius: 2px; + -ms-border-radius: 2px; + -khtml-border-radius: 2px; + border-radius: 2px; + -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 1px 1px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 1px 1px rgba(0, 0, 0, 0.1); + -o-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 1px 1px rgba(0, 0, 0, 0.1); + background-color: #FFE788; + margin-left: 5px; + padding: 10px 12px; + margin-top: 6px; + line-height: 14px; + font-size: 14px; + color: #333; + font-weight: bold; + display: inline-block; + text-align: center; +} +#banner .button:hover { + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffe788), color-stop(100%, #ffe788)); + background: -webkit-linear-gradient(#ffe788, #ffe788); + background: -moz-linear-gradient(#ffe788, #ffe788); + background: -o-linear-gradient(#ffe788, #ffe788); + background: -ms-linear-gradient(#ffe788, #ffe788); + background: linear-gradient(#ffe788, #ffe788); + background-color: #ffeca0; +} +#banner .fork { + position: fixed; + left: 50%; + margin-left: -325px; + padding: 10px 12px; + margin-top: 6px; + line-height: 14px; + font-size: 14px; + background-color: #FFE788; +} +#banner .downloads { + float: right; + margin: 0 45px 0 0; +} +#banner .downloads span { + float: left; + line-height: 52px; + font-size: 90%; + color: #9d7f0d; + text-transform: uppercase; + text-shadow: rgba(255, 255, 255, 0.2) 0 1px 0; +} +#banner ul { + list-style: none; + height: 40px; + padding: 0; + float: left; + margin-left: 10px; +} +#banner ul li { + display: inline; +} +#banner ul li a.button { + background-color: #FFE788; +} +#banner #logo { + position: absolute; + height: 36px; + width: 36px; + right: 7px; + top: 7px; + display: block; + background: url(../images/octocat-logo.png); +} + +section { + width: 590px; + padding: 30px 30px 50px 30px; + margin: 20px 0; + margin-top: 190px; + position: relative; + background: #fbfbfb; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -o-border-radius: 3px; + -ms-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + border: 1px solid #cbcbcb; + -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.09), inset 0px 0px 2px 2px rgba(255, 255, 255, 0.5), inset 0 0 5px 5px rgba(255, 255, 255, 0.4); + -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.09), inset 0px 0px 2px 2px rgba(255, 255, 255, 0.5), inset 0 0 5px 5px rgba(255, 255, 255, 0.4); + -o-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.09), inset 0px 0px 2px 2px rgba(255, 255, 255, 0.5), inset 0 0 5px 5px rgba(255, 255, 255, 0.4); + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.09), inset 0px 0px 2px 2px rgba(255, 255, 255, 0.5), inset 0 0 5px 5px rgba(255, 255, 255, 0.4); +} + +small { + font-size: 12px; +} + +nav { + width: 230px; + position: fixed; + top: 220px; + left: 50%; + margin-left: -580px; + text-align: right; +} +nav ul { + list-style: none; + list-style-image: none; + font-size: 14px; + line-height: 24px; +} +nav ul li { + padding: 5px 0px; + line-height: 16px; +} +nav ul li.tag-h1 { + font-size: 1.2em; +} +nav ul li.tag-h1 a { + font-weight: bold; + color: #333; +} +nav ul li.tag-h2 + .tag-h1 { + margin-top: 10px; +} +nav ul a { + color: #666; +} +nav ul a:hover { + color: #999; +} + +footer { + width: 180px; + position: fixed; + left: 50%; + margin-left: -530px; + bottom: 20px; + text-align: right; + line-height: 16px; +} + +@media print, screen and (max-width: 1060px) { + div.wrapper { + width: auto; + margin: 0; + } + + nav { + display: none; + } + + header, section, footer { + float: none; + } + header h1, section h1, footer h1 { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + -ms-text-overflow: ellipsis; + } + + #banner { + width: 100%; + } + #banner .downloads { + margin-right: 60px; + } + #banner #logo { + margin-right: 15px; + } + + section { + border: 1px solid #e5e5e5; + border-width: 1px 0; + padding: 20px auto; + margin: 190px auto 20px; + max-width: 600px; + } + + footer { + text-align: center; + margin: 20px auto; + position: relative; + left: auto; + bottom: auto; + width: auto; + } +} +@media print, screen and (max-width: 720px) { + body { + word-wrap: break-word; + } + + header { + padding: 20px 20px; + margin: 0; + } + header h1 { + font-size: 32px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + -ms-text-overflow: ellipsis; + } + header p { + display: none; + } + + #banner { + top: 80px; + } + #banner .fork { + float: left; + display: inline-block; + margin-left: 0px; + position: fixed; + left: 20px; + } + + section { + margin-top: 130px; + margin-bottom: 0px; + width: auto; + } + + header ul, header p.view { + position: static; + } +} +@media print, screen and (max-width: 480px) { + header { + position: relative; + padding: 5px 0px; + min-height: 0px; + } + header h1 { + font-size: 24px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + -ms-text-overflow: ellipsis; + } + + section { + margin-top: 5px; + } + + #banner { + display: none; + } + + header ul { + display: none; + } +} +@media print { + body { + padding: 0.4in; + font-size: 12pt; + color: #444; + } +} +@media print, screen and (max-height: 680px) { + footer { + text-align: center; + margin: 20px auto; + position: relative; + left: auto; + bottom: auto; + width: auto; + } +} +@media print, screen and (max-height: 480px) { + nav { + display: none; + } + + footer { + text-align: center; + margin: 20px auto; + position: relative; + left: auto; + bottom: auto; + width: auto; + } +} diff --git a/vanilla-css-pinboard/README.md b/vanilla-css-pinboard/README.md deleted file mode 100644 index 5d9e4b8..0000000 --- a/vanilla-css-pinboard/README.md +++ /dev/null @@ -1 +0,0 @@ -JsFiddle Demo diff --git a/vanilla-css-pinboard/demo.html b/vanilla-css-pinboard/demo.html deleted file mode 100644 index 4e331dc..0000000 --- a/vanilla-css-pinboard/demo.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - -
    -
    clean your code!
    - Mom
    -
    clean your code!
    - Mom
    -
    clean your code!
    - Mom
    -
    clean your code!
    - Mom
    -
    clean your code!
    - Mom
    -
    clean your code!
    - Mom
    -
    clean your code!
    - Mom
    -
    clean your code!
    - Mom
    -
    -
    -
    - - diff --git a/windows-8-app-screen/README.md b/windows-8-app-screen/README.md deleted file mode 100644 index fece032..0000000 --- a/windows-8-app-screen/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Windows 8 App Screen Demo - -http://fiddle.jshell.net/PSygg/show/ - -Open it in your browser in fullscreen mode. :smiley: diff --git a/windows-8-app-screen/index.html b/windows-8-app-screen/index.html deleted file mode 100644 index b5b369d..0000000 --- a/windows-8-app-screen/index.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - Windows 8 App Screen - - - - -
    -
    - -
    -
    - -