/* Stackline custom theme — paste into your theme's custom.css (AdminCP → Customization → Themes → Custom CSS). Only adds the classes used above that aren't in stock IPS4. Version: 4.5 Change from 4.4: fixed listing-row text being clipped at the left screen edge on phones. The listing view renders outside #eg_content so it never got the phone containment rules the featured grid has, and its stock .ipsBox.ipsResponsive_pull wrapper goes full-bleed below 767px while .cArticle_listingRow had no horizontal padding. Rows are now inset at that same breakpoint (safe-area aware), the zebra reset no longer stomps the row padding, the phone column is minmax( 0, 1fr ), and the row is position: relative so the mod checkbox has a containing block. Change from 4.3: added the per-category article outline section — every .cArticle_card / .cArticle_featured now carries a transparent border of fixed width, recoloured per category with .eg_article_ blocks (v2.1 Featured entry.html stamps that class). No visual change until a category block is uncommented. Change from 4.2: side menu (category nav) colour rules now carry literal fallbacks on their --i-* tokens. None of the --i-* tokens are defined by the live theme, so text, hover, active and the active underline were all invalid at compute time and fell back to the inherited link colour. Fallbacks mirror the theme's own values: --i-text #353c41 (--theme-text_color), --i-text-light #718096 (--theme-text_light), --i-primary #2974b0 (--theme-primary_button), --i-area-light #f5f7f9 (--theme-area_background_light). Overflow behaviour unchanged. Change in 4.2: .cArticle_photo placeholder background changed from a repeating stripe gradient to an SVG mask pattern rendered via ::before. Pattern colour is controlled with the CSS variable --photo-pattern-color, set on .cArticle_photo itself or any ancestor. */ /* ───────────────────────────────────────────────────────────────────────── ARTICLE CARD — base card grid & heading ───────────────────────────────────────────────────────────────────────── */ .cArticle_card { display: grid; grid-template-rows: auto 1fr; } .cArticle_card h3 { font-size: 17px; line-height: 1.22; margin: 12px 0 8px; font-weight: 600; letter-spacing: -0.005em; } /* ───────────────────────────────────────────────────────────────────────── ARTICLE PHOTO — placeholder thumbnail container ───────────────────────────────────────────────────────────────────────── When no image is attached to a record, this element shows as a styled placeholder. The SVG pattern is painted by ::before (see below) so that real images, which sit as children, cover it completely. isolation: isolate — creates a new stacking context so the ::before z-index:-1 stays inside this box and doesn't bleed behind the page background. overflow: hidden — clips the pattern and any image to the border-radius. ───────────────────────────────────────────────────────────────────────── */ .cArticle_photo { display: block; aspect-ratio: 16/9; position: relative; isolation: isolate; /* required: keeps ::before z-index:-1 contained */ background: var(--i-area-light, #f3f1ec); /* solid base — pattern sits on top */ border: 1px solid var(--i-rule, #e2ded7); border-radius: 3px; overflow: hidden; } /* ── SVG tiled pattern — shown only when no image is present ───────────── How colour works: • background-color on ::before sets the fill colour of the icon. • The SVG data-URI is used purely as a mask (alpha channel), so the actual fill="black" in the SVG paths doesn't matter — the mask just punches through to the background-color beneath. • opacity controls how strongly the pattern shows against the base bg. To change the pattern colour for a specific context add: .my-context .cArticle_photo { --photo-pattern-color: #your-color; } or set it inline on an ancestor element. Tweak knobs: --photo-pattern-color icon colour default: #888888 (neutral grey) opacity pattern fade 0.2 = subtle, 1.0 = solid --icon-size tile size increase for larger icons ───────────────────────────────────────────────────────────────────────── */ .cArticle_photo::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; /* behind placeholder text/spans, above bg */ /* ✅ Change icon colour here, or override via --photo-pattern-color on a parent */ background-color: var(--photo-pattern-color, #888888); /* ✅ Change overall pattern strength here (0.0–1.0) */ opacity: 0.2; /* ✅ Change tile size here — larger number = bigger icon repetitions */ --icon-size: 25px; /* SVG used as a mask: black areas become visible, transparent areas hide */ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='354 4 68 67'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='black' d='M372.045%2C49.398V43.58h12.865v-3.949h5.82v3.949h12.867v5.818H372.045Z M380.203%2C37.613V22.307h15.305v15.307H380.203Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='black' d='M387.819%2C66.175c-15.776%2C0-28.584-12.815-28.584-28.593c0-15.779%2C12.808-28.591%2C28.584-28.591c15.782%2C0%2C28.587%2C12.812%2C28.587%2C28.591C416.406%2C53.36%2C403.602%2C66.175%2C387.819%2C66.175Z M387.819%2C61.62c13.274%2C0%2C24.041-10.768%2C24.041-24.037c0-13.27-10.767-24.046-24.041-24.046c-13.271%2C0-24.038%2C10.776-24.038%2C24.046C363.781%2C50.852%2C374.549%2C61.62%2C387.819%2C61.62Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='354 4 68 67'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='black' d='M372.045%2C49.398V43.58h12.865v-3.949h5.82v3.949h12.867v5.818H372.045Z M380.203%2C37.613V22.307h15.305v15.307H380.203Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='black' d='M387.819%2C66.175c-15.776%2C0-28.584-12.815-28.584-28.593c0-15.779%2C12.808-28.591%2C28.584-28.591c15.782%2C0%2C28.587%2C12.812%2C28.587%2C28.591C416.406%2C53.36%2C403.602%2C66.175%2C387.819%2C66.175Z M387.819%2C61.62c13.274%2C0%2C24.041-10.768%2C24.041-24.037c0-13.27-10.767-24.046-24.041-24.046c-13.271%2C0-24.038%2C10.776-24.038%2C24.046C363.781%2C50.852%2C374.549%2C61.62%2C387.819%2C61.62Z'/%3E%3C/svg%3E"); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: var(--icon-size) var(--icon-size); mask-size: var(--icon-size) var(--icon-size); -webkit-mask-position: top right; mask-position: top right; } /* ── Real image — covers the ::before pattern completely ───────────────── object-fit:contain keeps the full image visible (no cropping). Switch to object-fit:cover if you prefer the image to fill the box. */ .cArticle_photo img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ───────────────────────────────────────────────────────────────────────── THUMBNAIL BACKGROUND MODES Driven by the Pages database field `thumbnail-background`. Modifier class is emitted by the templates alongside .cArticle_photo. --roundel base fill + SVG pattern, image letterboxed (contain) --blank no fill, no pattern, no border, image letterboxed (contain) --fill base fill + SVG pattern, image cropped to fill (cover) Specificity note: all three are (0,1,1) so they beat the (0,1,1) base .cArticle_photo img rule on source order alone — keep this block AFTER it. ───────────────────────────────────────────────────────────────────────── */ /* Roundel — explicit restatement of the default so intent is readable */ .cArticle_photo--roundel img { object-fit: contain; } /* Blank — kill the solid base, the pattern, and the frame */ .cArticle_photo--blank { background: transparent; border-color: transparent; } .cArticle_photo--blank::before { content: none; } .cArticle_photo--blank img { object-fit: contain; } /* Fill — roundel retained beneath, but the image now crops to the box */ .cArticle_photo--fill img { object-fit: cover; } /* ── Placeholder text elements shown when no image is set ─────────────── .ph-corner small category label, top-left .ph-label centred aspect-ratio hint (e.g. "16:10") */ .cArticle_photo .ph-corner { position: absolute; top: 8px; left: 8px; font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: .06em; color: #888; } .cArticle_photo .ph-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: ui-monospace, monospace; font-size: 10px; background: #fff; border: 1px solid #e2ded7; padding: 3px 8px; letter-spacing: .08em; text-transform: uppercase; color: #888; } /* ───────────────────────────────────────────────────────────────────────── SIDE MENU TITLE — "SECTIONS" label to the left of category links (short-form rule kept here for the old single-line selector; the full block is in the ipsSideMenu section further down) ───────────────────────────────────────────────────────────────────────── */ .ipsSideMenu_title { display: inline-flex; align-items: center; padding-right: 14px; margin-right: 8px; border-right: 1px solid var(--i-rule, #e2ded7); font-family: ui-monospace, monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #888; } /* Urgent pulsing dot — short-form kept alongside its related sibling above */ .urgent-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #d23a2a; margin-right: 6px; } /* ───────────────────────────────────────────────────────────────────────── PAGE WRAP — centres content and caps max width ───────────────────────────────────────────────────────────────────────── */ #elCmsPageWrap { max-width: 1320px; margin: 0 auto; } /* ───────────────────────────────────────────────────────────────────────── MAIN CONTENT AREA — flex row: #eg_content + #ipsLayout_sidebar ───────────────────────────────────────────────────────────────────────── */ #eg_main { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; width: 100%; min-height: 350px; box-sizing: border-box; background-color: var(--box--backgroundColor); padding-right: var(--sp-3) !important; padding-left: var(--sp-3) !important; padding-bottom: var(--sp-3); border-bottom: 1px var(--eg_border_light) solid; border-left: 1px var(--eg_border_light) solid; border-right: 1px var(--eg_border_light) solid; border-top: 1px var(--eg_border_light) solid; } /* ───────────────────────────────────────────────────────────────────────── GRID FIXES — override IPS float-based grid with CSS grid IPS4 uses floats + clearfix pseudo-elements on .ipsGrid; these rules replace that with a proper CSS grid so columns are even and gap works. ───────────────────────────────────────────────────────────────────────── */ /* Kill the float clearfix pseudo-elements IPS injects */ #eg_content .ipsGrid::before, #eg_content .ipsGrid::after { display: none; content: none; } /* 3-column grid by default (overridden at tablet and wide breakpoints below) */ #eg_content .ipsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; width: 100%; } /* Reset IPS span classes — they set float+width which we don't need */ #eg_content .ipsGrid > .ipsGrid_span4 { width: auto; float: none; margin-left: 0; } #eg_content { flex: 1; min-width: 0; /* prevents flex child from overflowing */ overflow: hidden; } #ipsLayout_sidebar { flex-shrink: 0; min-width: 300px; max-width: 305px; padding-bottom: 15px; overflow: hidden; box-sizing: border-box; padding-top: 15px; } /* ───────────────────────────────────────────────────────────────────────── FEATURED ARTICLES — horizontal layout (image left, content right) Used for records marked as "featured" in IPS; rendered above the main grid. ───────────────────────────────────────────────────────────────────────── */ /* Wrapper: stacks featured articles vertically with a divider below */ .cArticle_featuredList { display: grid; gap: 28px; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--i-rule); } /* Each featured article: two-column grid — thumbnail | body */ .cArticle_featured { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; } /* Divider between consecutive featured items */ .cArticle_featured + .cArticle_featured { padding-top: 28px; border-top: 1px solid var(--i-rule); } .cArticle_featured .cArticle_photo { aspect-ratio: 16/9; align-self: start; } .cArticle_featured .cArticle_card_body { padding: 0; } .cArticle_featured h3 { font-size: 25px; line-height: 1.14; margin: 4px 0 12px; font-weight: 700; letter-spacing: -0.018em; font-family: var(--i-font-serif); } .cArticle_featured .deck { color: var(--i-text-light); font-size: 14.5px; line-height: 1.6; margin-bottom: 0; } .cArticle_featured .ipsType_cutoff_3 { -webkit-line-clamp: 5; } /* ───────────────────────────────────────────────────────────────────────── PER-CATEGORY ARTICLE OUTLINE EduGeek Cms v2.1 Featured/entry.html stamps eg_article_ on the card wrapper —
for featured records,
  • for grid records — so a whole card can be outlined per category. The base rule gives EVERY card a transparent border of the same width, so switching a category on only recolours it: no reflow of the grid, and no visual change at all until an eg_article_ block sets a colour. Per-category knobs (set any of these in the blocks below): --eg-article-outline border colour (default transparent) --eg-article-outline-width border thickness (default 2px) --eg-article-outline-radius corner radius (default 6px) --eg-article-outline-pad inset around content (default 0) Padding is the one that does move things: it insets that card's image and text relative to un-outlined neighbours in the same row. Usually what you want for a highlighted card; leave it at 0 to keep every thumbnail in the row aligned. Category ids are hardcoded here exactly as they are for .eg_cms_cat_ and .cCat_ — a new category needs a new block, not just content. ───────────────────────────────────────────────────────────────────────── */ .cArticle_card, .cArticle_featured { --eg-article-outline: transparent; --eg-article-outline-width: 2px; --eg-article-outline-radius: 6px; --eg-article-outline-pad: 0px; box-sizing: border-box; border: var(--eg-article-outline-width) solid var(--eg-article-outline); border-radius: var(--eg-article-outline-radius); padding: var(--eg-article-outline-pad); } /* ── Per-category blocks — uncomment and set the colour ────────────────── Both selectors are needed so the rule beats the base above on specificity (0,2,0 vs 0,1,0) regardless of source order. Colours below are the flat fallbacks from eg_cms_v1.css; swap in {theme="…"} values or var(--egcms_cat_grad_) stops as you prefer. ───────────────────────────────────────────────────────────────────────── */ /* .cArticle_card.eg_article_7, .cArticle_featured.eg_article_7 { --eg-article-outline: #090979; --eg-article-outline-pad: 12px; } .cArticle_card.eg_article_11, .cArticle_featured.eg_article_11 { --eg-article-outline: #357FBB; } .cArticle_card.eg_article_16, .cArticle_featured.eg_article_16 { --eg-article-outline: #2A7B9B; } .cArticle_card.eg_article_41, .cArticle_featured.eg_article_41 { --eg-article-outline: #FD1D1D; } .cArticle_card.eg_article_43, .cArticle_featured.eg_article_43 { --eg-article-outline: #FD1D1D; } .cArticle_card.eg_article_44, .cArticle_featured.eg_article_44 { --eg-article-outline: #FD1D1D; } */ /* ───────────────────────────────────────────────────────────────────────── RESPONSIVE BREAKPOINTS ───────────────────────────────────────────────────────────────────────── */ /* Tablet — 2-column grid */ @media screen and (max-width: 1024px) { #eg_content .ipsGrid { grid-template-columns: repeat(2, 1fr); } } /* Wide screens (>1920px) — 4-column grid + wider page wrap */ @media screen and (min-width: 1921px) { #elCmsPageWrap { max-width: 1760px; } .ipsSideMenu_inner { max-width: 1760px; } #eg_content .ipsGrid { grid-template-columns: repeat(4, 1fr); } } /* Mobile — phones (≤480px) */ @media screen and (max-width: 480px) { /* Stack sidebar below content */ #eg_main { flex-direction: column; overflow: hidden; max-width: 100%; width: 100%; } #eg_content { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; } #ipsLayout_sidebar { width: 100%; min-width: 100%; max-width: 100%; padding-left: 0; box-sizing: border-box; } /* Single column grid on phones */ #eg_content .ipsGrid { grid-template-columns: 1fr; width: 100%; overflow: hidden; } #eg_content .ipsGrid > li { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; } #eg_content .cArticle_card { width: 100%; max-width: 100%; box-sizing: border-box; } #eg_content img { max-width: 100%; height: auto; } /* Featured articles — stack image above body on phones */ .cArticle_featuredList { gap: 16px; margin-bottom: 16px; padding-bottom: 16px; } .cArticle_featured { grid-template-columns: 1fr; gap: 12px; } .cArticle_featured .cArticle_photo { width: 100%; aspect-ratio: 16/9; } .cArticle_featured .cArticle_photo img { width: 100%; height: 100%; display: block; } .cArticle_featured .cArticle_card_body { width: 100%; box-sizing: border-box; } .cArticle_featured h3 { font-size: 20px; } } /* ───────────────────────────────────────────────────────────────────────── BADGES IPS4 provides .ipsBadge but we extend/override it here for monospace typography, pill shape, and additional colour variants. ───────────────────────────────────────────────────────────────────────── */ .cCatBadge { color: white; } .ipsBadge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--i-font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 999px; background: var(--i-neutral); /* color: white;*/ line-height: 1; } .ipsBadge_new { background: var(--i-primary); } .ipsBadge_warning { background: var(--i-warning); color: oklch(0.20 0.05 60); } .ipsBadge_positive { background: var(--i-positive); } .ipsBadge_negative { background: var(--i-negative); } .ipsBadge_neutral { background: var(--i-neutral); } /* Numbered category colour variants — assign eg_cms_cat_N class in template to match IPS category IDs, or use ipsBadge_styleN directly */ .ipsBadge_style16 { background: oklch(0.55 0.16 250); } .ipsBadge_style2 { background: oklch(0.55 0.16 200); } .ipsBadge_style3 { background: oklch(0.55 0.16 150); } .ipsBadge_style4 { background: oklch(0.55 0.16 290); } .ipsBadge_style5 { background: oklch(0.55 0.16 320); } .ipsBadge_style6 { background: oklch(0.55 0.16 50); } .ipsBadge_style41 { background: oklch(0.55 0.20 28); } .ipsBadge_style8 { background: oklch(0.55 0.16 100); } .ipsBadge_style9 { background: oklch(0.50 0.018 260);} .ipsBadge_style10 { background: oklch(0.55 0.16 230); } /* Count badge used inside nav items */ .ipsBadge_count { background: var(--i-area-light, #f5f7f9); color: var(--i-text-light, #718096); border: 1px solid var(--i-rule, #e2ded7); } /* ───────────────────────────────────────────────────────────────────────── SIDE MENU (horizontal category nav bar) Rendered as a sticky top bar with overflow-x scroll on narrow viewports. ───────────────────────────────────────────────────────────────────────── */ .ipsSideMenu { background: var(--box--backgroundColor); border-bottom: 1px solid var(--eg_border_light); } .ipsSideMenu_inner { max-width: 1320px; margin: 0 auto; padding: 0 20px; display: flex; align-items: stretch; height: 44px; overflow-x: auto; scrollbar-width: none; /* Firefox — hide scrollbar */ -ms-overflow-style: none; /* IE/Edge */ -webkit-overflow-scrolling: touch; } /* Hide scrollbar in Chrome/Safari */ .ipsSideMenu_inner::-webkit-scrollbar { display: none; } /* "SECTIONS" label to the left of the nav links */ .ipsSideMenu_title { display: inline-flex; align-items: center; padding: 0 14px 0 0; margin-right: 4px; border-right: 1px solid var(--eg_border_light); font-family: ui-monospace, monospace; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--i-text-lighter, #888888); white-space: nowrap; flex-shrink: 0; } /* Individual category link */ .ipsSideMenu_item { display: inline-flex !important; align-items: center; gap: 6px; padding: 0 13px !important; font-size: 12.5px; font-weight: 500; color: var(--i-text-light, #718096); white-space: nowrap; flex-shrink: 0; position: relative; border-bottom: 2px solid transparent; /* underline placeholder for active state */ margin-bottom: -1px !important; /* overlap the parent border-bottom */ text-decoration: none; transition: color 0.15s; } .ipsSideMenu_item:hover { color: var(--i-text, #353c41); text-decoration: none; } /* Active category — coloured underline */ .ipsSideMenu_itemActive { color: var(--i-text, #353c41); border-bottom-color: var(--i-primary, #2974b0); } /* Count badge inside a nav link */ .ipsSideMenu_item .ipsBadge_count { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--i-area-light, #f5f7f9); color: var(--i-text-light, #718096); border: 1px solid var(--eg_border_light); line-height: 1.6; font-weight: 500; } /* Active category count badge — tinted to match primary colour */ .ipsSideMenu_itemActive .ipsBadge_count { background: var(--i-primary-light, #E6F1FB); color: var(--i-primary, #2974b0); border-color: var(--i-primary-light, #B5D4F4); } /* Urgent pulsing dot — add in template */ .urgent-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #d23a2a; flex-shrink: 0; animation: ipsPulse 1.8s ease-in-out infinite; } /* Side menu responsive overrides */ @media screen and (max-width: 480px) { .ipsSideMenu_inner { padding: 0 12px; height: 40px; } .ipsSideMenu_title { display: none; /* hide the "SECTIONS" label on phones — saves space */ } .ipsSideMenu_item { padding: 0 10px; font-size: 12px; } } @media screen and (min-width: 481px) and (max-width: 1024px) { .ipsSideMenu_inner { padding: 0 16px; } } /* ───────────────────────────────────────────────────────────────────────── TABS ───────────────────────────────────────────────────────────────────────── */ .ipsTabs { display: flex; gap: 0; border-bottom: 1px solid var(--i-rule); } .ipsTabs_item { padding: 12px 18px; font-size: 13px; font-weight: 500; color: var(--i-text-light); position: relative; cursor: pointer; } .ipsTabs_item:hover { color: var(--i-text); } .ipsTabs_activeItem { color: var(--i-text); } .ipsTabs_activeItem::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--i-primary); } /* ───────────────────────────────────────────────────────────────────────── ARTICLE CARD BODY — spacing helpers applied inside the card below the photo ───────────────────────────────────────────────────────────────────────── */ .cArticle_card_body { padding: 14px 0 0; } .cArticle_card_title { font-size: 17px; line-height: 1.22; margin: 12px 0 8px; font-weight: 600; letter-spacing: -0.005em; } .cArticle_card_deck { margin: 0; } .cArticle_card_meta { margin-top: 10px; } /* Read state — dimmed title for already-visited articles */ .cArticle_card_read .cArticle_card_title { color: var(--i-text-light); font-weight: 500; } /* ───────────────────────────────────────────────────────────────────────── EMPTY STATE ───────────────────────────────────────────────────────────────────────── */ .ipsNoResults { padding: 60px 0; text-align: center; font-family: var(--i-font-mono); font-size: 12px; color: var(--i-text-lighter); text-transform: uppercase; letter-spacing: 0.08em; } /* ───────────────────────────────────────────────────────────────────────── LISTING ROWS — used in category/listing view (not featured view) Three-column grid: thumbnail | body | moderation checkbox ───────────────────────────────────────────────────────────────────────── */ /* Kill IPS zebra stripe and datalist chrome on the listing
      */ .cCmsListing.ipsDataList { background: none; border: 0; } /* padding is deliberately NOT reset here: this selector is (0,2,1) and beat .cArticle_listingRow's own padding, leaving every row with no inset at all. Nothing stock pads a bare .ipsDataList > li anyway - stock padding hangs off .ipsDataItem, which these rows do not use. */ .cCmsListing.ipsDataList > li { background: none !important; } .cArticle_listingRow { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 16px 0; position: relative; /* containing block for .cArticle_listing_modCheck below */ border-bottom: 1px solid var(--i-rule, #e2ded7); } .cArticle_listingRow:first-child { padding-top: 0; } /* Slightly taller aspect ratio for listing thumbnails vs card thumbnails */ .cArticle_listingRow .cArticle_photo { aspect-ratio: 16/10; align-self: start; } .cArticle_listingRow .cArticle_card_body { padding: 0; } .cArticle_listingRow h3.cArticle_card_title { font-size: 18px; line-height: 1.2; margin: 2px 0 6px; font-weight: 600; letter-spacing: -0.01em; font-family: var(--i-font-serif); } .cArticle_listingRow .cArticle_card_deck { font-size: 13.5px; line-height: 1.5; color: var(--i-text-light); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Footer row inside listing body: author photo + meta */ .cArticle_listing_foot { display: flex; align-items: center; gap: 8px; font-size: 12px; } .cArticle_listing_foot img, .cArticle_listing_foot .ipsUserPhoto { width: 20px; height: 20px; } .cArticle_listing_modCheck { align-self: start; padding-top: 2px; } /* Placeholder category label shown in empty photo boxes */ .ph-cat { font-family: var(--i-font-mono, ui-monospace, monospace); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--i-text-lighter, #888); padding: 6px; } /* Pinned record — left accent stripe + subtle background tint */ .cArticle_pinned { border-left: 3px solid var(--i-primary); padding-left: 16px; background: var(--i-primary-light, #f5f9ff); } /* Unread record — bolder title link */ .cArticle_unread h3.cArticle_card_title a { font-weight: 700; } /* Long unbroken strings (URLs, run-together titles) must not be allowed to set the body column's min-content width - see the minmax( 0, … ) note below. */ .cArticle_listingRow > *, .cArticle_listingRow .cArticle_card_body { min-width: 0; } .cArticle_listingRow h3.cArticle_card_title, .cArticle_listingRow .cArticle_card_deck { overflow-wrap: anywhere; } /* ── Phone: restore the inset ipsResponsive_pull takes away ─────────────── The listing view renders OUTSIDE #eg_content, so none of the phone containment rules further up this file reach it - that is why the featured index is fine and only listing rows are affected. Stock IPS wraps the listing
        in
        , and below 767px .ipsResponsive_pull is margin-left/right: -10px, exactly cancelling #ipsLayout_mainArea's 10px phone padding so the box goes full-bleed. Stock boxes then re-inset their content with ipsPadding/ipsPad; the
          has neither, and .cArticle_listingRow had no horizontal padding, so row text sat at x = 0 - hard against the screen edge, and under the curved edge / safe-area of Android and iOS displays the leading glyphs are clipped. Padded at the pull's own breakpoint (767px), not 480px, so the whole band where the box is full-bleed is covered. env() keeps it clear of notch and curved-edge insets in landscape. ───────────────────────────────────────────────────────────────────────── */ @media screen and (max-width: 767px) { .cArticle_listingRow { padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); } } /* Listing rows collapse to single column on phones */ @media screen and (max-width: 480px) { .cArticle_listingRow { /* minmax( 0, 1fr ), not 1fr: a bare 1fr is minmax( auto, 1fr ), whose auto floor is the item's min-content width, so one long word widened the track past the box and pushed the row into horizontal overflow. */ grid-template-columns: minmax(0, 1fr); gap: 10px; } .cArticle_listingRow .cArticle_photo { aspect-ratio: 16/9; } .cArticle_listing_modCheck { position: absolute; top: 16px; right: 8px; } } /* Stackline v2.1 — category nav "wrapping chips" (AdminCP → Customization → Themes → Custom CSS, pasted AFTER claude.css.) Version: 1.1 Change from 1.0: hover now renders the full active treatment (filled primary pill, white text) instead of a grey tint, so a chip previews the state it is about to enter. Companion to claude.css v4.3 — an additive override, not a replacement. claude.css is unchanged and still owns the base .ipsSideMenu_* rules. Implements Option 1 from the "Category Nav Options" comparison: the nav wraps onto as many lines as it needs instead of scrolling one 44px row with a hidden scrollbar, so no category is ever off-screen. Links become pills rather than underlined tabs. Everything here is scoped to .ipsSideMenu_v21, which the two v2.1 template groups put on the