File: _main.css

/* 
====================================================================================
External CSS sheet, adopted Nov 2015.

Styles for fonts, nav bars, images, code, and more; supports future expansion.
Used site-side, except old training pages (own CSS) and app user guides (inline). 

Caveat: some older pages here still use tables and in-line HTML tags for formatting;
this is being phased out rapidly, especially during 2018 mobile-friendly conversion.

====================================================================================
CSS CHEAT SHEET (because bandwidth is now cheap):

Use this external sheet via this in <HEAD> of HTML file:
    <link rel="stylesheet" type="text/css" href="_main.css">    <!--relative url-->

Syntax:
    selector {property: value; property: value}

    Where common selectors = 
        HTML tag type:  p {}            for all <p> only
        Id name:        #intro {}       for <... id="intro">, page-unique id, <div>?
        Class name:     .nftable {}     for <... class="nftable">, not page-unique 
        Tag + class:    pre.fancy {}    for <pre class="fancy">, some tag only 
        Multiples:      p, dt, dt {}    for <p> and <dt> and <dd>  
        Direct child:   tr.space>td {}  for all <td> immed in <tr class=space> (only)
        Descendant:     .booktab th {}  for all <th> descendants of <table class=booktab> 
        Combos:         .c th, .c td {} for all <th> and <td> descendants of <? class=c> 

Precedence, from lowest to highest:
    Properties are applied in order read/loaded, which generally means:

    1) Browser defaults, which unfortunately may vary
    2) External and internal sheets in <head>, by coding order: first to last (low..high)
    3) Inline styles within HTML tags, outside/after <head>

    For #2, there may be any number of <link> refs and <style> blocks in <head>
    CSS property overrides same-type HTML attribute, in CSS-capable browsers (but test) 

Subtle bits:
    Class redefinitions with disjoint properties simply extend the property set
    Using <tag class="c1 c2"> combines the properties of both classes
    A "!important" at a property def overrides standard precedence (ad-hoc: avoid!)
    Properties are also applied by a selector specificity ranking (complex: avoid!) 

Coding notes:
    Comments: CSS form parsed in <link> files and <style> blocks; else HTML form
    Media queries "@media" nest CSS code within enclosing {}
    Errors are not reported: add color/etc to verify class correctness and use

An external CSS page like this, loaded with a <link> in <head>, makes it easier
to change formatting in the future without having to edit each page (or worse,
each tag within each page).  Alternatives, and their downsides:

0) External sheets in <HEAD>, like this one: the best option
       <link ...see above... > 

1) HTML in-page style sheet(s) in <HEAD>: must edit every page to change
       <style>                                           
       body {
           font-family: Arial, Helvetica, sans-serif; 
       }
       </style>

2) HTML inline (in-tag) CSS styles: must edit every tag to change
       <p style="font-family: Arial, Helvetica, sans-serif;">

3) HTML original font tag, anywhere: deprecated but widespread, many page changes
       <font face="Arial, Helvetica, sans-serif">       

4) Javascript object-based: requires users to enable javascript
       object.style.fontFamily="Arial,sans-serif"

5) HTML original formatting: must edit every tag in every page on changes
       <td bgcolor=tan>     <!-- was the web ever this young? -->
====================================================================================
*/



/*
------------------------------------------------------------------------------------
FONTS [site-wide]
banish the default Times New Roman (a.k.a. serif);
see also title/header font scaling options later in this file;
------------------------------------------------------------------------------------
*/


body {                                               /* for entire body, except <pre> (alt: *) */
    font-family: Arial, Helvetica, sans-serif;       /* precedence list (or Verdana, Tahoma) */
}                                                    /* double quote if name embeds spaces */



/* 
------------------------------------------------------------------------------------
CODE/TEXT LISTINGS [site-wide]
this has evolved (old items kept for ref); auto-scroll and mono-font are crucial  
------------------------------------------------------------------------------------
*/


