MediaWiki:Print.css

From softwear.directory
Revision as of 15:38, 20 August 2025 by Admin (talk | contribs)
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* --- Load custom print font --- */
@font-face {
  font-family: 'HALColant-TextRegular';
  src: url('/fonts/HALColant-TextRegular.woff2?v=20250820') format('woff2'),
       url('/fonts/HALColant-TextRegular.woff?v=20250820')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* Global print baseline */
.print-only { display: block !important; }

/* Use the font everywhere in print */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'HALColant-TextRegular', Georgia, "Times New Roman", serif;
  color: #111;
}

/* A5 page setup */
@page { 
    size: A5 portrait; 
    margin: 2.5mm; 
}  /* minimal outside margin for Chrome defaults */
.entry-wrapper.print-a5 { padding: 2.5mm; }   /* inner breathing room */

html, body { margin: 0; padding: 0;}

/* Main wrapper for the printable entry */
.entry-wrapper.print-a5 {
  width: 100%;
  box-sizing: border-box;
  /* remove forced page break to avoid a blank trailing page on single prints */
  /* page-break-after: always; */
}

/* Avoid splitting key sections across pages */
#article-title,
.article-title-link,
.article-images,
.article-metadata,
.article-description,
.article-reflection,
.article-external-reference,
.article-quote {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Typography & spacing for the print layout */
body { font-family: HALColant-TextRegular!important; color: #292828!important;}

.article-title { 
    font-size: 22px;
    line-height: 24px;
    letter-spacing: 0.8px;
    text-align: center;
    color: #292828!important;
    margin: 0;
}
.article-people { 
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0.8px;
    text-align: center;
    text-decoration: underline;
    color: #292828!important;
    margin: 0;
    padding-top: 15px;
}

.article-people a { 
    text-decoration: underline;
    color: #292828!important;
}

.article-entry-number {
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0;
    margin: 0;
    padding-bottom: 4px;
    border-bottom: none;

    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.5px;   
}

.link-pdf {
    text-align: center;
    color: #292828!important;
    text-decoration: none;

    margin-top: 4px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;

    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.5px;   
}
.link-pdf a, .link-pdf p {
    text-decoration: none;
    display: inline-block;  
    color: #292828!important;
    margin-top: 0!important;
}

.article-type { 
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    margin: 0;      /* no external gap */
    padding-top: 7px;
    padding-bottom: 7px;
    text-decoration: none;
    color: #292828!important;

    border-bottom: none;
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.5px;   
}

.article-type a {
    text-decoration: none;
    display: inline-block;  
    color: #292828!important;
}

/* Reset margins & paddings inside metadata */
.article-metadata,
.article-metadata * {
  margin: 0 !important;
  border: none;
  background: none;
}
.article-metadata {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2mm; /* spacing between columns */
    padding-top: 11px;
    padding-bottom: 7px;
    line-height: 1 !important;
    
    border-bottom: none;
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.5px;   
}

.article-metadata-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.article-metadata-value {
    font-size: 15px;
    text-transform: capitalize;
}

.article-metadata-value a {
    color: #292828!important;
    text-decoration: none;
}

.article-metadata + .article-images {
  margin-top: 0 !important;   /* kill any gap above images */
  padding-top: 0 !important;
}

.article-images {
    margin: 0 !important;
    padding: 0 !important;
    page-break-inside: avoid;

    border-bottom: none;
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.5px;  
}

.article-images .image-container {
    display: inline-flex;
    flex-direction: column;   /* stack image + caption */
    align-items: flex-start;    /* push both to the right side of the page */
    margin: 0 !important;
    padding: 0 !important;
}

.article-images .image-container img {
    display: block;
    height: 85mm;             /* fixed height */
    width: auto;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    line-height: 0; 
}

.image-container img {
    margin: 0 !important;
    padding: 0 !important;
}

.caption-image1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 11px;
    line-height: 1 !important;
    font-size: 9pt;
    text-align: left;         /* align text to the left edge of the image */
    width: 100%;              /* take the full width of the image container */
}

.vector-body p {
    margin: 0 !important;
    padding: 0 !important;
}

.article-label-description,
.article-label-reflection,
.article-label-external-reference,
.article-label-quote,
.article-label-modification-date {
    text-transform: uppercase;
    margin-top: 11px !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    text-indent: 35px;
    line-height: 1;
    font-size: 14px;
    letter-spacing: 0.5px;
}
.article-description,
.article-reflection,
.article-external-reference,
.article-quote,
.article-modification-date {
    text-indent: 35px;
    line-height: 1.3;
    font-size: 20px;
    letter-spacing: 0.8px;
    margin-top: 0!important;
    padding-top: 0 !important;

    border-bottom: none;
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.5px;   
}

/* Don’t append raw URLs in print */
a[href]:after { content: none !important; }

/* Wrap long links gracefully */
.article-external-reference a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Keep label + content together for each section */
.article-label-description { break-after: avoid; page-break-after: avoid; }
.article-label-description + .article-description {
  break-before: avoid; page-break-before: avoid;
}

/* Do the same for the other sections */
.article-label-reflection { break-after: avoid; page-break-after: avoid; }
.article-label-reflection + .article-reflection {
  break-before: avoid; page-break-before: avoid;
}

.article-label-external-reference { break-after: avoid; page-break-after: avoid; }
.article-label-external-reference + .article-external-reference {
  break-before: avoid; page-break-before: avoid;
}

.article-label-quote { break-after: avoid; page-break-after: avoid; }
.article-label-quote + .article-quote {
  break-before: avoid; page-break-before: avoid;
}

.article-label-modification-date { break-after: avoid; page-break-after: avoid; }
.article-label-modification-date + .article-modification-date {
  break-before: avoid; page-break-before: avoid;
}

/* Help the whole content area avoid awkward first-line breaks */
#article-content { orphans: 3; widows: 3; }
Retrieved from "https://softwear.directory/index.php?title=MediaWiki:Print.css&oldid=5064"