org_roam/assets/styles/media.css

/* =========================================================
   MEDIA.CSS — responsive overrides for the sidebar+tab layout
   This file replaces the old float-based media queries.
   Load it AFTER style.css.
   ========================================================= */

/* =========================================================
   SIDENOTES / MARGINNOTES — base styles
   ========================================================= */

.sidenote,
.marginnote {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--fg-dim);
  font-family: var(--font-serif);
  font-style: italic;
}

/* =========================================================
   CUSTOM SCROLLBARS — themed throughout
   ========================================================= */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-mid);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fg-faint);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* =========================================================
   1200px — content column is narrow enough to collapse sidenotes
   ========================================================= */

@media (max-width: 1200px) {
  .sidenote,
  .marginnote {
    float: none;
    clear: both;
    width: auto;
    display: block;
    margin: 0.5rem 0 0.75rem;
    padding-left: 0.75rem;
    border-left: 3px dotted color-mix(in oklab, var(--fg) 12%, transparent);
    margin-right: 0;
    border-radius: 0;
  }

  .sidenote .mn-img,
  .marginnote .mn-img {
    border-color: color-mix(in oklab, var(--fg) 12%, transparent);
  }

  .fullwidth {
    max-width: calc(100vw - var(--sidebar-w) - 4rem);
  }

  #table-of-contents {
    float: none;
    position: static;
    width: auto;
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border-right: 0;
    border-left: 3px dotted color-mix(in oklab, var(--fg) 12%, transparent);
    background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
    border-radius: 4px;
  }
}

/* =========================================================
   900px — auto-hide sidebar (collapses to 0 width)
   ========================================================= */

@media (max-width: 900px) {
  #sidebar {
    width: 0;
    border-right: none;
    overflow: hidden;
  }

  .fullwidth {
    max-width: calc(100vw - 2rem);
  }
}

/* =========================================================
   768px — MOBILE: full single-column, overlay sidebar drawer
   ========================================================= */

@media (max-width: 768px) {

  /* Allow body to scroll normally */
  html, body {
    overflow: auto;
    height: auto;
  }

  body {
    min-height: 100dvh;
    height: auto;
  }

  /* ---- Header ---- */
  #preamble {
    height: auto;
    position: sticky;
    top: 0;
    z-index: 300;
  }

  .banner-header {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    height: auto;
    min-height: var(--header-h);
  }

  .banner-left {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
  }

  .banner-logo {
    height: 26px;
    width: 26px;
  }

  #updated { display: none; }
  nav      { display: none; }
  .web-logo { display: none; }

  .banner-search {
    order: 3;
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }

  .banner-actions {
    margin-left: 0;
    flex-shrink: 0;
  }

  /* ---- Layout ---- */
  #layout-body {
    flex-direction: column;
    overflow: visible;
    position: relative;
  }

  /* ---- Sidebar overlay drawer ---- */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 80vw;
    max-width: 300px;
    height: 100dvh;
    z-index: 400;
    border-right: 1px solid var(--border-mid);
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(-100%);
    transition: transform var(--dur-mid) var(--ease-out),
                box-shadow var(--dur-mid) var(--ease-out);
    box-shadow: none;
  }

  #sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
  }

  /* Dimmed backdrop — clicking it closes the sidebar */
  #sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 390;
    cursor: pointer;
  }

  #sidebar-backdrop.visible {
    display: block;
  }

  /* ---- Main ---- */
  #main {
    width: 100%;
    min-height: calc(100dvh - var(--header-h));
  }

  #tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Content area ---- */
  #content-area {
    overflow: visible;
    height: auto;
    min-height: calc(100dvh - var(--header-h) - var(--tab-h));
    background-attachment: scroll;
  }

  #content-area::before {
    display: none;
  }

  /* ---- Note content ---- */
  #content,
  .tab-content-inner {
    padding: 1.25rem 1rem 4rem;
  }

  .title-section {
    padding: 1rem;
    border-radius: 6px;
  }

  .title-section .title {
    font-size: 1.2rem;
  }

  .sidenote,
  .marginnote {
    float: none;
    clear: both;
    width: auto;
    display: block;
    margin: 0.4rem 0 0.6rem;
    padding-left: 0.6rem;
    border-left: 3px dotted color-mix(in oklab, var(--fg) 12%, transparent);
    font-size: 0.75rem;
  }

  .fullwidth {
    max-width: calc(100vw - 2rem);
  }

  #table-of-contents {
    float: none;
    position: static;
    width: auto;
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border-right: 0;
    border-left: 3px dotted color-mix(in oklab, var(--fg) 12%, transparent);
    background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
    border-radius: 4px;
    font-size: 0.85rem;
  }

  /* ---- Footer ---- */
  #postamble,
  footer {
    padding: 0.75rem 1rem;
    font-size: 0.68rem;
  }

  /* ---- Code blocks ---- */
  pre.src,
  .org-src-container > pre {
    font-size: 0.78rem;
  }

  /* ---- Tabs ---- */
  .tab {
    min-width: 70px;
    padding: 0 8px 0 10px;
    font-size: 0.68rem;
  }
}

/* =========================================================
   400px — very small phones
   ========================================================= */

@media (max-width: 400px) {
  .banner-header {
    padding: 0.4rem 0.75rem;
  }

  #content,
  .tab-content-inner {
    padding: 1rem 0.75rem 3rem;
  }

  .tab {
    min-width: 60px;
    font-size: 0.65rem;
  }
}