Adjust styles when a background cover is there

YesWiki · Sep 2, 2020 · a18d8f1 · a18d8f1
1 parent 414b66f
commit a18d8f1
Showing 1 changed file with 43 additions and 24 deletions.
diff --git a/presentation/styles/base.css b/presentation/styles/base.css
@@ -1,10 +1,10 @@
-.book-cover {
-  page: cover;
+.publication-cover {
+  page: publication-cover;
 }
 
 div.include {
   break-before: always;
-  page: section;
+  page: publication-section;
 }
   div.include .include {
     break-before: auto;
@@ -16,7 +16,7 @@ div.include {
   page: pagebreak;
 }
 
-.print .book-cover {
+.print .publication-cover {
   display: flex;
   height: 100%;
   flex-direction: column;
@@ -71,8 +71,13 @@ div.include {
   }
 }
 
-
-@page cover {
+/**
+ * Publication Cover
+ */
+@page publication-cover {
+  background-color: var(--header-title-color) !important;
+  background-size: cover;
+  color: var(--header-bg-color);
   break-after: always;
 
   @top-center {
@@ -84,32 +89,46 @@ div.include {
   }
 }
 
-@page section {
-  orphans: 6;
-}
+  .print .pagedjs_named_page.pagedjs_publication-cover_page * {
+    color: inherit;
+  }
 
-.print .book-cover h1 {
-  string-set: booktitle content(text);
-}
+  .print .pagedjs_publication-cover_page.has-background-image .publication-title,
+  .print .pagedjs_publication-cover_page.has-background-image .publication-description,
+  .print .pagedjs_publication-cover_page.has-background-image .publication-author {
+    background-color: var(--header-title-color);
+    padding: .5em 20px;
+    align-self: flex-start;
+  }
 
-.print .include h1:first-child {
-  string-set: sectiontitle content(text);
-}
+  .print .publication-author {
+    margin-top: auto;
+  }
 
-/* Cover page styling */
-.print .pagedjs_named_page.pagedjs_cover_page {
-  background-color: var(--header-title-color) !important;
-  color: var(--header-bg-color);
-}
-  .print .pagedjs_named_page.pagedjs_cover_page * {
-    color: inherit;
+  /* empty element are hidden */
+  .print .pagedjs_publication-cover_page.has-background-image *:empty {
+    display: none;
   }
 
-  .print .pagedjs_named_page.pagedjs_cover_page .pagedjs_page_content > div {
+  .print .pagedjs_named_page.pagedjs_publication-cover_page .pagedjs_page_content > div {
     height: 100%;
   }
 
-/* Content page styling */
+  .print .publication-cover h1 {
+    string-set: booktitle content(text);
+  }
+
+/**
+ * Publication Section
+ */
+@page publication-section {
+  orphans: 6;
+}
+
+  .print .include h1:first-child {
+    string-set: sectiontitle content(text);
+  }
+
 
 /* We hide a .well if it closes a page */
 .print .include .well:last-child {