Feel Good, Do Good series

work in progress
April 2026

Note: Rachel tends to do the backgrounds a single psd images so you basically have to open each page in turn and remove or export layers in order to produce linkable images.

Files

sidebar images:

quote-bubble.png
quote-paper-png
quote-postit.png
trying.png
people.png
notepaper.png

Individual Sections html

Title Page

        <section epub:type="titlepage">
            <figure class="title">
                <img alt="Logo: Orca Feel Good, Do Good" src="image/orca_feelgood_logo.png"/>
            </figure>
            <h1 class="titlepage"><span aria-label="i" id="pagei" role="doc-pagebreak" epub:type="pagebreak"/>TITLE</h1>

            <h2 class="subtitle">THIS_IS_THE_SUBTITLE</h2>
            <h2 class="author">AUTHOR</h2>
            <h2 class="illustrator"><span class="by">Illustrated by</span> ILLUSTRATOR</h2>
            <figure class="small">
                <img alt="" role="presentation" class="float" src="image/BeKind-PG-00A-TITLEPAGE-LAYERS.png"/>
            </figure>
            <figure class="title">
                <img alt="Orca Book Publishers" src="image/orca_book_publishers.png"/>
            </figure>
        </section>

<li class="toc-1">
<figure class="icon">
    <img alt="1" class="float" src="image/NUMBER.png"/>
</figure>
    <a href="chapter-01.xhtml#_idParaDest-3">CHAPTER_TITLE: <span class="sub">SUBTITLE/span></a>

Chapter Heads

<figure class="icon">
    <img alt="1" class="float" src="image/NUMBER.png"/>
</figure>
<h1 class="ch_1 chapter-title" id="_idParaDest-3"><span aria-label="3" epub:type="pagebreak" id="page3" role="doc-pagebreak"/>CHAPTER_TITLE <span class="subtitle">SUBTITLE</span></h1>

Fonts

@font-face{
    font-family: colby;
    font-style: normal;
    font-weight: bold;
    src: url("../font/Colby-CdBlk.otf");
}

@font-face{
    font-family: mohr;
    font-style: normal;
    font-weight: normal;
    src: url("../font/MohrRoundedAltMedium.otf");
}

@font-face{
    font-family: mohr;
    font-style: normal;
    font-weight: bold;
    src: url("../font/MohrRoundedAltBold.otf");
}

@font-face{
    font-family: soundbubble;
    font-style: normal;
    font-weight: normal;
    src: url("../font/SoundBubble-Regular.otf");
}

CSS

/* Headings */

h1.front-back{
    color: #2D2857;
    font-family: soundbubble, sans-serif;
    text-align: center;
    text-transform: uppercase;
}

h1.intro{
    color: #B9367B;
    font-family: soundbubble, sans-serif;
    font-size: 3em;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.4;
    margin: 10% 0 1em;
    text-align: center;
    text-transform: uppercase;
}

h1.chapter-title{
    font-family: soundbubble, sans-serif;
    font-size: 2.5rem;
    font-weight: normal;
    line-height: 0.9;
    margin: 0 0 .5em;
    text-transform: uppercase;
}

h1.chapter-title span.subtitle{
    color: #000;
    display: block;
    font-family: colby, sans-serif;
    font-size: .8em;
    font-weight: normal;
    line-height: 1.2;
    margin: 0 0 .5em;
    text-transform: initial;
}

h2.subhead{
    font-family: colby, sans-serif;
    text-transform: uppercase;
}

h2.resources{
    font-family: mohr, sans-serif;
    font-size: 1em;
    font-weight: bold;
    margin: 1em 0 0 0;
    text-align: left;
}

/* Title Page */
h1.titlepage{
    color: #207851;
    font-family: colby, sans-serif;
    font-size: 5em;
    font-weight: bold;
    text-transform: uppercase;
}

span.subtitle,
h2.subtitle{
    color: #3F5B94;
    font-family: mohr, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
}

h2.author{
    font-family: mohr, sans-serif;
    font-size: 1.5em;
    font-style: normal;
    font-weight: bold;
    line-height: 1.175;
    margin: 1em 0;
    text-align: center;
    text-indent: 0;
    text-transform: initial;
}

h2.translator,
h2.illustrator{
    font-family: mohr, sans-serif;
    font-weight: bold;
    line-height: 1.2;
    margin: 1em 0 2em;
    text-align: center;
    text-indent: 0;
    text-transform: initial;
}

span.by{
    font-weight: normal;
}

/* Dedication */
section.dedication{
    border-bottom: 3px dotted #c43360;
    margin: 2em 2em 2em;
    padding-bottom: 1em;
}

p.dedication{
    font-family: sans-serif;
    font-size: .9em;
    font-style: normal;
    margin: 0 2em;
}

span.initials{
    font-family: mohr, serif;
    color: #c43360;
    font-size: 1.2em;
    font-weight: bold;
}


/* Contents */

ol.toc{
    padding: 0;
}

li.toc-fb{
    text-transform: initial;
}

li.toc-1{
    font-family: mohr, sans-serif !important;
    margin: 1em 0 0;
}

li.toc-1 a{
    font-weight: bold  !important;
}

span.sub{
    text-transform: initial;
}

li.toc-2{
    text-indent: 0;
    text-transform: initial;
}

.toc-1 .icon{
    width: 3rem;
    display: block;
}

ol.toc .sb{
    margin-top: 1.5em !important;
}


/* Resources */

h2.resources{
    font-family: mohr, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: initial;
}


/* About the Author */

section.author{
    background: none;
    border-top: #54367F dotted 4px;
    margin-top: 1.5em !important;
    padding-top: 1.5em;
}

section.author p{
    margin-bottom: .5em;
}

span.author-name{
    color: #54367F;
    font-family: mohr, sans-serif;
    font-size: 1.1em;
    line-height: 1;
    font-weight: bold;
}


/* Ad Page */

h1.ad{
    color: #54367F;
    font-family: soundbubble, sans-serif;
    font-size: 2.583em;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.2;
    margin: 10% 0 .5em;
    text-align: center;
}

span.adbreak{
    display: block;
    color: #D4402A;
}


/* Asides */

aside.quote{
    background: url("../image/quote-bubble.png") no-repeat;
    background-position: top center;
    background-size: contain;
    clear: both;
    width: 50%;
    padding: 2em 1em 3em;
    transform: rotate(-3deg);
}

aside.quote-1{
    background: url("../image/quote-paper.png") no-repeat;
    background-position: top center;
    background-size: contain;
    clear: both;
    width: 50%;
    padding: 2em 1em 2em;
    transform: rotate(-3deg);
}

aside.quote-2{
    background: url("../image/quote-postit.png") no-repeat;
    background-position: top center;
    background-size: contain;
    clear: both;
    width: 50%;
    padding: 2em 1em 2em;
    transform: rotate(-3deg);
}

p.quote{
    color: #000;
    font-family: mohr, sans-serif;
    font-size: 0.75em;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
    text-align: center;
    text-indent: 0;
}

p.quote-source{
    font-family: sans-serif;
    font-size: 0.75em;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.5;
    margin: .5em 0 0;
    text-align: center;
    text-indent: 0;
}

aside.activity{
    background: url("../image/notepaper.png") no-repeat;
    background-position: top center;
    background-size: contain; 
    clear: both;
    width: 80%;
    padding: 3em 1em 2.5em;
    transform: rotate(2deg);
}

h2.activity,
h2.people{
    font-family: mohr, sans-serif;
    font-size: 1em;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 1em;
    margin: 0 0 .25em;
    padding: .5em 1em .5em;
    text-align: center;
}

aside.people{
    background: #00505b;
    border-radius: 15px;
    color: #ffffff;
    width: 85%;
}

aside.people h2{
    background: url("../image/people.png") no-repeat;
    background-position: top center;
    background-size: 100%;
    padding-top: 6em;
}

aside.try{
    background: #F8DBE2;
    border: 8px solid #566BA3;
    border-radius: 15px;
    clear: both;
    width: 70%;
    padding: 1em 1em 2em;
}

aside.try h2.activity{
    color: #00000;
    background: url("../image/tryit.png") no-repeat;
    background-position: top left;
    background-size: 8em;
    font-family: mohr, sans-serif;
    font-size: 1em;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 1em;
    margin: 0 0 .25em;
    padding: 3em 1em 0;
    text-align: center;
}


/* Misc. */

p.center.sidebar{
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    text-indent:0;
}

p.center.sidebar span{
    border-radius: 500px;
    padding: 1em 2em;
}

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search