nicolas.marsal
3 years ago
12 changed files with 290 additions and 41 deletions
@ -0,0 +1,33 @@
|
||||
/*! |
||||
* HTML-Sheets-of-Paper (https://github.com/delight-im/HTML-Sheets-of-Paper) |
||||
* Copyright (c) delight.im (https://www.delight.im/) |
||||
* Licensed under the MIT License (https://opensource.org/licenses/MIT) |
||||
*/ |
||||
|
||||
.page { |
||||
/* Styles for better appearance on screens only -- are reset to defaults in print styles later */ |
||||
|
||||
/* Reflect the paper width in the screen rendering (must match size from @page rule) */ |
||||
width: 21cm; |
||||
/* Reflect the paper height in the screen rendering (must match size from @page rule) */ |
||||
min-height: 29.7cm; |
||||
|
||||
/* Reflect the actual page margin/padding on paper in the screen rendering (must match margin from @page rule) */ |
||||
padding-left: 0cm; |
||||
padding-top: 0cm; |
||||
padding-right: 0cm; |
||||
padding-bottom: 0cm; |
||||
} |
||||
/* Use CSS Paged Media to switch from continuous documents to sheet-like documents with separate pages */ |
||||
@page { |
||||
/* You can only change the size, margins, orphans, widows and page breaks here */ |
||||
|
||||
/* Paper size and page orientation */ |
||||
size: A4 portrait; |
||||
|
||||
/* Margin per single side of the page */ |
||||
margin-left: 2cm; |
||||
margin-top: 2cm; |
||||
margin-right: 2cm; |
||||
margin-bottom: 2cm; |
||||
} |
||||
@ -0,0 +1,140 @@
|
||||
/*! |
||||
* HTML-Sheets-of-Paper (https://github.com/delight-im/HTML-Sheets-of-Paper) |
||||
* Copyright (c) delight.im (https://www.delight.im/) |
||||
* Licensed under the MIT License (https://opensource.org/licenses/MIT) |
||||
*/ |
||||
|
||||
html, body { |
||||
/* Reset the document's margin values */ |
||||
margin: 0; |
||||
/* Reset the document's padding values */ |
||||
padding: 0; |
||||
/* Use the platform's native font as the default */ |
||||
font-family: "Roboto", -apple-system, "San Francisco", "Segoe UI", "Helvetica Neue", sans-serif; |
||||
/* Define a reasonable base font size */ |
||||
font-size: 12pt; |
||||
|
||||
/* Styles for better appearance on screens only -- are reset to defaults in print styles later */ |
||||
|
||||
/* Use a non-white background color to make the content areas stick out from the full page box */ |
||||
background-color: #eee; |
||||
} |
||||
/* Styles that are shared by all elements */ |
||||
* { |
||||
/* Include the content box as well as padding and border for precise definitions */ |
||||
box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
} |
||||
.page { |
||||
/* Styles for better appearance on screens only -- are reset to defaults in print styles later */ |
||||
|
||||
/* Divide single pages with some space and center all pages horizontally */ |
||||
margin: 1cm auto; |
||||
/* Define a white paper background that sticks out from the darker overall background */ |
||||
background: #fff; |
||||
/* Show a drop shadow beneath each page */ |
||||
box-shadow: 0 4px 5px rgba(75, 75, 75, 0.2); |
||||
/* Override outline from user agent stylesheets */ |
||||
outline: 0; |
||||
} |
||||
/* Defines a class for manual page breaks via inserted .page-break element */ |
||||
div.page-break { |
||||
page-break-after: always; |
||||
} |
||||
/* Simulates the behavior of manual page breaks from `print` mode in `screen` mode */ |
||||
@media screen { |
||||
/* Renders the border and shadow at the bottom of the upper virtual page */ |
||||
div.page-break::before { |
||||
content: ""; |
||||
display: block; |
||||
/* Give a sufficient height to this element so that its drop shadow is properly rendered */ |
||||
height: 0.8cm; |
||||
/* Offset the negative extra margin at the left of the non-pseudo element */ |
||||
margin-left: 0.5cm; |
||||
/* Offset the negative extra margin at the right of the non-pseudo element */ |
||||
margin-right: 0.5cm; |
||||
/* Make the bottom area appear as a part of the page margins of the upper virtual page */ |
||||
background-color: #fff; |
||||
/* Show a drop shadow beneath the upper virtual page */ |
||||
box-shadow: 0 6px 5px rgba(75, 75, 75, 0.2); |
||||
} |
||||
/* Renders the empty space as a divider between the two virtual pages that are actually two parts of the same page */ |
||||
div.page-break { |
||||
display: block; |
||||
/* Assign the intended height plus the height of the pseudo element */ |
||||
height: 1.8cm; |
||||
/* Apply a negative margin at the left to offset the page margins of the page plus some negative extra margin to paint over the border and shadow of the page */ |
||||
margin-left: -2.5cm; |
||||
/* Apply a negative margin at the right to offset the page margins of the page plus some negative extra margin to paint over the border and shadow of the page */ |
||||
margin-right: -2.5cm; |
||||
/* Create the bottom page margin on the upper virtual page (minus the height of the pseudo element) */ |
||||
margin-top: 1.2cm; |
||||
/* Create the top page margin on the lower virtual page */ |
||||
margin-bottom: 2cm; |
||||
/* Let this page appear as empty space between the virtual pages */ |
||||
background: #eee; |
||||
} |
||||
} |
||||
/* For top-level headings only */ |
||||
h1 { |
||||
/* Force page breaks after */ |
||||
page-break-before: always; |
||||
} |
||||
/* For all headings */ |
||||
h1, h2, h3, h4, h5, h6 { |
||||
/* Avoid page breaks immediately */ |
||||
page-break-after: avoid; |
||||
} |
||||
/* For all paragraph tags */ |
||||
p { |
||||
/* Reset the margin so that the text starts and ends at the expected marks */ |
||||
margin: 0; |
||||
} |
||||
/* For adjacent paragraph tags */ |
||||
p + p { |
||||
/* Restore the spacing between the paragraphs */ |
||||
margin-top: 0.5cm; |
||||
} |
||||
/* For links in the document */ |
||||
a { |
||||
/* Prevent colorization or decoration */ |
||||
text-decoration: none; |
||||
color: black; |
||||
} |
||||
/* For tables in the document */ |
||||
table { |
||||
/* Avoid page breaks inside */ |
||||
page-break-inside: avoid; |
||||
} |
||||
/* Use CSS Paged Media to switch from continuous documents to sheet-like documents with separate pages */ |
||||
@page { |
||||
/* You can only change the size, margins, orphans, widows and page breaks here */ |
||||
|
||||
/* Require that at least this many lines of a paragraph must be left at the bottom of a page */ |
||||
orphans: 4; |
||||
/* Require that at least this many lines of a paragraph must be left at the top of a new page */ |
||||
widows: 2; |
||||
} |
||||
/* When the document is actually printed */ |
||||
@media print { |
||||
html, body { |
||||
/* Reset the document's background color */ |
||||
background-color: #fff; |
||||
} |
||||
.page { |
||||
/* Reset all page styles that have been for better screen appearance only */ |
||||
/* Break cascading by using the !important rule */ |
||||
/* These resets are absolute must-haves for the print styles and the specificity may be higher elsewhere */ |
||||
width: initial !important; |
||||
min-height: initial !important; |
||||
margin: 0 !important; |
||||
padding: 0 !important; |
||||
border: initial !important; |
||||
border-radius: initial !important; |
||||
background: initial !important; |
||||
box-shadow: initial !important; |
||||
|
||||
/* Force page breaks after each .page element of the document */ |
||||
page-break-after: always; |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
<template> |
||||
<div style="padding-left: 20px; padding-top: 20px; padding-bottom: 8px"> |
||||
{{ presentation }} |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts"> |
||||
import { defineComponent } from "vue"; |
||||
import informations from "@/data/informations"; |
||||
|
||||
export default defineComponent({ |
||||
name: "MyPresentation", |
||||
data() { |
||||
return { |
||||
presentation: informations.presentation, |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
Loading…
Reference in new issue