1/*=============================================================================
2|
3| NAME
4|
5| StyleSheet.css
6|
7| DESCRIPTION
8|
9| External cascading style sheet for my web pages. Goes into the
10| top level directory of my web server. W3C validated as CSS level 3 + SVG
11|
12| USAGE
13|
14| To link to it in a hypertext document, put the following statement,
15|
16| <link rel="StyleSheet" href="StyleSheet.css" type="text/css" />
17|
18| within the <head>...</head> section of an HTML document.
19|
20| LEGAL
21|
22| Copyright (C) 1999-2025 by Sean Erik O'Connor. All Rights Reserved.
23| last updated 31 Aug 25
24|
25=============================================================================*/
26
27/*
28 * HTML elements are two main types.
29 *
30 * Block elements: Each one starts on a new line.
31 *
32 * +--------+
33 * | block1 |
34 * +--------+ <-- vertical margins collapse where blocks overlap.
35 * +--------+ <--
36 * | block2 |
37 * +--------+
38 *
39 * Inline elements: Go with the flow, left to right for English,
40 * right to left for Hebrew.
41 *
42 * +---------+ +---------+
43 * | inline1 | | inline2 |
44 * +---------+ +---------+
45 *
46 * Floating elements: Text flows around this element which is floated left.
47 *
48 * text text text text text text text text
49 * +---------+ text text text text text
50 * | element | text text text text text
51 * +---------+ text text text text
52 * Hier stehe Ich, Ich kann nicht anders! <----- <p style="clear: left;"> Hier stehe Ich, Ich kann nicht anders!
53 * But specifying text with "clear" makes the text start BELOW any element
54 * which is floated left above it.
55 * CSS Box Model
56 *
57 * +------------------------------------+
58 * | margin |
59 * | +-----------border------------+ |
60 * | | padding | |
61 * | | +-----------------+ | |
62 * | | |C O N T E N T | | |
63 * | | |+..........+ C O | | |
64 * | | |. floating . N T | | | <------ Floating elements stay within the CONTENT.
65 * | | |. element . E N | | |
66 * | | |+..........+ E N | | |
67 * | | |T C O N T E N | | |
68 * | | |T C O N T E N T | | |
69 * | | +-----------------+ | |
70 * | | padding | |
71 * | +-----------border------------+ |
72 * | margin |
73 * +------------------------------------+
74 *
75 * CSS Nomenclature
76 *
77 * selector
78 * |
79 * --+--- ---+
80 * em.wow |
81 * { |
82 * font-style: italic ; |
83 * --------+------------ |
84 * | |
85 * declaration #1 |
86 * +---- rule
87 * property value |
88 * | | |
89 * ----+----- -+-- |
90 * font-weight: bold ; |
91 * } --------+-------- |
92 * | ---+
93 * declaration #2
94 *
95 *
96 * Used in HTML as:
97 * <em class="wow">wowish talk talk</em>
98 */
99
100/*
101 * ------------------------------ Initial Settings -----------------------------
102 */
103
104/* CSS rule with universal selector to clear padding and margins in every
105 * element, overriding all web browser defaults, before we add our own values.
106 */
107*
108{
109 padding: 0 ;
110 margin: 0 ;
111}
112
113/*
114 * Make all MathJax equations a little bit larger. Override any user style sheet settings with !important
115 * This isn't the best solution since it interferes with the MathJax processor.
116 */
117.MathJax
118{
119 font-size: 120% !important;
120}
121
122/* For all elements from the <html> root on downwards, define CSS variables for my custom colors. Reduce the number of colors to harmonize. */
123:root
124{
125 --kweilin-black: rgb( 28, 28, 28 ) ;
126
127 --warm-brown: rgba( 187, 139, 92, 1) ;
128 --dark-brown: rgb( 150, 50, 50);
129
130 --light-gray: rgba( 100, 100, 100, 0.1 ) ;
131 --gray-blue: rgb( 220, 220, 240 ) ;
132 --light-blue-gray: rgba( 183, 217, 231, 1) ;
133 --dark-blue-gray: rgb( 100, 150, 150 ) ;
134 --canvas-gray: rgb( 150, 150, 170 ) ;
135 --art-gallery-blue-gray: rgb( 70, 70, 90 ) ;
136
137 --light-yellow-tint: rgba( 255, 255, 130, 0.7 ) ;
138
139 --light-red: rgb( 255, 0, 102 ) ;
140
141 --purple: rgb( 153, 0, 153 ) ;
142
143 --light-blue: rgb( 100, 150, 250 ) ;
144 --dark-blue: rgb( 0, 0, 153 ) ;
145 --darkest-blue: rgb( 0, 0, 80 ) ;
146 --art-gallery-blue: rgb( 70, 85, 251 ) ;
147 --very-light-blue: rgb( 220, 220, 240 ) ;
148 --light-blue-background: rgb( 222, 240, 255 ) ;
149 --lighter-blue-background: rgb( 170, 205, 205 ) ;
150 --light-blue-tint: rgba( 0, 100, 255, 0.2 ) ;
151 --light-blue-body-background: rgb( 170, 235, 245 ) ;
152 --light-blue-paper: rgb( 239, 247, 247 ) ;
153 --cyan-tint: rgb( 225, 240, 255 ) ;
154
155 /* Font Families brief description at W3C:
156 https://www.w3.org/Style/Examples/007/fonts.en.html */
157 --serif: "Times New Roman", Palatino, serif ;
158 --sans-serif: Verdana, Ariel, Helvetica, sans-serif ;
159 --monospace: "Courier New", "Courier", "Andale Mono", monospace ;
160 --cursive: "Snell Roundhand", "Apple Chancery", cursive ;
161 --fantasy: "Copperplate", "Luminari", fantasy ; /* These may not show on some computer systems and browsers. */
162}
163
164/*
165 * ------------------------------ Hyperlinks ----------------------------------
166 *
167 * CSS rules for pseudo-class selectors containing property/value pairs.
168 * They MUST be in this order due to CSS cascade rules.
169 */
170
171/* Unvisited links are dark blue. */
172a:link
173{
174 color: var(--dark-blue) ;
175 background-color: transparent ;
176}
177
178/* Visited links have purple text. You must have your browser history enabled
179 * and set to more than 0 days to see a visited link change color.
180 * Links stay colored until you clear the browser history and refresh the page.
181 */
182a:visited
183{
184 color: var(--purple) ;
185 background-color: transparent ;
186}
187
188/* Selected links have purple text until another element gets selected, including the page background itself. */
189a:focus
190{
191 color: var(--purple) ;
192 background-color: transparent ;
193}
194
195/* When the mouse cursor hovers over a hyperlink, change color to cyan. */
196a:hover
197{
198 color: var(--light-blue) ;
199 background-color: transparent ;
200 transition: all 0.1s ease-in-out ; /* Fade in and out gradually, both color and background color. */
201}
202
203/* When the mouse cursor hovers over a hyperlink containing an image, smoothly enlarge the image slightly. */
204a:hover img
205{
206 transform: scale( 1.04 ) ; /* Just larger enough to notice. */
207 /* Make scale changes smooth. That looks so much more sophisticated. */
208 transition-property: transform ;
209 transition-duration: 0.3s ;
210 transition-timing-function: ease-in-out ;
211}
212
213/* Clicked hyperlink is light red. */
214a:active
215{
216 color: var(--light-red ) ;
217 background-color: transparent ;
218}
219
220/*
221 * ------------------------------ Body Settings --------------------------------
222 */
223
224/* rem units will use the font size from this HTML element. */
225html
226{
227 font-size: 100% ;
228}
229
230 /* Default settings for all my main web pages. */
231body
232{
233 font-family: var( --sans-serif ) ; /* A wide sans-serif font is more readable on the web. */
234 font-size: 0.8rem ; /* Set the body font size a little smaller than the user's default browser setting. */
235 color: black ; /* Black text is easier to read. */
236
237 /* More vertical space between lines for more pleasant reading. Use a unitless font height multiplier.
238 Length and percentage percentage values can give scrunched text due to poor inheritance behavior. */
239 line-height: 1.7 ;
240
241 /* While waiting for the browser to load the background image of simulated blue paper, color the background solid light blue to match. */
242 background-color: var(--light-blue-body-background) ;
243 background-image: url( "Images/blueBackground.jpg" ) ;
244
245 background-repeat: repeat ; /* Tile the background. */
246 background-attachment: fixed ; /* Background image stays fixed while the foreground text scrolls. */
247}
248
249/* Mobile devices don't have hover and usually don't honor fixed background due to increased computation. */
250@media (hover: none)
251{
252 body
253 {
254 background-attachment: initial ;
255 }
256}
257
258/* Body pages of the technical report class have a background which is very light blue simulated
259 * paper for increased readability. Apply all the default body property/values first. This rule,
260 * which is more specific, since it uses a class selector, can override the body background-color,
261 * and background-image properties.
262 */
263body.technicalReport
264{
265 /* While waiting for the browser to load the background image of simulated blue paper, color the background solid light blue to match. */
266 background-color: var(--light-blue-paper ) ;
267 background-image: url( "Images/bluePaper.jpg" ) ;
268}
269
270/*
271 * ------------------------------ Grid Wrapper for the Body --------------------------
272 *
273 * Web Page Layout
274 *
275 * +--- head ------------------------------------------------------------------------+
276 * | metas |
277 * | link to stylesheet |
278 * +--- head ------------------------------------------------------------------------+
279 *
280 * +--- body, body.techincalReport --------------------------------------------------+
281 * | |
282 * | +------------ div.wrapper, div.technicalReport, div.titlePage ------------+ |
283 * | | | |
284 * | | SEE GRID LAYOUT BELOW | |
285 * | | | |
286 * | +------- div.wrapper -----------------------------------------------------+ |
287 * | |
288 * +--- body ------------------------------------------------------------------------+
289 *
290 * +--------------------------- div.wrapper --------------------------------------------------------+
291 * | |
292 * | (((grid columns))) |
293 * | |
294 * | [wrapper-aside-col] |
295 * | . |
296 * | . [wrapper-nav-col] |
297 * | . . |
298 * | . . [wrapper-content-col] |
299 * | . . . [wrapper-end-col] |
300 * | . . . . |
301 * | +-----+----------------- header.title -------------------------+ [wrapper-title-row] |
302 * | | | | |
303 * | | | h1 | |
304 * | a | hr | |
305 * | s | | |
306 * | i +--------------- header.navigation ----------------------+ [wrapper-nav-row] |
307 * | d | | |
308 * | e | nav hyperlink 1 ... nav hyperlink n | |
309 * | . | | |
310 * | b +---------+------- article.content ----------------------+ [wrapper-article-row] |
311 * | o | | | |
312 * | r i | nav | h2 | |
313 * | d m | | section | |
314 * | e a | link 1 | h3 | (((grid rows))) |
315 * | r g | . | section | |
316 * | | e | . | h4 | |
317 * | | | . | section | |
318 * | | | link n | ... | |
319 * | | | | | |
320 * | | +---------+------- footer.footer ------------------------+ [wrapper-footer-row] |
321 * | | | | |
322 * | | | legal and other stuff | |
323 * | | | | |
324 * | +-----+--------------------------------------------------------+ [wrapper-end-row] |
325 * | |
326 * +--------------------------- div.wrapper --------------------------------------------------------+
327 *
328 * The elements inside the wrapper are arranged in this order in the HTML, but of course
329 * the actual placement is specified by the grid.
330 *
331 * <header class="title">
332 * TITLE OF THIS WEB PAGE
333 * </header>
334 *
335 * <header class="navigation">
336 * HYPERLINKS
337 * </header>
338 *
339 * <aside class="border">
340 * BORDER IMAGE
341 * </aside>
342 *
343 * NOTE: title pages have no <nav> element
344 *
345 * <nav>
346 * HYPERLINKS
347 * </nav>
348 *
349 * <article class="content">
350 * MOST OF THE CONTENT IN THE WEB PAGE.
351 * </article>
352 *
353 * <footer class="footnote">
354 * COPYRIGHT
355 * </footer>
356 */
357
358/*
359 * wrapper-aside-col contains the margin with the border image.
360 * -We make slightly larger than the img.border class to give a thin space on the right.
361 * wrapper-nav-col is the vertical navigation sidebar.
362 * -Minimum is set wide enough so words in the navigation hyperlinks don't overflow to the right.
363 * -Maximum is clamped so very wide page doesn't have big stretched out navigation hyperlinks.
364 * wrapper-content-col is most of the page, so it gets the most relative space.
365 * -We use high fr number so that a very wide page shows more content and less navigation hyperlinks.
366 * Recall fr is the fraction of the width AFTER subtracting fixed widths such as 1.5rem.
367 *
368 * wrapper-*-row are set to auto because we want the default behavior of HTML flow; we don't want to set the height of rows.
369 */
370div.wrapper
371{
372 display: grid ; /* Items in this container are grid type. They are placed in 2D */
373 grid-template-columns: [wrapper-aside-col] 1.5rem [wrapper-nav-col] minmax( 9rem, 1fr ) [wrapper-content-col] 30fr [wrapper-end-col] ;
374 grid-template-rows: [wrapper-title-row] auto [wrapper-nav-row] auto [wrapper-article-row] auto [wrapper-footer-row] auto [wrapper-end-row] ;
375}
376
377/* Make up new CSS "subclasses" from which we can do "multiple inheritance".
378 *
379 * For example this wrapper inherits styles from both "wrapper" and "titlePage" classes.
380 * <div class="wrapper titlePage">
381 * ...
382 * <article>
383 * ...
384 */
385div.technicalReport
386{
387 /* Additional style rules for every element inside the wrapper. */
388}
389
390div.titlePage
391{
392 /* Additional style rules for every element inside the wrapper. */
393}
394
395/*
396 * See below in the articles section where we have this selector,
397 * div.titlePage article.content
398 * in which an article which is inside a div inherits from titlePage has a modified style.
399 */
400
401/*
402 * ------------------------------ Header ---------------------------------------
403 */
404
405/* Top of page header. */
406header.title
407{
408 /* The title spans multiple columns. */
409 grid-column: wrapper-nav-col / wrapper-end-col ;
410 grid-row: wrapper-title-row ;
411}
412
413/*
414 * ------------------------------ Navigation Bar -------------------------------
415 */
416
417/* Horizontal navigation menu bar at the top. */
418header.navigation
419{
420 display: flex ; /* Items within this container are of flexbox type. They flow in 1D horizontally. */
421 font-size: 0.75rem ;
422 justify-content: flex-start ; /* Put the first hyperlink at the beginning. */
423 flex-flow: row wrap ; /* Words in the navigation hyperlink wrap around to the next row. Note a single looooong word would overflow the navigation
424 menu into the content. */
425 grid-column: wrapper-nav-col / wrapper-end-col ;
426 grid-row: wrapper-nav-row ;
427 margin: 0.5rem ; /* One letter wide for top, right, bottom left margins. */
428
429 /* For debugging, place a dotted red line right outside the border.
430 outline-color: red;
431 outline-style: dotted;
432 */
433}
434
435/* Descendent combinator selector. Apply only to images somewhere within the navigation header heirarchy. */
436header.navigation img
437{
438 vertical-align: top ; /* Text bottom aligns with image middle. */
439 margin-left: 1rem ; /* Prevent text from running into the images. */
440}
441
442/* Hyperlinks in the navigation header have smaller margins. */
443header.navigation a
444{
445 margin-right: 0.5rem ;
446}
447
448/*
449 * ------------------------------ Navigation Button ----------------------------
450 */
451nav.backtotop > a
452{
453 display: block ; /* Convert hyperlinks from inline to block so we can color the background. Can't do that with inline elements. */
454 text-decoration: none ; /* Remove default hyperlink underlining. */
455 font-family: var(--sans-serif) ;
456 font-size: 0.8rem ; /* Unobtrusive size. */
457 padding-bottom: 0.4rem ; /* Center the text in the bubble. */
458 padding-left: 0.7rem ; /* Center the text in the bubble. */
459 border-radius: 1rem ; /* Rounded edges. */
460 width: 6rem ; /* Short enough to contain the words, "back to top". */
461 height: 1rem ;
462 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
463}
464
465/* Unclicked hyperlinks show up as black on blue */
466nav.backtotop > a:link
467{
468 color: var(--art-gallery-blue-gray) ;
469 background-color: var(--light-blue-background) ;
470}
471
472/* Applies to the <a href element in a nav but only when hovering. */
473/* For the special case of the <nav class="backtotop">Back to top</nav> element, specify the same look and feel. */
474nav.backtotop > a:hover
475{
476 color: white ; /* Text color white for contrast. */
477 background-color: var(--light-blue) ; /* Color the whole block background light blue. */
478}
479
480/* Selected links have purple text until another element gets selected, including the page background itself. */
481nav.backtotop > a:focus
482{
483 color: var(--purple) ;
484 background-color: var(--light-blue) ; /* Color the whole block background light blue. */
485}
486
487/*
488 * ------------------------------ Navigation Sidebar ---------------------------
489 */
490/* Navigation sidebars. */
491nav
492{
493 /* We span multiple rows and columns. */
494 grid-column: wrapper-nav-col / wrapper-content-col ;
495 grid-row: wrapper-article-row / wrapper-footer-row ;
496
497 color: black ;
498
499 background-color: transparent ;
500 padding: 0.2rem ;
501
502 border: none ;
503 top: 1rem ;
504 left: 0 ;
505 margin-left: 0.1rem ;
506
507 /* We can make the position fixed to the viewport, but then for small devices, a long
508 list of navigation items gets clipped off the bottom of the screen.
509 position: fixed ;
510 width: 5rem ;
511 margin-left: 1.4rem ;
512 margin-top: 8rem ;
513 */
514
515 /* For debugging, place a dotted red line right outside the border.
516 outline-color: red;
517 outline-style: dotted;
518 */
519}
520
521/*
522 * Child combinator selector for an unordered list which is a child of nav.
523 */
524nav > ul
525{
526 /* Remove all default padding and margins. */
527 padding: 0 ;
528 margin: 0 ;
529}
530
531/*
532 * Special rules when <li> is a child of the <ul> which is a child of nav.
533 */
534nav > ul > li
535{
536 list-style-type: none ; /* Remove list bullets. */
537 list-style: none ; /* Hack: because Firefox doesn't listen to list-style-type here. */
538 font-size: 0.55rem ; /* Small unobtrusive font. */
539 margin-bottom: 0.4rem ; /* Leave some space between blocks. */
540 background-color: var(--light-blue-background ) ;
541 border-radius: 1rem ; /* Rounded edges on list items. */
542}
543
544/* Special rules for a hyperlink <a href="..."></a> child of a li which is child of ul which is child of nav. */
545nav > ul > li > a
546{
547 display: block ; /* Convert hyperlinks from inline to block so we can color the background. Can't do that with inline elements. */
548 text-decoration: none ; /* Remove default hyperlink underlining. */
549 padding-left: 0.2rem ; /* Add space before and after the text so hover background isn't flush against the text. */
550 padding-right: 0.2rem ; /* Add space before and after the text so hover background isn't flush against the text. */
551 border-radius: 1rem ; /* Rounded edges on the hyperlinks. */
552}
553
554/* Unclicked hyperlinks show up as black on blue */
555nav > ul > li > a:link
556{
557 font-family: var(--sans-serif) ;
558 font-size: 0.7rem ; /* A little larger to be readable. */
559 color: var(--art-gallery-blue-gray) ;
560 background-color: var(--very-light-blue-background) ;
561}
562
563/* Applies to the <a href element in a nav but only when hovering. */
564/* For the special case of the <nav class="backtotop">Back to top</nav> element, specify the same look and feel. */
565nav > ul > li > a:hover
566{
567 color: white ; /* Text color white for contrast. */
568 background-color: var(--light-blue) ; /* Color the whole block background light blue. */
569 transition: all 0.15s ease-in-out ; /* Fade in and out gradually, both color and background color. */
570}
571
572/* Selected links have purple text until another element gets selected, including the page background itself. */
573nav > ul > li > a:focus
574{
575 color: var(--purple) ;
576 background-color: var(--light-blue) ; /* Color the whole block background light blue. */
577}
578
579/*
580 * ------------------------------ Article --------------------------------------
581 */
582/* Bulk of page goes into an article of content the class. It is divided into sections. */
583article.content
584{
585 grid-column: wrapper-content-col ;
586 grid-row: wrapper-article-row / wrapper-footer-row ;
587 margin-left: 1rem ;
588 margin-right: 2rem ;
589}
590
591/* Title pages have no navigation bar, i.e. no <nav>...</nav> in their html.
592 * Widen the article area to fill the space which the nav would have occupied.
593 */
594div.titlePage article.content
595{
596 grid-column: wrapper-nav-col / wrapper-end-col ;
597}
598
599/*
600 * ------------------------------ Aside ----------------------------------------
601 */
602/* Usually will contain an image of class border in the entire left vertical margin for decoration. */
603aside.border
604{
605 grid-column: wrapper-aside-col ;
606 grid-row: wrapper-title-row / wrapper-end-row ;
607}
608
609/*
610 * ------------------------------ Footnote -------------------------------------
611 */
612footer.footnote
613{
614 grid-column: wrapper-nav-col / wrapper-end-col ;
615 grid-row: wrapper-footer-row ;
616}
617
618/*
619 * -------------------------- Headings -----------------------------------------
620 */
621/* Ordinary page title. */
622h1
623{
624 font-family: var(--serif) ; /* Serif looks more elegant. Make it larger and centered since it's a title. */
625 font-size: 2.0rem ;
626 text-align: center ;
627 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
628}
629
630/*
631 * My name on the title page using a background image since I can't rely on Zapfino font being available on browsers.
632 */
633h1.name
634{
635 min-height: 2.6rem ; /* Have a minimum font height, otherwise, leave scalable with viewport. */
636 background-image: url( "Images/SeanErikOConnor.png" ) ; /* PNG image with transparent background. */
637 background-repeat: no-repeat ;
638 background-size: contain ; /* Make the image fit the box when we resize the page. */
639 background-position: center center ; /* Center the image in the box. */
640 margin-top: 0.5rem ; /* Spacing all around so image doesn't bump into horizontal bars, text or sides of viewport. */
641 margin-bottom: 0.6rem ;
642 margin-left: 1.0rem ;
643 margin-right: 1.0rem ;
644 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
645}
646
647/*
648 * Put my name into the title, but don't display it.
649 * This way text-only browsers can see it.
650 */
651h1.name > span
652{
653 display: none ;
654}
655
656/* Elegant green script page title. iPhone 12 has problems showing Brush Script MT, so use generic cursive
657 in this font stack.
658 */
659h1.stylish
660{
661 font-family: var(--cursive) ;
662 font-size: 2.7rem ;
663 text-align: center ;
664 color: #009900 ; /* Green */
665 background-color: transparent ;
666 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
667}
668
669/* Title for author and date. */
670h2
671{
672 font-family: var( --serif ) ;
673 font-size: 1.2rem ;
674 text-align: center ;
675 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
676}
677
678/* Title for email. */
679h2.email
680{
681 font-family: var( --serif ) ;
682 font-size: medium ;
683 text-align: center ;
684 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
685}
686
687/* Top level section heading. */
688h3
689{
690 font-family: var( --serif ) ;
691 font-size: 1.0rem ;
692 text-align: left ;
693 letter-spacing: 0.1rem ; /* Spread letters out a little horizontally. */
694 color: white ; /* White text on horizontal gradient colored brown to blue bar. */
695 background: linear-gradient(0.25turn, var(--warm-brown) 70%, var(--light-blue-gray)) ;
696 padding-left: 1rem ; /* Move the text away from the background edge a little. */
697 margin-top: 1rem ; /* Throw in extra line spacing above and below this heading. */
698 margin-bottom: 1rem ;
699 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
700
701 /* For debugging, place a dotted red line right outside the border.
702 outline-color: red;
703 outline-style: dotted;
704 */
705}
706
707/* Subsection heading. */
708h4
709{
710 font-family: var( --serif ) ;
711 font-size: 1.3rem;
712 text-align: left ;
713 border-top: none ; /* A silver underline extending across the page. */
714 border-left: none ;
715 border-right: none ;
716 border-bottom: solid ;
717 border-color: silver ;
718 border-width: 0.7rem ;
719 margin-top: 1rem ; /* Throw in extra line spacing above and below this heading. */
720 margin-bottom: 1rem ;
721 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
722}
723
724/* Sub-subsection heading. */
725h5
726{
727 /* Smaller dark blue text. */
728 font-family: var( --serif ) ;
729 font-size: 1.0rem ;
730 text-align: left ;
731 color: var(--dark-blue) ;
732 border-top: none ;
733 border-left: none ;
734 border-right: none ;
735 border-bottom: solid ; /* A thin dark blue underline extending across the page. */
736 border-color: var(--dark-blue) ;
737 border-width: 0.2rem ;
738 margin-top: 1rem ; /* Throw in extra line spacing above and below this heading. */
739 margin-bottom: 1rem ;
740 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
741}
742
743/* Sub-sub-subsection heading. */
744h6
745{
746 font-family: var( --serif ) ;
747 font-style: italic ;
748 font-size: 1.0rem ;
749 text-align: left ;
750 color: var(--warm-brown) ;
751 border-top: none ;
752 border-left: none ;
753 border-right: none ;
754 border-bottom-style: double ;
755 border-color: var(--warm-brown) ;
756 border-width: 0.2rem ;
757 margin-top: 1rem ; /* Throw in extra line spacing above and below this heading. */
758 margin-bottom: 1rem ;
759 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
760}
761
762
763/* Modify to match the lighter background. */
764body.technicalReport h3
765{
766 background: linear-gradient(0.25turn, var(--warm-brown) 60%, var(--light-blue-paper)) ;
767}
768
769/*
770 * --------------------------- Inline text ----------------------------------
771 *
772 */
773
774/*
775 * A quotation format.
776 */
777blockquote
778{
779 font-family: var(--cursive) ;
780 color: darkblue ;
781 font-size: 1.9rem;
782 line-height: 0.9 ;
783 width: 60% ;
784 margin-left: 6rem ;
785 padding: 0.5rem ;
786 border: solid ;
787 border-color: var(--light-gray) ;
788}
789
790/* Instead of the usual URL in the citation, place the person's name. */
791blockquote cite
792{
793 display: block ;
794 color: var(--darkblue ) ;
795 font-style: italic ;
796 font-size: 1.4rem; /* A wee bit smaller than the text. */
797 text-align: right ; /* Name goes to the right. */
798}
799
800/*
801 * Right before the name, put a hyphen (-).
802 * ::before is a CSS pseudoelement which is placed as the first child of "cite".
803 */
804blockquote cite::before
805{
806 content: "- " ;
807}
808
809/* Text for source code. Use a narrow monospace font so columns of code align.
810 * We don't need to use <br /> at the end of each line of code: pre text
811 * is displayed as written, not flowed. The font is the same size as
812 * ordinary paragaphs for compatibility.
813 */
814pre, code
815{
816 display: block ; /* The default for <code> and <pre> is inline, but we want a block like a paragraph. */
817 font-family: var(--monospace) ;
818 white-space: pre-line ; /* Collapse whitespace. But break lines at newlines, at <br> and as needed to fill the box. */
819 margin-left: 3rem ; /* Indent slightly more than a paragraph <p> */
820 margin-top: 1rem ;
821 margin-bottom: 1rem ;
822 /* For debugging, place a dotted red line right outside the border.
823 outline-color: red;
824 outline-style: dotted;
825 */
826}
827
828/* Comments. */
829pre, code > em
830{
831 font-style: italic ;
832 color: blue ;
833}
834
835/* Indent code. */
836pre, code > i
837{
838 color: black ;
839 margin-left: 2rem;
840}
841
842/* Double indent code. */
843pre, code > i > i
844{
845 color: black ;
846 margin-left: 2rem;
847}
848
849/* Triple indent code. */
850pre, code > i > i > i
851{
852 color: black ;
853 margin-left: 2rem;
854}
855
856/* Function definitions. */
857pre, code strong
858{
859 font-weight: bold ;
860 text-transform: none ;
861}
862
863/* Emphasized text --- bold italic. */
864em
865{
866 font-style: italic ;
867 font-weight: bold ;
868}
869
870/* Two lines for strikeout instead of one for fun. */
871s
872{
873 text-decoration-style: double ;
874}
875
876/* Wavy underline. Put it below the text so the line isn't interrupted by the font on top of it. */
877em.wavy
878{
879 text-decoration-line: underline ;
880 text-underline-position: under ;
881 text-decoration-style: wavy ;
882 font-weight: normal ; /* Don't need bold face font since we have a bold underline. */
883 font-style: normal ;
884}
885
886/* Highly emphasized text red on blue-gray. */
887em.warning
888{
889 color: red ;
890 background-color: var(--gray-blue) ; /* Gray with blue tint. */
891}
892
893/*
894 * But when it's within an h3 heading, just make the text red and don't
895 * alter the background color.
896 */
897h3 em.warning
898{
899 color: red ;
900 background-color: transparent ;
901}
902
903/* Highly emphasized text blue on blue-gray. */
904em.caution
905{
906 color: blue ;
907 background-color: var(--gray-blue) ; /* Gray with blue tint. */
908}
909
910/* Italic dark blue, but only when in an h3 heading. */
911h3 em.caution
912{
913 color: blue ;
914 background-color: transparent ;
915}
916
917/* Used for hotkey commands in Blender. */
918em.hotkey
919{
920 color: var(--dark-brown) ;
921 padding: 0.1rem ;
922 background-color: lightblue ;
923}
924
925/* Strong importance --- generally bold text. */
926strong
927{
928 text-transform: uppercase ; /* All bold caps. */
929 font-weight: bold ;
930}
931
932/* Fine print */
933small
934{
935 font-size: 0.7rem ;
936}
937
938/* Italic text, but colored blue for more emphasis. */
939i
940{
941 font-style: italic ;
942 color: var(--darkest-blue) ;
943}
944
945/* Yellow transparent marker. */
946mark
947{
948 color: black ;
949 background: var(--light-yellow-tint) ;
950}
951
952/*
953* ----------------------- Paragraphs ---------------------------------------
954*
955* For example,
956* <p>I am a ordinary paragraph</p>
957* <p class = "footnote">I am a footnote</p>
958*
959*/
960
961/* Ordinary paragraphs with justified text like a book. */
962p
963{
964 font-family: var(--sans-serif ) ;
965 text-align: justify ;
966 margin-left: 1rem ;
967 margin-top: 1rem ;
968 margin-bottom: 1rem ;
969 /* For debugging, place a dotted red line right outside the border.
970 outline-color: red;
971 outline-style: dotted;
972 */
973}
974
975/* Paragraphs with more vertical spacing. */
976p.spacedout
977{
978 font-size: medium ;
979 margin-left: 2rem ;
980 margin-top: 3rem ;
981 margin-bottom: 2rem ;
982}
983
984/* Footnotes. They are colored unobtrusively with smaller font. */
985p.footnote
986{
987 font-size: 0.7rem ;
988 color: gray ;
989 background-color: transparent ;
990 margin-top: 1rem ;
991 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
992}
993
994/* Paragraph with a box around it. */
995p.box
996{
997 display: inline-block ;
998 color: black ;
999 font-size: 0.8rem ;
1000 font-style: italic ;
1001 background-color: transparent ;
1002 padding: 0.5rem ;
1003 border: solid ;
1004 border-width: medium ;
1005 border-color: silver ;
1006}
1007
1008/* Red change bar. */
1009p.changed
1010{
1011 padding-left: 0.2rem ; /* Space the border more leftwards. */
1012 border-left: solid ;
1013 border-right: none ;
1014 border-top: none ;
1015 border-bottom: none ;
1016 border-left-width: thick ;
1017 border-color: red ;
1018 }
1019
1020/* Paragraph with very small print. */
1021p.fineprint
1022{
1023 font-size: 0.8rem ;
1024 font-style: italic ;
1025 background-color: transparent ;
1026 margin-left: 4rem ;
1027 margin-right: 4rem ;
1028}
1029
1030/* Used as an example only in my web page design page. */
1031p.example
1032{
1033 font-size: 0.8rem ; /* Contents is white text. */
1034 font-style: italic ;
1035 color: white ;
1036 background-color: var(--art-gallery-blue) ; /* Padding (background) color. */
1037 padding-left: 2rem ; /* Padding around the contents. */
1038 padding-right: 5rem ;
1039 padding-top: 1.5rem ;
1040 padding-bottom: 1rem ;
1041 border: dashed ;
1042 border-width: 0.3rem ;
1043 border-color: var(--light-red) ;
1044 margin-top: 1rem ; /* Margin is transparent. We show different offsets to illustrate. */
1045 margin-left: 1rem ;
1046 margin-bottom: 3rem ;
1047 outline-color: green; /* Show the area just outside the margin. */
1048 outline-style: dotted;
1049}
1050
1051/*
1052/*
1053 * ------------------------------ Scroll Boxes ---------------------------------
1054 *
1055 * Example:
1056 *
1057 * <div class="scrollBox"> <div class="scrollBoxContent">
1058 * text ...
1059 * text
1060 * </div> * </div>
1061 *
1062 * This was hard to do since the scroll bars overlay the rounded corners, hiding them.
1063 * I used a modified form of the solution suggested here:
1064 * https://stackoverflow.com/questions/16676166/apply-border-radius-to-scrollbars-with-css`
1065 *
1066 * We could also do .scrollBox instead of div.scrollBox which would apply to other HTML elements, not just div.
1067 */
1068div.scrollBox, div.scrollBoxTiny, div.scrollBoxSmall, div.scrollBoxMedium, div.scrollBoxLarge, div.scrollBoxHuge
1069{
1070 font-family: var(--monospace ) ;
1071 font-weight: bold ;
1072 font-size: 0.8rem ;
1073 /* Preserve newlines, collapse spaces and tabs, but wrap text.
1074 -Preserve newlines so we don't have to put <br> at the end of every line.
1075 -Collapse spaces and tabs. Text which is indented in the HTML will show up as left justified in the box.
1076 -Enable wrapping so when the browser window is made smaller, text will flow to fill the box.
1077 */
1078 white-space: pre-line ;
1079 height: 12rem ; /* Reduce for a particular box if there isn't enough text to avoid showing blank lines. */
1080 width: 80% ;
1081 color: black ;
1082 background-color: var(--cyan-tint) ;
1083 border: solid ;
1084 border-radius: 1rem ; /* Rounded corners. */
1085 border-width: 0.3rem ;
1086 border-color: var(--light-blue) ;
1087 margin-top: 1rem ; /* Vertical separation between adjacent boxes. */
1088 margin-left: 3rem ; /* Slightly inset from the left. */
1089 overflow: hidden ; /* Clip off any crap bleeding over from the content box below (if any). */
1090}
1091
1092div.scrollBoxTiny
1093{
1094 height: 3rem ;
1095}
1096
1097div.scrollBoxSmall
1098{
1099 height: 5rem ;
1100}
1101
1102div.scrollBoxMedium
1103{
1104 height: 7rem ;
1105}
1106
1107div.scrollBoxLarge
1108{
1109 height: 13rem ;
1110}
1111
1112div.scrollBoxHuge
1113{
1114 height: 35rem ;
1115}
1116
1117/* This is the scroll box content which has scroll bars and fits into the scroll box container. */
1118div.scrollBoxContent
1119{
1120 margin-top: -1.0rem ;
1121 /* I don't know why I see a vertical offset in the container, but negative margin eats it up it and it seems to work OK when scaling the browser window. */
1122 height: 100% ; /* Fit the contents to the container. */
1123 overflow: auto ; /* Let the browser decide about showing scroll bars. */
1124}
1125
1126/*
1127 * ------------------------------ Forms ----------------------------------------
1128 *
1129 * Here's an example where a form contains several lists.
1130 * Each list contains several fieldsets.
1131 * Each fieldset contains several pairs.
1132 * And each pair is a legend followed by an input control.
1133 *
1134 * <form id="LifePatternsForm">
1135 * <ul>
1136 * <li>
1137 * <!-- Game of Life clipboard controls -->
1138 * <fieldset>
1139 * <legend>Clipboard</legend>
1140 * <input type="button" onclick="gameOfLife.writeGameToClipboard()" value="Write" />
1141 * <input type="file" id="GameOfLifeLoadFile" name="files[]" multiple />
1142 * </fieldset>
1143 * </li>
1144 * </ul>
1145 * </form>
1146 */
1147
1148/* Clear properties for all forms. We'll set them below. */
1149form
1150{
1151 padding: 0 ;
1152 border: 0 ;
1153 margin: 0 ;
1154 overflow: auto ; /* Let the browser decide about showing scroll bars. */
1155}
1156
1157form img
1158{
1159 vertical-align: middle ;
1160}
1161
1162form ul
1163{
1164 list-style-type: none ; /* Remove bullets. */
1165 list-style-image: none ;
1166 padding: 0 ;
1167 margin: 0 ;
1168}
1169
1170/* Within a form, the fieldset is the container for the buttons, fields, controls, etc. */
1171form fieldset
1172{
1173 font-family: var(--sans-serif) ;
1174 font-size: smaller ;
1175 color: navy ;
1176
1177 padding: 0.1rem ; /* A little padding to make close together controls more readable. */
1178 border: 0 ;
1179 margin: 0 ;
1180
1181 background-color: lightskyblue ;
1182}
1183
1184/* Style for input controls of the button or file type within a fieldset container. */
1185fieldset input[ type = 'button' ], fieldset input[ type = 'file' ]
1186{
1187 font-style: italic ;
1188 cursor: pointer ; /* Hand when hovering over the button. */
1189 padding: 0.3rem ;
1190}
1191
1192/* Within each fieldset, float legends to the left and justify their text to the right.
1193 * The controls following each legend will then line up evenly along a column.
1194 */
1195fieldset legend
1196{
1197 text-align: right ;
1198 width: 12rem ;
1199 margin-right: 1.5rem ;
1200 float: left ;
1201}
1202
1203/* Style text within all fieldsets. */
1204fieldset textarea
1205{
1206 font-family: var(--monospace ) ;
1207 color: navy ;
1208 cursor: auto ; /* Vertical bar cursor when hovering over text. */
1209 background-color: var(--very-light-blue) ;
1210 resize: none ; /* Don't allow user to resize, only scroll. */
1211 width: 100% ;
1212}
1213
1214/*
1215 * --------------------- Images ---------------------------------------------
1216 */
1217
1218/* Images by themselves are centered in the containing block and have a decorative frame.
1219 *
1220 * <img class="centered" src="Images/BlenderScreenshot.png" alt="" />
1221 */
1222
1223/* Fake inheritance in CSS by declaring common properties for all three image classes first.
1224 * then overriding properties for each individual class.
1225 */
1226img.centered, img.centeredsmaller, img.centeredsmallest
1227{
1228 display: block ; /* Default HTML ordering. */
1229 padding: 0.5rem 0.5rem 0.5rem 0.5rem ; /* Thin region of background color surrounding the image. */
1230 background-color: var(--dark-blue-gray) ;
1231 border: solid; /* Frame surrounding the background. */
1232 border-width: 0.3rem; /* Thin frame. */
1233 border-color: var(--kweilin-black) ;
1234 border-radius: 1rem ; /* Curved edges for image frame. */
1235 margin-left: auto ; /* Margin surrounding the border. Center the image horizontally. */
1236 margin-right: auto ;
1237 margin-top: 2rem ; /* Small fixed margin gives added space above and below. */
1238 margin-bottom: 2rem ;
1239 max-width: 100% ; /* Image won't be larger than its containing block. */
1240}
1241
1242img.centeredsmaller
1243{
1244 max-width: 60% ; /* Shrink the image smaller than its containing block. */
1245}
1246
1247img.centeredsmallest
1248{
1249 max-width: 25% ;
1250}
1251
1252/* Make an SVG image look like a drawing on top of the paper. */
1253img.transparent
1254{
1255 background: transparent ;
1256 max-width: 100% ; /* Image won't be larger than its containing block.*/
1257}
1258
1259/*
1260 * Images in a technical report (all descendents of body) have a lighter frame color to match the lighter body.
1261 */
1262body.technicalReport img.centered img.centeredsmaller img.centeredsmallest
1263{
1264 background-color: var(--lighter-blue-background) ;
1265}
1266
1267/* Inline images which are children of paragraphs (e.g. equations),
1268 * and any images which are descendants of table rows and lists.
1269 */
1270p > img, li img, td img
1271{
1272 /* Make the image a little larger than the font height. That stops the image from shrinking and
1273 * being aliased as the browser crudely resamples the natural image height.
1274 */
1275 min-height: 1.3rem ;
1276 vertical-align: middle ; /* Align these images to the middle of the text line vertically. */
1277 margin-bottom: 0.5rem ; /* Leave a little room at the bottom so images won't run together if they are adjacent list items. */
1278}
1279
1280/* Image within a hotkey combination which has a box around the text. */
1281em.hotkey > img
1282{
1283 vertical-align: middle ; /* Align these images to the middle of the text line vertically. */
1284 background-color: transparent ;
1285 border: solid ;
1286 border-width: medium ;
1287 border-color: silver ;
1288 margin-bottom: 0.5rem ; /* Leave a little room at the bottom so images won't run together if they are adjacent list items. */
1289}
1290
1291/*
1292 * Left page border in an aside element using an image.
1293 *
1294 * <p>
1295 * <img class="border"
1296 * src="../Images/otherInterestsBorderImage.jpg"
1297 * alt="Art Gallery Image Border." />
1298 * </p>
1299 */
1300img.border
1301{
1302 display: block ; /* Normal CSS flow in a page. */
1303 /* Blueish color until we load the image. */
1304 background-color: var(--light-blue-body-background) ; /* Image fills the entire area vertically. Make it thin since it's just for decoration. */
1305 top: 0 ;
1306 left: 0 ;
1307 width: 1.2rem ;
1308 height: 100% ;
1309 /* Give us a thin vertical dividing line on the right of the image for contrast. */
1310 border-right-style: solid ;
1311 border-right-width: 0.1rem ;
1312 border-right-color: blue ;
1313}
1314
1315/*
1316 * ----------------------- Canvas--------------------------------------------
1317 */
1318
1319/* Put a blue dotted line around the canvas.*/
1320canvas
1321{
1322 border-width: 0.2rem ;
1323 border-style: dotted ;
1324 border-color: blue ;
1325 /* Image won't be larger than its containing block.
1326 * The <canvas> element will usually be inside the <body> element, making <body> its containing block.
1327 * And <body> is the viewport on mobile devices or browser window on desktops.
1328 */
1329 max-width: 100% ;
1330}
1331
1332/*
1333 * ---------------------- Horizontal rule -----------------------------------
1334 */
1335/* Horizontal rule. */
1336hr
1337{
1338 height: 0.3rem ;
1339 background-image: url( "Images/blueBar.png" ) ;
1340 background-color: var(--dark-blue) ;
1341 border: none ;
1342 margin-left: 1rem ;
1343 margin-right: 1rem ;
1344 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
1345}
1346
1347/*
1348* --------------------- Figures --------------------------------------------
1349*
1350* Figure floats to the left, letting text wrap around to the right.
1351* It contains one or more images which flow downwards followed by a figure caption.
1352*
1353* <figure>
1354* <img src="topImage.jpg" >
1355* <img src="botImage.jpg" >
1356*
1357* <figcaption>
1358* These are two figure images.
1359* </figcaption>
1360* </figure>
1361*
1362* <p>
1363* The figure will float to the left and this text will flow around to the right.
1364* </p>
1365*
1366* To float the figure to the right, use
1367* <figure style="float: right">
1368*/
1369figure
1370{
1371 display: flex ; /* Figure is a flex container. Items flow in 1D downwards. */
1372 flex-flow: column ;
1373 justify-content: flex-start ; /* Justify the first item at the left of this container. */
1374 text-align: center ;
1375 background-color: var(--dark-blue-gray ) ;
1376 padding: 1rem 1rem 1rem 1rem ; /* Padding is colored same as the background color. */
1377 border: 0.2rem silver solid ; /* Border. */
1378 border-radius: 1rem ; /* Rounded corners. */
1379 margin: 1.5rem 1.5rem 1.5rem 1.5rem ; /* Space it away from the other elements in the page. */
1380 float: left ; /* Float the figure to the left and have text flow around it to the right. */
1381 max-width: 35% ; /* Text flows around the figure. */
1382}
1383
1384/* Figure background in a technical report has a lighter color to match the lighter body. */
1385body.technicalReport figure
1386{
1387 background-color: var(--lighter-blue-background) ;
1388}
1389
1390figcaption
1391{
1392 font-style: italic ;
1393 font-size: smaller ;
1394 text-indent: 0 ;
1395}
1396
1397/* Apply only to an image inside the figure.
1398 * Since we use a descendent selector so this also works for an image inside an href inside the figure.
1399 */
1400figure img
1401{
1402 max-width: 100% ; /* Image isn't larger than its containing block. */
1403 padding-left: 0.5rem ; /* In case we have multiple images, leave some space between. */
1404 padding-right: 0.5rem ;
1405 padding-top: 0.5rem ;
1406 padding-bottom: 0.5rem ;
1407}
1408
1409/* Apply only to a hyperlink directly inside class figure. */
1410figure > a
1411{
1412 padding-left: 0.5rem ; /* In case we have multiple hyperlinks, leave some space between. */
1413 padding-right: 0.5rem ;
1414}
1415
1416/*
1417 * --------------------- Illustrated Paragraph ----------------------------------------------
1418 *
1419 * Paragraph which starts with an image, and contains text.
1420 *
1421 * <div class="illustratedparagraph">
1422 * <p>
1423 * <img src=... >
1424 * <p>
1425 * </div>
1426 *
1427 * <p>
1428 * The text in this second paragraph will flow to the right.
1429 * </p>
1430 *
1431 */
1432div.illustratedparagraph
1433{
1434 float: left ; /* Float this paragraph to the left and have text and other elements flow around to the right. */
1435 margin-left: 0 ; /* Hard against left edge of page. */
1436 margin-bottom: 1rem ; /* Leave space at the bottom. */
1437 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
1438 /* For debugging, place a dotted red line right outside the border.
1439 outline-color: purple ;
1440 outline-style: dotted ;
1441 */
1442}
1443
1444/* Only within an illustrated paragraph, inside the first hyperlink,
1445 * capitalize the text.
1446 */
1447div.illustratedparagraph a:first-child
1448{
1449 text-transform: uppercase ; /* All bold caps. */
1450}
1451
1452/* Icon image. */
1453div.illustratedparagraph img
1454{
1455 float: left ; /* Inside this illustrated paragraphs, the image floats to the left, and text flows around to the right. */
1456 border: none ; /* Turn off the hyperlink border on the image. */
1457 margin-right: 0.6rem ; /* Leave space between image and text. */
1458 margin-bottom: 0.3rem ;
1459 max-width: 30% ; /* Shrink the image no larger than a fraction of its containing block. */
1460 /* Let text flow around the image in a circle instead of a square box.
1461 shape-outside: circle(50%);
1462 */
1463 /* For debugging, place a dotted red line right outside the border.
1464 outline-color: blue ;
1465 outline-style: dashed ;
1466 */
1467}
1468
1469/* This is special text for use to the right of the image. */
1470div.illustratedparagraph p
1471{
1472 text-align: justify ;
1473 background-color: transparent ;
1474}
1475
1476/*
1477 * ----------------------- Lists --------------------------------------------
1478 */
1479
1480/* Unordered list with a slightly smaller font,
1481* small Images for bullets.
1482*/
1483ul
1484{
1485 font-family: var(--sans-serif ) ; /* Inherit the font size from body. */
1486 padding-left: 0.5rem ;
1487 margin-left: 2rem ;
1488 margin-top: 1.5rem ;
1489 margin-bottom: 1.5rem ;
1490 list-style-type: none ; /* Remove list bullets -- we will use images instead. */
1491 list-style-image: url( "Images/smallBlueBullet.png" ) ;
1492 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
1493 /* For debugging, place a dotted red line right outside the border.
1494 outline-color: red;
1495 outline-style: dotted;
1496 */
1497}
1498
1499/* Ordered list with a slightly smaller font. */
1500ol
1501{
1502 font-family: var(--sans-serif ) ; /* Inherit the font size from body. */
1503 padding-left: 0.5rem ;
1504 margin-left: 3rem ;
1505 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
1506}
1507
1508/* Unordered list with small black disks. */
1509ul.bullet
1510{
1511 font-size: 0.9rem ;
1512 padding-left: 0.5rem ;
1513 margin-left: 4rem ;
1514 list-style-image: none ; /* Remove list bullets. */
1515 list-style-type: disc ;
1516}
1517
1518/* Unordered list with small black rectangles and text wrap around. */
1519ul.minorBullet
1520{
1521 font-size: 0.9rem ;
1522 list-style-image: none ; /* Remove list bullets. */
1523 list-style-type: square ;
1524 list-style-position: inside ;
1525}
1526
1527/*
1528 * ----------------------- Tables -------------------------------------------
1529 */
1530
1531/* Default tables have a solid black border and are as wide as the page.
1532 Collapse internal borders.
1533 */
1534table
1535{
1536 border-collapse: collapse ;
1537 border-style: solid ;
1538 border-color: var(--art-gallery-blue) ;
1539 border-width: thin ;
1540 width: 100% ;
1541}
1542
1543/* Both table rows and columns have thin borders. */
1544td, th
1545{
1546 border-style: solid ;
1547 border-color: var(--art-gallery-blue) ;
1548 border-width: thin ;
1549}
1550
1551/* But table header rows are also lightly colored to make them stand out. */
1552th
1553{
1554 font-weight: bold ;
1555 background: var(--light-blue-tint) ;
1556}
1557
1558/* Table caption appears above the table. */
1559caption
1560{
1561 font-weight: bold ;
1562 font-size: larger ;
1563}
1564
1565/*
1566 * ----------------------- Software Viewing and Downloading --------------------------------------
1567 *
1568 * Use a grid instead of a table.
1569 * We'll override the <ul> and <li> elements so it looks like an unordered list in the HTML.
1570 *
1571 */
1572
1573ul.download
1574{
1575 display: grid ;
1576 grid-template-columns: 2fr 5fr 1fr 1fr ; /* Use fractions of the free space (not including fixed size cols (there aren't any here). */
1577 column-gap: 0.1rem ;
1578 row-gap: 0.1rem ;
1579 list-style-type: none ; /* Turn off the default image bullets. */
1580 list-style-image: none ;
1581 /* Text a little smaller to fit better on narrow mobile screens. */
1582 font-size: smaller ;
1583}
1584
1585/*
1586 * Where each row is placed in the grid columns.
1587 * outline collapses the lines around each grid cell so they don't get duplicated.
1588 */
1589li.downloadName
1590{
1591 grid-column-start: 1 ;
1592 outline: thin solid var(--art-gallery-blue) ;
1593}
1594
1595li.downloadDescription
1596{
1597 grid-column-start: 2 ;
1598 outline: thin solid var(--art-gallery-blue) ;
1599}
1600
1601li.downloadView
1602{
1603 grid-column-start: 3 ;
1604 outline: thin solid var(--art-gallery-blue) ;
1605}
1606
1607li.download
1608{
1609 grid-column-start: 4 ;
1610 outline: thin solid var(--art-gallery-blue) ;
1611}
1612
1613li.downloadFooter
1614{
1615 grid-column: 1 / 5 ;
1616 outline: thin solid var(--art-gallery-blue) ;
1617}
1618
1619
1620/*
1621 * ----------------------- Tooltips -----------------------------------------
1622 *
1623 * Show tooltip contents (text only) when hovering a mouse or pen controlled cursor over the tooltip element.
1624 * Mobile devices don't support hover, even with long press gestures.
1625 *
1626 * Sample HTML:
1627 * <span data-text="I am the tooltip contents." class="I'm a tooltip: hover over me to see tooltip contents!">Tooltip text</span>
1628 */
1629@media (any-hover: hover)
1630{
1631 /* Make the style visible as a tooltip. */
1632 span.tooltip
1633 {
1634 /* Since we don't specify any top/bottom/left/right property/values which would shift this element
1635 relative TO ITSELF, this is the same as the default static positioning, i.e. normal document flow.
1636 Why do we need this? Because the child class span.tooltip:before uses absolute positioning;
1637 it needs this parent class to have either relative or absolute positioning for that to work. */
1638 position: relative ;
1639
1640 /* Indicate the tooltip be a dashed line below its text. */
1641 border-bottom: 0.2rem dashed var(--art-gallery-blue-gray);
1642 }
1643
1644 /* Tooltip content.
1645 * This child class (:before) of the parent class (span.tooltip) is a pseudoclass which inserts content
1646 * before the first item in the tooltip.span class, i.e. at the start of the tooltip text. It doesn't
1647 * actually change the DOM. Actually it won't be inserted at all: we will take the position of this
1648 * tooltip content out of the normal document flow anyway by using absolute positioning.
1649 * And that's because we want it hover over the tooltip.
1650 */
1651 span.tooltip:before
1652 {
1653 /* Pull the tooltip text from the parent HTML span data-text value. */
1654 content: attr( data-text ) ;
1655
1656 text-align: center ;
1657 color: white ;
1658 background: darkblue ;
1659
1660 /* Wide enough for a reasonable chunk of text when hovering. */
1661 width: 10rem ;
1662
1663 /* Take us out of the normal document flow. The position is relative to the initial containing block,
1664 * which is the edge of the padding box of the nearest ancestor element which has a relative position,
1665 * in our case, span.tooltip. So long story short, the tooltip contents will hover in a box whose upper
1666 * left corner is the upper left corner padding of the tooltip text. But then we
1667 * position using top and transform.
1668 */
1669 position: absolute ;
1670
1671 left: 50% ; /* Place left edge of box 1/2 to the right in the tooltip. */
1672 transform: translateX( -50% ) ; /* Then shift it 1/2 way up to center horizontally. */
1673 top: -1rem ; /* Center vertically. */
1674
1675 padding: 1rem ;
1676 border-radius: 1.5rem ;
1677
1678 /* Tooltip contents is stacked on top of all other display elements. */
1679 z-index: 99 ;
1680
1681 /* Won't show up until we hover. */
1682 opacity: 0 ;
1683
1684 /* Fade in when we set opacity = 1 during hover. */
1685 transition: 0.3s opacity ;
1686 transition-delay: 100ms ;
1687 }
1688
1689 /* Mouse cursor is hovering either over the box of the parent element span.tooltip
1690 * OR the box of the child class span.tooltip:before. In either case, make it opaque.
1691 */
1692 span.tooltip:hover:before
1693 {
1694 opacity: 1 ;
1695 }
1696}
1697
1698/*
1699 * ----------------------- Art Gallery --------------------------------------
1700 */
1701
1702/* Art gallery: container for paintings which looks like a wall where we hang the art. */
1703div.gallery
1704{
1705 display: flex ; /* Items within this container are of flexbox type. They flow in 1D horizontally. */
1706 justify-content: flex-start ; /* Put the first painting at the beginning. */
1707 flex-flow: row wrap ; /* Paintings wrap around to the next row. */
1708 overflow: auto ; /* Let the browser decide about showing scroll bars. On a mobile device paintings may be too wide for the gallery background. */
1709 background-color: var(--art-gallery-blue-gray) ; /* Art gallery wall is bluish gray. */
1710 background-position: top left ;
1711 background-attachment: fixed ;
1712 background-repeat: repeat ;
1713
1714 /* Deep blue frame for the art gallery. */
1715 border-color: var(--art-gallery-blue ) ;
1716}
1717
1718/* Mobile devices don't have hover and usually don't honor fixed background
1719 due to increased computation. So just let background scroll with the content. */
1720@media (hover: none)
1721{
1722 div.gallery
1723 {
1724 background-attachment: initial ;
1725 }
1726}
1727
1728/* A painting contains a canvas and title. */
1729div.painting
1730{
1731 text-align: center ;
1732 background-color: transparent ;
1733
1734 /* Items within this container are of flexbox type. They flow in 1D vertically. */
1735 display: flex ;
1736 flex-direction: column ;
1737}
1738
1739/* Title of a canvas. */
1740div.painting p
1741{
1742 color: silver ;
1743 font-style: italic ;
1744 font-size: smaller ;
1745 text-align: center ;
1746}
1747
1748/* A canvas is an image with a black frame. */
1749div.painting img
1750{
1751 background-color: var(--canvas-gray ) ; /* Silvery gray background behind the canvas of the painting. When we pad, this will show between canvas and picture frame.
1752 * Also if the canvas is round, i.e. image is rectangular, but alpha = 0 outside the circular canvas, this will show.
1753 */
1754 max-width: 18rem ; /* Fit the width of the screen on an iPhone 12 Pro */
1755 padding: 0.2rem 0.2rem 0.2rem 0.2rem ; /* Between the painting canvas and the frame. */
1756 border-style: solid ; /* The picture frame is black and rather thick. */
1757 border-color: black ;
1758 border-width: 0.8rem ;
1759 margin: 0.3rem 0.3rem 0.3rem 0.3rem ; /* A little bit of margin so that the picture frames don't run into each other. */
1760 /* For debugging, place a dotted red line right outside the border.
1761 outline-color: red;
1762 outline-style: dotted;
1763 */
1764}
1765
1766/* Use an ID selector to apply to one painting only. Turn off the padding because
1767 * the image has its own elliptical black frame already.
1768 */
1769div.painting img#GirlFromKweilin
1770{
1771 background-color: var(--kweilin-black ) ;
1772 padding: 0 0 0 0 ;
1773}
1774
1775/*
1776 * ------------------------------ Smartphone Portrait Mode -----------------
1777 *
1778 * Save space by removing the border image and the navigation sidebar.
1779 *
1780 */
1781@media screen and (orientation: portrait) and (width < 500px)
1782{
1783 /* Change the wrapper to have only 1 columns since we omit the left navigation bar and the border image. */
1784 div.wrapper
1785 {
1786 grid-template-columns: 1fr ;
1787 }
1788
1789 aside.border
1790 {
1791 display: none ;
1792 }
1793
1794 nav
1795 {
1796 display: none ;
1797 }
1798}
1799
1800/*
1801 * ------------------------------ Printing ----------------------------------
1802 */
1803
1804/* For printing, omit the navigation and borders.
1805 * To test, do print preview from a web browser to see the pdf file.
1806 * Or to test on a browser in display mode, temporarily replace "print" with "screen".
1807 */
1808@media print
1809{
1810 /* Turn off the grid. */
1811 div.wrapper
1812 {
1813 display: block ;
1814 }
1815
1816 /* Turn off the navigation sidebars. */
1817 nav, header.navigation
1818 {
1819 display: none ;
1820 }
1821
1822 /* Turn off decorative border Images. */
1823 aside.border
1824 {
1825 display: none ;
1826 }
1827
1828 /* Leave less margin on the left of the page since border image is gone.
1829 * Remove all background images (printers don't print white).
1830 */
1831 body
1832 {
1833 background: white ;
1834 margin-left: 3rem ;
1835 margin-right: 2rem ;
1836 }
1837
1838 /* Turn off scrolling in scroll boxes and show the whole content. */
1839 div.scrollBox, div.scrollBoxContent
1840 {
1841 background: white ; /* Remove background color (printers don't print white). */
1842 overflow: visible ; /* No scrollbars; just show the whole content, even if it goes outside the container. */
1843 white-space: pre-wrap ; /* Preserve whitespace. Wrap when necessary and on newlines. */
1844 width: auto ; /* Expand the box size to whatever necessary. */
1845 height: auto ; /* Expand the box size to whatever necessary. */
1846 }
1847
1848 figure
1849 {
1850 background: white ; /* Remove background color (printers don't print white). */
1851 }
1852
1853 div.gallery
1854 {
1855 background: white ; /* Remove background color (printers don't print white). */
1856 }
1857}