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 23 Jun 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
931/* Highly emphasized text red on blue-gray. */
932em.warning
933{
934 color: red ;
935 background-color: var(--gray-blue) ; /* Gray with blue tint. */
936}
937
938/*
939 * But when it's within an h3 heading, just make the text red and don't
940 * alter the background color.
941 */
942h3 em.warning
943{
944 color: red ;
945 background-color: transparent ;
946}
947
948/* Highly emphasized text blue on blue-gray. */
949em.caution
950{
951 color: blue ;
952 background-color: var(--gray-blue) ; /* Gray with blue tint. */
953}
954
955/* Italic dark blue, but only when in an h3 heading. */
956h3 em.caution
957{
958 color: blue ;
959 background-color: transparent ;
960}
961
962/* Used for hotkey commands in Blender. */
963em.hotkey
964{
965 color: var(--dark-brown) ;
966 padding: 0.1rem ;
967 background-color: lightblue ;
968}
969
970/* Strong importance --- generally bold text. */
971strong
972{
973 text-transform: uppercase ; /* All bold caps. */
974 font-weight: bold ;
975}
976
977/* Fine print */
978small
979{
980 font-size: 0.7rem ;
981}
982
983/* Italic text, but colored blue for more emphasis. */
984i
985{
986 font-style: italic ;
987 color: var(--darkest-blue) ;
988}
989
990/* Yellow transparent marker. */
991mark
992{
993 color: black ;
994 background: var(--light-yellow-tint) ;
995}
996
997/*
998* ----------------------- Paragraphs ---------------------------------------
999*
1000* For example,
1001* <p>I am a ordinary paragraph</p>
1002* <p class = "footnote">I am a footnote</p>
1003*
1004*/
1005
1006/* Ordinary paragraphs with justified text like a book. */
1007p
1008{
1009 font-family: var(--sans-serif ) ;
1010 text-align: justify ;
1011
1012 margin-left: 1rem ;
1013 margin-top: 1rem ;
1014 margin-bottom: 1rem ;
1015
1016 /* For debugging, place a dotted red line right outside the border.
1017 outline-color: red;
1018 outline-style: dotted;
1019 */
1020}
1021
1022/* Paragraphs with more vertical spacing. */
1023p.spacedout
1024{
1025 font-size: medium ;
1026
1027 margin-left: 2rem ;
1028 margin-top: 3rem ;
1029 margin-bottom: 2rem ;
1030}
1031
1032/* Footnotes. They are colored unobtrusively with smaller font. */
1033p.footnote
1034{
1035 font-size: 0.7rem ;
1036 color: gray ;
1037
1038 background-color: transparent ;
1039
1040 margin-top: 1rem ;
1041
1042 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
1043}
1044
1045/* Paragraph with a box around it. */
1046p.box
1047{
1048 display: inline-block ;
1049
1050 color: black ;
1051 font-size: 0.8rem ;
1052 font-style: italic ;
1053
1054 background-color: transparent ;
1055 padding: 0.5rem ;
1056
1057 border: solid ;
1058 border-width: medium ;
1059 border-color: silver ;
1060}
1061
1062/* Red change bar. */
1063p.changed
1064{
1065 padding-left: 0.2rem ; /* Space the border more leftwards. */
1066
1067 border-left: solid ;
1068 border-right: none ;
1069 border-top: none ;
1070 border-bottom: none ;
1071 border-left-width: thick ;
1072 border-color: red ;
1073 }
1074
1075/* Paragraph with very small print. */
1076p.fineprint
1077{
1078 font-size: 0.8rem ;
1079 font-style: italic ;
1080
1081 background-color: transparent ;
1082
1083 margin-left: 4rem ;
1084 margin-right: 4rem ;
1085}
1086
1087/* Used as an example only in my web page design page. */
1088p.example
1089{
1090 font-size: 0.8rem ; /* Contents is white text. */
1091 font-style: italic ;
1092 color: white ;
1093
1094 background-color: var(--art-gallery-blue) ; /* Padding (background) color. */
1095 padding-left: 2rem ; /* Padding around the contents. */
1096 padding-right: 5rem ;
1097 padding-top: 1.5rem ;
1098 padding-bottom: 1rem ;
1099
1100 border: dashed ;
1101 border-width: 0.3rem ;
1102 border-color: var(--light-red) ;
1103
1104 margin-top: 1rem ; /* Margin is transparent. We show different offsets to illustrate. */
1105 margin-left: 1rem ;
1106 margin-bottom: 3rem ;
1107
1108 outline-color: green; /* Show the area just outside the margin. */
1109 outline-style: dotted;
1110}
1111
1112/*
1113/*
1114 * ------------------------------ Scroll Boxes ---------------------------------
1115 *
1116 * Example:
1117 *
1118 * <div class="scrollBox"> <div class="scrollBoxContent">
1119 * text ...
1120 * text
1121 * </div> * </div>
1122 *
1123 * This was hard to do since the scroll bars overlay the rounded corners, hiding them.
1124 * I used a modified form of the solution suggested here:
1125 * https://stackoverflow.com/questions/16676166/apply-border-radius-to-scrollbars-with-css`
1126 *
1127 * We could also do .scrollBox instead of div.scrollBox which would apply to other HTML elements, not just div.
1128 */
1129div.scrollBox, div.scrollBoxTiny, div.scrollBoxSmall, div.scrollBoxMedium, div.scrollBoxLarge, div.scrollBoxHuge
1130{
1131 font-family: var(--monospace ) ;
1132 font-weight: bold ;
1133 font-size: 0.8rem ;
1134 /* Preserve newlines, collapse spaces and tabs, but wrap text.
1135 -Preserve newlines so we don't have to put <br> at the end of every line.
1136 -Collapse spaces and tabs. Text which is indented in the HTML will show up as left justified in the box.
1137 -Enable wrapping so when the browser window is made smaller, text will flow to fill the box.
1138 */
1139 white-space: pre-line ;
1140 height: 12rem ; /* Reduce for a particular box if there isn't enough text to avoid showing blank lines. */
1141 width: 80% ;
1142 color: black ;
1143
1144 background-color: var(--cyan-tint) ;
1145
1146 border: solid ;
1147 border-radius: 1rem ; /* Rounded corners. */
1148 border-width: 0.3rem ;
1149 border-color: var(--light-blue) ;
1150
1151 margin-top: 1rem ; /* Vertical separation between adjacent boxes. */
1152 margin-left: 3rem ; /* Slightly inset from the left. */
1153
1154 overflow: hidden ; /* Clip off any crap bleeding over from the content box below (if any). */
1155}
1156
1157div.scrollBoxTiny
1158{
1159 height: 3rem ;
1160}
1161
1162div.scrollBoxSmall
1163{
1164 height: 5rem ;
1165}
1166
1167div.scrollBoxMedium
1168{
1169 height: 7rem ;
1170}
1171
1172div.scrollBoxLarge
1173{
1174 height: 13rem ;
1175}
1176
1177div.scrollBoxHuge
1178{
1179 height: 35rem ;
1180}
1181
1182/* This is the scroll box content which has scroll bars and fits into the scroll box container. */
1183div.scrollBoxContent
1184{
1185 /* I don't know why I see a vertical offset in the container, but negative margin eats it up it and it
1186 * seems to work OK when scaling the browser window. */
1187 margin-top: -1.0rem ;
1188
1189 height: 100% ; /* Fit the contents to the container. */
1190
1191 overflow: auto ; /* Let the browser decide about showing scroll bars. */
1192}
1193
1194/*
1195 * ------------------------------ Forms ----------------------------------------
1196 *
1197 * Here's an example where a form contains several lists.
1198 * Each list contains several fieldsets.
1199 * Each fieldset contains several pairs.
1200 * And each pair is a legend followed by an input control.
1201 *
1202 * <form id="LifePatternsForm">
1203 * <ul>
1204 * <li>
1205 * <!-- Game of Life clipboard controls -->
1206 * <fieldset>
1207 * <legend>Clipboard</legend>
1208 * <input type="button" onclick="gameOfLife.writeGameToClipboard()" value="Write" />
1209 * <input type="file" id="GameOfLifeLoadFile" name="files[]" multiple />
1210 * </fieldset>
1211 * </li>
1212 * </ul>
1213 * </form>
1214 */
1215
1216/* Clear properties for all forms. We'll set them below. */
1217form
1218{
1219 padding: 0 ;
1220 border: 0 ;
1221 margin: 0 ;
1222
1223 overflow: auto ; /* Let the browser decide about showing scroll bars. */
1224}
1225
1226form img
1227{
1228 vertical-align: middle ;
1229}
1230
1231form ul
1232{
1233 list-style-type: none ; /* Remove bullets. */
1234 list-style-image: none ;
1235 padding: 0 ;
1236 margin: 0 ;
1237}
1238
1239/* Within a form, the fieldset is the container for the buttons, fields, controls, etc. */
1240form fieldset
1241{
1242 font-family: var(--sans-serif) ;
1243 font-size: smaller ;
1244 color: navy ;
1245
1246 padding: 0.1rem ; /* A little padding to make close together controls more readable. */
1247 border: 0 ;
1248 margin: 0 ;
1249
1250 background-color: lightskyblue ;
1251}
1252
1253/* Style for input controls of the button or file type within a fieldset container. */
1254fieldset input[ type = 'button' ], fieldset input[ type = 'file' ]
1255{
1256 font-style: italic ;
1257 cursor: pointer ; /* Hand when hovering over the button. */
1258 padding: 0.3rem ;
1259}
1260
1261/* Within each fieldset, float legends to the left and justify their text to the right.
1262 * The controls following each legend will then line up evenly along a column.
1263 */
1264fieldset legend
1265{
1266 text-align: right ;
1267 width: 12rem ;
1268
1269 margin-right: 1.5rem ;
1270
1271 float: left ;
1272}
1273
1274/* Style text within all fieldsets. */
1275fieldset textarea
1276{
1277 font-family: var(--monospace ) ;
1278 color: navy ;
1279 cursor: auto ; /* Vertical bar cursor when hovering over text. */
1280
1281 background-color: var(--very-light-blue) ;
1282
1283 resize: none ; /* Don't allow user to resize, only scroll. */
1284 width: 100% ;
1285}
1286
1287/*
1288 * --------------------- Images ---------------------------------------------
1289 */
1290
1291/* Images by themselves are centered in the containing block and have a decorative frame.
1292 *
1293 * <img class="centered" src="Images/BlenderScreenshot.png" alt="" />
1294 */
1295
1296/* Fake inheritance in CSS by declaring common properties for all three image classes first.
1297 * then overriding properties for each individual class.
1298 */
1299img.centered, img.centeredsmaller, img.centeredsmallest
1300{
1301 display: block ; /* Default HTML ordering. */
1302
1303 padding: 0.5rem 0.5rem 0.5rem 0.5rem ; /* Thin region of background color surrounding the image. */
1304 background-color: var(--dark-blue-gray) ;
1305
1306 border: solid; /* Frame surrounding the background. */
1307 border-width: 0.3rem; /* Thin frame. */
1308 border-color: var(--kweilin-black) ;
1309 border-radius: 1rem ; /* Curved edges for image frame. */
1310
1311 margin-left: auto ; /* Margin surrounding the border. Center the image horizontally. */
1312 margin-right: auto ;
1313 margin-top: 2rem ; /* Small fixed margin gives added space above and below. */
1314 margin-bottom: 2rem ;
1315
1316 max-width: 100% ; /* Image won't be larger than its containing block. */
1317}
1318
1319img.centeredsmaller
1320{
1321 max-width: 60% ; /* Shrink the image smaller than its containing block. */
1322}
1323
1324img.centeredsmallest
1325{
1326 max-width: 25% ;
1327}
1328
1329/* Make an SVG image look like a drawing on top of the paper. */
1330img.transparent
1331{
1332 background: transparent ;
1333 max-width: 100% ; /* Image won't be larger than its containing block.*/
1334}
1335
1336/*
1337 * Images in a technical report (all descendents of body) have a lighter frame color to match the lighter body.
1338 */
1339body.technicalReport img.centered img.centeredsmaller img.centeredsmallest
1340{
1341 background-color: var(--lighter-blue-background) ;
1342}
1343
1344/* Inline images which are children of paragraphs (e.g. equations),
1345 * and any images which are descendants of table rows and lists.
1346 */
1347p > img, li img, td img
1348{
1349 /* Make the image a little larger than the font height. That stops the image from shrinking and
1350 * being aliased as the browser crudely resamples the natural image height.
1351 */
1352 min-height: 1.3rem ;
1353 vertical-align: middle ; /* Align these images to the middle of the text line vertically. */
1354
1355 margin-bottom: 0.5rem ; /* Leave a little room at the bottom so images won't run together if they are adjacent list items. */
1356}
1357
1358/* Image within a hotkey combination which has a box around the text. */
1359em.hotkey > img
1360{
1361 vertical-align: middle ; /* Align these images to the middle of the text line vertically. */
1362
1363 background-color: transparent ;
1364
1365 border: solid ;
1366 border-width: medium ;
1367 border-color: silver ;
1368
1369 margin-bottom: 0.5rem ; /* Leave a little room at the bottom so images won't run together if they are adjacent list items. */
1370}
1371
1372/*
1373 * Left page border in an aside element using an image.
1374 *
1375 * <p>
1376 * <img class="border"
1377 * src="../Images/otherInterestsBorderImage.jpg"
1378 * alt="Art Gallery Image Border." />
1379 * </p>
1380 */
1381img.border
1382{
1383 /* Normal CSS flow in a page. */
1384 display: block ;
1385
1386 /* Blueish color until we load the image. */
1387 background-color: var(--light-blue-body-background) ;
1388
1389 /* Image fills the entire area vertically. Make it thin since it's just for decoration. */
1390 top: 0 ;
1391 left: 0 ;
1392 width: 1.2rem ;
1393 height: 100% ;
1394
1395 /* Give us a thin vertical dividing line on the right of the image for contrast. */
1396 border-right-style: solid ;
1397 border-right-width: 0.1rem ;
1398 border-right-color: blue ;
1399}
1400
1401/*
1402 * ----------------------- Canvas--------------------------------------------
1403 */
1404
1405/* Put a blue dotted line around the canvas.*/
1406canvas
1407{
1408 border-width: 0.2rem ;
1409 border-style: dotted ;
1410 border-color: blue ;
1411
1412 /* Image won't be larger than its containing block.
1413 * The <canvas> element will usually be inside the <body> element, making <body> its containing block.
1414 * And <body> is the viewport on mobile devices or browser window on desktops.
1415 */
1416 max-width: 100% ;
1417}
1418
1419/*
1420 * ---------------------- Horizontal rule -----------------------------------
1421 */
1422/* Horizontal rule. */
1423hr
1424{
1425 height: 0.3rem ;
1426
1427 background-image: url( "Images/blueBar.png" ) ;
1428 background-color: var(--dark-blue) ;
1429 border: none ;
1430
1431 margin-left: 1rem ;
1432 margin-right: 1rem ;
1433
1434 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
1435}
1436
1437/*
1438* --------------------- Figures --------------------------------------------
1439*
1440* Figure floats to the left, letting text wrap around to the right.
1441* It contains one or more images which flow downwards followed by a figure caption.
1442*
1443* <figure>
1444* <img src="topImage.jpg" >
1445* <img src="botImage.jpg" >
1446*
1447* <figcaption>
1448* These are two figure images.
1449* </figcaption>
1450* </figure>
1451*
1452* <p>
1453* The figure will float to the left and this text will flow around to the right.
1454* </p>
1455*
1456* To float the figure to the right, use
1457* <figure style="float: right">
1458*/
1459figure
1460{
1461 /* Figure is a flex container. Items flow in 1D downwards. */
1462 display: flex ;
1463 flex-flow: column ;
1464 justify-content: flex-start ; /* Justify the first item at the left of this container. */
1465
1466 text-align: center ;
1467
1468 background-color: var(--dark-blue-gray ) ;
1469 padding: 1rem 1rem 1rem 1rem ; /* Padding is colored same as the background color. */
1470 border: 0.2rem silver solid ; /* Border. */
1471 border-radius: 1rem ; /* Rounded corners. */
1472 margin: 1.5rem 1.5rem 1.5rem 1.5rem ; /* Space it away from the other elements in the page. */
1473 float: left ; /* Float the figure to the left and have text flow around it to the right. */
1474
1475 max-width: 35% ; /* Text flows around the figure. */
1476}
1477
1478/* Figure background in a technical report has a lighter color to match the lighter body. */
1479body.technicalReport figure
1480{
1481 background-color: var(--lighter-blue-background) ;
1482}
1483
1484figcaption
1485{
1486 font-style: italic ;
1487 font-size: smaller ;
1488 text-indent: 0 ;
1489}
1490
1491/* Apply only to an image inside the figure.
1492 * Since we use a descendent selector so this also works for an image inside an href inside the figure.
1493 */
1494figure img
1495{
1496 max-width: 100% ; /* Image isn't larger than its containing block. */
1497
1498 padding-left: 0.5rem ; /* In case we have multiple images, leave some space between. */
1499 padding-right: 0.5rem ;
1500 padding-top: 0.5rem ;
1501 padding-bottom: 0.5rem ;
1502}
1503
1504/* Apply only to a hyperlink directly inside class figure. */
1505figure > a
1506{
1507 padding-left: 0.5rem ; /* In case we have multiple hyperlinks, leave some space between. */
1508 padding-right: 0.5rem ;
1509}
1510
1511/*
1512 * --------------------- Illustrated Paragraph ----------------------------------------------
1513 *
1514 * Paragraph which starts with an image, and contains text.
1515 *
1516 * <div class="illustratedparagraph">
1517 * <p>
1518 * <img src=... >
1519 * <p>
1520 * </div>
1521 *
1522 * <p>
1523 * The text in this second paragraph will flow to the right.
1524 * </p>
1525 *
1526 */
1527div.illustratedparagraph
1528{
1529 float: left ; /* Float this paragraph to the left and have text and other elements flow around to the right. */
1530 margin-left: 0 ; /* Hard against left edge of page. */
1531 margin-bottom: 1rem ; /* Leave space at the bottom. */
1532
1533 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
1534
1535 /* For debugging, place a dotted red line right outside the border.
1536 outline-color: purple ;
1537 outline-style: dotted ;
1538 */
1539}
1540
1541/* Only within an illustrated paragraph, inside the first hyperlink,
1542 * capitalize the text.
1543 */
1544div.illustratedparagraph a:first-child
1545{
1546 text-transform: uppercase ; /* All bold caps. */
1547}
1548
1549/* Icon image. */
1550div.illustratedparagraph img
1551{
1552 float: left ; /* Inside this illustrated paragraphs, the image floats to the left, and text flows around to the right. */
1553
1554 border: none ; /* Turn off the hyperlink border on the image. */
1555
1556 margin-right: 0.6rem ; /* Leave space between image and text. */
1557 margin-bottom: 0.3rem ;
1558 max-width: 30% ; /* Shrink the image no larger than a fraction of its containing block. */
1559
1560 /* Let text flow around the image in a circle instead of a square box.
1561 shape-outside: circle(50%);
1562 */
1563
1564 /* For debugging, place a dotted red line right outside the border.
1565 outline-color: blue ;
1566 outline-style: dashed ;
1567 */
1568}
1569
1570/* This is special text for use to the right of the image. */
1571div.illustratedparagraph p
1572{
1573 text-align: justify ;
1574
1575 background-color: transparent ;
1576}
1577
1578/*
1579 * ----------------------- Lists --------------------------------------------
1580 */
1581
1582/* Unordered list with a slightly smaller font,
1583* small Images for bullets.
1584*/
1585ul
1586{
1587 font-family: var(--sans-serif ) ;
1588 /* Inherit the font size from body. */
1589
1590 padding-left: 0.5rem ;
1591 margin-left: 2rem ;
1592
1593 margin-top: 1.5rem ;
1594 margin-bottom: 1.5rem ;
1595
1596 list-style-type: none ; /* Remove list bullets -- we will use images instead. */
1597 list-style-image: url( "Images/smallBlueBullet.png" ) ;
1598
1599 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
1600
1601 /* For debugging, place a dotted red line right outside the border.
1602 outline-color: red;
1603 outline-style: dotted;
1604 */
1605}
1606
1607/* Ordered list with a slightly smaller font. */
1608ol
1609{
1610 font-family: var(--sans-serif ) ;
1611 /* Inherit the font size from body. */
1612
1613 padding-left: 0.5rem ;
1614
1615 margin-left: 3rem ;
1616
1617 clear: both ; /* This element starts on a new line below any floated elements, either left or right. */
1618}
1619
1620/* Unordered list with small black disks. */
1621ul.bullet
1622{
1623 font-size: 0.9rem ;
1624
1625 padding-left: 0.5rem ;
1626
1627 margin-left: 4rem ;
1628
1629 list-style-image: none ; /* Remove list bullets. */
1630 list-style-type: disc ;
1631}
1632
1633/* Unordered list with small black rectangles and text wrap around. */
1634ul.minorBullet
1635{
1636 font-size: 0.9rem ;
1637 list-style-image: none ; /* Remove list bullets. */
1638 list-style-type: square ;
1639 list-style-position: inside ;
1640}
1641
1642/*
1643 * ----------------------- Tables -------------------------------------------
1644 */
1645
1646/* Default tables have a solid black border and are as wide as the page.
1647 Collapse internal borders.
1648 */
1649table
1650{
1651 border-collapse: collapse ;
1652 border-style: solid ;
1653 border-color: var(--art-gallery-blue) ;
1654 border-width: thin ;
1655
1656 width: 100% ;
1657}
1658
1659/* Both table rows and columns have thin borders. */
1660td, th
1661{
1662 border-style: solid ;
1663 border-color: var(--art-gallery-blue) ;
1664 border-width: thin ;
1665}
1666
1667/* But table header rows are also lightly colored to make them stand out. */
1668th
1669{
1670 font-weight: bold ;
1671 background: var(--light-blue-tint) ;
1672}
1673
1674/* Table caption appears above the table. */
1675caption
1676{
1677 font-weight: bold ;
1678 font-size: larger ;
1679}
1680
1681/*
1682 * ----------------------- Software Viewing and Downloading --------------------------------------
1683 *
1684 * Use a grid instead of a table.
1685 * We'll override the <ul> and <li> elements so it looks like an unordered list in the HTML.
1686 *
1687 */
1688
1689ul.download
1690{
1691 display: grid ;
1692
1693 /* Use fractions of the free space (not including fixed size cols (there aren't any here). */
1694 grid-template-columns: 2fr 5fr 1fr 1fr ;
1695 column-gap: 0.1rem ;
1696 row-gap: 0.1rem ;
1697
1698 /* Turn off the default image bullets. */
1699 list-style-type: none ;
1700 list-style-image: none ;
1701
1702
1703 /* Text a little smaller to fit better on narrow mobile screens. */
1704 font-size: smaller ;
1705}
1706
1707/*
1708 * Where each row is placed in the grid columns.
1709 * outline collapses the lines around each grid cell so they don't get duplicated.
1710 */
1711li.downloadName
1712{
1713 grid-column-start: 1 ;
1714 outline: thin solid var(--art-gallery-blue) ;
1715}
1716
1717li.downloadDescription
1718{
1719 grid-column-start: 2 ;
1720 outline: thin solid var(--art-gallery-blue) ;
1721}
1722
1723li.downloadView
1724{
1725 grid-column-start: 3 ;
1726 outline: thin solid var(--art-gallery-blue) ;
1727}
1728
1729li.download
1730{
1731 grid-column-start: 4 ;
1732 outline: thin solid var(--art-gallery-blue) ;
1733}
1734
1735li.downloadFooter
1736{
1737 grid-column: 1 / 5 ;
1738 outline: thin solid var(--art-gallery-blue) ;
1739}
1740
1741
1742/*
1743 * ----------------------- Tooltips -----------------------------------------
1744 *
1745 * Show tooltip contents (text only) when hovering a mouse or pen controlled cursor over the tooltip element.
1746 * Mobile devices don't support hover, even with long press gestures.
1747 *
1748 * Sample HTML:
1749 * <span data-text="I am the tooltip contents." class="I'm a tooltip: hover over me to see tooltip contents!">Tooltip text</span>
1750 */
1751@media (any-hover: hover)
1752{
1753 /* Make the style visible as a tooltip. */
1754 span.tooltip
1755 {
1756 /* Since we don't specify any top/bottom/left/right property/values which would shift this element
1757 relative TO ITSELF, this is the same as the default static positioning, i.e. normal document flow.
1758 Why do we need this? Because the child class span.tooltip:before uses absolute positioning;
1759 it needs this parent class to have either relative or absolute positioning for that to work. */
1760 position: relative ;
1761
1762 /* Indicate the tooltip be a dashed line below its text. */
1763 border-bottom: 0.2rem dashed var(--art-gallery-blue-gray);
1764 }
1765
1766 /* Tooltip content.
1767 * This child class (:before) of the parent class (span.tooltip) is a pseudoclass which inserts content
1768 * before the first item in the tooltip.span class, i.e. at the start of the tooltip text. It doesn't
1769 * actually change the DOM. Actually it won't be inserted at all: we will take the position of this
1770 * tooltip content out of the normal document flow anyway by using absolute positioning.
1771 * And that's because we want it hover over the tooltip.
1772 */
1773 span.tooltip:before
1774 {
1775 /* Pull the tooltip text from the parent HTML span data-text value. */
1776 content: attr( data-text ) ;
1777
1778 text-align: center ;
1779 color: white ;
1780 background: darkblue ;
1781
1782 /* Wide enough for a reasonable chunk of text when hovering. */
1783 width: 10rem ;
1784
1785 /* Take us out of the normal document flow. The position is relative to the initial containing block,
1786 * which is the edge of the padding box of the nearest ancestor element which has a relative position,
1787 * in our case, span.tooltip. So long story short, the tooltip contents will hover in a box whose upper
1788 * left corner is the upper left corner padding of the tooltip text. But then we
1789 * position using top and transform.
1790 */
1791 position: absolute ;
1792
1793 left: 50% ; /* Place left edge of box 1/2 to the right in the tooltip. */
1794 transform: translateX( -50% ) ; /* Then shift it 1/2 way up to center horizontally. */
1795 top: -1rem ; /* Center vertically. */
1796
1797 padding: 1rem ;
1798 border-radius: 1.5rem ;
1799
1800 /* Tooltip contents is stacked on top of all other display elements. */
1801 z-index: 99 ;
1802
1803 /* Won't show up until we hover. */
1804 opacity: 0 ;
1805
1806 /* Fade in when we set opacity = 1 during hover. */
1807 transition: 0.3s opacity ;
1808 transition-delay: 100ms ;
1809 }
1810
1811 /* Mouse cursor is hovering either over the box of the parent element span.tooltip
1812 * OR the box of the child class span.tooltip:before. In either case, make it opaque.
1813 */
1814 span.tooltip:hover:before
1815 {
1816 opacity: 1 ;
1817 }
1818}
1819
1820/*
1821 * ----------------------- Art Gallery --------------------------------------
1822 */
1823
1824/* Art gallery: container for paintings which looks like a wall where we hang the art. */
1825div.gallery
1826{
1827 /* Items within this container are of flexbox type. They flow in 1D horizontally. */
1828 display: flex ;
1829
1830 /* Put the first painting at the beginning. */
1831 justify-content: flex-start ;
1832
1833 /* Paintings wrap around to the next row. */
1834 flex-flow: row wrap ;
1835
1836 overflow: auto ; /* Let the browser decide about showing scroll bars. On a mobile device paintings may be too wide for the gallery background. */
1837
1838 /* Art gallery wall is bluish gray. */
1839 background-color: var(--art-gallery-blue-gray) ;
1840 background-position: top left ;
1841 background-attachment: fixed ;
1842 background-repeat: repeat ;
1843
1844 /* Deep blue frame for the art gallery. */
1845 border-color: var(--art-gallery-blue ) ;
1846}
1847
1848/* Mobile devices don't have hover and usually don't honor fixed background
1849 due to increased computation. So just let background scroll with the content. */
1850@media (hover: none)
1851{
1852 div.gallery
1853 {
1854 background-attachment: initial ;
1855 }
1856}
1857
1858/* A painting contains a canvas and title. */
1859div.painting
1860{
1861 text-align: center ;
1862
1863 background-color: transparent ;
1864
1865 /* Items within this container are of flexbox type. They flow in 1D vertically. */
1866 display: flex ;
1867 flex-direction: column ;
1868}
1869
1870/* Title of a canvas. */
1871div.painting p
1872{
1873 color: silver ;
1874 font-style: italic ;
1875 font-size: smaller ;
1876 text-align: center ;
1877}
1878
1879/* A canvas is an image with a black frame. */
1880div.painting img
1881{
1882 /* Silvery gray background behind the canvas of the painting. When we pad, this will show between canvas and picture frame.
1883 * Also if the canvas is round, i.e. image is rectangular, but alpha = 0 outside the circular canvas, this will show.
1884 */
1885 background-color: var(--canvas-gray ) ;
1886
1887 /* Fit the width of the screen on an iPhone 12 Pro */
1888 max-width: 18rem ;
1889
1890 /* Between the painting canvas and the frame. */
1891 padding: 0.2rem 0.2rem 0.2rem 0.2rem ;
1892
1893 /* The picture frame is black and rather thick. */
1894 border-style: solid ;
1895 border-color: black ;
1896 border-width: 0.8rem ;
1897
1898 /* A little bit of margin so that the picture frames don't run into each other. */
1899 margin: 0.3rem 0.3rem 0.3rem 0.3rem ;
1900
1901 /* For debugging, place a dotted red line right outside the border.
1902 outline-color: red;
1903 outline-style: dotted;
1904 */
1905}
1906
1907/* Use an ID selector to apply to one painting only. Turn off the padding because
1908 * the image has its own elliptical black frame already.
1909 */
1910div.painting img#GirlFromKweilin
1911{
1912 background-color: var(--kweilin-black ) ;
1913 padding: 0 0 0 0 ;
1914}
1915
1916/*
1917 * ------------------------------ Smartphone Portrait Mode -----------------
1918 *
1919 * Save space by removing the border image and the navigation sidebar.
1920 *
1921 */
1922@media screen and (orientation: portrait) and (width < 500px)
1923{
1924 /* Change the wrapper to have only 1 columns since we omit the left navigation bar and the border image. */
1925 div.wrapper
1926 {
1927 grid-template-columns: 1fr ;
1928 }
1929
1930 aside.border
1931 {
1932 display: none ;
1933 }
1934
1935 nav
1936 {
1937 display: none ;
1938 }
1939}
1940
1941/*
1942 * ------------------------------ Printing ----------------------------------
1943 */
1944
1945/* For printing, omit the navigation and borders.
1946 * To test, do print preview from a web browser to see the pdf file.
1947 * Or to test on a browser in display mode, temporarily replace "print" with "screen".
1948 */
1949@media print
1950{
1951 /* Turn off the grid. */
1952 div.wrapper
1953 {
1954 display: block ;
1955 }
1956
1957 /* Turn off the navigation sidebars. */
1958 nav, header.navigation
1959 {
1960 display: none ;
1961 }
1962
1963 /* Turn off decorative border Images. */
1964 aside.border
1965 {
1966 display: none ;
1967 }
1968
1969 /* Leave less margin on the left of the page since border image is gone.
1970 * Remove all background images (printers don't print white).
1971 */
1972 body
1973 {
1974 background: white ;
1975
1976 margin-left: 3rem ;
1977 margin-right: 2rem ;
1978 }
1979
1980 /* Turn off scrolling in scroll boxes and show the whole content. */
1981 div.scrollBox, div.scrollBoxContent
1982 {
1983 background: white ; /* Remove background color (printers don't print white). */
1984 overflow: visible ; /* No scrollbars; just show the whole content, even if it goes outside the container. */
1985 white-space: pre-wrap ; /* Preserve whitespace. Wrap when necessary and on newlines. */
1986
1987 width: auto ; /* Expand the box size to whatever necessary. */
1988 height: auto ; /* Expand the box size to whatever necessary. */
1989 }
1990
1991 figure
1992 {
1993 background: white ; /* Remove background color (printers don't print white). */
1994 }
1995
1996 div.gallery
1997 {
1998 background: white ; /* Remove background color (printers don't print white). */
1999 }
2000}