Jump to content

MediaWiki:Print.css

From greyhawk
Revision as of 14:18, 19 June 2025 by Adventurer (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will affect the print output */

/* --- GENERAL PRINT SETTINGS & REMOVALS --- */
@media print {
    /* Remove non-essential elements */
    .firstHeading { margin-top: 0; padding-top: 0; }
    #toc { display: none; }
    #siteSub { display: none; }
    .printfooter { display: none; }
    #catlinks, .catlinks { display: none; }
    #footer { display: none; }
    #privacy, #about, #disclaimer {display:none;}
    #p-cactions, #p-personal, #p-views, #p-navigation, #p-search,
    .noprint, .editsection, .mw-indicators { /* Hide common navigation/interface elements */
        display: none !important;
    }

    /* Force background colors/images to print (use with caution, ink intensive!) */
    /* If you absolutely want backgrounds, uncomment this, but it's not generally recommended for print. */
    /*
    body {
        -webkit-print-color-adjust: exact; /* Chrome, Safari */
        color-adjust: exact; /* Other browsers */
    }
    */

    /* --- FONT FIXES --- */
    /* Set default font for the whole site */
    body {
        font-family: "Century Schoolbook", serif; /* Add a generic fallback */
        font-size: 1.5em; /* Ensure this size is applied */
        font-weight: normal;
        /* Remove the problematic 'inherit !important' if it's causing issues */
        /* font-size: inherit !important; -- REMOVE THIS LINE IF IT'S IN YOUR ACTUAL CSS */
    }

    h1 {
        font-family: "CasablancaAntique", "Century Schoolbook", serif;
        font-size: 3em;
        /* Remove the problematic 'inherit !important' if it's causing issues */
        /* font-size: inherit !important; -- REMOVE THIS LINE IF IT'S IN YOUR ACTUAL CSS */
    }

    h2 {
        font-family: "CasablancaAntique", "Century Schoolbook", serif;
        font-size: 2.5em;
        font-variant: small-caps;
        text-decoration: underline;
        /* Remove the problematic 'inherit !important' if it's causing issues */
        /* font-size: inherit !important; -- REMOVE THIS LINE IF IT'S IN YOUR ACTUAL CSS */
    }

    h3 {
        font-family: "Century Schoolbook", serif;
        font-size: 2em;
        font-variant: small-caps;
        /* Remove the problematic 'inherit !important' if it's causing issues */
        /* font-size: inherit !important; -- REMOVE THIS LINE IF IT'S IN YOUR ACTUAL CSS */
    }

    h4 {
        font-family: "Century Schoolbook", serif;
        font-size: 2em;
        font-variant: small-caps;
        /* Remove the problematic 'inherit !important' if it's causing issues */
        /* font-size: inherit !important; -- REMOVE THIS LINE IF IT'S IN YOUR ACTUAL CSS */
    }

    /* --- IMAGE / THUMBNAIL PRINT STYLES --- */
    /* Ensure thumbnails behave like thumbnails in print */
    .thumb {
        float: left; /* Allow text to wrap around the image */
        margin: 0.5em 1em 0.5em 0; /* Adjust spacing around the thumbnail: top right bottom left */
        border: 1px solid #ccc; /* Add a subtle border like online */
        padding: 4px; /* Add some padding inside the border */
        background-color: #f9f9f9; /* Light background */
        box-sizing: border-box; /* Include padding and border in element's total width/height */
        max-width: 200px; /* **ADJUST THIS**: Set a reasonable maximum width for the thumbnail container */
        page-break-inside: avoid; /* Prevent thumbnails from breaking across pages */
    }

    .thumbinner {
        padding: 3px !important; /* Adjust inner padding if needed */
        border: none !important; /* Remove inner border if default has one */
        background-color: transparent !important;
    }

    .thumbimage {
        max-width: 100%; /* Important: Constrain image to its container */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Ensures it behaves nicely within the div */
        border: 1px solid #ccc; /* Add border directly to image */
    }

    .thumbcaption {
        font-size: 0.9em; /* Smaller font for caption */
        line-height: 1.3em;
        padding: 3px 0; /* Padding for the caption */
        text-align: left; /* Align caption text */
        overflow: hidden; /* Prevent long captions from breaking layout */
    }

    /* Styles for images that are not thumbnails but should be smaller */
    /* This targets any img tag not inside a .thumb, useful for other embedded images */
    img:not(.thumbimage) {
        max-width: 80%; /* Limit width of other images */
        height: auto;
        display: block;
        margin: 1em auto; /* Center them if they are block */
    }

    /* --- TEMPLATE-SPECIFIC LAYOUT ADJUSTMENTS (FOR SESSION PREP) --- */
    /* This assumes the Session Prep template renders content in a specific HTML structure.
       You might need to inspect the live page HTML to get the exact classes/IDs. */

    /* Example: If Session Prep uses divs or tables for layout */
    .session-prep-container { /* Replace with actual class/ID from template HTML */
        page-break-after: always; /* If you want each session prep to start on a new page */
    }

    /* If it uses definition lists (dl, dt, dd) for key-value pairs */
    dl.session-prep-data { /* Adjust class name */
        margin-bottom: 1em;
    }
    dl.session-prep-data dt {
        font-weight: bold;
        float: left; /* Try to make keys float left */
        clear: left;
        margin-right: 0.5em;
        width: 120px; /* Adjust as needed for labels */
    }
    dl.session-prep-data dd {
        margin-left: 130px; /* Align content with dt width */
        margin-bottom: 0.5em;
    }
    
    /* Ensure content inside columns doesn't break poorly */
    .module, .div-col {
        column-count: 1 !important; /* Force single column layout for print if multi-columns cause issues */
        column-width: auto !important;
        column-rule: none !important; /* Remove column rule if it's there */
    }
    
    /* Avoid breaking within list items or paragraphs inside columns */
    .div-col li, .div-col dd, .div-col p {
        break-inside: avoid-column; /* Old property, less effective */
        break-inside: avoid; /* Modern property */
    }

    /* Headings within template content might need adjusted margins for print */
    .session-prep-content h5, .session-prep-content h6 { /* Assuming template generates these */
        margin-top: 1em;
        margin-bottom: 0.5em;
        page-break-after: avoid; /* Keep heading with content */
    }

    /* Specific element for 'hooks' or 'key_events' */
    .mw-headline { /* Often used for section headings */
        page-break-after: avoid;
        page-break-before: avoid;
    }

    /* Ensure {{:Borin}} and other transcluded NPCs print cleanly */
    /* This will depend on their individual page's HTML structure */
    /* If they are just text, they'll print fine. If they have complex layouts,
       you might need print CSS on their individual pages too, or target their
       containers here. */
    .mw-parser-output .thumb { /* More specific selector for thumbnails within content */
        float: left;
        margin: 0.5em 1em 0.5em 0;
        max-width: 180px; /* Make NPC thumbnails slightly smaller perhaps */
    }

} /* End @media print */

