Split screen and print CSS completely, add print parent element.
This commit is contained in:
Ian Gulliver
426
passmate.css
426
passmate.css
@@ -31,18 +31,6 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen {
|
|
||||||
side {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
overview {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
@@ -54,194 +42,236 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
overview,product {
|
||||||
font-family: 'copernicus';
|
display: none;
|
||||||
font-weight: 600;
|
|
||||||
align-self: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
@media screen {
|
||||||
font-family: 'proxima-nova';
|
overview {
|
||||||
font-weight: 600;
|
display: flex;
|
||||||
align-self: center;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'copernicus';
|
||||||
|
font-weight: 600;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: 'proxima-nova';
|
||||||
|
font-weight: 600;
|
||||||
|
align-self: center;
|
||||||
|
margin-top: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
blurb {
|
||||||
|
text-align: justify;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
max-width: 40em;
|
||||||
|
}
|
||||||
|
|
||||||
|
owner {
|
||||||
|
display: block;
|
||||||
|
width: 11em;
|
||||||
|
|
||||||
|
border-bottom: black 1px dotted;
|
||||||
|
|
||||||
|
font-family: 'proxima-nova';
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.5em;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
align-self: center;
|
||||||
|
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
recovery {
|
||||||
|
display: block;
|
||||||
|
width: 17em;
|
||||||
|
|
||||||
|
border-bottom: black 1px dotted;
|
||||||
|
|
||||||
|
font-family: 'inconsolata';
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.2em;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
align-self: center;
|
||||||
|
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: 40em;
|
||||||
|
margin: 0;
|
||||||
|
padding-inline-start: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol > li {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**********
|
@media print {
|
||||||
* Screen
|
product {
|
||||||
**********/
|
display: block;
|
||||||
overview {
|
width: 100%;
|
||||||
display: flex;
|
height: 100%;
|
||||||
flex-direction: column;
|
}
|
||||||
align-items: center;
|
|
||||||
margin: 1em;
|
h1 {
|
||||||
}
|
font-family: 'copernicus';
|
||||||
|
font-weight: 600;
|
||||||
overview h2 {
|
align-self: center;
|
||||||
margin-top: 1.2em;
|
}
|
||||||
}
|
|
||||||
|
h2 {
|
||||||
overview blurb {
|
font-family: 'proxima-nova';
|
||||||
max-width: 40em;
|
font-weight: 600;
|
||||||
}
|
align-self: center;
|
||||||
|
}
|
||||||
overview owner {
|
|
||||||
text-align: left;
|
side {
|
||||||
margin-top: 0;
|
page-break-inside: avoid;
|
||||||
}
|
|
||||||
|
width: 100%;
|
||||||
overview recovery {
|
height: 100%;
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1em;
|
display: flex;
|
||||||
font-size: 1.2em;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
overview ol {
|
side:nth-of-type(even) {
|
||||||
box-sizing: border-box;
|
transform: rotateZ(180deg);
|
||||||
max-width: 40em;
|
}
|
||||||
margin: 0;
|
|
||||||
padding-inline-start: 1em;
|
page {
|
||||||
}
|
flex-basis: 0;
|
||||||
|
flex-grow: 1;
|
||||||
overview ol > li {
|
flex-shrink: 0;
|
||||||
margin-bottom: 1em;
|
position: relative;
|
||||||
}
|
|
||||||
|
padding: 1.5em;
|
||||||
overview .selected {
|
|
||||||
font-weight: 600;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
}
|
||||||
/**********
|
|
||||||
* Print
|
page:first-of-type {
|
||||||
**********/
|
border-right: 1px black solid;
|
||||||
side {
|
}
|
||||||
page-break-inside: avoid;
|
|
||||||
|
pagenum {
|
||||||
width: 100%;
|
order: 99;
|
||||||
height: 100%;
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
flex-direction: row;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
side:nth-of-type(even) {
|
page:first-of-type pagenum {
|
||||||
transform: rotateZ(180deg);
|
}
|
||||||
}
|
|
||||||
|
page:last-of-type pagenum {
|
||||||
page {
|
align-self: flex-end;
|
||||||
flex-basis: 0;
|
}
|
||||||
flex-grow: 1;
|
|
||||||
flex-shrink: 0;
|
letter {
|
||||||
position: relative;
|
font-family: 'copernicus';
|
||||||
|
font-weight: 600;
|
||||||
padding: 1.5em;
|
font-size: 4em;
|
||||||
|
margin-bottom: 0.2em;
|
||||||
display: flex;
|
}
|
||||||
flex-direction: column;
|
|
||||||
}
|
page:last-of-type letter {
|
||||||
|
align-self: flex-end;
|
||||||
page:first-of-type {
|
}
|
||||||
border-right: 1px black solid;
|
|
||||||
}
|
blurb {
|
||||||
|
text-align: justify;
|
||||||
pagenum {
|
margin-bottom: 1em;
|
||||||
order: 99;
|
}
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
owner {
|
||||||
flex-direction: column;
|
display: block;
|
||||||
justify-content: flex-end;
|
width: 11em;
|
||||||
}
|
|
||||||
|
border-bottom: black 1px dotted;
|
||||||
page:first-of-type pagenum {
|
|
||||||
}
|
font-family: 'proxima-nova';
|
||||||
|
font-weight: 600;
|
||||||
page:last-of-type pagenum {
|
font-size: 1.5em;
|
||||||
align-self: flex-end;
|
|
||||||
}
|
text-align: center;
|
||||||
|
align-self: center;
|
||||||
letter {
|
|
||||||
font-family: 'copernicus';
|
margin-top: 1em;
|
||||||
font-weight: 600;
|
margin-bottom: 1em;
|
||||||
font-size: 4em;
|
}
|
||||||
margin-bottom: 0.2em;
|
|
||||||
}
|
recovery {
|
||||||
|
display: block;
|
||||||
page:last-of-type letter {
|
width: 17em;
|
||||||
align-self: flex-end;
|
|
||||||
}
|
border-bottom: black 1px dotted;
|
||||||
|
|
||||||
blurb {
|
font-family: 'inconsolata';
|
||||||
text-align: justify;
|
font-weight: 700;
|
||||||
margin-bottom: 1em;
|
font-size: 1.5em;
|
||||||
}
|
|
||||||
|
text-align: center;
|
||||||
owner {
|
align-self: center;
|
||||||
display: block;
|
|
||||||
width: 11em;
|
margin-top: 1em;
|
||||||
|
}
|
||||||
border-bottom: black 1px dotted;
|
|
||||||
|
passwordBlock {
|
||||||
font-family: 'proxima-nova';
|
display: grid;
|
||||||
font-weight: 600;
|
margin-bottom: 1.5em;
|
||||||
font-size: 1.5em;
|
font-size: 1.4em;
|
||||||
|
|
||||||
text-align: center;
|
grid-template:
|
||||||
align-self: center;
|
[password-start] "passwordLabel password" [password-end]
|
||||||
|
[website-start] "websiteLabel website" [website-end]
|
||||||
margin-top: 1em;
|
[username-start] "usernameLabel username" [username-end];
|
||||||
margin-bottom: 1em;
|
grid-template-columns: 5em auto;
|
||||||
}
|
grid-column-gap: 0.5em;
|
||||||
|
grid-row-gap: 0.2em;
|
||||||
recovery {
|
}
|
||||||
display: block;
|
|
||||||
width: 17em;
|
passwordLabel,websiteLabel,usernameLabel {
|
||||||
|
text-align: right;
|
||||||
border-bottom: black 1px dotted;
|
}
|
||||||
|
|
||||||
font-family: 'inconsolata';
|
password {
|
||||||
font-weight: 700;
|
display: block;
|
||||||
font-size: 1.5em;
|
font-family: 'inconsolata';
|
||||||
|
font-weight: 700;
|
||||||
text-align: center;
|
font-size: 1.1em;
|
||||||
align-self: center;
|
}
|
||||||
|
|
||||||
margin-top: 1em;
|
passwordSymbols {
|
||||||
}
|
color: darkgrey;
|
||||||
|
border: 1px darkgrey dotted;
|
||||||
passwordBlock {
|
border-radius: 1em;
|
||||||
display: grid;
|
padding: 0.2em;
|
||||||
margin-bottom: 1.5em;
|
margin: 0.2em;
|
||||||
font-size: 1.4em;
|
}
|
||||||
|
|
||||||
grid-template:
|
website,username {
|
||||||
[password-start] "passwordLabel password" [password-end]
|
width: 100%;
|
||||||
[website-start] "websiteLabel website" [website-end]
|
border-bottom: black 1px dotted;
|
||||||
[username-start] "usernameLabel username" [username-end];
|
margin-bottom: 0.17em;
|
||||||
grid-template-columns: 5em auto;
|
}
|
||||||
grid-column-gap: 0.5em;
|
|
||||||
grid-row-gap: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
passwordLabel,websiteLabel,usernameLabel {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
password {
|
|
||||||
display: block;
|
|
||||||
font-family: 'inconsolata';
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
passwordSymbols {
|
|
||||||
color: darkgrey;
|
|
||||||
border: 1px darkgrey dotted;
|
|
||||||
border-radius: 1em;
|
|
||||||
padding: 0.2em;
|
|
||||||
margin: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
website,username {
|
|
||||||
width: 100%;
|
|
||||||
border-bottom: black 1px dotted;
|
|
||||||
margin-bottom: 0.17em;
|
|
||||||
}
|
}
|
||||||
|
|||||||
21
passmate.js
21
passmate.js
@@ -23,14 +23,7 @@ class PassMate {
|
|||||||
|
|
||||||
this.addOverview(container);
|
this.addOverview(container);
|
||||||
|
|
||||||
this.addPages(container, 26 * 2 + 4);
|
this.addProduct(container);
|
||||||
this.addFrontPage(this.pages[1]);
|
|
||||||
this.addInstructions1(this.pages[2]);
|
|
||||||
this.addInstructions2(this.pages[3]);
|
|
||||||
this.addPasswordPages(
|
|
||||||
this.pages.slice(4, 4 + (26 * this.PAGES_PER_LETTER)),
|
|
||||||
this.PAGES_PER_LETTER,
|
|
||||||
this.PASSWORDS_PER_PAGE);
|
|
||||||
|
|
||||||
this.recoveryIn.innerText = this.SAFE_ALPHANUM.charAt(this.VERSION) + this.generateMasterPassword().join('');
|
this.recoveryIn.innerText = this.SAFE_ALPHANUM.charAt(this.VERSION) + this.generateMasterPassword().join('');
|
||||||
this.derivePasswords();
|
this.derivePasswords();
|
||||||
@@ -118,6 +111,18 @@ class PassMate {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addProduct(container) {
|
||||||
|
let product = this.addElement('product', container);
|
||||||
|
this.addPages(product, 26 * 2 + 4);
|
||||||
|
this.addFrontPage(this.pages[1]);
|
||||||
|
this.addInstructions1(this.pages[2]);
|
||||||
|
this.addInstructions2(this.pages[3]);
|
||||||
|
this.addPasswordPages(
|
||||||
|
this.pages.slice(4, 4 + (26 * this.PAGES_PER_LETTER)),
|
||||||
|
this.PAGES_PER_LETTER,
|
||||||
|
this.PASSWORDS_PER_PAGE);
|
||||||
|
}
|
||||||
|
|
||||||
addPages(container, numPages) {
|
addPages(container, numPages) {
|
||||||
let numSheets = numPages / 4;
|
let numSheets = numPages / 4;
|
||||||
for (let sheetNum = 0; sheetNum < numSheets; ++sheetNum) {
|
for (let sheetNum = 0; sheetNum < numSheets; ++sheetNum) {
|
||||||
|
|||||||
Reference in New Issue
Block a user