/* ------------------------------------------------------------------ grease.css - compatibility shims only. This file must NOT restyle the 1998 site. It contains exactly three things: 1. the replacement (iframe shell) 2. legacy background/margin behaviour that Chrome no longer gets from the deprecated attributes 3. the lightbox that replaces window.open() image popups ------------------------------------------------------------------ */ /* --- 1. frameset replacement ------------------------------------- */ /* Reproduces exactly: a fixed-height top frame and a body frame that takes the remainder. The top frame is a separate browsing context, so it does NOT reload when the body frame navigates - same as the original frameset. */ html.gr-shell, html.gr-shell body { margin: 0; padding: 0; height: 100%; overflow: hidden; } html.gr-shell body { display: flex; flex-direction: column; } html.gr-shell iframe { display: block; width: 100%; border: 0; margin: 0; padding: 0; } html.gr-shell .gr-frame-fixed { flex: 0 0 auto; } html.gr-shell .gr-frame-flex { flex: 1 1 auto; min-height: 0; } /* --- 2. legacy document defaults --------------------------------- */ /* gave framed documents a zero body margin. Pages that lived inside a frame carry class="gr-framed" so they look identical framed or opened standalone. */ body.gr-framed { margin: 0; } /* tiled from the top-left at natural size and scrolled with the page. Never scaled, never "cover", never fixed. Repeat direction: DOWN ONLY, anchored left. The section backgrounds are single wide strips - 1024-1100px across and only 15-150px tall - and each one is a finished piece of art read left to right (coloured edge, then the patterned field, then a dead zone). They were cut at 1024/1100 exactly so they would never wrap on a 1998 monitor, so the horizontal repeat is an artifact of modern wide viewports rather than anything the design intended. They still have to tile vertically: the pages run to 7000px and the strip is what fills them. All 14 strips end in pure black (0,0,0), uniform down the whole right edge - they were padded out to black on purpose. So black is what continues past the strip on a screen wider than the art, and the join is invisible. Below 1024px nothing changes: the strip covers the width. */ body[background]:not([background$="p_grease.gif"]) { background-repeat: repeat-y; /* down, never across */ background-position: left top; background-size: auto; background-attachment: scroll; background-color: #000; /* the strips' own right-edge colour */ } /* The exception. bo_p_grease.gif is the 200x200 "official desktop pattern" the Booster Club page gives away - a true wallpaper tile, authored to repeat in both directions. It keeps doing that, and keeps the page's own BGCOLOR underneath it. */ body[background$="p_grease.gif"] { background-repeat: repeat; background-position: left top; background-size: auto; background-attachment: scroll; } /* Chrome no longer draws the border=0/hspace/vspace defaults that the markup relies on for inside ; the attributes themselves are still honoured, so nothing is declared here on purpose. */ /* --- the random-trivia box (Student Life / Senior Class headers) --- */ /* st_topbg.gif and se_topbg.gif both paint a blue box at x15,y12 sized 159x74, with a ~3px rounded border. The 1998 markup dropped the trivia into , which lands at x=15,y=2 and is free to grow to any height - so the text sat 10px high and the longer strings spilled out of the box and out of the frame. Parking the wrapper on the box fixes both. The wrapper stays IN FLOW on purpose. Taking it out (position:absolute) empties the cell, and the table then loses the text's min-content width and re-resolves its columns - which walks the logo on the right 1px left. Left in flow, the cell contributes exactly what it always did and the header geometry is untouched; only the height is pinned and clipped. */ #gr-trivia { width: 152px; /* box interior: x 18-170 */ height: 67px; /* box interior: y 15-82 */ margin-top: 12px; /* cell content top (y3) -> box interior (y15) */ margin-left: 2px; /* cell content left (x16) -> box interior (x18) */ box-sizing: border-box; overflow: hidden; line-height: 1.15; text-align: center; } /* default vertical-align:middle would re-centre the cell as the trivia changes length; top keeps the margin above meaningful. */ td:has(> #gr-trivia) { vertical-align: top; } /* slife_top.html has a
after the trivia. Against the original inline text that just ended the line; after a block-level wrapper it generates an empty line box of its own and stretches the header table by 18px, pushing the logo down with it. sclass_top.html has no
and shows no such shift - which is what identified this. */ #gr-trivia ~ br { display: none; } /* --- the "#tile" jump (Scrapbook / Pop Quiz / Faculty footers) ---- */ /* Eleven pages have a starburst that links to #tile, and sits inline immediately before the 248x65 n_footer.gif that opens the desktop pattern. Empty inlines are placed on the BASELINE of their line box, which here is 51px below the top of that image - so jumping to it scrolled the graphic almost entirely off the top, leaving ~14 of its 65 pixels on screen. Making the anchor a zero-height block moves it off the baseline to the top of the footer line, and scroll-margin-top adds a little air above, so the whole GIF lands in view. Height stays 0 and nothing is painted, so no page grows by a pixel. */ a[name="tile"] { display: block; height: 0; scroll-margin-top: 24px; } /* --- 3. lightbox (replaces window.open() for jpg/png/gif) --------- */ #gr-lightbox { position: fixed; inset: 0; z-index: 2147483000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.82); cursor: zoom-out; /* the popups had a status bar and a plain grey chrome; keep it neutral */ font: 11px Verdana, Geneva, Arial, sans-serif; } #gr-lightbox.gr-open { display: flex; } #gr-lightbox .gr-lb-inner { position: relative; max-width: 94vw; max-height: 94vh; cursor: default; } #gr-lightbox img { display: block; max-width: 94vw; max-height: 90vh; width: auto; height: auto; /* keep the original pixels crisp - these are 1998 GIF/JPEG assets and must not be smoothed or scaled up */ image-rendering: -webkit-optimize-contrast; background: #000; box-shadow: 0 0 0 1px #555, 0 10px 40px rgba(0, 0, 0, 0.7); } #gr-lightbox .gr-lb-close { position: absolute; top: -13px; right: -13px; width: 26px; height: 26px; line-height: 24px; text-align: center; border: 1px solid #888; border-radius: 13px; background: #222; color: #fff; font: 15px/24px Verdana, Geneva, Arial, sans-serif; cursor: pointer; user-select: none; } #gr-lightbox .gr-lb-close:hover { background: #444; } /* --- media replacements ------------------------------------------ */ /*