/* Fowler Wholesale - site styles
*
* This site was hand-built in 2004 as a fixed 790px layout of nested tables and
* sliced images, and originally had no stylesheet at all: every visual property
* lived in elements and presentational attributes. This file is where all
* of that now lives.
*
* Every value here was copied verbatim from the attribute it replaced. Nothing
* was restyled - the aim throughout was that the rendered page stay identical.
* Where a translation is not obvious, the rule carries a comment saying why.
*
* What moved out of the HTML and into here:
*
* bgcolor= -> background-color
* background= -> background-image
* -> font-size / font-family / color
* align= on div and p -> text-align
* align= on table -> auto side margins (center), or float (left)
* valign= -> vertical-align
* cellpadding= -> padding on td
* cellspacing= -> border-spacing on table
* width= on table and td -> width
*
* border="0" needed no CSS: a table has no border by default, so the attribute
* was already doing nothing and was simply deleted.
*
* width= and height= remain on ![]()
elements and should stay. They are valid
* HTML5 and reserve the right space while an image loads; removing them would
* make the layout jump as images arrive.
*/
/* was: , plus the non-standard leftmargin/topmargin/
marginwidth/marginheight attributes that five of the six pages carried.
index.html never had them, so it alone rendered with the browser's default
~8px body margin, and the layout shifted when you navigated away from it.
Setting the margin here applies it uniformly and removes that inconsistency. */
body {
background-color: #CCCCCC;
margin: 0;
}
/* was: - main content cell and the bottom spacer */
.bg-white {
background-color: #FFFFFF;
}
/* was: | - vertical rule beside the nav.
URLs here resolve relative to this stylesheet, which sits alongside the
pages at the site root, so the path is unchanged from the markup. */
.nav-spine {
background-image: url(images/d2u_06.jpg);
}
/* was: | - footer strip */
.footer-strip {
background-image: url(images/d2u_16.jpg);
}
/* --- typography, migrated out of -------------------------------------
* size="2" is exactly equivalent to the CSS keyword `small`, which is how
* browsers have always mapped it - so this is a like-for-like translation,
* not a re-choice of size.
*/
/* was: around each
nav link. NOTE: the original also carried , which was
inert - a font colour cannot override a link's colour, because the browser's
own stylesheet sets a:link/:visited/:active explicitly and that beats an
inherited value. Checked in a browser: the links render blue at rest and red
while held, both browser defaults, never #FF3300. So that colour had never
appeared on screen.
No colour is set here, deliberately, so those default states survive exactly
as they render today. Adding `color` to this rule would turn the nav orange -
which is what the original markup intended, but NOT what the site has ever
looked like. Treat it as a design change, and set :link, :visited and :active
together if you do it: an orange link that turns purple once visited looks
broken. */
.nav-item {
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
/* was:
around the footer copyright. This colour IS live - it wraps plain text
rather than a link - so it is carried over. */
.footer-text {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFFFFF;
}
/* was: align= on and */
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align: center;
}
/* --- table layout attributes -----------------------------------------------
* cellpadding="0" and cellspacing="0" were on all 30 tables. The two rules
* below replace them, and they are NOT optional tidying: a browser's default
* is 1px of padding inside every cell and 2px of spacing between cells. This
* layout is built from image slices butted against each other, so removing
* those attributes without these rules would open a visible gap in every
* single cell. If the layout ever springs apart, look here first.
*/
table {
border-spacing: 0;
}
td {
padding: 0;
}
/* border="0" needed no CSS at all - a table has no border by default, so the
attribute was already doing nothing. It was simply deleted. */
/* was: - the outer page wrapper.
NOTE: align= on a TABLE is not text-align. align="center" centres the table
box itself, which in CSS is auto side margins. */
.layout-table {
width: 790px;
margin-left: auto;
margin-right: auto;
}
/* was: - the body table and the footer table */
.inner-table {
width: 789px;
}
/* was: - the nav table */
.nav-table {
width: 75%;
}
/* was: - the content panel on index.html and
the three placeholder pages. 1% is far below the table's min-content width,
so it shrink-wraps to its contents exactly as it always has. */
.content-table {
width: 1%;
margin-left: auto;
margin-right: auto;
}
/* was: on about.html */
.content-table-about {
width: 80%;
margin-left: auto;
margin-right: auto;
}
/* was: on contact.html.
align="left" on a table means FLOAT left - it is taken out of normal flow,
not merely left-aligned. The containing cell establishes a block formatting
context, so the cell still grows to contain it. */
.content-table-contact {
width: 92%;
float: left;
}
/* was: width= on the three footer cells */
.footer-cell-left {
width: 61px;
}
.footer-cell-mid {
width: 87%;
}
.footer-cell-right {
width: 2%;
}
/* was: - the cap at the top of the nav spine */
.nav-cap {
vertical-align: bottom;
}
/* --- document heading ------------------------------------------------------
* The site had no headings at all, which costs it in search results and makes
* it awkward to navigate with a screen reader. The banner image IS the page's
* heading - its alt text already reads as one - so it is wrapped in
* rather than inventing a second visible title.
*
* These two declarations strip the heading's default margin and type so the
* cell renders byte-for-byte as it did around a bare ![]() . `font: inherit`
* matters as much as the margin: an h1's default 2em type would otherwise
* enlarge the line box strut inside the cell.
*/
.banner-heading {
margin: 0;
font: inherit;
}
/* ---------------------------------------------------------------------------
* REQUIRED - do not remove while the pages carry .
*
* The site was built for quirks mode, where an image alone in a table cell
* sits flush. Under the HTML5 doctype the page renders in standards mode,
* which makes images inline and puts them on the text baseline - opening a few
* pixels of gap beneath every sliced image, visible as a seam under the banner
* and in the footer strip. This rule closes that gap and is what keeps the
* sliced layout looking the way it always has.
*
* This was verified rather than assumed: one page was switched to the HTML5
* doctype and compared side by side against an otherwise byte-identical page
* still on the old one. With this rule in place there was no visible
* difference.
* ------------------------------------------------------------------------- */
td img {
vertical-align: bottom;
}
/* ===========================================================================
* PHONES AND NARROW WINDOWS
*
* Everything below sits inside a media query, so none of it can affect the
* desktop layout: above 820px not one of these rules applies, and the original
* fixed 790px design renders exactly as it always has.
*
* What this replaces: the viewport used to be pinned at width=790, so a phone
* laid the page out at 790px and then scaled the whole thing down - roughly
* 0.49x on a 390px handset, which rendered the 13px nav text at about 6px.
* The design fitted the screen, but nothing was readable without pinch-zoom.
* The viewport is now width=device-width, and the rules below reflow the
* layout to fit instead of shrinking it.
*
* 820px rather than 790px so there is no window width at which the fixed
* design is still in force but no longer fits.
* ========================================================================= */
@media (max-width: 820px) {
/* Let the wrappers shrink to the screen instead of overflowing it. The
max-width stops them ever exceeding the original design width. */
.layout-table,
.inner-table {
width: 100%;
max-width: 790px;
}
/* The banner and content images scale with the layout. The small nav
graphics are deliberately excluded - they are 39px pieces of fixed
furniture rather than content, and scaling them would blur the spine. */
.banner,
.content-table img,
.content-table-about img,
.content-table-contact img {
max-width: 100%;
height: auto;
}
/* Stack the nav above the content instead of beside it. Scoped to
.body-table so the footer keeps its three-column strip - both tables carry
.inner-table, which is the only reason .body-table exists. The "> tbody >"
step is required because the parser inserts a tbody the source never had. */
.body-table,
.body-table > tbody,
.body-table > tbody > tr,
.body-table > tbody > tr > td {
display: block;
width: auto;
}
/* Nav fills the stacked column rather than sitting at 75% of it. */
.nav-table {
width: 100%;
}
/* On desktop these shrink-wrap to a fixed image width, and the contact one
floats. Stacked on a phone they should simply fill the column. */
.content-table,
.content-table-about,
.content-table-contact {
width: 100%;
float: none;
}
/* 13px nav text is a small tap target. Raising the type also opens out the
row heights, which is the real gain for tapping accuracy. */
.nav-item {
font-size: medium;
}
}
| |