/* ========================================================= QUICK TWEAKING GUIDE PHONE IMAGE SIZE CONTROLS: - 320px: search "320PX IMAGE SIZE KNOB" - 321-375px: search "321-375PX IMAGE SIZE KNOB" - 376-425px: search "376-425PX IMAGE SIZE KNOB" - 426-768px: search "426-768PX IMAGE SIZE KNOB" - samplepages image: search "SAMPLE IMAGE" - company store image: search "COMPANY STORE" - NewLogo-big image: search "NEW LOGO" IMPORTANT: Dedicated image sections below control special artwork independently. Use the labeled knobs for the image you want to change. UNIT CHEAT SHEET: px = fixed pixels % = percentage of parent container vw = percentage of browser/screen width 50vw = half the viewport width 25vw = one quarter of the viewport width ========================================================= */ /* ========================================================= IBOX PUBLISHING phone_and_tablet.css Responsive compatibility layer for phones and tablets. This file is intentionally conservative. ========================================================= */ /* --------------------------------------------------------- GENERAL SAFETY RULES --------------------------------------------------------- */ /* Do not allow ordinary images to spill wider than the space available to them. */ img { /* GENERAL IMAGE SAFETY: Never let a normal image overflow the box containing it. */ max-width: 100%; /* Preserve the image's natural proportions when its width changes. */ height: auto; } /* Keep embedded video and similar framed content from forcing the page wider than the screen. */ iframe { /* Prevent YouTube / embedded frames from forcing the page wider than the phone screen. */ max-width: 100%; } /* --------------------------------------------------------- PHONE / TABLET RULES --------------------------------------------------------- */ @media screen and (max-width: 800px) { /* Allow old table-based layout elements to shrink instead of forcing the browser wider than the screen. */ table { max-width: 100%; } /* The old front page uses fixed-height preview windows with overflow:hidden. On a narrow screen, allow those areas to expand naturally instead of clipping content. */ div[style*="overflow: hidden"] { height: auto; overflow: visible; } /* ----------------------------------------------------- MAIN PAGE COLUMN ORDER Desktop keeps the original three-column layout. On phones/tablets, stack the three main columns: 1. comics / primary content 2. "What is?" / information sidebar 3. store / sales sidebar ----------------------------------------------------- */ .ibox-main-layout > tbody > tr { /* PHONE COLUMN STACKING: Turn the old 3-column desktop row into a vertical stack. */ display: flex; flex-direction: column; width: 100%; } .ibox-main-layout > tbody > tr > td { display: block; width: 100%; max-width: 100%; box-sizing: border-box; } /* PHONE STACK ORDER: 1 = comic/content 2 = "What is...?" / info column 3 = store / sales column */ .ibox-content-column { order: 1; } .ibox-info-column { order: 2; } .ibox-store-column { order: 3; } /* ----------------------------------------------------- COMIC NAVIGATION BUTTONS Larger touch targets for phones and tablets. Desktop button appearance remains unchanged. ----------------------------------------------------- */ .tkback, .tknext, .jennyback, .jennynext { min-height: 48px; min-width: 96px; padding: 10px 16px; margin: 6px; font-size: 18px; line-height: 1.2; } } /* --------------------------------------------------------- T&K BANNER Keep a small amount of breathing room around tkbanner600 when the content column becomes narrower than the image. --------------------------------------------------------- */ img[src$="tkbanner600.jpg"] { display: block; max-width: calc(100% - 16px); height: auto; margin-left: auto; margin-right: auto; } /* --------------------------------------------------------- MAIN INDEX COMIC PREVIEWS Keep a small amount of breathing room around the T&K and Jenny preview strips when their frame becomes narrow. --------------------------------------------------------- */ #TKvisiblestrip, #JMvisiblestrip { display: block; max-width: calc(100% - 16px); height: auto; margin-left: auto; margin-right: auto; } /* --------------------------------------------------------- SITE HEADER / MAIN LOGO Explicit header wrapper prevents the logo from inheriting geometry from the legacy main-page table structure. --------------------------------------------------------- */ .ibox-site-header { width: 100%; text-align: center; } .ibox-site-header > a { display: block; width: 100%; } .ibox-site-logo { /* DESKTOP LOGO SIZE. */ display: block; /* <-- change this if you want a larger desktop logo */ height: auto; margin-left: auto; margin-right: auto; } @media screen and (max-width: 800px) { .ibox-site-header .ibox-site-logo { /* Presentation only. Width is controlled by the dedicated NewLogo-big.jpg controls below. */ display: block; height: auto; margin-left: auto; margin-right: auto; } .ibox-site-header img[src$="spacer2.jpg"] { display: none; } } /* --------------------------------------------------------- PHONE-ONLY REPLACEMENT FOR THE DESKTOP LEFT / INFO COLUMN Desktop keeps the original legacy sidebar untouched. The mobile sidebar is clean standalone markup. --------------------------------------------------------- */ .ibox-info-column-mobile { display: none; } @media screen and (max-width: 768px) { /* Hide the legacy desktop sidebar entirely on phones. */ .ibox-main-layout > tbody > tr > td.ibox-info-column { /* Hide the OLD desktop "What is...?" column on phones. */ display: none; } /* Show the purpose-built phone sidebar after the main content. */ .ibox-main-layout > tbody > tr > td.ibox-info-column-mobile { /* Show the NEW phone-only "What is...?" column. */ display: block; order: 2; width: 100%; max-width: 100%; box-sizing: border-box; /* OUTER SPACE around the entire phone info column: top | left/right | bottom */ padding: 18px 12px 24px 12px; text-align: center; } .ibox-mobile-info-panel { width: 100%; max-width: 640px; margin: 0 auto; box-sizing: border-box; } .ibox-mobile-info-section { width: 100%; box-sizing: border-box; /* SPACE INSIDE EACH PHONE INFO SECTION: top | left/right | bottom */ padding: 18px 10px 22px 10px; /* Thin divider between sections. Set to 0 to remove. */ border-bottom: 2px solid rgba(75, 21, 6, 0.20); text-align: center; } .ibox-mobile-info-section:last-child { border-bottom: 0; } .ibox-mobile-info-title { margin: 10px 0 10px 0; /* PHONE INFO HEADING SIZE. */ font-size: 25px; /* <-- change this to make headings larger/smaller */ line-height: 1.2; font-weight: bold; color: #4b1506; } .ibox-mobile-info-copy { /* WIDTH OF TEXT BLOCK inside each info section. */ width: 90%; /* <-- 100% makes text span wider */ margin: 0 auto; /* PHONE INFO BODY-TEXT SIZE. */ font-size: 25px; /* <-- main text-size control */ line-height: 1.45; color: #806d4e; } .ibox-mobile-info-credit { margin-top: 8px; font-style: italic; } .ibox-main-layout .ibox-info-column-mobile .ibox-mobile-info-graphic { height: auto; margin: 8px auto; } .ibox-main-layout .ibox-info-column-mobile .ibox-mobile-info-portrait { height: auto; } .ibox-main-layout .ibox-info-column-mobile .ibox-mobile-info-small-graphic { height: auto; margin: 8px auto; } .ibox-mobile-contact { padding-bottom: 8px; } } /* --------------------------------------------------------- PHONE-ONLY REPLACEMENT FOR THE DESKTOP SALES / STORE COLUMN Desktop keeps the original store column untouched. The phone copy preserves the existing links and PayPal forms, but uses larger, centered product artwork. --------------------------------------------------------- */ .ibox-store-column-mobile { display: none; } @media screen and (max-width: 768px) { /* Hide the original narrow desktop sales column on phones. */ .ibox-main-layout > tbody > tr > td.ibox-store-column { /* Hide the OLD narrow desktop store column on phones. */ display: none; } /* Show the phone-specific sales column after the info column. */ .ibox-main-layout > tbody > tr > td.ibox-store-column-mobile { /* Show the NEW phone-only sales/store column. */ display: block; order: 3; width: 100%; max-width: 100%; box-sizing: border-box; /* OUTER SPACE around the phone store stack. */ padding: 20px 12px 30px 12px; text-align: center; /* STORE TEXT SIZE. */ font-size: 20px; /* <-- change store text size here */ line-height: 1.4; } /* Store heading artwork. */ .ibox-main-layout .ibox-store-column-mobile img[src*="company_store_new.jpg"] { height: auto; margin: 0 auto 8px auto; } /* Keep the little arrow graphic small. */ .ibox-store-column-mobile img[src*="arrow2.jpg"] { width: auto; max-width: none; height: auto; margin: 0 auto; } /* Product covers / artwork become comfortably large on phones. */ /* PayPal controls stay at their intended button size. */ .ibox-store-column-mobile input[type="image"] { width: auto; max-width: 100%; height: auto; margin: 8px auto; } .ibox-store-column-mobile form { margin: 8px auto 14px auto; text-align: center; } .ibox-store-column-mobile hr { width: 90%; margin: 22px auto; } } /* --------------------------------------------------------- PHONE INFO IMAGE STACKING These images should always appear one above the next. Width is NOT controlled here; the four screen-band blocks at the end of this file remain the only width controls. --------------------------------------------------------- */ .ibox-main-layout .ibox-info-column-mobile a > img.ibox-mobile-info-graphic, .ibox-main-layout .ibox-info-column-mobile a > img.ibox-mobile-info-portrait, .ibox-main-layout .ibox-info-column-mobile a > img.ibox-mobile-info-small-graphic { display: block; height: auto; margin-left: auto; margin-right: auto; } /* ========================================================= PHONE ARTWORK WIDTH CONTROLS - MOBILE-FIRST CASCADE These controls apply only to the ordinary phone info graphics. Special images such as Rubel, samplepages, the store heading, NewLogo-big.jpg, and product covers have dedicated controls below. HOW THIS WORKS: 1. The first rule is the starting size (320px and below). 2. At 321px, the next rule replaces it. 3. At 376px, the next rule replaces that. 4. At 426px, the final rule replaces that. A later min-width rule takes over when the screen reaches that width. IMPORTANT: Change BOTH width and max-width together. ========================================================= */ /* --------------------------------------------------------- KNOB 1 - 320PX (and anything narrower) CURRENT SIZE: 66vw --------------------------------------------------------- */ .ibox-main-layout .ibox-info-column-mobile .ibox-mobile-info-graphic, /* --------------------------------------------------------- KNOB 2 - STARTING AT 321PX Controls 321-375 because the 376 rule below takes over next. CURRENT SIZE: 66vw --------------------------------------------------------- */ @media screen and (min-width: 321px) { .ibox-main-layout .ibox-info-column-mobile .ibox-mobile-info-graphic, } /* --------------------------------------------------------- KNOB 3 - STARTING AT 376PX Controls 376-425 because the 426 rule below takes over next. CURRENT SIZE: 45vw --------------------------------------------------------- */ @media screen and (min-width: 376px) { .ibox-main-layout .ibox-info-column-mobile .ibox-mobile-info-graphic, } /* --------------------------------------------------------- KNOB 4 - STARTING AT 426PX Controls 426-768 while the phone-only columns are visible. Above 768px those columns are hidden by the normal desktop rules. CURRENT SIZE: 30vw --------------------------------------------------------- */ @media screen and (min-width: 426px) { .ibox-main-layout .ibox-info-column-mobile .ibox-mobile-info-graphic, } /* ========================================================= SAMPLEPAGES_NO_TEXT.JPG WIDTH CONTROLS These controls are independent from the general phone artwork controls above. This image uses the class: ibox-mobile-info-small-graphic Change BOTH width and max-width together. ========================================================= */ /* --------------------------------------------------------- SAMPLE PAGES KNOB 1 - 320PX (and anything narrower) CURRENT SIZE: 50vw --------------------------------------------------------- */ .ibox-main-layout .ibox-info-column-mobile img.ibox-mobile-info-small-graphic { width: 40vw; /* <-- SAMPLE IMAGE 320PX SIZE KNOB */ max-width: 50vw; /* <-- KEEP SAME AS ABOVE */ height: auto; } /* --------------------------------------------------------- SAMPLE PAGES KNOB 2 - STARTING AT 321PX Controls 321-375 because the 376 rule below takes over next. CURRENT SIZE: 50vw --------------------------------------------------------- */ @media screen and (min-width: 321px) { .ibox-main-layout .ibox-info-column-mobile img.ibox-mobile-info-small-graphic { width: 30vw; /* <-- SAMPLE IMAGE 321-375PX SIZE KNOB */ max-width: 50vw; /* <-- KEEP SAME AS ABOVE */ } } /* --------------------------------------------------------- SAMPLE PAGES KNOB 3 - STARTING AT 376PX Controls 376-425 because the 426 rule below takes over next. CURRENT SIZE: 38vw --------------------------------------------------------- */ @media screen and (min-width: 376px) { .ibox-main-layout .ibox-info-column-mobile img.ibox-mobile-info-small-graphic { width: 30vw; /* <-- SAMPLE IMAGE 376-425PX SIZE KNOB */ max-width: 38vw; /* <-- KEEP SAME AS ABOVE */ } } /* --------------------------------------------------------- SAMPLE PAGES KNOB 4 - STARTING AT 426PX Controls 426-768 while the phone-only column is visible. CURRENT SIZE: 25vw --------------------------------------------------------- */ @media screen and (min-width: 426px) { .ibox-main-layout .ibox-info-column-mobile img.ibox-mobile-info-small-graphic { width: 15vw; /* <-- SAMPLE IMAGE 426-768PX SIZE KNOB */ max-width: 25vw; /* <-- KEEP SAME AS ABOVE */ } } /* ========================================================= RUBEL_ON_ROOFTOP.JPG WIDTH CONTROLS These controls are independent from: - the general phone artwork controls - samplepages_no_text.jpg controls - store-cover controls The Rubel image uses: ibox-mobile-info-portrait Change BOTH width and max-width together. ========================================================= */ /* RUBEL KNOB 1 - 320PX and narrower */ .ibox-main-layout .ibox-info-column-mobile img.ibox-mobile-info-portrait { width: 66vw; /* <-- RUBEL 320PX SIZE KNOB */ max-width: 66vw; /* <-- KEEP SAME AS ABOVE */ height: auto; } /* RUBEL KNOB 2 - 321PX through 375PX */ @media screen and (min-width: 321px) { .ibox-main-layout .ibox-info-column-mobile img.ibox-mobile-info-portrait { width: 66vw; /* <-- RUBEL 321-375PX SIZE KNOB */ max-width: 66vw; /* <-- KEEP SAME AS ABOVE */ } } /* RUBEL KNOB 3 - 376PX through 425PX */ @media screen and (min-width: 376px) { .ibox-main-layout .ibox-info-column-mobile img.ibox-mobile-info-portrait { width: 45vw; /* <-- RUBEL 376-425PX SIZE KNOB */ max-width: 45vw; /* <-- KEEP SAME AS ABOVE */ } } /* RUBEL KNOB 4 - 426PX through 768PX */ @media screen and (min-width: 426px) { .ibox-main-layout .ibox-info-column-mobile img.ibox-mobile-info-portrait { width: 20vw; /* <-- RUBEL 426-768PX SIZE KNOB */ max-width: 30vw; /* <-- KEEP SAME AS ABOVE */ } } /* ========================================================= COMPANY_STORE_NEW.JPG WIDTH CONTROLS These controls are independent from: - the general phone artwork controls - samplepages_no_text.jpg controls - Rubel controls - product-cover controls Change BOTH width and max-width together. ========================================================= */ /* COMPANY STORE KNOB 1 - 320PX and narrower */ .ibox-main-layout .ibox-store-column-mobile img[src*="company_store_new.jpg"] { width: 66vw; /* <-- COMPANY STORE 320PX SIZE KNOB */ max-width: 66vw; /* <-- KEEP SAME AS ABOVE */ height: auto; } /* COMPANY STORE KNOB 2 - 321PX through 375PX */ @media screen and (min-width: 321px) { .ibox-main-layout .ibox-store-column-mobile img[src*="company_store_new.jpg"] { width: 66vw; /* <-- COMPANY STORE 321-375PX SIZE KNOB */ max-width: 66vw; /* <-- KEEP SAME AS ABOVE */ } } /* COMPANY STORE KNOB 3 - 376PX through 425PX */ @media screen and (min-width: 376px) { .ibox-main-layout .ibox-store-column-mobile img[src*="company_store_new.jpg"] { width: 45vw; /* <-- COMPANY STORE 376-425PX SIZE KNOB */ max-width: 45vw; /* <-- KEEP SAME AS ABOVE */ } } /* COMPANY STORE KNOB 4 - 426PX through 768PX */ @media screen and (min-width: 426px) { .ibox-main-layout .ibox-store-column-mobile img[src*="company_store_new.jpg"] { width: 20vw; /* <-- COMPANY STORE 426-768PX SIZE KNOB */ max-width: 20vw; /* <-- KEEP SAME AS ABOVE */ } } /* ========================================================= NEWLOGO-BIG.JPG WIDTH CONTROLS DEFAULT / DESKTOP: Screens wider than 768px use the image's native 314px width. PHONE / SMALL TABLET: Four explicit screen bands below 769px can enlarge the logo independently. Change BOTH width and max-width together inside each phone band. ========================================================= */ /* DESKTOP / LARGE TABLET - 769PX and wider */ img[src$="NewLogo-big.jpg"] { display: block; width: 314px; max-width: 314px; height: auto; margin-left: auto; margin-right: auto; } /* NEW LOGO KNOB 1 - 320PX and narrower */ @media screen and (max-width: 320px) { img[src$="NewLogo-big.jpg"] { width: 125vw; /* <-- NEW LOGO 320PX SIZE KNOB */ max-width: 125vw; /* <-- KEEP SAME AS ABOVE */ } } /* NEW LOGO KNOB 2 - 321PX through 375PX */ @media screen and (min-width: 321px) and (max-width: 375px) { img[src$="NewLogo-big.jpg"] { width: 100vw; /* <-- NEW LOGO 321-375PX SIZE KNOB */ max-width: 100vw; /* <-- KEEP SAME AS ABOVE */ } } /* NEW LOGO KNOB 3 - 376PX through 425PX */ @media screen and (min-width: 376px) and (max-width: 425px) { img[src$="NewLogo-big.jpg"] { width: 100vw; /* <-- NEW LOGO 376-425PX SIZE KNOB */ max-width: 100vw; /* <-- KEEP SAME AS ABOVE */ } } /* NEW LOGO KNOB 4 - 426PX through 768PX */ @media screen and (min-width: 426px) and (max-width: 768px) { img[src$="NewLogo-big.jpg"] { width: 40vw; /* <-- NEW LOGO 426-768PX SIZE KNOB */ max-width: 40vw; /* <-- KEEP SAME AS ABOVE */ } } /* ========================================================= PHONE STORE PRODUCT ROWS Each product is now a two-column row: LEFT = cover / product image RIGHT = title, information, price, PayPal button These rules apply only to the phone-only store copy. Desktop store markup is untouched. ========================================================= */ @media screen and (max-width: 768px) { .ibox-mobile-product-list { width: 100%; max-width: 680px; margin: 0 auto; } .ibox-mobile-product-row { display: flex; align-items: flex-start; gap: 16px; width: 100%; box-sizing: border-box; padding: 18px 0; border-top: 2px solid rgba(75, 21, 6, 0.20); text-align: left; } .ibox-mobile-product-image { flex: 0 0 auto; text-align: center; } .ibox-mobile-product-image a, .ibox-mobile-product-image img { display: block; } .ibox-mobile-product-image img { height: auto; margin: 0 auto; } .ibox-mobile-product-details { flex: 1 1 auto; min-width: 0; font-size: 20px; line-height: 1.35; text-align: left; } .ibox-mobile-product-details form { margin: 10px 0 0 0; text-align: left; } .ibox-mobile-product-details input[type="image"] { display: block; width: auto; max-width: 100%; height: auto; margin: 0; } .ibox-mobile-product-details img[src*="pixel.gif"] { width: 1px; height: 1px; } .ibox-mobile-isbn { font-size: 0.72em; } .ibox-mobile-out { color: #990033; font-weight: bold; } } /* ========================================================= PHONE STORE COVER WIDTH CONTROLS These are independent from the general phone artwork knobs. Change BOTH width and max-width together. ========================================================= */ /* STORE COVER KNOB 1 - 320PX and narrower */ .ibox-mobile-product-image img { width: 70vw; max-width: 75vw; } /* STORE COVER KNOB 2 - 321PX through 375PX */ @media screen and (min-width: 321px) { .ibox-mobile-product-image img { width: 60vw; max-width: 75vw; } } /* STORE COVER KNOB 3 - 376PX through 425PX */ @media screen and (min-width: 376px) { .ibox-mobile-product-image img { width: 50vw; max-width: 75vw; } } /* STORE COVER KNOB 4 - 426PX through 768PX */ @media screen and (min-width: 426px) { .ibox-mobile-product-image img { width: 20vw; max-width: 75vw; } } /* ========================================================= SIMPLE BRANCH PAGES PRINTS GALLERY / CATALOG Used by branch pages whose includes: class="ibox-branch ibox-branch-gallery" Desktop is left alone. These rules begin at 768px and below. ========================================================= */ @media screen and (max-width: 768px) { /* Give old Netscape-era branch pages a readable phone text size. */ body.ibox-branch-gallery { font-size: 18px; line-height: 1.35; } /* Keep the old I Box logo comfortably inside the phone screen. */ body.ibox-branch-gallery > a:first-of-type img { width: auto; max-width: 72vw; height: auto; } /* Old heading FONT tags are too small after the browser stops pretending the page is desktop-width. */ body.ibox-branch-gallery font[size="+3"] { font-size: 30px; line-height: 1.15; } body.ibox-branch-gallery font[size="+2"] { font-size: 23px; line-height: 1.25; } /* Turn each old table row into a wrapping product row. At tablet widths this gives two products across. */ body.ibox-branch-gallery .ibox-print-grid, body.ibox-branch-gallery .ibox-print-grid tbody { display: block; width: 100%; max-width: 100%; box-sizing: border-box; } body.ibox-branch-gallery .ibox-print-grid tr { display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; } body.ibox-branch-gallery .ibox-print-grid td { display: block; width: 50%; box-sizing: border-box; padding: 12px 8px; text-align: center; vertical-align: top; font-size: 18px; line-height: 1.3; } /* Product artwork: enlarge the old ~145px thumbnails without affecting PayPal buttons. */ body.ibox-branch-gallery .ibox-print-grid td a img { display: block; width: 32vw; max-width: 240px; height: auto; margin-left: auto; margin-right: auto; } /* Keep PayPal controls at their designed size. */ body.ibox-branch-gallery .ibox-print-grid input[type="image"] { width: auto; max-width: 100%; height: auto; } body.ibox-branch-gallery .ibox-print-grid img[src*="pixel.gif"] { width: 1px; height: 1px; } } /* Narrow phones: one print per row, with larger artwork. */ @media screen and (max-width: 425px) { body.ibox-branch-gallery { font-size: 20px; } body.ibox-branch-gallery .ibox-print-grid td { width: 100%; padding: 16px 8px 20px 8px; font-size: 20px; } body.ibox-branch-gallery .ibox-print-grid td a img { width: 60vw; max-width: 260px; } } /* ========================================================= SIMPLE BRANCH PAGES SAMPLE COMIC / COMIC READER Page families: ibox-branch-sample-index ibox-branch-comic-reader Desktop is intentionally left alone. Phone/tablet changes begin at 768px and below. ========================================================= */ @media screen and (max-width: 768px) { /* ----------------------------------------------------- COMMON BRANCH-PAGE BASICS ----------------------------------------------------- */ body.ibox-branch-sample-index, body.ibox-branch-comic-reader { font-size: 20px; line-height: 1.4; } /* Old small I Box header logo. */ body.ibox-branch-sample-index > a:first-of-type img, body.ibox-branch-comic-reader .ibox-comic-reader-header img[src*="iboxlogosmall_new.jpg"] { width: auto; max-width: 72vw; height: auto; } /* ----------------------------------------------------- SAMPLE_COMIC.HTM LANDING PAGE ----------------------------------------------------- */ body.ibox-branch-sample-index .ibox-sample-intro-panel { width: calc(100vw - 24px); max-width: 680px; box-sizing: border-box; margin-left: auto; margin-right: auto; } body.ibox-branch-sample-index .ibox-sample-intro-panel td { font-size: 20px; line-height: 1.45; } body.ibox-branch-sample-index font[size="+4"] { font-size: 36px; line-height: 1.1; } body.ibox-branch-sample-index font[size="+3"] { font-size: 30px; line-height: 1.15; } body.ibox-branch-sample-index font[size="+1"] { font-size: 20px; line-height: 1.45; } /* "Begin" and "Return" are navigation, so make them easy to tap. */ body.ibox-branch-sample-index a { line-height: 1.5; } /* ----------------------------------------------------- SC#.HTM COMIC READER PAGES ----------------------------------------------------- */ body.ibox-branch-comic-reader .ibox-comic-reader-header, body.ibox-branch-comic-reader .ibox-comic-reader-header tbody, body.ibox-branch-comic-reader .ibox-comic-reader-header tr { display: block; width: 100%; max-width: 100%; box-sizing: border-box; } /* Stack the old 30% / 40% / 30% desktop header on phones. */ body.ibox-branch-comic-reader .ibox-comic-reader-header td { display: block; width: 100%; max-width: 100%; box-sizing: border-box; text-align: center; padding: 4px 8px; } /* The third desktop header cell is intentionally empty. */ body.ibox-branch-comic-reader .ibox-comic-reader-header td:last-child { display: none; } body.ibox-branch-comic-reader .ibox-comic-reader-header font[size="+3"] { font-size: 28px; line-height: 1.15; } body.ibox-branch-comic-reader .ibox-comic-reader-header font[size="+2"] { font-size: 23px; line-height: 1.2; } /* Main comic page. Preserve proportions and center it. */ body.ibox-branch-comic-reader .ibox-comic-reader-page { display: block; width: auto; max-width: calc(100vw - 16px); height: auto; margin: 10px auto 14px auto; } /* Previous / Next / Return links. */ body.ibox-branch-comic-reader center > p > a { display: inline-block; font-size: 22px; line-height: 1.2; padding: 10px 12px; margin: 4px; } } /* Extra tightening for the narrowest phones. */ @media screen and (max-width: 425px) { body.ibox-branch-sample-index, body.ibox-branch-comic-reader { font-size: 20px; } body.ibox-branch-sample-index .ibox-sample-intro-panel { width: calc(100vw - 16px); } body.ibox-branch-comic-reader .ibox-comic-reader-page { max-width: calc(100vw - 10px); } } /* ========================================================= SIMPLE BRANCH PAGES BOOK SAMPLE / COVER / PROLOGUE Page families: ibox-branch-book-sample ibox-branch-book-cover ibox-branch-prologue-reader Desktop stays essentially unchanged. Phone/tablet treatment begins at 768px and below. ========================================================= */ @media screen and (max-width: 768px) { body.ibox-branch-book-sample, body.ibox-branch-book-cover, body.ibox-branch-prologue-reader { font-size: 20px; line-height: 1.4; } /* Small legacy I Box logo used on some of these pages. */ body.ibox-branch-book-sample > a:first-of-type img, body.ibox-branch-prologue-reader .ibox-branch-small-logo { width: auto; max-width: 72vw; height: auto; } /* ---------------- BOOK SYNOPSIS / SAMPLE ENTRY ---------------- */ body.ibox-branch-book-sample font[size="+3"] { font-size: 30px; line-height: 1.15; } body.ibox-branch-book-sample font[size="+1"] { font-size: 20px; line-height: 1.45; } body.ibox-branch-book-sample .ibox-book-sample-text { width: calc(100vw - 24px); max-width: 680px; margin-left: auto; margin-right: auto; box-sizing: border-box; } body.ibox-branch-book-sample .ibox-book-sample-text td { font-size: 20px; line-height: 1.45; } body.ibox-branch-book-sample .ibox-book-sample-cover { width: auto; max-width: 52vw; height: auto; } body.ibox-branch-book-sample .ibox-book-sample-wide-art { display: block; width: auto; max-width: calc(100vw - 20px); height: auto; margin-left: auto; margin-right: auto; } /* Prologue thumbnails should be easier to tap without becoming huge. */ body.ibox-branch-book-sample a img[src*="ThumbPage_"] { width: auto; max-width: 13vw; height: auto; } /* ---------------- LARGE COVER PAGE ---------------- */ body.ibox-branch-book-cover font[size="+3"] { font-size: 30px; line-height: 1.15; } body.ibox-branch-book-cover .ibox-book-cover-image { display: block; width: auto; max-width: calc(100vw - 24px); height: auto; margin-left: auto; margin-right: auto; } body.ibox-branch-book-cover a { display: inline-block; font-size: 22px; line-height: 1.2; padding: 10px 8px; margin: 4px; } /* ---------------- PROLOGUE READER ---------------- */ body.ibox-branch-prologue-reader font[size="+3"] { font-size: 30px; line-height: 1.15; } body.ibox-branch-prologue-reader font[size="+2"] { font-size: 23px; line-height: 1.2; } body.ibox-branch-prologue-reader .ibox-comic-reader-page { display: block; width: auto; max-width: calc(100vw - 16px); height: auto; margin: 10px auto 14px auto; } body.ibox-branch-prologue-reader center > p > a { display: inline-block; font-size: 22px; line-height: 1.2; padding: 10px 12px; margin: 4px; } } @media screen and (max-width: 425px) { body.ibox-branch-book-sample .ibox-book-sample-text { width: calc(100vw - 16px); } body.ibox-branch-book-sample .ibox-book-sample-cover { max-width: 62vw; } body.ibox-branch-book-sample a img[src*="ThumbPage_"] { max-width: 15vw; } body.ibox-branch-prologue-reader .ibox-comic-reader-page { max-width: calc(100vw - 10px); } } /* TPB5 review: enlarge the seven tiny preview thumbnails on phones. */ @media screen and (max-width: 768px) { body.ibox-branch-book-sample a img[src*="i37-Page"][src*="_THUMB.gif"] { width: auto; max-width: 12vw; height: auto; } } @media screen and (max-width: 425px) { body.ibox-branch-book-sample a img[src*="i37-Page"][src*="_THUMB.gif"] { max-width: 13vw; } }