Not knowing what better to do, I leverage a centering trick from: http://stackoverflow.com/a/14776179/211160 This separates what the page thinks of as the "body" into a DIV with an ID of "body-div". That div has a maximum width, and as for why to do that...empirically if you fill the whole width it looks ugly on large monitors. I don't know "the answer" but there's various rationale for why not to just fill the browser space, and pretty much every professional page on the internet limits it in some way. https://jdm-digital.com/2012/11/why-max-width-960/ Not setting a min-width has the advantage of reflowing to whatever a device supports, up to that (arbitrary-seeming) maximum. But it has the unfortunate side effect that if there isn't enough content to require a reflow, page sizes may jump around if no content gets up the length. A workaround is just to throw enough content on each page to hope it causes the browser to reason to a consistent width across pages. A long sentence of legalese at the very bottom of the page can do it. ----------------------------------------------------------------------- */ /* * Centering */ html { display: table; margin: auto; } body { display: table-cell; vertical-align: middle; margin: 0px; padding: 0px; } #body-div { max-width: 960px; } /* * Font smoothing, grabbed from Slate.com */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* * Background color/texture. */ body { background-color: #BBB; } /* @media screen { body { background-image: url(/media/no-background-texture-currently.jpg); background-position: left bottom; background-repeat: no-repeat; background-attachment: scroll; } } */ /* ----------------------------------------------------------------------- GLOBAL DEFINITIONS Probably better to use a more generalized CSS reset ----------------------------------------------------------------------- */ a { color: #07c; text-decoration: none; cursor: pointer; } a:visited { color: #4a6b82; } a:hover { text-decoration: underline; } a:active { } a:focus { } img { border: none; } /* Make all the headings stand out with a sans-serif font */ #body-div h1, #body-div h2, #body-div h3, #body-div h4, #body-div h5 { font-family: Tahoma, Verdana, Segoe, sans-serif; } /* * Insane bug work around. Browsers will default to monospace fonts being * a different default size unless you do this rather particular voodoo. * * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ */ pre, code { font-family: "Courier New", monospace, serif; font-size: 1em; } /* ------------------------------------------------------------------------ PAGE CONTAINER STRUCTURE The original baseline page container structure came from the fact that I was experimenting with a timeline, and there was CSS for that which was "good enough" at that moment to use for all the pages. That CSS came from Simile by by Stefano Mazzocchi http://simile.mit.edu/styles/default.css Though it served well at the time, most of it has been deleted or replaced now, except for the navigation header and basic color scheme ----------------------------------------------------------------------- */ /* * "MAIN" DIV * * The main div currently collects all the content that's not in the * "PROLOGUE" or "EPILOGUE" areas of the surrogate BODY-DIV. */ #main { /* Use customized quotation mark symbols that are "curlier" */ quotes: "\201C" "\201E" "\2018" "\2019"; /* Was extremely dark grey that's not-quite-black on a white background, * trying darker value... */ /* color: #333; */ color: #070707; background-color: #FFF; /* * There's no one-size-fits-all answer to how to format the fonts and * basic text size on a website. I keep going back and forth on whether * I think serifs are more or less readable. And the spacing is a big * one, there are some relatively convincing arguments made here: * * http://ia.net/blog/100e2r/ * * ...but I don't know that is a good fit for what I am doing. Time will * tell, though mostly I just want to make it easy for archiving, searching * etc. Helpful link in any case: * * http://cssfontstack.com/ */ font-size: 1.1em; /* font-family: Georgia, serif; */ font-family: "Proxima Nova Regular","Helvetica Neue",Calibri,"Droid Sans",Helvetica,Arial,sans-serif; line-height: 1.7em; /* * This just seems to look good, no science behind it. :-/ */ padding-left: 1.8em; padding-right: 1.8em; padding-top: 1.5em; padding-bottom: 1.5em; } /* * Bulleted lists look obnoxiously uncentered if you don't make a margin * on the right that compensates for the indentation caused by the bullet. * TODO: research best way to get this compensation. */ #main ul { margin-right: 3em; } /* * The default for all divs in the article is a vertical margin (1em) to * keep a collapsible-yet-healthy distance between things. Yet the first * and last divs should not have this margin. */ #main div { margin-top: 1em; margin-bottom: 1em; } #main > div:first-child { margin-top: 0em; } #main > div:last-child { margin-bottom: 0em; } /* * Since I'm managing all the layouts and margins with divs I don't want * the

