i have a `@page nofooter` that looks like:
and my `@page :right` & `@page :left` have `content` that contains title, chapter name & page number.
i use `@page nofooter` to remove all of that on blank pages but it somehow appears on my cover image.
is there a way to target `@page :blank` or `@page :first` by extending `@page nofooter`?
otherwise it gets repeated.
i tried:
but that doesn't work.
also, tried:
but nope. i'm assuming `page` property only works on html elements like `div`, `span` or classes.
final way:
but that doesn't work either.
the only way i find is repeating code again like:
is there a better way?
@page nofooter {
@top-right {
content: none;
}
@top-left {
content: none;
}
@bottom-right {
content: none;
}
@bottom-left {
content: none;
}
}
and my `@page :right` & `@page :left` have `content` that contains title, chapter name & page number.
i use `@page nofooter` to remove all of that on blank pages but it somehow appears on my cover image.
is there a way to target `@page :blank` or `@page :first` by extending `@page nofooter`?
otherwise it gets repeated.
i tried:
@page cover {
page: nofooter;
background: url('./cover.png');
background-size: cover;
}
but that doesn't work.
also, tried:
@page :blank {
page: nofooter;
}
@page :first {
page: nofooter;
}
but nope. i'm assuming `page` property only works on html elements like `div`, `span` or classes.
final way:
@page nofooter,
@page :blank,
@page :first {
@top-right {
content: none;
}
@top-left {
content: none;
}
@bottom-right {
content: none;
}
@bottom-left {
content: none;
}
}
but that doesn't work either.
the only way i find is repeating code again like:
@page :blank {
@top-right {
content: none;
}
@top-left {
content: none;
}
@bottom-right {
content: none;
}
@bottom-left {
content: none;
}
}
@page :first {
@top-right {
content: none;
}
@top-left {
content: none;
}
@bottom-right {
content: none;
}
@bottom-left {
content: none;
}
}
@page nofooter {
@top-right {
content: none;
}
@top-left {
content: none;
}
@bottom-right {
content: none;
}
@bottom-left {
content: none;
}
}
is there a better way?