mkdnsite 1.0.1 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mkdnsite",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Markdown for the web. HTML for humans, Markdown for agents.",
   "type": "module",
   "main": "src/index.ts",
@@ -48,9 +48,11 @@
   ],
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.27.1",
+    "@types/picomatch": "^4.0.2",
     "gray-matter": "^4.0.3",
     "katex": "^0.16.38",
     "lucide-react": "^0.577.0",
+    "picomatch": "^4.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^9.0.0",

package/src/adapters/cloudflare.ts

@@ -65,7 +65,11 @@ export class CloudflareAdapter implements DeploymentAdapter {
         ref: this.env.GITHUB_REF,
         token: this.env.GITHUB_TOKEN
       }
-      return new GitHubSource(ghConfig)
+      return new GitHubSource({
+        ...ghConfig,
+        include: config.include,
+        exclude: config.exclude
+      })
     }
 
     // R2 source: explicit CONTENT_SOURCE=r2 or CONTENT_BUCKET binding present
@@ -139,6 +143,54 @@ export class CloudflareAdapter implements DeploymentAdapter {
     if (this.env.ANALYTICS == null) return undefined
     return new WorkersAnalyticsEngineAnalytics(this.env.ANALYTICS)
   }
+
+  /**
+   * Create a static file handler backed by an R2 bucket.
+   *
+   * When a `STATIC_BUCKET` binding is present in the Worker environment, this
+   * method returns a `staticHandler` function that reads static assets (images,
+   * fonts, CSS, etc.) from R2. Pass the result to `createHandler` via the
+   * `staticHandler` option:
+   *
+   * ```ts
+   * const handler = createHandler({
+   *   source: adapter.createContentSource(config),
+   *   renderer: await adapter.createRenderer(config),
+   *   config,
+   *   staticHandler: adapter.createStaticHandler()
+   * })
+   * ```
+   *
+   * Returns `undefined` when no `STATIC_BUCKET` binding is configured, so
+   * callers can pass the result unconditionally — `createHandler` ignores
+   * `undefined` staticHandler values.
+   *
+   * The handler strips the leading `/` from the pathname before fetching from
+   * R2 (e.g. `/logo.png` → key `logo.png`). Returns `null` for missing objects
+   * so the request falls through to the built-in `serveStatic` or a 404.
+   */
+  createStaticHandler (): ((pathname: string) => Promise<Response | null>) | undefined {
+    const bucket = this.env.STATIC_BUCKET
+    if (bucket == null) return undefined
+
+    return async (pathname: string): Promise<Response | null> => {
+      const key = pathname.replace(/^\//, '')
+      const obj = await bucket.get(key)
+      if (obj == null) return null
+
+      const ext = key.split('.').pop() ?? ''
+      const contentType = MIME_TYPES[ext] ?? 'application/octet-stream'
+      const body = await obj.text()
+
+      return new Response(body, {
+        status: 200,
+        headers: {
+          'Content-Type': contentType,
+          'Cache-Control': 'public, max-age=31536000, immutable'
+        }
+      })
+    }
+  }
 }
 
 /**
@@ -203,6 +255,9 @@ export interface CloudflareEnv {
   /** KV namespace for caching (future use) */
   CACHE_KV?: KVNamespace
 
+  /** R2 bucket for serving static assets (images, fonts, CSS, etc.) */
+  STATIC_BUCKET?: R2Bucket
+
   /** GitHub owner (used if config.github not set) */
   GITHUB_OWNER?: string
   /** GitHub repo (used if config.github not set) */
@@ -224,6 +279,25 @@ export interface CloudflareEnv {
   ANALYTICS?: AnalyticsEngineDataset
 }
 
+// ─── Static asset MIME type map ──────────────────────────────────────────────
+const MIME_TYPES: Record<string, string> = {
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  svg: 'image/svg+xml',
+  ico: 'image/x-icon',
+  css: 'text/css; charset=utf-8',
+  js: 'text/javascript; charset=utf-8',
+  woff: 'font/woff',
+  woff2: 'font/woff2',
+  ttf: 'font/ttf',
+  otf: 'font/otf',
+  pdf: 'application/pdf',
+  json: 'application/json'
+}
+
 // ─── Cloudflare R2 type stubs ─────────────────────────────────────────────────
 // These types are provided by the CF Workers runtime; stubs here for type-checking
 // in non-CF environments.

