Paul I’m sorry to be bringing up Merton yet one more time but this is important: I had Merton’s graphic all the way flush with the left edge of the page but somewhere along the line he moved into the flow and is now sticking out and completely throwing the shape-outside: (URL) off! You can see him here. How can I get him back to the left edge? Thank you Paul.
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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+Slab:wght@100;200;300;400;500;600;700;800;900&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=Crete+Round:ital@0;1&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">
<title>svgpar2_ani.html ᰄ by semicodin / with Huge Assistance from Paul O’Brien and ‘Deep Archibald’ of Sitepoint Forums</title>
<style>
body {
width: 1080px;
margin: 0;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 600;
color: black;
}
p {
line-height: 1;
margin-top: 1rem;
}
u {
text-decoration: underline
}
* {
box-sizing: border-box
}
.dblue {
color: dodgerblue
}
.crim {
color: crimson
}
.roon {
color: #c40000
}
.parch {
background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOlyEgE-HLy3sGvlpsiiifoiEukf6i8ndkMD7oCPa-eMu7cHQscoSXEzAog6iNXvAFuF-JApkkfxSIz6_kA9Ro1-1aTzsWoLebvmCQB5TKPgdC80A=w1080-h1620');
width: 100%;
height: 100%;
padding-top: 3.13rem;
background-size: cover;
}
.ssz1 {
padding: 4rem 0 0 0;
text-align: center;
font-family: 'crete round';
font-size: 2rem;
line-height: 2.25rem;
font-weight: bold;
color: #888888;
}
.ssz2 {
text-align: center;
padding: 0 0 0 0;
font-family: 'crete round';
font-size: 1.75rem;
line-height: 2rem;
font-weight: bold;
color: #888888;
}
.leada {
color: blue;
margin: 3.13rem 0 3.13rem 0;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 3rem;
line-height: 3.25rem;
}
.leadb {
text-align: 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%;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 3.25rem;
line-height: 1.1;
font-weight: bold;
}
.dead {
margin-bottom: 0;
margin-left: 5%;
margin-right: 5%;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 3.25rem;
line-height: 1.1;
font-weight: bold;
}
.main {
margin: 7rem 3.13rem 7rem 3.13rem;
background-color: #ffffee;
font-style: italic;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.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/origin/merton1215.png);
shape-margin: 1.25rem;
}
.cent {
text-align: center
}
.undr {
text-decoration: underline
}
.clambu4 {
color: blue;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 4rem;
font-weight: 900;
}
.clamcin {
color: #611205;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3rem;
font-weight: 900;
}
.henpen {
text-align: center;
color: black;
margin-top: 3.13rem;
font-size: 3.75rem;
line-height: 3.88rem;
font-weight: 700;
font-family: 'Henny Penny', cursive;
}
/* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
.blu {
color: blue
}
.blub {
color: blue;
font-weight: bold;
}
.fusch {
color: #ca009b
}
.fuschb {
color: #ca009b;
font-weight: bold
}
.fuschi {
color: #ca009b;
font-style: italic
}
.crim {
color: crimson
}
.crimb {
color: crimson;
font-weight: bold
}
.crimi {
color: crimson;
font-style: italic
}
.grey {
color: grey
}
.green {
color: #248900
}àà
/* green */
.greenb {
color: #248900;
font-weight: bold
}
.hilite {
color: #ffffee;
background-color: dodgerblue;
vertical-align: baseline;
padding: .5rem .6rem .4rem .7rem;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 1.02;
font-weight: 800;
}
/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
.ctr {
text-align: center
}
.undr {
text-decoration: underline
}
.clamgy {
color: #888888;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clamcr4 {
color: crimson;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 4rem;
font-weight: 900;
}
.clambu {
color: blue;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3rem;
font-weight: 900;
}
.contact {
margin: 0;
padding: 0rem 0rem 7rem 0rem;
background-color: black;
font-style: normal;
text-align: center;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.here {
color: #ffffee;
text-align: center;
padding-top: 5rem;
margin: 0rem 0 1rem 0;
font-family: 'solway', serif;
font-size: 4rem;
line-height: 1.1;
font-weight: bold;
}
.down {
color: #ffffee;
text-align: center;
margin: 0 0 1rem 0;
font-family: 'solway', serif;
font-size: 3rem;
line-height: 1.1;
font-weight: 700;
}
.thanks {
color: #ffffee;
text-align: center;
margin: 0rem 4rem 1rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.quest {
color: #ffffee;
text-align: center;
margin: 2.25rem 2rem 2.25rem 2rem;
font-family: 'solway', serif;
font-size: 3rem;
line-height: 1.05;
font-weight: bold;
}
.end {
color: #ffffee;
text-align: center;
margin: 1rem 4rem 2.5rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.clamiv35 {
color: #ffffee;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3.5rem;
font-weight: 900;
}
a:active {
color: crimson
}
a:hover {
color: crimson
}
a:link {
color: #ffffee
}
a:visited {
color: #ffffee
}
/* ▬▬▬▬ PAUL’S TABS 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/pics/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;
}
/* set color for 1 tab only */
.svgtabs.onetab {
--tab1-bg-color: #8e815e;
}
.svgtabs.onetab span {
--tab1-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.twotab a {
margin-right: -9.5rem;
}
.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.twotab svg {
width: 620px;
height: 75px;
}
.svgtabs span {
grid-area: tab;
position: relative;
z-index: 2;
padding: 11px 2rem 0 0;
font-family: 'solway', serif;
font-size: 3rem;
font-weight: bold;
color: #000;
}
.svgtabs a.active {
z-index: 99;
}
.svgtabs a.active span {
padding: 11px 1rem 0;
}
.svgtabs a.active span {
padding: 11px 1rem 0;
}
.svgtabs a:last-child 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;
}
}
.svgtab1 {
z-index: 2;
}
.svgtab2 {
z-index: 1;
}
/* ━━━━━━ TAB LABELS ━━━━━━ */
.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;
}
/* ▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬ */
</style>
</head>
<body>
<nav class="svgtabs twotab">
<!--━━━━━━━━━ TAB 1 ━━━━━━━━-->
<a class="svgtab1" href="http://semicodin.nekoweb.org/h_thru_z/svgpar2a_ani.html">
<span> Merton’s America</span>
<svg viewBox="0 0 164.042 15.843" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-large" />
</svg>
</a>
<!--━━━━━━━━━ TAB 2 ━━━━━━━━-->
<a class="svgtab2" href="http://semicodin.nekoweb.org/h_thru_z/svgpar2b_ani.html">
<span>Assassination!</span>
<svg viewBox="0 0 164.042 15.843" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-large" />
</svg>
</a>
</nav>
<div class="parch">
<div class="begin">
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">
<p> <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>
<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>
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 class="dead">
The Spring 2024 issue of <i>The <img class="thomas" src="https://semicodin.nekoweb.org/origin/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 contact with a faulty fan that was found lying across his body.</span>
</p>
</div><!-- closing death -->
<div class="hide-svg">
<!-- this one is for the one tab version and the two tab version -->
<!-- large tab -->
<svg viewBox="0 0 164.042 15.843" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-large" class="tab-unit">
<clipPath id="shape2">
<path d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)" />
</clipPath>
<path style="fill:#000;stroke-width:4;stroke:#000" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />
<image class="tab-animated tan1" transform="translate(00 0)" width="270" height="220" href="https://semicodin.nekoweb.org/pics/parchment-a.jpg" clip-path="url(#shape2)" />
</g>
</defs>
</svg>
</div><!-- CONCLUDING MAIN -->
</div><!-- CONCLUDING PARCHMENT-E -->
<div class="contact">
<div class="here">
<a href="https://semicodin.nekoweb.org/vault/SVGPAR1_ANI.ZIP">
Code Here.</a>
</div>
<div class="down">
Long Press on “Download Link” and save.
</div>
<div class="quest">
Got Questions? You can PM me at<br>
<a href="https://sitepoint.com/community/c/html-css/25">
the Sitepoint Forums</a><span class="clamiv35">!</span>
</div>
<div class="end">
CLICK HERE TO PROCEED<br>
<a href="https://semicodin.nekoweb.org/toc.html">
TO THE TABLE OF CONTENTS</a>
</div>
</div><!-- CLOSING CONTACT -->
</body>
</html>
) animated tabs is going to go really fast because all the legwork has been done and the graphics files uploaded. This will be a collection of 7 textures, each under his own tab. The challenge is this: I want to use the extra-large versions of each of these backgrounds such that _however long the image was originally it will display to a length proportional to its width at 1080px wide . . . and go well past the very limited content (one short table) on each page. In other words I want the viewer to be able to scroll down past the table to have a good look at the graphic in its entirety but at 1080px wide — never stretched/just reduced.
So that’s what I’ve been doing for the past however many hours. Then, a couple of them just looked ugly as hell and I’m like — I wouldn’t use this crap so why would anyone else?! lol Sorry for the delay.
Again. And it isn’t helping that everytime I try and pull text in to the left margin you throw it right back to the right again. I have 4” of viewable screen Paul. Have a care to remember that I’m just trying to see the text. I’m not trying to be provocative; I’m just trying to see as much of each line as I possibly can. I can reformat it when done