/* --- NON-PRINT SPECIFIC STYLES (Keep as they were) --- */
/* Your original font definitions are outside the @media print block.
   This means they apply to both screen and print, unless overridden by @media print.
   The 'inherit !important' lines here are very likely the culprit for font issues.
   If you have them outside the @media print block, remove them. */

/* I'm commenting out the problematic 'inherit !important' and ensuring the size is set.
   If these lines exist outside your @media print block in the actual CSS,
   you should remove the 'font-size: inherit !important;' line. */
/*
body {
  /* Override any editor added inline styles that play with font-size */
  /* font-size: inherit !important; */
  font-family:  "Century Schoolbook";
  font-size: 1.5 em;
  font-weight: normal;
}

h1 {
  /* Override any editor added inline styles that play with font-size */
  /* font-size: inherit !important; */
  font-family: "CasablancaAntique", "Century Schoolbook";
  font-size:  3em;
}
*/
/* ... similar for h2, h3, h4 ... */

.module {
    column-count: 2; /* This will be overridden by the @media print rule above for print */
}

.div-col {
	margin-top: 0.3em;
	column-width: 40em; /* This will be overridden by the @media print rule above for print */
}

.div-col-rules {
	column-rule: 1px solid #aaa; /* This will be overridden by the @media print rule above for print */
}

/* Reset top margin for lists in div col */
.div-col dl,
.div-col ol,
.div-col ul {
	margin-top: 0;
}

/* Avoid elements breaking between columns
   See also Template:No col break */
.div-col li,
.div-col dd {
	break-inside: avoid-column;
}
Retrieved from "https://www.bonemarch.org/wiki/index.php?title=MediaWiki:Print.css&oldid=3523"