/* ============================== //GRID =============================== One feed, two formats. Everything down to the breakpoint is the wall: a masonry of cards in real aspect ratios, metadata under each one, more of it on hover. From the breakpoint down it is the phone: the same articles become full- height panels that snap one at a time, the picture fills the screen, and the metadata lifts off the card and sits over the image. The markup does not change between the two. That is the point -- the moment a format gets its own template the two stop being the same feed. ===================================================================== */ /* --------------------------------------------------------------------- THE PALETTE Light is the base and dark is the override, matching the rest of the site: the theme is a `dark` class on , so a rule written the other way round would have nothing to hang the default on. The composer and the opened post are siblings of the wall rather than children of it, so all three are named here -- a var() that resolves nowhere is not an error, it is simply transparent, which is how a lime button turns invisible. The accents do not change between themes. Lime, violet, blue and orange are the brand, and a badge that means "trailer" has to mean it in both. --------------------------------------------------------------------- */ .gd, .gc, .gv{ --gd-ink: #151515; /* what you read */ --gd-dim: #5a5a5a; /* what you read second */ --gd-faint: #6e6e6e; /* timestamps and counts */ --gd-bg: #f1f1ef; /* the ground behind the cards */ --gd-card: #ffffff; /* a card, a panel */ --gd-surface: #f7f7f5; /* a raised strip: composer, side column */ --gd-well: #e4e4e1; /* behind a picture or a video */ --gd-line: rgba(21,21,21,0.13); --gd-line-strong: rgba(21,21,21,0.38); --gd-panel: rgba(21,21,21,0.045); --gd-danger: #b23c00; --gd-lime: #cae76f; --gd-violet: #b98bff; --gd-blue: #6aa6ff; --gd-orange: #f2913d; --gd-like: #c9284a; /* The accents are fills. As text on a pale surface lime is unreadable and orange is close to it, so text gets its own darker pair -- the same hue, taken down until it can be read. In the dark theme the fill colours are already the readable ones. */ --gd-lime-ink: #4c7a00; --gd-orange-ink: #a4520b; --gd-halo: rgba(255,255,255,0.9); /* behind text that sits on media */ --gd-gap: 16px; } .dark .gd, .dark .gc, .dark .gv{ --gd-ink: #f2f2f2; --gd-dim: #9a9a9a; --gd-faint: #878787; --gd-bg: #0d0d0d; --gd-card: #171717; --gd-surface: #111111; --gd-well: #000000; --gd-line: rgba(255,255,255,0.10); --gd-line-strong: rgba(255,255,255,0.40); --gd-panel: rgba(255,255,255,0.045); --gd-danger: #ff8a6a; --gd-like: #ff5a7a; --gd-lime-ink: #cae76f; --gd-orange-ink: #f2913d; --gd-halo: rgba(0,0,0,0.8); } /* the site is content-box by default; every width below assumes otherwise */ .gd, .gd *, .gd *::before, .gd *::after{ box-sizing: border-box; } /* A class selector beats the browser's own [hidden] rule, so anything below that sets display on a class has to say this too or the element shows up regardless of the attribute. */ .gd [hidden]{ display: none !important; } .gd{ background: var(--gd-bg); color: var(--gd-ink); border-radius: 18px; padding: 0 0 60px; overflow: hidden; } .gd a{ color: var(--gd-ink); text-decoration: none; } /* -------------------------------- masthead ---------------------------- */ .gd_top{ display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--gd-line); } .gd_brand{ display: flex; align-items: baseline; gap: 12px; min-width: 0; } .gd_logo{ font-size: 26px; font-weight: 700; letter-spacing: -0.02em; } .gd_tag{ font-size: 13px; color: var(--gd-dim); white-space: nowrap; } .gd_scope{ display: none; } /* phone only */ .gd_top_actions{ display: flex; gap: 10px; margin-left: auto; } .gd_btn{ display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 21px; cursor: pointer; border: 1px solid var(--gd-line); background: transparent; color: var(--gd-ink); font-family: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; } .gd_btn:hover{ border-color: var(--gd-line-strong); } .gd_btn .material-symbols-outlined{ font-size: 19px; } .gd_btn_quiet{ font-weight: 400; } .gd_publish{ background: var(--gd-lime); border-color: var(--gd-lime); color: #151515; } .gd_publish:hover{ background: #d6ef8a; border-color: #d6ef8a; color: #151515; } .gd_btn_review{ border-color: var(--gd-orange); color: var(--gd-orange-ink); } /* -------------------------------- search ------------------------------- */ .gd_search{ display: flex; gap: 8px; padding: 14px 24px 0; } .gd_search input{ flex: 1 1 auto; padding: 12px 18px; border-radius: 22px; border: 1px solid var(--gd-line); background: var(--gd-card); color: var(--gd-ink); font-family: inherit; font-size: 14px; } .gd_search input:focus{ outline: none; border-color: var(--gd-lime); } .gd_search_clear{ border: 0; background: transparent; color: var(--gd-dim); cursor: pointer; padding: 0 6px; } /* ------------------------------- filters -------------------------------- */ .gd_filters{ display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 24px; } .gd_filter_row{ display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; } .gd_filter_row::-webkit-scrollbar{ display: none; } .gd_chip{ padding: 10px 20px; border-radius: 21px; cursor: pointer; white-space: nowrap; border: 1px solid var(--gd-line); background: transparent; color: var(--gd-ink); font-family: inherit; font-size: 13.5px; font-weight: 700; } .gd_chip:hover{ border-color: var(--gd-line-strong); } .gd_chip.is_on{ background: var(--gd-lime); border-color: var(--gd-lime); color: #151515; } .gd_sort{ font-size: 13px; color: var(--gd-dim); white-space: nowrap; } /* ----------------------------- review banner ---------------------------- */ .gd_promo{ display: flex; align-items: center; gap: 14px; margin: 0 24px; padding: 14px 18px; border-radius: 12px; background: rgba(242,145,61,0.10); border: 1px solid rgba(242,145,61,0.35); } .gd_promo_mark{ flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--gd-orange); color: #151515; font-size: 12px; font-weight: 700; } .gd_promo p{ font-size: 13.5px; line-height: 1.45; padding: 0; margin: 0; } .gd_promo_close{ margin-left: auto; border: 0; padding: 6px; } /* -------------------------------- composer ------------------------------ */ .gd_composer{ display: flex; align-items: center; gap: 14px; margin: 16px 24px 0; padding: 14px 18px; border-radius: 14px; background: var(--gd-card); border: 1px solid var(--gd-line); } .gd_composer input{ flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--gd-ink); font-family: inherit; font-size: 14.5px; cursor: pointer; } .gd_composer input:focus{ outline: none; } .gd_composer_actions{ display: flex; gap: 8px; flex-wrap: wrap; } .gd_avatar{ flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--gd-panel) center / cover no-repeat; } /* ================================ THE WALL ============================== Masonry in CSS columns rather than in script. A column layout cannot order left-to-right, but it also cannot get out of step with the images the way an absolutely-positioned one does when a picture loads late or the window is resized mid-scroll -- and on a feed that never ends, that second property is worth more than the reading order. ======================================================================== */ .gd_feed{ padding: 18px 24px 0; column-count: 4; column-gap: var(--gd-gap); } @media screen and (max-width: 1500px){ .gd_feed{ column-count: 3; } } @media screen and (max-width: 1100px){ .gd_feed{ column-count: 2; } } .gd_post{ break-inside: avoid; -webkit-column-break-inside: avoid; display: block; margin: 0 0 var(--gd-gap); border-radius: 14px; overflow: hidden; background: var(--gd-card); border: 1px solid var(--gd-line); } .gd_media{ position: relative; display: block; width: 100%; /* the real shape of the picture, printed by the template from the stored dimensions, so the hole is the right size before the image arrives; 4/3 only for the few files whose size was never recorded */ aspect-ratio: var(--gd-ratio, 4 / 3); background: var(--gd-well); } .gd_img{ display: block; width: 100%; height: 100%; object-fit: cover; } .gd_noimg{ display: flex; align-items: center; padding: 22px; width: 100%; height: 100%; overflow: hidden; } .gd_noimg p{ font-size: 15px; line-height: 1.5; color: var(--gd-ink); padding: 0; } .gd_open{ position: absolute; inset: 0; } /* badges */ .gd_badges{ position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; padding: 0; margin: 0; max-width: calc(100% - 20px); } .gd_badge{ display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; line-height: 1.5; background: #e8e8e8; color: #151515; white-space: nowrap; } .gd_tone_lime{ background: var(--gd-lime); } .gd_tone_violet{ background: var(--gd-violet); } .gd_tone_blue{ background: var(--gd-blue); } .gd_tone_grey{ background: #d8d8d8; } .gd_tone_plain{ background: #e8e8e8; } .gd_tone_review{ background: var(--gd-orange); } /* play button on a video card */ .gd_play{ position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; cursor: pointer; border: 0; background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; } .gd_play:hover{ background: rgba(0,0,0,0.75); } .gd_play .material-symbols-outlined{ font-size: 32px; } .gd_frame{ position: absolute; inset: 0; z-index: 4; display: none; } .gd_frame iframe{ width: 100%; height: 100%; border: 0; display: block; } .gd_post.is_playing .gd_frame{ display: block; } .gd_post.is_playing .gd_play, .gd_post.is_playing .gd_open{ display: none; } /* the block under the picture */ .gd_meta{ padding: 13px 15px 14px; } .gd_title{ font-size: 15px; font-weight: 700; line-height: 1.3; padding: 0 0 8px; /* two lines, then stop: a card is not the place to read a paragraph */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gd_by{ display: flex; align-items: center; gap: 9px; min-width: 0; } .gd_by .gd_avatar{ width: 26px; height: 26px; } .gd_by_text{ display: flex; flex-direction: column; min-width: 0; } .gd_name{ font-size: 13px; font-weight: 700; line-height: 1.25; } .gd_handle{ font-size: 11.5px; color: var(--gd-dim); line-height: 1.25; } .gd_role{ margin-left: auto; font-size: 11.5px; color: var(--gd-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; } /* the caption is the metadata the mockup keeps off the card until you want it: on the wall it opens on hover instead of pushing every card taller */ .gd_text{ font-size: 13px; line-height: 1.45; color: var(--gd-dim); max-height: 0; overflow: hidden; transition: max-height 0.22s ease, padding 0.22s ease; padding: 0; } .gd_post:hover .gd_text, .gd_post:focus-within .gd_text{ max-height: 96px; padding: 9px 0 0; } .gd_text a{ color: var(--gd-lime-ink); } .gd_actions{ display: flex; align-items: center; gap: 14px; padding: 10px 0 0; } .gd_act{ display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--gd-dim); font-family: inherit; font-size: 12.5px; } .gd_act:hover{ color: var(--gd-ink); } .gd_act .material-symbols-outlined{ font-size: 18px; } .gd_like.is_on{ color: var(--gd-like); } .gd_like.is_on .material-symbols-outlined{ font-variation-settings: 'FILL' 1; } .gd_review{ color: var(--gd-orange-ink); } .gd_review .gd_word{ font-weight: 700; } /* the wall does not use these */ .gd_rail, .gd_next{ display: none; } .gd_sentinel{ height: 4px; } .gd_status{ text-align: center; font-size: 13px; color: var(--gd-dim); padding: 26px 24px 0; } .gd_empty{ padding: 60px 24px; text-align: center; color: var(--gd-dim); } /* ================================ THE PHONE ============================= The same articles, one screenful each, snapped. The picture fills the panel, the badges stay where they were, and the block that sat under the card lifts up over the bottom of the image. ======================================================================== */ @media screen and (max-width: 820px){ /* The feed is the screen. The site's masthead, footer and left rail are not part of it, and the wrappers that inset the dashboard are not either -- so the feed is lifted out of all of them and pinned to the viewport. */ .gd_immersive #headwrapper, .gd_immersive #footer{ display: none !important; } .gd_immersive{ overflow: hidden; } .gd_page .dashboard_wrapper{ padding: 0; margin: 0; } .gd{ position: fixed; inset: 0; z-index: 5; border-radius: 0; padding: 0; display: flex; flex-direction: column; } /* the bar floats over the first panel rather than pushing it down, which is what makes the panel a whole screenful and not most of one */ .gd_top, .gd_filters, .gd_promo, .gd_search{ position: relative; z-index: 15; flex: 0 0 auto; } .gd_top{ padding: 14px 16px; gap: 12px; border-bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0)); } .gd_tag, .gd_sort, .gd_composer{ display: none; } .gd_top_actions .gd_publish span:not(.material-symbols-outlined), .gd_top_actions .gd_search_btn span:not(.material-symbols-outlined){ display: none; } .gd_top_actions .gd_btn{ padding: 9px 11px; } .gd_scope{ display: flex; gap: 4px; margin-left: auto; } .gd_scope_btn{ padding: 8px 16px; border-radius: 18px; border: 0; cursor: pointer; background: transparent; color: var(--gd-dim); font-family: inherit; font-size: 13.5px; font-weight: 700; } .gd_scope_btn.is_on{ background: var(--gd-lime); color: #151515; } .gd_filters{ padding: 4px 16px 12px; } .gd_filters{ background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0)); } .gd_chip{ padding: 8px 16px; font-size: 13px; } /* the critique banner is three lines of desktop copy and it would sit across a third of the first post; the same invitation is in the composer, which is one tap away on the rail */ .gd_promo{ display: none; } /* --------------------------- the panels ---------------------------- */ .gd_feed{ /* not "column-count: 1" -- a multicol box with a definite height fragments its content into further columns to the RIGHT once the first one is full, so all 55 panels ended up side by side and the box never scrolled. The phone format is not a multicol at all. */ columns: initial; column-gap: initial; padding: 0; /* the panels sit behind the floating bar, so the scroller is the whole box and the first panel is a full screenful */ position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } .gd_post{ position: relative; /* dvh, not vh: the address bar on a phone slides away and a vh panel is then a screenful plus a strip of the next one */ height: 100dvh; margin: 0; border: 0; border-radius: 0; scroll-snap-align: start; scroll-snap-stop: always; /* the well, so a light theme gets a light surround; the author block over the bottom keeps its own dark scrim either way, because it sits on the picture rather than on the panel */ background: var(--gd-well); } .gd_media{ position: absolute; inset: 0; aspect-ratio: auto; /* the panel decides the shape now */ height: 100%; } /* contain, not cover: this is somebody's artwork and cropping the sides off a landscape piece to fill a portrait screen is worse than letting it sit in the middle */ .gd_img{ object-fit: contain; } .gd_post[data-type="reel"] .gd_img{ object-fit: cover; } .gd_badges{ top: 118px; left: 16px; } /* clear of the floating bar and the chips */ .gd_play{ width: 72px; height: 72px; } .gd_play .material-symbols-outlined{ font-size: 42px; } /* the metadata over the picture, clear of the rail on the right */ .gd_meta{ position: absolute; z-index: 5; left: 0; right: 88px; bottom: 0; /* clear of the strip that names the next post */ padding: 20px 16px 64px; background: linear-gradient(to top, rgba(0,0,0,0.88) 30%, rgba(0,0,0,0)); pointer-events: none; } .gd_meta a, .gd_meta button{ pointer-events: auto; } .gd_title{ font-size: 18px; -webkit-line-clamp: 2; padding: 8px 0 6px; } .gd_by{ gap: 11px; } .gd_by .gd_avatar{ width: 38px; height: 38px; } .gd_name{ font-size: 15px; } .gd_handle{ font-size: 12.5px; } .gd_role{ display: none; } /* on a phone there is room to just show the caption */ .gd_text{ max-height: none; padding: 0; overflow: hidden; font-size: 13.5px; color: #d8d8d8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* the per-card action row is replaced by the rail */ .gd_actions{ display: none; } /* ---------------------------- the rail ----------------------------- */ .gd_rail{ display: flex; flex-direction: column; align-items: center; gap: 18px; position: fixed; z-index: 20; right: 12px; bottom: 116px; pointer-events: auto; } .gd_rail_btn{ display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer; padding: 0; color: #fff; font-family: inherit; font-size: 12px; font-weight: 700; } .gd_rail_icon{ width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.13); backdrop-filter: blur(6px); } .gd_rail_icon .material-symbols-outlined{ font-size: 24px; } .gd_rail_publish .gd_rail_icon{ background: var(--gd-lime); color: #151515; } .gd_rail_btn.is_on .gd_rail_icon{ color: #ff5a7a; } .gd_rail_btn.is_on .material-symbols-outlined{ font-variation-settings: 'FILL' 1; } /* ------------------------- what comes next -------------------------- */ .gd_next{ display: flex; align-items: center; gap: 10px; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(0,0,0,0.82); backdrop-filter: blur(8px); border-top: 1px solid var(--gd-line); } .gd_next_dot{ flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; background: var(--gd-dim); } .gd_next_text{ font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the sentinel has to sit inside the scroller on a phone, because the scroller is the feed itself and not the window */ .gd_sentinel{ height: 1px; } .gd_status{ display: none; } /* the site's own furniture gets out of the way of a full-screen feed */ .gd_page .left_dashboard_wrapper{ display: none; } } /* Somebody navigating with a keyboard has to be able to see where they are; the wall hides its focus ring behind the picture otherwise. */ .gd_open:focus-visible, .gd_act:focus-visible, .gd_chip:focus-visible, .gd_btn:focus-visible, .gd_rail_btn:focus-visible{ outline: 2px solid var(--gd-lime); outline-offset: 2px; } @media (prefers-reduced-motion: reduce){ .gd_text{ transition: none; } .gd_feed{ scroll-behavior: auto; } } /* ========================= //GRID — THE COMPOSER ===================== Slides up from the bottom over the feed. One panel, the same on both formats apart from how much of the screen it takes and whether the media column sits beside the writing or under it. ===================================================================== */ #gc_mask.gc_mask{ position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.62); backdrop-filter: blur(3px); } #gc_mask.gc_mask[hidden]{ display: none; } #gc.gc{ position: fixed; z-index: 51; left: 50%; bottom: 0; width: min(1180px, calc(100vw - 48px)); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; border-radius: 18px 18px 0 0; background: var(--gd-card); color: var(--gd-ink); border: 1px solid var(--gd-line); border-bottom: 0; box-shadow: 0 -20px 60px rgba(0,0,0,0.35); /* the slide: transform rather than `bottom`, so it is one composited move instead of a layout on every frame */ transform: translate(-50%, 100%); transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.28, 1); } #gc.gc[hidden]{ display: none; } #gc.gc.is_open{ transform: translate(-50%, 0); } .gc, .gc *, .gc *::before, .gc *::after{ box-sizing: border-box; } .gc [hidden]{ display: none !important; } /* -------------------------------- who --------------------------------- */ .gc_head{ display: flex; align-items: center; gap: 13px; padding: 18px 22px; border-bottom: 1px solid var(--gd-line); flex: 0 0 auto; } .gc_who{ display: flex; flex-direction: column; min-width: 0; } .gc_who strong{ font-size: 15.5px; line-height: 1.25; } .gc_who span{ font-size: 12.5px; color: var(--gd-dim); line-height: 1.3; } .gc_close{ margin-left: auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--gd-line); background: transparent; color: var(--gd-ink); } .gc_close:hover{ border-color: var(--gd-line-strong); } /* -------------------------------- kind -------------------------------- */ .gc_kinds_wrap{ padding: 18px 22px 16px; flex: 0 0 auto; } .gc_label{ font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; color: var(--gd-dim); padding: 0 0 11px; } .gc_kinds{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; } .gc_kind{ display: flex; align-items: flex-start; gap: 11px; text-align: left; padding: 14px 16px; border-radius: 11px; cursor: pointer; border: 1px solid var(--gd-line); background: var(--gd-surface); color: var(--gd-ink); font-family: inherit; } .gc_kind:hover{ border-color: var(--gd-line-strong); } /* the chosen kind is tinted with its own colour rather than a flat grey, so the choice reads the same way the badge on the finished card will */ .gc_kind.is_on{ border-color: var(--gd-orange); background: rgba(242,145,61,0.10); } .gc_kind.is_on[data-tone="lime"]{ border-color: var(--gd-lime); background: rgba(202,231,111,0.18); } .gc_kind.is_on[data-tone="blue"]{ border-color: var(--gd-blue); background: rgba(106,166,255,0.13); } .gc_kind.is_on[data-tone="violet"]{ border-color: var(--gd-violet); background: rgba(185,139,255,0.13); } .gc_dot{ flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; } .gc_kind_text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gc_kind_text strong{ font-size: 14.5px; line-height: 1.25; } .gc_kind_text > span{ font-size: 12px; color: var(--gd-dim); line-height: 1.3; } /* ------------------------------- the post ------------------------------ */ .gc_body{ display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 0; flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--gd-line); } .gc_write{ display: flex; flex-direction: column; padding: 20px 22px; min-width: 0; overflow-y: auto; } .gc_text{ flex: 1 1 auto; min-height: 150px; resize: none; border: 0; background: transparent; color: var(--gd-ink); font-family: inherit; font-size: 16px; line-height: 1.55; } .gc_text:focus{ outline: none; } .gc_text::placeholder{ color: var(--gd-faint); } .gc_chips{ display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 0 0; flex: 0 0 auto; } .gc_chip{ padding: 8px 15px; border-radius: 17px; cursor: pointer; white-space: nowrap; border: 1px solid var(--gd-line); background: transparent; color: var(--gd-ink); font-family: inherit; font-size: 12.5px; font-weight: 700; } .gc_chip:hover{ border-color: var(--gd-line-strong); } .gc_chip_review{ border-color: var(--gd-orange); color: var(--gd-orange-ink); } .gc_chip_review.is_on{ background: var(--gd-orange); color: #151515; } .gc_error{ font-size: 13px; color: var(--gd-danger); padding: 12px 0 0; } /* -------------------------------- media -------------------------------- */ .gc_media{ padding: 20px 22px; border-left: 1px solid var(--gd-line); display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .gc_drop{ position: relative; flex: 1 1 auto; min-height: 220px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--gd-line-strong); border-radius: 12px; background: var(--gd-well); cursor: pointer; overflow: hidden; text-align: center; padding: 20px; } .gc_drop:hover, .gc_drop.is_over{ border-color: var(--gd-lime); } .gc_drop_idle .material-symbols-outlined{ font-size: 40px; color: var(--gd-dim); } .gc_drop_idle p{ font-size: 14.5px; padding: 10px 0 0; line-height: 1.4; } .gc_browse{ font-size: 13.5px; color: var(--gd-dim); } .gc_browse span{ color: var(--gd-ink); text-decoration: underline; } .gc_thumb{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gc_drop_clear{ position: absolute; z-index: 2; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 0; background: rgba(0,0,0,0.7); color: #fff; } .gc_drop_busy{ width: 100%; } .gc_bar{ height: 6px; border-radius: 3px; background: var(--gd-panel); overflow: hidden; } .gc_bar span{ display: block; height: 100%; width: 0; background: var(--gd-lime); transition: width .2s; } .gc_drop_busy p{ font-size: 13px; color: var(--gd-dim); padding: 9px 0 0; } .gc_hint{ font-size: 12px; color: var(--gd-dim); line-height: 1.45; flex: 0 0 auto; } .gc_url input{ width: 100%; padding: 11px 15px; border-radius: 10px; border: 1px solid var(--gd-line); background: var(--gd-well); color: var(--gd-ink); font-family: inherit; font-size: 13.5px; } .gc_url input:focus{ outline: none; border-color: var(--gd-lime); } /* ------------------------------- the foot ------------------------------ */ .gc_foot{ display: flex; align-items: center; gap: 18px; padding: 15px 22px; border-top: 1px solid var(--gd-line); flex: 0 0 auto; flex-wrap: wrap; } .gc_preview{ display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--gd-ink); font-family: inherit; font-size: 13.5px; font-weight: 700; } .gc_preview .material-symbols-outlined{ font-size: 19px; } .gc_note{ font-size: 12.5px; color: var(--gd-dim); line-height: 1.4; min-width: 0; flex: 1 1 220px; } .gc_foot_actions{ display: flex; gap: 10px; margin-left: auto; } /* -------------------------------- phone -------------------------------- */ @media screen and (max-width: 820px){ #gc.gc{ width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; } .gc_kinds{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .gc_body{ grid-template-columns: minmax(0, 1fr); } .gc_media{ border-left: 0; border-top: 1px solid rgba(255,255,255,0.10); padding: 16px 18px; } .gc_drop{ min-height: 150px; } .gc_write{ padding: 16px 18px; } .gc_text{ min-height: 110px; font-size: 16px; } /* 16px or iOS zooms in */ .gc_foot{ padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); } .gc_note{ display: none; } } @media (prefers-reduced-motion: reduce){ .gc{ transition: none; } } /* ======================= //GRID — ONE POST OPENED ==================== Slides in from the right over the wall. Media on the left, feedback on the right, and the arrows that step to the next post without going back to the feed first. ===================================================================== */ /* The site's own furniture stays visible and usable while a post is open, so the panel is inset by it rather than laid over it. Stated once here because three rules need the same numbers, and because they are the kind of thing that changes. */ :root{ --gd-chrome-top: 60px; /* the masthead */ --gd-chrome-bottom: 30px; /* the footer bar */ --gd-chrome-left: 0px; /* the left rail, when there is one */ } body.logged_in{ --gd-chrome-left: 50px; } #gv_host.gv_host{ position: fixed; z-index: 12; top: var(--gd-chrome-top); bottom: var(--gd-chrome-bottom); left: var(--gd-chrome-left); right: 0; background: var(--gd-bg); border-top-left-radius: 14px; overflow: hidden; /* transform rather than `left`, so the slide is one composited move. 100% of the panel, not of the screen -- it starts just off its own right edge and arrives flush against the rail. */ transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.28, 1); /* under the masthead (10), the notification buttons (14) and the footer (20), so every one of them stays clickable */ } #gv_host.gv_host[hidden]{ display: none; } /* The left rail is fixed at z-index 10 and the panel sits at 12, so the flyout it opens on hover -- 280px against the rail's 50 -- disappeared under the panel the moment it left the strip. While a post is open the rail is lifted over it. The two do not overlap until it expands, so nothing is covered that was not meant to be. */ /* matched to `body.compact_menu #dashboard #left_menu`, which is what sets the 10 -- a lighter selector loses however late it is in the file */ body.gd_viewing #dashboard #left_menu{ z-index: 14; } #gv_host.gv_host.is_open{ transform: translateX(0); } #gv_host.gv_host.is_loading::after{ content: ''; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid var(--gd-line); border-top-color: var(--gd-lime); border-radius: 50%; animation: gv_spin 0.8s linear infinite; } @keyframes gv_spin{ to{ transform: rotate(360deg); } } .gv{ display: grid; grid-template-columns: minmax(0, 1fr) 420px; /* The row has to be pinned to the height of the view. Left as the default `auto` it sizes to its tallest item, so a post with a dozen comments made the whole grid as tall as that list -- the stage grew with it and the picture, centred in a box far taller than the screen, ended up below the fold. minmax(0, …) rather than 1fr alone so the row is also allowed to be SMALLER than its content, which is what lets the feedback column scroll instead of pushing. */ grid-template-rows: minmax(0, 1fr); height: 100%; color: var(--gd-ink); background: var(--gd-bg); } .gv, .gv *, .gv *::before, .gv *::after{ box-sizing: border-box; } .gv [hidden]{ display: none !important; } .gv a{ color: var(--gd-ink); } /* -------------------------------- media -------------------------------- */ .gv_stage{ position: relative; display: flex; flex-direction: column; /* a grid item will not go below its content size without these */ min-width: 0; min-height: 0; background: var(--gd-well); } .gv_bar{ display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 14px 18px; border-bottom: 1px solid var(--gd-line); } .gv_back{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px; border-radius: 20px; cursor: pointer; border: 1px solid var(--gd-line); background: var(--gd-card); color: var(--gd-ink); font-family: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; } .gv_back:hover{ border-color: var(--gd-line-strong); } .gv_back .material-symbols-outlined{ font-size: 19px; } .gv_position{ margin-left: auto; font-size: 13px; color: var(--gd-dim); white-space: nowrap; } .gv_media{ position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; /* the well stays a shade deeper than the page in both themes: a picture needs a quiet surround, not the same tone as the chrome */ background: var(--gd-well); overflow: hidden; } /* ------------------------------ the picture ----------------------------- Contained and centred: the whole of it, never cropped, however the frame is shaped. max-width/max-height rather than width/height plus object-fit, because that way the element box IS the visible picture -- which is what makes the pan limits below correct, and what stopped the media area from growing past the panel and clipping the image. ------------------------------------------------------------------------ */ .gv_zoom{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; /* the gestures are ours: without this the browser takes the pinch for a page zoom and the drag for a scroll */ touch-action: none; cursor: zoom-in; } .gv_zoom.is_zoomed{ cursor: grab; } .gv_zoom.is_panning{ cursor: grabbing; } .gv_img{ display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; transform-origin: center center; will-change: transform; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } /* the snap back to fit is animated; dragging and pinching are not, or the picture lags a frame behind the finger */ .gv_img.is_eased{ transition: transform 0.22s cubic-bezier(0.22, 0.8, 0.28, 1); } /* A video's poster frame. Contained and centred like a still, but nothing more: it is not the work, it is the lid on the player. */ .gv_poster{ will-change: auto; cursor: default; } .gv_zoom_tools{ /* bottom LEFT: the three big navigation buttons own the bottom right, and centring these put them straight on top of it */ position: absolute; z-index: 4; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 20px; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.18s ease; } /* out of the way until the picture is worth looking into */ .gv_media:hover .gv_zoom_tools, .gv_zoom_tools:focus-within, .gv_media.is_zoomed .gv_zoom_tools{ opacity: 1; } .gv_zoom_tools button{ min-width: 32px; height: 32px; padding: 0 9px; border: 0; border-radius: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: #fff; font-family: inherit; font-size: 12px; font-weight: 700; } .gv_zoom_tools button:hover{ background: rgba(255,255,255,0.18); } .gv_zoom_tools .material-symbols-outlined{ font-size: 19px; } .gv_zoom_level{ min-width: 54px !important; font-variant-numeric: tabular-nums; } /* a zoomed picture is the thing you are working with; the furniture steps back so it is not in the way of the corner you are inspecting */ .gv_media.is_zoomed ~ .gv_nav, .gv_stage:has(.gv_media.is_zoomed) .gv_nav{ opacity: 0.25; } .gv_stage:has(.gv_media.is_zoomed) .gv_nav:hover{ opacity: 1; } .gv_textonly{ max-width: 620px; padding: 40px; font-size: 17px; line-height: 1.6; color: var(--gd-ink); } .gv_textonly a{ color: var(--gd-lime-ink); } .gv_frame{ position: absolute; inset: 0; z-index: 3; display: none; } .gv_frame iframe, .gv_frame #gv_player{ width: 100%; height: 100%; border: 0; display: block; } .gv.is_playing .gv_frame{ display: block; } .gv.is_playing .gv_play, .gv.is_playing .gv_img{ display: none; } .gv_play{ width: 76px; height: 76px; } .gv_play .material-symbols-outlined{ font-size: 44px; } .gv_full{ position: absolute; z-index: 4; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 0; background: rgba(0,0,0,0.55); color: #fff; } .gv_full:hover{ background: rgba(0,0,0,0.8); } /* ---------------------- the chrome gets out of the way ------------------- Move the cursor off the viewing area and everything laid over the picture fades: the bar, the arrows, the zoom cluster, the play button. Move back onto it and they return. The work is what you came to look at, and it should be able to sit there on its own. Only where there is a real cursor to move. A touch screen has no hover to read, and chrome that vanished with no way to bring it back would be chrome you had lost. Opacity rather than display, so nothing reflows as it goes -- and pointer-events with it, because an invisible button that still takes clicks is worse than a visible one. ------------------------------------------------------------------------ */ .gv_bar, .gv_nav, .gv_full, .gv_zoom_tools, .gv_play{ transition: opacity 0.28s ease; } @media (hover: hover) and (pointer: fine){ .gv_stage.is_quiet .gv_bar, .gv_stage.is_quiet .gv_nav, .gv_stage.is_quiet .gv_full, .gv_stage.is_quiet .gv_zoom_tools, .gv_stage.is_quiet .gv_play{ opacity: 0; pointer-events: none; } /* somebody tabbing through has no cursor to bring it back with */ .gv_stage.is_quiet:focus-within .gv_bar, .gv_stage.is_quiet:focus-within .gv_nav, .gv_stage.is_quiet:focus-within .gv_full, .gv_stage.is_quiet:focus-within .gv_zoom_tools, .gv_stage.is_quiet:focus-within .gv_play{ opacity: 1; pointer-events: auto; } } @media (prefers-reduced-motion: reduce){ .gv_bar, .gv_nav, .gv_full, .gv_zoom_tools, .gv_play{ transition: none; } } /* the three big controls in the corner */ .gv_nav{ position: absolute; z-index: 6; right: 22px; bottom: 22px; display: flex; align-items: flex-end; gap: 14px; /* opacity as well as bottom: the shorthand replaces whatever the shared fade rule above set, so it has to name both or the arrows snap out of existence while everything else fades */ transition: bottom 0.2s ease, opacity 0.28s ease; } /* a playing video puts its own controls along the bottom of the frame, and these would sit on top of the scrub bar */ .gv.is_playing .gv_nav{ bottom: 76px; } .gv_nav_btn{ display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; padding: 0; /* The circle above is dark in both themes because it may be over a photograph. The label is not -- it sits below the circle, on the well, so it follows the theme and carries a halo in the opposite direction to stay readable if it does overlap the picture. */ color: var(--gd-ink); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-shadow: 0 1px 3px var(--gd-halo); } /* These float over the media, which may be a photograph, a black bar or the well itself -- so they are dark-on-light-icon in BOTH themes. A translucent white pill reads over a picture and vanishes over a pale well; a dark one reads over everything. */ .gv_nav_icon{ width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); transition-duration: 0.15s; } .gv_nav_btn:hover .gv_nav_icon{ background: rgba(0,0,0,0.68); } .gv_nav_icon .material-symbols-outlined{ font-size: 27px; } .gv_nav_btn.is_primary .gv_nav_icon{ background: var(--gd-lime); color: #151515; } .gv_nav_btn.is_primary:hover .gv_nav_icon{ background: #d6ef8a; } .gv_nav_btn:disabled{ opacity: 0.35; cursor: not-allowed; } .gv_nav_btn:disabled:hover .gv_nav_icon{ background: rgba(0,0,0,0.48); } /* ------------------------------ the column ------------------------------ */ .gv_side{ display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--gd-line); background: var(--gd-surface); } .gv_side_head{ display: flex; align-items: center; gap: 16px; flex: 0 0 auto; padding: 16px 20px 0; } .gv_tab{ border: 0; background: transparent; cursor: pointer; padding: 0 0 12px; color: var(--gd-dim); font-family: inherit; font-size: 15px; font-weight: 700; border-bottom: 2px solid transparent; } .gv_tab.is_on{ color: var(--gd-ink); border-bottom-color: var(--gd-lime); } .gv_tab_n{ font-size: 13px; } .gv_sort{ margin-left: auto; margin-bottom: 10px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; border: 1px solid var(--gd-line); background: var(--gd-card); color: var(--gd-ink); } /* .dark select sets its own background and colour with !important, so the override has to carry it too or the box comes out lime */ .dark .gv_sort{ background-color: var(--gd-card) !important; color: var(--gd-ink) !important; } .gv_pane{ flex: 1 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--gd-line); } /* --------------------------- the feedback list -------------------------- */ .gf_list{ padding: 6px 0 12px; } .gf_pinned_note{ display: flex; align-items: flex-start; gap: 9px; padding: 14px 20px; font-size: 12.5px; line-height: 1.45; color: var(--gd-dim); } .gf_pinned_dot{ flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gd-orange); margin-top: 5px; } .gf_item{ display: flex; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--gd-line); } .gf_item.is_reply{ border-bottom: 0; padding: 12px 0 0 0; } .gf_avatar{ flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--gd-panel) center / cover no-repeat; } .gf_item.is_reply .gf_avatar{ width: 26px; height: 26px; } .gf_body{ min-width: 0; flex: 1 1 auto; } .gf_who{ display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 0 0 1px; } .gf_who strong{ font-size: 14.5px; line-height: 1.25; } .gf_time{ padding: 2px 8px; border-radius: 5px; cursor: pointer; border: 0; background: rgba(242,145,61,0.18); color: var(--gd-orange-ink); font-family: inherit; font-size: 11.5px; font-weight: 700; } .gf_time:hover{ background: var(--gd-orange); color: #151515; } .gf_role{ font-size: 12px; color: var(--gd-dim); padding: 0 0 7px; } /* the weight is stated because the site sets a bold default inside .dashboard_wrapper that a comment should not inherit */ .gf_text{ font-size: 14.5px; font-weight: 400; line-height: 1.5; color: var(--gd-ink); } .gf_text strong, .gf_text b{ font-weight: 700; } .gf_text a{ color: var(--gd-lime-ink); } .gf_actions{ display: flex; align-items: center; gap: 16px; padding: 9px 0 0; } .gf_up, .gf_reply{ display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--gd-dim); font-family: inherit; font-size: 12.5px; font-weight: 700; } .gf_up:hover, .gf_reply:hover{ color: var(--gd-ink); } .gf_up.is_on{ color: var(--gd-lime-ink); } .gf_arrow{ font-size: 14px; line-height: 1; } .gf_when{ margin-left: auto; font-size: 11.5px; color: var(--gd-faint); } .gf_replies{ padding: 4px 0 0 0; border-left: 2px solid var(--gd-line); margin: 8px 0 0; padding-left: 14px; } .gf_empty{ padding: 40px 20px; font-size: 14px; line-height: 1.5; color: var(--gd-dim); } /* ------------------------------- details tab ---------------------------- */ .gv_details{ padding: 20px; } .gv_title{ font-size: 19px; font-weight: 700; line-height: 1.3; padding: 0 0 14px; } .gv_by{ display: flex; align-items: center; gap: 11px; padding: 0 0 16px; } .gv_by_text{ display: flex; flex-direction: column; min-width: 0; } .gv_by_text a{ font-size: 14.5px; font-weight: 700; } .gv_by_text span{ font-size: 12.5px; color: var(--gd-dim); } .gv_text{ font-size: 14.5px; line-height: 1.55; color: var(--gd-dim); padding: 0 0 16px; } .gv_text a{ color: var(--gd-lime-ink); } .gv_link{ font-size: 13px; padding: 0 0 16px; word-break: break-all; } .gv_link a{ color: var(--gd-lime-ink); } .gv_facts{ display: flex; gap: 26px; flex-wrap: wrap; padding: 0 0 18px; margin: 0; } .gv_facts dt{ font-size: 11px; font-weight: 700; letter-spacing: 0.07em; color: var(--gd-dim); } .gv_facts dd{ font-size: 16px; font-weight: 700; margin: 3px 0 0; } .gv_like.is_on{ border-color: var(--gd-like); color: var(--gd-like); } .gv_like.is_on .material-symbols-outlined{ font-variation-settings: 'FILL' 1; } /* ---------------------------- leaving feedback -------------------------- */ .gv_compose{ flex: 0 0 auto; /* the site's notification buttons float up out of the footer into the bottom-right of this panel; the extra room keeps the send button from sitting underneath them */ padding: 14px 20px calc(48px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gd-line); background: var(--gd-surface); } @media screen and (max-width: 820px){ /* the phone hides the footer for this page, so there is nothing to clear and the box goes back to its normal height */ .gv_compose{ padding-bottom: calc(14px + env(safe-area-inset-bottom)); } } .gv_pin_row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 10px; } .gv_pin{ display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 15px; cursor: pointer; border: 1px solid var(--gd-orange); background: transparent; color: var(--gd-orange-ink); font-family: inherit; font-size: 12.5px; font-weight: 700; } .gv_pin.is_on{ background: var(--gd-orange); color: #151515; } .gv_pin .material-symbols-outlined{ font-size: 16px; } .gv_pin_note{ font-size: 12px; color: var(--gd-dim); } .gv_replying{ display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 6px 5px 12px; border-radius: 14px; background: var(--gd-panel); font-size: 12px; color: var(--gd-dim); } .gv_replying button{ border: 0; background: transparent; color: var(--gd-dim); cursor: pointer; display: flex; padding: 0; } .gv_replying .material-symbols-outlined{ font-size: 16px; } .gv_compose_row{ display: flex; gap: 10px; align-items: flex-end; } .gv_compose_row textarea{ flex: 1 1 auto; min-width: 0; resize: none; padding: 12px 15px; border-radius: 11px; border: 1px solid var(--gd-line); background: var(--gd-card); color: var(--gd-ink); font-family: inherit; font-size: 14.5px; line-height: 1.45; } .gv_compose_row textarea:focus{ outline: none; border-color: var(--gd-lime); } .gv_compose_row .gd_btn{ padding: 12px 16px; } .gv_compose_row .gd_btn:disabled{ opacity: 0.4; cursor: not-allowed; } .gv_compose_error{ font-size: 12.5px; color: var(--gd-danger); padding: 8px 0 0; } /* -------------------------------- narrower ------------------------------ */ @media screen and (max-width: 1200px){ .gv{ grid-template-columns: minmax(0, 1fr) 360px; } } @media screen and (max-width: 900px){ /* the column goes under the media rather than beside it, and the media takes a fixed share so the feedback is not pushed off the screen */ .gv{ grid-template-columns: minmax(0, 1fr); grid-template-rows: 46dvh minmax(0, 1fr); } .gv_side{ border-left: 0; border-top: 1px solid var(--gd-line); } .gv_back span:not(.material-symbols-outlined){ display: none; } .gv_back{ padding: 9px 11px; } .gv_nav{ right: 14px; bottom: 14px; gap: 10px; } .gv.is_playing .gv_nav{ bottom: 62px; } .gv_zoom_tools{ left: 12px; bottom: 12px; } /* on a phone the gestures are the controls; the buttons are a fallback for anyone who cannot pinch */ .gv_zoom_tools{ opacity: 1; } .gv_nav_icon{ width: 46px; height: 46px; } .gv_nav_icon .material-symbols-outlined{ font-size: 23px; } .gv_nav_label{ display: none; } .gv_details, .gf_item{ padding-left: 16px; padding-right: 16px; } .gv_compose{ padding-left: 16px; padding-right: 16px; } } /* On a phone the masthead, the footer and the rail are already hidden for this page, so there is nothing to be inset by. */ @media screen and (max-width: 820px){ #gv_host.gv_host{ top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; } } @media (prefers-reduced-motion: reduce){ #gv_host.gv_host{ transition: none; } }