CertificatePrint.css: Difference between revisions

From Claremont MakerSpace
(Adam.goldsmith changed the content model of the page CertificatePrint.css from "wikitext" to "CSS")
Tag: content model change
No edit summary
Line 48: Line 48:
             vertical-align: bottom;
             vertical-align: bottom;
             padding-bottom: 0.2em;
             padding-bottom: 0.2em;
        }
        @top-right {
            content: '';
            background-image: url("https://claremontmakerspace.org/wp-content/uploads/2018/06/cms_logo.png");
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: 100%;
            width: 7em;
         }
         }



Revision as of 16:35, 31 July 2020

#cert-data {
    string-set: certname attr(data-name),
                certversion attr(data-version);
    /* Can't be `display: none;`, as it breaks string-set */
    visibility: hidden;
    position: absolute;
    bottom: 0px;
}

.checklist li::marker {
    content: "□\00A0";
    padding-right: 1em;
}

@media not print {
    .print-only {
        display: none;
    }
}

@media print {
    #firstHeading,
    #siteSub,
    .printfooter,
    .no-print {
        display: none;
    }
    
    .qrlite-result img {
        width: 1.5in;
    }

    /* Add link target as text, except mailto links */
    a:not([href^="mailto:"])::after {
        content: " [" attr(href) "]";
        color: initial;
        text-decoration: none;
    }

    @page {
        size: letter portrait;
        margin: 1in;

        @top-left {
            content: "Certification: " string(certname);
            font-size: 1.2em;
            color: #444;
            vertical-align: bottom;
            padding-bottom: 0.2em;
        }

        @top-right {
            content: '';
            background-image: url("https://claremontmakerspace.org/wp-content/uploads/2018/06/cms_logo.png");
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: 100%;
            width: 7em;
        }

        @bottom-left {
            content: string(certversion);
            color: #444;
        }

        @bottom-right-corner {
            content: counter(page);
        }
    }
}