1 /*============================================================================= 2 | 3 | NAME 4 | 5 | StyleSheet.css 6 | 7 | DESCRIPTION 8 | 9 | External cascading style sheet for my web pages. 10 | 11 | It is a W3C validated CSS Level 2 document. 12 | 13 | USAGE 14 | 15 | To link to it in a hypertext document, put the following statement, 16 | 17 | <link rel="StyleSheet" href="StyleSheet.css" type="text/css" /> 18 | 19 | within the <head>...</head> section of an HTML document. 20 | 21 | LEGAL 22 | 23 | Copyright (C) 1999-2024 by Sean Erik O'Connor. All Rights Reserved. 24 | last updated 01 Jan 24 25 | 26 =============================================================================*/ 27 28 /* CSS rule with universal selector to clear padding and margins in every 29 * element before we add our own. 30 */ 31 32 * 33 { 34 padding: 0 ; 35 margin: 0 ; 36 } 37 38 /* 39 * ------------------------------ Hyperlinks ---------------------------------- 40 * 41 * CSS rules for pseudo-class selectors containing property/value pairs. 42 * Must be in this order due to CSS cascade rules. 43 */ 44 45 /* Visited links have purple text. You must have your browser history enabled 46 * and set to more than 0 days to see a visited link change color. 47 * Links stay colored until you clear the browser history and refresh the page. 48 */ 49 a:visited 50 { 51 color: rgb( 153, 0, 153 ) ; 52 background-color: transparent ; 53 } 54 55 /* Unvisited links are dark blue. */ 56 a:link 57 { 58 color: rgb( 0, 0, 153 ) ; 59 background-color: transparent ; 60 } 61 62 /* When the mouse cursor hovers over a hyperlink, change color to cyan. */ 63 a:hover 64 { 65 color: rgb( 0, 96, 255 ) ; 66 background-color: transparent ; 67 } 68 69 /* When the mouse cursor hovers over a hyperlink containing an image, fade the image. */ 70 a:hover img 71 { 72 opacity: 0.7 ; 73 } 74 75 /* Clicked hyperlink is light red. */ 76 a:active 77 { 78 color: rgb( 255, 0, 102 ) ; 79 background-color: transparent ; 80 } 81 82 /* 83 * ------------------------------ Body Settings -------------------------------- 84 */ 85 86 /* Default settings for all my main web pages. */ 87 body 88 { 89 /* A wide sans-serif font is more readable on the web. */ 90 font-family: Verdana, Geneva, "Trebuchet MS", sans-serif ; 91 92 /* Set the body font size a little smaller than the user's default browser setting. */ 93 font-size: 0.8em ; 94 95 /* Black text is easier to read. */ 96 color: black ; 97 98 /* More vertical space between lines for more pleasant reading. Use a unitless font height multiplier. 99 Length and percentage percentage values can give scrunched text due to poor inheritance behavior. */ 100 line-height: 1.7 ; 101 102 /* While waiting for the browser to load the background image of simulated blue paper, color the background solid light blue to match. */ 103 background-color: rgb( 170, 235, 245 ) ; 104 background-image: url( "Images/blueBackground.jpg" ) ; 105 106 /* Tile the background. */ 107 background-repeat: repeat ; 108 109 /* Background image stays fixed while the foreground text scrolls. */ 110 background-attachment: fixed ; 111 } 112 113 /* Mobile devices don't have hover and usually don't honor fixed background due to increased computation. */ 114 @media (hover: none) 115 { 116 body 117 { 118 background-attachment: initial ; 119 } 120 } 121 122 /* Body pages of the technical report class have a background which is very light blue simulated 123 * paper for increased readability. Apply all the default body property/values first. This rule, 124 * which is more specific, since it uses a class selector, can override the body background-color, 125 * and background-image properties. 126 */ 127 body.technicalReport 128 { 129 /* While waiting for the browser to load the background image of simulated blue paper, color the background solid light blue to match. */ 130 background-color: rgb( 239, 247, 247 ) ; 131 background-image: url( "Images/bluePaper.jpg" ) ; 132 } 133 134 /* 135 * ------------------------------ Grid Wrapper ------------------------------ 136 * 137 * Web Page Layout 138 * 139 * +--- head ------------------------------------------------------------------------+ 140 * | metas | 141 * | link to stylesheet | 142 * +--- head ------------------------------------------------------------------------+ 143 * 144 * +--- body, body.techincalReport --------------------------------------------------+ 145 * | | 146 * | +------------ div.wrapper, div.technicalReport, div.titlePage ------------+ | 147 * | | | | 148 * | | SEE GRID LAYOUT BELOW | | 149 * | | | | 150 * | +------- div.wrapper -----------------------------------------------------+ | 151 * | | 152 * +--- body ------------------------------------------------------------------------+ 153 * 154 * Grid Layout 155 * 156 * Some pages will be missing nav and aside. 157 * 158 * div.wrapper 159 * grid columns 160 * 1 2 3 4 161 * +-----+----------------- header.title -------------------------+ 1 grid rows 162 * | | | 163 * | | h1 | 164 * a | hr | 165 * s | | 166 * i +--------------- header.navigation ----------------------+ 2 167 * d | | 168 * e | nav hyperlink 1 ... nav hyperlink n | 169 * . | | 170 * b +---------+------- article.content ----------------------+ 3 171 * o | | | 172 * r i | nav | h2 | 173 * d m | link 1 | section | 174 * e a | . | h3 | 175 * r g | . | section | 176 * | e | . | h4 | 177 * | | nav | section | 178 * | | link n | ... | 179 * | | | | 180 * | +---------+------- footer.footer ------------------------+ 4 181 * | | | 182 * | | legal and other stuff | 183 * | | | 184 * +-----+--------------------------------------------------------+ 5 185 * 186 * 187 * CSS Box Model 188 * 189 * +------------------------------------+ 190 * | margin | 191 * | +-----------border------------+ | 192 * | | padding | | 193 * | | +-------------------+ | | 194 * | | | C O N T E N T | | | 195 * | | +-------------------+ | | 196 * | | padding | | 197 * | +-----------border------------+ | 198 * | margin | 199 * +------------------------------------+ 200 */ 201 202 /* Basic grid layout common to all wrappers. */ 203 div.wrapper 204 { 205 /* Flex grid. */ 206 display: grid ; 207 208 /* For div.wrapper pages, 209 Column 1 contains the margin with the border image which we make slightly larger than the img.border class to give a thin space on the right. 210 Column 2 is the vertical navigation sidebar. Minimum is set wide enough so words in the navigation 211 hyperlinks don't overflow to the right. Maximum is clamped to a very wide page doesn't have big stretched out navigation hyperlinks. 212 Column 3 is most of the page, so it gets the most relative space. We use high fr number so that 213 a very wide page shows more content and less navigation hyperlinks. */ 214 grid-template-columns: 1.5em minmax( 9em, 1fr ) 30fr ; 215 } 216 217 /* Yes, every body contains a wrapper for laying out a basic grid. But we might want to tweak the grid a little. 218 So make up new CSS "subclasses". Then a wrapper we can "inherit" from both the basic wrapper and the subclasses, 219 <div class="wrapper titlePage"> 220 The style of a descendent element such as article can change when it knows it is within a titlePage, 221 div.titlePage article.content { 222 RULES TO REMOVE THE ARTICLE CONTENT ENTIRELY, I.E> REMOVE ALL VERTICAL NAVIGATION ITEMS 223 } 224 One more thing - we could add additional style rules within the subclass wrappers, if needed. 225 */ 226 div.technicalReport 227 { 228 } 229 230 div.titlePage 231 { 232 } 233 234 /* Top of page header. */ 235 header.title 236 { 237 grid-column: 2 / 4 ; 238 grid-row: 1 ; 239 } 240 241 242 /* Horizontal navigation menu bar at the top. */ 243 header.navigation 244 { /* Items within this container are of flexbox type. They flow in 1D horizontally. */ 245 display: flex ; 246 247 /* Put the first hyperlink at the beginning. */ 248 justify-content: flex-start ; 249 250 /* Words in the navigation hyperlink wrap around to the next row. Note a single looooong word would 251 overflow the navigation menu into the content. */ 252 flex-flow: row wrap ; 253 254 /* This container spans grid columns 2, 3 and 4 of row 2 in the enclosing div container. */ 255 grid-column: 2 / 4 ; 256 grid-row: 2 ; 257 258 /* One letter wide for top, right, bottom left margins. */ 259 margin: 1em ; 260 } 261 262 /* Descendent combinator selector. Apply only to images somewhere within the navigation header heirarchy. */ 263 header.navigation img 264 { 265 vertical-align: top ; /* Text bottom aligns with image middle. */ 266 margin-left: 1em ; /* Prevent text from running into the images. */ 267 } 268 269 /* Hyperlinks in the navigation header have smaller margins. */ 270 header.navigation a 271 { 272 margin-right: 1em ; 273 } 274 275 276 /* Navigation sidebars. */ 277 nav 278 { 279 grid-column: 2 ; 280 grid-row: 3 / 4 ; 281 282 color: black ; 283 284 background-color: transparent ; 285 padding: 0.2em ; 286 287 border: none ; 288 top: 1em ; 289 left: 0 ; 290 margin-left: 0.1em ; 291 } 292 293 /* 294 * Child combinator selector for an unordered list which is a child of nav. 295 */ 296 nav > ul 297 { 298 /* Remove all default padding and margins. */ 299 padding: 0 ; 300 margin: 0 ; 301 } 302 303 /* 304 * Special rules when <li> is a child of the <ul> which is a child of nav. 305 */ 306 nav > ul > li 307 { 308 list-style-type: none ; /* Remove list bullets. */ 309 list-style: none ; /* Hack: because Firefox doesn't listen to list-style-type here. */ 310 311 font-size: 0.55em ; /* Small unobtrusive font. */ 312 313 margin-bottom: 0.7em ; /* Leave some space between blocks. */ 314 } 315 316 /* Special rules for a hyperlink <a href="..."></a> child of a li which is child of ul which is child of nav. */ 317 nav > ul > li > a 318 { 319 display: block ; /* Convert hyperlinks from inline to block so we can color the background. Can't do that with inline elements. */ 320 321 text-decoration: none ; /* Remove default hyperlink underlining. */ 322 323 padding: 0.2em 1.2em ; /* Add space before and after the text so hover background isn't flush against the text. */ 324 325 border-radius: 1em ; /* Rounded edges on the hyperlinks. */ 326 } 327 328 /* Unclicked hyperlinks show up as black on blue */ 329 nav > ul > li > a:link 330 { 331 font-family: "CopperPlate", sans-serif ; 332 font-size: 1.5em ; /* A little larger to be readable. */ 333 color: rgb( 50, 50, 50 ) ; /* Dark gray text color. */ 334 335 background-color: rgb( 222, 240, 255 ) ; /* Background is light blue. */ 336 } 337 338 /* Applies to the <a href element in a nav but only when hovering. */ 339 nav > ul > li > a:hover 340 { 341 color: white ; /* Text color white for contrast. */ 342 343 background-color: rgb( 100, 150, 250 ) ; /* Color the whole block background light blue. */ 344 } 345 346 347 /* Bulk of page goes into an article of content the class. It is divided into sections. */ 348 article.content 349 { 350 grid-column: 3 ; 351 grid-row: 3 / 4 ; 352 353 margin-left: 1em ; 354 margin-right: 2em ; 355 } 356 357 /* Title pages have no navigation bar, i.e. no <nav>...</nav> in their html. 358 * Widen the article area to fill the space which the nav would have occupied. 359 */ 360 div.titlePage article.content 361 { 362 grid-column: 2 / 4 ; 363 } 364 365 366 367 /* Usually will contain an image of class border in the entire left vertical margin for decoration. */ 368 aside.border 369 { 370 grid-column: 1 ; 371 grid-row: 1 / 5 ; 372 } 373 374 375 footer.footnote 376 { 377 grid-column: 2 / 4 ; 378 grid-row: 4 ; 379 } 380 381 /* 382 * -------------------------- Headings ---------------------------------------- 383 */ 384 385 /* Ordinary page title. */ 386 h1 387 { 388 /* Serif looks more elegant. Make it larger and centered since it's a title. */ 389 font-family: "Garamond", "Times New Roman", serif ; 390 font-size: 2.5em ; 391 text-align: center ; 392 393 /* Keep any floating elements away from both left and right sides. */ 394 clear: both ; 395 } 396 397 /* 398 * My name on the title page using a background image since I can't rely on Zapfino font being available on browsers. 399 */ 400 h1.name 401 { 402 min-height: 2.3em ; /* Have a minimum font height, otherwise, leave scalable with viewport. */ 403 404 background-color: transparent ; /* Let the body background show through. */ 405 background-image: url( "Images/SeanErikOConnor.png" ) ; /* PNG image with transparent background. */ 406 background-repeat: no-repeat ; 407 background-size: contain ; /* Make the image fit the box when we resize the page. */ 408 background-position: center center ; /* Center the image in the box. */ 409 410 margin-top: 0.2em ; /* Spacing all around so image doesn't bump up against its box. */ 411 margin-bottom: 0.3em ; 412 margin-left: 0.5em ; 413 margin-right: 0.5em ; 414 415 clear: both ; /* Keep any floating elements away from both left and right sides. */ 416 } 417 418 /* 419 * Put my name into the title, but don't display it. 420 * This way text-only browsers can see it. 421 */ 422 h1.name > span 423 { 424 display: none ; 425 } 426 427 /* Elegant green script page title. */ 428 h1.stylish 429 { 430 font-family: "Brush Script MT", "Comic Sans MS", "Times New Roman", cursive ; 431 font-size: 3em ; 432 text-align: center ; 433 color: #009900 ; /* Green */ 434 435 background-color: transparent ; 436 437 clear: both ; /* Keep any floating elements away from both left and right sides. */ 438 } 439 440 /* Title for author and date. */ 441 h2 442 { 443 font-family: "Garamond", "Times New Roman", serif ; 444 font-size: 2em ; 445 text-align: center ; 446 447 clear: both ; /* Keep any floating elements away from both left and right sides. */ 448 } 449 450 /* Title for email. */ 451 h2.email 452 { 453 font-family: "Garamond", "Times New Roman", serif ; 454 font-size: medium ; 455 text-align: center ; 456 457 clear: both ; /* Keep any floating elements away from both left and right sides. */ 458 } 459 460 /* Top level section heading. */ 461 h3 462 { 463 font-family: "Garamond", "Times New Roman", serif ; 464 font-size: 1.5em ; 465 text-align: left ; 466 letter-spacing: 0.1em ; /* Spread letters out a little horizontally. */ 467 color: white ; /* White text on horizontal gradient colored brown to blue bar. */ 468 469 background: linear-gradient(0.25turn, rgba(187,139,92,1) 70%, rgba(183,217,231,1)) ; 470 padding-left: 1em ; /* Move the text away from the background edge a little. */ 471 472 margin-top: 1em ; /* Throw in extra line spacing above and below this heading. */ 473 margin-bottom: 1em ; 474 475 clear: both ; /* Keep any floating elements away from both left and right sides. */ 476 } 477 478 /* Subsection heading. */ 479 h4 480 { 481 font-family: "Garamond", "Times New Roman", serif ; 482 font-size: 1.5em; 483 text-align: left ; 484 485 border-top: none ; /* A silver underline extending across the page. */ 486 border-left: none ; 487 border-right: none ; 488 border-bottom: solid ; 489 border-color: silver ; 490 border-width: 0.3em ; 491 492 margin-top: 1em ; /* Throw in extra line spacing above and below this heading. */ 493 margin-bottom: 1em ; 494 495 clear: both ; /* Keep any floating elements away from both left and right sides. */ 496 } 497 498 /* Sub-subsection heading. */ 499 h5 500 { 501 /* Smaller dark blue text. */ 502 font-family: "Garamond", "Times New Roman", serif ; 503 font-size: 1.2em ; 504 text-align: left ; 505 color: rgb( 0, 30, 240) ; 506 507 border-top: none ; /* A thin dark blue underline extending across the page. */ 508 border-left: none ; 509 border-right: none ; 510 border-bottom: solid ; 511 border-color: rgb( 0, 30, 240) ; 512 border-width: 0.07em ; 513 514 margin-top: 1em ; /* Throw in extra line spacing above and below this heading. */ 515 margin-bottom: 1em ; 516 517 clear: both ; /* Keep any floating elements away from both left and right sides. */ 518 } 519 520 /* Modify to match the lighter background. */ 521 body.technicalReport h3 522 { 523 background: linear-gradient(0.25turn, rgba(187,139,92,1) 60%, rgba(227,247,247,1)) ; 524 } 525 526 /* 527 * --------------------------- Inline text ---------------------------------- 528 * 529 * Text for source code. Use a narrow monospace font so columns of code align. 530 * We don't need to use <br /> at the end of each line of code: pre text 531 * is displayed as written, not flowed. The font is the same size as 532 * ordinary paragaphs for compatibility. 533 */ 534 pre, tt, code 535 { 536 font-family: "Courier New", "Andale Mono", "Menlo", monospace ; 537 font-weight: bold ; 538 font-size: larger ; 539 540 margin-left: 2em ; 541 margin-top: 1em ; 542 margin-bottom: 1em ; 543 } 544 545 /* Emphasized text --- bold italic. */ 546 em 547 { 548 font-style: italic ; 549 font-weight: bold ; 550 } 551 552 /* Highly emphasized text red on blue-gray. */ 553 em.warning 554 { 555 color: red ; 556 background-color: rgb( 220, 220, 240 ) ; /* Gray with blue tint. */ 557 } 558 559 /* 560 * But when it's within an h3 heading, just make the text red and don't 561 * alter the background color. 562 */ 563 h3 em.warning 564 { 565 color: red ; 566 background-color: transparent ; 567 } 568 569 /* Highly emphasized text blue on blue-gray. */ 570 em.caution 571 { 572 color: blue ; 573 background-color: rgb( 220, 220, 240 ) ; /* Gray with blue tint. */ 574 } 575 576 /* White text. */ 577 em.light 578 { 579 color: gray ; 580 font-size: 0.5em ; 581 } 582 583 /* Italic dark blue, but only when in an h3 heading. */ 584 h3 em.caution 585 { 586 color: blue ; 587 background-color: transparent ; 588 } 589 590 /* Used for hotkey commands in Blender. */ 591 em.hotkey 592 { 593 color: rgb(150, 50, 50); /* Dark brown. */ 594 padding: 0.1em ; 595 background-color: lightblue ; 596 } 597 598 /* Strong importance --- generally bold text. */ 599 strong 600 { 601 text-transform: uppercase ; /* All bold caps. */ 602 font-weight: bold ; 603 } 604 605 /* Italic text, but colored blue for more emphasis. */ 606 i 607 { 608 font-style: italic ; 609 color: blue ; 610 } 611 612 /* 613 * ----------------------- Paragraphs --------------------------------------- 614 * 615 * For example, 616 * <p>I am a ordinary paragraph</p> 617 * <p class = "footnote">I am a footnote</p> 618 * 619 */ 620 621 /* Ordinary paragraphs with justified text like a book. */ 622 p 623 { 624 font-family: Verdana, Geneva, "Trebuchet MS", sans-serif ; 625 text-align: justify ; 626 627 margin-left: 1em ; 628 margin-top: 1em ; 629 margin-bottom: 1em ; 630 } 631 632 /* Paragraphs for pseudocode. 633 * 634 * Example: 635 * 636 * <p class="pseudocode"> 637 * <i>this = line( code ) + 1 ;</i> <em>This is a comment for line 1</em> 638 * </p> 639 * <p class="pseudocode"> 640 * <i>this = line( code ) + 2 ;</i> <em>This is a comment for line 2</em> 641 * </p> 642 * 643 * */ 644 p.pseudocode 645 { 646 line-height: 0.1em ; 647 font-style: italic ; 648 font-weight: bold ; 649 } 650 651 /* Indented code. We can nest these to get more indentation as needed. */ 652 p.pseudocode i 653 { 654 margin-left: 3em ; 655 } 656 657 /* Comments at the end of code lines. */ 658 p.pseudocode em 659 { 660 color: gray ; 661 font-size: 0.9em ; 662 663 margin-left: 2em ; 664 } 665 666 /* Paragraphs with more vertical spacing. */ 667 p.spacedout 668 { 669 font-size: medium ; 670 671 margin-left: 2em ; 672 margin-top: 3em ; 673 margin-bottom: 2em ; 674 } 675 676 /* Footnotes. They are colored unobtrusively. */ 677 p.footnote 678 { 679 font-size: 0.8em ; /* Fraction of the size of the parent font of the paragraph (usually the body) */ 680 color: gray ; 681 682 background-color: transparent ; 683 684 margin-top: 2em ; 685 686 clear: both ; /* Keep any floating elements away from both left and right sides. */ 687 } 688 689 /* Paragraph with a box around it. */ 690 p.box 691 { 692 display: inline-block ; 693 694 color: black ; 695 font-size: 0.8em ; 696 font-weight: bold ; 697 698 background-color: transparent ; 699 padding: 1em ; 700 701 border: solid ; 702 border-width: medium ; 703 border-color: silver ; 704 } 705 706 /* Red change bar. */ 707 p.changed 708 { 709 padding-left: 0.2em ; /* Space the border more leftwards. */ 710 711 border-left: solid ; 712 border-right: none ; 713 border-top: none ; 714 border-bottom: none ; 715 border-left-width: thin ; 716 border-color: red ; 717 } 718 719 /* Work-in-progress type change bar. */ 720 p.inprogress 721 { 722 padding-left: 0.2em ; /* Space the border more leftwards. */ 723 724 border-left: solid ; 725 border-right: none ; 726 border-top: none ; 727 border-bottom: none ; 728 border-left-width: thick ; 729 border-color: red ; 730 } 731 732 /* Paragraph with very small print. */ 733 p.fineprint 734 { 735 font-size: 0.8em ; 736 font-style: italic ; 737 738 background-color: transparent ; 739 740 margin-left: 4em ; 741 margin-right: 4em ; 742 } 743 744 p.example 745 { 746 font-size: 1.3em ; /* Contents is white text. */ 747 font-style: italic ; 748 color: white ; 749 750 background-color: rgb( 50, 100, 255 ) ; /* Padding (background) color is light blue. */ 751 padding-left: 4em ; /* Padding around the contents. */ 752 padding-right: 2em ; 753 padding-top: 4em ; 754 padding-bottom: 2em ; 755 756 border: dashed ; 757 border-width: 0.3em ; 758 border-color: rgb( 255, 100, 100 ) ; /* Border color is light red. */ 759 760 margin-top: 5em ; /* Margin is transparent. We show different offsets to illustrate. */ 761 margin-left: 3em ; 762 margin-bottom: 0em ; 763 } 764 765 /* 766 * --------------------- Scroll Box --------------- 767 * 768 * Example: 769 * 770 * <div class="scrollBox"> <div class="scrollBoxContent"> 771 * text ... 772 * text 773 * </div> * </div> 774 * 775 * This was hard to do since the scroll bars overlay the rounded corners, hiding them. 776 * I used a modified form of the solution suggested here: 777 * https://stackoverflow.com/questions/16676166/apply-border-radius-to-scrollbars-with-css` 778 * 779 * We could also do .scrollBox instead of div.scrollBox which would apply to other HTML elements, not just div. 780 */ 781 div.scrollBox, div.scrollBoxTiny, div.scrollBoxSmall, div.scrollBoxMedium, div.scrollBoxLarge, div.scrollBoxHuge 782 { 783 font-family: "Courier New", "Andale Mono", "Menlo", monospace ; 784 font-weight: bold ; 785 font-size: 1.0em ; 786 /* Preserve newlines, collapse spaces and tabs, but wrap text. 787 -Preserve newlines so we don't have to put <br> at the end of every line. 788 -Collapse spaces and tabs. Text which is indented in the HTML will show up as left justified in the box. 789 -Enable wrapping so when the browser window is made smaller, text will flow to fill the box. 790 */ 791 white-space: pre-line ; 792 height: 12em ; /* Reduce for a particular box if there isn't enough text to avoid showing blank lines. */ 793 width: 80% ; 794 color: black ; 795 796 background-color: rgb( 225, 240, 255 ) ; /* Cyan tinted background. */ 797 798 border: solid ; 799 border-radius: 1em ; /* Rounded corners. */ 800 border-width: 0.3em ; 801 border-color: rgb( 120,120, 255 ) ; /* Light blue. */ 802 803 margin-top: 1em ; /* Vertical separation between adjacent boxes. */ 804 margin-left: 3em ; /* Slightly inset from the left. */ 805 806 overflow: hidden ; /* Clip off any crap bleeding over from the content box below (if any). */ 807 } 808 809 div.scrollBoxTiny 810 { 811 height: 3em ; 812 } 813 814 div.scrollBoxSmall 815 { 816 height: 5em ; 817 } 818 819 div.scrollBoxMedium 820 { 821 height: 7em ; 822 } 823 824 div.scrollBoxLarge 825 { 826 height: 9em ; 827 } 828 829 div.scrollBoxHuge 830 { 831 height: 20em ; 832 } 833 834 /* This is the scroll box content which has scroll bars and fits into the scroll box container. */ 835 div.scrollBoxContent 836 { 837 /* I don't know why I see a vertical offset in the container, but this works around it and 838 * seems to work OK when scaling the browser window. */ 839 margin-top: -1.7em ; 840 841 height: 100% ; /* Fit the contents to the container. */ 842 843 overflow: auto ; /* Let the browser decide about showing scroll bars. */ 844 } 845 846 /* 847 * --------------------- Forms ---------------------------------------------- 848 * 849 * Here's an example where a form contains several lists. 850 * Each list contains several fieldsets. 851 * Each fieldset contains several pairs. 852 * And each pair is a legend followed by an input control. 853 * 854 * <form id="LifePatternsForm"> 855 * <ul> 856 * <li> 857 * <!-- Game of Life clipboard controls --> 858 * <fieldset> 859 * <legend>Clipboard</legend> 860 * <input type="button" onclick="gameOfLife.writeGameToClipboard()" value="Write" /> 861 * <input type="file" id="GameOfLifeLoadFile" name="files[]" multiple /> 862 * </fieldset> 863 * </li> 864 * </ul> 865 * </form> 866 */ 867 868 /* Clear properties for all forms. We'll set them below. */ 869 form 870 { 871 padding: 0 ; 872 873 border: 0 ; 874 875 margin: 0 ; 876 } 877 878 form img 879 { 880 vertical-align: middle ; 881 } 882 883 form ul 884 { 885 list-style-type: none ; /* Remove bullets. */ 886 list-style-image: none ; 887 888 padding: 0 ; 889 890 margin: 0 ; 891 } 892 893 /* Within a form, the fieldset is the container for the buttons, fields, controls, etc. */ 894 form fieldset 895 { 896 font-family: Verdana, Geneva, "Trebuchet MS", sans-serif ; 897 font-size: smaller ; 898 color: navy ; 899 900 background-color: lightskyblue ; 901 padding: 0 ; 902 903 border: 0 ; 904 905 margin: 0 ; 906 } 907 908 /* Style for input controls of the button or file type within a fieldset container. */ 909 fieldset input[ type = 'button' ], fieldset input[ type = 'file' ] 910 { 911 font-style: italic ; 912 cursor: pointer ; /* Hand when hovering over the button. */ 913 914 padding: 0.3em ; 915 } 916 917 /* Within each fieldset, float legends to the left and justify their text to the right. 918 * The controls following each legend will then line up evenly along a column. 919 */ 920 fieldset legend 921 { 922 text-align: right ; 923 width: 12em ; 924 925 margin-right: 1.5em ; 926 927 float: left ; 928 } 929 930 /* Style text within all fieldsets. */ 931 fieldset textarea 932 { 933 font-family: "Courier New", "Andale Mono", "Menlo", monospace ; 934 color: navy ; 935 cursor: auto ; /* Vertical bar cursor when hovering over text. */ 936 937 background-color: rgb( 240, 240, 245 ) ; /* Light blue */ 938 939 resize: none ; /* Don't allow user to resize, only scroll. */ 940 width: 100% ; 941 } 942 943 /* 944 * --------------------- Images --------------------------------------------- 945 */ 946 947 /* Images by themselves are centered in the containing block and have a decorative frame. 948 * 949 * <img class="centered" src="Images/BlenderScreenshot.png" alt="" /> 950 */ 951 952 /* Fake inheritance in CSS by declaring common properties for all three image classes first. 953 * then overriding properties for each individual class. 954 */ 955 img.centered, img.centeredsmaller, img.centeredsmallest 956 { 957 display: block ; /* Default HTML ordering. */ 958 959 padding: 0.5em 0.5em 0.5em 0.5em ; /* Thin region of background color surrounding the image. */ 960 background-color: rgb( 100, 150, 150 ) ; /* Background color is dark greenish gray. */ 961 962 border: solid; /* Frame surrounding the background. */ 963 border-width: 0.3em; /* Thin frame. */ 964 border-color: rgb( 0, 50, 50 ) ; /* Thin greenish black. */ 965 border-radius: 1em ; /* Curved edges for image frame. */ 966 967 margin-left: auto ; /* Margin surrounding the border. Center the image horizontally. */ 968 margin-right: auto ; 969 margin-top: 2em ; /* Small fixed margin gives added space above and below. */ 970 margin-bottom: 2em ; 971 972 max-width: 100% ; /* Image won't be larger than its containing block 973 (usually the body or grid element), so no scroll bars will appear. */ 974 } 975 976 img.centeredsmaller 977 { 978 max-width: 60% ; /* Shrink the image smaller than its containing block. */ 979 } 980 981 img.centeredsmallest 982 { 983 max-width: 40% ; 984 } 985 986 /* 987 * Images in a technical report (all descendents of body) have a lighter frame color to match the lighter body. 988 */ 989 body.technicalReport img.centered img.centeredsmaller img.centeredsmallest 990 { 991 background-color: rgb( 170, 205, 205 ) ; /* Light blue-gray. */ 992 } 993 994 /* Inline images which are children of paragraphs (e.g. equations), 995 * and any images which are descendants of table rows and lists. 996 */ 997 p > img, li img, td img 998 { 999 /* Make the image a little larger than the font height. That stops the image from shrinking and 1000 * being aliased as the browser crudely resamples the natural image height. 1001 */ 1002 min-height: 1.3em ; 1003 vertical-align: middle ; /* Align these images to the middle of the text line vertically. */ 1004 1005 margin-bottom: 0.5em ; /* Leave a little room at the bottom so images won't run together if they are adjacent list items. */ 1006 } 1007 1008 /* Image within a hotkey combination which has a box around the text. */ 1009 em.hotkey > img 1010 { 1011 vertical-align: middle ; /* Align these images to the middle of the text line vertically. */ 1012 1013 background-color: transparent ; 1014 1015 border: solid ; 1016 border-width: medium ; 1017 border-color: silver ; 1018 1019 margin-bottom: 0.5em ; /* Leave a little room at the bottom so images won't run together if they are adjacent list items. */ 1020 } 1021 1022 /* 1023 * Left page border in an aside element using an image. 1024 * 1025 * <p> 1026 * <img class="border" 1027 * src="../Images/otherInterestsBorderImage.jpg" 1028 * alt="Art Gallery Image Border." /> 1029 * </p> 1030 */ 1031 img.border 1032 { 1033 /* Normal CSS flow in a page. */ 1034 display: block ; 1035 1036 /* Blueish color until we load the image. */ 1037 background-color: rgb( 170, 235, 245 ) ; 1038 1039 /* Image fills the entire area vertically. Make it thin since it's just for decoration. */ 1040 top: 0 ; 1041 left: 0 ; 1042 width: 1.2em ; 1043 height: 100% ; 1044 1045 /* Give us a thin vertical dividing line on the right of the image for contrast. */ 1046 border-right-style: solid ; 1047 border-right-width: 0.1em ; 1048 border-right-color: blue ; 1049 } 1050 1051 /* 1052 * ----------------------- Canvas-------------------------------------------- 1053 */ 1054 1055 /* Put a blue dotted line around the canvas.*/ 1056 canvas 1057 { 1058 border-width: 0.2em ; 1059 border-style: dotted ; 1060 border-color: blue ; 1061 1062 /* Image won't be larger than containing block (usually the body element). The body 1063 containing box is the viewport on mobile devices or browser window on desktops. */ 1064 max-width: 100% ; 1065 } 1066 1067 /* 1068 * ---------------------- Horizontal rule ----------------------------------- 1069 */ 1070 /* Horizontal rule. */ 1071 hr 1072 { 1073 height: 0.5em ; 1074 1075 background-image: url( "Images/blueBar.png" ) ; 1076 background-color: rgb( 0, 0, 153 ) ; /* Show dark blue solid color until the image loads. */ 1077 border: none ; 1078 1079 margin-left: 1em ; 1080 margin-right: 1em ; 1081 1082 clear: both ; /* Keep any floating elements away from both left and right sides. */ 1083 } 1084 1085 /* 1086 * --------------------- Figures -------------------------------------------- 1087 * 1088 * Figure floats to the left, letting text wrap around to the right. 1089 * It contains one or more images which flow downwards followed by a figure caption. 1090 * 1091 * <figure> 1092 * <img src="topImage.jpg" /> 1093 * <img src="botImage.jpg" /> 1094 * 1095 * <figcaption> 1096 * These are two figure images. 1097 * </figcaption> 1098 * </figure> 1099 * 1100 * <p> 1101 * The figure will float to the left and this text will flow around to the right. 1102 * </p> 1103 * 1104 * To float the figure to the right, use 1105 * <figure style="float: right"> 1106 */ 1107 figure 1108 { 1109 /* Figure is a flex container. Items flow in 1D downwards. */ 1110 display: flex ; 1111 flex-flow: column ; 1112 justify-content: flex-start ; /* Justify the first item at the left of this container. */ 1113 1114 text-align: center ; 1115 1116 background-color: rgb( 100, 150, 150 ) ; /* Dark blue-gray. */ 1117 padding: 1em 1em 1em 1em ; /* Padding is colored same as the background color. */ 1118 1119 border: 0.2em silver solid ; /* Border. */ 1120 border-radius: 1em ; /* Rounded corners. */ 1121 1122 margin: 1.5em 1.5em 1.5em 1.5em ; /* Space it away from the other elements in the page. */ 1123 1124 float: left ; /* Float the figure to the left and have text flow around it to the right. */ 1125 } 1126 1127 /* Figure background in a technical report has a lighter color to match the lighter body. */ 1128 body.technicalReport figure 1129 { 1130 background-color: rgb( 170, 205, 205 ) ; /* Light blue-gray. */ 1131 } 1132 1133 figcaption 1134 { 1135 font-style: italic ; 1136 font-size: smaller ; 1137 text-indent: 0 ; 1138 } 1139 1140 /* Apply only to an image inside the figure. 1141 * Since we use a descendent selector so this also works for an image inside an href inside the figure. 1142 */ 1143 figure img 1144 { 1145 max-width: 90% ; 1146 1147 padding-left: 0.5em ; /* In case we have multiple images, leave some space between. */ 1148 padding-right: 0.5em ; 1149 padding-top: 0.5em ; 1150 padding-bottom: 0.5em ; 1151 } 1152 1153 /* Apply only to a hyperlink directly inside class figure. */ 1154 figure > a 1155 { 1156 padding-left: 0.5em ; /* In case we have multiple hyperlinks, leave some space between. */ 1157 padding-right: 0.5em ; 1158 } 1159 1160 /* 1161 * --------------------- Illustrated Paragraph ---------------------------------------------- 1162 * 1163 * Paragraph which starts with an image, and contains text. 1164 * 1165 * <div class="illustratedparagraph"> 1166 * <p> 1167 * <img src=... /> 1168 * <p> 1169 * </div> 1170 * 1171 * <p> 1172 * The text in this second paragraph will flow to the right. 1173 * </p> 1174 * 1175 */ 1176 div.illustratedparagraph 1177 { 1178 float: left ; /* Float this paragraph to the left and have text and other elements flow around to the right. */ 1179 1180 margin-left: 0 ; /* Hard against left edge of page. */ 1181 margin-bottom: 1em ; /* Leave space at the bottom. */ 1182 /* 1183 * Keep all other f l o a t i n g elements away from left and right sides of this paragraph. 1184 * But do let text flow around. 1185 */ 1186 clear: both ; 1187 } 1188 1189 /* Only within an illustrated paragraph, inside the first hyperlink, 1190 * capitalize the text. 1191 */ 1192 div.illustratedparagraph a:first-child 1193 { 1194 text-transform: uppercase ; /* All bold caps. */ 1195 } 1196 1197 /* Icon image. */ 1198 div.illustratedparagraph img 1199 { 1200 float: left ; /* Inside this illustrated paragraphs, the image floats to the left, and text flows around to the right. */ 1201 1202 border: none ; /* Turn off the hyperlink border on the image. */ 1203 1204 margin-right: 0.5em ; /* Leave space between image and text. */ 1205 margin-bottom: 0.2em ; 1206 /* Image won't be larger than containing block (usually the body element). The body 1207 containing box is the viewport on mobile devices or browser window on desktops. */ 1208 max-width: 30% ; 1209 1210 /* Let text flow around the image in a circle instead of a square box. */ 1211 /* shape-outside: circle(50%); */ 1212 } 1213 1214 /* This is special text for use to the right of the image. */ 1215 div.illustratedparagraph p 1216 { 1217 text-align: justify ; 1218 1219 background-color: transparent ; 1220 } 1221 1222 /* 1223 * ----------------------- Lists -------------------------------------------- 1224 */ 1225 1226 /* Unordered list with a slightly smaller font, 1227 * small Images for bullets. 1228 */ 1229 ul 1230 { 1231 font-family: Verdana, Geneva, "Trebuchet MS", sans-serif ; 1232 font-size: 1.0em ; 1233 1234 padding-left: 0.5em ; 1235 margin-left: 2em ; 1236 1237 margin-top: 1.5em ; 1238 margin-bottom: 1.5em ; 1239 1240 list-style-image: url( "Images/smallBlueBullet.png" ) ; 1241 list-style-type: none ; /* Remove list bullets. */ 1242 1243 clear: both ; /* Keep any floating elements away from both left and right sides. */ 1244 } 1245 1246 /* Ordered list with a slightly smaller font. */ 1247 ol 1248 { 1249 font-family: Verdana, Geneva, "Trebuchet MS", sans-serif ; 1250 font-size: 0.9em ; 1251 1252 padding-left: 0.5em ; 1253 1254 margin-left: 3em ; 1255 1256 clear: both ; /* Keep any floating elements away from both left and right sides. */ 1257 } 1258 1259 /* Unordered list with small black disks. */ 1260 ul.bullet 1261 { 1262 font-size: 0.9em ; 1263 1264 padding-left: 0.5em ; 1265 1266 margin-left: 4em ; 1267 1268 list-style-image: none ; /* Remove list bullets. */ 1269 list-style-type: disc ; 1270 } 1271 1272 /* Unordered list with small black rectangles and text wrap around. */ 1273 ul.minorBullet 1274 { 1275 font-size: 0.9em ; 1276 list-style-image: none ; /* Remove list bullets. */ 1277 list-style-type: square ; 1278 list-style-position: inside ; 1279 } 1280 1281 /* 1282 * ----------------------- Tables ------------------------------------------- 1283 */ 1284 1285 /* Default tables have a solid black border and are as wide as the page. 1286 Collapse internal borders. 1287 */ 1288 table 1289 { 1290 border-collapse: collapse ; 1291 border-style: solid ; 1292 border-color: rgb( 100, 100, 255 ) ; 1293 border-width: thin ; 1294 1295 width: 100% ; 1296 } 1297 1298 /* Table rows and columns have thin borders. */ 1299 td 1300 { 1301 border-style: solid ; 1302 border-color: rgb( 100, 100, 255 ) ; 1303 border-width: thin ; 1304 } 1305 1306 /* 1307 * Special table for software downloads. 1308 */ 1309 table.download 1310 { 1311 border-collapse: collapse ; 1312 border-style: solid ; 1313 border-color: rgb( 200, 100, 50 ) ; /* Brownish. */ 1314 border-width: 0.2em ; 1315 margin-left: 2em ; 1316 width: 90% ; 1317 } 1318 1319 table.download td 1320 { 1321 width: 20em ; /* Minimum width of cell. */ 1322 } 1323 1324 table.download td.package 1325 { 1326 width: 20em ; /* Minimum width of cell. */ 1327 color: rgb( 150, 100, 100 ) ; 1328 } 1329 1330 /* 1331 * ----------------------- Tooltips ----------------------------------------- 1332 * 1333 * Show tooltip contents (text only) when hovering a mouse or pen controlled cursor over the tooltip element. 1334 * Mobile devices don't support hover, even with long press gestures. 1335 * 1336 * Sample HTML: 1337 * <span data-text="I am the tooltip contents." class="I'm a tooltip: hover over me to see tooltip contents!">Tooltip text</span> 1338 */ 1339 @media (any-hover: hover) 1340 { 1341 /* Make the style visible as a tooltip. */ 1342 span.tooltip 1343 { 1344 /* Since we don't specify any top/bottom/left/right property/values which would shift this element 1345 relative TO ITSELF, this is the same as the default static positioning, i.e. normal document flow. 1346 Why do we need this? Because the child class span.tooltip:before uses absolute positioning; 1347 it needs this parent class to have either relative or absolute positioning for that to work. */ 1348 position: relative ; 1349 1350 /* Indicate the tooltip be a dashed line below its text. */ 1351 border-bottom: 0.2em dashed rgb( 50, 100, 150 ) ; 1352 } 1353 1354 /* Tooltip content. 1355 * This child class (:before) of the parent class (span.tooltip) is a pseudoclass which inserts content 1356 * before the first item in the tooltip.span class, i.e. at the start of the tooltip text. It doesn't 1357 * actually change the DOM. Actually it won't be inserted at all: we will take the position of this 1358 * tooltip content out of the normal document flow anyway by using absolute positioning. 1359 * And that's because we want it hover over the tooltip. 1360 */ 1361 span.tooltip:before 1362 { 1363 /* Pull the tooltip text from the parent HTML span data-text value. */ 1364 content: attr( data-text ) ; 1365 1366 text-align: center ; 1367 color: white ; 1368 background: darkblue ; 1369 1370 /* Wide enough for a reasonable chunk of text when hovering. */ 1371 width: 10em ; 1372 1373 /* Take us out of the normal document flow. The position is relative to the initial containing block, 1374 * which is the edge of the padding box of the nearest ancestor element which has a relative position, 1375 * in our case, span.tooltip. So long story short, the tooltip contents will hover in a box whose upper 1376 * left corner is the upper left corner padding of the tooltip text. But then we 1377 * position using top and transform. 1378 */ 1379 position: absolute ; 1380 1381 left: 50% ; /* Place left edge of box 1/2 to the right in the tooltip. */ 1382 transform: translateX( -50% ) ; /* Then shift it 1/2 way up to center horizontally. */ 1383 top: -1em ; /* Center vertically. */ 1384 1385 padding: 1em ; 1386 border-radius: 1.5em ; 1387 1388 /* Tooltip contents is stacked on top of all other display elements. */ 1389 z-index: 99 ; 1390 1391 /* Won't show up until we hover. */ 1392 opacity: 0 ; 1393 1394 /* Fade in when we set opacity = 1 during hover. */ 1395 transition: 0.3s opacity ; 1396 transition-delay: 100ms ; 1397 } 1398 1399 /* Mouse cursor is hovering either over the box of the parent element span.tooltip 1400 * OR the box of the child class span.tooltip:before. In either case, make it opaque. 1401 */ 1402 span.tooltip:hover:before 1403 { 1404 opacity: 1 ; 1405 } 1406 } 1407 1408 /* 1409 * ----------------------- Art Gallery -------------------------------------- 1410 */ 1411 1412 /* Art gallery: container for paintings which looks like a wall where we hang the art. */ 1413 div.gallery 1414 { 1415 /* Items within this container are of flexbox type. They flow in 1D horizontally. */ 1416 display: flex ; 1417 /* Put the first painting at the beginning. */ 1418 justify-content: flex-start ; 1419 /* Paintings wrap around to the next row. */ 1420 flex-flow: row wrap ; 1421 1422 /* Art gallery wall is bluish gray. */ 1423 background-color: rgb( 70, 70, 90 ) ; 1424 background-position: top left ; 1425 background-attachment: fixed ; 1426 background-repeat: repeat ; 1427 1428 /* Deep blue frame for the art gallery. */ 1429 border-color: rgb( 70, 85, 251 ) ; 1430 } 1431 1432 /* Mobile devices don't have hover and usually don't honor fixed background due to increased computation. */ 1433 @media (hover: none) 1434 { 1435 div.gallery 1436 { 1437 background-attachment: initial ; 1438 } 1439 } 1440 1441 /* A painting contains a canvas and title. */ 1442 div.painting 1443 { 1444 text-align: center ; 1445 1446 background-color: transparent ; 1447 1448 /* Items within this container are of flexbox type. They flow in 1D vertically. */ 1449 display: flex ; 1450 flex-direction: column ; 1451 } 1452 1453 /* Title of a canvas. */ 1454 div.painting p 1455 { 1456 color: silver ; 1457 font-style: italic ; 1458 font-size: smaller ; 1459 text-align: center ; 1460 } 1461 1462 /* A canvas is an image with a black frame. */ 1463 div.painting img 1464 { 1465 /* Silvery gray background behind the canvas of the painting. When we pad, this will show between canvas and picture frame. 1466 * Also if the canvas is round, i.e. image is rectangular, but alpha = 0 outside the circular canvas, this will show. 1467 */ 1468 background-color: rgb( 150, 150, 170 ) ; 1469 1470 max-width: 20em ; 1471 1472 /* Between the painting canvas and the frame. */ 1473 padding: 0.2em 0.2em 0.2em 0.2em ; 1474 1475 /* The picture frame is black and rather thick. */ 1476 border-style: solid ; 1477 border-color: black ; 1478 border-width: 0.8em ; 1479 1480 /* A little bit of margin so that the picture frames don't run into each other. */ 1481 margin: 0.3em 0.3em 0.3em 0.3em ; 1482 } 1483 1484 /* Use an ID selector to apply to one painting only. Turn off the padding because 1485 * the image has its own elliptical black frame already. 1486 */ 1487 div.painting img#GirlFromKweilin 1488 { 1489 background-color: rgb( 28, 28, 28 ) ; 1490 1491 padding: 0 0 0 0 ; 1492 } 1493 1494 /* 1495 * ------------------------------ Printing ---------------------------------- 1496 */ 1497 1498 /* For printing, omit the navigation and borders. 1499 * To test, do print preview from a web browser to see the pdf file. 1500 * Or to test on a browser in display mode, temporarily replace "print" with "screen". 1501 */ 1502 @media print 1503 { 1504 /* Turn off the grid. */ 1505 div.wrapper 1506 { 1507 display: block ; 1508 } 1509 1510 /* Turn off the navigation sidebars. */ 1511 nav, header.navigation 1512 { 1513 display: none ; 1514 } 1515 1516 /* Turn off decorative border Images. */ 1517 aside.border 1518 { 1519 display: none ; 1520 } 1521 1522 /* Leave less margin on the left of the page since border image is gone. 1523 * Remove all background images (printers don't print white). 1524 */ 1525 body 1526 { 1527 background: white ; 1528 1529 margin-left: 3em ; 1530 margin-right: 2em ; 1531 } 1532 1533 /* Turn off scrolling in scroll boxes and show the whole content. */ 1534 div.scrollBox, div.scrollBoxContent 1535 { 1536 background: white ; /* Remove background color (printers don't print white). */ 1537 overflow: auto ; /* No scrollbars; just show the whole content. */ 1538 white-space: pre-wrap ; /* Preserve whitespace. Wrap when necessary and on newlines. */ 1539 1540 width: auto ; /* Expand the box size to whatever necessary. */ 1541 height: auto ; /* Expand the box size to whatever necessary. */ 1542 } 1543 1544 figure 1545 { 1546 background: white ; /* Remove background color (printers don't print white). */ 1547 } 1548 1549 table.gallery 1550 { 1551 background: white ; /* Remove background color (printers don't print white). */ 1552 } 1553 }