MediaWiki:Print.css: Difference between revisions

Revision as of 14:14, 19 June 2025

/* CSS placed here will affect the print output */

/* Remove non-essential elements */
@media print {
    .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;}

    /* --- IMAGE / THUMBNAIL PRINT STYLES --- */
    /* Ensure thumbnails behave like thumbnails in print */
    .thumb {
        /* Allow text to wrap around the image */
        float: left; /* Or right, depending on desired default alignment */
        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: 250px; /* Set a 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 {
        /* Ensure the image within the thumbnail is scaled down */
        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 */
    /* If you have non-thumbnail images that are too large, you might add: */
    /*
    img:not(.thumbimage) {
        max-width: 80%;
        height: auto;
        display: block;
        margin: 1em 0;
    }
    */
    /* --- END IMAGE / THUMBNAIL PRINT STYLES --- */
}

/* Set default font for the whole site, individual elements can override this */
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 sets the title category... */
h1 {
  /* Override any editor added inline styles that play with font-size */
  font-size: inherit !important;
  font-family: "CasablancaAntique", "Century Schoolbook";
  font-size:  3em;
}

/* h2 sets the heading category... */
h2 {
  /* Override any editor added inline styles that play with font-size */
  font-size: inherit !important;
  font-family: "CasablancaAntique", "Century Schoolbook";
  font-size:  2.5em;
  font-variant: small-caps;
  text-decoration: underline;
}

/* h3 sets the subheading 1 category... */
h3 {
  /* Override any editor added inline styles that play with font-size */
  font-size: inherit !important;
  font-family: "Century Schoolbook";
  font-size:  2em;
  font-variant: small-caps;
}

/* h4 sets the subheading 2 category... */
h4 {
  /* Override any editor added inline styles that play with font-size */
  font-size: inherit !important;
  font-family: "Century Schoolbook";
  font-size:  2em;
  font-variant: small-caps;
}

.module {
    column-count: 2;
}

.div-col {
	margin-top: 0.3em;
	column-width: 40em;
}

.div-col-rules {
	column-rule: 1px solid #aaa;
}

/* 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;
}