Add "Sane CSS Sizes".

Origin: http://www.thenoodleincident.com/tutorials/typography/

4 files changed, 178 insertions, 0 deletions

diff --git a/_.gif b/_.gif
new file mode 100644
index 0000000..00699c7
--- /dev/null
+++ b/_.gif
diff --git a/n4_upgrade.gif b/n4_upgrade.gif
new file mode 100644
index 0000000..025cb1a
--- /dev/null
+++ b/n4_upgrade.gif
diff --git a/nn4.css b/nn4.css
new file mode 100644
index 0000000..80da057
--- /dev/null
+++ b/nn4.css
@@ -0,0 +1,80 @@
+/*simple styles for simple browsers. primarily nn4. make darn sure everything in here is overridden in the real css*/
+
+/*ie4.5mac has problems with this. it makes text small, and the nested list is impossibly small, even when user increases to largest. solution? ignore it. you will go nuts trying to serve different styles to nn4 and ie4.5mac. either give them both plain xhtml, or style for nn4 at the slight inconvenience of the few, or zero, remaining ie4.5mac users.*/
+
+body, h1, h2, h3, h4, h5, h6,ol, ul, li, p {
+	font-family: verdana, arial, helvetica, sans-serif;
+	color: #000;
+	}
+body {
+	margin: 0;
+	padding: 40px 5% 5% 5%;
+	background-color: #fff;
+	background-image: url(http://source.jones.dk/ikiwiki_scs/n4_upgrade.gif);/*use full url so both ie45mac and nn4 can find it. and for gosh sakes people, if you use this code, point to an img on _your_ server, not mine.*/
+	background-repeat: no-repeat;
+	background-position: top left;
+	}
+		
+/*the following classes are to demonstrate better line heights for narrow columns*/	
+.narrow1{
+	width: 50%;
+	line-height: 90%;
+	}
+.narrow2{
+	width: 50%;
+	line-height: 105%;
+	}
+	
+/*typography*/
+a:link {
+	}
+a:visited {
+	}
+a:active {
+	}
+a:hover {
+	/*hover doesn't work in nn4*/
+	}
+h1 {
+	font-size: 150%;
+	font-weight: normal;
+	}
+h2 {
+	font-size: 120%;
+	font-weight: normal;
+	}
+h3 {
+	font-size: 100%;
+	font-weight: normal;
+	}
+h4 {
+	font-size: 80%;
+	font-weight: bold;
+	}
+h5 {
+	font-size: 70%;
+	font-weight: bold;
+	}
+h6 {
+	font-size: 64%;
+	font-weight: bold;
+	}
+img {
+	border: 0;
+	}
+ol, ul, li {/*
+	list-style: none;*/
+	font-size: 80%;
+	line-height: 120%;
+	}
+p {
+	font-size: 80%;
+	line-height: 120%;
+	}
+pre {
+	font-family: monospace;
+	font-size: 80%;
+	}
+strong, b {
+	font-weight: bold;
+	}
diff --git a/real.css b/real.css
new file mode 100644
index 0000000..2137d2e
--- /dev/null
+++ b/real.css
@@ -0,0 +1,98 @@
+body {
+	margin: 0;
+	padding: 0;
+	font-family: verdana, arial, helvetica, sans-serif;
+	font-size: 76%;/* font sizing in ems, baby. if you want to change anything, just change this.*/
+	/*funny thing happens at 75% and lower. opera goes to a nice small size, but moz and ie pc change almost not at all. seems 76% is as small as you can go and stay the same across browsers. poop.*/
+	color: #000;
+	background-color: #fff;
+	background-image: url(http://source.jones.dk/ikiwiki_scs/_.gif);/*these three lines replace the n4_upgrade.gif in n4.css. and if you use this code, make sure you point to an img on _your_ server, not mine.*/
+	background-repeat: no-repeat;
+	background-position: top left;
+	}
+#content {
+	margin: 0em;
+	padding: 4em 6em 2em 6em;/* use padding instead of margin for multicolumn layouts because of a really odd ie5pc bug where it sometimes relates the width of an unrelated menu div to this div. i'll, uh, write about that somewhere. it was hard to figure out what was causing it, so i want this note here to remind me. */
+	}
+	
+/*the following classes are to demonstrate better line heights for narrow columns*/	
+.narrow1{
+	width: 50%;
+	line-height: 1.3em;
+	}
+.narrow2{
+	width: 50%;
+	line-height: 1.5em;
+	}
+		
+/*typography*/
+a {
+	text-decoration: none;
+	font-weight: bold;
+	color: #000;
+	}
+a:link {
+	}
+a:visited {
+	}
+a:active {
+	}
+a:hover {
+	text-decoration: underline;
+	}
+h1 {
+	font-size: 2.0em;
+	font-weight: normal;
+	margin-top: 0em;
+	margin-bottom: 0em;/*both set to zero and padding in header div is used intead to deal with compound ie pc problems that are beyound summary in a simple comment.*/
+	}
+h2 {
+	font-size: 1.7em;
+	margin: 1.2em 0em 1.2em 0em;
+	font-weight: normal;
+	}
+h3 {
+	font-size: 1.4em;
+	margin: 1.2em 0em 1.2em 0em;
+	font-weight: normal;
+	}
+h4 {
+	font-size: 1.2em;
+	margin: 1.2em 0em 1.2em 0em;
+	font-weight: bold;
+	}
+h5 {
+	font-size: 1.0em;
+	margin: 1.2em 0em 1.2em 0em;
+	font-weight: bold;
+	}
+h6 {
+	font-size: 0.8em;
+	margin: 1.2em 0em 1.2em 0em;
+	font-weight: bold;
+	}
+img {
+	border: 0;
+	}
+ol, ul, li {/*
+	list-style: none;*/
+	font-size: 1.0em;
+	line-height: 1.8em;
+	margin-top: 0.2em;
+	margin-bottom: 0.1em; 
+	}
+p {
+	font-size: 1.0em;
+	line-height: 1.8em;
+	margin: 1.2em 0em 1.2em 0em;
+	}
+li > p {
+	margin-top: 0.2em;
+	}
+pre {/*moz 1.0/1.1/1.2.1, net 7.0/7.01 make this way too small, but i'm not going to go larger because monospace tends to run you into overflow pretty quick. prior moz and net are okay.*/
+	font-family: monospace;
+	font-size: 1.0em;
+	}
+strong, b {
+	font-weight: bold;
+	}