image stuffs

master
Stephen Kerr 2 months ago
parent faae4b5b24
commit bb06568d57

1
.gitignore vendored

@ -0,0 +1 @@
images/

@ -0,0 +1,62 @@
/* Image sizes */
figure{
margin: 5mm 0;
}
.full-image{
break-before: right;
height: 186mm;
width: 133mm;
margin: -13mm 0 0 -30mm;
position: relative;
object-fit: cover;
}
.full-image figure{
margin: 0;
}
.full-image figcaption{
position: absolute;
bottom: 15mm;
left: 30mm;
z-index: 10;
padding-right: 20mm;
}
.full-image img{
height: 186mm;
width: 133mm;
object-fit: cover;
}
.small-images figure{
margin: 1mm;
}
.small-images figcaption{
margin-top: -2mm;
}
.small-images img{
width: 70mm;
}
.white-caption + figcaption{
color: #fff;
}
.centered-image, .centered-text{
break-before: right;
height: 186mm;
width: 133mm;
margin: -13mm 0 0 -30mm;
position: relative;
object-fit: cover;
display: flex;
align-items: center;
}
.centered-image figure{
margin: 0 0 0 30mm;
width: 90mm;
}
.centered-text > *{
width: 100%;
text-align: center;
}

@ -1,4 +1,5 @@
/* @import url('https://pad.xpub.nl/p/sixx-print-css/export/txt') */ /* @import url('https://pad.xpub.nl/p/sixx-print-css/export/txt') */
@import "images.css"; /* Using a string */
:root{ :root{
/* --spot-color-1: #53018e; */ /* --spot-color-1: #53018e; */
@ -60,8 +61,6 @@
} }
} }
} }
a{ a{
text-decoration: none; text-decoration: none;
color: #000; color: #000;
@ -73,20 +72,6 @@ a{
width: 35mm; width: 35mm;
display: inline-block; display: inline-block;
} }
.centered-image, .centered-text{
display: flex;
align-items: center;
/* justify-content: center; */
}
.centered-image figure{
margin: 0 0 0 30mm;
width: 90mm;
}
.centered-text > *{
width: 100%;
text-align: center;
}
.code pre{ .code pre{
font-size: 0.8em; font-size: 0.8em;
line-height: 1.1; line-height: 1.1;
@ -99,48 +84,11 @@ a{
letter-spacing: -0.1px; letter-spacing: -0.1px;
line-height: var(--baseline); line-height: var(--baseline);
} }
figure{
margin: 5mm 0;
}
.full-image, .centered-image, .centered-text{
break-before: right;
height: 186mm;
width: 133mm;
margin: -13mm 0 0 -30mm;
position: relative;
object-fit: cover;
}
.full-image figure{
margin: 0;
}
.full-image figcaption{
position: absolute;
bottom: 15mm;
left: 30mm;
z-index: 10;
padding-right: 20mm;
}
.white-caption + figcaption{
color: #fff;
}
.full-image img{
height: 186mm;
width: 133mm;
object-fit: cover;
}
img{
width: 100%;
break-before: page;
}
h1,h2,h3,h4,h5,h6{ h1,h2,h3,h4,h5,h6{
font-size: 1.2em; font-size: 1.2em;
line-height: 1; line-height: 1;
string-set: title content(text); string-set: title content(text);
} }
h1{ h1{
font-size: 1.8rem; font-size: 1.8rem;
break-after: page; break-after: page;
@ -163,37 +111,20 @@ h6{
text-align: center; text-align: center;
} }
ol, ul{padding: 0;} ol, ul{padding: 0;}
div#licence ol, div#licence ul{
padding-left: 5mm;
}
.page-break{ .page-break{
break-after: page; break-after: page;
} }
section{ section{
break-after: page; break-after: page;
} }
.section{ .section{
break-before: left; break-before: left;
page: section; page: section;
} }
#section-5 h3, #section-21 h3{
break-before: page;
}
::selection{ ::selection{
background-color: var(--spot-color-1); background-color: var(--spot-color-1);
color: #ccc; color: #ccc;
} }
.small-images figure{
margin: 1mm;
}
.small-images figcaption{
margin-top: -2mm;
}
.small-images img{
width: 70mm;
}
.toc{ .toc{
break-before: right; break-before: right;
} }
@ -209,17 +140,4 @@ section{
.toc-title a::after{ .toc-title a::after{
content: target-counter(attr(href url), page); content: target-counter(attr(href url), page);
float: right; float: right;
}
#worry-dolls figcaption{display: none;}
#worry-dolls img{
break-before: page;
display: block;
position: relative;
top: 20mm;
left: 50mm;
width: 10mm;
}
.yt-tarot-images{
margin-top: 29.5mm;
} }
Loading…
Cancel
Save