Jump to content

MediaWiki:Print.css: Difference between revisions

From greyhawk
m thumbnail print handling added
mNo edit summary
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will affect the print output */
/* MediaWiki:Print.css */


/* Remove non-essential elements */
@media print {
@media print {
    .firstHeading { margin-top: 0; padding-top: 0; }
    /* --- General Print Cleanup --- */
    #toc { display: none; }
    /* Remove navigation, sidebars, and other elements not needed for print */
    #siteSub { display: none; }
    #mw-navigation, #mw-panel, #p-cactions, #p-personal, #p-views,
    .printfooter { display: none; }
    #p-navigation, #p-search, #siteSub, #footer, #catlinks,
    #catlinks, .catlinks { display: none; }
    .noprint, .editsection, .mw-indicators, .printfooter,
    #footer { display: none; }
    #privacy, #about, #disclaimer, #toc {
    #privacy, #about, #disclaimer {display:none;}
        display: none !important;
    }


     /* --- IMAGE / THUMBNAIL PRINT STYLES --- */
     /* Adjust page margins for better print layout */
    /* Ensure thumbnails behave like thumbnails in print */
     body {
     .thumb {
         margin: 1.5cm; /* Roughly 0.6 inches on all sides */
         /* Allow text to wrap around the image */
         font-family: sans-serif; /* Use a common sans-serif font for readability if 'Century Schoolbook' isn't available */
        float: left; /* Or right, depending on desired default alignment */
         font-size: 8.5pt !important; /* FURTHER REDUCED: Base font size for print */
        margin: 0.5em 1em 0.5em 0; /* Adjust spacing around the thumbnail: top right bottom left */
         line-height: 1.3 !important; /* Slightly tighter line height for compactness */
         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: 250px; /* Set a maximum width for the thumbnail container */
         page-break-inside: avoid; /* Prevent thumbnails from breaking across pages */
     }
     }


     .thumbinner {
     /* --- Header Sizing --- */
         padding: 3px !important; /* Adjust inner padding if needed */
    /* Main page title (h1) */
         border: none !important; /* Remove inner border if default has one */
    h1#firstHeading, #content h1 {
         background-color: transparent !important;
         font-size: 17pt !important; /* REDUCED from 18pt */
         margin-top: 1em !important;
        margin-bottom: 0.7em !important;
         line-height: 1.2em !important;
        text-align: center;
     }
     }


     .thumbimage {
     /* Section headings from `== Heading ==` (render as h2) */
         /* Ensure the image within the thumbnail is scaled down */
    h2 {
         max-width: 100%; /* Important: Constrain image to its container */
         font-size: 13pt !important; /* REDUCED from 14pt */
         height: auto; /* Maintain aspect ratio */
         margin-top: 1.2em !important;
         display: block; /* Ensures it behaves nicely within the div */
        margin-bottom: 0.6em !important;
         border: 1px solid #ccc; /* Add border directly to image */
         line-height: 1.2em !important;
         text-align: center;
         page-break-after: avoid;
     }
     }


     .thumbcaption {
     /* Subsection headings from `=== Subheading ===` (render as h3) */
         font-size: 0.9em; /* Smaller font for caption */
    h3 {
         line-height: 1.3em;
         font-size: 11pt !important; /* REDUCED from 12pt */
         padding: 3px 0; /* Padding for the caption */
         margin-top: 1em !important;
         text-align: left; /* Align caption text */
         margin-bottom: 0.5em !important;
         overflow: hidden; /* Prevent long captions from breaking layout */
         line-height: 1.2em !important;
         page-break-after: avoid;
     }
     }


     /* Styles for images that are not thumbnails but should be smaller */
     /* Smaller headings (h4, h5, h6) */
     /* If you have non-thumbnail images that are too large, you might add: */
     h4, h5, h6 {
    /*
        font-size: 9pt !important; /* REDUCED from 10pt */
    img:not(.thumbimage) {
        margin-top: 0.8em !important;
         max-width: 80%;
         margin-bottom: 0.4em !important;
         height: auto;
         line-height: 1.2em !important;
         display: block;
         page-break-after: avoid;
        margin: 1em 0;
     }
     }
    */
    /* --- END IMAGE / THUMBNAIL PRINT STYLES --- */
}


/* Set default font for the whole site, individual elements can override this */
    /* Specific styling for the 'The Setting and Scene' block h2, if needed */
