From 92a7e01d1802beda0fbeaccce799486d3453b604 Mon Sep 17 00:00:00 2001 From: Richard Rutter Date: Tue, 25 Feb 2014 17:57:51 +0000 Subject: [PATCH] First add of home page --- css/css3.css | 4 + css/screen.css | 634 +++++++++++++++++++++++++++++++++++++++++++++++++ index.php | 107 +++++++++ js/amz.js | 131 ++++++++++ js/global.js | 120 ++++++++++ 5 files changed, 996 insertions(+) create mode 100644 css/css3.css create mode 100644 css/screen.css create mode 100644 index.php create mode 100644 js/amz.js create mode 100644 js/global.js diff --git a/css/css3.css b/css/css3.css new file mode 100644 index 0000000..07378e3 --- /dev/null +++ b/css/css3.css @@ -0,0 +1,4 @@ +#main p { + hyphenate:auto; + hyphenate-lines:3; +} diff --git a/css/screen.css b/css/screen.css new file mode 100644 index 0000000..ce32c81 --- /dev/null +++ b/css/screen.css @@ -0,0 +1,634 @@ +@import "/css/css3.css"; + + +BODY { + margin:0; + padding:0; + color: #000; + background: #FFF8E5; + font-size: 100%; + text-rendering: optimizeLegibility; +} + +HTML>BODY, HTML>BODY#cover { + font-size: 16px; +} + +ABBR, ACRONYM, .caps { + text-transform: lowercase; + font-variant:small-caps; + font-style: normal; + border-bottom: 0; + letter-spacing:0.1em; +} + +cite, CITE ABBR, CITE ACRONYM, CITE .caps, em { + font-style: italic; + font-family: 'premiera italic', georgia, serif; +} + +strong { + font-family: 'premiera bold', georgia, serif; + font-weight: bold; +} + +img { + border: 0; +} + +/* @group layout */ + +#main { + + width:61.8%; + + float:left; +} + + + +#supp { + + margin-left:61.8%; +} + +#main H1, #main H2, #main P, #main PRE, #main UL, #main OL, #main DL, #supp UL, #supp H3, #supp OL, #supp P, FORM, .example, #supp #deck { + padding: 0 11.8%; +} + +H1 SPAN, #supp SPAN, #toc LI SPAN, .quote-from-book .ic, .thumb { + position: absolute; + text-align:right; + display:block; +} + +H1 SPAN, #toc LI SPAN, .thumb { + left: -0.75em; + width:7.29%; + font-family: 'Premiera Book', georgia, serif; + -moz-font-feature-settings:"onum" 1; + -ms-font-feature-settings:"onum" 1; + -o-font-feature-settings:"onum" 1; + -webkit-font-feature-settings:"onum" 1; + font-feature-settings:"onum" 1; +} + +h1 span { + left: -0.3em; +} + +#supp SPAN { + left: -0.5em; + width: 11.8%; +} + +#nextprev, H3 { + position: relative; +} +/* @end */ + +/* @group typography */ +#main, #supp, #footer, #cover, .amzbox { + font: 1.0em/1.375em 'Premiera Book', georgia, serif; +} + +h1, h2, h3, #header, #big-title #ts { + font-family: 'Premiera Book', Georgia, serif;} + + +h1#big-title span { + font-style: italic; + font-family: 'premiera Italic', Georgia, serif; +} + +a, a:visited, a:link, a:active, a:hover { + + color: #00408F; + text-decoration: underline; + +} + +a:visited { + color:#666; +} + +html>body a, html>body a:visited, html>body a:link, html>body a:active, html>body a:hover { + /* Need to hide borders on links from IE6 due to text-jog bug */ + + text-decoration: none; + border-bottom: 1px solid #F2ECDA; + +} + + + +html>body a:active, html>body a:hover { + border-bottom: 1px solid #999; +} + +H1 { + font-weight: normal; + font-size: 1.5em; + line-height: 1.083333333333333em; + margin: 0 0 1.5em 0; +} + +H2, H3 { + font-weight: normal; + font-size: 1.1875em; /* 19px */ + margin: 1.157894736842105em 0; /* 22px */ + text-indent: -0.052631578947368em; /* 1px */ +} +H4 { + font-weight: normal; + font-size: 1em; + margin: 0 0 0.6875em 0; +} + +#supp H2 { /* header*/ + font-weight: normal; + font-size: 1em; + margin: 0; + position:absolute; + right: 4.5076%; + top: 1.375em; +} + +#supp h2 a { + text-decoration: none; + border: 0; + color: #e7e7e7; +} + +#supp h2 a:active, #supp h2 a:hover { + color: #fff; +} + +#supp h3 { + margin-bottom: 0.578947368421053em; /* 11px */ + margin-top: 1.736842105263158em; /* 33px*/ +} + + +BLOCKQUOTE { + margin-left: 0; + margin-right: 0; + font-style: italic; + font-family: 'premiera italic', georgia, serif; +} + +.quote-from-book { + position: relative; +} + +.quote-from-book .ic { + left: 0px; + width: 11.8%; +} + +UL, OL, DL { + margin: 1.375em 0 1.375em 0; +} + +LI, DD, DT { + margin: 0; +} + +DD { + margin-left: 1.375em; +} + +P { + margin-top: 1.375em; + margin-bottom: 0; +} + +P + P { + margin-top: 0; + text-indent: 1.375em; +} + +p.imgholder { + margin-top: 1.375em; + margin-bottom: 1.375em; + text-align: center; + text-indent: 0; +} + +Q { +font-style:italic; +quotes: '\2018' '\2019' '\201C' '\201D'; + font-family: 'premiera italic', georgia, serif; +} + +Q:before { +content: '\2018'; +} + +Q:after { +content: '\2019'; +} + +HTML > BODY Q { +font-style:normal; +} + +BODY BLOCKQUOTE Q { + font-style:italic; +} + +CODE { + font-family: 'lucida console', 'andale mono', 'monotype.com', monospace; + font-size: 0.875em; +} + +code code { + font-size: 1em; +} + +PRE { + margin: 1.375em 0 0 1.375em; +} + +BLOCKQUOTE EM { + font-style: normal; + font-family: 'Premiera Book', georgia, serif; +} + +UL UL, OL OL { + margin-left: 1.375em; +} + +#main LI P { + padding: 0; +} + +H1 A:link, H1 A:visited, H1 A:hover, H1 A:active { + color: #333; + border: 0; +} + +H2 A:link, H2 A:visited, H2 A:hover, H2 A:active { + text-decoration:none; + color: #fff; + border: 0; +} + +#supp UL { + list-style:circle; + margin-top: 0.6875em; +} + +OL#annotations { + list-style:lower-roman; +} + +#nextprev LI { + list-style: none; +} +/* @end */ + + +/* @group header */ +#header { + font-size: 1.25em; + line-height: 1.1em; + color: #fff; + background: #400300 url(/i/newdrop.png) repeat-x bottom; + padding: 1.1em 1.1em 2.2em 1.1em; + margin:0 0 2.2em 0; +} + +#header a { + color: #e7e7e7; + border: none; +} + +#header a:hover, #header a:active { + color: #fff; +} + + +#header a span { + font-style: italic; + font-family: 'premiera italic', georgia, serif; +} + +span.of { + margin-right: 0.1em; +} +/* @end */ + +/* @group footer */ +#footer { + font-size: 0.875em; + clear:both; + margin: 0; + padding: 4.714285714285714em 0 1.571428571428571em 7.29%; + color: #999; +} + +#footer a { + color: #999; +} +html>body #footer a { + border-bottom: 1px solid #F2ECDA; +} +/* @end */ + +/* @group Bits and pieces */ +.author { + text-indent:0; + margin-top: 1em; +} + +.bits h1 { + margin-top: -0.166666666666667em; + margin-bottom: 0.916666666666667em; +} + +.bits #supp { + padding-top: 0.6875em; +} + +#toc h3 { + margin-top: 1.736842105263158em; /* 33px */ + margin-bottom: 0.578947368421053em; /* 11px */ +} + +OL#toc { + padding-right:0; +} + +OL#toc OL { + margin-left: 0; + padding-left:0; + padding-right:0; + margin-top: 0; +} + +OL#toc OL OL { + margin-top: 0; +} + +.nobullets { + list-style:none; +} + +.highlight { + background: #F2ECDA; +} + +.thumb IMG { + height: 2.5em; + position: relative; + top: 2px; +} + +.bracket { + font-style: normal; +} + +/* @end */ + +/* @group forms */ +FORM { + margin: 0 0 1.375em 0; +} +FORM DT { + margin:1em 0 0 0; +} +FORM DD { + margin: 0 0 1em 0; +} +INPUT, TEXTAREA { + font: 1.0em/1.375em georgia, "times new roman", serif; +} +INPUT.textbox, TEXTAREA { + border: 1px solid #999; + font: 1.0em/1.375em georgia, "times new roman", serif; + width:100%; +} +INPUT.button { + border-width: 1px; +} +/* @end */ + +/* @group Examples */ +#main #box1, #main #box2 { /* 2.1.1 */ + font-size:12px; + width:1em; + height:1em; + border:1px solid black; + margin-left: 11.8%; + text-align: center; + color: #aaa; + margin-top: 1.5em; + line-height: 1em; +} + +#main #box2 { /* 2.1.1 */ + font-size:60px; + margin-top: 0.3em; +} + +.inex { /* inline example */ + background-color: #aaa; +} + +div.ex2-1-7 { + font-family: "univers bold condensed", impact, haettenschweiler, sans-serif; + font-size: 200%; + letter-spacing:0.1em; + margin-top:0.75em; + margin-left:0.75em; +} + +div.ex2-1-8 { + margin-top:0.75em; + margin-left:0.75em; + font-size: 200%; +} + +.ex2-1-8i { + letter-spacing: -0.1em; +} + +div.ex2-1-9 { + margin-top:0.75em; + margin-left:0.75em; + font-size: 200%; + letter-spacing: -0.1em; +} + +.ex2-1-10-toc1 { + margin: 0 3em 0 auto; +} + +.ex2-1-10-toc1 th { + font-weight: normal; + text-align: right; + padding:0; +} + +.ex2-1-10-toc1 td { + font-style: italic; + font-family: 'premiera italic', georgia, serif; + text-align: right; + padding: 0 0 0 0.5em; +} + +.ex2-1-10-toc2 { + margin: 0 auto; +} + +.ex2-1-10-toc2 th { + font-weight: normal; + text-align: right; + padding: 0 0.5em 0 0; +} + +.ex2-1-10-toc2 td:before { + content: "\2022"; + padding-right: 0.5em; +} + +.ex2-1-10-toc2 td { + font-style: italic; + font-family: 'premiera italic', georgia, serif; + text-align: left; + padding:0; +} + +.ex2-2-1ii { + font-size: 1.5em; + line-height: 0.85; + text-indent: -0.5em; + margin-top: 1.5em; + margin-left: 0.5em; +} + +.ex2-2-1i { + line-height: 3; + border-top:1px solid #ccc; + border-bottom:1px solid #ccc; + margin-top: 1.5em; + text-align: center; +} + +.ex2-2-2 { + margin-left: 1.5em; + margin-right: 3em; + position:relative; +} + +.ex2-2-2 .basictext { + margin-left: 10em; +} + +.ex2-2-2 .sidenote { + width: 9.6em; + position: absolute; + left: 0; + top: 0; + text-indent: 0; + font-size: 0.8333em; + line-height:1.8; +} + +.ex2-3-2i { + text-indent:-1.5em; +} + +.ex2-3-2ii:before { + content: "\2767"; + padding-right: 0.4em; +} + +.ex2-3-2iii { + margin-top: 1.5em; +} + +#main .ex2-3-2iii p { + display: inline; + padding: 0; +} +.ex2-3-2iii p + p:before { + content: "\2761"; + padding-right: 0.1em; + padding-left: 0.4em; +} +.ex2-3-4 { + margin-left:0; + margin-right:0; + font-style: normal; +} + +.ex2-3-4 pre { + font-family: inherit; + display: table; + width: auto; + margin: 0 auto; +} + +/* @end */ + + +/* @group Amazon box */ +.amzbox { + position:absolute; + width:380px; +} + +.amzbox P, .amzbox UL { + margin: 0; +} + +.amzbox P { + padding: 1.5em 38px 38px 51px; + font-style: italic; + font-family: 'premiera italic', georgia, serif; + background: url(/i/amz-drop.png) bottom no-repeat; +} + +.amzbox P.first { + padding: 36px 38px 1.5em 38px; + background:url(/i/amz-drop.png) top no-repeat; + font-style: normal; +} + +.amzbox IMG { + float:left; + width: 57px; + height: 24px; + margin: 3px 1em 1em 0; +} + +.amzbox UL { + padding: 0 38px 0 51px; + list-style-type: square; + background: url(/i/amz-drop.png) center no-repeat; +} + +#amazonswitcher label { + white-space:nowrap; +} +/* @end */ + + + +/* @group Deck ad */ + +#deck { + margin-top: 3em; + width: 13.636363636363636em; +} + +#supp #deck p { + margin: 0; + font-size: 14px; + line-height: 16px; + padding: 0; +} + +/* @end */ diff --git a/index.php b/index.php new file mode 100644 index 0000000..5d4608e --- /dev/null +++ b/index.php @@ -0,0 +1,107 @@ + + + + +The Elements of Typographic Style Applied to the Web – a practical guide to web typography + + + + + + + + + + + + + + + + +

+The Elements
+of Typographic Style
 +Applied to the Web +

+ +
+

A practical guide to web typography

+ +
+ + diff --git a/js/amz.js b/js/amz.js new file mode 100644 index 0000000..d6d4c47 --- /dev/null +++ b/js/amz.js @@ -0,0 +1,131 @@ +// Intercept Amazon links to set preferred store + +// URL components for the different affiliate schemes +var amz_schemes = new Array("uk", "ca", "com"); +var amz_affil = new Array(); +amz_affil["uk"] = new Array(".co.uk", "jalfrezi-21", "UK and the rest of Europe"); +amz_affil["ca"] = new Array(".ca", "clagnut0d-20", "Canada"); +amz_affil["com"] = new Array(".com", "clagnut-20", "US and the rest of the world"); + +function initLinks() { + // Test for cookies + if (testCookies()) { // if cookies are enabled + // Get existing store setting + var amz_dest = readCookie("amz_dest"); + var allLinks = document.getElementsByTagName('a'); + for (var i=0; i < allLinks.length; i++) { // loop through all links on page + var aLink = allLinks[i]; + var url = aLink.href; + var amzMatch = url.search(/amazon\./); + if (amzMatch > -1) { // crude check for link to Amazon + if (amz_dest) { + // If store is set then rebuild link + var country = amz_affil[amz_dest][0]; + var affil = amz_affil[amz_dest][1]; + + // Change all possible urls to the desired country and affil + for (var j=0; j -1) { + targetId = loc.substring(tstart+1, loc.length); + targetObj = document.getElementById(targetId); + if (targetObj) { + targetObj.className = "highlight"; + } + } +} + +function createCookie(name,value,days) { + if (days) { + var date = new Date(); + date.setTime(date.getTime()+(days*24*60*60*1000)); + var expires = "; expires="+date.toGMTString(); + } + else expires = ""; + document.cookie = name+"="+value+expires+"; path=/"; +} + +function readCookie(name) { + var nameEQ = name + "="; + var ca = document.cookie.split(';'); + for(var i=0;i < ca.length;i++) { + var c = ca[i]; + while (c.charAt(0)==' ') c = c.substring(1,c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); + } + return null; +} + +function testCookies() { + createCookie("test","ok",1); + if (readCookie("test")) { + return true; + } else { + return false; + } +} + +function getInnerHeight() { + var y; + if (self.innerHeight) // all except Explorer + { + y = self.innerHeight; + } + else if (document.documentElement && document.documentElement.clientHeight) + // Explorer 6 Strict Mode + { + y = document.documentElement.clientHeight; + } + else if (document.body) // other Explorers + { + y = document.body.clientHeight; + } + return y; +} + +function getInnerWidth() { + var x; + if (self.innerHeight) // all except Explorer + { + x = self.innerWidth; + } + else if (document.documentElement && document.documentElement.clientHeight) + // Explorer 6 Strict Mode + { + x = document.documentElement.clientWidth; + } + else if (document.body) // other Explorers + { + x = document.body.clientWidth; + } + return x; +} + +function getVertScroll() { + var y; + if (self.pageYOffset) // all except Explorer + { + y = self.pageYOffset; + } + else if (document.documentElement && document.documentElement.scrollTop) + // Explorer 6 Strict + { + y = document.documentElement.scrollTop; + } + else if (document.body) // all other Explorers + { + y = document.body.scrollTop; + } + return y; +} + +function getHorizScroll() { + var x; + if (self.pageYOffset) // all except Explorer + { + x = self.pageXOffset; + } + else if (document.documentElement && document.documentElement.scrollTop) + // Explorer 6 Strict + { + x = document.documentElement.scrollLeft; + } + else if (document.body) // all other Explorers + { + x = document.body.scrollLeft; + } + return x; +} + +window.onload = function() { + highlight(); + initLinks(); +}