Commits

Barry Schwartz committed 89377e6

Considerable rework, and shutting down the font server.

Comments (0)

Files changed (28)

CF4.egg-info/SOURCES.txt

 cf4/public/font/Gutenberg_press.jpg
 cf4/public/font/Juvelo.otf
 cf4/public/font/bonveno.css
+cf4/public/font/fanwood.css
+cf4/public/font/fanwood.css~
 cf4/public/font/fontshow.css
 cf4/public/font/gb1911.css
 cf4/public/font/goudy.css
 cf4/public/font/index.css
 cf4/public/font/juvelo.css
+cf4/public/font/lindenhill.css
+cf4/public/font/lindenhill.css~
 cf4/public/font/prociono.css
 cf4/public/fontserver/show.css
 cf4/public/links/index.css
 cf4/templates/contact/contact.mako~
 cf4/templates/ebook/index.mako
 cf4/templates/font/bonveno.mako
+cf4/templates/font/fanwood.mako
+cf4/templates/font/fanwood.mako~
 cf4/templates/font/fontshow.mako
 cf4/templates/font/gb1911.mako
 cf4/templates/font/goudy.mako
 cf4/templates/font/index.mako
 cf4/templates/font/juvelo.mako
+cf4/templates/font/lindenhill.mako
 cf4/templates/font/prociono.mako
 cf4/templates/fontserver/show.mako
 cf4/templates/links/index.mako

cf4/controllers/fontserver.py

-# Copyright (c) 2010 Barry Schwartz
-#
-# Permission is hereby granted, free of charge, to any person
-# obtaining a copy of this software and associated documentation
-# files (the "Software"), to deal in the Software without
-# restriction, including without limitation the rights to use,
-# copy, modify, merge, publish, distribute, sublicense, and/or sell
-# copies of the Software, and to permit persons to whom the
-# Software is furnished to do so, subject to the following
-# conditions:
-# 
-# The above copyright notice and this permission notice shall be
-# included in all copies or substantial portions of the Software.
-# 
-# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
-# OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-# HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-# WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-# OTHER DEALINGS IN THE SOFTWARE.
-
-import logging
-import string
-
-from pylons import request, response, session, tmpl_context as c, url
-from pylons.controllers.util import abort, redirect
-
-from cf4.lib.base import BaseController, render
-from cf4.model.webfonts_data import webfonts
-
-from cf4.lib import content_type, serve_font
-from cf4.lib import helpers as h
-
-log = logging.getLogger(__name__)
-
-class FontserverController(BaseController):
-
-    def serve(self, id=None):
-        print repr(request)
-        return serve_font.serve_font(id)
-
-    def show(self):
-        server = 'http://' + request.environ['HTTP_HOST']
-        the_fonts = webfonts.the_fonts()
-        text = []
-        for font in the_fonts:
-            text.append('<tr>')
-            text.append('<td class="font-name ' + font['ident'] + '">' + font['fullname'] + '</td>\n')
-            text.append('<td class="server-url">' + server + '/fontserver/serve/' + font['ident'] + '</td>\n')
-            text.append('<td class="notes">' + webfonts.note_contents(font['ident']) + '</td>\n')
-            text.append('</tr>\n')
-        c.font_rows = string.join(text)
-        response.content_type = h.choose_content_type(request.environ)
-        return render('/fontserver/show.mako')
-
-    def css_for_show(self):
-        server = 'http://' + request.environ['HTTP_HOST']
-        the_fonts = webfonts.the_fonts()
-        css = []
-        for font in the_fonts:
-            section = ''
-            section += '@font-face{'
-            section += 'font-family:' + font['ident'] + ';'
-            section += 'src:url(' + server + '/fontserver/serve/' + font['ident'] + ');'
-            section += '}\n'
-            section += '.' + font['ident'] + '{'
-            section += 'font-family:' + font['ident'] + ';'
-            section += 'font-size:16pt;'
-            section += '}\n'
-            css.append(section)
-        response.content_type = 'text/css'
-        return css
-@font-face
-{
-    font-family : Kis;
-    font-style : normal;
-    font-weight : normal;
-    src : url(/fontserver/serve/KisStMTT);
-}
-
-@font-face
-{
-    font-family : Kis;
-    font-style : italic;
-    font-weight : normal;
-    src : url(/fontserver/serve/KisStMTT-Italic);
-}
-
-@font-face
-{
-    font-family : GreatPrimer;
-    font-style : normal;
-    font-weight : normal;
-    font-variant : small-caps;
-    src : url(/fontserver/serve/IM_FELL_Great_Primer_SC);
-}
-
-@font-face
-{
-    font-family : GreatPrimer;
-    font-style : italic;
-    font-weight : normal;
-    src : url(/fontserver/serve/IM_FELL_Great_Primer_Italic);
-}
+@import url(/webfontkit/fanwoodtext/stylesheet.css);
+@import url(/webfontkit/kristi/stylesheet.css);
 
 a:link
 {
     text-decoration : none;
 }
 
-#header a:link,
-#header a:visited,
-#header a:hover,
-#header a:active
+.header a:link,
+.header a:visited,
+.header a:hover,
+.header a:active
 {
     color : inherit;
 }
 
-.width72pt
+body
 {
-    width : 72pt;
+    background : #36255A;
+    text-align : center;
 }
 
-.width136pt
+.work-area
 {
-    width : 136pt;
+    width : 42pc;
+    max-width : 90%;
+    font : 14pt FanwoodTextTT, serif;
+    line-height : 17pt;
+    margin : 1pc auto;
+    background: #C2C0C8 url(/flower.jpg);
 }
 
-body
+.header
 {
-    font : 14pt Kis, serif;
-    line-height : 16pt;
-	margin : 0;
-    padding : 0;
-	text-align : center;
-    background : #E0E4E4;
+    width : 42pc;
+    max-width : 100%;
+    height : 70pt;
+    padding-bottom : 3pc;
 }
 
-#header
+.header img.dove-style
 {
     position : relative;
-    margin : 6pt auto 0 auto;
-    width : 60pc;
-    height : 70pt;
-    border-top : 2pt solid red;
-    border-bottom : 2pt solid red;
-}
-
-#header img.dove-style
-{
-    position : relative;
-    left : -4pt;
-    top : 4pt;
+    left : -6pt;
+    top : 12pt;
     width : 40pt;
     height : 32pt;
 }
 
-#header h1
+.header h1
 {
-    font : italic 30pt GreatPrimer, serif;
-    text-align : right;
-    padding-top: 3pt;
-    margin-right : 12pt;
+    font : 30pt KristiMedium, serif;
+    padding-top : 3pt;
+    padding-right : 40pt;
 }
 
