@charset "utf-8";
/*
© 2019–2020 Richard W. Adams

A “preface,” as used on this site, is the first major content section on the page. It does not include navigational arrows or
similar features. Intros are used almost exclusively in hymn and biography pages. The layout behavior is the same on both
page types, hence this separate style sheet. 

A “preface” is implemented as a CSS flex box, with one or more columns. 
________________________

The leftmost and rightmost columns (if present), contain images such as portraits or illustrations. There may be 
zero or more of these columns.  NOTES:

1. Even if present in the HTML markup, these images will not rendered if they don't fit on on narrow screens.
    For this reason, the images must inside HTML <figure> tags, so both image and captions are hidden when 
    appropriate.

2. Since CSS has no knowledge of an image's orientation (e.g., whether a portrait is facing left or right),. 
    The page author is responsible for deciding whether an image should precede or follow the text column.
    The recommended practice is to have portraits face the center of the screen.
________________________

The non-image column (class preface-text) is required & contains text. On a hymn page, the column typically has author & 
composer data, links to media  (MIDI, PDF, etc.) &  possibly copyright notices,  background story, etc.  On a biography 
page, it has dates & locations of birth, death & burial, cremation,  pseudonym(s), etc.
________________________
 */
@import "base.css";

#preface {
	border-top: 2px solid black;
	display:  flex;
	overflow: scroll;
	align-items: center;
	padding-top: 2ex;
	padding-bottom: 2ex;
	max-width: 100%;
}
#preface .copyright, preface .license { text-align: center; }
#preface > div { margin: .8em .5em; }
#preface figure { margin-left: .5em; margin-right: .5em; }
/* #preface img  { border: 8px ridge silver; border-radius: 20px; } */
#preface img:not([alt="cc-license"])  { border: 8px ridge silver; border-radius: 20px; }
#preface ul { padding-left: 3em } 
@media screen and (max-width: 600px) { .preface-text { min-width: 15em } }  /* Ensure legibility on small screens.*/

/* Center preface only on wide *OR* tall screens: Centering prevents scrolling of flex items to left. */
@media screen and (min-width: 800px) , screen and (min-height: 800px)  { #preface { justify-content: center; } }