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