paragraphs inside of them overriding things and expanding outside * of their parent divs if the margins are supposed to be 0. */ #main p { margin: 0px 0px 0px 0px; } /* * PATH * * This provides a navigation list of "where you are" so you can backtrack * in the hierarchy. Draem ceased having a hierarchy or category system, * instead adopting the notion that the category comes from the "most popular * tag on the post". In any case, this is the little bar at the top. */ #leader, #trailer { color: #333; background-color: #f8f8f8; min-height: 1em; padding: 8px; margin: 0px; } #leader { border-bottom: 1px solid #ccc; } #trailer { border-top: 1px solid #ccc; } #path { padding: 0px; margin: 0px; } #path li { display: inline; padding-left: 13px; padding-right: 3px; background-image: url(images/arrow.gif); background-repeat: no-repeat; background-position: 1px 5px; } /* * PAGE TITLE * * The page title is done with an H1, and I'm not sure what the value of in * this day and age is of using that instead of a custom class. Getting the * title to align to the bottom is annoying at first I tried using absolute * and relative div positioning: * * http://stackoverflow.com/questions/7420324/ * * But that doesn't work if you want to determine the height of the outer * div based on the child content. More ingenious design from the people who * brought you HTML/CSS/JavaScript. The only way to do it is with... * tables (reincarnated with display: table; "but it's not bad if it's CSS" * * http://stackoverflow.com/a/16360114/211160 */ #title { display: table; width: 100%; } #title h1 { display: table-cell; vertical-align: bottom; } /* now back to your regularly scheduled CSS... */ #title h1 { line-height: 1em; color: #F8F8F8; padding-left: 8px; padding-bottom: 16px; padding-top: 32px; } /* * PREVIOUS AND NEXT POST BUTTONS */ #prevnext { text-align: center; width: 90%; margin: 20px; padding: 20px; font-weight: bold; } #prev { text-align: left; } #next { text-align: right; } #next:after { content: "\25B6" } #prev:before { content: "\25C0" } /* ------------------------------------------------------------------------ STYLES FOR DRAEM DIALECT CONTENT PRODUCED BY "HTMLIFY" ----------------------------------------------------------------------- */ /* * "EXPOSITION" * * Default class for just random writing in a post (such as if you just put * a string literal containing markdown in as a paragraph). Originally * indented if not in lists but I decided the indentation was distracting. */ /* #main div.exposition { text-indent: 1.5em; } #main li > div.exposition { text-indent: 0; } */ /* * DIALOGUE */ #main .character { font-weight: bold; } #main .action { /* font-style: italic; */ color: #666; } /* Attempt at a hanging indent and to get dialogue in the middle. */ /* http://demosthenes.info/blog/50/Classic-Typography-Effects-in-CSS-Hanging-Indent */ #main .dialogue { text-indent: -2em; margin-left: 3em; margin-top: 1em; margin-bottom: 1em; margin-right: 2em; color: #282828; } /* * NOTE and UPDATE * * Whether notes should theme as a sticky-note yellow style, a blue info-box, * or otherwise is a matter of aesthetics. "Good enough" for now is sticky * note yellow. Used to be italic but seems better to make it a smaller * and different font instead. */ #main .note, #main .update { padding: 10px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; padding-left: 24px; padding-right: 24px; background: #ffffc0; margin-top: 2em; margin-bottom: 2em; font-family: Georgia, serif; color: #333; font-size: 0.95em; /* http://css-tricks.com/the-css-overflow-property/ */ overflow: hidden; } /* Found the bold annoying on ordinary notes. Try italics? */ #main .update-span { font-style: italic; } #main .note-span:after { content: ":"; } #main .update-span { font-weight: bold; } #main .update-span:after { content: ":"; } /* * HEADING * * Currently only one level of heading is supported, but this may be expanded * in the dialect later. I chose h3 when I first made it because that's what * I had been using in WordPress. Perhaps the logic should be that the page * title not be using h1 but rather a class, and then the headings use the * html elements? The philosophy of H# elements eludes me... */ #main h3 { color: #666; font-size: 1.4em; padding-top: 1em; margin-bottom: 1em; } /* * Put a dotted separator on top level headings to make them stand out. * (looks disruptive inside of blockquote etc.) */ #entry-content > h3 { margin-left: -1.2em; margin-right: -1.2em; padding-left: 1.2em; padding-right: 1.2em; border-top: 2px dotted #ccc; } /* * YOUTUBE */ #main .youtube { text-align: center; } /* * PICTURE */ #main .picture { text-align: center; } /* * QUOTE */ #main blockquote footer { text-align: right; font-weight: bold; } #main blockquote footer:before { content: "\2014" } /* http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */ #main blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; } #main blockquote:before { color: #ccc; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; /* Patches problem with original article, from comments thread. */ /* could also do blockquote:after {content:"\201D";} */ content:"\201C"; } #main blockquote p { display: inline; } /* * URL * * Put on a line by itself, indent. (Don't do this to spans, for instance it * would mess up the attribution footer in blockquote.) Also do not do it * if the URL is directly under a bullet in a list... because the list * entries would be centered differently based on length. (Is there a * generalization of such a solution?) */ #main div.url { text-align: center; } #main li > div.url { text-align: left; } /* * CODE AND TEXT * * Currently the code formatting and syntax-highlighting is done by client-side * scripting with Google Code Prettify, and the CSS in that. These override * those settings. */ #main pre { padding: 0.6em; white-space: pre-wrap; background: #f7f7f7; line-height: 1.5em; /* I thought this created a nice effect, but maybe there's better... */ border: 1px solid #F0F0F0; border-left: 2px dotted #bbb; /* We make the code just a tad smaller than the surrounding text */ font-size: 0.9em; } /* * DIVIDER */ #main hr { float: left; width: 100%; height: 1px; color: #BBB; background-color: #BBB; border: 1px solid #BBB; border-bottom: 0px; padding: 0; } /* ------------------------------------------------------------------------ TAG HANDLING Stolen from the simplest case of tags for StackExchange (so no special tag colors or icons). Should probably do something more creative, but I'm used to it. ----------------------------------------------------------------------- */ #body-div a.post-tag { color: #3E6D8E; background-color: #E0EAF1; border-bottom: 1px solid #b3cee1; border-right: 1px solid #b3cee1; padding: 3px 4px 3px 4px; margin: 2px 2px 2px 0; text-decoration: none; font-size: 90%; line-height: 1.4; white-space: nowrap; display: inline-block; } #body-div a.post-tag:hover { background-color: #c4dae9; border-bottom: 1px solid #c4dae9; border-right: 1px solid #c4dae9; text-decoration: none; }