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