pre.fancy, pre {                                      

/* code sections that are not manually indented (an older formatting style) */
/* feb18: now used SITE-WIDE for *all* <pre>, and dedent any old-style code */

    /* feb18: mobile resesign (can override) */
    overflow-x: auto;                                /* scroll if needed for mobile and shrunken windows */
    white-space: pre;                                /* just to be sure? */
    font-family: Courier, monospace, sans-serif;     /* better: else some mobiles aren't mono */
    background-color: ivory;                         /* color, okay iff scrolled to window size (else truncated) */
    outline: navy solid 1px;                         /* border, okay if scrolled (else bisects code in most wb) */
    padding: 5px;                                    /* space around code within pre block, one=all 4 sides*/
    margin: 20px;                                    /* space around pre block itself, just one = all 4 sides */

    /* original settings */
    /* margin: 20px;                                 /* don't indent in the text itself */
    /* font-family: Consolas, "Courier New", Courier; */  /* override default, use bolder consolas */
    /* outline: green solid 1px; */                  /* size = max(screen size, text size) (but no-op on IE!) */
    /* border: 1px solid blue; */                    /* size = screen size, even if text longer (but not on IE!) */ 

    /* feb18 experiments */
    /* border-right: hidden; */                      /* feb-18: else rb bisects code on small screens */
    /* background-color: ivory; */                   /* feb-18: this still cuts off on screen, not code */

    /* display: inline-block; */                     /* feb18: this makes border fit content, no bisect */ 
    /* border: 1px solid blue; */                    /* bit it looks a bit odd for narrow listings */
    /* white-space: pre; */                          /* and requires <p> immediately after </pre> */

}



/*
------------------------------------------------------------------------------------
HEADER (AND OTHER) BACKGROUNDS
alternative to prior table-based colorization
------------------------------------------------------------------------------------
*/


.tanheader {                          /* for any header level, or <P> etc. */
    background-color: tan;
}

.lighttanheader {
    background-color: wheat;          /* wheat, or cornsilk: too light? */
}

.lightesttanheader {
    background-color: cornsilk;       /* too light for headers, ok for areas */
}

.darktanheader {
    background-color: #A28264;        /* it's dark brown... */
}



/* other pages: for variety (and not yet used?) */

.lightbluebg {
    background-color: #DFF0FF;
}
.darkerluebg {
    background-color: #A2CDF3;
}


.lightgreybg {
    background-color: #E9E9E9;
}
.darkergreybg {
    background-color: #C1C1C1;
}



/* 
------------------------------------------------------------------------------------
HOMEPAGE: BUTTON TABLE (really, its link cells)
an exercise in trying to forge a real GUI in a webpage using ad-hoc css...
------------------------------------------------------------------------------------
*/


/* jan16: drop html nowrap for this, but increase css's fixed size to 170px; 
   fixed-width columns seem problematic: old firefox 28 on linux line-breaks
   content if smaller, and nowrap+smaller makes content cross columns boundaries; 
*/

/* feb18: make index table responsive for mobile via media query for small screens;
   the alternative is to make images % proportional, but there's more to shrink here;
*/
  

.blocklink {                 /* 0..479: smaller for smaller mobiles and shrunken windows */
    display: block;          /* hrefs that look like buttons */
    width: 4.5em;            /* was 170px: bad for mobile; was 145px, but causes lined-breaks in older firefox */
    text-decoration: none;   /* no underline for the link: forge a true gui's button */
}

@media screen and (min-width: 480px) {
.blocklink {                 /* 480..549: else medium for larger devices and windows */
    display: block;          
    width: 5em;              
    text-decoration: none;   
}
}

@media screen and (min-width: 550px) {
.blocklink {                 /* 550..639: else in-between medium so not as large a jump */
    display: block;          /* alt: make table size a % of screen size (see bookimg) */
    width: 125px;              
    text-decoration: none;   
}
}

@media screen and (min-width: 640px) {
.blocklink {                 /* 640+: else larger for largest devices and windows */
    display: block;          /* 4th click; this was the prior desktop size (now a max) */
    width: 170px;            
    text-decoration: none;
}
}

