Okay the two problems I’m having are 1) there is a margin between the tabs and parchment which I scoured the CSS for but could not find, and 2) (not your fault; we never discussed what I wanted on the tabs so how could you know) I want to replicate the three links we’re using on my <shape-outside: ellipse> for The Empty Boat, namely this:
<a class="svgtab1" href="#">
<span><a href="https://en.m.wikipedia.org/wiki/Thomas_Merton">T. Merton</a></span></span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
<a class="svgtab2" href="#">
<span><a href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">Chuang Tzu</a></span></span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
<a class="svgtab3" href="#">
<span><a href="https://en.m.wikipedia.org/wiki/Zhuangzi_(book)">“Zhuangzi”</a></span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
Here is what I cleaned up in the code for Merton. I may have cut too much but I’m more inclined to think I cut too little:
<!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=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<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=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>merton 9 /The Assassinatiom of Thomas Merton by semicodin ᰄ with Huge Assistance from ‘Archibald’ and Paul O’Brien of Sitepoint Forums</title>
<style>
body {
width: 1080px;
margin: 0;
font-family: 'roboto slab', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 600;
color: black;
}
p {
line-height: 1
}
.main {
margin: 7rem 3.13rem 7rem 3.13rem;
background-color: #ffffee;
font-style: italic;
text-align: left;
color: black;
font-family: 'crete round', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
.cent {text-align: center}
.undr {text-decoration: underline}
.seam {
border-bottom: 10px solid black;
}
.roon {color: maroon}
/*▬▬▬▬ PAUL’S TAB Courtesy PAUL O’BRIEN of Sitepoint ▬▬▬▬ */
.tablabel3 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-size: 2.25rem;
line-height: 1.5;
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;
}
.tablabel3:before {
content: "";
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: -1;
background: var(--tab2color) url("https://semicodin.nekoweb.org/vault/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 {-index: 3;}
.ctrmid {z-index: 2;}
.ctr3 {z-index: 1;}
.ctr2 .tab:before {flex: 0 0 65px;}
.ctr3 .tab:after {flex: 0 0 65px;}
.tab1active .ctr,
.tab2active .ctr,
.tab3active .ctr {
position: absolute;
}
.tab1active .ctr2,
.tab2active .ctrmid,
.tab3active .ctr3 {
position: relative;
z-index: 4;
}
.tab3active .ctr2 {
z-index: 1;
}
.svgtabs {
--tab3-bg-color: #b16742;
--tab3-color: #000;
}
.svgtabs {
width: 100%;
margin: auto;
display: flex;
overflow: hidden;
border-bottom:10px solid #000;
}
.svgtabs a {
color: #000;
text-decoration: none;
flex: 1 0 0;
display: grid;
align-items: center;
grid-template-areas: "tab";
position: relative;
text-align: center;
margin-right: -9rem;
transition: 0.3s ease;
}
.svgtabs.threetab a {
margin-right: -7rem;
}
.svgtabs a:last-child {
margin-right: 0 !important;
}
.svgtabs svg {
width: 245px;
height: 53px;
display: block;
grid-area: tab;
position: relative;
z-index: 1;
}
.svgtabs.threetab svg {
width: 440px;
height: 60px;
}
.svgtabs span {
grid-area: tab;
position: relative;
z-index: 2;
padding: 11px 2rem 0 0;
font-weight: bold;
color: #000;
font-size: 1.9rem;
}
.svgtabs a:last-child span {
padding: 11px 1rem 0;
}
.svgtabs a.active {
z-index: 99;
}
.svgtabs a.active span {
padding: 11px 1rem 0;
}
.hide-svg {
position: fixed;
left: -100vw;
top: -100vh;
height: 1px;
width: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.tab-animated {
height: 220px;
animation: tab 10s infinite;
}
@keyframes tab {
0% {
height: 220px;
width: 210px;
}
50% {
height:200px;
width: 170px;
}
100% {
height: 220px;
width: 210px;
}
}
/* ━━━━━━ BACKGROUND & POEM-A ━━━━━━ */
.indent {
margin-left: 6.26rem
}
.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 {
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-allign: center;
font-family: 'solway', serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 3rem;
}
.leadc {
text-align: center;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'solway', serif;
font-weight: 400;
font-size: 2rem;
line-height: 2.5rem;
}
.rip {
margin: 0 auto;
font-style: normal;
color: black;
font-family: 'solway', serif;
font-size: 5rem;
line-height: 1.1;
font-weight: bold;
}
.begin {
margin: 1.57rem 5% 0rem 5%;
font-style: normal;
text-align: center;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 6rem;
line-height: 1.02;
font-weight: bold;
}
.up {
text-align: left;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 4.5rem;
font-weight: bold;
}
.death {
margin-top: 1.57rem;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 2.5rem;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 3.25rem;
line-height: 1.1;
font-weight: bold;
}
.parch {
background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOlyEgE-HLy3sGvlpsiiifoiEukf6i8ndkMD7oCPa-eMu7cHQscoSXEzAog6iNXvAFuF-JApkkfxSIz6_kA9Ro1-1aTzsWoLebvmCQB5TKPgdC80A=w1080-h1620');
background-size: 100% 100%;
padding: 1rem;
background-position: 0 -10px;
}
.thomas {
float: left;
width: 800px;
height: 1215px;
margin: 2rem 0 0 -3rem;
position: relative; /* courtesy “snadyleiby” of Sitepoint forums */
left: -1.25rem;
shape-outside: url(https://semicodin.nekoweb.org/vault/merton1215.png);
shape-margin: 1rem
}
.foot {
color: #ffffee; /* ivory */
margin-top: 1rem;
text-align: left;
font-style: normal;
margin-bottom: 3.13rem;
font-family: 'crete round', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.13rem;
}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/
</style>
</head>
<body>
<main>
<!-- 3 TABS: add active class to anchor to bring the tab in front as required -->
<nav class="svgtabs threetab">
<a class="svgtab1" href="#">
<span><a href="https://en.m.wikipedia.org/wiki/Thomas_Merton">T. Merton</a></span></span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
<a class="svgtab2" href="#">
<span><a href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">Chuang Tzu</a></span></span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
<a class="svgtab3" href="#">
<span><a href="https://en.m.wikipedia.org/wiki/Zhuangzi_(book)">“Zhuangzi”</a></span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
</nav>
<div class="seam"> </div>
<div class="parch">
<div class="begin">
merton_9 /The Assassination of Thomas Merton
</div>
<div class="cent">
<table class="rip">
<tbody>
<tr>
<td>1915</td>
<td>
<img src="https://lh3.googleusercontent.com/pw/AP1GczNK01urgiwZ_soZQU-12U29Siu-4J37H-ZvpeC3gKfz0IzceW35to0b8q7EjDHp2nXfNaPSfc1Dwary6KUrjiDl-Ldxj4xRRi9umxtZJwgtJjXgxA=w200-h300" alt="">
</td>
<td>1968</td>
</tr>
</tbody>
</table>
</div><!-- closing cent -->
<div class="death">
<span class="up">On December 10, 1968</span> Thomas Merton was at a Red Cross retreat facility named Sawang Khaniwat in Samut Prakan, a province near Bangkok, Thailand, attending a monastic conference. After giving a talk at the morning session, he was found dead later in the afternoon in the room of his cottage, wearing only shorts, lying on his back with a short-circuited Hitachi floor fan lying across his body. His associate, Jean Leclercq, stated: “In all probability the death of Thomas Merton was due in part to heart failure, in part to an electric shock.”
<p></p>
<p>
<span class="roon">Since there was no autopsy, there was no suitable explanation for the wound in the back of Merton’s head, “which had bled considerably.”</span> Arriving from the cottage next to Merton’s, the Primate of the Benedictine order and presiding officer of the conference, Rembert Weakland, anointed Merton.
</p>
<p>
He was 53 years old.<p>
</p>
<p>
His body was flown back to the United States on board a U.S. military aircraft returning from Vietnam. He is buried at Our Lady of Gethsemani Abbey in Bardstown, Kentucky.
</p>
<p>
In 2018, Hugh Turley and David Martin published <i>“The Martyrdom of Thomas Merton: An Investigation,”</i> presenting the evidentiary record’s refutation of claims of accidental electrocution, and suggesting Merton was assassinated for his political opposition to the Vietnam War. A subsequent book by Turley and author John Howard Griffin — <i><span class="undr">Thomas Merton’s Betrayers: The Case Against Abbot James Fox</span></i> — presents documentary evidence of manipulation and coverup by the Catholic Church and Merton’s political foes.
</p><p>
The Spring 2024 issue of <i>The <img class="thomas" src="https://semicodin.nekoweb.org/vault/merton1215.png" alt="">Catholic Historical Review</i> published <i>“The Official Thai Reports on Thomas Merton’s Death.”</i> The official cause of death was a natural cause: “sudden heart failure,” not “accidental electrocu-tion.” <span class="roon">The police report states that Merton was already dead before he came into con-tact with a faulty fan that was found lying across his body.</span>
</p>
</div><!-- closing death -->
<!-- this following block of code is defining the svg and can be kept out of the way anyway on the page -->
<!-- I'm putting a div around it so that we can just hide tehm all from impacting on the page -->
<div class="hide-svg">
<!-- this one is for the three tab version -->
<!-- medium tab -->
<svg viewBox="0 0 116.417 11.875" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="anitab-medium" class="tab-unit">
<clipPath id="shape3">
<path d="M93.07 302.303c-11.069 0-14.631.576-18.744 8.02-3.005 5.437-6.063 6.224-6.8 7.09h95.002c-.737-.866-3.795-1.653-6.8-7.09-4.113-7.444-7.675-8.02-18.745-8.02Z" transform="translate(-56.819 -301.538)" />
</clipPath>
<path style="fill:#000; stroke-width:4; stroke:#000" d="M87.484 301.538c-4.09.011-6.897 1.05-8.968 2.625-2.083 1.583-3.41 3.653-4.72 5.63-1.31 1.979-2.601 3.868-4.552 5.263-1.951 1.395-4.582 2.342-8.723 2.342H56.82v.015h11.236a12.469 12.469 0 0 0 2.038-1.172c2.208-1.579 3.604-3.656 4.92-5.642 1.317-1.987 2.556-3.883 4.385-5.274 1.83-1.39 4.264-2.33 8.15-2.33h54.957c3.887 0 6.321.94 8.15 2.33 1.83 1.391 3.07 3.287 4.386 5.274 1.316 1.986 2.712 4.063 4.92 5.642a12.47 12.47 0 0 0 2.038 1.172h11.236v-.015h-3.702c-4.14 0-6.772-.947-8.723-2.342-1.95-1.395-3.242-3.284-4.552-5.262-1.31-1.978-2.637-4.048-4.719-5.63-2.071-1.575-4.879-2.615-8.97-2.626Z" transform="translate(-56.819 -301.538)" />
<image class="tab-animated tan3" transform="translate(00 0)" width="270" height="220" href="https://semicodin.nekoweb.org/vault/parchment-a.jpg" clip-path="url(#shape3)" />
</g>
</defs>
</svg>
</div>
</div><!-- closing parchment -->
</div><!-- closing main -->
</body>
</html>
. . . .