[FM Discuss] pushing the css

Mon Dec 5 03:01:11 PST 2011

hey Fmers

so last week we finished the freedomfone booksprint. Olaf, Laleh and 
Lynne were there working on design and tech implementation of design. 
all 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. 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

adam

@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;

}

-- 

--
Adam Hyde
Founder, FLOSS Manuals
Project Manager, Booki
Book Sprint Facilitator
mobile :+ 49 177 4935122
identi.ca : @eset
booki.flossmanuals.net : @adam

http://www.flossmanuals.net
http://www.booki.cc
http://www.booksprints.net