image stuffs

master
Stephen Kerr 6 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 "images.css"; /* Using a string */
:root{
/* --spot-color-1: #53018e; */
@ -60,8 +61,6 @@
}
}
}
a{
text-decoration: none;
color: #000;
@ -73,20 +72,6 @@ a{
width: 35mm;
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{
font-size: 0.8em;
line-height: 1.1;
@ -99,48 +84,11 @@ a{
letter-spacing: -0.1px;
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{
font-size: 1.2em;
line-height: 1;
string-set: title content(text);
}
h1{
font-size: 1.8rem;
break-after: page;
@ -163,37 +111,20 @@ h6{
text-align: center;
}
ol, ul{padding: 0;}
div#licence ol, div#licence ul{
padding-left: 5mm;
}
.page-break{
break-after: page;
}
section{
break-after: page;
}
.section{
break-before: left;
page: section;
}
#section-5 h3, #section-21 h3{
break-before: page;
}
::selection{
background-color: var(--spot-color-1);
color: #ccc;
}
.small-images figure{
margin: 1mm;
}
.small-images figcaption{
margin-top: -2mm;
}
.small-images img{
width: 70mm;
}
.toc{
break-before: right;
}
@ -209,17 +140,4 @@ section{
.toc-title a::after{
content: target-counter(attr(href url), page);
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