.blocklink:hover {
    text-decoration: underline;    /* underline only when cursor hovers over link */
    font-style: italic;            /* feb18: and go italic for consistency with footer */
}



/* 
------------------------------------------------------------------------------------
HOMEPAGE + BOOK INDEX: LEFT PANEL TABLE
feb18: make slightly smaller on smaller displays to save pixels for other patrts
------------------------------------------------------------------------------------
*/


.bookicons {                       /* feb18: leftside panel: smaller on smaller displays */
     width: 40px;                  /* 0..479 - fits ipad touch and iphone se 4" */
     padding: 1px;
}

@media screen and (min-width: 480px) {
.bookicons {                       /* 480..639 - fits galaxy j7 5.5" */
     width: 40px;                  /* no 4th click here (unlike actions table above */
     padding: 2px;
}
}

@media screen and (min-width: 640px) {
.bookicons {                       /* 640+: original desktop size */
     width: 50px;
     padding: 5px;
}
}



/* 
------------------------------------------------------------------------------------
FOOTER TOOLBAR TABLE [site-wide]
navigation bar at window bottom (now makes homepage a bit superfluous)
------------------------------------------------------------------------------------
*/


/* feb18: massive redesign to make toolbar scrollable at a minimum width for mobile;
   moves most markup to <div> instead of table, but retains fixed positioning;
   also works around left-corner URL popups on mouse-over hover on Edge (and now Firefox);
   the toobar's html itself is generated by genhtml, from html templates and inserts;  
*/

/* may18: kill the scrollbar space below the toolbar on desktop browsers, by using
   "autoscroll-x: auto" (not scroll).   See also the apr18 tbd below for background.

   The space was forced formerly to accommodate mouse-over URL popup overlays on 
   recent Firefox and all Edge.  But Firefox 59 fixed this issue; the space really
   didn't help Edge anyhow; and Mac OS users might never see the space on Chrome, 
   Safari, or Firefox if their scroll-bar General preference was set to scrolling 
   or automatic.  Keeping the space just Edge isn't justified: it's 2%-3% share 
   browser here, and the scroll space isn't enough to fix its overlay issue.

   This change is irrelevant on all mobile browsers (they never added scroll space, 
   and use swipes), and was propagated to training-main.css all apps' UserGuide.html.
   On Mac OS, user scrollbar settings still impact all browsers for "overflow-x:auto":
   when-scrolling is like mobiles (never show space, but overlay during scroll and 
   use swipe gestures); always-show posts a clickable scrollbar when needed only; 
   and automatic chooses between the two for mouse (pointers) or trackpad (gestures).
*/ 



/* FOOTER TOOLBAR TABLE */

.footerdiv {
    position: fixed;              /* anchor to bottom of display */
    bottom: 0;                    /* position:fixed + scroll doesn't work for <table> */
    overflow-x: auto; /*scroll*/  /* scroll + always show space (for URL hover popups) */ 
    width: 100%;                  /* alt: overflow-x:auto adds scroll space iff needed */
    left: 0px;                    /* no space on left for <body> indent */

    /* margin-top: 30px; */       /* doesn't work here: use <br>s */
}

.footertable {                    /* common browser-neutral formatting for footer button bar */
    /* feb-18 */
    border-collapse: collapse;    /* collapse border into single line */
    border: 1px solid black;      /* use border because color same as some content */
    left: 0px;                    /* get rid of small blank space on the left side */
    min-width: 700px;             /* too crammed to see below this; else scrolbars don't appear */
    width: 100%;                  /* span full screen horizontally */
    height: 1em;                  /* 3 = alt for url popup overlays in dumb browsers (but too big) */

    /* original */
    /* border: 0px; */            /* if on table only, 2px renders as outside-only border */

    /* dec-15 */
    /* right: 0px; */             /* but not this, or margin-left; css seems very redundant and ad-hoc */
    /* table-layout: fixed; */    /* alt: small words isolated, not as good when window is shrunk */
    /** position: fixed; */       /* fix position always at window bottom regrdless of size, position in doc */
    /** bottom: 0; */             /* versus only at end of doc (must scroll to find, but less distracting? */
    /** overflow-x: scroll; */    /* show scrollbar for items clipped - supposedly (no-op if pos:fixed) */

    /* feb-18 */
    /* max-width: 100%; */        /* seems useless here */
    /* top: 0; */                 /* top of screen alt */
    /* margin-top: 30px; */       /* doesn't work here either if in <div>: use <br>s */
}



