/* ============================================================ style.css :: the Frutiger Aero layout, every page but the takeovers ------------------------------------------------------------ BROWSER TARGET: Safari 7 (Mavericks) and Safari 11 (High Sierra) Because of that target this stylesheet deliberately avoids: - CSS custom properties (var) not in Safari 7 - flexbox gap needs Safari 14.1 - the "inset" shorthand needs Safari 14.5 - CSS grid needs Safari 10.1 Layout is done with floats instead, which is also exactly how sites in 2003 were actually built. Gradients and transforms carry -webkit- prefixes for the same reason. PALETTE (hardcoded, so use find-and-replace to recolour): sky top #a8dcf0 glass edge rgba(255,255,255,.85) sky bottom #d8f0fb panel ink #1d3f57 grass #4e9c3a dim ink #55707f aero blue #1a72b8 hot accent #e2553c SECTIONS 1. Reset and page background 2. The glass recipe <- the Aero look lives here 3. Header 4. Scrolling badge marquee 5. Column layout (floats) 6. Left nav 7. Content panels 8. Right rail: ads, stickers, counter 9. Footer 10. Old web odds and ends ============================================================ */ /* ---------- 1. RESET AND PAGE BACKGROUND -------------------- */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 14px 0 40px; color: #1d3f57; font: 12px/1.55 "Selawik", "Segoe UI", "Lucida Grande", Tahoma, Verdana, sans-serif; /* Vista wallpaper in pure CSS: bubbles floating over a sky that fades down into grass. Layers are drawn front to back. */ background-color: #bfe6f5; background-image: -webkit-radial-gradient(18% 22%, circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%), -webkit-radial-gradient(78% 14%, circle, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 36%), -webkit-radial-gradient(62% 46%, circle, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 28%), -webkit-linear-gradient(top, #7fc9e8 0%, #a8dcf0 26%, #d8f0fb 58%, #bfe38c 82%, #4e9c3a 100%); background-image: radial-gradient(circle at 18% 22%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%), radial-gradient(circle at 78% 14%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 36%), radial-gradient(circle at 62% 46%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 28%), linear-gradient(to bottom, #7fc9e8 0%, #a8dcf0 26%, #d8f0fb 58%, #bfe38c 82%, #4e9c3a 100%); /* NO background-attachment: fixed HERE. It used to be, and in WebKit any element carrying it registers as a slow repaint object on the FrameView, which switches OFF threaded scrolling for the WHOLE page. Scrolling then becomes a main thread repaint of the visible area on every frame, and this particular element is four stacked gradients under a 980px column, on a machine from 2010. What it bought was the sky staying still while the page moved. In the common case that is invisible anyway, because .wallpaper is position:fixed and opaque and covers the whole thing. */ } a { color: #1a72b8; text-decoration: none; } a:hover { text-decoration: underline; } img { border: 0; } /* The fixed desktop column. 980px, on purpose, forever. */ .wrap { width: 980px; margin: 0 auto; } /* Floats do not stretch their parent, so anything containing floated children needs this. It is the classic clearfix. */ .group:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } /* ---------- 2. THE GLASS RECIPE ----------------------------- This is the whole Aero look and it is worth reading closely. Four things stacked together: a) a light-to-dark white gradient with a hard step in the middle, which is what reads as "glass" b) a bright 1px white border c) an inset white highlight along the very top edge d) a soft drop shadow so it floats above the wallpaper ----------------------------------------------------------- */ .glass { position: relative; margin-bottom: 10px; background-color: rgba(232, 244, 252, .62); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.78) 0%, rgba(255,255,255,.38) 49%, rgba(255,255,255,.14) 51%, rgba(255,255,255,.44) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,.78) 0%, rgba(255,255,255,.38) 49%, rgba(255,255,255,.14) 51%, rgba(255,255,255,.44) 100%); border: 1px solid rgba(255,255,255,.85); -webkit-border-radius: 7px; border-radius: 7px; -webkit-box-shadow: 0 2px 6px rgba(10,50,80,.34), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.45); box-shadow: 0 2px 6px rgba(10,50,80,.34), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.45); } /* A darker glass, for the header and the nav. Reads like the smoked chrome on the Frutiger Aero Archive site. */ .glass--dark { background-color: rgba(14, 58, 88, .58); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 49%, rgba(0,0,0,.16) 51%, rgba(255,255,255,.20) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 49%, rgba(0,0,0,.16) 51%, rgba(255,255,255,.20) 100%); border-color: rgba(255,255,255,.55); color: #ffffff; } /* Titlebar strip at the top of a glass panel. */ .glass__bar { padding: 5px 10px; font-size: 11px; font-weight: bold; color: #14486b; text-shadow: 0 1px 0 rgba(255,255,255,.9); border-bottom: 1px solid rgba(255,255,255,.6); /* Same reasoning as .navlist a: keep this opaque enough that the dark themes cannot bleed through and kill the contrast. */ background-color: rgba(238, 247, 253, .80); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.85), rgba(255,255,255,.45)); background-image: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.45)); -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .glass__body { padding: 10px 12px; } /* Sunken white content well, so text stays readable on glass. */ .well { padding: 9px 11px; background: rgba(255,255,255,.80); border: 1px solid rgba(255,255,255,.9); -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 1px 3px rgba(20,70,100,.20); box-shadow: inset 0 1px 3px rgba(20,70,100,.20); } /* ---------- 3. HEADER --------------------------------------- */ .header { padding: 12px 16px; } .header__logo { float: left; margin: 0; font: normal 27px/1.1 "Selawik", "Segoe UI", "Lucida Grande", Tahoma, sans-serif; color: #ffffff; text-shadow: 0 1px 3px rgba(0,30,50,.75), 0 0 14px rgba(160,225,255,.8); } .header__logo b { font-weight: bold; } .header__tag { clear: left; float: left; font-size: 11px; color: #dff2ff; text-shadow: 0 1px 2px rgba(0,30,50,.8); } .header__right { float: right; text-align: right; padding-top: 4px; } .header__right a { color: #ffffff; font-size: 11px; text-shadow: 0 1px 2px rgba(0,30,50,.8); } /* The glossy Vista orb, drawn with two stacked gradients. */ .orb { float: left; width: 46px; height: 46px; margin: 0 12px 0 0; -webkit-border-radius: 50%; border-radius: 50%; background-image: -webkit-linear-gradient(top, rgba(255,255,255,.85) 0%, rgba(255,255,255,.05) 48%), -webkit-linear-gradient(top, #7fd4f5 0%, #1a72b8 60%, #0d4a80 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,.85) 0%, rgba(255,255,255,.05) 48%), linear-gradient(to bottom, #7fd4f5 0%, #1a72b8 60%, #0d4a80 100%); border: 1px solid rgba(255,255,255,.8); -webkit-box-shadow: 0 2px 6px rgba(0,40,70,.5), inset 0 0 10px rgba(255,255,255,.5); box-shadow: 0 2px 6px rgba(0,40,70,.5), inset 0 0 10px rgba(255,255,255,.5); } /* ---------- 4. SCROLLING BADGE MARQUEE ---------------------- The tag is genuinely removed from browsers now, so this is a CSS animation instead. The badge list is written out TWICE in the HTML, and we slide exactly half the width, which makes the loop seamless. ----------------------------------------------------------- */ /* KEPT ON PURPOSE, CURRENTLY UNUSED. Nothing on the site has a .marquee in it any more. It was taken off the top of the home page because a strip of other people's buttons was the first thing the front page said, not because it stopped working. js/buttons.js still fills a #marqueeTrack if it finds one, and tools/content/index.html carries the markup in a comment. Do not remove either half in a tidy up. */ .marquee { overflow: hidden; padding: 7px 0; white-space: nowrap; } .marquee__track { display: inline-block; -webkit-animation: slide 34s linear infinite; animation: slide 34s linear infinite; } .marquee:hover .marquee__track { -webkit-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes slide { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-50%); } } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- THE 88x31 BADGES -------------------------------- The real currency of the old web. These are drawn in CSS so there are no images to load, but the size is the authentic 88x31 so you can drop real .gif buttons in later: ----------------------------------------------------------- */ .badge { display: inline-block; width: 88px; height: 31px; margin: 0 4px 4px 0; padding: 3px 4px; overflow: hidden; vertical-align: middle; text-align: center; font: bold 9px/10px Verdana, Geneva, sans-serif; letter-spacing: .02em; color: #ffffff; text-shadow: 0 1px 1px rgba(0,0,0,.6); border: 1px solid #ffffff; -webkit-box-shadow: 0 1px 3px rgba(0,40,70,.45); box-shadow: 0 1px 3px rgba(0,40,70,.45); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0) 55%); background-image: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0) 55%); background-color: #1a72b8; } .badge:hover { text-decoration: none; } .badge span { display: block; } .badge .badge__small { font-size: 8px; font-weight: normal; letter-spacing: 0; } /* Colour variants. Add your own by copying one of these. */ .badge--blue { background-color: #1a72b8; } .badge--green { background-color: #3f9c3a; } .badge--pink { background-color: #e2559c; } .badge--orange { background-color: #e2803c; } .badge--purple { background-color: #7b4ec9; } .badge--red { background-color: #d0433a; } .badge--teal { background-color: #2aa6a6; } .badge--black { background-color: #23282d; } .badge--lime { background-color: #6fae1a; } /* An 88x31 that looks like a scanline-y old GIF. */ .badge--retro { background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), -webkit-repeating-linear-gradient(top, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 1px, transparent 3px); } /* ---------- 5. COLUMN LAYOUT (FLOATS) ----------------------- 172 + 10 + 588 + 10 + 200 = 980 ----------------------------------------------------------- */ .col-left { float: left; width: 172px; } .col-mid { float: left; width: 588px; margin: 0 10px; } .col-right { float: left; width: 200px; } /* ---------- 6. LEFT NAV ------------------------------------- Icon plus label rows, the way the Frutiger Aero Archive did its sidebar. The icon is a CSS gradient square, so you can swap in a real 16x16 .png later without changing the layout. ----------------------------------------------------------- */ .navgroup { margin-bottom: 10px; } .navgroup__head { padding: 4px 8px; font-size: 11px; font-weight: bold; color: #ffffff; text-shadow: 0 1px 2px rgba(0,30,50,.8); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.4), rgba(255,255,255,.08) 50%, rgba(0,0,0,.14)); background-image: linear-gradient(to bottom, rgba(255,255,255,.4), rgba(255,255,255,.08) 50%, rgba(0,0,0,.14)); border: 1px solid rgba(255,255,255,.6); -webkit-border-radius: 5px; border-radius: 5px; margin-bottom: 4px; } .navlist { margin: 0; padding: 0; list-style: none; } .navlist li { margin-bottom: 3px; } .navlist a { display: block; padding: 4px 7px; font-size: 11px; color: #123c5a; text-shadow: 0 1px 0 rgba(255,255,255,.85); /* These alphas are kept high on purpose. If they drop, the dark themes show through and the label stops being readable. */ background-color: rgba(240, 249, 255, .88); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.95), rgba(255,255,255,.55) 50%, rgba(255,255,255,.80)); background-image: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.55) 50%, rgba(255,255,255,.80)); border: 1px solid rgba(255,255,255,.85); -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px rgba(10,50,80,.25); box-shadow: 0 1px 2px rgba(10,50,80,.25); } .navlist a:hover { text-decoration: none; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.5); background-image: -webkit-linear-gradient(top, #8fd6f5, #1a72b8 52%, #0d4a80); background-image: linear-gradient(to bottom, #8fd6f5, #1a72b8 52%, #0d4a80); } .navlist a.is-current { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.5); background-image: -webkit-linear-gradient(top, #7fe0a8, #3f9c3a 52%, #24661f); background-image: linear-gradient(to bottom, #7fe0a8, #3f9c3a 52%, #24661f); } /* The little square icon before each nav label. */ .ico { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; text-align: center; font: 10px/15px Verdana, sans-serif; color: #ffffff; text-shadow: 0 1px 1px rgba(0,0,0,.5); -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid rgba(255,255,255,.8); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.7), rgba(255,255,255,0) 60%); background-image: linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,0) 60%); background-color: #1a72b8; } .ico--green { background-color: #3f9c3a; } .ico--pink { background-color: #e2559c; } .ico--orange { background-color: #e2803c; } .ico--purple { background-color: #7b4ec9; } .ico--red { background-color: #d0433a; } .ico--teal { background-color: #2aa6a6; } /* ---------- 7. CONTENT PANELS ------------------------------- */ .page-title { margin: 0 0 8px; font: normal 19px/1.2 "Selawik", "Segoe UI", "Lucida Grande", Tahoma, sans-serif; color: #14486b; text-shadow: 0 1px 0 rgba(255,255,255,.9); } .hr-fade { height: 1px; margin: 10px 0; border: 0; background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(26,114,184,.6), rgba(255,255,255,0)); background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(26,114,184,.6), rgba(255,255,255,0)); } /* Glossy Aqua pill button. */ .aqua-btn { display: inline-block; padding: 7px 22px; font-size: 12px; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.45); -webkit-border-radius: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.75); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), -webkit-linear-gradient(top, #5ec8f0, #1a72b8); background-image: linear-gradient(to bottom, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(to bottom, #5ec8f0, #1a72b8); -webkit-box-shadow: 0 2px 5px rgba(0,40,70,.4), inset 0 0 9px rgba(255,255,255,.45); box-shadow: 0 2px 5px rgba(0,40,70,.4), inset 0 0 9px rgba(255,255,255,.4); } .aqua-btn:hover { text-decoration: none; } /* Two half-width boxes side by side, using floats. */ .half { float: left; width: 50%; } .half-in { margin-right: 5px; } .half + .half .half-in { margin: 0 0 0 5px; } .shot { height: 62px; margin-bottom: 6px; border: 1px solid rgba(255,255,255,.9); -webkit-border-radius: 4px; border-radius: 4px; background-image: -webkit-linear-gradient(135deg, #0d4a80, #7fd4f5 60%, #bfe38c); background-image: linear-gradient(135deg, #0d4a80, #7fd4f5 60%, #bfe38c); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } .shot--empty { background: #dbe9f2; color: #6d8ea1; font-size: 11px; text-align: center; line-height: 62px; } /* ---------- 8. RIGHT RAIL: ADS, STICKERS, COUNTER ------------ */ /* A cute square ad, the sort that sat in a sidebar in 2004. */ .ad { display: block; padding: 8px; margin-bottom: 8px; text-align: center; font-size: 11px; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.5); border: 2px solid #ffffff; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 2px 5px rgba(0,40,70,.4); box-shadow: 0 2px 5px rgba(0,40,70,.4); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.55), rgba(255,255,255,0) 55%); background-image: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0) 55%); background-color: #e2559c; } .ad:hover { text-decoration: none; } .ad b { display: block; font-size: 14px; line-height: 1.2; } .ad i { display: block; font-size: 10px; font-style: normal; opacity: .9; } .ad--gold { background-color: #d9a021; } .ad--grape { background-color: #7b4ec9; } .ad--slime { background-color: #6fae1a; } .ad--cyber { background-color: #23282d; } /* The blinking one. Yes, really. */ .ad--blink { -webkit-animation: blinky 1.1s steps(1) infinite; animation: blinky 1.1s steps(1) infinite; } @-webkit-keyframes blinky { 0%, 49% { border-color: #ffff5a; } 50%,100% { border-color: #ffffff; } } @keyframes blinky { 0%, 49% { border-color: #ffff5a; } 50%,100% { border-color: #ffffff; } } /* Gently bobbing sticker, for adoptables and pets. */ .sticker { display: block; width: 76px; height: 76px; margin: 0 auto 6px; -webkit-border-radius: 50%; border-radius: 50%; border: 2px solid #ffffff; background-image: -webkit-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,0) 50%), -webkit-linear-gradient(top, #ffd36e, #e2803c); background-image: linear-gradient(to bottom, rgba(255,255,255,.75), rgba(255,255,255,0) 50%), linear-gradient(to bottom, #ffd36e, #e2803c); -webkit-box-shadow: 0 3px 7px rgba(0,40,70,.4); box-shadow: 0 3px 7px rgba(0,40,70,.4); text-align: center; font: bold 30px/74px Verdana, sans-serif; color: #ffffff; text-shadow: 0 2px 3px rgba(0,0,0,.35); -webkit-animation: bob 2.6s ease-in-out infinite; animation: bob 2.6s ease-in-out infinite; } @-webkit-keyframes bob { 0%,100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-5px); } } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* Green-on-black odometer counter. */ .counter { display: inline-block; padding: 3px 7px; font: 15px/1 "Lucida Console", Monaco, monospace; letter-spacing: .24em; color: #7fff9a; background: #0b0f12; border: 2px solid #ffffff; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 4px rgba(0,40,70,.5), inset 0 0 9px rgba(60,255,120,.25); box-shadow: 0 1px 4px rgba(0,40,70,.5), inset 0 0 9px rgba(60,255,120,.25); } .centered { text-align: center; } /* Under construction bar, the yellow and black hazard stripe. */ .construction { padding: 5px 8px; margin-bottom: 8px; text-align: center; font: bold 10px/1.3 Verdana, sans-serif; color: #3a2c00; border: 2px solid #ffffff; -webkit-border-radius: 4px; border-radius: 4px; background-image: -webkit-repeating-linear-gradient(45deg, #ffd400 0px, #ffd400 9px, #1d1d1d 9px, #1d1d1d 18px); background-image: repeating-linear-gradient(45deg, #ffd400 0px, #ffd400 9px, #1d1d1d 9px, #1d1d1d 18px); } .construction span { display: block; padding: 3px; background: #ffd400; } /* ---------- 9. FOOTER --------------------------------------- */ .footer { padding: 7px 12px; font-size: 11px; color: #ffffff; text-shadow: 0 1px 2px rgba(0,30,50,.8); } .footer a { color: #cdefff; } .footer .clock { float: right; font-family: "Lucida Console", Monaco, monospace; } /* ---------- 10. OLD WEB ODDS AND ENDS ----------------------- */ .small-form input.txt { width: 100%; margin-bottom: 4px; padding: 4px 6px; font: 11px "Selawik", "Segoe UI", "Lucida Grande", Tahoma, sans-serif; border: 1px solid #8fb4c8; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 3px rgba(20,70,100,.22); box-shadow: inset 0 1px 3px rgba(20,70,100,.22); } .small-form button { padding: 4px 12px; font: 11px "Selawik", "Segoe UI", "Lucida Grande", Tahoma, sans-serif; color: #123c5a; cursor: pointer; border: 1px solid rgba(255,255,255,.9); -webkit-border-radius: 4px; border-radius: 4px; background-image: -webkit-linear-gradient(top, #ffffff, #cfe3ef 50%, #e8f4fb); background-image: linear-gradient(to bottom, #ffffff, #cfe3ef 50%, #e8f4fb); } .nowplaying { font-size: 11px; color: #14486b; } .eq { display: inline-block; width: 3px; margin-right: 2px; background: #3f9c3a; vertical-align: bottom; } .tiny { font-size: 10px; color: #55707f; } .is-hidden { display: none; } /* ---------- 11. THEMES -------------------------------------- The Change Theme link in the sidebar cycles these classes on . Each one only has to repaint the wallpaper, because the glass panels are translucent and pick up whatever is behind them. That is the nicest property of the Aero look. To add your own: copy a block, rename it, and add the name to the "themes" array at the top of js/main.js. ----------------------------------------------------------- */ /* Sunset over water. */ body.theme-sunset { background-color: #f0a97f; background-image: -webkit-radial-gradient(24% 26%, circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 40%), -webkit-linear-gradient(top, #2b1055 0%, #7b2d8e 34%, #e05f6b 66%, #ffb45e 100%); background-image: radial-gradient(circle at 24% 26%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 40%), linear-gradient(to bottom, #2b1055 0%, #7b2d8e 34%, #e05f6b 66%, #ffb45e 100%); } /* Vista default: that deep blue aurora. */ body.theme-vista { background-color: #0a2a4a; background-image: -webkit-radial-gradient(50% 82%, circle, rgba(90,200,255,.55) 0%, rgba(90,200,255,0) 46%), -webkit-radial-gradient(16% 20%, circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 34%), -webkit-linear-gradient(top, #04182e 0%, #0a3a63 45%, #1a72b8 78%, #5ec8f0 100%); background-image: radial-gradient(circle at 50% 82%, rgba(90,200,255,.55) 0%, rgba(90,200,255,0) 46%), radial-gradient(circle at 16% 20%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 34%), linear-gradient(to bottom, #04182e 0%, #0a3a63 45%, #1a72b8 78%, #5ec8f0 100%); } /* Bliss. The green hill and the fat clouds. */ body.theme-meadow { background-color: #7ec8e8; background-image: -webkit-radial-gradient(30% 24%, circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 24%), -webkit-radial-gradient(68% 16%, circle, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 20%), -webkit-linear-gradient(top, #3b8fd4 0%, #8fd0ef 40%, #cfe89a 62%, #5aa32e 100%); background-image: radial-gradient(circle at 30% 24%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 24%), radial-gradient(circle at 68% 16%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 20%), linear-gradient(to bottom, #3b8fd4 0%, #8fd0ef 40%, #cfe89a 62%, #5aa32e 100%); } /* Late night at the computer. */ body.theme-midnight { background-color: #10161c; background-image: -webkit-radial-gradient(72% 30%, circle, rgba(60,255,140,.22) 0%, rgba(60,255,140,0) 40%), -webkit-linear-gradient(top, #05080b 0%, #10202b 50%, #1c3a4a 100%); background-image: radial-gradient(circle at 72% 30%, rgba(60,255,140,.22) 0%, rgba(60,255,140,0) 40%), linear-gradient(to bottom, #05080b 0%, #10202b 50%, #1c3a4a 100%); } /* ---------- 12. NOTES ON OLD SAFARI ------------------------- Things deliberately NOT used anywhere in this file, because they break on Mavericks (Safari 7) or High Sierra (Safari 11): var(--name) CSS variables needs Safari 9.1 display: grid CSS grid needs Safari 10.1 gap flexbox gap needs Safari 14.1 inset: 0 position shorthand needs Safari 14.5 :is() :where() needs Safari 14 aspect-ratio needs Safari 15 clamp() needs Safari 13.1 backdrop-filter real frosted glass needs Safari 9 prefixed If you ever want real frosted blur behind the panels, add: -webkit-backdrop-filter: blur(8px); It is safely ignored by browsers that do not have it, so it degrades to the plain gradient. That is called progressive enhancement and it is the correct way to use new CSS. ----------------------------------------------------------- */ /* ---------- 13. WALLPAPER LAYERS ---------------------------- Two fixed layers sit behind everything and crossfade into each other. Layer A shows, layer B loads the next image with opacity 0, then fades up and the two swap roles. Why two layers instead of just swapping one background: a single layer flashes empty for a moment while the new JPEG decodes. On the 2010 machine that flash is very visible. ----------------------------------------------------------- */ .wallpaper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* not "inset", Safari 7 */ background-position: center center; background-repeat: no-repeat; background-size: cover; opacity: 0; -webkit-transition: opacity 1.4s ease-in-out; transition: opacity 1.4s ease-in-out; } .wallpaper.is-on { opacity: 1; } /* THE FIX FOR THE FLASH. The old version faded the incoming layer up and the outgoing layer down at the same moment. Halfway through, BOTH were at about 50 percent, so the page background showed through the gap and you saw a pale flash on every change. Now the layers are explicitly stacked. The outgoing one stays fully opaque underneath while the incoming one fades in on top of it, so there is never a moment when the total is less than 100 percent. The one underneath is only cleared afterwards, when it is already hidden and nobody can see it happen. js/wallpaper.js sets these two classes. */ .wallpaper.is-top { z-index: -3; } .wallpaper.is-bottom { z-index: -4; } /* A wash over the photo so the glass panels stay readable. Without this, a bright wallpaper makes the small text disappear completely. Raise the alpha if you use busy images. */ .wallpaper-scrim { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -2; background: rgba(228, 242, 250, .34); display: none; } body.has-wallpaper .wallpaper-scrim { display: block; } /* ---------- 14. THE WALLPAPER CONTROL PANEL ----------------- */ .wallpanel__name { display: block; margin-bottom: 5px; padding: 3px 5px; font-size: 10px; color: #14486b; background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); -webkit-border-radius: 3px; border-radius: 3px; /* long file names must not blow the 172px column open */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .wallpanel__row { margin-bottom: 4px; } .wallpanel__btn { display: inline-block; width: 32%; padding: 3px 0; text-align: center; font-size: 10px; color: #123c5a; cursor: pointer; text-shadow: 0 1px 0 rgba(255,255,255,.85); background-image: -webkit-linear-gradient(top, #ffffff, #cfe3ef 50%, #e8f4fb); background-image: linear-gradient(to bottom, #ffffff, #cfe3ef 50%, #e8f4fb); border: 1px solid rgba(255,255,255,.9); -webkit-border-radius: 3px; border-radius: 3px; } .wallpanel__btn:hover { text-decoration: none; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.5); background-image: -webkit-linear-gradient(top, #8fd6f5, #1a72b8 52%, #0d4a80); background-image: linear-gradient(to bottom, #8fd6f5, #1a72b8 52%, #0d4a80); } .wallpanel select { width: 100%; font: 10px "Selawik", "Segoe UI", "Lucida Grande", Tahoma, sans-serif; padding: 2px; border: 1px solid #8fb4c8; -webkit-border-radius: 3px; border-radius: 3px; } /* ---------- 14b. THE SETTINGS PANEL ------------------------- Five rows under the wallpaper widget, one per setting, drawn by js/main.js from the list in js/settings.js. The buttons are .wallpanel__btn with the width override taken off, because they are the same button: the three that used to be appended here by js/crt.js looked exactly like this and there was no reason for the two to diverge. ----------------------------------------------------------- */ .setpanel__btn { width: 100%; text-align: left; padding-left: 6px; padding-right: 6px; } /* The state, pushed to the right hand end of its own button. Float rather than flex: this has to sit right in Safari 7, and the row is one line with a label at each end, which float has been the answer to since long before either. */ .setpanel__state { float: right; font-weight: bold; } /* A setting whose backing file is not loaded on this page. It is still drawn, because a row that vanishes is a row somebody thinks they imagined. */ .setpanel__btn.is-off, .setpanel__btn.is-off:hover { color: #6a8394; background-image: -webkit-linear-gradient(top, #f4f8fb, #e2e9ee); background-image: linear-gradient(to bottom, #f4f8fb, #e2e9ee); text-shadow: none; cursor: default; } /* The power buttons are .wallpanel__btn, which is 32% wide because that class was written for a row of three. These are one per row. */ .powpanel__btn { width: 100%; } .setpanel__note { margin: 6px 0 0; padding: 0 2px; font-size: 10px; line-height: 1.45; color: #14486b; text-shadow: 0 1px 0 rgba(255,255,255,.7); } /* ---------- 15. REAL 88x31 BUTTON IMAGES -------------------- The CSS drawn .badge boxes are still defined up in section 4 for when you want to make your own. These rules are for the real GIFs out of the GeoCities archive. ----------------------------------------------------------- */ .btn31 { width: 88px; height: 31px; margin: 0 4px 0 0; vertical-align: middle; border: 1px solid rgba(255,255,255,.75); -webkit-box-shadow: 0 1px 3px rgba(0,40,70,.4); box-shadow: 0 1px 3px rgba(0,40,70,.4); /* old GIFs are tiny and get blurry when a browser smooths them. Keep the pixels crisp. */ image-rendering: -webkit-optimize-contrast; } /* A static grid of buttons, for pages/buttons.html later. */ .btn-grid { line-height: 0; } .btn-grid .btn31 { margin: 0 5px 5px 0; } /* ---------- 16. REAL ICON IMAGES ---------------------------- Section 6 draws the sidebar icons as CSS gradient squares. These rules are for real 16x16 PNGs instead, converted out of the Vista .ico packs by tools/icons.py. Same box as .ico so the sidebar layout does not shift. ----------------------------------------------------------- */ .ico-img { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; /* NOTE: these load the 32px file and display it at 16. The .ico files contain a hand drawn 16x16, and using it directly looked blocky on a high density screen, because the browser had to double every pixel to fill 16 CSS pixels. Feeding it 32 real pixels for a 16 pixel box is an exact 2:1 and looks correct on both old and retina displays. image-rendering: -webkit-optimize-contrast was also removed here. It disables smoothing, which is right for a pixel art GIF but wrong for a photographic style Vista icon. */ } /* ---------- 17. AD BANNERS AND OLD WEB GRAPHICS ------------- 468x60 is THE classic banner ad size. It does not fit in the 200px sidebar, so the slot lives in the middle column, which is 588px wide and gives it room to breathe. ----------------------------------------------------------- */ .adslot { padding: 6px; margin-bottom: 10px; text-align: center; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.85); -webkit-border-radius: 5px; border-radius: 5px; } .adslot img { display: block; margin: 0 auto; border: 1px solid rgba(255,255,255,.9); } .adslot__label { margin-top: 4px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #7b8894; } /* Placeholder that looks like a 468x60 slot waiting for a GIF. Delete this rule once you have real banners. */ .adslot__empty { width: 468px; height: 60px; margin: 0 auto; line-height: 60px; font-size: 11px; color: #6d8ea1; background: #dbe9f2; border: 1px dashed #9aa7b2; } /* A real GIF divider, as an alternative to the CSS .hr-fade. Usage: */ .rule { display: block; width: 100%; height: 3px; margin: 10px 0; } /* Animated NEW badge, sat next to a link. */ .newbadge { vertical-align: middle; margin-left: 4px; } /* Small graphic centred in a sidebar panel. */ .gfx { display: block; margin: 0 auto 5px; max-width: 100%; } /* ---------- 18. LOGO ----------------------------------------- The .orb rules in section 3 drew a glossy circle in CSS. That is now a real logo image, so the gradients are dropped and only the box and the glow remain. Source is D:\Xanders.page.svg, a 6.8MB file whose bulk is six 3782x3781 bitmaps composited through filters, plus 400KB of raw path data. Far too heavy to send to a 2010 MacBook on every page load, so tools/rasterize_server.py renders it to PNG once at build time. logo-64.png is 4.4KB. ----------------------------------------------------------- */ img.orb { background: none; border: 0; -webkit-box-shadow: none; box-shadow: none; width: 72px; height: 72px; margin: 0 14px 0 0; /* loads the 128px file for a 72px box, so it stays sharp on a retina screen. Raise both numbers together if you want it larger still; logo-256.png is there if you need more. */ } /* the header grew with the logo, so the wordmark grows too */ .header__logo { font-size: 34px; } /* banner ads vary slightly in size (468x60 mostly, one 476x54), so cap the width rather than forcing fixed dimensions */ .adslot img { max-width: 100%; height: auto; } /* ---------- 19. THE BUTTONS PAGE ----------------------------- Grid of 88x31s with a caption under each. Uses inline-block rather than flexbox or grid, because flex gap needs Safari 14.1 and grid needs 10.1, and this has to run on Safari 7. ----------------------------------------------------------- */ .bgrid { font-size: 0; } /* kills the whitespace between cells */ .bcell { display: inline-block; width: 104px; margin: 0 6px 10px 0; vertical-align: top; text-align: center; font-size: 11px; /* put the text size back */ } .bcell--wide { width: 140px; } .bcell--wide img { max-width: 132px; height: auto; } .bcell__label { margin-top: 3px; font-size: 9px; line-height: 1.25; color: #55707f; word-wrap: break-word; } /* banners are far too wide for the grid, so they stack */ .brow { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dotted rgba(26,114,184,.35); } .brow img { display: block; max-width: 100%; height: auto; } .brow .bcell__label { text-align: left; } /* section heading inside a content panel */ .sect { margin: 0 0 8px; font: bold 13px/1.3 "Selawik", "Segoe UI", "Lucida Grande", Tahoma, sans-serif; color: #14486b; text-shadow: 0 1px 0 rgba(255,255,255,.9); } .sect .ico-img { vertical-align: -3px; } /* the "constantly updated" callout */ .notice { padding: 9px 11px; margin-bottom: 10px; background: rgba(255,248,205,.85); border: 1px solid #e0cf7a; -webkit-border-radius: 5px; border-radius: 5px; } .notice__gif { float: left; margin: 0 9px 4px 0; } /* copy and paste snippet */ .snippet { margin: 4px 0 0; padding: 7px 9px; overflow-x: auto; /* long line scrolls instead of stretching */ font: 10px/1.4 "Lucida Console", Monaco, monospace; color: #1d3f57; background: #f2f7fb; border: 1px solid #9aa7b2; -webkit-border-radius: 3px; border-radius: 3px; } /* ---------- 20. WALLPAPER GALLERY --------------------------- Thumbnails are 240x150 JPEGs from tools/thumbs.py. The full size files are 1920x1200 at ~560KB, so a grid of 350 of those would be 195MB. These come to 2.8MB for the whole set. ----------------------------------------------------------- */ .gallery-bar { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dotted rgba(26,114,184,.35); } .gallery-bar label { margin-right: 5px; } .gallery-bar select { font: 11px "Selawik", "Segoe UI", "Lucida Grande", Tahoma, sans-serif; padding: 2px; border: 1px solid #8fb4c8; -webkit-border-radius: 3px; border-radius: 3px; } .gallery-bar .tiny { margin-left: 8px; } .galgrid { font-size: 0; } /* kills whitespace between cells */ .galcell { display: inline-block; width: 240px; margin: 0 8px 8px 0; vertical-align: top; cursor: pointer; font-size: 11px; /* put text size back */ background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 3px rgba(10,50,80,.25); box-shadow: 0 1px 3px rgba(10,50,80,.25); } .galcell img { display: block; width: 240px; height: 150px; } .galcell:hover { background: rgba(255,255,255,.95); } .galcell.is-picked { border-color: #1a72b8; -webkit-box-shadow: 0 0 0 2px #1a72b8, 0 1px 3px rgba(10,50,80,.35); box-shadow: 0 0 0 2px #1a72b8, 0 1px 3px rgba(10,50,80,.35); } .galcell__label { padding: 4px 6px; font-size: 10px; line-height: 1.3; color: #55707f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- 21. BLOG AND GUESTBOOK -------------------------- */ .post__date { font-size: 10px; letter-spacing: .06em; color: #1a72b8; } .post__title { margin: 2px 0 6px; font: bold 14px/1.3 "Selawik", "Segoe UI", "Lucida Grande", Tahoma, sans-serif; color: #14486b; } /* ---------- the guestbook form --------------------------------- The only form on Pages Web, so the fields are styled here rather than in a general input rule that would then apply to the wallpaper category select and the search boxes inside the apps. Aero: a white field with a soft inner shadow, a rounded button with a vertical gradient on it, and a focus state that glows rather than drawing the browser's own outline. Safari 7 rules apply. Every gradient carries -webkit-, there is no flexbox gap and no grid, and the label column is a fixed width with the field beside it rather than anything that has to be measured. box-sizing is already border-box from the reset at the top of this file, which is what lets the field be 100% wide inside a padded row without spilling. */ .gb { margin: 10px 0 8px; } /* THE 100px LABEL COLUMN IS THE ROW'S PADDING, NOT THE FIELD'S MARGIN. It was the field's margin, and that was wrong in both directions at once, which is what made it hard to see by eye: THE TEXTAREA OVERFLOWED THE COLUMN BY 100 PIXELS. It carried width:100%, and a percentage width resolves against the PARENT, so 100% of the row plus a 100px left margin is a box that reaches 100px past the row's right edge. Measured on the guestbook page at 1280x800: the field ended at 1187 where the 980px column ends at 1122. AND THE TWO TEXT INPUTS DID NOT FILL THEIR ROW. They had width:auto, which fills the line for an ordinary block box but NOT for an input: an input is a replaced element, so auto means its intrinsic size, and they sat at the browser default of 143px next to a 738px textarea. Putting the offset on the row's padding fixes both. The row's content box now starts after the label, so width:100% on a field means the space that is actually left, and box-sizing:border-box at the top of this file keeps the border and padding inside that. No calc(), which Safari 7 does have, but which is not needed here. The label is positioned into the padding it just vacated. */ .gb__row { position: relative; margin-bottom: 8px; padding-left: 100px; } .gb__lab { position: absolute; left: 0; top: 5px; width: 92px; font-size: 12px; font-weight: bold; color: #1c4a6b; } .gb__in { display: block; width: 100%; min-width: 0; max-width: 100%; padding: 4px 6px; font-family: inherit; font-size: 12px; color: #10222e; background: #ffffff; border: 1px solid #9cb8cc; border-radius: 3px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 40, 70, .16); box-shadow: inset 0 1px 2px rgba(0, 40, 70, .16); } /* A textarea that can be dragged wider than its container is the fastest way to break a fixed 980px layout, so it resizes vertically only. */ .gb__in--area { resize: vertical; line-height: 1.4; } .gb__in:focus { outline: 0; border-color: #4aa3d8; -webkit-box-shadow: inset 0 1px 2px rgba(0, 40, 70, .16), 0 0 5px rgba(74, 163, 216, .75); box-shadow: inset 0 1px 2px rgba(0, 40, 70, .16), 0 0 5px rgba(74, 163, 216, .75); } .gb__row--go { padding-left: 100px; } .gb__go { padding: 5px 14px; font-family: inherit; font-size: 12px; font-weight: bold; color: #10344c; cursor: url("../img/cursors/link.png") 0 0, pointer; border: 1px solid #7ba6c4; border-radius: 4px; background: #d8ecf8; background: -webkit-linear-gradient(top, #ffffff 0%, #d8ecf8 48%, #bcdcf2 52%, #d6ecfa 100%); background: linear-gradient(to bottom, #ffffff 0%, #d8ecf8 48%, #bcdcf2 52%, #d6ecfa 100%); -webkit-box-shadow: 0 1px 2px rgba(0, 40, 70, .25), inset 0 1px 0 rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(0, 40, 70, .25), inset 0 1px 0 rgba(255, 255, 255, .9); } .gb__go:hover { background: -webkit-linear-gradient(top, #ffffff 0%, #e6f4fd 48%, #cbe7f8 52%, #e2f2fd 100%); background: linear-gradient(to bottom, #ffffff 0%, #e6f4fd 48%, #cbe7f8 52%, #e2f2fd 100%); } .gb__go:active { -webkit-box-shadow: inset 0 2px 4px rgba(0, 40, 70, .35); box-shadow: inset 0 2px 4px rgba(0, 40, 70, .35); } .gb__say { margin-left: 10px; font-size: 11px; color: #2b6a44; } .gb__say--bad { color: #9c2020; } /* An entry that is only in this browser. Dashed, so it reads as provisional at a glance without needing the label to be read. */ .entry--draft { padding: 6px 8px; margin-bottom: 8px; border: 1px dashed #9cb8cc; border-radius: 4px; background: rgba(255, 255, 255, .45); } .entry { padding: 8px 0; border-bottom: 1px dotted rgba(26,114,184,.35); } .entry:last-child { border-bottom: 0; } .entry__head { margin-bottom: 3px; } .entry__head .tiny { margin-left: 6px; } .gbook label { display: block; margin: 6px 0 2px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #55707f; } .gbook .txt { width: 100%; padding: 4px 6px; font: 11px "Selawik", "Segoe UI", "Lucida Grande", Tahoma, sans-serif; border: 1px solid #8fb4c8; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 3px rgba(20,70,100,.22); box-shadow: inset 0 1px 3px rgba(20,70,100,.22); } .gbook textarea.txt { resize: vertical; } .gbook button { margin-top: 8px; padding: 5px 16px; font: 11px "Selawik", "Segoe UI", "Lucida Grande", Tahoma, sans-serif; color: #123c5a; cursor: pointer; border: 1px solid rgba(255,255,255,.9); -webkit-border-radius: 4px; border-radius: 4px; background-image: -webkit-linear-gradient(top, #ffffff, #cfe3ef 50%, #e8f4fb); background-image: linear-gradient(to bottom, #ffffff, #cfe3ef 50%, #e8f4fb); } .gbook button:hover { color: #ffffff; background-image: -webkit-linear-gradient(top, #8fd6f5, #1a72b8 52%, #0d4a80); background-image: linear-gradient(to bottom, #8fd6f5, #1a72b8 52%, #0d4a80); } /* ---------- 23. WEBRING WIDGET ------------------------------ */ .ring { padding: 10px; text-align: center; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.9); -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 1px 3px rgba(20,70,100,.15); box-shadow: inset 0 1px 3px rgba(20,70,100,.15); } .ring__title { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #55707f; margin-bottom: 6px; } .ring__nav { margin-bottom: 5px; } .ring__btn { display: inline-block; margin: 0 3px; padding: 4px 12px; font-size: 11px; color: #123c5a; text-shadow: 0 1px 0 rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.9); -webkit-border-radius: 4px; border-radius: 4px; background-image: -webkit-linear-gradient(top, #ffffff, #cfe3ef 50%, #e8f4fb); background-image: linear-gradient(to bottom, #ffffff, #cfe3ef 50%, #e8f4fb); } .ring__btn:hover { text-decoration: none; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.5); background-image: -webkit-linear-gradient(top, #8fd6f5, #1a72b8 52%, #0d4a80); background-image: linear-gradient(to bottom, #8fd6f5, #1a72b8 52%, #0d4a80); } .ring__meta { font-size: 10px; color: #55707f; } /* ---------- 24. REDUCED MOTION ------------------------------ Some people get motion sick from moving interfaces, and both Windows and macOS have a system setting for it. This honours it. The site keeps every graphic, they just stop moving. KEYED OFF html.motion-off, NOT the media query directly. js/motion.js sets that class, and it reads the system setting as its DEFAULT rather than as the final word, so somebody can say "I turned reduced motion on for my whole computer and I still want the buttons to scroll on this one site". The media query has no way to express that, and it is a sentence the owner of this site has now said three times. Somebody who never touches the switch still gets exactly the behaviour the media query would have given them. Animated GIFs cannot be paused from CSS, so the marquee stops scrolling but its buttons still animate internally. That is a real limit of GIFs, not something worth faking. ----------------------------------------------------------- */ /* the scrolling 88x31 strip stops where it is */ html.motion-off .marquee__track { -webkit-animation: none !important; animation: none !important; } /* the bobbing sticker sits still */ html.motion-off .sticker { -webkit-animation: none !important; animation: none !important; } /* the blinking ad border stops flashing, which is the one on this site most likely to actually bother somebody */ html.motion-off .ad--blink { -webkit-animation: none !important; animation: none !important; border-color: #ffffff !important; } /* wallpaper crossfades become instant cuts rather than fades */ html.motion-off .wallpaper { -webkit-transition: none !important; transition: none !important; } /* ---------- 25. SITE MAP, CURRENTLY BOX --------------------- */ .sitemap { margin: 0; padding: 0; list-style: none; } .sitemap li { padding: 4px 0; border-bottom: 1px dotted rgba(26,114,184,.25); } .sitemap li:last-child { border-bottom: 0; } .sitemap .tiny { margin-left: 4px; } /* the "currently" panel on the home page sidebar */ .currently { margin: 0; padding: 0; list-style: none; font-size: 11px; } .currently li { padding: 3px 0; border-bottom: 1px dotted rgba(26,114,184,.22); } .currently li:last-child { border-bottom: 0; } .currently__k { display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #7b8894; }