Booki Blog

So last week we finished the Freedom Fone Book Sprint. Olaf, Laleh and Lynne were there working on design and tech implementation of design. Working together they pushed the current booki css a bit further to do some cool stuff. you can see the results here:

http://objavi.booki.cc/books/freedomfone-en-2011.12.05-10.50.21.pdf

note the use of images for section breaks.

Section 1 header for Freedom Fone book. Achieved with CSS.

This can be achieved by css like this:

#section-1 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/01_whatisff.png) no-repeat  center center;
}

the entire css is included below for your hackery resuse and inspiration

@font-face{
 src: url("http://www.freedomfone.org/booki/AllumiPtf-Bold.otf");
 font-family:AllumiPtf;
}
body {
 font-family: "fontin sans";
 background: #fff;
 color: #000;
 font-size:12pt;
} 

.objavi-chapter{
 color: #000;
 display:none;
} 

a {
 text-decoration:none;
 color:#000;
} 

h1 .initial{
 color: #000;
 display:none;
} 

ol#InsertNote_NoteList{
page-break-before:always;
font-size:8pt;
} 

.objavi-subsection{
 display: block;
 page-break-before: always;
} 

body .objavi-subsection:first-child{
 page-break-before: avoid;
} 

.objavi-subsection .initial {
 color: #000;
 display:none;
} 

.objavi-subsection-heading {
 font-size: 20pt;
 text-align: center;
 line-height: 300px;
 font-weight: normal;
} 

h1 {
 page-break-before: always;
 font-weight:normal;
 margin-top:10px
} 

h2 {
 margin-bottom:-10pt;
 font-weight:normal;
 font-size:15pt;
} 

h3 {
 margin-bottom:-10pt;
 font-weight:normal;
 font-size:12pt;
 font-style:italic;
} 

table {
 float: none;
} 

h1.frontpage{
 page-break-after:always;
 margin-top:70%;
 font-size: 20pt;
 text-align: center;
 page-break-before: avoid;
 max-width: 700pt;
 font-weight: normal;
} 

div.copyright{
 padding: 1em;
}
/* TOC ******************************/
table {
 float: none;
} 

table.toc {
 font-size: 1.1em;
 width: 95%;
} 

table.toc td{
 vertical-align:top
 padding-left: 0.5em;
} 

td.chapter {
 padding: 0 0.5em;
 text-align: right;
} 

table.toc td.pagenumber {
 text-align: right;
 vertical-align:bottom;
} 

td.section {
 padding-top: 1.1em;
 font-weight: bold;
}
/* End TOC **************************/ 

p, ul, ol {
 page-break-inside: avoid;
} 

pre, code, tt {
} 

pre {
 max-width:700px;
 overflow: hidden;
} 

img {
 max-width: 500px;
 height: auto;
} 

.objavi-no-page-break {
 page-break-inside: avoid;
} 

.unseen{
 z-index: -66;
 margin-left: -1000pt;
} 

body{
 font-size:12pt;
 color:#000;
 font-family:"Fontin Sans";
 line-height:16pt;
}
sup{
 vertical-align:text-top;
 font-size:0.7em;
}
a{
 color:#000 !important;
 text-decoration:none
} 

h1, h2, h3{
 color:#666;
 margin:0;
 padding:0;
 font-weight:normal !important;
 text-decoration:none !important;
 line-height:normal;
 font-family:AllumiPtf !important;
 text-transform:uppercase; 

}
h1{
 font-size:24.3pt;
}
h1+p{
 padding-top:20pt;
 margin-top:0;
}
h2{
 font-size:14pt;
 padding-top:20pt;
}
h2+p{
 padding-top:10pt;
}
h3{
 font-size:9pt;
 padding-bottom:5pt;
}
h3+p{
 margin-top:0;
}
p+h3{
 padding-top:10pt;
}
ul{
 list-style-image:url(http://www.freedomfone.org/booki/images/bullet.png);
 list-style-position:outside;
 margin-left:-25px;
}
ol{
 margin-left:-25px;
}
li{
 padding-left:5.5mm;
}
.starred{
 padding-left:50px;
 background-image:url(http://www.freedomfone.org/booki/images/star.png);
 background-repeat:no-repeat;
 background-position:center left;
 font-weight:bold;
 min-height:40px;
}
.speechBox{
 padding:5mm;
 padding-top:0;
 background:#ebebeb  url(http://www.freedomfone.org/booki/images/boxBottom.png) no-repeat  bottom right;
 padding-bottom:60px;
 margin-bottom:-55px;
}
.breakPage{
 page-break-before:always;
}
.speechBox:before{
 background:#ebebeb  url(http://www.freedomfone.org/booki/images/boxTop.png) no-repeat top left;
 height:44px;
 content:" ";
 display:block;
 margin:-5mm;
 margin-bottom:5mm;
}
.objavi-subsection-heading{
 height:860px;
 font-size:0px;
 display:block;
}
#section-1 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/01_whatisff.png) no-repeat  center center;
}
#section-2 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/02_realworld.png) no-repeat  center center;
}
#section-3 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/03_scenarios.png) no-repeat  center center;
}
#section-4 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/04_creatingservice.png)  no-repeat center center;
}
#section-5 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/05_settingup.png) no-repeat  center center;
}
#section-6 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/06_techstuff.png) no-repeat  center center;
}
#section-7 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/07_gettinghelp.png)  no-repeat center center;
}
#section-8 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/08_troubleshooting.png)  no-repeat center center;
}
#section-9 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/09_appendices.png) no-repeat  center center;
}
#section-10 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/10_notes.png) no-repeat  center center;
}
.page{
 font-size:15pt;
 color:#666;
 font-weight:bold; 

}

This entry was posted on Monday, December 5th, 2011 at 11:13 am and is filed under CSS & Books. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.