/* FOOTER TOOLBAR LINKS */

.blocklinkbar {
    display: block;          /* hrefs that look like buttons */
    width: 100%;
    text-decoration: none;   /* no underline for the link: forge a true gui's button */
/* dec-15 */
    color: black;
    /*font-weight: bold;*/   /* too distracting? */
}

.blocklinkbar:hover {
    text-decoration: underline;  /* underline to designate link */
    font-style: italic;          /* feb18: and go italic if url popup */
}

.blocklinkbar:active {
/* dec-15 */
    font-style: italic;      /* not retained in tables */
    /*font-weight: bold;*/   /* too distracting? */
}



/* apr18: TBD - kill space reserved for scroll below the toolbar?

  --SEE may18 resolution above--

The scroll space appears on desktop browsers only, but seems a waste.
It's required for recent Firefox, else url-hover popup covers links.
Without the space, Firefox is usable but just barely - must move cursor.
Edge is beyond help either way - its popup is rude (and its traffic is ~3%).
Chrome, Safari, and IE don't need the space, but Firefox is 17% of traffic.
Javascript tricks to disable popup or detect Firefox are non-starters.

PUNT for now, and add space to program user guide docs for consistency.

.footerdiv {
    overflow-x: auto;     * show scroll iff needed *
}
.footertable {
    height: 1em;          * 3 also helps, but it's chunky *
}
*/



/* Not used: Npx + collapse can be variable-width on some browsers (firefox, etc), and distracting */

.footercell {                       /* 1px can be variable-width on firefox */
    border: medium solid black;     /* 2px seems distracting but browser-neutral and consise */
}



/* 
------------------------------------------------------------------------------------
BOOK-TITLE PAGES EDITION TABLES
used for all 3 title pages' editions tables, but not for top of page layout (divs)
------------------------------------------------------------------------------------
*/



/* EDITIONS LINKS */
/* caution/caveat: these are used in purchase-pointers.html too */

.booktablelink {
   font-weight: bold;               /* same as <B><I>...</I></B> */
   font-style: italic;              /* when used, <td> uses "nowrap"; css "white-space: nowrap" in IE8+ only */
   text-decoration: none; 
}

.booktablelink:hover {
    text-decoration: underline;    /* active feedback */
}



/* EDITIONS TABLE */

/* apr18: restyle the book index-page edition tables, such that the top and bottom
   rows aren't "short-changed" on whitespace; this is almost like a simple html 
   table's "cellpadding=4 cellspacing=2" but the top row gets more space above 
   it, and the bottom row gets more space below it, yielding a more uniform look;
   otherwise, the rows in the middle seem to be further apart (picky, but true...);

   html cellspacing is space between cell borders
	in css, <table style="border-spacing: 5px; border-collapse: separate;">
   html cellpadding is space inside cells, to the border
	in css, <th style="padding: 3px;">, for all <th> in a table/class
   though css spacing may not be portable to IE < 7
*/


.edstable th {                  /* for all <th> within <table class=edstab> */
    padding-top: 3px;
    padding-bottom: 3px;
}

.edstable td, .edstable th {      /* ditto, but for both all <th> and all <td> */
    padding-left: 4px;
    padding-right: 4px;
}
    
.edstable td {                  /* for all <td> only (data rows) */
    padding-top: 6px;
}

.edstablelastrow td {           /* for all <td> within <tr class=edstablastrow> */
    padding-bottom: 6px;
}



/* 
------------------------------------------------------------------------------------
NOT CURRENTLY USED
------------------------------------------------------------------------------------
*/


