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