Forgotten English

dabblet.css

/***
Forgotten English
A CSS experiment. Just mimicking my one-a-day calendar, called Forgotten English.
***/

/** Get our font **/
@import url(http://fonts.googleapis.com/css?family=IM+Fell+English:400,400italic|IM+Fell+English+SC|Cardo:400,400italic);

/** reset, normalize.css from jsFiddle **/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0;}

/** Forgotten English styles **/

.page { width: 100%; max-width: 650px; margin: 0 auto 1em auto; padding: 20px; color: #000; background: #fff; border: 1px solid #000; font-family: 'IM Fell English', serif; font-size: 90%; }
.page em { font-style: italic; }

.page .col { float: left; width: 30%; }
.page .col:first-child { width: 66%; margin-right: 3%; margin-bottom: 1%; }

.page h1 { font-family: 'IM Fell English SC', serif; text-align: center; text-transform: lowercase; letter-spacing: 0.5em; }

.page h2 { font-size: 300%; line-height: 2; text-align: center; }

.page .quotations li:first-child::first-letter { float: left; display: block; margin: 0 1px 1px 0; padding: 2px 3px 2px 2px; vertical-align: top; color: #fff; background: #000; font-size: 200%; }
.page .quotations cite { display: block; font-size: 90%; text-align: right; }
.page .quotations cite::before { content: '\2014'; }
.page .quotations li { margin-bottom: 1em; }

.page .story { margin-right: 8px; font-family: 'Cardo', serif; font-size: 90%; line-height: 1.5; }
.page .story::first-line { font-family: 'IM Fell English', serif; font-size: 120%; }
.page .story blockquote { display: block; margin-top: 8px; margin-left: 50px; font-style: italic; }

.page .woodcut { display: block; width: 100%; margin: 1em 0; }

.page .holiday { font-size: 80%; text-align: center; }

.page .memo { margin: 0 0 1em 0; }
.page .memo div { height: 1.5em; border-bottom: 1px solid #000; }

.page .date { position: relative; height: 175px; font-size: 220%; z-index: 10; }
.page .date span { position: absolute; left: 0; z-index: 10; width: 100%; display: block; text-align: center; }
.page .date .day { top: 0; font-family: 'IM Fell English SC', serif; font-size: 80%; letter-spacing: 3px; }
.page .date .number { top: 0; z-index: 50; display: block; font-size: 500%; line-height: 130px; }
.page .date .month { bottom: 0; }

.page .copyright { clear: both; padding-top: 0.5em; width: 66%; border-top: 1px solid #000; font-family: 'Cardo', serif; font-size: 60%; letter-spacing: 0.75em; text-transform: uppercase; }

​

dabblet.html

<div class="page" id="20110829">
    <div class="col">
        <h1>Forgotten English</h1>
        
        <h2>batten</h2>
         
        <ul class="quotations">
            <li>
                To fatten, or grow fat. In Sternberg's <em>Folk Lore and Glossary of Northamptonshire</em> [1851], the local phrase is quoted, &ldquo;Them pigs <em>batten</em> in the sun.&rdquo;
                <cite>Charles Mackkay's <em>Lost Beauties of the English Language</em>,&nbsp;1874</cite>
            </li>
            <li>
                <em>Fattening and battening</em>, a toast of a child's fattening and thriving given at its baptism in private, when the bread, cheese and whisky are partaken of.
                <cite>Alexander Warrack's <em>Scots Dialect Dictionary</em>,&nbsp;1911</cite>
            </li>
        </ul>
        
        <div class="story">
            Feast Day of John the Baptist<br />
            John Brand wrote in his <em>Observations on Popular Antiquities</em> (1900): "It seems to have been the custom at christening entertainments not only for the guests to eat as much as they pleased, but also to carry away as much as they liked in their pockets." And in <em>The Batchellor's Banquet</em> (1677) we read, "What store of sugar, briskets, comphets, and caraways, marmalet, and marchpane, with all kind of superflous banquetting stuff...which at that time must fill the pcokets of dainty dames." But over time, christening ceremonies declined. In 1666 Thomas Shipman noted the flagging generosity of godparents, who once bestowed silver gifts:<br />
            <blockquote>
                Formerly, when they us'd to troul [give]<br />
                Gilt bowls of sack, they gave the bowl<br />
                Two spoons at least, an ill use kept;<br />
                'Tis well if now our own be left.
            </blockquote>
        </div>
    </div>
    
    <div class="col">
        <img class="woodcut" src="http://farm3.static.flickr.com/2248/2287748981_62593800cb_b.jpg" alt="Father and child" title="batten" />
        
        <ul class="holiday">
            <li>Bank Holiday (UK except Scotland)</li>
            <li>New Moon</li>
        </ul>
        
        <div class="memo">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        
        <div class="date">
            <span class="day">Monday</span>
            <span class="number">29</span>
            <span class="month">August</span>
        </div>
    </div>
    
    <div class="copyright">&copy; Jeffrey Kacirk</div>
</div>​

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}