-#header h2
+.header h2
 {
-    font : small-caps 12pt GreatPrimer, serif;
-    text-align : right;
+    font : italic 12pt FanwoodTextTT, serif;
     padding-top : 2pt;
-    margin-right : 24pt;
 }
 
-#language-menu ul
+div.language-menu
 {
-    position : absolute;
-    top : 12pt;
+    height : 50px;
+    width : 0;
+    float : right;
 }
 
-#main-menu
+.language-menu img
 {
-    position : absolute;
-    left : 0;
-    top : 46pt;
-    z-index : 99;
+    width : 40px;
+    height : 21px;
+    margin-top : 4px;
+    margin-left : -48px;
+    display : block;
+}
+
+.main-menu
+{
+    padding-top : 12pt;
 }
 
 ul.menu li
 {
-    float : left;
+    display : inline;
     margin : 0 6pt;
-    text-align : left;
-    position : relative;
 }
 
 ul.menu li:hover
 {
-    position : relative;
     background-color : #F8F8F8;
 }
 
-ul.submenu
+.content-area
 {
-    display : none;
-    position : absolute;
-    background-color : inherit;
-    border : 1pt solid lightgray;
-    padding-bottom : 6pt;
-}
-
-li:hover ul.submenu
-{
-    display : block;
-}
-
-ul.submenu li,
-ul.subsubmenu li
-{
-    position : relative;
-    margin : 6pt 0 0 0;
-    width : 100%;
-    text-indent : 6pt;
-}
-
-ul.submenu li a
-{
-    display : block;
-}
-
-ul.submenu li:hover a,
-ul.subsubmenu li:hover a
-{
-    background : transparent;
-}
-
-ul.submenu li:hover a:hover,
-ul.subsubmenu li:hover a:hover
-{
-    background : #E0E0E0;
-}
-
-ul.subsubmenu
-{
-    display : none;
-    background-color : #F8F8F8;
-    position : absolute;
-    left : 100%;
-    top : -6pt;
-    border : 1pt solid lightgray;
-    padding-bottom : 6pt;
-}
-
-.submenu li:hover ul.subsubmenu
-{
-    display : block;
-}
-
-#content-area
-{
-    width : 60pc;
-    margin : 12pt auto 2pc auto;
+    width : 40pc;
+    max-width : 80%;
+    margin : 1pc auto 2pc auto;
     text-align : left;
 }
 
-#footer
+.footer
 {
-    border-top : 2pt solid red;
+    width : 40pc;
+    max-width : 80%;
     font-size : 10pt;
-    position : relative;
     margin : 48pt auto 0 auto;
-    width : 60pc;
-    text-align : center;
 }
 
-#footer-contents
+.footer-contents
 {
-    padding : 6pt 12pt;
+    padding : 6pt 0 6pt 0;
 }
+
+.seen
+{
+    opacity : 1;
+    filter: alpha(opacity = 100);
+}
+
+.unseen
+{
+    opacity : 0;
+    filter: alpha(opacity = 0);
+}

cf4/public/contact/contact.css

-#content
+#snail-mail
 {
-    position : relative;
-    top : 2pc;
-    left : 0;
-    height : 42pc;
-}
-
-#our-email-address
-{
-    margin : 2pc 0;
+    margin-top : 1pc;
+    margin-bottom : 2pc;
 }
 
 #contact-form
 {
-    position : absolute;
-    top : 0;
-    left : 0;
+    margin-top : 2pc;
 }
 
 #contact-form #fields label
 {
-    text-align : right;
-    margin-right : 0.5pc;
-    display : block;
-}
-
-#contact-form #fields #div-name label
-{
-    margin-top : 194pt;
-}
-
-#contact-form #fields #div-note label
-{
-    margin-top : 2pc;
-    margin-right : -5.5pc;
-}
-
-#contact-form #fields #div-submit 
-{
-    position : absolute;
-    top : 18.5pc;
-    left : 0;
+    margin : 0 auto 1pc auto;
 }
 
 #contact-form #fields input
 {
-    margin-left : 0pc;
-    margin-bottom : 1pc;
-    width : 24pc;
+    margin : 0 auto 1pc auto;
+    width : 80%;
+    max-width : 24pc;
     display : block;
 }
 
-#contact-form #fields #div-submit input
-{
-    position : absolute;
-    top : 18.5pc;
-    left : 0;
-    width : 60pc;
-}
-
 #contact-form #fields textarea
 {
-    position : absolute;
-    top : 190pt;
-    left : 30pc;
-    width : 30pc;
+    margin : 0 auto 1pc auto;
+    width : 80%;
+    max-width : 30pc;
     height : 18pc;
+    display : block;
 }
 
 #notification
 {
     color : darkred;
-    position : absolute;
-    top : 35pc;
+    margin-top : 1pc;
+    margin-bottom : 2pc;
 }
 
 .drunk
 {
-    position : absolute;
-    top : -14pt;
-    left : 25.5pc;
+    margin-top : 1pc;
     width : 10.5pc;
 }
 
-.picguide
-{
-    width : 178px;
-    height : 43px;
-    margin: -4pt 0 -7pt 0;
-}
-
 .smiley,
 .surprise
 {
     margin : 0 0.5em;
 }
 
-.smiley
-{
-    float : right;
-}
-
-.surprise
-{
-    float : left;
-}

cf4/public/ebook/index.css

-#content
+.content
 {
-    text-align : right;
+    position : relative;
 }
 
-#content img
+#images
 {
-    width : 24pc;
+    position : relative;
+    height : 600px;
+    width : 400px;
+    max-width : 100%;
+    margin : 0 auto;
 }
 
-#book-list
+#images img
 {
-    float : left;
-    text-align : left;
-    width : 32pc;
-    margin-top : 2pc;
+    max-height : 600px;
+    max-width : 100%;
+    -moz-transition : opacity 1s linear;
+    -webkit-transition : opacity 1s linear;
+    -o-transition : opacity 1s linear;
+    transition : opacity 1s linear;
 }
 
-#book-list h1
+img#image1,
+img#image2,
+img#image3,
+img#image4
 {
-    font : italic 14pt Kis, serif;
-    text-align : center;
-    width : 24pc;
+    position : absolute;
+    top : 0;
+    left : 0;
+}
+
+img#image2
+{
+    max-height : 526px;
+}
+
+.book-list
+{
+    margin : 1pc auto;
+}
+
+.book-list h1
+{
+    font : italic 14pt FanwoodTextTT, serif;
     padding-bottom : 8pt;
 }
 
-#book-list li
+.book-list li
 {
-    margin-top : 8pt;
+    margin-top : 4pt;
 }
+
+#images p
+{
+    position : absolute;
+    top : 606px;
+    text-align : right;
+    font-size : 10pt;
+    line-height : 12pt;
+    right : 1pc;
+}