body {
    .mw-parser-output div[style*="text-align: center;"] h2 {
  /* Override any editor added inline styles that play with font-size */
        font-size: 15pt !important; /* REDUCED from 16pt */
  font-size: inherit !important;
    }
  font-family:  "Century Schoolbook";
  font-size: 1.5 em;
  font-weight: normal;
}


/* h1 sets the title category... */
    /* --- Body Text & List Item Styling --- */
h1 {
    /* Ensure all common text blocks and list items use the smaller base font size */
  /* Override any editor added inline styles that play with font-size */
    p, ul, ol, dl, pre, blockquote, table, li, td, th {
  font-size: inherit !important;
        font-size: 8.5pt !important; /* MATCHES new body font size */
  font-family: "CasablancaAntique", "Century Schoolbook";
        line-height: 1.4 !important; /* Keep readability */
  font-size:  3em;
        margin-top: 0.3em !important; /* Tighter spacing between elements */
}
        margin-bottom: 0.3em !important; /* Tighter spacing between elements */
    }
   
    /* Ensure content inside definition lists also gets proper spacing */
    dd {
        margin-left: 1.5em !important; /* Standard indent for definition descriptions */
        font-size: 8.5pt !important; /* MATCHES new body font size */
    }
    dt {
        font-weight: bold !important;
        font-size: 8.5pt !important; /* MATCHES new body font size */
    }


/* h2 sets the heading category... */
    /* --- Image & Thumbnail Styling --- */
h2 {
    img {
  /* Override any editor added inline styles that play with font-size */
        max-width: 95% !important; /* Ensure images don't stretch too wide */
  font-size: inherit !important;
        height: auto !important;
  font-family: "CasablancaAntique", "Century Schoolbook";
        display: block;
  font-size:  2.5em;
        margin: 0.8em auto !important; /* Center images with some vertical spacing */
  font-variant: small-caps;
    }
  text-decoration: underline;
}


/* h3 sets the subheading 1 category... */
    .thumb {
h3 {
        float: none !important; /* Remove float for simpler print layout */
  /* Override any editor added inline styles that play with font-size */
        margin: 0.8em auto !important; /* Center the thumbnail container */
  font-size: inherit !important;
        max-width: 200px !important; /* Adjust this to control thumbnail width */
  font-family: "Century Schoolbook";
        border: 1px solid #ccc;
  font-size:  2em;
        padding: 3px !important; /* Slightly less padding */
  font-variant: small-caps;
        background-color: #f9f9f9;
}
        box-sizing: border-box;
        page-break-inside: avoid;
    }


/* h4 sets the subheading 2 category... */
    .thumbinner {
h4 {
        padding: 2px !important; /* Slightly less inner padding */
  /* Override any editor added inline styles that play with font-size */
        border: none !important;
  font-size: inherit !important;
        background-color: transparent !important;
  font-family: "Century Schoolbook";
    }
  font-size:  2em;
  font-variant: small-caps;
}


.module {
    .thumbimage {
    column-count: 2;
        max-width: 100% !important;
}
        height: auto !important;
        display: block;
        border: none !important;
    }


.div-col {
    .thumbcaption {
margin-top: 0.3em;
        font-size: 7.5pt !important; /* REDUCED from 8pt */
column-width: 40em;
        line-height: 1.2em !important;
}
        padding: 2px 0 !important;
        text-align: left !important;
        overflow: hidden !important;
    }


.div-col-rules {
    /* --- Column Layout Adjustments --- */
column-rule: 1px solid #aaa;
    .module, .div-col {
}
        column-count: 1 !important; /* Force single column for print readability */
 
        column-width: auto !important;
/* Reset top margin for lists in div col */
        column-rule: none !important;
.div-col dl,
    }
.div-col ol,
    .div-col li, .div-col dd, .div-col p {
.div-col ul {
        break-inside: avoid;
margin-top: 0;
    }
}
 
/* Avoid elements breaking between columns
   See also Template:No col break */
.div-col li,
.div-col dd {
break-inside: avoid-column;
}
}

Latest revision as of 19:15, 19 June 2025

/* MediaWiki:Print.css */

