Okay I managed to keep everything in! EVERYTHING, including the Crete Round font, Paulβs Tab Links and all the shape-outside code. Following is the page, tidied:
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<title>94_CRACKING_THE_SAFE w/Formatted ᰄ</title>
<style>
body {
width: 950px;
margin: 0 auto;
font-family: 'roboto slab', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 600;
color: black;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
/* βββββββββ PAULβS TAB Courtesy PAUL OβBRIEN of Sitepoint βββββββββ */
:root {
--tab1color: #ffe5fe;
--tab2color: teal;
--tab3color: #caffff;
--border-color: #000;
/* this one above is the filter color that makes the top border*/
--bottom-border-color: #000;
/* no need to change*/
}
.tablabel2 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-size: 2rem;
line-height: 2.0;
font-weight: bold;
height: 67px;
width: 250px;
filter: drop-shadow(-3px 0px var(--border-color)) drop-shadow(3px 0px var(--border-color));
}
.tab {
display: flex;
max-width: 950px;
margin: auto;
overflow: hidden;
position: relative;
z-index: 1;
filter: drop-shadow(0px -5px var(--border-color));
border-bottom: 10px solid var(--bottom-border-color);
}
.tab:after,
.tab:before {
content: "";
position: relative;
z-index: 2;
flex: 1;
/*box-shadow: 0 34px var(--tab2color);*/
box-shadow: 0 34px rgba(221, 198, 136, 0.8);
/* Try and match a color from the image*/
mix-blend-mode: lighten;
/* merge the box shadow above with the background */
/* this is necessary or a gap will show */
}
.tab:before {
box-shadow: 0 34px rgb(0, 0, 0, 0.8)
}
.tab:after {
border-radius: 0 0 0 80px;
margin-left: -9px;
}
.tab:before {
border-radius: 0 0 80px 0;
margin-right: -9px;
}
.tablabel2:before {
content: "";
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: -1;
background: var(--tab2color) url("https://assets.codepen.io/74047/PARCHMENT-A.jpg");
background-position: -3px -8px;
transform: perspective(100px) rotateX(36deg) translateY(5px);
border-radius: 20px 20px 0 0;
}
.bkdimg {
position: relative;
background: none;
overflow: hidden;
margin-top: 1rem;
margin-bottom: -2px;
/* attempt to stop rounding errors when zoomed*/
}
.ctr{
pointer-events:none;
}
.ctr a{
pointer-events:initial;
}
.ctr {
position: absolute;
inset: 0 0 0 0;
}
.ctr2 {
z-index: 3;
}
.ctrmid {
z-index: 2;
}
.ctr3 {
z-index: 1;
}
.ctr2 .tab:before {
flex: 0 0 65px;
}
.ctr3 .tab:after {
flex: 0 0 65px;
}
/*
.ctr2 .tab span *,
.ctr2 .tablabel2:before {
background: var(--tab1color);
color: #000;
}
.ctr2 .tab:before,
.ctr2 .tab:after {
box-shadow: 0 34px var(--tab1color);
}
.ctr3 .tab span *,
.ctr3 .tablabel2:before {
background: var(--tab3color);
color: #000;
}
.ctr3 .tab:before,
.ctr3 .tab:after {
box-shadow: 0 34px var(--tab3color);
}
*/
.tab1active .ctr,
.tab2active .ctr,
.tab3active .ctr {
position: absolute;
}
.tab1active .ctr2,
.tab2active .ctrmid,
.tab3active .ctr3 {
position: relative;
z-index: 4;
}
.tab3active .ctr2 {
z-index: 1;
}
/* ββββββ BACKGROUND & POEM-A ββββββ */
.indent {margin-left: 6.26rem}
.spacr {margin-top: 40px}
.spacr15 {margin-top: 15px}
.spacrx {margin-top: 40px; margin-bottom: 150px;}
.tab a {
transform: translateY(-8px);
display: flex;
text-align: center;
justify-content: center;
}
.tab a:link {
color: black;
font-weight: bold;
}
.tab a:visited {
color: black;
font-weight: bold;
}
.redlink a:link {o
color: crimson;
padding-top: 1rem;
font-weight: bold;
}
.redlink a:visited {
color: crimson;
padding-top: 1rem;
font-weight: bold;
}
.leada {
color: black;
margin-top: 3.13rem;
text-align: center;
font-family: 'crete round', serif;
font-weight: bold;
font-size: 3rem;
line-height: 3.25rem;
}
.leadb {
text-align: center;
font-family: 'crete round', serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 3rem;
}
.leadc {
text-align: center;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'crete round', serif;
font-weight: 400;
font-size: 2rem;
line-height: 2.5rem;
}
/* .yin code courtesy of ARCHIBALD at sitepoint.com forums */
.yin {
width: fit-content;
margin: .6rem auto 0rem auto;
font: 2.5rem/1 'crete round', serif;
letter-spacing: 2rem;
padding-left: 2rem;
}
.yang {
width: fit-content;
margin: 1.75rem auto 1.25rem auto;
font: 2.5rem/1 'crete round', serif;
letter-spacing: 2rem;
padding-left: 2rem;
}
.poem-a {
margin-top: 3.13rem;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 3.13rem;
font-style: normal;
text-align: left;
color: black;
font-family: 'crete round', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.parch {
background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOwNR1n9BJD_duNlaAmcp9BoDYm5xk-k0tBWV70BcThwR3CVkHBHXOFuHk-pHqtEROpyLL8B8314huJJUfMvey2_8iqUPGZlvSt8NSlKERCbdBZbw=w890-h1080');
background-size: 100% 100%;
padding: 1rem;
background-position: 0 -10px;
}
* {
box-sizing: border-box;
}
p.circle {
clear: both;
margin: 0;
padding: 1rem 0;
}
.circle:before {
content: "";
float: left;
shape-outside: ellipse(50% 46% at left);
width: 120px;
height:772px;
margin-top: -3rem;
}
.circle2:before {
content: "";
height: 845px;
}
/* βββββββββ END CSS ββββββββββ */
</style>
</head>
<body>
<div class="bkdimg tab1active">
<div class="ctr ctr2">
<div class="tab"><span class="tablabel2"><a href="https://en.m.wikipedia.org/wiki/Thomas_Merton">T. Merton</a></span></div>
</div>
<div class="ctr ctrmid">
<div class="tab"><span class="tablabel2"><a href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">Chuang Tzu</a></span></div>
</div>
<div class="ctr ctr3">
<div class="tab"><span class="tablabel2"><a href="https://en.m.wikipedia.org/wiki/Zhuangzi">“Zhuangzi”</a></span></div>
</div>
</div>
<div class="parch">
<div class="poem-a">
<div class="leada">
“Cracking the Safe”
</div>
<div class="leadb">
From <i>“The Way of Chuang Tzu”</i>
</div>
<div class="leadc">
Translated by Thomas Merton, Trappist Monk<br>
1915-1968
</div>
<p class="circle">
For security against robbers who snatch purses, rifle luggage, and crack safes,<br>
One must fasten all property with ropes, lock it up with locks, bolt it with bolts.<br>
This (for property owners) is elementary good sense.<br>
But when a strong thief comes along he picks up the whole lot,<br>
Puts it on his back, and goes on his way with only one fear:<br>
That ropes, locks, and bolts may give way.<br>
Thus what the world calls good business is only a way<br>
To gather up the loot, pack it, make it secure<br>
In one convenient load for the more enterprising thieves.<br>
Who is there, among those called smart,<br>
Who does not spend his time amassing loot<br>
For a bigger robber than himself?<br>
</p>
<div class="yin">✲✲✲✲</div>
<p class="circle circle2">
In the land of Khi, from village to villa<br>
You could hear cocks crowing, dogs barking.<br>
Fishermen cast their nets,<br>
Ploughmen ploughed the wide fields,<br>
Everything was neatly marked out<br>
By boundary lines. For five hundred square miles<br>
There were temples for ancestors, altars<br>
For field-gods and corn-spirits.<br>
Every canton, county, and district<br>
Was run according to the laws and statutes —<br>
Until one morning the Attorney General, Tien Khang Tzu,<br>
Did away with the King and took over the whole state.<br>
Was he content to steal the land? No,<br>
He also took over the laws and statutes at the same time,<br>
And all the lawyers with them, not to mention the police.<br>
They all formed part of the same package.
</p>
<div class="spacr15"> </div>
Of course, people called Khang Tzu a robber,<br>
But they left him alone<br>
To live as happy as the Patriarchs.<br>
No small state would say a word against him,<br>
No large state would make a move in his direction,<br>
So for twelve generations the state of Khi<br>
Belonged to his family. No one interferred<br>
With his inalienable rights.
<div class="yang">✲✲✲✲</div>
The invention<br>
Of weights and measures<br>
Makes robbery easier.<br>
Signing contracts, settings seals,<br>
Makes robbery more sure.<br>
Teaching love and duty<br>
Provides a fitting language<br>
With which to prove that robbery<br>
Is really for the general good.<br>
A poor man must swing<br>
For stealing a belt buckle<br>
But if a rich man steals a whole state<br>
He is acclaimed<br>
As statesman of the year.
<div class="spacr15"> </div>
Hence if you want to hear the very best speeches<br>
On love, duty, justice, etc.,<br>
Listen to statesmen.<br>
But when the creek dries up<br>
Nothing grows in the valley.<br>
When the mound is levelled<br>
The hollow next to it is filled.<br>
And when the statesmen and lawyers<br>
And preachers of duty disappear<br>
There are no more robberies either<br>
And the world is at peace.
<div class="spacr15"> </div>
Moral: the more you pile up ethical principles<br>
And duties and obligations<br>
To bring everyone in line<br>
The more you gather loot<br>
For a thief like Khang.<br>
By ethical argument<br>
And moral principle<br>
The greatest crimes are eventually shown<br>
To have been necessary, and, in fact,<br>
A signal benefit<br>
To mankind.
<div class="spacr15"> </div>
[xx. 2.]<br>
[xx. 2, 4-]<br>
114<br>
115
</div>
<!-- Closing POEM-A -->
</div>
<!-- Closing PARCH -->
</div>
</body>
</html>
I wanted to explain β the introduction of the two bars of asterisks introduced an offset to the vertical spacing between the stanzas so I had to create a vertical spacer div or else it looked bad. I donβt like having to do that but I didnβt know how else to space the stanzas with at least a modicum of a standard.