design work in progress…

minor code examples.

#1
HTML/CSS for vertical text:
<h2 class="vert">no link-farm.<br /> <b class="vert1">FAVORITES&#160;ONLY</b></h2> .vert b.vert1 { word-wrap: break-word; width: 1.5em; text-align: center; letter-spacing: .55em; float: left; padding: .3em 0 .5em; font-size: 72%; line-height: 1.1; display: block; color: #fff; } .menu .vert b.vert1 { margin: 5px 0 -30em 1px!important; }
ObserveOBSERVE CLOSELY use of non-breaking space in the <b></b> wrapped text in the headline - the text that will line up vertically. It is almost as if the harder that text is to break, the cleaner it does break. Width, letter-spacing and padding has to be fine-tuned to handle all letters in ones choice of proportional text across browser‐land.
Second statement simply apply 30em negative margin on the bottom of the floating vertical text in particular settings, making it take up zero space in the flow (like an absolute positioned element) when that is necessary. That technique is described in details on positioned and removed floats and how margins affect floats and their surroundings on my other site.
I use similar “extreme negative margins on floats” techniques to pull elements off-screen on this site, leaving invisible but detectable tails on-screen. Works better than other available techniques often used on web sites.
I am not sure what to use vertical text for – apart from as a gimmick, but like to have the method noted somewhere in case I come up with something one day. There is always room for gimmicks and strange ideas on my sites.

Why so serious?

#2
Puts shadow on all jpg images, and space adjacent jpg images vertically apart:
img.sh, img[src$=".jpg"] { box-shadow: 5px 5px 5px #999; margin-bottom: 5px; } img.sh, img[src$=".jpg"]+img[src$=".jpg"] { margin-top: 7px; }
This is the simplest form of “CSS automation” I can think of, and it works beautifully on this site. The reason is of course that I mainly use jpg images as/in content, and other image formats for design/decorations.
I balance values for shadow and margins for each response step for screen‐size, so one of the above in each @media‐query.

#3
Using the :target selector:
Linking to an invisible (off screen) headline with ID, styled to make that headline come into view, opens this addendum block that follows the headline, hides the javascript toggle, and spaces out an empty link with generated content “text” to hide the addendum again and revert to script control. Voila, linking to hidden section in page solved, at least in new browser versions.
h5#addendum:target { float: none; height: auto; padding: 0; margin: 10px 0 0; font-size: 135%; } h5#addendum:target~div#pane { display: block!important; } h5#addendum:target+p#x-toggle { visibility: hidden; } h5#addendum:target~#pane>#restore { display: block; } h5#addendum:target~#pane>#restore::before{ content: "hide Addendum"; }
Only the most essential :target related code shown above, the rest is pretty standard … off-screen floating H5 with 1px tall invisible tail across screen for convenience, empty link placed just inside the addendum-block, etc.
With full support for :target across browser‐land (not quite there yet), scripts to show/hide blocks of content won't really be needed anymore. We can then exploit “state memory” via CSS instead of using cookies for same functionality.

responsive design steps.

#1
In base stylesheet – the “only” stylesheet linked to from pages – all @imports are found. First we have:
@import url(main-screen.css) screen;
Imports main stylesheet for screens, wherein all styles are wrapped in the following…
@media screen {}
Contains most styles for all types and sizes of screen – the basis for the design you see on screens now.
NOTE: in this overview file‐names are simplified to make them clearer. I use other filenames behind this site.
In base stylesheet a stylesheet for Index, ToC and Link pages (all menus) gets imported…
@import url(toc-screen.css) screen and (min-width: 501px);
…for windows wider than 500px only, since complex styling won't work well on really small screens.
In base stylesheet styles for a search page on site also gets imported…
@import url(search-screen.css) screen;
…which is active across all screen and window sizes, with a few adjustments thrown in for SSR devices.

#2
In base stylesheet this is also found:
@import url(x-screen.css) screen and (min-width: 501px);
Imports an extra stylesheet for regular screens – windows wider than 480px, which contains a set of more advanced styles for the most capable browsers as of today (June 2012).
Herein are also totally separate adjustments for very wide, narrower, and very narrow browser windows…
@media screen and (min-width: 64em) {}
…the gap we can call “normal width” is of course filled by main-screen.css and the non-queried part of x-screen.css…
@media screen and (max-width: 801px) and (min-width: 661px) {}
@media screen and (max-width: 661px) and (min-width: 501px) {}
Although quite fine‐grained, I only add and/or twist some design details and functionality on wider windows, and adjust or remove some details on narrower windows, to make the most out of available window/screen space.
NOTE: if I did not insist on that for this private site I would have unlimited options to play around with layout and details as function of window/screen space within one page­structure and one set of style­sheets, this extra style­sheet for regular screens would have been reduced to less than 20% in size.

#3
In base stylesheet styles for SSR devices: really small screens – mobiles etc. – are of course also imported…
@import url(ssr-screen.css) screen and (max-width:500px), screen and (max-device-width:500px);
…wherein all adjustments for screen‐devices and browser windows equal to or narrower than 500px are made.
Herein are also provided for sub-size adjustments, in…
@media screen and (max-width:220px), screen and (max-device-width:220px) {}
@media screen and (max-width:200px), screen and (max-device-width:200px) {}
@media screen and (max-width:162px), screen and (max-device-width:162px) {}
This may look a bit too fine‐grained, and fact is the smaller sizes only get minimal and/or purely experimental adjustments — for now at least.
The heavy lifting lies in overriding just the right styles from the main stylesheet, as small screen rendering within the frame of 500px and smaller in width has to be a single column with almost no margins or offsets.
If all browsers in widespread use today did at least support some media­queries on @import, most of these “override” operations would not be necessary. In fact, of “big browsers” only IE8 stands in my way.
To level out the “playing field” and get the right sizes to work within = prevent devices from lying about their screen sizes, the following is placed in page‐heads…
<meta name="viewport" content="width=device-width" />
That browsers on SSR devices are cheating and lying about screen/window sizes in order to get access to screen styles that are not made/meant for them – most web sites do not have SSR stylesheets, is a matter browser vendors will have to explain.

#4
In base stylesheet print styles are of course also imported…
@import url(print.css) print, projection;
…with provision for projection since there are many style similarities between print and projection. Of course, not many browsers support projection, but that's not my problem.
IE8 doesn't support media-type 'print' on @import, so that browser and its predecessors don't get any print styles.

#5
In base stylesheet separate stylesheets with hacks for IE8/9 are also imported…
@import url(ie8fix.css) screen;
@import url(ie9fix.css) only screen;
These separate IE8/9 stylesheets are deployed for easier split between these two versions and IE10+. Might be problems if IE10 hasn't rid itself of bugs we now exploit in IE8/9 to keep them out of the way for better browsers.

#6
IE6 and 7 don't support media‐type on @import at all, but an import‐bug makes these old browsers look for and pick up a phoney stylesheet – ignored by other browsers, wherein @imports without media‐types work as backdoors to the regular screen styles IE6 and 7 can handle.
In the phoney stylesheet IE6 and 7 also get enough bug-fixes and corrections to render somewhat acceptable on screen. Not anywhere near how new browsers render my pages though, as these old IE versions are not up to much.
These old buggers can be ignored completely as we write the year 2012, as totally unstyled pages work fine in them. I have decided to give them access to some styling – because I can, but do not alter anything for better browsers to accommodate these and other totally obsolete browser versions.