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