.easy-layout-center, .easy-layout-section, .easy-layout-cover { display: flex; flex-direction: column; justify-content: center; } .easy-layout-center { align-items: center; text-align: center; } .easy-layout-center h1, .easy-layout-center h2 { text-align: center; } .easy-layout-cover h1 { margin-bottom: 28px; font-size: 68px; } .easy-layout-cover blockquote { border: 0; padding: 0; color: var(--easy-accent); } .easy-layout-section h1, .easy-layout-section h2 { max-width: 980px; } .easy-layout-quote { display: flex; flex-direction: column; justify-content: center; } .easy-layout-quote blockquote { border: 0; padding: 0; color: var(--easy-accent); font-size: 46px; line-height: 1.35; text-align: center; } .easy-layout-two-cols { display: grid; grid-template-rows: auto 1fr; } .easy-layout-two-cols .easy-two-cols-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; min-height: 0; } .easy-layout-image-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 42px; } .easy-layout-image-split.easy-image-left .easy-image-pane { order: -1; } .easy-layout-image-auto.easy-image-top, .easy-layout-image-auto.easy-image-bottom { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 22px; } .easy-layout-image-auto.easy-image-top .easy-image-pane { order: -1; } .easy-image-pane { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; overflow: hidden; border-radius: 8px; } .easy-image-pane img { min-width: 0; min-height: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; } .easy-content-scale-host { position: relative; min-width: 0; min-height: 0; } .easy-content-table-host { width: 100%; overflow: auto; } .easy-content-code-host { width: 100%; margin-bottom: 0 !important; } .easy-image-preview-trigger { cursor: zoom-in; } .easy-image-preview-trigger:focus-visible { outline: 3px solid var(--easy-accent); outline-offset: 4px; } .easy-image-lightbox { position: fixed; inset: 0; z-index: 2147483647; display: block; box-sizing: border-box; min-width: 0; min-height: 0; padding: clamp(16px, 4vmin, 42px) clamp(16px, 4vmin, 42px) clamp(86px, 12vmin, 112px); overflow: hidden; overscroll-behavior: contain; background: rgba(0, 0, 0, .92); } .easy-image-lightbox-viewport { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; user-select: none; } .easy-image-lightbox-viewport.easy-image-lightbox-pannable { cursor: grab; } .easy-image-lightbox-viewport.easy-image-lightbox-dragging { cursor: grabbing; } .easy-image-lightbox-preview { position: absolute; top: 50%; left: 50%; display: block; max-width: none; max-height: none; max-inline-size: none; max-block-size: none; margin: 0; transform-origin: 0 0; object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; } .easy-image-lightbox-close { position: absolute; z-index: 2; top: 18px; right: 22px; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; padding: 0 0 4px; font: 300 38px/1 Arial, sans-serif; cursor: pointer; } .easy-image-lightbox-close:hover, .easy-image-lightbox-close:focus-visible { border-color: #fff; background: var(--easy-accent); outline: none; } .easy-image-scale-toolbar { position: absolute; z-index: 2; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 52px minmax(76px, auto) 52px; align-items: center; padding: 6px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 999px; background: rgba(250, 250, 250, .96); box-shadow: 0 12px 36px rgba(0, 0, 0, .32); color: #202124; transform: translateX(-50%); backdrop-filter: blur(12px); } .easy-image-scale-button { display: grid; width: 46px; height: 46px; place-items: center; border: 0; border-radius: 50%; background: #e4e5e7; color: #202124; padding: 0 0 3px; font: 300 34px/1 Arial, sans-serif; cursor: pointer; } .easy-image-scale-button:hover, .easy-image-scale-button:focus-visible { background: var(--easy-accent); color: #fff; outline: none; } .easy-image-scale-button:disabled { color: #9aa0a6; cursor: not-allowed; opacity: .55; } .easy-image-scale-value { min-width: 76px; padding: 0 10px; text-align: center; font: 500 20px/1 Lato, "Noto Sans SC", sans-serif; font-variant-numeric: tabular-nums; } .easy-content-scale-toolbar { position: absolute; top: 8px; right: 8px; z-index: 30; display: flex; gap: 3px; padding: 4px; border: 1px solid rgba(180, 180, 180, .9); border-radius: 7px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); opacity: 0; transition: opacity .14s ease; } .easy-content-scale-host:hover > .easy-content-scale-toolbar, .easy-content-scale-host:focus-within > .easy-content-scale-toolbar { opacity: 1; } .easy-content-scale-button { min-width: 32px; border: 0; border-radius: 5px; background: #eee; color: #222; padding: 6px 8px; font: 600 14px/1 Lato, "Noto Sans SC", sans-serif; cursor: pointer; } .easy-content-scale-button:hover, .easy-content-scale-button:focus-visible { background: var(--easy-accent); color: #fff; outline: none; } .easy-content-scale-reset { min-width: 52px; } .easy-content-code-host > .easy-content-scale-toolbar { right: 48px; } body.easy-slide-scroll-fallback .slidev-layout { overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--easy-accent) 65%, transparent) transparent; } .easy-image-content { min-width: 0; align-self: center; } .easy-layout-image-full { padding: 0; } .easy-layout-image-full > img { width: 100%; height: 100%; max-height: none; margin: 0; } .easy-layout-image-full .easy-image-overlay { position: absolute; inset: auto 0 0; padding: 46px 54px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff; } .easy-layout-image-full .easy-image-overlay :is(h1, h2, h3, p) { color: inherit; } @media (max-aspect-ratio: 4 / 3) { .easy-layout-two-cols .easy-two-cols-grid, .easy-layout-image-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 22px; } } @media (hover: none) { .easy-content-scale-toolbar { opacity: .78; } } @media (max-width: 520px) { .easy-image-lightbox { padding: 14px 14px calc(84px + env(safe-area-inset-bottom)); } .easy-image-lightbox-close { top: 12px; right: 12px; width: 42px; height: 42px; } .easy-image-scale-toolbar { bottom: max(12px, env(safe-area-inset-bottom)); grid-template-columns: 48px minmax(68px, auto) 48px; padding: 5px; } .easy-image-scale-button { width: 42px; height: 42px; } .easy-image-scale-value { min-width: 68px; font-size: 18px; } } @media print { .easy-content-scale-toolbar, .easy-image-lightbox { display: none !important; } body.easy-slide-scroll-fallback .slidev-layout { overflow: hidden !important; } }