starting layout-2
This commit is contained in:
parent
abbd549428
commit
e055fc96ee
9 changed files with 142 additions and 139 deletions
|
|
@ -1,7 +1,7 @@
|
|||
@page {
|
||||
@footnote {
|
||||
float: bottom;
|
||||
|
||||
footnote-policy: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -11,11 +11,12 @@
|
|||
|
||||
.inline-note {
|
||||
float: footnote;
|
||||
footnote-policy: auto;
|
||||
font-size: 9px;
|
||||
line-height: calc(var(--baseline)*0.9);
|
||||
line-height: calc(var(--baseline)*0.8);
|
||||
padding-left: var(--indent);
|
||||
position: relative;
|
||||
font-weight: 100;
|
||||
// font-weight: 100;
|
||||
|
||||
&::marker{
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -2,18 +2,20 @@
|
|||
@page {
|
||||
size: 134mm 205mm;
|
||||
// size: 150mm 220mm;
|
||||
margin-top: 67px;
|
||||
margin-bottom: 10mm;
|
||||
margin-left: 10mm;
|
||||
margin-right: 10mm;
|
||||
bleed: 6mm;
|
||||
marks: crop;
|
||||
margin-top: 36px;
|
||||
margin-bottom: 20mm;
|
||||
|
||||
// bleed: 6mm;
|
||||
// marks: crop;
|
||||
}
|
||||
@page:left {
|
||||
margin-left: 12mm;
|
||||
margin-right: 32mm;
|
||||
@top-left {
|
||||
margin-left: 22mm;
|
||||
margin-right: 22mm;
|
||||
@bottom-left {
|
||||
content: counter(page);
|
||||
font-family: var(--font-title);
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-num);
|
||||
}
|
||||
// @top-right {
|
||||
// content: "Höchstpersönlichkeit";
|
||||
|
|
@ -23,14 +25,17 @@
|
|||
}
|
||||
@page:right {
|
||||
margin-left: 32mm;
|
||||
margin-right: 12mm;
|
||||
@top-right {
|
||||
margin-right: 22mm;
|
||||
@bottom-right {
|
||||
content: counter(page);
|
||||
font-family: var(--font-title);
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-num);
|
||||
}
|
||||
@top-left {
|
||||
@bottom-left {
|
||||
content: "Höchstpersönlichkeit";
|
||||
font-variant-caps: small-caps;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: var(--font-title);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,22 +69,23 @@ ol[type="1"] + p{
|
|||
|
||||
|
||||
blockquote{
|
||||
padding-left: var(--indent);
|
||||
margin-top: calc(var(--baseline)*1);
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
padding-left: calc(var(--indent)*2);
|
||||
// color: red;
|
||||
// margin-top: calc(var(--baseline)*1);
|
||||
// margin-bottom: calc(var(--baseline)*1);
|
||||
|
||||
p{
|
||||
font-style: italic;
|
||||
em{
|
||||
font-style: normal;
|
||||
}
|
||||
// font-family: "Edgar";
|
||||
// em{
|
||||
// font-style: normal;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
u{
|
||||
font-variant: small-caps;
|
||||
text-decoration: none;
|
||||
}
|
||||
// u{
|
||||
// font-variant: small-caps;
|
||||
// text-decoration: none;
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,19 +28,19 @@
|
|||
|
||||
h1{
|
||||
font-family: var(--font-title);
|
||||
font-weight: normal;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: calc(var(--baseline)*1.4);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-top: calc(var(--baseline)*3 - 3px);
|
||||
margin-top: calc(var(--baseline)*2 - 3px);
|
||||
padding-bottom: calc(var(--baseline)*1);
|
||||
padding-left: 1ch;
|
||||
padding-right: 1ch;
|
||||
&::before{
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
|
||||
font-size: var(--fs-num);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -53,68 +53,67 @@
|
|||
|
||||
h2{
|
||||
font-family: var(--font-title);
|
||||
font-weight: normal;
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: calc(var(--baseline)*1.2);
|
||||
|
||||
text-align: right;
|
||||
padding-left: 3ch;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-top: calc(var(--baseline)*1 + 9px);
|
||||
margin-top: calc(var(--baseline)*1 + 6px);
|
||||
padding-bottom: calc(var(--baseline)*1);
|
||||
padding-left: 2ch;
|
||||
padding-right: 2ch;
|
||||
&::before{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: block;
|
||||
font-size: var(--fs-num);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
h3{
|
||||
font-family: var(--font-sans);
|
||||
font-weight: normal;
|
||||
font-family: var(--font-title);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: calc(var(--baseline)*1);
|
||||
|
||||
text-align: right;
|
||||
padding-left: 3ch;
|
||||
padding-left: var(--indent);
|
||||
padding-right: calc(var(--indent)*2);
|
||||
position: relative;
|
||||
margin-top: calc(var(--baseline)*1 + 9px);
|
||||
padding-bottom: calc(var(--baseline)*1);
|
||||
margin-top: calc(var(--baseline)*1 + 4px);
|
||||
padding-bottom: calc(var(--baseline)*0.75);
|
||||
&::before{
|
||||
// font-family: 'Helixotrope 4';
|
||||
// font-size: var(--font-size);
|
||||
// font-weight: bold;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h4{
|
||||
font-family: var(--font-sans);
|
||||
font-weight: normal;
|
||||
font-family: var(--font-title);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
line-height: calc(var(--baseline)*1);
|
||||
padding-left: calc(var(--indent)*1);
|
||||
padding-right: calc(var(--indent)*2);
|
||||
position: relative;
|
||||
margin-top: calc(var(--baseline)*1 + 4px);
|
||||
padding-bottom: calc(var(--baseline)*0.75);
|
||||
}
|
||||
|
||||
|
||||
h5{
|
||||
font-family: var(--font-title);
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
line-height: calc(var(--baseline)*1);
|
||||
|
||||
text-align: right;
|
||||
padding-left: 3ch;
|
||||
padding-left: calc(var(--indent)*1);
|
||||
// padding-right: calc(var(--indent)*2);
|
||||
position: relative;
|
||||
margin-top: calc(var(--baseline)*0.5);
|
||||
margin-bottom: calc(var(--baseline)*0.5);
|
||||
font-weight: 500;
|
||||
|
||||
margin-top: calc(var(--baseline)*1 + 4px);
|
||||
padding-bottom: calc(var(--baseline)*0.25);
|
||||
}
|
||||
|
||||
|
||||
h5{
|
||||
font-family: var(--font-sans);
|
||||
font-weight: normal;
|
||||
font-size: 0.7rem;
|
||||
line-height: calc(var(--baseline)*1);
|
||||
position: relative;
|
||||
margin-top: calc(var(--baseline)*0.75);
|
||||
margin-bottom: calc(var(--baseline)*0.25);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
:root{
|
||||
--font: 'Edgar', sans-serif;
|
||||
--font-title: "Heliotrope 3 Caps", sans-serif;
|
||||
--font-sans: "Heliotrope 4", sans-serif;
|
||||
--font-size: 12px;
|
||||
--font-title: 'Allium Rounded', sans-serif;
|
||||
--font-sans: 'Allium Rounded', sans-serif;
|
||||
--font-size: 11px;
|
||||
--fs-num: 14px;
|
||||
--baseline: 16px;
|
||||
|
||||
--indent: 26px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue