PdfCSS:APRJA Minor Tech

@charset "utf-8"; 

@import url("https://cc.vvvvvvaria.org/fonts/velvetyne/happy-times-at-the-IKOB/stylesheet.css");

@font-face {
    font-family: 'AllCon-Regular';
    src: url('/fonts/simoon/AC/AllCon-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


:root{
    --first-heading-size: 36px;
    --first-heading-line-height: calc(var(--line-height)*2); 
    --second-heading-size: 21px;
    --second-heading-line-height: calc(var(--line-height)*1.5);
    --body-font: 'AllCon-Regular';
    --heading-font: var(--author-font);
    --author-font: "happy-times", serif;
    --line-height: 21px;
    --body-size: 15px;
    --small-text: 12px;
    --accent-color: #2A9277;

}

/*------------------page rules */

@page{
    size: 210mm 297mm portrait;
    /*margin: 100px 100px 90px 90px;*/
    margin: 80px;
}
@page:left{

    font-family: var(--heading-font);

    @top-left{
        content: "APRJA Volume 12, Issue 1, 2023";
        color: var(--accent-color);
        font-size: var(--small-text);
    }

    @bottom-left{
        content: counter(page);
    }
}
@page:right{
    
    font-family: var(--heading-font);

    @top-right {
        content: string(title);
        color: var(--accent-color);
        text-overflow: ellipsis;
        overflow:hidden;
        white-space:nowrap;
        font-size: var(--small-text);
    }

    @bottom-right{
        content: counter(page);
    }
}
@page:first{
    background-color: var(--accent-color);

    @bottom-right, 
    @top-left, 
    @top-right {
        content: none;
    }
}

@page contribution:first{
    /* exception for running-header on the first page of a contribution */
    @top-right{ content: none; } 
}

div.contribution,
div#contributors { 
page: contribution; 
} 

/*-----------------cover */

div#cover {
    break-after: always;
}

div#cover-title p{
    font-size: var(--first-heading-size);
    font-weight: 400;
    line-height: var(--first-heading-line-height);
    font-family: var(--heading-font);
    padding-bottom: var(--first-heading-size);
    margin-top: 0;
}

div.authors{
    font-size: var(--second-heading-size);
    font-family: var(--body-font);
    line-height: var(--second-heading-line-height);
}

/*-----------------articles */
body,
table.wikitable{
    hyphens: auto;
    line-height: var(--line-height);
    font-family: var(--body-font);
}

div.article{
    break-after: always;
}

div.article p,
div.article h2{
    /*columns: 2;
    column-fill: auto;*/
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: var(--body-size);
    font-family: var(--body-font);
    line-height: var(--line-height);
}

/* text indent paragraphs  <-- hard to get this to work well, so commenting out for now
div.article p{
    display: block;
    text-indent: 1em;
}
div.article p:nth-of-type(2),
blockquote p{
    text-indent: 0;
}*/

blockquote {
    border-left: 2px solid lightgrey;
    padding-left: var(--line-height);
}

/*----notes */
.references,
.reference-text {
    font-family:var(--body-font);
    font-size:var(--small-text);
}

/*----article title*/
div.article h1 {
    color: var(--accent-color);
    font-weight: 400;
    font-size: var(--first-heading-size);
    line-height: var(--first-heading-line-height);
    font-family: var(--heading-font);
    padding-bottom: var(--first-heading-size);
    margin-top: 0;
    columns: 1;
    text-transform: uppercase;
    string-set: title content(text);
}

/*----article author*/
div.article > p b:nth-of-type(1){
    font-weight: 400;
    color: var(--accent-color);
    font-size: var(--first-heading-size);
    line-height: var(--first-heading-line-height);
    font-family: var(--heading-font);
    padding-bottom: var(--first-heading-size);
    margin-top: 0;
    break-after: always;
}

div.article > h2 {
    font-family: var(--heading-font);
    font-size: var(--second-heading-size);
    line-height: var(--second-heading-line-height);
    font-weight: 400;
}

/*----prevent sup, sub from interfering with baseline*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/*----------------manual page and column breaks*/

div.page-break {
    break-after: always;
}

/*---------------colophon, contributors, editorial pages*/

div#colophon {
    width: 100%;
    break-before: always;
    break-after: always;
}

div#contributors h1,
div#editorial h1{
    font-size:var(--first-heading-size);
    font-weight: 400;
    line-height:var(--first-heading-line-height);
    color:var(--accent-color);    
}

div#contributors p {
    font-family:var(--body-font);
    font-size:var(--body-size);
    line-height:var(--line-height);
}

/*----------------table of contents */

h2#mw-toc-heading {
    color: var(--accent-color);
    font-size: var(--first-heading-size);
    line-height: var(--first-heading-line-height);
    font-family: var(--heading-font);
    margin-top: 0;
    font-weight: 400;
}

div.toc li {
    text-indent: -20px;
    list-style: none !important;
    font-family: var(--body-font);
    margin: 0;
}

/*----- "Contents"*/
div.toc p:nth-child(1) {
    font-family: var(--heading-font);
    font-size:var(--first-heading-size);
    color:var(--accent-color);
}

/*----- adding page numbers to the TOC*/
div.toc a::before {
    content: "" target-counter(attr(href url), page);
    text-decoration: none !important;
    color: black;
    width: 20px;
    display: inline-block;
}

/*-----------------images */

div.article img{
    /* width: 642px; <-- 642 is the limit, but still too wide & some images break the PDF */
    width: 400px;
    height: auto;
    object-fit: scale-down;
}


div.thumbinner {
    width: 100%;
}


div#aprja-logo img{
    width: 80px;
    height: auto;
}


/*-----------------image captions */

div.thumbcaption {
    font-size: var(--small-text);
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}