cf4/public/font/bonveno.css

-#font-page
-{
-    position : relative;
-    top : 1pc;
-    height : 30pc;
-}
-
-#specimen-images
-{
-    position : absolute;
-    top : 0;
-    left : 24pc;
-}
-
 .Bonveno-sample
 {
     width : 36pc;
-    margin : 0 0 3pt 0;
+    max-width : 100%;
+    margin-top : 2pc;
 }

cf4/public/font/fanwood.css

-#font-page
-{
-    position : relative;
-    top : 1pc;
-    height : 30pc;
-}
-
-#specimen-images
-{
-    position : absolute;
-    top : 0;
-    left : 24pc;
-}
-
 .specimen
 {
     width : 36pc;
-    margin : 0 0 3pt 0;
+    max-width : 100%;
+    margin-top : 2pc;
 }
 
 .image-credit

cf4/public/font/fontshow.css

-dl.font-info
+.content
 {
-    font : 18pt Kis, serif;
-    line-height : 24pt;
-    margin : 0 0 12pt 0;
+    padding-top : 1pc;
+    margin-left : 4pc;
+    margin-right : 4pc;
+    border-top : 1pt solid black;
 }
 
-dl.font-info dt
+.content li
 {
-    float : left;
-    width : 10pc;
+    padding-bottom : 2pt;
 }
 
 #download a
 {
-    font : 24pt Kis, serif;
+    font : 24pt FanwoodTextTT, serif;
     position : relative;
     top : 1pc;
     padding : 6pt;
 
 #old-versions
 {
-    margin-top : 6pc;
+    margin-top : 2pc;
 }
+

cf4/public/font/gb1911.css

-#font-page
-{
-    position : relative;
-    top : 1pc;
-    height : 30pc;
-}
-
-#specimen-images
-{
-    position : absolute;
-    top : 0;
-    left : 24pc;
-}
-
 .gb1911-sample
 {
     width : 36pc;
-    margin : 0 0 3pt 0;
+    max-width : 100%;
+    margin-top : 2pc;
 }
 
 .image-credit

cf4/public/font/goudy.css

-#font-page
+.Goudy-Image-23,
+.Goudy-Image-22
 {
-    position : relative;
-    top : 1pc;
-    height : 30pc;
+    width : 36pc;
+    max-width : 100%;
 }
 
-#specimen-images
-{
-    position : absolute;
-    top : 0;
-    left : 24pc;
-}
-
-.Goudy-Image-22,
 .Goudy-Image-23
 {
-    width : 36pc;
-    margin : 0 0 3pt 0;
+    margin-top : 2pc;
 }
 
 .image-credit

cf4/public/font/index.css

-@font-face
-{
-    font-family : Fanwood;
-    font-style : normal;
-    font-weight : normal;
-    src : url(/fontserver/serve/Fanwood);
-}
-
-@font-face
-{
-    font-family : Fanwood;
-    font-style : italic;
-    font-weight : normal;
-    src : url(/fontserver/serve/Fanwood-Italic);
-}
-
-@font-face
-{
-    font-family : "Fanwood Text";
-    font-style : normal;
-    font-weight : normal;
-    src : url(/fontserver/serve/FanwoodText);
-}
-
-@font-face
-{
-    font-family : "Fanwood Text";
-    font-style : italic;
-    font-weight : normal;
-    src : url(/fontserver/serve/FanwoodText-Italic);
-}
-
-@font-face
-{
-    font-family : "Linden Hill";
-    font-style : normal;
-    font-weight : normal;
-    src : url(/fontserver/serve/LindenHill);
-}
-
-@font-face
-{
-    font-family : "Linden Hill";
-    font-style : italic;
-    font-weight : normal;
-    src : url(/fontserver/serve/LindenHill-Italic);
-}
-
-@font-face
-{
-    font-family : Goudy;
-    font-style : normal;
-    font-weight : normal;
-    src : url(/fontserver/serve/GoudyStMTT);
-}
-
-@font-face
-{
-    font-family : Goudy;
-    font-style : italic;
-    font-weight : normal;
-    src : url(/fontserver/serve/GoudyStMTT-Italic);
-}
-
-@font-face
-{
-    font-family : GB1911;
-    font-style : normal;
-    font-weight : normal;
-    src : url(/fontserver/serve/GoudyBookletter1911TT);
-}
-
-@font-face
-{
-    font-family : Prociono;
-    font-style : normal;
-    font-weight : normal;
-    src : url(/fontserver/serve/ProcionoTT);
-}
-
-@font-face
-{
-    font-family : Juvelo;
-    font-style : normal;
-    font-weight : normal;
-    src : url(/font/Juvelo.otf);
-}
-
-@font-face
-{
-    font-family : Bonveno;
-    font-style : normal;
-    font-weight : normal;
-    src : url(/font/BonvenoCF-Light.otf);
-}
+@import url(/webfontkit/bonveno/stylesheet.css);
+@import url(/webfontkit/fanwood/stylesheet.css);
+@import url(/webfontkit/gb1911/stylesheet.css);
+@import url(/webfontkit/goudy/stylesheet.css);
+@import url(/webfontkit/juvelo/stylesheet.css);
+@import url(/webfontkit/lindenhill/stylesheet.css);
+@import url(/webfontkit/prociono/stylesheet.css);
 
 .fanwood
 {
-    font-family : Fanwood, serif;
+    font-family : FanwoodTT, serif;
 }
 
 .fanwood-text
 {
-    font-family : "Fanwood Text", serif;
+    font-family : FanwoodTextTT, serif;
 }
 
 .lindenhill
 {
-    font-family : "Linden Hill", serif;
+    font-family : LindenHillTT, serif;
 }
 
 .goudy
 {
-    font-family : Goudy, serif;
+    font-family : SortsMillGoudyTT, serif;
 }
 
 .gb1911
 {
-    font-family : GB1911, serif;
+    font-family : GoudyBookletter1911TT, serif;
 }
 
 .prociono
 {
-    font-family : Prociono, serif;
+    font-family : ProcionoTT, serif;
 }
 
 .juvelo
 {
-    font-family : Juvelo, serif;
+    font-family : JuveloRegular, serif;
 }
 
 .bonveno
 {
-    font-family : Bonveno, serif;
+    font-family : BonvenoCFLight, serif;
 }
 
-#content
-{
-    position : relative;
-}
-
-#content img
+.content img
 {
     width : 18pc;
     margin-top : 1pc;
 }
 
-#font-list
+.font-list
 {
-    display : inline;
-    text-align : center;
-    position : absolute;
+    margin : 0 auto;
     top : 2pc;
     width : 32pc;
+    max-width : 95%;
 }
 
-#font-list h1
+.font-list h1
 {
-    font : italic 18pt GreatPrimer, serif;
-    padding-top : 1pc;
-    padding-bottom : 1pc;
-    margin-bottom : 1pc;
+    font : italic 18pt FanwoodTextTT, serif;
+    text-decoration : underline;
+    padding-top : 8pt;
+    padding-bottom : 8pt;
 }
 
-#font-list ul li
+.font-list ul li
 {
-    display : block;
     font-size : 24pt;
     line-height : 24pt;
     padding : 6pt;
-    margin : 0;
 }

cf4/public/font/juvelo.css

-#font-page
-{
-    position : relative;
-    top : 1pc;
-    height : 30pc;
-}
-
-#specimen-images
-{
-    position : absolute;
-    top : 0;
-    left : 24pc;
-}
-
 .Juvelo-sample
 {
     width : 36pc;
-    margin : 0 0 3pt 0;
+    max-width : 100%;
+    margin-top : 2pc;
 }
 
 .image-credit

cf4/public/font/lindenhill.css

-#font-page
-{
-    position : relative;
-    top : 1pc;
-    height : 30pc;
-}
-
-#specimen-images
-{
-    position : absolute;
-    top : 0;
-    left : 24pc;
-}
-
 .specimen
 {
     width : 36pc;
-    margin : 0 0 3pt 0;
+    max-width : 100%;
+    margin-top : 2pc;
 }
 
 .image-credit

cf4/public/font/prociono.css

-#font-page
-{
-    position : relative;
-    top : 1pc;
-    height : 36pc;
-}
-
-#specimen-images
-{
-    position : absolute;
-    top : 0;
-    left : 24pc;
-}
-
 .Prociono-sample
 {
     width : 36pc;
-    margin : 0 0 3pt 0;
+    max-width : 100%;
+    margin-top : 2pc;
 }

cf4/public/fontserver/show.css

-#webfont-info ul
-{
-    margin-top : 2pc;
-}
-
-#webfont-info li.li-1
-{
-    float : left;
-    width : 23pc;
-    margin-bottom : 1.5pc;
-    font : 14pt Kis, serif;
-}
-
-#webfont-info li.li-2
-{
-    float : right;
-    width : 23pc;
-    margin-bottom : 1.5pc;
-    font : 14pt Kis, serif;
-}
-
-h1#fontserver-title
-{
-    font : small-caps 16pt GreatPrimer;
-    text-align : center;
-    position : relative;
-    top : 6pt;
-}
-
-#content table
-{
-    clear : both;
-    font : 12pt Kis, serif;
-    table-layout : fixed;
-    border-collapse : separate;
-}
-
-#content th
-{
-    font-style : italic;
-    font-weight: normal;
-    text-align : left;
-    text-indent : 3em;
-}
-
-#content .font-name
-{
-    width : 17pc;
-}
-
-#content .server-url
-{
-    width : 24pc;
-    border-color : transparent;
-    border-style : solid;
-    border-width : 0 1pc;
-}
-
-#content .notes
-{
-    width : 17pc;
-}
-
-#content td
-{
-    height : 24pt;
-}
-
-#content .font-name td
-{
-    font-size : 18pt;
-}

cf4/public/links/index.css

-#content
+.content
 {
     text-align : center;
 }
 
-#image
-{
-    float : right;
-}
-
-#image img
+.image img
 {
     width : 18pc;
 }
 
-#image p
+.image p
 {
     font-size : 10pt;
-    text-align : right;
-    margin-right : 1pc;
 }
 
-#link-list
+.link-list
 {
-    margin-top : 2pc;
-    margin-left : 6pc;
-    width : 30pc;
+    padding : 1pc 1em 2pc;
+    margin : 0 auto;
 }
 
-#link-list h1
+.link-list h1
 {
-    font : italic 14pt Kis, serif;
+    font : italic 14pt FanwoodTextTT, serif;
     padding-bottom : 11pt;
 }
 
-#link-list li
+.link-list li
 {
-    margin-top : 8pt;
+    margin-top : 4pt;
 }

cf4/public/main/main.css

-#content
+.content
 {
     position : relative;
-    height : 32pc;
 }
 
-#mainpage-menu
+.content p
 {
-    font : italic 20pt Kis, serif;
-    line-height : 20pt;
     text-align : left;
-    text-indent : 2pc;
-    position : relative;
-    top : 2pc;
+    text-indent : 0;
+    margin : 6pt auto;
+    width : 24pc;
+    max-width : 95%;
 }
 
-#mainpage-menu li
-{    
-    width : 12pc;
-    margin : 18pt 0;
-}
-
-#mainpage-menu li a
+.content p.no-indent
 {
-    font-size : 20pt;
-    padding : 6pt 0;
-    width : 12pc;
-    display : block;
-    color : black;
-    -moz-transition : all 0.1s ease-in;
-    -webkit-transition : all 0.1s ease-in;
-    -o-transition : all 0.1s ease-in;
-    transition : all 0.1s ease-in;
-}
-
-#mainpage-menu li a:hover
-{
-    background : none;
-    font-size : 26pt;
-    color : black;
-    -moz-transition : all 0.1s ease-out;
-    -webkit-transition : all 0.1s ease-out;
-    -o-transition : all 0.1s ease-out;
-    transition : all 0.1s ease-out;
+    text-indent : 0;
 }
 
 #images
 {
-    position : absolute;
-    right : 6pc;
-    top : 0;
+    position : relative;
+    height : 600px;
+    width : 400px;
+    max-width : 100%;
+    margin : 1pc auto;
 }
 
 #images img
 {
-    max-width : 60pc;
+    max-height : 600px;
+    max-width : 100%;
     -moz-transition : opacity 1s linear;
     -webkit-transition : opacity 1s linear;
     -o-transition : opacity 1s linear;
     transition : opacity 1s linear;
 }
 
-img#couch,
-img#dog,
-img#holiday-time,
-img#girl-on-bench
+img#image1,
+img#image3,
+img#image4
 {
     position : absolute;
-    top : 25px;
-    right : 0;
-    width : 600px;
-    height : 400px;
+    top : 0;
+    left : 0;
 }
 
-img#ice-cream
+img#image2
 {
-    position : absolute;
-    top : 25px;
-    right : 0;
-    width : 600px;
-    height : 399px;
+    width : 360px;
 }
 
 p#photo-credits
 {
     text-align : right;
     font-size : 10pt;
-    position : absolute;
+    line-height : 12pt;
     right : 1pc;
-    top: 34pc;
 }
-
-.seen
-{
-    opacity : 1;
-    filter: alpha(opacity = 100);
-}
-
-.unseen
-{
-    opacity : 0;
-    filter: alpha(opacity = 0);
-}

cf4/public/news/read.css

-#the-crudfactory-news
+.the-crudfactory-news
 {
-    font : 14pt Kis, serif;
+    font : 14pt FanwoodTextTT, serif;
     line-height : 18pt;
-    width : 24pc;
+    text-align : left;
+    max-width : 24pc;
     margin : 0 auto;
+    padding-left : 1em;
+    padding-right : 1em;
+    overflow : hidden;
 }
 
 div.news-entry
     margin-bottom : 1pc;
 }
 
