/* PRACTICALSERIES (c) 2021

*******************************************************************************
Title :          GOOGLE PRETTIFY LINE HIGHLIGHTS                   CODELINE.CSS
*******************************************************************************

PRACTICALSERIES: Practical Series of Publications by Michael Gledhill
                 Published in the United Kingdom

                 Email: mg@practicalseries.com
                 Web:   www.practicalseries.com

-------------------------------------------------------------------------------
DETAILS

This file is used to change the background colour of individual lines in the
google Prettify code fragments and format certain elements for css use.

This is done by giving each code fragment a unique ID reference and setting
modifying the specific properties and lines for that particular fragment.

IDs have the format js--cXX-YY (where XX is the section number and YY the 
table ordinal number, starting at 01, 02 &c.)

There are three common modifications made to code fragments:


1. LINE BACKGROUND SHADING
This is done to change the background colour of a line of code or a range
of lines to green (indicating the code has changed).


/* ****************************************************************************
   CODE FRAGMENT FORMATTING
   ************************************************************************* 
#js--cXX-01 ol.linenums {color: transparent;}                                   /* make numbering invisible 
#js--cXX-01 li:nth-child(2) { background: #EAF1DD }
#js--cXX-01 li:nth-child(n+5):nth-child(-n+10) { background: #D6E3BC }
/* *************************************************************************

       COMMON NTH CHILD ARRANGEMENTS
       :nth-child(2)                     Selects the 2nd occurrence
       :nth-child(n+6)                   Selects the 6th to the last 
                                         occurrence (inclusive)
       :nth-child(-n+6)    	             Selects the first occurrence 
                                         to the 6th occurrence (inclusive)
       :nth-child(n+3):nth-child(-n+8)   Selects the 3rd occurrence to the 
                                         8th occurrence (inclusive)


       COMMON LINE SHADING COLOURS:

       Standard green: #EAF1DD
       Dark green:     #D6E3BC
       Blue:           #DBE5F1
       Red:            #F2DBDB

Note:  Artificial line colouring only works with numbered code fragments, 
       if there is no linenums class in the <pre> element it won’t work, 
       there will be no ordered list.

       If you still want coloured lines but no line numbers, there is a bit 
       of messing about, in the first instance line numbers must be turned on 
       by adding the linenums class to the <pre> element; the next thing is 
       to make those numbers invisible by adding the following to the 
       codelines.css:

            #js--cXX-01 ol.linenums {color: transparent;}




2. LINE INDENTATION ON LINE WRAP
Changes how a line is indented when it wraps around in the code fragment
display

       COMMON INDENT POINTS:

       Indent 1:   1.46rem
       Indent 2:   2.92rem
       Indent 3:   4.38rem
       Indent 4:   5.85rem
       Indent 5:   7.33rem
       Indent 6:   8.79rem

/* ****************************************************************************
   CODE FRAGMENT FORMATTING
   ************************************************************************* 
#js--cXX-01 ol.linenums {color: transparent;}                                   /* OPTIONAL - make numbering invisible 
#js--cXX-01 li:nth-child(1) {padding-left: 7.33rem;}
/* ************************************************************************* 




3. HIGHLIGHTING TEXT IN CODE FRAGMENTS

This is done in the html by applying a <span class="h-light-XX"></span> 
around the affected text within the <code> or <pre> section of the html.

Such highlighted text is generally shown in bold at a slightly larger size, 
and with a coloured underline border.

By placing the .h-light styles in this, codeline file, the styles 
can be adjusted on a page by page basis.

       COMMON UNDERLINE COLOURS:

       Bright red:     #ff0000
       Orange:         #ff6c09
       Dark blue:      #1f497d
       Black:          #000


Note:  Styles for CSS have now been made part of the prettify.css file

-------------------------------------------------------------------------------
MODIFICATION HISTORY:

This is a complete summary of all software modifications.

Date          Issue        Author         Reason for Modification
-------------------------------------------------------------------------------
11 Feb 2021   000.101      M. Gledhill    Released as a development prototype

09 Feb 2021   000.000      M. Gledhill    File created
                                          based on 97-00 codelines.css file
---------------------------------------------------------------------------- */

/* ****************************************************************************
   REVISION
   **************************************************************************** */
#rev-codelines:after { content: "000.101"; }


/* ****************************************************************************
   CODE FRAGMENT FORMATTING
   ************************************************************************* */
.h-light-01 {
    font-family: "trip-t4-b";
    font-size: 0.6rem;
    border-bottom: 2px solid #ff0000;
}

.h-light-02 {
    font-family: "trip-t4-b";
    font-size: 0.6rem;
    border-bottom: 2px solid #1F497D;
}

/* ************************************************************************* */



/* ****************************************************************************
   CODE FRAGMENT FORMATTING
   ************************************************************************* */
#js--cXX-01 ol.linenums {color: transparent;}                                   /* OPTIONAL - make numbering invisible */
#js--cXX-01 li:nth-child(n+2):nth-child(-n+6) { background: #F2DBDB }
#js--cXX-01 li:nth-child(n+12):nth-child(-n+16) { background: #DBE5F1 }

/* ************************************************************************* */


/* ****************************************************************************
   CODE FRAGMENT FORMATTING
   ************************************************************************* */
#js--cXX-01 ol.linenums {color: transparent;}                                   /* OPTIONAL - make numbering invisible */
#js--cXX-01 li:nth-child(1) {padding-left: 7.33rem;}
/* ************************************************************************* */