package/src/adapters/local.ts

@@ -18,9 +18,16 @@ export class LocalAdapter implements DeploymentAdapter {
 
   createContentSource (config: MkdnSiteConfig): ContentSource {
     if (config.github != null) {
-      return new GitHubSource(config.github)
+      return new GitHubSource({
+        ...config.github,
+        include: config.include,
+        exclude: config.exclude
+      })
     }
-    return new FilesystemSource(config.contentDir)
+    return new FilesystemSource(config.contentDir, {
+      include: config.include,
+      exclude: config.exclude
+    })
   }
 
   async createRenderer (config: MkdnSiteConfig): Promise<MarkdownRenderer> {
@@ -154,8 +161,10 @@ export class LocalAdapter implements DeploymentAdapter {
 
     row('Runtime', `local (${this.name})`)
     if (config.github != null) {
-      const ref = config.github.ref ?? 'main'
-      row('GitHub', `${config.github.owner}/${config.github.repo}@${ref}`)
+      const owner: string = config.github.owner
+      const repo: string = config.github.repo
+      const ref: string = config.github.ref ?? 'main'
+      row('GitHub', `${owner}/${repo}@${ref}`)
     } else {
       row('Content', config.contentDir)
     }

package/src/cli.ts

@@ -147,6 +147,14 @@ export function parseArgs (args: string[]): ParsedArgs {
       result.renderer = args[++i]
     } else if (arg === '--static') {
       result.staticDir = resolve(args[++i])
+    } else if (arg === '--include') {
+      const patterns = (result.include as string[] | undefined) ?? []
+      patterns.push(args[++i])
+      result.include = patterns
+    } else if (arg === '--exclude') {
+      const patterns = (result.exclude as string[] | undefined) ?? []
+      patterns.push(args[++i])
+      result.exclude = patterns
     } else if (arg === '--help' || arg === '-h') {
       printHelp()
       process.exit(0)
@@ -179,6 +187,8 @@ ${section('Server:')}
 ${flag('-p, --port <n>', 'Port to listen on (default: 3000)')}
 ${flag('--config <path>', 'Path to config file (default: mkdnsite.config.ts)')}
 ${flag('--static <dir>', 'Directory for static assets')}
+${flag('--include <pattern>', 'Glob pattern to include (repeatable, e.g. docs/**)')}
+${flag('--exclude <pattern>', 'Glob pattern to exclude (repeatable, e.g. **/*.draft.md)')}
 ${section('Site:')}
 ${flag('--title <text>', 'Site title')}
 ${flag('--url <url>', 'Base URL for absolute links')}

package/src/client/scripts.ts

@@ -9,6 +9,7 @@ export function CLIENT_SCRIPTS (client: ClientConfig): string {
 
   const scripts: string[] = []
 
+  scripts.push(NAV_TOGGLE_SCRIPT)
   scripts.push(STICKY_TABLE_SCRIPT)
 
   if (client.themeToggle) {
@@ -37,6 +38,31 @@ export function CLIENT_SCRIPTS (client: ClientConfig): string {
   return `<script>${scripts.join('\n')}</script>`
 }
 
+const NAV_TOGGLE_SCRIPT = `
+(function(){
+  var toggle = document.querySelector('.mkdn-nav-toggle');
+  var nav = document.querySelector('.mkdn-nav');
+  var backdrop = document.querySelector('.mkdn-nav-backdrop');
+  if (!toggle || !nav) return;
+  function open() {
+    nav.classList.add('mkdn-nav--open');
+    if (backdrop) backdrop.classList.add('mkdn-nav-backdrop--visible');
+    toggle.setAttribute('aria-expanded', 'true');
+  }
+  function close() {
+    nav.classList.remove('mkdn-nav--open');
+    if (backdrop) backdrop.classList.remove('mkdn-nav-backdrop--visible');
+    toggle.setAttribute('aria-expanded', 'false');
+  }
+  toggle.addEventListener('click', function() {
+    nav.classList.contains('mkdn-nav--open') ? close() : open();
+  });
+  if (backdrop) backdrop.addEventListener('click', close);
+  nav.addEventListener('click', function(e) {
+    if (e.target && e.target.closest && e.target.closest('a')) close();
+  });
+})();`
+
 const THEME_TOGGLE_SCRIPT = `
 (function(){
   var btn = document.querySelector('.mkdn-theme-toggle');

package/src/config/defaults.ts

@@ -106,6 +106,8 @@ export function resolveConfig (
     llmsTxt: { ...DEFAULT_CONFIG.llmsTxt, ...userConfig.llmsTxt },
     client: { ...DEFAULT_CONFIG.client, ...userConfig.client },
     github: userConfig.github,
+    include: userConfig.include,
+    exclude: userConfig.exclude,
     mcp: { ...DEFAULT_CONFIG.mcp, ...userConfig.mcp },
     analytics: userConfig.analytics != null
       ? {

package/src/config/schema.ts

@@ -42,6 +42,20 @@ export interface MkdnSiteConfig {
   /** Static files directory for images, videos, etc. */
   staticDir?: string
 
+  /**
+   * Glob patterns to include. Only matching files will be served.
+   * Mutually exclusive with `exclude` — define one or the other, not both.
+   * e.g. ['docs', 'guides/*.md']
+   */
+  include?: string[]
+
+  /**
+   * Glob patterns to exclude. Matching files will not be served.
+   * Mutually exclusive with `include` — define one or the other, not both.
+   * e.g. ['private', '*.draft.md']
+   */
+  exclude?: string[]
+
   /** GitHub repository source (alternative to local contentDir) */
   github?: import('../content/types.ts').GitHubSourceConfig
 

package/src/content/filesystem.ts

@@ -1,16 +1,41 @@
 import { readdir, readFile, stat } from 'node:fs/promises'
 import { join, relative, extname, basename, dirname } from 'node:path'
+import picomatch from 'picomatch'
 import { parseFrontmatter } from './frontmatter.ts'
 import type { ContentSource, ContentPage, NavNode } from './types.ts'
 
+export interface FilesystemSourceOptions {
+  /** Glob patterns to include. Only matching files will be served. Mutually exclusive with exclude. */
+  include?: string[]
+  /** Glob patterns to exclude. Matching files will not be served. Mutually exclusive with include. */
+  exclude?: string[]
+}
+
 export class FilesystemSource implements ContentSource {
   private readonly rootDir: string
   private readonly cache = new Map<string, ContentPage>()
   private navCache: NavNode | null = null
   private allPagesCache: ContentPage[] | null = null
+  private readonly includeMatcher: picomatch.Matcher | null
+  private readonly excludeMatcher: picomatch.Matcher | null
 
-  constructor (rootDir: string) {
+  constructor (rootDir: string, opts: FilesystemSourceOptions = {}) {
     this.rootDir = rootDir
+    this.includeMatcher = opts.include != null && opts.include.length > 0
+      ? picomatch(opts.include)
+      : null
+    this.excludeMatcher = opts.exclude != null && opts.exclude.length > 0
+      ? picomatch(opts.exclude)
+      : null
+  }
+
+  /** Returns true if a relative path should be served, based on include/exclude patterns. */
+  private shouldInclude (relPath: string): boolean {
+    // Normalise to forward slashes for consistent glob matching
+    const p = relPath.replace(/\\/g, '/')
+    if (this.includeMatcher != null) return this.includeMatcher(p)
+    if (this.excludeMatcher != null) return !this.excludeMatcher(p)
+    return true
   }
 
   async getPage (slug: string): Promise<ContentPage | null> {
@@ -42,6 +67,10 @@ export class FilesystemSource implements ContentSource {
         const parsed = parseFrontmatter(raw)
         const fileStat = await stat(filePath)
 
+        // Check include/exclude patterns against relative path
+        const relPath = relative(this.rootDir, filePath)
+        if (!this.shouldInclude(relPath)) return null
+
         const page: ContentPage = {
           slug: `/${normalized === 'index' ? '' : normalized}`,
           sourcePath: filePath,
@@ -101,6 +130,9 @@ export class FilesystemSource implements ContentSource {
         await this.walkDir(fullPath, pages)
       } else if (entry.isFile() && extname(entry.name) === '.md') {
         const relPath = relative(this.rootDir, fullPath)
+
+        if (!this.shouldInclude(relPath)) continue
+
         const slug = this.filePathToSlug(relPath)
 
         try {
@@ -189,6 +221,9 @@ export class FilesystemSource implements ContentSource {
         entry.name !== 'README.md' &&
         entry.name !== 'readme.md'
       ) {
+        const relPath = relative(this.rootDir, fullPath)
+        if (!this.shouldInclude(relPath)) continue
+
         const raw = await readFile(fullPath, 'utf-8')
         const parsed = parseFrontmatter(raw)
 

package/src/content/github.ts

@@ -1,3 +1,4 @@
+import picomatch from 'picomatch'
 import { parseFrontmatter } from './frontmatter.ts'
 import type {
   ContentSource,
@@ -37,11 +38,13 @@ interface ParsedFile {
  * - raw.githubusercontent.com: no documented rate limit (generous)
  */
 export class GitHubSource implements ContentSource {
-  private readonly config: Required<GitHubSourceConfig>
+  private readonly config: Required<Omit<GitHubSourceConfig, 'include' | 'exclude'>>
   private readonly pageCache = new Map<string, CacheEntry<ContentPage | null>>()
   private navCache: CacheEntry<NavNode> | null = null
   private treeCache: CacheEntry<GitHubTreeEntry[]> | null = null
   private prefetchPromise: Promise<void> | null = null
+  private readonly includeMatcher: picomatch.Matcher | null
+  private readonly excludeMatcher: picomatch.Matcher | null
 
   constructor (config: GitHubSourceConfig) {
     this.config = {
@@ -51,6 +54,20 @@ export class GitHubSource implements ContentSource {
       path: config.path ?? '',
       token: config.token ?? ''
     }
+    this.includeMatcher = config.include != null && config.include.length > 0
+      ? picomatch(config.include)
+      : null
+    this.excludeMatcher = config.exclude != null && config.exclude.length > 0
+      ? picomatch(config.exclude)
+      : null
+  }
+
+  /** Returns true if a relative file path should be served, based on include/exclude patterns. */
+  private shouldInclude (relPath: string): boolean {
+    const p = relPath.replace(/\\/g, '/')
+    if (this.includeMatcher != null) return this.includeMatcher(p)
+    if (this.excludeMatcher != null) return !this.excludeMatcher(p)
+    return true
   }
 
   async getPage (slug: string): Promise<ContentPage | null> {
@@ -119,7 +136,11 @@ export class GitHubSource implements ContentSource {
 
   private async prefetchAll (): Promise<void> {
     const tree = await this.fetchRepoTree()
-    const mdFiles = tree.filter(e => e.type === 'blob' && e.path.endsWith('.md'))
+    const mdFiles = tree.filter(e =>
+      e.type === 'blob' &&
+      e.path.endsWith('.md') &&
+      this.shouldInclude(e.path)
+    )
 
     // Fetch all file contents in parallel
     const fetched = await Promise.all(
@@ -167,6 +188,9 @@ export class GitHubSource implements ContentSource {
           ]
 
     for (const filePath of candidates) {
+      // Respect include/exclude patterns before fetching
+      if (!this.shouldInclude(filePath)) return null
+
       const raw = await this.fetchFile(filePath)
       if (raw != null) {
         const { meta, body } = parseFrontmatter(raw)

package/src/content/types.ts

@@ -83,4 +83,14 @@ export interface GitHubSourceConfig {
   path?: string
   /** GitHub personal access token (for private repos or higher rate limits) */
   token?: string
+  /**
+   * Glob patterns to include. Only matching files will be served.
+   * Mutually exclusive with `exclude`.
+   */
+  include?: string[]
+  /**
+   * Glob patterns to exclude. Matching files will not be served.
+   * Mutually exclusive with `include`.
+   */
+  exclude?: string[]
 }

package/src/handler.ts

@@ -43,6 +43,15 @@ export interface HandlerOptions {
    * When set, requests without `Authorization: Bearer <refreshToken>` are rejected with 401.
    */
   refreshToken?: string
+  /**
+   * Optional custom static file handler.
+   * When provided, this function is called instead of the built-in filesystem-based
+   * serveStatic for requests matching static file extensions.
+   * Return a Response to serve it, or null to fall through to the built-in serveStatic
+   * (if config.staticDir is set) or ultimately a 404.
+   * Use this for non-filesystem deployments (R2, S3, KV, GitHub API, etc.).
+   */
+  staticHandler?: (pathname: string) => Promise<Response | null>
 }
 
 /**
@@ -57,7 +66,7 @@ export interface HandlerOptions {
  * - Deno.serve()
  */
 export function createHandler (opts: HandlerOptions): (request: Request) => Promise<Response> {
-  const { source, renderer, config, analytics, siteId, contentCache, responseCache, refreshToken } = opts
+  const { source, renderer, config, analytics, siteId, contentCache, responseCache, refreshToken, staticHandler } = opts
 
   let llmsTxtCache: string | null = null
   let mcpHandlerFn: ((req: Request) => Promise<Response>) | null = null
@@ -150,7 +159,7 @@ export function createHandler (opts: HandlerOptions): (request: Request) => Prom
     response: Response
   ): AnalyticsResponseFormat {
     // MCP: check endpoint first (MCP responses may have various Content-Types)
-    const mcpEndpoint = config.mcp.endpoint ?? '/mcp'
+    const mcpEndpoint: string = config.mcp.endpoint ?? '/mcp'
     if (
       config.mcp.enabled &&
       (pathname === mcpEndpoint || pathname.startsWith(mcpEndpoint + '/'))
@@ -260,18 +269,24 @@ export function createHandler (opts: HandlerOptions): (request: Request) => Prom
     }
 
     // ---- MCP endpoint ----
+    const mcpPath: string = config.mcp.endpoint ?? '/mcp'
     if (
       config.mcp.enabled &&
-      (pathname === (config.mcp.endpoint ?? '/mcp') ||
-        pathname.startsWith((config.mcp.endpoint ?? '/mcp') + '/'))
+      (pathname === mcpPath || pathname.startsWith(mcpPath + '/'))
     ) {
       const mcp = await ensureMcpHandler()
       return ok(await mcp(request))
     }
 
     // ---- Static files passthrough ----
-    if (config.staticDir != null && hasStaticExtension(pathname)) {
-      return ok(await serveStatic(pathname, config.staticDir))
+    if (hasStaticExtension(pathname)) {
+      if (staticHandler != null) {
+        const staticResponse = await staticHandler(pathname)
+        if (staticResponse != null) return ok(staticResponse)
+      }
+      if (config.staticDir != null) {
+        return ok(await serveStatic(pathname, config.staticDir))
+      }
     }
 
     // ---- Content negotiation + page serving ----

package/src/render/page-shell.ts

@@ -95,6 +95,7 @@ export function renderPage (props: PageShellProps): string {
 <body>
   ${searchTriggerHtml}
   ${themeToggleHtml}
+  ${navHtml !== '' ? '<button class=\'mkdn-nav-toggle\' type=\'button\' aria-label=\'Toggle navigation\' aria-expanded=\'false\'><svg xmlns=\'http://www.w3.org/2000/svg\' width=\'18\' height=\'18\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M4 12h16\'/><path d=\'M4 6h16\'/><path d=\'M4 18h16\'/></svg></button><div class=\'mkdn-nav-backdrop\'></div>' : ''}
   <div class="mkdn-layout">
     ${navHtml !== '' ? `<nav class="mkdn-nav" aria-label="Site navigation">${navHtml}</nav>` : ''}
     <main class="mkdn-main">

package/src/theme/base-css.ts

@@ -460,14 +460,83 @@ body {
 .mkdn-mermaid { margin: 1em 0; text-align: center; }
 .mkdn-mermaid svg { max-width: 100%; }
 
+.mkdn-nav-toggle { display: none; }
+.mkdn-nav-backdrop { display: none; }
+
 @media (max-width: 768px) {
   .mkdn-layout { flex-direction: column; }
   .mkdn-nav {
-    position: static; width: 100%; height: auto;
-    border-right: none; border-bottom: 1px solid var(--mkdn-border);
-    padding: 1rem 0;
+    position: fixed; top: 0; left: 0;
+    width: 280px; height: 100vh;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    z-index: 900;
+    border-right: 1px solid var(--mkdn-border);
+    border-bottom: none;
+  }
+  .mkdn-nav.mkdn-nav--open { transform: translateX(0); }
+  .mkdn-nav-backdrop {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
+    z-index: 899; display: none;
+  }
+  .mkdn-nav-backdrop--visible { display: block; }
+  .mkdn-nav-toggle {
+    display: flex; position: fixed; top: 0.75rem; left: 0.75rem;
+    z-index: 200; width: 36px; height: 36px;
+    align-items: center; justify-content: center;
+    background: var(--mkdn-bg-alt); border: 1px solid var(--mkdn-border);
+    border-radius: 8px; cursor: pointer; color: var(--mkdn-text-muted);
+    transition: color 0.15s, background 0.15s;
+  }
+  .mkdn-nav-toggle:hover { color: var(--mkdn-text); background: var(--mkdn-code-bg); }
+  .mkdn-main { padding: 1.5rem 1rem; padding-top: 3.5rem; }
+  .mkdn-theme-toggle { top: 0.75rem; right: 0.75rem; }
+  .mkdn-search-trigger { right: 3rem; }
+  .mkdn-prev-next { flex-direction: column; }
+  .mkdn-prev-next a { max-width: 100%; font-size: 0.8rem; }
+
+  /* Scale down base font — everything using rem shrinks proportionally */
+  html { font-size: 14px; }
+
+  /* Tighter prose headings on mobile */
+  .mkdn-prose h1 { font-size: 1.75rem; }
+  .mkdn-prose h2 { font-size: 1.5rem; margin-top: 1.75rem; }
+  .mkdn-prose h3 { font-size: 1.25rem; margin-top: 1.5rem; }
+  .mkdn-prose h4 { font-size: 1.1rem; }
+
+  /* Constrain wide elements to viewport width */
+  .mkdn-prose pre,
+  .mkdn-code-block,
+  .mkdn-chart { max-width: calc(100vw - 2rem); }
+
+  /* Tighter code block padding on mobile */
+  .mkdn-prose pre { padding: 0.75rem; font-size: 0.8rem; }
+
+  /* Ensure images don't overflow */
+  .mkdn-prose img { max-width: 100%; height: auto; }
+
+  /* Smaller page title on mobile */
+  .mkdn-page-title { font-size: 1.75rem; }
+
+  /* Move heading anchors to the right on mobile — avoids left-side overflow */
+  .mkdn-prose a.mkdn-heading-anchor {
+    margin-left: 0;
+    margin-right: 0;
+    float: right;
+    padding-left: 0.3em;
+    padding-right: 0;
+    opacity: 0.5;
+  }
+
+  /* Top padding so first article content isn't hidden behind fixed hamburger */
+  .mkdn-article { padding-top: 0.5rem; }
+
+  /* Heading anchor scroll offset accounts for fixed hamburger button height */
+  .mkdn-prose h1 { scroll-margin-top: 4.5rem; }
+  .mkdn-prose h2, .mkdn-prose h3,
+  .mkdn-prose h4, .mkdn-prose h5, .mkdn-prose h6 {
+    scroll-margin-top: 3.5rem;
   }
-  .mkdn-main { padding: 1.5rem 1rem; }
 }
 
 /* ---- Search trigger button ---- */
@@ -560,10 +629,11 @@ body {
 }
 
 @media (max-width: 640px) {
-  .mkdn-search-overlay { padding-top: 0; align-items: flex-end; }
+  .mkdn-search-overlay { padding-top: 4vh; align-items: flex-start; }
   .mkdn-search-modal {
-    max-width: 100%; border-radius: 12px 12px 0 0;
-    max-height: 70vh;
+    max-width: 100%; border-radius: 12px;
+    max-height: 80vh;
+    margin: 0 0.5rem;
   }
   .mkdn-search-trigger { right: 3rem; }
 }