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