Add XSLT stylesheet for OPDS feeds

This commit is contained in:
Alex Cabal 2022-06-20 13:52:39 -05:00
parent 3b26e49509
commit 305a9d298b
10 changed files with 182 additions and 56 deletions

View file

@ -1186,7 +1186,22 @@ main.ebooks > aside.alert + ol{
margin-top: 2rem;
}
main.ebooks > ol{
.opds ol.ebooks-list.list{
margin-top: 4rem;
}
.opds .download{
font-weight: bold;
margin-top: 1rem;
}
.opds .download + ul,
.opds .download + ul > li{
margin-top: 0;
}
ol.ebooks-list.grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-gap: 4rem;
@ -1195,7 +1210,7 @@ main.ebooks > ol{
list-style: none;
}
main.ebooks > ol.list{
ol.ebooks-list.list{
display: flex;
flex-direction: column;
gap: 0;
@ -1205,50 +1220,54 @@ main.ebooks > ol.list{
max-width: 30rem;
}
main.ebooks > ol > li{
ol.ebooks-list > li{
margin: 0;
text-align: center;
}
main.ebooks > ol.list > li{
ol.ebooks-list.list > li{
display: grid;
grid-template-columns: 6rem 1fr;
grid-column-gap: 1rem;
grid-template-rows: auto auto 1fr;
}
main.ebooks > ol.list > li + li {
ol.ebooks-list.list > li + li {
margin-top: 2rem;
}
main.ebooks > ol.list > li > a{
ol.ebooks-list.list > li > a{
grid-row: 1 / span 3;
}
main.ebooks > ol.list ul.tags{
.opds ol.ebooks-list.list > li > a{
grid-row: 1 / span 5;
}
ol.ebooks-list.list ul.tags{
display: flex;
justify-content: flex-start;
margin-left: -.25rem;
margin-top: .25rem;
}
main.ebooks > ol.list ul.tags li{
ol.ebooks-list.list ul.tags li{
margin-left: .25rem;
margin-top: .25rem;
}
main.ebooks > ol.list > li p{
ol.ebooks-list.list > li p{
text-align: left;
}
main.ebooks > ol a[tabindex]{
ol.ebooks-list a[tabindex]{
display: inline-block;
transition: all .2s ease;
position: relative;
font-size: 0;
}
main.ebooks > ol a[tabindex][data-ordinal]::before{
ol.ebooks-list a[tabindex][data-ordinal]::before{
display: block;
content: "№ "attr(data-ordinal);
position: absolute;
@ -1265,29 +1284,29 @@ main.ebooks > ol a[tabindex][data-ordinal]::before{
color: var(--dark-body-text);
}
main.ebooks > ol a[tabindex]:hover{
ol.ebooks-list a[tabindex]:hover{
transform: scale(1.05);
color: unset;
}
main.ebooks > ol a[tabindex]:hover img{
ol.ebooks-list a[tabindex]:hover img{
box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
}
main.ebooks > ol > li a[tabindex]:active{
ol.ebooks-list > li a[tabindex]:active{
transform: scale(1.025);
transition: none;
box-shadow: none;
}
main.ebooks > ol > li p{
ol.ebooks-list > li p{
margin: 0;
text-align: center;
-webkit-hyphens: none;
hyphens: none;
}
main.ebooks > ol > li img{
ol.ebooks-list > li img{
box-sizing: border-box;
max-width: 100%;
height: auto;
@ -1295,24 +1314,27 @@ main.ebooks > ol > li img{
border-radius: .25rem;
}
main.ebooks > ol > li > p:nth-of-type(1) > a{
ol.ebooks-list > li > p:nth-of-type(1) > a{
font-weight: bold;
text-decoration: none;
display: flex;
justify-content: center;
}
main.ebooks > ol.list > li p.author a,
main.ebooks > ol.list > li > p:nth-of-type(1) > a{
ol.ebooks-list.list > li p.author a,
ol.ebooks-list.list > li > p:nth-of-type(1) > a{
display: inline;
}
main.ebooks > ol > li > a:first-child{
ol.ebooks-list > li > a:first-child{
font-size: 0; /* for correct focus outline */
}
main.ebooks > ol > li p.author a{
ol.ebooks-list > li p.author{
font-style: italic;
}
ol.ebooks-list > li p.author a{
text-decoration: none;
display: flex;
justify-content: center;
@ -1376,11 +1398,6 @@ figure{
margin-top: 1rem;
}
.rss ul.tags + p{
font-style: italic;
margin-top: 0;
}
ul.tags{
list-style: none;
display: flex;
@ -1485,7 +1502,7 @@ p.no-results{
text-align: center;
}
.us-pd-warning{
.s-pd-warning{
font-style: italic;
margin-top: 1rem;
}
@ -2479,8 +2496,13 @@ ul.feed p{
margin: 0;
}
ul.feed p:last-child{
font-style: italic;
.url{
font-family: "Fira Mono", monospace;
font-size: .8rem;
}
.rss > li p:last-child{
margin-top: 0;
}
@media (hover: none) and (pointer: coarse){ /* target ipads and smartphones without a mouse */
@ -2655,7 +2677,7 @@ ul.feed p:last-child{
}
@media(max-width: 900px){
main.ebooks > ol{
ol.ebooks-list.grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@ -2751,7 +2773,7 @@ ul.feed p:last-child{
}
@media(max-width: 700px){
main.ebooks > ol{
ol.ebooks-list.grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@ -2995,7 +3017,7 @@ ul.feed p:last-child{
}
@media(max-width: 470px){
main.ebooks > ol{
ol.ebooks-list.grid{
grid-gap: 2rem;
}
@ -3047,7 +3069,7 @@ ul.feed p:last-child{
hyphens: auto;
}
main.ebooks > ol{
ol.ebooks-list.grid{
grid-template-columns: 1fr;
}
@ -3101,11 +3123,11 @@ ul.feed p:last-child{
padding: 1rem;
}
main.ebooks > ol.list > li{
ol.ebooks-list.list > li{
grid-template-columns: 1fr;
}
main.ebooks > ol.list > li img{
ol.ebooks-list.list > li img{
max-width: 50%;
margin-bottom: 1rem;
}
@ -3141,8 +3163,8 @@ ul.feed p:last-child{
article.ebook section#sources ul li a[class]::before,
article.ebook #more-ebooks img,
article.ebook #more-ebooks a:active img,
main.ebooks > ol a[tabindex],
main.ebooks > ol > li a[tabindex]:active,
ol.ebooks-list a[tabindex],
ol.ebooks-list > li a[tabindex]:active,
label.select > span + span::after,
label.search:focus-within::before,
label.search:hover::before,

View file

@ -64,7 +64,7 @@ input::placeholder{
color: rgba(255, 255, 255, .75);
}
main.ebooks > ol img:hover{
ol.ebooks-list img:hover{
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
}