-#the-crudfactory-news h1
+.the-crudfactory-news h1
 {
-    font : 18pt Kis, serif;
+    font : 18pt FanwoodTextTT, serif;
     margin-bottom : 1pc;
 }
 
-#the-crudfactory-news h1 span.time
+.the-crudfactory-news h1 span.time
 {
-    font : 14pt Kis, serif
+    font : 14pt FanwoodTextTT, serif
 }
 
-#the-crudfactory-news-rss p
-{
-    float : right;
-}
-
-#the-crudfactory-news-rss img
+.the-crudfactory-news-rss img
 {
     width : 50px;
     height : 19px;

cf4/public/rubbish/index.css

-#content
+.content
 {
     position : relative;
     height : 44pc;

cf4/templates/base.mako

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
+  
+<%def name="languages(url)">
+<a href="${url}" class="english quiet-link"><img alt="${_(u'lang-en')}" src="/jp_draws_US_Flag--40x21.png" /></a>
+<a href="${url}?lang=eo" class="esperanto quiet-link"><img alt="${_(u'lang-eo')}" src="/Anonymous_esperanto_flag--40x21.png" /></a>
+</%def>
 
-  <%def name="languages(url)">
-    <ul class="menu">
-      <li><a href="${url}">${_(u'lang-en')}</a></li>
-      <li><a href="${url}?lang=eo">${_(u'lang-eo')}</a></li>
-    </ul>
-  </%def>
+<%def name="top_title()">${_(u'The Crud Factory')}</%def>
+<%def name="top_subtitle()">${_(u'Free Rubbish for Free Minds')}</%def>
 
-  <%def name="top_title()">${_(u'The Crud Factory')}</%def>
-  <%def name="top_subtitle()">${_(u'Free Rubbish for Free Minds')}</%def>
+<%def name="main_menu_entries(page)">
+<ul class="menu">
+  %if page == "main":
+  <li style="text-decoration:underline;"><a href="/${h.make_params()}">${_(u'About us')}</a></li>
+  %else:
+  <li><a href="/${h.make_params()}">${_(u'About us')}</a></li>
+  %endif
 
-  <%def name="main_menu_entries(page)">
-    <ul class="menu">
-      <li><a href="/${h.make_params()}">${_(u'Main Page')}</a></li>
-      <li><a href="/news/read${h.make_params()}">${_(u'News')}</a></li>
-      <li><a href="/rubbish/index${h.make_params()}">${_(u'Rubbish')}</a>
-        <ul class="submenu width72pt">
-          <li><a href="/font/index${h.make_params()}">${_(u'Fonts')}</a>
-            <ul class="subsubmenu width136pt">
-              <li><a href="/font/show/fanwood${h.make_params()}">${_(u'Fanwood')}</a></li>
-              <li><a href="/font/show/lindenhill${h.make_params()}">${_(u'Linden Hill')}</a></li>
-              <li><a href="/font/show/goudy${h.make_params()}">${_(u'Sorts Mill Goudy')}</a></li>
-              <li><a href="/font/show/gb1911${h.make_params()}">${_(u'Goudy Bookletter 1911')}</a></li>
-              <li><a href="/font/show/prociono${h.make_params()}">${_(u'Prociono')}</a></li>
-              <li><a href="/font/show/juvelo${h.make_params()}">${_(u'Juvelo')}</a></li>
-              <li><a href="/font/show/bonveno${h.make_params()}">${_(u'Bonveno')}</a></li>
-            </ul>
-          </li>
-          <li><a href="/ebook/index${h.make_params()}">${_(u'E-books')}</a></li>
-        </ul>
-      </li>
-      <li><a href="/fontserver/show${h.make_params()}">${_(u'Font Server')}</a></li>
-      <li><a href="/links/index${h.make_params()}">${_(u'Links')}</a></li>
-      <li><a href="/contact/form${h.make_params()}">${_(u'Contact')}</a></li>
-    </ul>
-  </%def>
+  %if page == "/news/read":
+  <li style="text-decoration:underline;"><a href="/news/read${h.make_params()}">${_(u'News')}</a></li>
+  %else:
+  <li><a href="/news/read${h.make_params()}">${_(u'News')}</a></li>
+  %endif
 
-  <%def name="n_pica_grid(unit, width, height, x = 0, y = 0, opacity = 0.1, color = 'red')">
-      %for i in range(x, x + width, unit):
-        <span style="width:${unit}pc; height:${unit}pc; position:absolute; left:${i}pc; top:0;
-                     border-style:solid; border-color:red; border-width:1px 0 0 0; opacity:0.1; z-index:0;"></span>
-        %for j in range(y, y + height, unit):
-          <span style="width:${unit}pc; height:${unit}pc; position:absolute; left:${i}pc; top:${j}pc;
-                       border-style:solid; border-color:red; border-width:0 1px 1px 0; opacity:0.1; z-index:0;"></span>
-        %endfor
-      %endfor
-      %for j in range(y, y + height, unit):
-        <span style="width:${unit}pc; height:${unit}pc; position:absolute; left:0; top:${j}pc;
-                       border-style:solid; border-color:red; border-width:0 0 0 1px; opacity:0.1; z-index:0;"></span>
-      %endfor
-  </%def>
+  %if page == "/font/index":
+  <li style="text-decoration:underline;"><a href="/font/index${h.make_params()}">${_(u'Fonts')}</a></li>
+  %else:
+  <li><a href="/font/index${h.make_params()}">${_(u'Fonts')}</a></li>
+  %endif
 
-  <%def name="my_grids()"></%def>
-  <%def name="xmy_grids()">
-    <div style="width : 60pc; margin : 0 auto;">
-      <div style="position:relative; left:0; top:0;">
-        ${n_pica_grid(2, 60, 100)}
-        ${n_pica_grid(6, 60, 100)}
-      </div>
-    </div>
-  </%def>
+  %if page == "/ebook/index":
+  <li style="text-decoration:underline;"><a href="/ebook/index${h.make_params()}">${_(u'E-books')}</a></li>
+  %else:
+  <li><a href="/ebook/index${h.make_params()}">${_(u'E-books')}</a></li>
+  %endif
 
-  <% h.set_language() %>
+  %if page == "/links/index":
+  <li style="text-decoration:underline;"><a href="/links/index${h.make_params()}">${_(u'Links')}</a></li>
+  %else:
+  <li><a href="/links/index${h.make_params()}">${_(u'Links')}</a></li>
+  %endif
 
-  <head>
-    <meta charset="utf-8" />
-    ${self.title()}
-    <!--[if lt IE 9]>
-    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-    <link rel="stylesheet" type="text/css" href="/reset.css" media="screen" />
-    <link rel="stylesheet" type="text/css" href="/base.css" media="screen" />
-    ${self.head_tags()}
-    <link rel="alternate" type="application/rss+xml" title="Crud Factory News Feed" href="/news/rss" />
-  </head>
+  %if page == "contact":
+  <li style="text-decoration:underline;"><a href="/contact/form${h.make_params()}">${_(u'Contact')}</a></li>
+  %else:
+  <li><a href="/contact/form${h.make_params()}">${_(u'Contact')}</a></li>
+  %endif
 
-  <body>
+</ul>
+</%def>
+
+<%def name="n_pica_grid(unit, width, height, x = 0, y = 0, opacity = 0.1, color = 'red')">
+%for i in range(x, x + width, unit):
+<span style="width:${unit}pc; height:${unit}pc; position:absolute; left:${i}pc; top:0;
+             border-style:solid; border-color:red; border-width:1px 0 0 0; opacity:0.1; z-index:0;"></span>
+%for j in range(y, y + height, unit):
+<span style="width:${unit}pc; height:${unit}pc; position:absolute; left:${i}pc; top:${j}pc;
+             border-style:solid; border-color:red; border-width:0 1px 1px 0; opacity:0.1; z-index:0;"></span>
+%endfor
+%endfor
+%for j in range(y, y + height, unit):
+<span style="width:${unit}pc; height:${unit}pc; position:absolute; left:0; top:${j}pc;
+             border-style:solid; border-color:red; border-width:0 0 0 1px; opacity:0.1; z-index:0;"></span>
+%endfor
+</%def>
+
+<%def name="my_grids()"></%def>
+<%def name="xmy_grids()">
+<div style="width : 60pc; margin : 0 auto;">
+  <div style="position:relative; left:0; top:0;">
+    ${n_pica_grid(2, 60, 100)}
+    ${n_pica_grid(6, 60, 100)}
+  </div>
+</div>
+</%def>
+
+<% h.set_language() %>
+
+<head>
+  <meta charset="utf-8" />
+  ${self.title()}
+  <!--[if lt IE 9]>
+      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+      <![endif]-->
+  <link rel="stylesheet" type="text/css" href="/reset.css" media="screen" />
+  <link rel="stylesheet" type="text/css" href="/base.css" media="screen" />
+  ${self.head_tags()}
+  <link rel="alternate" type="application/rss+xml" title="Crud Factory News Feed" href="/news/rss" />
+</head>
+
+<body>
+  <div class="work-area">
 
     ${my_grids()}
 
-    <div id="header">
-      <div id="header-contents">
-
-        <div id="language-menu">
-          ${self.language_menu()}
-        </div>
-
-        <h1><a href="/${h.make_params()}" class="quiet-link"><img src="/risto_pekkala_Dove_flying.png" class="dove-style" alt="${_(u'dove')}" />${self.top_title()}</a></h1>
-        <h2><a href="/${h.make_params()}" class="quiet-link">${self.top_subtitle()}</a></h2>
-
-        <nav id="main-menu">
-          ${self.main_menu()}
-        </nav>
-
-      </div>
+    <div class="language-menu">
+      ${self.language_menu()}
     </div>
 
-    <div id="content-area">
-      <div id="content">
-        ${self.body()}
-      </div>
+    <div class="header">
+      <h1><a href="/${h.make_params()}" class="quiet-link"><img src="/risto_pekkala_Dove_flying.png" class="dove-style" alt="${_(u'dove')}" />${self.top_title()}</a></h1>
+      <h2><a href="/${h.make_params()}" class="quiet-link">${self.top_subtitle()}</a></h2>
+
+      <nav class="main-menu">
+        ${self.main_menu()}
+      </nav>
     </div>
 
-    <div id="footer">
+    <div class="content">
+      ${self.body()}
+    </div>
+
+    <div class="footer">
       <footer>
-        <div id="footer-contents">
+        <div class="footer-contents">
           <ul>
-            <li><a href="http://www.identifont.com/show?1ZVI">${_(u'Who is The Crud Factory?')}</a></li>
             <li>
               ${_(u'This page is made with:')}
               <a class="html-validator" href="http://validator.w3.org/check/referer">[HTML5]</a>
               <!-- <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">[CSS3]</a> -->
-              <a href="http://iginomarini.com/fell/the-revival-fonts/">[${_(u'IM Fell Types')}]</a>
               <a href="http://openclipart.org/">[OCAL]</a>
             </li>
-            <%
-               text = _(u'You may like to see an <a href="/cf3/">old version</a> of our pages.')
-            %>
-            <li>${text|n}</li>
           </ul>
         </div>
       </footer>
     </div>
 
-  </body>
+  </div>
+</body>
 </html>

cf4/templates/ebook/index.mako

 
 <%def name="head_tags()">
   <link rel="stylesheet" type="text/css" href="/ebook/index.css" />
+  <script type="text/javascript" src="/imageTools.js"></script>
 </%def>
 
-<div id="book-list">
+<div class="book-list">
   <h1>${_('E-books in PDF format')}<br />
     ${_('for <a href="http://www.adobe.com/products/acrobat/readstep2.html">Adobe Reader</a>')|n}</h1>
 
   </ul>
 </div>
 
-<img alt="${_(u'scribe')}" src="/ebook/liftarn_Writing_My_Master_s_Words.png" />
+<div id="images">
+  <img id="image1" class="unseen" alt="" src="/non-free/stockxpertcom_id361895_jpg_ba0c4566b52b4775fbd6d386e2bfabf2-modified.jpg" />
+  <img id="image2" class="unseen" alt="" src="/ebook/liftarn_Writing_My_Master_s_Words.png" />
+  <img id="image3" class="unseen" alt="" src="/non-free/3283726--400x600.jpg" />
+  <img id="image4" class="unseen" alt="" src="/non-free/2897971-400x557.jpg" />
+  <script type="text/javascript">
+    var buf = ["image1", "image2", "image3", "image4"];
+    cycleThroughImages(buf, "buf", "seen", "unseen", 8000);
+  </script>
+
+  <p id="photo-credits">
+    ${_(u'Photos:')}
+    stockxpert,
+    <a href="http://www.veer.com/artist/stocklite">stocklite/Veer</a>,
+    <a href="http://www.veer.com/artist/bluedogrose">bluedogrose/Veer</a><br />
+    ${_(u'Clip-art:')}
+    <a href="http://openclipart.org/">Open Clip Art Library</a>
+  </p>
+</div>

cf4/templates/font/fontshow.mako

      if 'modification' not in info:
          info['modification'] = _(u'Allowed')
   %>
-  <dl class="font-info">
-    <dt>${_(u'Typeface')}:</dt><dd>${info['name']|n}</dd>
-    <dt>${_(u'Version')}:</dt><dd>${info['version']|n}</dd>
-    <dt>${_(u'Price')}:</dt><dd>${info['price']|n}</dd>
+  <ul class="font-info">
+    <li>${_(u'Typeface')}: ${info['name']|n}</li>
+    <li>${_(u'Version')}: ${info['version']|n}</li>
+    <li>${_(u'Price')}: ${info['price']|n}</li>
 
     %if info['license'] == 'mit':
-      <dt>${_(u'License')}:</dt><dd><a href="http://www.opensource.org/licenses/mit-license.php">${_(u'MIT license')}</a></dd>
+      <li>${_(u'License')}: <a href="http://www.opensource.org/licenses/mit-license.php">${_(u'MIT license')}</a></li>
     %elif info['license'] == 'pd':
-      <dt>${_(u'License')}:</dt><dd><a href="http://en.wikipedia.org/wiki/Public_domain">${_(u'Public Domain')}</a></dd>
+      <li>${_(u'License')}: <a href="http://en.wikipedia.org/wiki/Public_domain">${_(u'Public Domain')}</a></li>
     %endif
 
-    <dt>${_(u'Commercial use')}:</dt><dd>${info['commercial-use']}</dd>
-    <dt>${_(u'Embedding')}:</dt><dd>${info['embedding']}</dd>
-    <dt>${_(u'Redistribution')}:</dt><dd>${info['redistribution']}</dd>
-    <dt>${_(u'Modification')}:</dt><dd>${info['modification']}</dd>
+    <li>${_(u'Commercial use')}: ${info['commercial-use']}</li>
+    <li>${_(u'Embedding')}: ${info['embedding']}</li>
+    <li>${_(u'Redistribution')}: ${info['redistribution']}</li>
+    <li>${_(u'Modification')}: ${info['modification']}</li>
 
     %if 'based_on_url' in info:
-      <dt>${_(u'Based on')}:</dt><dd><a href="${info['based_on_url']}">${_(u'[link]')}</a></dd>
+      <li>${_(u'Based on')}: <a href="${info['based_on_url']}">${_(u'[link]')}</a></li>
     %endif
-  </dl>
+  </ul>
 
   <div id="download">
     <a href="${c.download_url}">

cf4/templates/font/index.mako

   <link rel="stylesheet" type="text/css" href="/font/index.css" />
 </%def>
 
-<a href="/font/Gutenberg_press.jpg" class="quiet-link">
-  <img alt="${_(u'a press operator pulling')}" src="/font/Gutenberg_press.jpg" />
-</a>
-
-<div id="font-list">
+<div class="font-list">
 
   <h1>${_(u'The Crud Factory Font Collection')}</h1>
 
   <ul>
-    <li class="fanwood"><a href="/font/show/fanwood${h.make_params()}" class="quiet-link">${_(u'Fanwood <em>and</em> <span class="fanwood-text">Fanwood <em>Text</em></span>')|n}</a></li>
-    <li class="lindenhill"><a href="/font/show/lindenhill${h.make_params()}" class="quiet-link">${_(u'Linden Hill <em>and Linden Hill Italic</em>')|n}</a></li>
-    <li class="goudy"><a href="/font/show/goudy${h.make_params()}" class="quiet-link">${_(u'Sorts Mill Goudy <em>and Goudy Italic</em>')|n}</a></li>
-    <li class="gb1911"><a href="/font/show/gb1911${h.make_params()}" class="quiet-link">${_(u'Goudy Bookletter 1911')}</a></li>
-    <li class="prociono"><a href="/font/show/prociono${h.make_params()}" class="quiet-link">${_(u'Prociono')}</a></li>
-    <li class="juvelo"><a href="/font/show/juvelo${h.make_params()}" class="quiet-link">${_(u'Juvelo')}</a></li>
-    <li class="bonveno"><a href="/font/show/bonveno${h.make_params()}" class="quiet-link">${_(u'Bonveno')}</a></li>
+    <li class="fanwood"><a href="/font/show/fanwood${h.make_params()}">${_(u'Fanwood <em>and</em> <span class="fanwood-text">Fanwood <em>Text</em></span>')|n}</a></li>
+    <li class="lindenhill"><a href="/font/show/lindenhill${h.make_params()}">${_(u'Linden Hill <em>and Linden Hill Italic</em>')|n}</a></li>
+    <li class="goudy"><a href="/font/show/goudy${h.make_params()}">${_(u'Sorts Mill Goudy <em>and Goudy Italic</em>')|n}</a></li>
+    <li class="gb1911"><a href="/font/show/gb1911${h.make_params()}">${_(u'Goudy Bookletter 1911')}</a></li>
+    <li class="prociono"><a href="/font/show/prociono${h.make_params()}">${_(u'Prociono')}</a></li>
+    <li class="juvelo"><a href="/font/show/juvelo${h.make_params()}">${_(u'Juvelo')}</a></li>
+    <li class="bonveno"><a href="/font/show/bonveno${h.make_params()}">${_(u'Bonveno')}</a></li>
   </ul>
 
+  <a href="/font/Gutenberg_press.jpg" class="quiet-link">
+    <img alt="${_(u'a press operator pulling')}" src="/font/Gutenberg_press.jpg" />
+  </a>
+
 </div>

cf4/templates/font/lindenhill.mako

   ${self.font_info(info)}
 
   <div id="specimen-images">
+    <a href="/cf3/fonts/sonnet.png" class="quiet-link"><img src="/cf3/fonts/sonnet.png" alt="Linden Hill specimen" class="specimen" /></a>
+    <p class="image-credit">${_(u'From')} <a href="/cf3/e-books/SonnetsFromThePortuguese.pdf">${_(u'Sonnets from the Portuguese')}</a></p>
     <a href="/cf3/fonts/linden-hill-119.png" class="quiet-link"><img src="/cf3/fonts/linden-hill-119.png" alt="Linden Hill specimen" class="specimen" /></a>
     <p class="image-credit">${_(u'The image above is by')} <a href="http://theleagueofmoveabletype.com/">${_(u'The League of Movable Type')}</a></p>
-    <a href="/cf3/fonts/sonnet.png" class="quiet-link"><img src="/cf3/fonts/sonnet.png" alt="Linden Hill specimen" class="specimen" /></a>
-    <p class="image-credit">${_(u'From')} <a href="/cf3/e-books/SonnetsFromThePortuguese.pdf">${_(u'Sonnets from the Portuguese')}</a></p>
   </div>
 
 </div>

cf4/templates/fontserver/show.mako

-<%inherit file="/base.mako"/>
-
-<%def name="language_menu()">
-${self.languages(url='/fontserver/show')}
-</%def>
-
-<%def name="main_menu()">
-${self.main_menu_entries(page='show')}
-</%def>
-
-<%def name="title()">
-<title>${_(u'Crud Factory: Font Server')}</title>
-</%def>
-
-<%def name="head_tags()">
-<link rel="stylesheet" type="text/css" href="css-for-show" />
-<link rel="stylesheet" type="text/css" href="/fontserver/show.css" />
-</%def>
-
-<ul id="webfont-info">
-  <li class="li-1">${_(u'Here is a listing of URLs ...')}</li>
-  <li class="li-2">${_(u'Fonts whose licenses include ...')}</li>
-</ul>
-
-<h1 id="fontserver-title">${_(u'The Crud Factory<br />Font Server')|n}</h1>
-
-<table>
-  <colgroup>
-    <col /><col /><col />
-  </colgroup>
-  <thead>
-    <tr>
-      <th class="font-name">${_(u'Font')}</th>
-      <th class="server-url">${_(u'URL to use for @font-face')}</th>
-      <th class="notes">${_(u'Notes')}</th>
-    </tr>
-  </thead>
-  <tbody>
-    ${c.font_rows|n}
-  </tbody>
-</table>

cf4/templates/links/index.mako

   <link rel="stylesheet" type="text/css" href="/links/index.css" />
 </%def>
 
-<div id="image">
-  <img src="/non-free/2006267--411x600.jpg" alt="${_(u'a dog waiting')|n}" />
-  <p>${_(u'Illustration:')} <a href="http://Nakisha.com/">Nakisha Elsje VanderHoeven</a></p>
-</div>
-
-
-<div id="link-list">
+<div class="link-list">
   <h1>${_('Destinations for the Bored')}</h1>
 
   <ul>
     <li><a href="http://lernu.net/">${_(u'<em>Lernu!</em> (learn Esperanto by Internet)')|n}</a></li>
     <li><a href="http://www.melodiesplus.com/">${_(u'<em>Melodies Plus</em>')|n}</a></li>
     <li><a href="http://mmrbstore.com/">${_(u'Mr. Michael Recycles Bicycles, LLC')|n}</a></li>
-    <li><a href="http://www.nonloco-physics.000freehosting.com/">${_(u'Non-loco physics')|n}</a></li>
     <li><a href="http://www.mango-madness.com/">${_(u'<em>It’s Mango Madness!</em>')|n}</a></li>
     <li><a href="http://secure.uptontea.com/">${_(u'Upton Tea Imports')|n}</a></li>
   </ul>
 </div>
+
+<div class="image">
+  <img src="/non-free/2006267--411x600.jpg" alt="${_(u'a dog waiting')|n}" />
+  <p>${_(u'Illustration:')} <a href="http://Nakisha.com/">Nakisha Elsje VanderHoeven</a></p>
+</div>

cf4/templates/main/main.mako

   <script type="text/javascript" src="/imageTools.js"></script>
 </%def>
 
-<div id="mainpage-menu">
-  <ul>
-    <li><a href="/news/read${h.make_params()}">${_(u'News')}</a></li>
-    <li><a href="/font/index${h.make_params()}">${_(u'Fonts')}</a></li>
-    <li><a href="/ebook/index${h.make_params()}">${_(u'E-books')}</a></li>
-    <li><a href="/fontserver/show${h.make_params()}">${_(u'Font Server')}</a></li>
-    <li><a href="/links/index${h.make_params()}">${_(u'Links')}</a></li>
-    <li><a href="/contact/form${h.make_params()}">${_(u'Contact')}</a></li>
-  </ul>
-</div>
+<p class="no-indent"><em>${_(u'The Crud Factory')}</em> ${_(u'is')} <a href="https://profiles.google.com/rubujsagxulo/about">${_(u'a one-person')}</a> ${_(u'mock boutique that produces e-books and digital fonts in very small volumes and supplies them to you, for immediate download, without cost.')}</p>
+<p>${_(u'Click on the menu links above, to peruse our humble wares.')}</p>
 
 <div id="images">
-  <img id="ice-cream" class="unseen" src="/non-free/ice-cream.jpg" alt="" />
-  <img id="dog" class="unseen" src="/non-free/dog.jpg" alt="" />
-  <img id="girl-on-bench" class="unseen" src="/non-free/girl-on-bench.jpg" alt="" />
-  <img id="holiday-time" class="unseen" src="/non-free/holiday-time.jpg" alt="" />
-  <img id="couch" class="seen" src="/non-free/couch.jpg" alt="${_(u'Welcome to our shop')}" />
+  <img id="image1" class="unseen" src="/non-free/3068928-modified.jpg" alt="" />
+  <img id="image2" class="unseen" src="/non-free/2570932--360x477.jpg" alt="" />
+  <img id="image3" class="unseen" src="/non-free/1508939--400x600.jpg" alt="" />
+  <img id="image4" class="unseen" src="/non-free/1335189--400x600.jpg" alt="" />
   <script type="text/javascript">
-    var buf = ["couch", "ice-cream", "girl-on-bench", "holiday-time", "dog"];
-    cycleThroughImages(buf, "buf", "seen", "unseen", 10000);
+    var buf = ["image1", "image2", "image3", "image4"];
+    cycleThroughImages(buf, "buf", "seen", "unseen", 8000);
   </script>
 </div>
 
 <p id="photo-credits">
   ${_(u'Photos:')}
-  <a href="http://ideas.veer.com/members/archideaphoto">Paolo De Santis/Veer</a>,
-  <a href="http://veer.com/">Corbis/Veer</a>,
-  <a href="http://photos.com/">Photos.com</a>,
-  <a href="http://en.wikipedia.org/wiki/Stock.xchng">StockXpert</a>
+  <a href="http://www.veer.com/artist/Edward_Foto">Edward_Foto/Veer</a>,
+  <a href="http://www.veer.com/artist/forsterforest">forsterforest/Veer</a>,
+  <a href="http://www.veer.com/artist/avava">avava/Veer</a>,
+  <a href="http://www.veer.com/artist/iofoto">iofoto/Veer</a>
 </p>

cf4/templates/news/read.mako

   <link rel="stylesheet" type="text/css" href="/news/read.css" />
 </%def>
 
-<div id="the-crudfactory-news-rss">
+<div class="the-crudfactory-news-rss">
 <p><a href="/news/rss" class="quiet-link"><img alt="RSS button" src="/kevinaj_rss_button.png" /></a></p>
 </div>
 
-<div id="the-crudfactory-news">
+<div class="the-crudfactory-news">
 ${c.news|n}
 </div>