#pagenavtan, #pagenavblue, #pagenavgrey {      /* and use id=name, not class=name */
    background-color: cornsilk;
    float: left;
    padding: 5px;
    padding-bottom: 10px;
    border-width: 10px;
    /* line-height: 30px; */
    /* height: 300px; */
    /* width: 100px; */
    /* font-size: 9px;*/
}

#pagenavblue {
    background-color:cornsilk;   /* override prior settings */
}

#pagenavgrey {
    background-color:cornsilk;
}



/*
------------------------------------------------------------------------------------
NON-FORMATTING TABLES 
use <TABLE class=nftable> (or id=xxx for #xxx) to activate
------------------------------------------------------------------------------------
*/


.plaintable {
    text-align: center;
    /*border-collapse: collapse;*/     /* kill double lines */
    border: 1px solid black;           /* firefox draws single lines badly */ 
}

.plaincell {
    padding: 3px;
    text-align: right;
}



.nftable {
    border-collapse: collapse;     /* kill double lines */
}

.nftable, .nftd, .nfth {
    border: 2px solid black;       /* standard borders */
}

.nftd, .nfth {
    padding: 5px;                  /* standard cellpading */
}



/*
------------------------------------------------------------------------------------
BOOK PAGE IMAGES
feb18: need to scale down for mobile, else long words split wrap-around text
------------------------------------------------------------------------------------
*/


/* 
same for all screen sizes: continuous responsive;
max-sizes avoid bleed over; alt: set on <div> container?
also use higher-res images so sharper when larger;
*/

.bookimg {         
     width: 30%;
     height: auto;
     max-height: 250px;
     max-width: 200px;
     margin-right: 20px;
     margin-bottom: 10px;
}

.bookimgtall {             /* override for pyref class="x y" */         
     max-height: 250px;
     max-width: 150px;
}



/* alternative------------------------------
@media screen and (orientation: portrait) {
  img { max-width: 90%; }
}

@media screen and (orientation: landscape) {
  img { max-height: 90%; }
}
--------------------------------------------*/



/* alternative------------------------------
.bookimg {                       / 0.479 /
     width: 50%;
     height: auto;
}

@media screen and (min-width: 480px) {
.bookimg {                       / 480..639 /
     width: 33%;
     height: auto;
}
}

@media screen and (min-width: 640px) {
.bookimg {                       / 640+ /
     width: 25%;
     height: auto;
}
}
--------------------------------------------*/


 
/*
------------------------------------------------------------------------------------
LISTS
add space between bullet and number items for usability/readability
------------------------------------------------------------------------------------
*/


/*
NOT USED: this would be VERY good site-wide too (like PRE), but there are 
too many old special cases; changing pages as they are worked on to use 
this in-page, and drop <br><br>s (see also later alternative below);

LI {                           / feb18 mobile: redesign lists for small screens /
    margin-bottom: 10px;       / all double-space, else hard to read or tap /
}
*/



/* 
apr18: use <ul|ol class=spaced> to space lists' <li> only; a tactical 
alternative to the preceding strategic option, and minimizes edits;
note - some pages uses more/less pixels via in-page or in-tag styles;
*/

.spaced LI {
    margin-bottom: 7px;
}

.spacednested LI {
    margin-top: 7px;         /* better for nested lists */
}



/*
------------------------------------------------------------------------------------
GENERIC WHITE TABLES
------------------------------------------------------------------------------------
*/


/* feb18: white tables in latest-edition and purchase-pointers pages */
/* these don't break Chrome toolbar when shrunk: breaks iff nowrap? */
 
/* MORE ON TABLES (per trial and error):
   for tables, either don't use nowrap, or use "overflow-x: auto" to scroll; 
   the latter is best if wrapped text too weird or table too wide in general;
   otherwise, the table overflows window, causing 2 scrolls (with the toolbar);
   note that the overflow-x must be coded in a <div> surrounding the <table>; 
   also note that wrapping is probably preferred for mobile in most contexts;
   nowrap sometimes works anyhow, for very narrow columns (post-release-updates);

   minor update: ALSO may need scroll if tbl content is unbreakable and long 
   (e.g., urls, paths), and may need to allow that content to be broken too
   if it exceeds the size of its container (e.g., text > viewport=devicesize;)
*/


.bktable {                     /* better tables through nasty css */
    border-collapse: collapse; 
    background-color: white;
    /* border: 1px solid grey; */
    /* padding: 8px; */
}

.bktable th, .bktable td {     /* for all <th>+<td> descendants of <table class=bktable> */
    border: 1px solid grey;
}

@media screen and (min-width: 480px) {
.bktable {                     /* 480+: indent table on larger screens/windows */
     margin-left: 30px;
}
}



/*
------------------------------------------------------------------------------------
ETC
------------------------------------------------------------------------------------
*/


.notebox {                      /* a simple box for text */
    margin-left: 40px; 
    margin-right: 40px; 
    margin-top: 45px;
    margin-bottom: 20px;
    border-style: solid; 
    border-width: 1; 
    padding: 5px;
    background-color: cornsilk;
}



.subtlelink {                /* added feb-2018: rare lesser stuff, don't distract */
   font-weight: bold;        /* normal; <= a bit too subtle, really... */
   font-style: normal;       /* especially on touchscreens */
   text-decoration: none;    /* initially: "site" link on homepage */
   color: black
}

.subtlelink:hover {
    font-style: italic;           /* caveat: hover won't work on touchscreens */
    text-decoration: underline;   /* for consistency woth new footer style */ 
}



/* 
apr18: use class=this in an enclosing <div> to prevent following content from 
bleeding into components of the <div> when the screen is big or fonts are small;
this is an alternative to making the section a <table> with margins below it, 
which can wreak havoc with the placement of nested tables (e.g., about-lp.html);
*/

.nobleedin {
    overflow: auto;
}



/*
apr18: use class=this in a <span> around text to prevent it from being split 
for line wraps (e.g., toc dates in python-changes page); this prevents all 
splitting, dashes included - why is this part of "white-space" in css?...
*/

.nolinewrap {
    white-space: nowrap;       /* IE 8+ only? */
}



/*
------------------------------------------------------------------------------------
MARGINS [site-wide]
apr18: add a small bit of space on the left and right of the entire body, all pages
------------------------------------------------------------------------------------
*/


/*
initially to address distortion at the edges of curved screens on galaxy 7/8/9, 
but the extra whitespace makes text in general marginally more inviting (yes, pun);
downsides: (1) on android chrome it also shrinks the text font, and (2) on 
very small 4" screens like ipod touch, pixels are already a precious asset;
this required restyling purchase-pointers.html to be more flexible/responsive,
and is duplicated in training-main.css (like much else here);
*/ 


BODY {
   margin-left: 13px;             /* or padding: inside a border (margin outside) */
   margin-right: 13px;

   /* margin-top: auto; */        /* better to accept brower's default (4..7-ish) */
   /* margin-bottom: auto; */
}



/*
------------------------------------------------------------------------------------
HEADER FONTS - NOT USED
apr18: scale header fonts down on smaller screens? - smaller is not always better,
and reduces whtespace; done in training page's css only, for title text crunch;
see the end of learning-python.com/cgi/showcode.py?name=training-main.css;
------------------------------------------------------------------------------------


H1 {                         
    font-size: 150%;                * 0..479; alt: vw size specs, but not in all wb *
}
H2 {
    font-size: 125%;
}


@media screen and (min-width: 480px) {
H1 {                         
    font-size: 200%;                * 480+, go large=default *
}
H2 {
    font-size: 150%;
}
}
*/



/*
------------------------------------------------------------------------------------
SEE ALSO: in-page CSS with media queries and other magic in other pages:
purchase-pointers, sitesearch, python-activities-history, programs, ...
------------------------------------------------------------------------------------
*/



[Home] Books Programs Blog Python Author Training Search Email ©M.Lutz