From 944b1d766bab2ddf577d447bec670d26be6bab1d Mon Sep 17 00:00:00 2001 From: Jonas Smedegaard Date: Sun, 13 Apr 2008 17:47:59 +0200 Subject: Add "Sane CSS Sizes". Origin: http://www.thenoodleincident.com/tutorials/typography/ --- _.gif | Bin 0 -> 49 bytes n4_upgrade.gif | Bin 0 -> 2805 bytes nn4.css | 80 ++++++++++++++++++++++++++++++++++++++++++++++ real.css | 98 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 178 insertions(+) create mode 100644 _.gif create mode 100644 n4_upgrade.gif create mode 100644 nn4.css create mode 100644 real.css diff --git a/_.gif b/_.gif new file mode 100644 index 0000000..00699c7 Binary files /dev/null and b/_.gif differ diff --git a/n4_upgrade.gif b/n4_upgrade.gif new file mode 100644 index 0000000..025cb1a Binary files /dev/null and b/n4_upgrade.gif differ 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; + } -- cgit v1.2.3