/* prevent annoying bounce effect in OSX, works in Chrome, FF, Opera, but not Safari */ /* of figure and video windows compensate with style='overflow:hidden; height:auto;' */ html { height:100%; overflow:hidden; } /* on the phone, how can I let it bounce but not let the nav bar bounce? */ body { height:100%; overflow:auto; } /* experimenting with overscroll-behavior-y on html, body, section, nav has NO effect */ body, html { background-color:#fff; } /* for borderless section */ /************************* text fonts and sizes *************************/ /* Could segregate all fonts and sizes */ /* font-family:Verdana, Geneva, sans-serif; --wide font-family:Tahoma, Arial, Helvetica, sans-serif; --narrow font-family:Georgia, Utopia, Palatino, 'Palatino Linotype', serif; --wide font-family:'Times New Roman', Times, serif; --narrow font-family:'Courier New', Courier, monospace; --monospace */ body, section, aside, h1, h2, h3 { font-family:'Noto Serif',serif !important; } body, section { font-size:14px !important; } #footnotepopup, #footnotepopup * { font-size:12px; } aside, ol.fn, ol.fn * { font-size:12px; } nav, #footer, #vidcontrol, #indexlablist, .footer { font-family:Arial, sans-serif; font-size:12px; font-weight:400; } #footer { font-size:11px; } nav .indexhead { font-size:12px; font-weight:bold; } /********* text area **************************/ section { /* no borders */ position:relative; display:block; left:168px; width:calc(100% - 168px); /* was 80% THIS WORKS IN CHROME */ max-width:758px; padding:8px; line-height:1.6; /* was 23px; accommodate super- and subscripts by slightly wider spacing */ border:none; } p.reveal, div.reveal { margin-top:6px; } section p { text-indent:2em; } p.listhead { text-indent:0; } .notshown { visibility:hidden; } h1 { font-size:16px; font-weight:bold; } h2 { font-size:14px; font-weight:bold; } h1 { text-align:center; } h2, h3 { text-align:left; margin-bottom:0px; } h3 { font-style:italic; font-weight:300; font-size:14px; } XX h3+p, h2+h3 { margin-top:3px; } XX h2+p { margin-top:6px; } h2 { margin-top:0.7em; } /* was 18px */ h1+h1 { margin-top:-6px; font-size:15px; } /* for Instructor's Supplement after Title */ p.listhead { margin-bottom:0px; } p.listhead+ul { margin-top:3px; } ul { padding-left:2em; } section.index ul { column-count:2; column-gap:2em; /*list-style:none;*/ } section.index h1:not(:first-of-type) { margin-top:12px; margin-bottom:0px; } section.index h1:not(:first-of-type)+h2 { margin-top:0px; } /******* doi and pdf links get 'doi' or 'pdf' on screen, href shown in print ******************/ a.doi[href]:after { content: 'doi'; } a.pdf[href]:after { content: 'pdf'; } a.book[href]:after { content: 'book'; } /******* list styles (references, objectives, questions, answers, equipment, steps ******************/ ul.ref { margin-top:6px; text-indent:-2em; list-style:none; } ol.q, ol.obj, ol.equip, ol.steps { margin-top:0px; padding-top:0px; padding-left:1.5em; /* 1.5em is OK as long as there are no more than 9 items; may have to go to 2em for >9. */ } ul.q, ul.qa, ul.obj, ul.equip, ul.check, ul.steps, ol.q ul { margin-top:0px; padding-top:0px; padding-left:1.5em; } /* ol.q ul gets everything that ul.qa gets, but I've decided to keep using class='qa' for clarity in the html. */ /* marker-offset:2em; isn't yet supported in any browser. */ /************************* footer with title and contact info (not yet designed) *************************/ #footer { position:fixed; width:inherit; padding:4px; border-radius:6px; /*border:1px solid;*/ bottom:6px; left:6px; z-index:-10; } /************************* navigation area ********************************/ nav a { text-decoration:none; background:none; } /* not needed in menu, where function is clear */ nav { position: fixed; padding: 6px 8px 0px 8px; top: 0px; height: 100%; width: 168px; overflow: visible; } nav ul { list-style:none; } nav img { /* logo, centered above nav */ margin:auto; z-index:-1; position:absolute; left:0; right:0; } label[for='fileopen'] { display:block; text-align:center; width:100%; height:25px; color:#333; padding-top:5px; border:1px solid #999; border-radius:4px; background:#fff; cursor:pointer; } #fileopen { display:block; width:100%; height:25px; z-index:10; opacity:0.01; margin-top:-25px; } /* for file-open area */ .highlight { box-shadow:0 0 5px #e60; } /* list of lab links */ #indexlablist p.intro { line-height:20px; margin-top:0px; margin-bottom:0; padding:0; } #indexlablist ol { margin-left:15px; line-height:20px; margin-top:0px; } #indexlablist li { padding-left:0em; } #indexlablist ol.num { list-style:decimal outside; } #indexlablist ol.alpha { list-style:upper-alpha outside; } #indexlablist .indexhead { margin-top:6px; margin-bottom:3px; } #indexlablist { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px inset #ccc; } /*#indexlablist { display:block; } #indexlablist { display:none; } /**************** it's toggled ON if in a big window, stays off if small window */ /* BUT now it stays OFF because manageNavArea depends on visibility of #homelink being hidden It should be hidden, given the css below, unless that's changed by window sizing! Seems OK now. The only problem is if the window resizes WHILE IN THE HOME view */ #homelink { display:none; } #cancelindex { display:none; } /************ account area *******************************/ .account { float:right; } #accountscreen { display:block; } /* set to display:none; if iPhone */ #accountscreen { margin-top:50px; margin-bottom:10px; } /********************************************** text size *******************************************/ /* How should figure and demo captions handle it? It will require changing figure window height... */ /* Should experiment instructions and intro do this? Probably NOT */ /* .font14 is default */ #fontsizing { display:block; position:fixed; top:0; right:0; background:#f8f8f8; border-left:1px solid #ccc; border-bottom:1px solid #ccc; border-radius:0 0 0 4px; height:20px; padding-top:2px; font-size:14px; font-variant:small-caps; } #fontsizing span { padding:6px 6px 3px; } body.font10 section, body.font10 h2, body.font10 h3 { font-size:10px !important; } body.font10 h1 { font-size:12px; } body.font11 section, body.font11 h2, body.font11 h3 { font-size:11px !important; } body.font11 h1 { font-size:13px; } body.font12 section, body.font12 h2, body.font12 h3 { font-size:12px !important; } body.font12 h1 { font-size:14px; } body.font13 section, body.font13 h2, body.font13 h3 { font-size:13px !important; } body.font13 h1 { font-size:15px; } body.font14 section, body.font14 h2, body.font14 h3 { font-size:14px !important; } /* default */ body.font14 h1 { font-size:16px; } body.font15 section, body.font15 h2, body.font15 h3 { font-size:15px !important; } body.font15 h1 { font-size:16px; } body.font16 section, body.font16 h2, body.font16 h3 { font-size:16px !important; } body.font16 h1 { font-size:17px; } body.font17 section, body.font17 h2, body.font17 h3 { font-size:17px !important; } body.font17 h1 { font-size:18px; } body.font18 section, body.font18 h2, body.font18 h3 { font-size:18px !important; } body.font18 h1 { font-size:19px; } body.font19 section, body.font19 h2, body.font19 h3 { font-size:19px !important; } body.font19 h1 { font-size:20px; } body.font20 section, body.font20 h2, body.font20 h3 { font-size:20px !important; } body.font20 h1 { font-size:22px; } /********************************************** device section *******************************************/ /* TRY REDOING THIS USING vh, vw, %, variables, calculations, and max-width, max-height etc. 1024 wide x 768 tall (projector or landscape tablet) compact the nav area but keep it on the left; let the section text get wider 768 wide x 1024 tall (tablet in portrait) move nav area to the top with dropdown menus, let the section get full width Decided against that, because it still works with the vertical nav area and is much simpler https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries shows possibly better way to do these but my one attempt didn't work in Chrome 6/13/20 ALso look at calc(100% - 162px) as a size. Could it make any of the transitions smoother? does it matter? */ @media screen and (max-height:714px) { nav img { width:24px; height:24px; margin-top:-3px; } #accountscreen { margin-top:0px; margin-bottom:4px; } } @media screen and (max-height:660px) { #footer { display:none; } } @media screen and (max-height:630px) { #indexlablist { margin-bottom:6px; padding-bottom:6px; } } /* the above gets us to 648px high before the nav area gets cut off after that, go to the phone interface, because it seems impossible to get the nav area to scroll*/ @media screen and (max-width:650px) { section.index ul { column-count:1; } } /* iPhone SE 320x568 iPhone 375x667 iPhone+ 414x736 */ @media screen and (max-width:768px), screen and (max-height:608px) { /*@media (screen and ((width <= 768px) or (height <= 648px))) { DOESN'T WORK IN CHROME AS OF 6/13/20 */ nav { width:100%; height:32px; background:#eee; border-bottom:1px solid #ccc; margin-left:0; margin-top:0; box-shadow:2px 2px 2px 0px #ccc; padding-top:2px; border:none; } nav img { width:24px; height:24px; margin:2px 2px 0px 4px; } #indexlablist { column-count:2; position:absolute; width:324px; /* 320 is width of iPhone SE, and the smallest that accommodates 2 columns */ top:31px; left:-4px; padding:5px; padding-left:9px; padding-bottom:0px; background:#eee; border:none; border-radius:0 0 12px 0px; box-shadow:2px 2px 2px 0px #ccc; margin-top:1px; border-top:1px solid #ccc; /* remove this? (and the 1px margin) */ } #indexlablist ol.alpha { padding-bottom:40px; /* creates space for #cancelindex */ } #cancelindex { display:block; /* position:absolute;*/ bottom:0px; padding:4px; left:50%; transform:translate(-50%); width:324px; border-top:1px solid #ccc; text-align:center; } #indexlablist ol.alpha li { break-inside:avoid; } #indexlablist * { line-height:26px; } #accountscreen { margin:0; } #accountscreen :nth-child(2) { margin-right:14px; } #homelink { display:block; position:fixed; left:0px; padding-left:34px; padding-right:50px; padding-top:7px; padding-bottom:8px; } label[for='fileopen'], #fileopen { position:fixed; top:4px; right:0px; width:100px; border:none; background:none; color:#b00; text-shadow:none; } #fontsizing { width:40px; height:32px; left:calc(50% - 20px); padding-top:7px; background:none; border:none; text-align:center; } #footer { display:none; } body, html { background:white; } section { top:32px; left:0; width:100%; max-width:100%; border:none; margin:0; } section.index h2 a { color:#b00; } /* in the index links */ section.index ul { column-count:2; } @media screen and (max-width:500px) { section.index ul { column-count:1; } } /*body, section, h1, h2, h3 { font-size:13px !important; }*/ } /********************************************** print *******************************************/ @media print { nav { display:none; } .noprint { display:none; } div.printonly { display:inline-block; } section { left:0px; width:100%; float:none; border:none; } html { height:100%; overflow:visible; } body { height:100%; overflow:visible; } body *, section { color:black; background:white; } body, section, .quiz { background:white; } body, section, aside { font-size:12px !important; } h1, h2, h3 { font-size:12px; } div.fn, div.fn * { font-size:10px; } aside, ol.fn, ol.fn * { font-size:11px; } .quiz { font-family:Helvetica, Arial, sans-serif; font-size:12px; } *.quiz textarea { font-family:Helvetica, Arial, sans-serif; font-size:11px; } .ans { font-family:Helvetica, Arial, sans-serif; font-size:10px; } h3+p, h2+h3 { margin-top:3px; } h2+p { margin-top:0px; } h2 { margin-top:12px; } h1+h1 { margin-top:-6px; font-size:12px; } /* for Instructor's Supplement after Title */ section { line-height:18px; } aside { line-height:14px; } /* links in black but highlight with light bolding (font-weight:450; not supported) or underline/dotted(too thick) */ a, a:visited, a.not, .link, .doi, .pdf { color:black !important; text-decoration:none; background:none; border-bottom:none; } a.ext:after { content:' ['attr(href)']'; /* external links should display the url in brackets */ } a.doi[href]:after, a.pdf[href]:after, a.link[href]:after { content: attr(href); /* show the link (already in brackets) */ } table, .quiz, aside, li, div.printfig { page-break-inside:avoid; } h1, h2, h3, p.listhead { page-break-after:avoid; } @page { margin-left:1in; margin-right:.5in; } @page { orphans:2; widows:2; } /* none of the following works in any browser I've tried */ @page @top-left { content:string(doctitle); } @page @top-right { content:counter(page); } }