thesis align bottom
This commit is contained in:
parent
725306418d
commit
ed5d47184d
6 changed files with 62 additions and 36 deletions
|
|
@ -25,8 +25,8 @@ $unit: calc($content-w/7);
|
|||
size: $width $height;
|
||||
margin-top: $top;
|
||||
margin-bottom: $bottom;
|
||||
bleed: 6mm;
|
||||
marks: crop;
|
||||
// bleed: 6mm;
|
||||
// marks: crop;
|
||||
}
|
||||
@page:left {
|
||||
margin-left: $outside;
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--fs-small);
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
|
|
|
|||
|
|
@ -79,44 +79,40 @@ ul{
|
|||
// THESE --------------------------------------------------
|
||||
|
||||
|
||||
|
||||
.thesis{
|
||||
break-inside: avoid;
|
||||
}
|
||||
.thesis-title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 1ch;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.thesis-title p::after{
|
||||
content: '';
|
||||
display: block;
|
||||
|
||||
.thesis-line{
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
height: 8px;
|
||||
background-color: black;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
.thesis-title p{
|
||||
flex-shrink: 0;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
.thesis p{
|
||||
display: block;
|
||||
}
|
||||
// .p-these{
|
||||
// font-weight: 500;
|
||||
// margin-bottom: calc(var(--baseline)*0.5);
|
||||
// display: block;
|
||||
// strong{
|
||||
// text-transform: uppercase;
|
||||
// display: inline-block;
|
||||
// min-width: $indent*2;
|
||||
// font-weight: bold;
|
||||
// font-size: var(--fs-small);
|
||||
// letter-spacing: 0.05rem;
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
|
||||
// .p-these-last{
|
||||
// margin-bottom: calc(var(--baseline)*1);
|
||||
// }
|
||||
|
||||
.thesis + .thesis{
|
||||
margin-top: calc(var(--baseline)*1);
|
||||
}
|
||||
|
||||
|
||||
// INTRO --------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -43,8 +43,6 @@ body {
|
|||
size: 176mm 240mm;
|
||||
margin-top: 10mm;
|
||||
margin-bottom: 19mm;
|
||||
bleed: 6mm;
|
||||
marks: crop;
|
||||
}
|
||||
@page :left {
|
||||
margin-left: 14mm;
|
||||
|
|
@ -272,24 +270,41 @@ ul {
|
|||
color: red;
|
||||
}
|
||||
|
||||
.thesis {
|
||||
-moz-column-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.thesis-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 1ch;
|
||||
}
|
||||
|
||||
.thesis-title p::after {
|
||||
content: "";
|
||||
display: block;
|
||||
.thesis-line {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
height: 8px;
|
||||
background-color: black;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.thesis-title p {
|
||||
flex-shrink: 0;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
.thesis p {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.thesis + .thesis {
|
||||
margin-top: calc(var(--baseline) * 1);
|
||||
}
|
||||
|
||||
.has-intro-1-paragraph .intro,
|
||||
.has-intro .intro {
|
||||
-moz-column-break-after: right;
|
||||
|
|
@ -516,7 +531,7 @@ ol[type="1"] {
|
|||
.note_call {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--fs-small);
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -24,6 +24,17 @@ export default class beforeAll extends Handler {
|
|||
intro.style.paddingTop = gap + "px";
|
||||
}
|
||||
|
||||
let thesisList = pageElement.querySelectorAll('.thesis');
|
||||
if(thesisList.length > 0 && pageContent){
|
||||
let lastThesis = thesisList[thesisList.length - 1];
|
||||
let firstThesis = thesisList[0];
|
||||
let lastThesisBottom = lastThesis.getBoundingClientRect().bottom;
|
||||
let pageContentBottom = pageContent.getBoundingClientRect().bottom;
|
||||
let gap = pageContentBottom - lastThesisBottom;
|
||||
gap = gap - 4; // snap on baseline
|
||||
firstThesis.style.marginTop = gap + "px";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -194,7 +205,11 @@ function thesis(content){
|
|||
thesisTitleDiv.classList.add('thesis-title');
|
||||
const thesisP = document.createElement('p');
|
||||
thesisP.textContent = strong.textContent;
|
||||
var line = document.createElement('div');
|
||||
line.classList.add('thesis-line');
|
||||
|
||||
thesisTitleDiv.appendChild(thesisP);
|
||||
thesisTitleDiv.appendChild(line)
|
||||
thesisWrapper.appendChild(thesisTitleDiv);
|
||||
|
||||
// Transform parent p into thesis-content
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue