Fix some defects of lfs book formatting

- have title of section stay visible when scrolling
- when clicking on an internal link, make it fully visible instead of
  hidden behind the header
This commit is contained in:
Pierre Labastie 2024-01-26 14:53:30 +01:00
parent ea93c117f2
commit 44850bb9f2
2 changed files with 130 additions and 38 deletions

View File

@ -1,13 +1,13 @@
/* Global settings */ /* Global settings */
body { body {
font-family: verdana, tahoma, helvetica, arial, sans-serif; font-family: verdana, tahoma, arial, sans-serif;
text-align: left; text-align: left;
background: #fff; background: #fff;
color: #222; color: #222;
margin: 1em; margin: 1em;
padding: 0; padding: 0;
font-size: 1em; font-size: 1em;
line-height: 1.2em line-height: 1.2em;
} }
@ -38,10 +38,36 @@ div.dedication {
padding-left: 1em; padding-left: 1em;
} }
/* Section titles */
h1.sect1, h1.preface, h1.part, h1.chapter, h1.appendix, .glossary h1, .index h1
{
background: #f5f6f7;
border-bottom: .1em solid #dbddec;
margin-bottom:1em;
margin-top: 0;
padding: .4em;
}
/* Sections */ /* Scrolling parts
div.sect1, div.appendix { The header is taller for sect1 and chapter pages than on the
padding-left: .3em; other pages. Since we want fixed boxes, their top has to be calculated
by trial and errors to fit below the static header box.*/
div.sect1, div.chapter, div.appendix, div.wrap {
top: 11.55em;
}
div.preface, div.part, .index div.index {
top: 10.15em;
}
div.sect1, div.appendix, div.preface, div.part, div.chapter, div.wrap, .index div.index {
/* padding-left: .3em;*/
overflow:auto;
height: auto;
position: fixed;
left:1em;
right:1em;
bottom: 1em;
border-bottom: 1em solid #dbddec;
} }
div.important ul { div.important ul {
@ -63,8 +89,12 @@ div.important ul li p {
background: #f5f6f7; background: #f5f6f7;
border-bottom: 0.2em solid #dbddec; border-bottom: 0.2em solid #dbddec;
padding-top: .1em; padding-top: .1em;
margin-top: 0; /* margin-top: 0;*/
} }
/*
.lfs .package p:first-child {
margin-top: 0;
}*/
.lfs .configuration { .lfs .configuration {
background: #fefefe; background: #fefefe;
@ -74,11 +104,11 @@ div.important ul li p {
.lfs .content { .lfs .content {
background: #f5f6f7; background: #f5f6f7;
border-top: 0.2em solid #dbddec; border-top: 0.2em solid #dbddec;
border-bottom: 0.2em solid #dbddec;
padding-bottom: .1em; padding-bottom: .1em;
margin-bottom: 0; margin-bottom: .5em;
} }
/* Headers */ /* Headers */
h1, h2, h3, h4, h5, h6, b, .strong { h1, h2, h3, h4, h5, h6, b, .strong {
color: #000; color: #000;
@ -96,18 +126,6 @@ h1 {
padding: 0.4em; padding: 0.4em;
} }
.preface h1, .part h1, .chapter h1, .appendix h1, .index h1, .sect1 h1, .glossary h1 {
background: #f5f6f7;
border-bottom: .1em solid #dbddec;
margin-bottom: 1em;
margin-top: 0;
padding: .4em;
}
.sect1 h1, .appendix h1 {
margin-left: -.2em;
}
.wrap h1 { .wrap h1 {
background: #f5f6f7; background: #f5f6f7;
margin: 0; margin: 0;
@ -157,13 +175,19 @@ div.navheader, div.navfooter {
} }
div.navheader { div.navheader {
border-bottom: 1px solid #dbddec; border-bottom: .1em solid #dbddec;
position: sticky;
top: 0;
} }
/* no need for a footer now that the header is always visible */
div.navfooter { div.navfooter {
border-top: 1px solid #dbddec; display:none;
}
/* Except for the first page (TOC), where the bottom is the only
place where navigation is displayed. */
div.book + div.navfooter {
display:block
} }
div.navheader h4 { div.navheader h4 {
@ -179,7 +203,7 @@ div.navheader h3 {
} }
div.navheader ul, div.navfooter ul { div.navheader ul, div.navfooter ul {
padding: .2em .5em .5em 0; padding: .2em .5em .5em .5em; /*top right bottom left*/
margin: .5em 0; margin: .5em 0;
position: relative; position: relative;
background: #dbddec; background: #dbddec;
@ -196,29 +220,29 @@ div.navheader ul li.prev, div.navfooter ul li.prev {
left: 0; left: 0;
text-align: left; text-align: left;
padding: 0.2em 1em; padding: 0.2em 1em;
margin-left: 6px; margin-left: .4em;
} }
div.navheader ul li.next, div.navfooter ul li.next { div.navheader ul li.next, div.navfooter ul li.next {
position: absolute; position: absolute;
display: block; display: block;
text-align: right; text-align: right;
right: 5px; right: 0;
padding: 0.2em 0.5em; padding: 0.2em 1em;
margin-right: 7px; margin-right: .4em;
} }
div.navheader ul li.prev p, div.navfooter ul li.prev p, div.navheader ul li.prev p, div.navfooter ul li.prev p,
div.navheader ul li.next p, div.navfooter ul li.next p { div.navheader ul li.next p, div.navfooter ul li.next p {
padding: 0; padding: 0;
margin: 1px 0px; margin: .1em 0;
} }
div.navheader ul li.home, div.navheader ul li.up, div.navheader ul li.home, div.navheader ul li.up,
div.navfooter ul li.home, div.navfooter ul li.up { div.navfooter ul li.home, div.navfooter ul li.up {
text-align: center; text-align: center;
padding: 0; padding: 0;
margin: 0px auto; margin: 0 auto;
display: block; display: block;
color: #dbddec; color: #dbddec;
} }

View File

@ -11,10 +11,14 @@
<xsl:param name="chunk.first.sections" select="1"/> <xsl:param name="chunk.first.sections" select="1"/>
<!-- preface: <!-- preface:
Output non sect1 child elements before the TOC --> Output non sect1 child elements before the TOC
Output title outside of the <div> because we want to be able to
use it at a fixed position -->
<!-- The original template is in {docbook-xsl}/xhtml/components.xsl --> <!-- The original template is in {docbook-xsl}/xhtml/components.xsl -->
<xsl:template match="preface"> <xsl:template match="preface">
<xsl:call-template name="id.warning"/> <xsl:call-template name="id.warning"/>
<xsl:call-template name="preface.titlepage"/>
<xsl:call-template name="component.separator"/>
<div> <div>
<xsl:apply-templates select="." mode="class.attribute"/> <xsl:apply-templates select="." mode="class.attribute"/>
<xsl:call-template name="dir"> <xsl:call-template name="dir">
@ -26,8 +30,6 @@
<xsl:call-template name="object.id"/> <xsl:call-template name="object.id"/>
</xsl:attribute> </xsl:attribute>
</xsl:if> </xsl:if>
<xsl:call-template name="component.separator"/>
<xsl:call-template name="preface.titlepage"/>
<xsl:apply-templates/> <xsl:apply-templates/>
<xsl:variable name="toc.params"> <xsl:variable name="toc.params">
<xsl:call-template name="find.path.params"> <xsl:call-template name="find.path.params">
@ -44,11 +46,42 @@
</div> </div>
</xsl:template> </xsl:template>
<!-- part:
Output non sect1 child elements before the TOC
Output title outside of the <div> because we want to be able to
use it at a fixed position -->
<!-- The original template is in {docbook-xsl}/xhtml/divisions.xsl -->
<xsl:template match="part">
<xsl:call-template name="id.warning"/>
<xsl:call-template name="part.titlepage"/>
<div>
<xsl:apply-templates select="." mode="common.html.attributes"/>
<xsl:call-template name="id.attribute">
<xsl:with-param name="conditional" select="0"/>
</xsl:call-template>
<xsl:apply-templates/>
<xsl:variable name="toc.params">
<xsl:call-template name="find.path.params">
<xsl:with-param name="table" select="normalize-space($generate.toc)"/>
</xsl:call-template>
</xsl:variable>
<xsl:if test="not(partintro) and contains($toc.params, 'toc')">
<xsl:call-template name="division.toc"/>
</xsl:if>
</div>
</xsl:template>
<!-- chapter: <!-- chapter:
Output non sect1 child elements before the TOC --> Output non sect1 child elements before the TOC
Output title before div to be able to fix the title position -->
<!-- The original template is in {docbook-xsl}/xhtml/components.xsl --> <!-- The original template is in {docbook-xsl}/xhtml/components.xsl -->
<xsl:template match="chapter"> <xsl:template match="chapter">
<xsl:call-template name="id.warning"/> <xsl:call-template name="id.warning"/>
<xsl:call-template name="chapter.titlepage"/>
<xsl:call-template name="component.separator"/>
<div> <div>
<xsl:apply-templates select="." mode="class.attribute"/> <xsl:apply-templates select="." mode="class.attribute"/>
<xsl:call-template name="dir"> <xsl:call-template name="dir">
@ -60,8 +93,6 @@
<xsl:call-template name="object.id"/> <xsl:call-template name="object.id"/>
</xsl:attribute> </xsl:attribute>
</xsl:if> </xsl:if>
<xsl:call-template name="component.separator"/>
<xsl:call-template name="chapter.titlepage"/>
<xsl:apply-templates/> <xsl:apply-templates/>
<xsl:variable name="toc.params"> <xsl:variable name="toc.params">
<xsl:call-template name="find.path.params"> <xsl:call-template name="find.path.params">
@ -78,12 +109,50 @@
</div> </div>
</xsl:template> </xsl:template>
<!-- appendix:
Output non sect1 child elements before the TOC
Output title before div to be able to fix the title position -->
<!-- The original template is in {docbook-xsl}/xhtml/components.xsl -->
<xsl:template match="appendix">
<xsl:call-template name="id.warning"/>
<xsl:call-template name="appendix.titlepage"/>
<xsl:element name="div" namespace="http://www.w3.org/1999/xhtml">
<xsl:call-template name="common.html.attributes">
<xsl:with-param name="inherit" select="1"/>
</xsl:call-template>
<xsl:call-template name="id.attribute">
<xsl:with-param name="conditional" select="0"/>
</xsl:call-template>
<xsl:apply-templates/>
<xsl:variable name="toc.params">
<xsl:call-template name="find.path.params">
<xsl:with-param name="table" select="normalize-space($generate.toc)"/>
</xsl:call-template>
</xsl:variable>
<xsl:if test="contains($toc.params, 'toc')">
<xsl:call-template name="component.toc">
<xsl:with-param name="toc.title.p" select="contains($toc.params, 'title')"/>
</xsl:call-template>
</xsl:if>
</xsl:element>
</xsl:template>
<!-- sect1: <!-- sect1:
When there is a role attibute, use it as the class value. When there is a role attibute, use it as the class value.
Process the SVN keywords found in sect1info as a footnote. Process the SVN keywords found in sect1info as a footnote.
Output title before the containing <div> so that the title
can be at a fixed position.
Removed unused code. --> Removed unused code. -->
<!-- The original template is in {docbook-xsl}/xhtml/sections.xsl --> <!-- The original template is in {docbook-xsl}/xhtml/sections.xsl -->
<xsl:template match="sect1"> <xsl:template match="sect1">
<xsl:call-template name="sect1.titlepage"/>
<div> <div>
<xsl:choose> <xsl:choose>
<xsl:when test="@role"> <xsl:when test="@role">
@ -96,7 +165,6 @@
</xsl:otherwise> </xsl:otherwise>
</xsl:choose> </xsl:choose>
<xsl:call-template name="language.attribute"/> <xsl:call-template name="language.attribute"/>
<xsl:call-template name="sect1.titlepage"/>
<xsl:apply-templates/> <xsl:apply-templates/>
<xsl:apply-templates select="sect1info" mode="svn-keys"/> <xsl:apply-templates select="sect1info" mode="svn-keys"/>
</div> </div>