437 lines
8.3 KiB
CSS
437 lines
8.3 KiB
CSS
@font-face {
|
|
font-family: 'copernicus';
|
|
src: url('copernicus-semibold.woff2') format('woff2');
|
|
font-weight: 600;
|
|
font-display: block;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'inconsolata';
|
|
src: url('inconsolata-bold.woff2') format('woff2');
|
|
font-weight: 700;
|
|
font-display: block;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'proxima-nova';
|
|
src: url('proxima-nova-regular.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-display: block;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'proxima-nova';
|
|
src: url('proxima-nova-semibold.woff2') format('woff2');
|
|
font-weight: 600;
|
|
font-display: block;
|
|
}
|
|
|
|
@page {
|
|
size: letter landscape;
|
|
margin: 0;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'proxima-nova';
|
|
font-weight: 400;
|
|
height: 100%;
|
|
|
|
color: black;
|
|
background-color: white;
|
|
}
|
|
|
|
overview,product {
|
|
display: none;
|
|
}
|
|
|
|
@media screen, speech {
|
|
overview {
|
|
display: flex;
|
|
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;
|
|
}
|
|
|
|
blurb.side-one,blurb.side-two {
|
|
display: none;
|
|
}
|
|
|
|
overview.side-one blurb.side-one {
|
|
display: block;
|
|
}
|
|
|
|
overview.side-two blurb.side-two {
|
|
display: block;
|
|
}
|
|
|
|
a {
|
|
margin-bottom: 1em;
|
|
padding: 0.1em;
|
|
max-width: 40em;
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
|
|
input {
|
|
display: block;
|
|
|
|
border: 0;
|
|
border-bottom: black 1px dotted;
|
|
|
|
margin-top: 0.2em;
|
|
margin-bottom: 0.2em;
|
|
|
|
padding: 0.1em;
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
input.owner {
|
|
width: 11em;
|
|
|
|
font-family: 'proxima-nova';
|
|
font-weight: 600;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
input.recovery {
|
|
width: 17em;
|
|
|
|
font-family: 'inconsolata';
|
|
font-weight: 700;
|
|
font-size: 1.2em;
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
label.recovery {
|
|
text-align: center;
|
|
}
|
|
|
|
button {
|
|
/* ugly hack to give the focus box breathing room without moving the text */
|
|
position: relative;
|
|
left: -0.1em;
|
|
padding: 0.1em;
|
|
|
|
border: none;
|
|
background: none;
|
|
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button.selectable {
|
|
font-weight: normal;
|
|
}
|
|
|
|
button.selected {
|
|
font-weight: bold;
|
|
}
|
|
|
|
ol {
|
|
box-sizing: border-box;
|
|
max-width: 40em;
|
|
margin: 0;
|
|
padding-inline-start: 1em;
|
|
}
|
|
|
|
ol > li {
|
|
margin-bottom: 1em;
|
|
padding: 0.1em;
|
|
}
|
|
|
|
li.side-one,li.side-two {
|
|
display: none;
|
|
}
|
|
|
|
overview.side-one li.side-one {
|
|
display: list-item;
|
|
}
|
|
|
|
overview.side-two li.side-two {
|
|
display: list-item;
|
|
}
|
|
|
|
.selected {
|
|
font-weight: 600;
|
|
}
|
|
|
|
*:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 2pt 1pt maroon;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
product {
|
|
display: grid;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
product.side-two {
|
|
grid-template:
|
|
[side1-start] "page56 page1" 100% [side1-end]
|
|
[side2-start] "page55 page2" 100% [side2-end]
|
|
[side3-start] "page54 page3" 100% [side3-end]
|
|
[side4-start] "page53 page4" 100% [side4-end]
|
|
[side5-start] "page52 page5" 100% [side5-end]
|
|
[side6-start] "page51 page6" 100% [side6-end]
|
|
[side7-start] "page50 page7" 100% [side7-end]
|
|
[side8-start] "page49 page8" 100% [side8-end]
|
|
[side9-start] "page48 page9" 100% [side9-end]
|
|
[side10-start] "page47 page10" 100% [side10-end]
|
|
[side11-start] "page46 page11" 100% [side11-end]
|
|
[side12-start] "page45 page12" 100% [side12-end]
|
|
[side13-start] "page44 page13" 100% [side13-end]
|
|
[side14-start] "page43 page14" 100% [side14-end]
|
|
[side15-start] "page42 page15" 100% [side15-end]
|
|
[side16-start] "page41 page16" 100% [side16-end]
|
|
[side17-start] "page40 page17" 100% [side17-end]
|
|
[side18-start] "page39 page18" 100% [side18-end]
|
|
[side19-start] "page38 page19" 100% [side19-end]
|
|
[side20-start] "page37 page20" 100% [side20-end]
|
|
[side21-start] "page36 page21" 100% [side21-end]
|
|
[side22-start] "page35 page22" 100% [side22-end]
|
|
[side23-start] "page34 page23" 100% [side23-end]
|
|
[side24-start] "page33 page24" 100% [side24-end]
|
|
[side25-start] "page32 page25" 100% [side25-end]
|
|
[side26-start] "page31 page26" 100% [side26-end]
|
|
[side27-start] "page30 page27" 100% [side27-end]
|
|
[side28-start] "page29 page28" 100% [side28-end]
|
|
/ 50% 50%;
|
|
}
|
|
|
|
product.side-one {
|
|
grid-template:
|
|
[side1-start] "page1 page1" 100% [side1-end]
|
|
[side2-start] "page2 page3" 100% [side2-end]
|
|
[side3-start] "page4 page5" 100% [side3-end]
|
|
[side4-start] "page6 page7" 100% [side4-end]
|
|
[side5-start] "page8 page9" 100% [side5-end]
|
|
[side6-start] "page10 page11" 100% [side6-end]
|
|
[side7-start] "page12 page13" 100% [side7-end]
|
|
[side8-start] "page14 page15" 100% [side8-end]
|
|
[side9-start] "page16 page17" 100% [side9-end]
|
|
[side10-start] "page18 page19" 100% [side10-end]
|
|
[side11-start] "page20 page21" 100% [side11-end]
|
|
[side12-start] "page22 page23" 100% [side12-end]
|
|
[side13-start] "page24 page25" 100% [side13-end]
|
|
[side14-start] "page26 page27" 100% [side14-end]
|
|
[side15-start] "page28 page29" 100% [side15-end]
|
|
[side16-start] "page30 page31" 100% [side16-end]
|
|
[side17-start] "page32 page33" 100% [side17-end]
|
|
[side18-start] "page34 page35" 100% [side18-end]
|
|
[side19-start] "page36 page37" 100% [side19-end]
|
|
[side20-start] "page38 page39" 100% [side20-end]
|
|
[side21-start] "page40 page41" 100% [side21-end]
|
|
[side22-start] "page42 page43" 100% [side22-end]
|
|
[side23-start] "page44 page45" 100% [side23-end]
|
|
[side24-start] "page46 page47" 100% [side24-end]
|
|
[side25-start] "page48 page49" 100% [side25-end]
|
|
[side26-start] "page50 page51" 100% [side26-end]
|
|
[side27-start] "page52 page53" 100% [side27-end]
|
|
[side28-start] "page54 page55" 100% [side28-end]
|
|
/ 50% 50%;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'copernicus';
|
|
font-weight: 600;
|
|
align-self: center;
|
|
}
|
|
|
|
h2 {
|
|
font-family: 'proxima-nova';
|
|
font-weight: 600;
|
|
align-self: center;
|
|
}
|
|
|
|
page {
|
|
page-break-inside: avoid;
|
|
|
|
position: relative;
|
|
padding: 1.5em;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
product.side-two page[data-half="first"]:nth-of-type(2n) {
|
|
transform: rotateZ(180deg);
|
|
}
|
|
|
|
product.side-two page[data-half="second"]:nth-of-type(2n+1) {
|
|
transform: rotateZ(180deg);
|
|
}
|
|
|
|
page:nth-of-type(2n+1) {
|
|
border-left: 1px black solid;
|
|
}
|
|
|
|
pagenum {
|
|
order: 99;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
page:nth-of-type(2n+1) pagenum {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
letter {
|
|
display: none;
|
|
}
|
|
|
|
product.index-letters letter {
|
|
display: block;
|
|
font-family: 'copernicus';
|
|
font-weight: 600;
|
|
font-size: 4em;
|
|
margin-bottom: 0.2em;
|
|
}
|
|
|
|
page:nth-of-type(2n+1) letter {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
blurb {
|
|
text-align: justify;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
blurb.index-letters,blurb.index-none {
|
|
display: none;
|
|
}
|
|
|
|
product.index-letters blurb.index-letters {
|
|
display: block;
|
|
}
|
|
|
|
product.index-none blurb.index-none {
|
|
display: block;
|
|
}
|
|
|
|
owner {
|
|
display: block;
|
|
width: 11em;
|
|
|
|
border-bottom: black 1px dotted;
|
|
|
|
font-family: 'proxima-nova';
|
|
font-weight: 600;
|
|
font-size: 1.5em;
|
|
|
|
text-align: center;
|
|
align-self: center;
|
|
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
recovery {
|
|
display: block;
|
|
width: 17em;
|
|
|
|
border-bottom: black 1px dotted;
|
|
|
|
font-family: 'inconsolata';
|
|
font-weight: 700;
|
|
font-size: 1.5em;
|
|
|
|
text-align: center;
|
|
align-self: center;
|
|
|
|
margin-top: 1em;
|
|
}
|
|
|
|
passwordBlock {
|
|
display: grid;
|
|
margin-bottom: 1.5em;
|
|
font-size: 1.4em;
|
|
|
|
grid-template:
|
|
[password-start] "passwordLabel password" [password-end]
|
|
[website-start] "websiteLabel website" [website-end]
|
|
[username-start] "usernameLabel username" [username-end];
|
|
grid-template-columns: 5em auto;
|
|
grid-column-gap: 0.5em;
|
|
grid-row-gap: 0.2em;
|
|
}
|
|
|
|
product.index-letters passwordBlock:nth-of-type(6) {
|
|
display: none;
|
|
}
|
|
|
|
passwordLabel,websiteLabel,usernameLabel {
|
|
text-align: right;
|
|
}
|
|
|
|
password {
|
|
display: block;
|
|
font-family: 'inconsolata';
|
|
font-weight: 700;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
passwordShort,passwordPronounceable,passwordReadable {
|
|
display: none;
|
|
}
|
|
|
|
product.passwords-short passwordShort {
|
|
display: inline;
|
|
}
|
|
|
|
product.passwords-pronounceable passwordPronounceable {
|
|
display: inline;
|
|
}
|
|
|
|
product.passwords-readable passwordReadable {
|
|
display: inline;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|