/* mctoolkit.net — layout. Tokens in tokens.css, ported-widget normalisation in tool-theme.css. * * Measurements taken from minecraftmaps.com/tools/enchantments, which is the best-looking * tool site in this space: hairline accent borders instead of bevels, a 3px radius, a * 12px/700/1.68px accent-coloured eyebrow above each section, and generous panel padding * (20px 22px 18px). The look comes from restraint — one accent, one hairline, real * spacing — not from chrome. */ /* minmax(0, 1fr), not 1fr. * * `1fr` is minmax(AUTO, 1fr), and an auto minimum refuses to go below the track's min-content * width — so one wide descendant stops the whole column shrinking and pushes the page sideways * instead. Measured on /advancements and /biomes at a 1280px viewport: the content column took * 1080px where 993 was available, the document scrolled to 1348, and the page scrolled * horizontally on the single most common laptop width. Pages whose widest child is narrow * (kit-generator) shrank correctly, which is why this looked fine — it only appears on the * tools with a wide table, and only between roughly 1024px and 1366px. * * Zero as the minimum lets the column take the space it is given; anything inside that is * genuinely too wide scrolls in its own container rather than moving the page. */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } /* ---------- collapsible rail ---------- * * The class lives on , set by the inline boot script in the head, so the collapsed * state is in force at first paint. Putting it on .shell instead would mean waiting for * body to parse and the rail would flash open on every navigation. * * The rail is taken out of flow with `display: none` rather than translated off-canvas: it * is `position: sticky; height: 100vh`, so an off-canvas transform would leave it eating a * scroll region at the edge of the viewport. * * The collapsed grid is a SINGLE column, not `0 1fr`. Hiding .side removes it as a grid * item, so with two columns declared .main becomes the first item and lands in the 0px one * — measured at 68px wide, which is exactly its own left+right padding. One column is the * only shape that survives its sibling disappearing. * * No transition on grid-template-columns. It animates by relaying out the whole page every * frame, and the tool widgets in the next column re-measure their canvases on resize — * seedmap and the 3D viewers would each redraw ~20 times for one click. */ :root.rail-off .shell { grid-template-columns: minmax(0, 1fr); } /* same reason as above */ :root.rail-off .side { display: none; } :root:not(.rail-off) .rail-open { display: none; } .mobile-bar, .mobile-scrim, .rail-mobile-close { display: none; } .brand-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); } .brand-row .brand { flex: 1; border-bottom: 0; } .rail-btn, .rail-open { flex: none; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 15px; line-height: 1; color: var(--fg-dim); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: color 120ms, border-color 120ms; } .rail-btn.rail-mobile-close { display: none; } .rail-btn { margin-inline-end: 14px; } .rail-btn:hover, .rail-open:hover { color: var(--fg); border-color: var(--line-strong); } /* Fixed, and anchored with logical properties so it lands on the right edge in Arabic. * z-index clears the ported apps that mount fixed chrome of their own — seedmap's floating * panels sit at 6..10 and its toasts at 40. */ .rail-open { position: fixed; top: 14px; inset-inline-start: 12px; z-index: 60; width: 30px; height: 30px; box-shadow: var(--drop); } [dir="rtl"] .rail-btn, [dir="rtl"] .rail-open { transform: scaleX(-1); } /* ---------- sidebar ---------- */ .side { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px; text-decoration: none; color: inherit; } /* * The real wordmark, not a text approximation of it. * * The header used to be the cube icon beside `MC` / `TOOLKIT` set in the UI font, while * og:image — the picture that unfurls in Discord and every other link preview — is the actual * artwork. Two different logos for the same site, and the one visitors met first was the one * that was not the brand. This is the same file the card is built from, at the size it is * drawn: 314x56 for a 157x28 slot, so it stays sharp on a retina screen. * * Width and height are on the element so the row does not reflow while the image loads, and * the artwork carries its own dark outline, which is what lets one asset sit on both themes. */ .brand-mark { height: 28px; width: auto; flex: none; display: block; } .search { padding: 12px 14px; } .search input { width: 100%; font: inherit; font-size: 13.5px; color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 11px; outline: none; } .search input::placeholder { color: var(--fg-dim); } .search input:focus { border-color: var(--grass); box-shadow: 0 0 0 2px rgba(16,185,129,.15); } .nav { flex: 1; overflow-y: auto; padding: 2px 10px 14px; } .nav h3 { margin: 18px 8px 7px; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fg-dim); } .nav a { display: flex; align-items: center; gap: 10px; padding: 7px 9px; text-decoration: none; color: var(--fg-muted); font-size: 13.5px; border-radius: var(--radius); border: 1px solid transparent; } .nav a:hover { background: var(--surface-2); color: var(--fg); } .nav a.on { background: rgba(16,185,129,.08); color: var(--grass-bright); border-color: var(--line-strong); } .nav a[hidden], .nav h3[hidden] { display: none; } .ico { width: 16px; height: 16px; flex: none; border-radius: 2px; } i.ico { box-shadow: var(--bevel); } /* Animated textures ship as a vertical strip — command_block_front is 16x64, four * frames. object-fit:fill squashes all four into the box; showing the top 16x16 picks * frame one, which is what the game draws at rest. */ img.ico, img.card-ico { object-fit: none; object-position: 0 0; overflow: hidden; } img.card-ico { object-fit: contain; } .side-foot { padding: 11px 14px; display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line); } .side-foot select { flex: 1; font: inherit; font-size: 13px; color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 9px; cursor: pointer; } .side-foot .btn { padding: 7px 10px; } /* ---------- main ---------- * * Two kinds of page, two widths, because the tools are not all the same shape. * * The old rule was `max-width: 1200px` with no centring, which at 1920 left 452px of dead * space hard against the right edge. Removing the cap outright — what mctoolbox does, whose * content area measures 1654px at that viewport — is right for a tool that fills it, and * wrong for the 82 of 87 widgets that cap themselves near 860px because they were authored * for mc-mod's narrow WordPress column. Measured on the beacon calculator: content 520px * wide against 800px of void, with the full-width promo block underneath making the * imbalance obvious. * * So the default column is capped and CENTRED: the heading, the widget and the promo share * a left edge, and what is left over sits symmetrically outside instead of piling up on one * side. `.main-wide` opts out for the pages that genuinely use the room — the tools that * are applications rather than forms, and the card grids. * * Long lines stay bounded by content rather than by the column either way: .hero p at 66ch, * .prose at 74ch. */ /* `width: 100%` is what stops a wide table dragging the page sideways, and it is not * redundant with max-width. * * .main is a grid item with `margin-inline: auto`, and auto inline margins turn a grid item * into a SHRINK-TO-FIT box. The floor of shrink-to-fit is the box's min-content width, which * `min-width: 0` cannot lower — min-width bounds the used width, it does not change what * fit-content resolves to. So on /advancements, whose table has a 1032px min-content, .main * came out 1064px inside a 993px grid area and the document scrolled sideways at 1280px, the * most common laptop width. /block-ids was fine at the same width purely because its widest * column is narrower — which is why this survived: it is invisible unless the page you open * happens to be one of the wide ones, at a viewport between roughly 1024 and 1366. * * With an explicit 100% the width resolves against the area (993) and is then clamped by * max-width, so the centring still works at wide viewports — 1633px of area gives 1080px of * column with the leftover split by the auto margins — and anything genuinely too wide * scrolls inside its own container instead of moving the page. */ .main { padding: 30px 34px 64px; width: 100%; max-width: 1080px; margin-inline: auto; min-width: 0; } .main-wide { max-width: none; margin-inline: 0; } /* Widgets are NOT centred inside the column, though it was tried. Each one caps itself at * its own width — 640px on the beacon calculator, ~860px on most — so centring pushed the * panel 186px to the right of the h1 above it and broke the one alignment that carries the * relationship between a heading and the thing it names. A shared left edge reads as * deliberate; symmetric whitespace around a floating panel does not. The leftover width * sits inside the column on the right, which is what a form in a content column looks like * everywhere else on the web. */ .hero { margin-bottom: 26px; } /* * A HEADING MUST BE ALLOWED TO BREAK, because a title is translated and German compounds. * * /de/server-config-generators is "Server-Konfigurationsgeneratoren" — one 32-character token. At * the <=900px size of 26px/800 weight it paints 337px into a 328px column, so the h1 overflowed by * 9px and took .hero with it. Measured as scrollWidth > clientWidth in an iframe at 360px, which is * the only way to see it: at that size the overhang is a few pixels of one glyph and a screenshot * shows nothing. * * `hyphens: auto` does the typographically right thing first — the page carries lang="de", so the * browser breaks at Kon-fi-gu-ra-tions-, not mid-syllable. `overflow-wrap: break-word` is the * guarantee underneath it, for a locale whose hyphenation dictionary the browser lacks. Neither * touches a title that already fits: break-word only engages when the word would otherwise * overflow its line box. */ .hero h1 { margin: 0 0 9px; font-size: 32px; line-height: 1.18; letter-spacing: -0.02em; font-weight: 800; hyphens: auto; overflow-wrap: break-word; } .hero p { margin: 0; color: var(--fg-muted); max-width: 66ch; font-size: 15.5px; } /* The generated row count and version under the description. Dimmer and smaller than the * description because it is provenance, not the pitch — and `tabular-nums` so the digits do * not shift width between locales that group thousands differently (1,585 / 1.585 / 1 585). */ .hero .tool-facts { margin: 9px 0 0; font-size: 13px; color: var(--fg-dim); font-variant-numeric: tabular-nums; } .hero-stats { display: flex; gap: 7px; margin-top: 16px; flex-wrap: wrap; } .hero .crumb { margin: 0 0 10px; font-size: 12.5px; color: var(--fg-dim); } .hero .crumb a { color: var(--fg-muted); text-decoration: none; } .hero .crumb a:hover { color: var(--grass); } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 0 13px; padding-bottom: 9px; border-bottom: 1px solid var(--line); } .section-head h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1.68px; text-transform: uppercase; color: var(--grass-bright); } .section-head a { color: var(--fg-muted); text-decoration: none; font-size: 12.5px; font-weight: 600; } .section-head a:hover { color: var(--grass); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: border-color 130ms, background 130ms, transform 130ms; } .card:hover { border-color: var(--line-strong); background: var(--surface-2); transform: translateY(-1px); } .card-top { display: flex; align-items: center; gap: 10px; } .card-ico { width: 26px; height: 26px; flex: none; border-radius: 2px; } i.card-ico { box-shadow: var(--bevel); } .card h3 { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -0.005em; } .card p { margin: 0; font-size: 13px; color: var(--fg-muted); line-height: 1.55; } .card footer { margin-top: auto; padding-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; } /* ---------- editorial homepage ---------- * * The homepage is intentionally not the 87-card directory it used to be. The rail already * owns complete tool discovery; the main column now introduces the product, surfaces authored * guides, and ends with a deliberately small set of high-intent tools. The visual language is * MCToolkit's own: real tool sprites, the existing palette, and CSS-built artwork — no borrowed * screenshots or assets from the reference layout. */ .home-magazine { width: min(100%, 1120px); margin-inline: auto; } .home-hero { max-width: 880px; margin: 38px auto 46px; padding: 16px 18px 44px; text-align: center; border-bottom: 1px solid var(--line); } .home-kicker { display: inline-flex; align-items: center; min-height: 30px; margin-bottom: 22px; padding: 6px 13px; border: 1px solid rgba(16,185,129,.26); border-radius: 999px; background: rgba(16,185,129,.08); color: var(--grass-bright); font-size: 11px; line-height: 1; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; } .home-hero h1 { max-width: 760px; margin: 0 auto 18px; font-size: clamp(42px, 5.1vw, 66px); line-height: 1.02; letter-spacing: -.055em; font-weight: 850; hyphens: auto; overflow-wrap: break-word; } .home-hero > p { max-width: 690px; margin: 0 auto; color: var(--fg-muted); font-size: 17px; line-height: 1.75; } .home-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .home-facts span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg-muted); font-size: 12px; font-weight: 650; } .home-feature { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(310px, .78fr); min-height: 410px; overflow: hidden; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 18px 55px rgba(15,23,42,.08); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .home-feature:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 22px 64px rgba(15,23,42,.12); } .home-guide-art { --art: #10b981; position: relative; min-height: 205px; overflow: hidden; isolation: isolate; display: grid; place-items: center; background-color: var(--art); background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px), radial-gradient(circle at 28% 18%, rgba(255,255,255,.38), transparent 34%), linear-gradient(145deg, rgba(15,23,42,.08), rgba(15,23,42,.56)); background-size: 34px 34px, 34px 34px, auto, auto; } .home-guide-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 34%, rgba(255,255,255,.14) 34% 51%, transparent 51%); } .home-guide-art-large { min-height: 410px; } .home-guide-art-building-resources { filter: saturate(.88) hue-rotate(-12deg); } .home-guide-art-server-performance { filter: saturate(.72) hue-rotate(18deg); } .home-guide-art-troubleshooting { filter: saturate(.66) hue-rotate(38deg); } .home-art-icon { position: relative; z-index: 2; width: 94px; height: 94px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 16px 13px rgba(0,0,0,.28)); transform: rotate(-4deg); transition: transform 180ms ease; } .home-guide-art-large .home-art-icon { width: 138px; height: 138px; } .home-feature:hover .home-art-icon, .home-guide-card:hover .home-art-icon { transform: rotate(1deg) scale(1.06); } .home-art-orbit { position: absolute; z-index: 1; border: 1px solid rgba(255,255,255,.34); border-radius: 20px; box-shadow: inset 0 0 0 9px rgba(255,255,255,.045); } .home-art-orbit-a { width: 190px; height: 190px; transform: rotate(32deg); } .home-art-orbit-b { width: 250px; height: 110px; transform: rotate(-18deg); } .home-guide-art-large .home-art-orbit-a { width: 280px; height: 280px; } .home-guide-art-large .home-art-orbit-b { width: 380px; height: 165px; } .home-feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 52px); } .home-guide-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 0 0 15px; color: var(--fg-dim); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .home-guide-meta span { color: var(--grass-bright); } .home-feature h2 { margin: 0 0 15px; font-size: clamp(25px, 2.25vw, 34px); line-height: 1.13; letter-spacing: -.035em; hyphens: auto; overflow-wrap: break-word; } .home-feature-copy > p:not(.home-guide-meta) { margin: 0; color: var(--fg-muted); font-size: 14px; line-height: 1.72; } .home-read-more { margin-top: 26px; color: var(--grass-bright); font-size: 13px; font-weight: 750; } .home-topics { display: flex; align-items: center; gap: 8px; overflow-x: auto; margin: 32px 0 8px; padding: 4px 1px 13px; scrollbar-width: thin; } .home-topics a { flex: none; padding: 8px 13px; color: var(--fg-muted); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 650; } .home-topics a:hover, .home-topics a.on { color: var(--grass-bright); border-color: rgba(16,185,129,.32); background: rgba(16,185,129,.08); } .home-topics > span { flex: none; margin-inline-start: auto; color: var(--fg-dim); font-size: 12px; } .home-section { margin-top: 48px; } .home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .home-section-head h2 { margin: 0; font-size: 25px; letter-spacing: -.025em; } .home-section-head a { color: var(--fg-muted); text-decoration: none; font-size: 13px; font-weight: 700; } .home-section-head a:hover { color: var(--grass-bright); } .home-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .home-guide-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } .home-guide-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 14px 38px rgba(15,23,42,.09); } .home-guide-copy { display: flex; flex: 1; flex-direction: column; padding: 21px 21px 23px; } .home-guide-copy h3 { margin: 0 0 11px; font-size: 18px; line-height: 1.28; letter-spacing: -.02em; hyphens: auto; overflow-wrap: break-word; } .home-guide-copy > p:not(.home-guide-meta) { display: -webkit-box; overflow: hidden; margin: 0; color: var(--fg-muted); font-size: 13px; line-height: 1.62; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .home-tools { margin-top: 62px; padding: 32px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 22px; } .home-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .home-tool-grid .card { min-width: 0; background: var(--surface); } .home-tool-grid .card p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .tool-mount { padding: 26px; min-height: 220px; display: grid; place-items: center; } .muted { color: var(--fg-dim); margin: 0; } /* ---------- guides ---------- */ .prose { max-width: 74ch; } .prose .crumb { font-size: 12.5px; color: var(--fg-dim); margin: 0 0 10px; } .prose .crumb a { color: var(--fg-muted); text-decoration: none; } .prose .crumb a:hover { color: var(--grass); } .prose h1 { font-size: 31px; line-height: 1.2; margin: 0 0 11px; letter-spacing: -0.02em; font-weight: 800; } .prose .lede { font-size: 16.5px; color: var(--fg-muted); margin: 0 0 6px; } .prose .meta { font-size: 12.5px; color: var(--fg-dim); margin: 0 0 30px; } .prose h2 { font-size: 12px; font-weight: 700; letter-spacing: 1.68px; text-transform: uppercase; color: var(--grass); margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .prose h3 { font-size: 16px; margin: 26px 0 8px; font-weight: 700; } .prose p { margin: 0 0 15px; } .prose ul, .prose ol { margin: 0 0 17px; padding-left: 22px; } .prose li { margin-bottom: 7px; } .prose a { color: var(--grass-bright); } .prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px; } .prose pre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; margin: 0 0 19px; } .prose pre code { background: none; border: 0; padding: 0; font-size: 12.5px; line-height: 1.65; } .prose blockquote { margin: 0 0 19px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: var(--radius); color: var(--fg-muted); } .prose .table-wrap { overflow-x: auto; margin: 0 0 19px; } .prose table { border-collapse: collapse; width: 100%; font-size: 14px; } /* `start`, not `left`: in the Arabic guides `left` pinned every cell of Arabic prose to the * wrong edge of its own column. In a left-to-right locale the two are identical. */ .prose th, .prose td { text-align: start; padding: 9px 13px; border-bottom: 1px solid var(--line); } .prose th { background: var(--surface-2); color: var(--fg-dim); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; } .prose .cta { margin: 32px 0 0; } .prose .cta a { text-decoration: none; display: inline-block; } /* A COMMAND INSIDE AN ARABIC GUIDE PAINTED BACKWARDS, THE SAME WAY /give DID. * * `.prose code` inherits the page direction, so inside an Arabic guide it computed * `direction: rtl` — and every leading neutral in it resolved to the paragraph direction and * jumped to the far end. `/execute` read `execute/`, exactly the defect this repo already * fixed once in widget copy and never checked for in guide bodies. * * Measured on the live /ar/blog/fill-clone-region-limits, comparing the painted x of the * leading character against the painted x of the word behind it: 7 of 7 reversed before this * rule, 0 of 7 after, and 7 of 7 again when the rule is removed — so the rule is what is doing * the work, not something else on the page. Across eight Arabic guides it was 20 of 22. * * `unicode-bidi: isolate` matters as much as `direction`: it stops the code run from * reordering the Arabic around it. Prose is fixed the other way, per-string with U+200E, so * nothing invisible ends up inside text a reader might copy. Scoped to [dir="rtl"] because a * left-to-right page is already correct and must not be touched. */ [dir="rtl"] .prose code, [dir="rtl"] .prose pre { direction: ltr; unicode-bidi: isolate; text-align: left; } /* ---------- cross-promo ---------- */ .promo { margin-top: 48px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; } /* --grass at 12px is 3.77:1 on the light ground — under the 4.5 this size needs. Measured, * not guessed; --grass-bright is the same hue as ink rather than as fill, and reads ~7:1. * The identical rule on .section-head h2 had the identical defect. */ .promo h2 { margin: 0 0 7px; font-size: 12px; font-weight: 700; letter-spacing: 1.68px; text-transform: uppercase; color: var(--grass-bright); } .promo > p { margin: 0 0 17px; color: var(--fg-muted); font-size: 14px; } .promo-row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } .promo-btn { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; text-decoration: none; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; font-weight: 600; transition: border-color 130ms, color 130ms, background 130ms; } .promo-btn:hover { border-color: var(--line-strong); color: var(--grass-bright); background: rgba(16,185,129,.06); } /* ---------- footer ---------- */ .site-foot { margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; } .site-foot a { color: var(--fg-muted); text-decoration: none; font-size: 13px; } .site-foot a:hover { color: var(--grass); } .site-foot .mojang { flex-basis: 100%; margin: 11px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--fg-dim); max-width: 96ch; } .pager { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin: 28px 0 0; } .pager a { text-decoration: none; } .pager a.tag:hover, .hero-stats a.tag:hover { border-color: var(--line-strong); color: var(--grass-bright); } .hero-stats a.tag { text-decoration: none; } /* RTL */ [dir="rtl"] .side { border-right: 0; border-left: 1px solid var(--line); } @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } :root.rail-off .side, :root:not(.rail-off) .side { display: flex; } .rail-open { display: none !important; } .mobile-bar { position: sticky; top: 0; z-index: 70; min-width: 0; height: 58px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface); background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); } .mobile-menu-btn, .mobile-theme { width: 36px; height: 36px; flex: none; padding: 0; cursor: pointer; color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 17px; } .mobile-brand { display: flex; align-items: center; flex: 1; min-width: 0; } .mobile-brand img { display: block; width: auto; max-width: 126px; height: 23px; } .mobile-bar select { width: 76px; height: 36px; min-width: 0; padding: 0 5px; color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 11.5px; } .mobile-scrim { display: block; position: fixed; inset: 0; z-index: 74; opacity: 0; pointer-events: none; background: rgba(8,15,25,.5); border: 0; transition: opacity 160ms ease; } .side { position: fixed; z-index: 75; inset-block: 0; inset-inline-start: 0; width: min(86vw, 310px); height: 100dvh; border-bottom: 0; transform: translateX(-105%); transition: transform 180ms ease; box-shadow: var(--drop); } [dir="rtl"] .side { transform: translateX(105%); } :root.mobile-menu-open .side { transform: translateX(0); } :root.mobile-menu-open .mobile-scrim { opacity: 1; pointer-events: auto; } :root.mobile-menu-open { overflow: hidden; } .rail-desktop-btn { display: none; } .rail-btn.rail-mobile-close { display: inline-flex; font-size: 20px; } .main { padding: 22px 16px 52px; } .hero h1, .prose h1 { font-size: 26px; } .home-hero { margin-top: 10px; padding: 18px 3px 35px; } .home-hero h1 { font-size: clamp(34px, 10vw, 47px); letter-spacing: -.045em; } .home-hero > p { font-size: 15px; line-height: 1.68; } .home-feature { grid-template-columns: 1fr; min-height: 0; border-radius: 18px; } .home-guide-art-large { min-height: 270px; } .home-feature-copy { padding: 27px 24px 30px; } .home-feature h2 { font-size: 25px; } .home-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-tools { padding: 24px; } } @media (max-width: 600px) { .mobile-bar { gap: 6px; padding-inline: 9px; } .mobile-brand img { max-width: 111px; height: 20px; } .mobile-bar select { width: 68px; } .home-kicker { margin-bottom: 18px; font-size: 10px; } .home-facts { gap: 6px; } .home-facts span { padding: 5px 8px; font-size: 11px; } .home-guide-art-large { min-height: 232px; } .home-guide-art-large .home-art-icon { width: 112px; height: 112px; } .home-topics { margin-top: 24px; } .home-topics > span { display: none; } .home-section { margin-top: 38px; } .home-section-head { align-items: center; } .home-section-head h2 { font-size: 21px; } .home-section-head a { max-width: 45%; text-align: end; } .home-guide-grid { grid-template-columns: 1fr; gap: 14px; } .home-guide-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); border-radius: 14px; } .home-guide-card .home-guide-art { min-height: 100%; } .home-guide-card .home-art-icon { width: 58px; height: 58px; } .home-guide-card .home-art-orbit-a { width: 100px; height: 100px; } .home-guide-card .home-art-orbit-b { width: 125px; height: 54px; } .home-guide-copy { padding: 16px 15px 17px; } .home-guide-copy .home-guide-meta { margin-bottom: 8px; font-size: 9px; } .home-guide-copy .home-guide-meta time { display: none; } .home-guide-copy h3 { margin-bottom: 7px; font-size: 15px; } .home-guide-copy > p:not(.home-guide-meta) { -webkit-line-clamp: 2; font-size: 12px; } .home-tools { margin-inline: -4px; padding: 20px 14px; border-radius: 17px; } .home-tool-grid { grid-template-columns: 1fr; } } /* ---------- generated command syntax ---------- * The complete argument paths from Mojang's command tree, under the fact line that counts * them. No heading: see syntaxBlock() in build.mjs for why that is deliberate. */ .tool-syntax { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; } .tool-syntax li { margin: 0; } .tool-syntax code { display: inline-block; max-width: 100%; overflow-x: auto; padding: 4px 9px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); /* An English command run inside an Arabic paragraph: the element is already dir="ltr" in the markup, and this keeps the box itself starting at the reading edge. */ text-align: start; white-space: pre; } /* ---------- generated data row (mob drops) ---------- * Values are Mojang's own item names in the reader's language; only the key is English, and * for the reason documented at dropsBlock() in build.mjs. */ .tool-data { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; } .tool-data-k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); margin-inline-end: 2px; } .tool-data-v { padding: 3px 9px; font-size: 12.5px; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }