/* PRACTICALSERIES (c) 2021 ******************************************************************************* Title: PRACTICAL SERIES STYLE.CSS ******************************************************************************* PRACTICALSERIES: Practical Series of Publications by Michael Gledhill Published in the United Kingdom Email: mg@practicalseries.com Web: https://practicalseries.com ------------------------------------------------------------------------------- DETAILS This is the main style sheet for the website, it contains styles for the following: Base settings Top navigation Fixed navigation Cover features (titles & picture) Header title bar Table of contents (TOC) Standard section formatting (titles, text styles, side bars etc.) Figures Tables Code fragments Formula Footer Footer navigation 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 | #3DB70F | 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 ------------------------------------------------------------------------------- 02 May 2021 000.104 M. Gledhill Green badge colour changed 01 May 2021 000.103 M. Gledhill table-doc class added for documentation lists 14 Feb 2021 000.102 M. Gledhill SS02 stylistic set applied to .sans and .sans-b classes 10 Feb 2021 000.101 M. Gledhill Development release for site build Revision control active 09 Feb 2021 000.001 M. Gledhill .rev-badge-side added .title-contents added em changed to italic .emph bold emphasis added 08 Feb 2021 000.000 M. Gledhill Established for PAL Based on R01 in PS1001 ---------------------------------------------------------------------------- */ /* **************************************************************************** REVISION **************************************************************************** */ #rev-style:after { content: "000.104"; } /* **************************************************************************** BASE PAGE SETUP **************************************************************************** Defines the base properties for the website: Universal selection (*) clears all margins and sets all elements to border-box with relative positioning html Sets base font for body text (the font-size is specified in the responsive components), the background colour (appears outside the body area) is set to a cream colour. Text colour is set to a dark grey. body Sets max width of the body area to be 1276px and centres it in the browser window. Background colour is white with a grey border down the left and right edges headings h1-h6 The headings are used as follows: ---+-------------------+---------------------------------------- h1 | Chapter headings | Very large chapter number with smaller | | heading text ---+-------------------+---------------------------------------- h2 | Standard section | Large chapter number with same sized | | heading text h2 | Lead-in/Sidebar | Bold and italic serif font used in the | | sidebar area of Lead-in sections ---+-------------------+---------------------------------------- h3 | Subsection | Large chapter number with same sized | | heading text ---+-------------------+---------------------------------------- h4 | Inline section | Large chapter number with same sized | | heading text ---+-------------------+---------------------------------------- h5 | Not used | Identical to h4 ---+-------------------+---------------------------------------- h6 | Lead-in section | Not visible ---+-------------------+---------------------------------------- Anchor link base properties The basic properties for unclassed links are set to remove any text decoration and apply the standard body text colour for all link types **************************************************************************** */ * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } html { background-color: #fbfaf6; /* Set cream coloured page background */ color: #404030; font-family: 'eqty-ta-r'; /* Base font, font-size set in responsive elements */ text-rendering: optimizeLegibility; } body { max-width: 1276px; /* min-width: 520px; */ /* min width removed 13 Feb 17- not required */ margin: 0 auto; background-color: #fff; /* make content area background white */ border-left: 1px solid #ededed; border-right: 1px solid #ededed; } h1, h2, h3, h4, h5, h6 { /* set standard headings */ font-family: 'conc-t3-r'; font-weight:normal; font-feature-settings: "ss02"; font-size: 100% } h3 { margin-top: 5rem; } h4, h5 { margin-top: 2rem; } h6 { /* Placeholder heading - not displayed */ margin: 0; display: none; } a:link, a:visited { color: #404030; text-decoration: none; } a:hover, a:active { color: #404030; } /* **************************************************************************** SET THE BASE FONT SIZE AND MAKE RESPONSIVE **************************************************************************** The default break points are set as follows: FONT SIZE (PX) BROWSER WIDTH (PX) 12 ≤ 520 13 560 14 600 15 640 16 680 17 720 18 760 19 800 20 840 21 880 22 920 23 960 24 > 960 All elements sized in rems will change in proportion to the above. **************************************************************************** */ @media all {html {font-size: 24px;}} @media all and (max-width:1276px){html {font-size: 24px;}} @media all and (max-width:960px){html {font-size: 23px;}} @media all and (max-width:920px){html {font-size: 22px;}} @media all and (max-width:880px){html {font-size: 21px;}} @media all and (max-width:840px){html {font-size: 20px;}} @media all and (max-width:800px){html {font-size: 19px;}} @media all and (max-width:760px){html {font-size: 18px;}} @media all and (max-width:720px){html {font-size: 17px;}} @media all and (max-width:680px){html {font-size: 16px;}} @media all and (max-width:640px){html {font-size: 15px;}} @media all and (max-width:600px){html {font-size: 14px;}} @media all and (max-width:560px){html {font-size: 13px;}} @media all and (max-width:520px){html {font-size: 12px;}} /* **************************************************************************** NAVIGATION **************************************************************************** There are two navigation areas, the first (top-nav) is situated at the top of the page and scrolls upwards with the contents section, this navigation area has five links: 1. Previous section - left arrow 2. Previous chapter - up arrow 3. Home (website home page) - home icon 4. Next chapter - down arrow 5. Next section - right arrow The second navigation area (fixed-nav) appears as the contents section scrolls off the top of the screen and remains fixed at the top of the screen until the contents area reappears, this section has six links: 1. Previous section - left arrow 2. Previous chapter - up arrow 3. Top (of this section) - Top arrow (up arrow with bar) 4. Home (website home page) - home icon 5. Next chapter - down arrow 6. Next section - right arrow All of these navigations (seven in all, wide home and narrow home) are present in the navigation list, the wide home button is qualified with the .nav-home class. As the screen scrolls into section 01, the fixed-nav class is attached to the