/* PRACTICALSERIES (c) 2021 ******************************************************************************* Title : PRACTICAL SERIES AUTOMATION LIBRARY (PAL) STYLE-PAL.CSS ******************************************************************************* PRACTICALSERIES: Practical Series of Publications by Michael Gledhill Published in the United Kingdom Email: mg@practicalseries.com Web: www.practicalseries.com ------------------------------------------------------------------------------- DETAILS This is an additional style sheet for the PAL documentation, it provides additional styles for: Cover features (titles & picture) Revision data Header title bar Side TOC bar Previous and next section dynamic navigation bar The style sheet also contains responsive formatting for each of the areas (responsive settings are at the end of each section). This is one of a set of style sheets associated with the website, a full list of style sheets and the order in which they should be called is given here: ps-fonts.css - web fonts for the site tia-fonts.css - Siemens TIA Portal web fonts for the site ionicons.min.css - Social media font icons normalise.css - standardises the rendering of the site on different browsers prettify.css - styles associated with Google Prettify (called by script) this is called automatically by the run_prettify.js file lightbox.css - styles associated with lightbox2 viewer grid.css - defines a responsive grid (Kerstner grid) for columns within the website style.css - this file codelines.css - Optional, adds additional line styling to Google Prettify code fragments COLOURS IN USE Colour Usage Hex Code ----------------------+----------------------------------------+--------------- Page | Page colour outside 1276px boundary | #fbfaf6 Page edge | Border colour to page edge | #ededed Background | Overall background colour (white) | #fff Main text | main body text (v. dk gy) | #404030 sidebar text | Sidebar sans serif text (lt gy) | #686868 sidebar border | when collapsed (gy) | #cccccc sidebar background | when collapsed (lt gy) | #f8f8f8 Table border | Outline for all tables | #cccccc table background | Incidental, code 7 formulae (lt gy) | #fbfbfb Navigation base | Navigation (link/visited) | #cccccc Navigation hover | Navigation (active/hover) | #686868 Navigation bkgrd | Navigation background (link/visited) | #fff Navigation bkgrd | Navigation background (active/hover) | #c8c8c8 TOC list | Contents list of entries (blue) | #4C6C9C Footer background | Footer area background (cream) | #fbfaf6 Footer navigation | Footer navigation & spacer text (blue) | #4c6c9c Footer nav highlight | Footer nav highlights (lighter blue) | #5b7daf Button background | Button light orange | #e67e22 Button hover | Button dark orange (hover) | #de7519 Text (red) | Red text highlight | #c0504d Untested link | Highlights untested links | #ff0000 ----------------------+----------------------------------------+--------------- git-cmd | Blue colour used for Git commands | #4F81BD git-background | Git command table background colour | #404030 ----------------------+----------------------------------------+--------------- Build Badge colours | PS colour match - red | #BF504D | PS colour match - bright red (WIP) | #E60D18 | PS colour match - orange | #F79545 | PS colour match - green | #9DBB61 | PS colour match - bright green | #50CA22 | PS colour match - turquoise | #4BABC5 | PS colour match - blue | #4F81BC | PS colour match - violet | #AB99C0 | PS colour match - grey | #3F3F30 ------------------------------------------------------------------------------- MODIFICATION HISTORY: This is a complete summary of all software modifications. Date Issue Author Reason for Modification ------------------------------------------------------------------------------- 14 Feb 2021 000.102 M. Gledhill .pal-headline-ps top margin adjusted large title now lines up with side logo 10 Feb 2021 000.101 M. Gledhill Development release for site build Revision control active 08 Feb 2021 000.000 M. Gledhill Established for PAL 05 Feb 2021 D00.04 M. Gledhill TOC level for SMDS sytling name changed: toc-levX-num/text renamed toc-levX-numpal/textpal to avoid overloading style.css 04 Jun 2018 D00.03 M. Gledhill Tables (various) added 03 Jun 2018 D00.02 M. Gledhill Side TOC adjusted for responsiveness 20 Sep 2018 D00.01 M. Gledhill File created ---------------------------------------------------------------------------- */ /* **************************************************************************** REVISION **************************************************************************** */ #rev-style-pal:after { content: "000.102"; } /* **************************************************************************** PAL LOGO & HEADLINE TITLES **************************************************************************** On the site Home page, the navigation & title bars are missing, and a cover image and titles are inserted in their place. This is the first area a visitor to the site sees. ************************************************************************* */ .pal-title-row { /* container for whole row */ z-index: 1; } .pal-headline { font-family: "conc-c8-r"; font-feature-settings: "ss02"; color: #1F2D41; font-size: 150%; } .pal-headline h1 { /* format h1 - MAIN TITLE */ font-family: "conc-c2-r"; font-feature-settings: "ss02"; font-size: 107.5%; margin-top: 0.85rem; } .pal-headline-ps { margin-top: 2.8rem; margin-bottom: 1rem; transform: scaleY(1.36)} .pal-headline-logo { max-width: 90%; } .pal-overline-index{ /* optional break line above sub-title */ margin-top: 1rem; margin-bottom: 0.5rem; border-top: 2px solid #404030; } .pal-overline{ /* optional break line above sub-title */ margin-top: 5rem; margin-bottom: 0.5rem; border-top: 2px solid #404030; } .pal-blk-add { /* container for large number */ display: inline-block; float: left; /* width: 45%;*/ text-align: left; font-family: "conc-t3-r"; font-feature-settings: "ss02"; font-size: 200%; color: #404030; } .pal-blk-sym { /* container for heading text */ display: inline-block; float: left; /* width: 55%;*/ text-align: left; font-family: "conc-t3-r"; font-feature-settings: "ss02"; font-size: 95%; color: #404030; margin-top: 0.3rem; padding-left: 0.3rem; } .pal-blk-family { /* container for large number */ margin-top: 1.4rem; text-align: left; text-transform: uppercase; font-family: "conc-t4-r"; font-feature-settings: "ss02"; font-size: 100%; color: #404030; } .pal-blk-title { /* container for heading text */ text-align: left; font-family: "conc-c4-r"; font-feature-settings: "ss02"; font-size: 73%; color: #404030; margin-top: 0.4rem; margin-bottom: 1.6rem; } .pal-blk-auth { /* container for large number */ display: inline-block; float: left; width: 50%; text-align: left; font-family: "conc-c3-r"; font-feature-settings: "ss02"; font-size: 67%; color: #404030; } .pal-blk-ver-txt { /* container for large number */ display: inline-block; float: left; width: 35%; text-align: right; font-family: "conc-c3-r"; font-feature-settings: "ss02"; font-size: 67%; color: #404030; } .pal-blk-ver-rd { /* container for large number */ display: inline-block; float: left; background-image: linear-gradient(#C0504D, #953735); border-radius: 1rem; text-shadow: 0px 2px #632523; width: 12%; text-align: center; font-family: "conc-t4-r"; font-feature-settings: "ss02"; font-size: 55%; color: #fff; margin-top: 0.2rem; } /* ---------------------------------------------------------------------------- HEADLINE TITLES - RESPONSIVE COMPONENTS ---------------------------------------------------------------------------- The title and heading text is resized as the screen narrows; this is done to maintain the proportionality of the large number to the smaller heading text, this stops at 960px, at this point the base changes to the font-size take over, and no further manipulation is required. Below 5200px, the columns collapse and the double column elements are resized to maintain the correct proportions. ------------------------------------------------------------------------- */ @media all {.pal-headline, pal-titl { font-size: 150%; }} @media all and (max-width:1290px) {.pal-headline { font-size: 144%; }} @media all and (max-width:1240px) {.pal-headline { font-size: 140%; }} @media all and (max-width:1200px) {.pal-headline { font-size: 135%; }} @media all and (max-width:1160px) {.pal-headline { font-size: 130%; }} @media all and (max-width:1120px) {.pal-headline { font-size: 125%; }} @media all and (max-width:1080px) {.pal-headline { font-size: 121%; }} @media all and (max-width:1040px) {.pal-headline { font-size: 116%; }} @media all and (max-width:1000px) {.pal-headline { font-size: 111%; }} @media all and (max-width:960px) {.pal-headline { font-size: 111%; }} @media all and (max-width:920px) {.pal-headline { font-size: 111%; }} @media all and (max-width:880px) {.pal-headline { font-size: 111%; }} @media all and (max-width:840px) {.pal-headline { font-size: 111%; }} @media all and (max-width:800px) {.pal-headline { font-size: 111%; }} @media all and (max-width:760px) {.pal-headline { font-size: 111%; }} @media all and (max-width:720px) {.pal-headline { font-size: 111%; }} @media all and (max-width:680px) {.pal-headline { font-size: 110%; }} @media all and (max-width:640px) {.pal-headline { font-size: 110%; }} @media all and (max-width:600px) {.pal-headline { font-size: 110%; }} @media all and (max-width:560px) {.pal-headline { font-size: 109%; }} @media all and (max-width:520px) {.pal-headline { font-size: 150%; }} @media all and (max-width:520px) {.pal-blk-add { width: 34%; } .pal-blk-sym { width: 43%; }} @media all and (max-width:520px) {.pal-blk-auth { width: 40%; } .pal-blk-ver-txt { width: 23%; text-align: left;}} /* **************************************************************************** ASIDE IMAGE AND REVISION - OVERLOADING **************************************************************************** Overloads the properties in style.css to give the correct logo size and revision information location (top margin) ************************************************************************* */ .aside-right-rev { /* This overloads the same style in style.css */ margin-top: 0.2rem; padding-top:0rem; } .aside-left-rev img { width: 100%; margin-top: 0.5rem; } /* **************************************************************************** REVISION TABLE **************************************************************************** Holds page revision information ************************************************************************* */ .table-rev { font-family: "trip-t3-r"; font-feature-settings: "ss02"; color: #aaa; font-size: 0.4rem; line-height: 1.0; line-height: 140%; width: 100%; margin-bottom: -1rem; } .table-rev td { line-height: 130%; } .table-rev td:first-child { /* first-child is leading (min-height row) */ padding: 0; /* this has no margins, padding or border */ margin: 0; } @media all and (max-width:1276px){ .table-rev { display: none; } } /* **************************************************************************** CHAPTER TITLE **************************************************************************** The chapter title contains the chapter number and the heading text e.g. 2 Installing the software The number is large (the same size a two lines of the heading text) and appears at the left edge of the central column area and occupies 1/3 of the width of this column. The heading text can be up to two lines in length and fills the remaining 2/3 of the central column. The large number has class .chap-num-box The heading text has class .chap-text-box The heading text should also include the section number contained within a of class .chap-small-num. This .chap-small-num is not displayed until the screen width is less than 640px, at this point the large number is hidden and the small number displayed. The title row is equipped with left and right side columns (to maintain the correct column spacing), but these are not used. ************************************************************************* */ .chap-num-box { /* container for large number */ display: inline-block; float: left; width: 20%; text-align: left; font-family: "conc-t2-r"; font-feature-settings: "ss02"; font-size: 500%; color: #404030; } .chap-text-box { /* container for heading text */ display: inline-block; float: left; width: 80%; font-family: "conc-t3-r"; font-feature-settings: "ss02"; font-size: 190%; line-height: 110%; padding-top: 4.5%; color: #404030 } .chap-small-num { display: none; } /* span for small number /* ---------------------------------------------------------------------------- CHAPTER TITLE - RESPONSIVE COMPONENTS ---------------------------------------------------------------------------- The title large number and heading text is resized as the screen narrows; this is done to maintain the proportionality of the large number to the smaller heading text, this stops at 960px, at this point the base changes to the font-size take over, and no further manipulation is required. Below 640px, the large number is no longer displayed and the smaller version of the number (in the heading text area) is made visible ------------------------------------------------------------------------- */ @media all {.chap-num-box { font-size: 500%; } .chap-text-box { font-size: 190%; }} @media all and (max-width:1276px) {.chap-num-box { font-size: 500%; } .chap-text-box { font-size: 190%; }} @media all and (max-width:1240px) {.chap-num-box { font-size: 488%; } .chap-text-box { font-size: 185%; }} @media all and (max-width:1200px) {.chap-num-box { font-size: 470%; } .chap-text-box { font-size: 179%; }} @media all and (max-width:1160px) {.chap-num-box { font-size: 452%; } .chap-text-box { font-size: 172%; }} @media all and (max-width:1120px) {.chap-num-box { font-size: 438%; } .chap-text-box { font-size: 167%; }} @media all and (max-width:1080px) {.chap-num-box { font-size: 420%; } .chap-text-box { font-size: 160%; }} @media all and (max-width:1040px) {.chap-num-box { font-size: 406%; } .chap-text-box { font-size: 154%; }} @media all and (max-width:1000px) {.chap-num-box { font-size: 390%; } .chap-text-box { font-size: 148%; }} @media all and (max-width:960px) {.chap-num-box { font-size: 395%; } .chap-text-box { font-size: 150%; }} @media all and (max-width:920px) {.chap-num-box { font-size: 395%; } .chap-text-box { font-size: 150%; }} @media all and (max-width:880px) {.chap-num-box { font-size: 395%; } .chap-text-box { font-size: 150%; }} @media all and (max-width:840px) {.chap-num-box { font-size: 395%; } .chap-text-box { font-size: 150%; }} @media all and (max-width:800px) {.chap-num-box { font-size: 395%; } .chap-text-box { font-size: 150%; }} @media all and (max-width:760px) {.chap-num-box { font-size: 395%; } .chap-text-box { font-size: 150%; }} @media all and (max-width:720px) {.chap-num-box { font-size: 395%; } .chap-text-box { font-size: 150%; }} @media all and (max-width:680px) {.chap-num-box { font-size: 395%; } .chap-text-box { font-size: 150%; }} @media all and (max-width:640px){ .chap-num-box { display: none; } .chap-text-box { width: 100%; } .chap-small-num { visibility: visible; display:inline-block; float:left; margin-right: 2%;} } /* **************************************************************************** TABLES - INCIDENTAL (EN PASSANT) AND CLEAN OVERLOADING **************************************************************************** These are used to hold the ABSTRACT entry. The ABSTRACT often has bullet points, the software below replaces the large bullet point used in unnumbered lists with a smaller one. ************************************************************************* */ .table-clean .list-no-num { /* TEXT STYLE - Un-numbered list */ margin-left: 2rem; } .table-clean .list-no-num li p { padding-left: 0rem; } .table-clean li:before { /* prefix the list with a large dot and */ content: "\25aa"; float: left; /* force the margin to the correct position */ margin-left: -1rem; } /* **************************************************************************** TABLES - ABSTRACT **************************************************************************** Incidental tables hold additional information (in a similar way to an aside) but span the central content area and can contain more information than an aside. The table spans 84% of the content area, is lightly shaded and uses small caps for the heading. ************************************************************************* */ .table-abs { width: 100%; margin: 0 auto; border-collapse: collapse; margin-bottom: 1rem; font-family: "conc-t3-r"; font-feature-settings: "ss02"; font-size: 0.8em; background-color: #fbfbfb; } .table-abs th { font-family: "conc-c3-r"; font-feature-settings: "ss02"; font-size: 0.7rem; padding: 0.5rem 0.2rem 0.5rem 0.2rem; /* top padding to separate from prev text */ border-top: 1px solid #cccccc; } .table-abs td { padding: 0.25rem 0.2rem; line-height: 130%; } .table-abs em { font-family: "conc-t3-b"; font-feature-settings: "ss02"; font-style:normal; } .table-abs p { /* where formal paragraphs are used in a table, manipulate the margins */ margin-top: 0.3rem; margin-bottom: 0.8rem; } .table-abs p:last-child { margin-bottom: 0.3rem; } .table-abs li:before { /* prefix the list with a large dot and */ content: "\25aa"; float: left; /* force the margin to the correct position */ margin-left: -2rem; } /* **************************************************************************** TABLES - TECHNICAL SUMMARY **************************************************************************** The technical summary table use shading for the heading areas and a different font arrangement to other tables ************************************************************************* */ .table-tech { font-family: "conc-c3-r"; font-feature-settings: "ss02"; font-size: 0.7rem; width: 84%; margin: 0 auto; border-collapse: collapse; margin-bottom: 1rem; } .table-tech th { font-family: "conc-c3-r"; font-weight: normal; font-feature-settings: "ss02"; font-size: 0.75rem; color: #fff; background-color: #bfbfbf; padding: 0.2rem; /* *** PADDING TOP ADJUST GAP TO PREVIOUS PARA *** */ border-bottom: 1px solid #cccccc; } .table-tech td { line-height: 110%; border-bottom: 1px solid #cccccc; } .table-tech p { /* where formal paragraphs are used in a table, manipulate the margins */ margin-top: 0.3rem; margin-bottom: 0.8rem; } .table-tech p:last-child { margin-bottom: 0.3rem; } .table-tech em { font-family: "conc-t4-b"; font-feature-settings: "ss02"; font-style:normal; } .tech-title { color: #808080; } .tech-body { font-family: "conc-c3-r"; color: #446FBD; } /* **************************************************************************** TABLES - DATA STRUCTURE **************************************************************************** Table for holding data structure information, has a two line header ************************************************************************* */ .table-struc { font-family: "conc-t3-r"; font-feature-settings: "ss02"; font-size: 0.55rem; width:90%; margin: 0 auto; border-collapse: collapse; margin-bottom: 1rem; text-align: left; } .table-struc tr:first-child { /* Apply a top border to first row */ border-top: 1px solid #ccc; } .table-struc th { font-family: "conc-t2-r"; font-feature-settings: "ss02"; text-transform: uppercase; font-size: 0.55rem; letter-spacing: 0.086em; color: #7F7F7F; padding: 0rem 0.2rem 0.25rem 0.2rem; /* top padding to separate from prev text */ border-bottom: 1px solid #cccccc; } .table-struc td { padding: 0.25rem 0.2rem; line-height: 130%; border-bottom: 1px solid #cccccc; } .table-struc th:first-child { /* first-child is leading (min-height row) */ padding: 0; /* this has no margins, padding or border */ margin: 0; border-bottom: 1px solid #fff; } .table-struc td:first-child { /* first-child is leading (min-height row) */ padding: 0; /* this has no margins, padding or border */ margin: 0; border-bottom: 1px solid #fff; } .table-struc em { font-family: "conc-t3-b"; font-feature-settings: "ss02"; font-style:normal; } .struc-name { font-family: "trip-t4-r"; font-size: 0.65rem; color: #4F81BD; } .struc-title { font-family: "conc-t2-r"; font-weight: bold; font-feature-settings: "ss02"; text-transform: uppercase; font-size: 0.55rem; letter-spacing: 0.086em; color: #7F7F7F; text-align: left } /* **************************************************************************** TABLES - TAG TABLE **************************************************************************** Table for holding tag data ************************************************************************* */ .table-tag { font-family: "conc-t3-r"; font-feature-settings: "ss02"; font-size: 0.55rem; width:90%; margin: 0 auto; border-collapse: collapse; margin-bottom: 1rem; text-align: left; } .table-tag th { font-family: "conc-t2-r"; font-feature-settings: "ss02"; text-transform: uppercase; font-size: 0.55rem; letter-spacing: 0.086em; color: #7F7F7F; padding: 0rem 0.2rem 0.25rem 0.2rem; /* top padding to separate from prev text */ border-bottom: 1px solid #cccccc; } .table-tag td { padding: 0.25rem 0.2rem; line-height: 130%; border-bottom: 1px solid #cccccc; } .table-tag th:first-child { /* first-child is leading (min-height row) */ padding: 0; /* this has no margins, padding or border */ margin: 0; border-bottom: 1px solid #fff; } .table-tag td:first-child { /* first-child is leading (min-height row) */ padding: 0; /* this has no margins, padding or border */ margin: 0; border-bottom: 1px solid #fff; } .table-tag em { font-family: "conc-t3-b"; font-feature-settings: "ss02"; font-style:normal; } /* **************************************************************************** TABLES - SOFTWARE REVISION HISTORY ************************************************************************* */ .table-swrev { width: 100%; margin: 0 auto; border-collapse: collapse; margin-bottom: rem; margin-top: 2rem; font-family: "conc-t3-r"; font-feature-settings: "ss02"; font-size: 0.7rem; } .table-swrev th { font-family: "conc-c3-r"; font-weight: normal; font-feature-settings: "ss02"; color: #7F7F7F; padding: 0.8rem 0.2rem 0.25rem 0.2rem; /* top padding to separate from prev text */ border-bottom: 1px solid #cccccc; } .table-swrev td { padding: 0.25rem 0.2rem; line-height: 120%; border-bottom: 1px solid #cccccc; } .table-swrev th:first-child { /* first-child is leading (min-height row) */ padding: 0; /* this has no margins, padding or border */ margin: 0; } .table-swrev td:first-child { /* first-child is leading (min-height row) */ padding: 0; /* this has no margins, padding or border */ margin: 0; } .table-swrev p { /* where formal paragraphs are used in a table, manipulate the margins */ margin-top: 0.3rem; margin-bottom: 0.8rem; } .table-swrev p:last-child { margin-bottom: 0.3rem; } /* **************************************************************************** TABLES - ROW BACKGROUND COLOURING ************************************************************************* */ .table-blu {background-color: #DBE5F1} .table-grn {background-color: #EBF1DD} .table-red {background-color: #F2DCDB} /* **************************************************************************** FIGURE - BORDER OUTLINE FOR TIA CODE **************************************************************************** Defines a border arounda an image ************************************************************************* */ .fig-outline { padding: 24px; border: 2px solid #BFBFBF } /* **************************************************************************** CODE EXTRACT **************************************************************************** Code caption is left aligned ************************************************************************* */ .code-caption { /* code caption modifier */ text-align: left; } .code-header { /* code header (filename header) */ font-family: "conc-c3-r"; font-feature-settings: "ss02"; text-transform: none; } /* **************************************************************************** DYNAMIC NAVIGATION BAR **************************************************************************** The navigation bar has a link box on the far left for previous section and on the far right for next section, these change dynamically (with JavaScript) to point to the sections either side of the section currently at the top of the view port. The link boxes have the classes .nav-prev and .nav-next respectively. Each of these navigation boxes has 12 of the links included (one for each section in the web page), the correct link is activated by applying either a .nav-on (make it visible) or .nav-off (hide it) class. The .nav-on and .nav-off classes are applied by the JavaScript code in script.js (it is the same for all webpages) ************************************************************************* */ .nav-prev, .nav-next { /* Modified NEXT section button in top nav bar */ display: none; float: left; width: 20%; height: 60px; padding-top: 18px; text-decoration: none; text-align: center; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } .nav-next { border-right: 0; } /* remove right border on last area */ .nav-prev:link, /* navigation link options */ .nav-prev:visited, .nav-next:link, /* navigation link options */ .nav-next:visited{ color: #cccccc; transition: background-color 0.2s, color 0.2s; } .nav-prev:hover, /* navigation hover options */ .nav-prev:active, .nav-next:hover, /* navigation hover options */ .nav-next:active { color: #686868; background-color: #f8f8f8; } .nav-on { display: inline-block; } /* visibility sytles added by JavaScript to next/prev section buttons in nav bar */ /* ---------------------------------------------------------------------------- NAVIGATION - RESPONSIVE COMPONENTS ---------------------------------------------------------------------------- The navigation button height is progressively reduced as the screen width contracts, the padding above the text is adjusted to keep the text vertically centred (the font size decreases in line with the base font settings). Below 680px, the text disappears leaving only the arrow symbols (set to 20px) with a fixed button height of 40px. ------------------------------------------------------------------------- */ @media all {.nav-prev, .nav-next { height: 60px; }} @media all and (max-width:1276px) {.nav-prev, .nav-next { height: 60px; padding-top: 18px; }} @media all and (max-width:960px) {.nav-prev, .nav-next { height: 57px; padding-top: 17px; }} @media all and (max-width:920px) {.nav-prev, .nav-next { height: 54px; padding-top: 16px; }} @media all and (max-width:880px) {.nav-prev, .nav-next { height: 54px; padding-top: 16px; }} @media all and (max-width:840px) {.nav-prev, .nav-next { height: 51px; padding-top: 15px; }} @media all and (max-width:800px) {.nav-prev, .nav-next { height: 50px; padding-top: 15px; }} @media all and (max-width:760px) {.nav-prev, .nav-next { height: 47px; padding-top: 14px; }} @media all and (max-width:720px) {.nav-prev, .nav-next { height: 44px; padding-top: 13px; }} @media all and (max-width:680px) {.nav-prev, .nav-next { height: 41px; padding-top: 12px; }} @media all and (max-width:640px){ .top-nav-text { display: none; } /* hide text in navigation bar */ .nav-prev, .nav-next { height: 40px; /* fix height and font-size */ padding-top: 6px; font-size: 24px; } .fixed-nav .nav-next, /* in fixed-nav make all button widths the same */ .fixed-nav .nav-prev { width: 16.66%; } } /* **************************************************************************** SIDE TABLE OF CONTENTS **************************************************************************** A new pop-out table of contents has been added to a fixed position in the left side bar: +-----+ On mouse hover, the box expands to give a full list of the | C | table of contents for the page (it list only the chapter | | level entries), these contents are the same for all SMDS +-----+ Pages. The side TOC contains 12 dynamic navigation links, and abstract section plus the sections 1 to 11. The links are shown in grey, with the current section (the one at the top of the view port) in blue. This is done ny dynamically applying the .toc-active class to the specific TOC entry (done with JavaScript). The side TOC is held in a div with class .side-toc, this establishes a fixed position div 30% of the way down the page at the left edge of the body area. It has a high z-index to ensure it is above all other objects. The .side-toc-box is, in the un-hovered state a box with rounded corners, a faint border and the letter C in the top middle. If the mouse hovers over the box it expands to a minimum height of 8 rem and a width that fits the content of the box (the links, these are unordered lists with either the class .side-toc-home or side-toc-lev), the original C becomes the word Contents. There are 12 standard links on the page (for the abstract section and each of the remaining sections 1-11), these all have the classes .side-toc-lev. These .sid-toc-lev classes are the ones that can have the .toc-active class applied to force a colour change when the associated section is at the top of the view port. There are two other links with the class .side-toc.home, the first navigates to the index.html page, the second to the top of the current web page. These two links are not dynamically coloured. The chapter number, section number and title have the classes .side-toc-lev1-chap, .side-toc-lev1-sec and .side-toc-lev1-text respectively, these separate the chapter number, section number and title, these oprate in a similar way to the normal toc links. ************************************************************************* */ .side-toc { z-index: 9999; top:30%; position:fixed; } .side-toc-box { height: 2rem; width: 2rem; font-family: "conc-c4-r"; color: #ccc; background-color: transparent; border: 1px solid #ccc; border-radius: 0.5rem; transition: all 0.2s; } .side-toc-head { text-align: center; margin-bottom: 0.2rem; } .side-toc-box:hover { height: auto; width: auto; min-height: 8rem; color: #686868; background-color: #f8f8f8; font-size: 0.8rem; } .side-toc-box:hover .side-toc-head:after { content: "ontents" } .side-toc-line { display: none; -moz-column-count: 2; column-count: 2; margin:0; padding-bottom: 0.5rem; /* padding to bottom of TOC box */ list-style: none; font-family: "conc-t4-r"; font-feature-settings: "ss02"; font-size: 0.6rem; } .side-toc-line li a:link, /* format the TOC list text */ .side-toc-line li a:visited, .side-toc-line li a:hover, .side-toc-line li a:active { text-decoration: none; } .side-toc:hover .side-toc-line { display: inline-block; } .side-toc-lev:link, /* format the link hover background */ .side-toc-lev:visited { transition: background-color 0.2s; } .side-toc-lev:hover, .side-toc-lev:active { background-color: #ddd; } .side-toc-home {font-family: "conc-t3-b";} .side-toc-home:link, /* format the link hover background */ .side-toc-home:visited { transition: background-color 0.2s; } .side-toc-home:hover, .side-toc-home:active { background-color: #ddd; } .side-toc-lev1-chap { display: inline-block; font-feature-settings: "ss02"; vertical-align: top; text-align: right; width: 1.1rem; /* Width of chapter number */ padding-left: 0.2rem; margin-top: 0.2rem; margin-bottom: 0.1rem; } .side-toc-lev1-sec { display: inline-block; font-feature-settings: "ss02"; vertical-align: top; width: 1.5rem; /* Width of section number */ text-align: left; padding-left: 1px; margin-top: 0.2rem; margin-bottom: 0.1rem; } .side-toc-lev1-text { display: inline-block; font-feature-settings: "ss02"; min-width: 10rem; /* Width of text number */ padding-right: 0.2rem; margin-top: 0.2rem; margin-bottom: 0.1rem; } .toc-active { color:#4C6C9C; font-weight: bold; } /* ---------------------------------------------------------------------------- SIDE TOC- RESPONSIVE COMPONENTS ---------------------------------------------------------------------------- The title large number and heading text is resized as the screen narrows; this is done to maintain the proportionality of the large number to the smaller heading text, this stops at 960px, at this point the base changes to the font-size take over, and no further manipulation is required. Below 640px, the large number is no longer displayed and the smaller version of the number (in the heading text area) is made visible ------------------------------------------------------------------------- */ @media all {.side-toc-line { font-size: 0.6rem; }} @media all and (max-width:1080px) {.side-toc-line { font-size: 0.7rem; }} @media all and (max-width:800px) {.side-toc-line { font-size: 0.8rem; }} @media all and (max-width:720px) {.side-toc-line { font-size: 0.9rem; }} @media all and (max-width:640px) {.side-toc { display: none; }} /* **************************************************************************** NORMAL TABLE OF CONTENTS - STYLE OVERLOADING **************************************************************************** The normal table of contents has three level of entry, each level having a slightly different appearance in the TOC: 1 Level 1 heading (bold font) 1.1 Level 2 heading (roman font) 1.1.1 Level 3 heading (smaller roman font) The normal TOC typically only has one level 1 entry (one chapter per page), the PAL documention has multiple chapters on the same web page and has an additional level: BLOCK Level 1 heading (bold font) 1. Level 2 Chapter heading 1.1 Level 3 Section (roman font) 1.1.1 Level 4 Sub-section (smaller roman font) The TOC also has a toc-overline to separate it from the title area ************************************************************************* */ .toc-overline { /* container for the TOC */ margin-top: 3rem; margin-bottom: 0.5rem; border-top: 1px solid #CCCCCC; } .toc-lev1-numpal { /* container for TOC level 1 number */ display: inline-block; font-family: "conc-c4-r"; font-feature-settings: "ss02"; vertical-align: top; width: 15%; margin-top: 0.5rem; margin-bottom: 0.4rem; } .toc-lev1-textpal { /* container for TOC level 1 text */ display: inline-block; font-family: "conc-c4-r"; font-feature-settings: "ss02"; width: 80%; margin-top: 0.5rem; margin-bottom: 0.4rem; } .toc-lev2-numpal { /* container for TOC level 2 number */ display: inline-block; font-family: "conc-t3-b"; font-feature-settings: "ss02"; font-size: 0.75rem; vertical-align: top; width: 20%; margin-left: 10%; margin-top: 0.5rem; margin-bottom: 0.1rem; } .toc-lev2-textpal { /* container for TOC level 2 text */ display: inline-block; font-family: "conc-t3-b"; font-feature-settings: "ss02"; font-size: 0.75rem; width: 70%; margin-top: 0.5rem; margin-bottom: 0.1rem; } .toc-lev3-numpal { /* container for TOC level 3 number */ display: inline-block; font-family: "conc-t4-r"; font-feature-settings: "ss02"; font-size: 0.75rem; vertical-align: top; width: 20%; margin-left: 10%; margin-top: 0.2rem; margin-bottom: 0.1rem; } .toc-lev3-textpal { /* container for TOC level 3 text */ display: inline-block; font-family: "conc-t4-r"; font-feature-settings: "ss02"; font-size: 0.75rem; width: 70%; margin-top: 0.2rem; margin-bottom: 0.1rem; } .toc-lev4-numpal { /* container for TOC level 4 number */ display: inline-block; font-size: 0.7rem; vertical-align: top; width: 20%; margin-left: 10%; margin-top: 0.2rem; margin-bottom: 0.2rem; } .toc-lev4-textpal { /* container for TOC level 4 text */ display: inline-block; font-size: 0.7rem; width: 70%; margin-top: 0.2rem; margin-bottom: 0.2rem; } /* **************************************************************************** ADDITIONAL INLINE TEXT STYLES AND STYLE OVERLOADING ************************************************************************* */ .abs { /* TEXT STYLE - absolute address */ font-family: "trip-t4-r"; font-size: 0.95em; color: #009999; } .signal { /* TEXT STYLE - aabsolute address */ font-family: "trip-t4-b"; font-size: 0.95em; color: #4F81BD; } .block { /* TEXT STYLE - system block */ font-family: "conc-c4-r"; font-size: 0.95em; color: #009999; } .tia { /* TEXT STYLE - absolute address */ font-family: "tia-r"; font-size: 0.8em; color: #404030; } .tia-em { /* TEXT STYLE - absolute address */ font-family: "tia-b"; font-size: 0.8em; color: #404030; } .end-space {margin-top: 10rem} /* SPACING - large end space */ .fig-space {margin-top: 3rem} /* SPACING - large end space */ footer {min-height: 4rem;} /* add additional space to bottom of footer */ h5 { font-family: 'conc-c2-r'; color: #aaa; font-weight:normal; font-feature-settings: "ss02"; font-size: 220%; margin-top: 0.5rem; }