@media print {
    /* --- General Print Cleanup --- */
    /* Remove navigation, sidebars, and other elements not needed for print */
    #mw-navigation, #mw-panel, #p-cactions, #p-personal, #p-views,
    #p-navigation, #p-search, #siteSub, #footer, #catlinks,
    .noprint, .editsection, .mw-indicators, .printfooter,
    #privacy, #about, #disclaimer, #toc {
        display: none !important;
    }

    /* Adjust page margins for better print layout */
    body {
        margin: 1.5cm; /* Roughly 0.6 inches on all sides */
        font-family: sans-serif; /* Use a common sans-serif font for readability if 'Century Schoolbook' isn't available */
        font-size: 8.5pt !important; /* FURTHER REDUCED: Base font size for print */
        line-height: 1.3 !important; /* Slightly tighter line height for compactness */
    }

    /* --- Header Sizing --- */
    /* Main page title (h1) */
    h1#firstHeading, #content h1 {
        font-size: 17pt !important; /* REDUCED from 18pt */
        margin-top: 1em !important;
        margin-bottom: 0.7em !important;
        line-height: 1.2em !important;
        text-align: center;
    }

    /* Section headings from `== Heading ==` (render as h2) */
    h2 {
        font-size: 13pt !important; /* REDUCED from 14pt */
        margin-top: 1.2em !important;
        margin-bottom: 0.6em !important;
        line-height: 1.2em !important;
        text-align: center;
        page-break-after: avoid;
    }

    /* Subsection headings from `=== Subheading ===` (render as h3) */
    h3 {
        font-size: 11pt !important; /* REDUCED from 12pt */
        margin-top: 1em !important;
        margin-bottom: 0.5em !important;
        line-height: 1.2em !important;
        page-break-after: avoid;
    }

    /* Smaller headings (h4, h5, h6) */
    h4, h5, h6 {
        font-size: 9pt !important; /* REDUCED from 10pt */
        margin-top: 0.8em !important;
        margin-bottom: 0.4em !important;
        line-height: 1.2em !important;
        page-break-after: avoid;
    }

    /* Specific styling for the 'The Setting and Scene' block h2, if needed */
    .mw-parser-output div[style*="text-align: center;"] h2 {
        font-size: 15pt !important; /* REDUCED from 16pt */
    }

    /* --- Body Text & List Item Styling --- */
    /* Ensure all common text blocks and list items use the smaller base font size */
    p, ul, ol, dl, pre, blockquote, table, li, td, th {
        font-size: 8.5pt !important; /* MATCHES new body font size */
        line-height: 1.4 !important; /* Keep readability */
        margin-top: 0.3em !important; /* Tighter spacing between elements */
        margin-bottom: 0.3em !important; /* Tighter spacing between elements */
    }
    
    /* Ensure content inside definition lists also gets proper spacing */
    dd {
        margin-left: 1.5em !important; /* Standard indent for definition descriptions */
        font-size: 8.5pt !important; /* MATCHES new body font size */
    }
    dt {
        font-weight: bold !important;
        font-size: 8.5pt !important; /* MATCHES new body font size */
    }

    /* --- Image & Thumbnail Styling --- */
    img {
        max-width: 95% !important; /* Ensure images don't stretch too wide */
        height: auto !important;
        display: block;
        margin: 0.8em auto !important; /* Center images with some vertical spacing */
    }

    .thumb {
        float: none !important; /* Remove float for simpler print layout */
        margin: 0.8em auto !important; /* Center the thumbnail container */
        max-width: 200px !important; /* Adjust this to control thumbnail width */
        border: 1px solid #ccc;
        padding: 3px !important; /* Slightly less padding */
        background-color: #f9f9f9;
        box-sizing: border-box;
        page-break-inside: avoid;
    }

    .thumbinner {
        padding: 2px !important; /* Slightly less inner padding */
        border: none !important;
        background-color: transparent !important;
    }

    .thumbimage {
        max-width: 100% !important;
        height: auto !important;
        display: block;
        border: none !important;
    }

    .thumbcaption {
        font-size: 7.5pt !important; /* REDUCED from 8pt */
        line-height: 1.2em !important;
        padding: 2px 0 !important;
        text-align: left !important;
        overflow: hidden !important;
    }

    /* --- Column Layout Adjustments --- */
    .module, .div-col {
        column-count: 1 !important; /* Force single column for print readability */
        column-width: auto !important;
        column-rule: none !important;
    }
    .div-col li, .div-col dd, .div-col p {
        break-inside: avoid;
    }
}