I know you were asking @semicodin but I browse more sites on my phone that I do on a desktop these days and worldwide mobile views outstrip desktop by about 20%. That’s why responsive design is so important.
Also six months of the year I’m away I can’t get reliable internet connection on the desktop and I’d be lost without a mobile. I’m answering this on a mobile now while having 15 minutes outside in the sun 
As to why you would choose to develop an a mobile that’s another question
I’ll answer that privately if you wish but not publicly.
My boat is empty.
Archibald can you not graft Paul’s 3 tabs on top of the graphic?
It’s not really a graphic! It’s HTML, mostly <pre> text, with image background and some inset box shadow.
I’ve put a tab on top. That’s as far as I can take it.
EDIT: Paul I didn’t stop to study this in your code but . . . are you linking to the graphic I provided for your three tabs on your own site? I just need to know because obviously I want the page to be under my control. I love you guy but not that much!! 
I’ll need it to link to my own site.
Yes it works just fine now Paul thank you. Okay I understand completely what you have been trying to explain to me for years. I still prefer to code for a larger page — in fact I am seriously wondering if I shouldn’t be coding for 1440px! If that means I have to pinch and zoom, so be it. The day may come when I have (for example) a tablet and then I assure you I don’t want 
412px pages! Also either I’m gifted with extraordinary sight or I’m just lucky but you would be amazed at how small a typeface I can comfortably read. I read the Wall Street Journal quite comfortably and that’s a notoriously SmartPhone-hostile site, trust me.
Alice
You can’t use Paul’s tabs? That surprises me Archibald. Oh well. Thank you for trying anyway. 
Thank you for trying Archibald. I just love those tabs that Paul made. I’m still not 100% pleased with my parchment but I can hunt that down in time. The burnishing is very smokey isn’t it? You realize that as you look closer. Whatever it is — smoke, old parchment, whatever — it’s lovely. 
Yes I copied the imaqe file into my codepen assets so it would show. Just change the url to your own resource.
If you want to use the original image for that poem then just change the url in my code for .parch but you’ll have to stretch the image to fit if you want all the edges showing.
e.g.
I’m surprised it’s just 20%! Take my doctor’s appointment last week: I walked into a crowded waiting room with about 10 people there and every single person was on their SmartPhone surfing the web so help me God. Snady, the damn thing is less important to me as a phone than it could ever compete with the internet. I simply cannot abide being without the internet. News, email, Youtube clips of Johnny Carson from the 1970s (egad did we really dress like that?!), episodes of SNL . . . it’s the World man! Then too there are the safety PSAs. I’m in California and it’s been a vital link to information about our latest fire. Check It out Snady. It’s really a blast.
Hell yeah Paul! Awesome. I totally dig it.
I’ve been meaning to ask . . . You’re working with my original parchment graphic right Paul? Three questions:
I have to know so I understand what’s what. 
Yes I didn’t change anything. I just copied it locally.
You can easily test by copying the image url into your address bar.
No I just stretched it to fit as I mentioned.
I’m asking because it’s so dark at the top and the image only gets that dark if you rotated it. I’ll study it. I’m going to lighten it and drop its saturation a bit: that won’t affect the tabs will it? EDIT disregard <— that paragraph; I’m seeing the image contracted so naturally its darker patterns are going to “bunch up”.
And (very important including to other newbs) if i were to alter the size of the image — and possibly use a completely different image — will it affect the tabs? Or will it just automatically adjust no matter what the dimensions are? It can handle two separate images can’t it?
If you alter the image that the tabs are using then you will most likely break the rounded corners as I have matched the color to the image color at that point. If the image is much the same then it might not notice.
It’s definitely not my World though. 
In my World the internet only exists within the confines of my home.
Also, apart from my PC and monitor this…
…is the absolutely essential tool that I require for connection to it.
As a matter of further interest, I do not own or use anything that is
labelled “SMART” by the advertising industry as the inference is that
one would be “STUPID” not to.
Smart antonyms
dull
foolish
ignorant
naive
slow
stupid
unaware
unclever
unintelligent
obtuse
unskilled
Okay I read you loud and clear snady. It’s an admirable lifestyle interacting with nature and being outdoors. I am waaaay too far gone for the internet to be anything but indispensable to me by now. I’d have trouble with your keyboard though (I need an ergonomic keyboard; arthritis).
Well Gentles, I’ve been fine tuning my parchment tabs and I wonder if anyone’s up for a couple of tweaks:
Firstly, the changes made are that I flipped PARCHMENT-A to have its lighter end appear directly below the three tabs, and then turned down its saturation. I’ve added three links but I had to reduce the font size or they wouldn’t fit.
I want the link texts to appear lower on the tabs Paul — will that break them?
And then Archibald did such a great job on wrapping the text around my little graphic I wonder if I could inveigle him to do one more? Archibald if you look at PARCHMENT-A there’s a burnt edge abutting the first two stanzas of the poem. Could you use your artist’s eye and wrap those two blocks of poetry around the “stain”? I want about a 1.25rem gutter (that’s 20px) separating the two.
What I can do then is get comfortable tweaking the math off of your example. I’m too new at shape-outside: polygon to fully understand it and of course — that was for an image on the right (this one’s on the left). I set up some starter code off of the CSS Tricks site ONLY to get you started (I had no expectation it would work and i wasn’t disappointed lol). Because Merton’s translations vary from one long paragraph to 6 pages of parable that stain is going to alter in length (that, or if it’s too long I’m going to give him rice paper — which is my next border tab but let that bide). This will be really good practice for me Archibald. Or Paul. Or Snady. Here’s the page:
<!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=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>95_PAUL_PARCHMENT_CHUANG_TZU NO ANI w/ ᰄ</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: 2rem;
font-weight: bold;
height: 52px;
width: 225px;
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 b {
display: flex;
transform: translateY(5px);
justify-content: center;
}
.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-bottom: -2px;
/* attempt to stop rounding errors when zoomed*/
}
.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
}
.bklink a:link {color: black; padding-top: 1rem; font-weight: bold;}
.bklink a:visited {color: black; padding-top: 1rem; 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: 400;
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;
}
.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;
}
/* The following is taken ditectly from CSS Tricks.
I simply parked it here to make it easier for you to edit. */
* {
box-sizing: border-box;
}
.twrap1 {
shape-outside: polygon(0 0, 0 200px, 200px 300px);
width: 300px;
height: 200px;
float: left;
opacity: .2;
}
/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
</style>
</head>
<body>
<div class="bkdimg tab1active">
<div class="ctr ctr2">
<div class="tab"><span class="tablabel2"><span class="bklink"><a href="https://en.m.wikipedia.org/wiki/Thomas_Merton">T. Merton</a></span></span></div>
</div>
<div class="ctr ctrmid">
<div class="tab"><span class="tablabel2"><span class="bklink"><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"><span class="bklink"><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">
“The Empty Boat”
</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>
<div class="twrap1">
He who rules men lives in confusion;<br>
He who is ruled by men lives in sorrow.<br>
Yao therefore desired<br>
Neither to influence others<br>
Nor to be influenced by them.<br>
The way to get clear of confusion<br>
And free of sorrow<br>
Is to live with Tao<br>
In the land of the great Void.<br>
<br>
If a man is crossing a river<br>
And an empty boat collides with his own skiff,<br>
Even though he be a bad-tempered man<br>
He will not become very angry.<br>
But if he sees a man in the boat,<br>
He will shout at him to steer clear.<br>
If the shout is not heard, he will shout again,<br>
And yet again, and begin cursing.<br>
And all because there is somebody in the boat.<br>
Yet if the boat were empty,<br>
He would not be shouting, and not angry.<br>
</div>
<div class="indent">
If you can empty your own boat<br>
Crossing the river of the world,<br>
No one will oppose you,<br>
No one will seek to harm you.<br>
</div>
<br>
The straight tree is the first to be cut down,<br>
The spring of clear water is the first to be drained dry.<br>
If you wish to improve your wisdom<br>
And shame the ignorant,<br>
To cultivate your character<br>
And outshine others;<br>
A light will shine around you<br>
As if you had swallowed the sun and the moon:<br>
You will not avoid calamity.<br>
<br>
A wise man has said:<br>
<div class="indent">
“He who is content with himself<br>
Has done a worthless work.<br>
Achievement is the beginning of failure.<br>
Fame is the beginning of disgrace.”
</div>
<br>
Who can free himself from achievement<br>
And from fame, descend and be lost<br>
Amid the masses of men?<br>
He will flow like Tao, unseen,<br>
He will go about like Life itself<br>
With no name and no home.<br>
Simple is he, without distinction.<br>
To all appearances he is a fool.<br>
His steps leave no trace. He has no power.<br>
He achieves nothing, has no reputation.<br>
Since he judges no one<br>
No one judges him.<br>
<br>
<div class="indent">Such is the perfect man:<br>
His boat is empty.
</div>
<br>
<br>
[xx. 2.]<br>
[xx. 2, 4-]<br>
114<br>
115
</div> <!-- Closing POEM-A -->
</div> <!-- Closing PARCH -->
</body>
</html> quote=“semicodin, post:40, topic:445947”]
I’m too new at shape-outside: polygon to fully understand it and of course
[/quote]
I don’t understand what you are trying to do here. It simply looks like two columns of text but with one column faded and all the text overlapping because you gave it a height that it didn’t need. What is your aim here?
If you remove the shape-outside and the height on twrap1 then you will have two columns and no overlap or overflow at the bottom.
e.g.
I have no idea if that’s what you were trying to do though and if it was I would have used a 2 column flex and not floats.
If you move the text down then the text will move onto the black border at the bottom and be obscured. Again I’m not quite sure what you are asking? You have reduced the height of the tabs so there’s less space anyway and the rounded corners and overlaps no longer look as nice as in my demo. the tabs don’t overlap anymore and look odd to me.
Irrespective of the above I already mentioned how to move the text without changing anything in a previous post#14.
Of course you have removed the b element and inserted an a element instead so you would change the code to target the a element instead of the b element. there was no need to wrap a useless span around the anchor (.bklink) as that’s just wasted space and makes the code more confusing than it is
I took the liberty of removing the span and putting the overlap back on the tabs and updated that last codepen.
This looks neater to me.
Whoa whoa whoa! Paul. First I’m attaching a screenshot of what isn’t working for me. There are two things only and if I inadvertently broke the page by posting that direct code from Tricks’s website just remove it.. See how high the text is riding on the labels? If it goes much higher it’ll be obscuring the tabs’ best feature: their burnishing.
I only wanted the text a bit lower that’s all. if you look closely you may even see where I crudely attempted some padding in my efforts to force it off of the lovely burnishing you coded for it ( can’t remember if I removed it; there’ve been a few revisions).
Then, look at the first two stanzas of the poem: They go too deeply into the dark burnishing so I have two options: I can bluntly indent the two stanzas or I can finesse the text by giving it some gentle wrapping past the darker edges over to the lighter of PARCHMENT-A and a gutter. I only was asking if we could perform a gentle wrap around its dark edges and then I was going to study the code and begin experimenting on my own. I have no idea what I am doing Paul and I only staged that bit of code to conveniently suggest the style be called .twrap1 and appear there at the bottom of the CSS.
I don’t like the black text to be sitting on top of the darkest colors of the burnishing and I want it nudged to the right with a 20px (1.25rem) gutter.
Here’s a screenshot:
The other way for me to get it off of that dark stain is by lifting the two stanzas completely and shoving them to the right: It’s a crude workaround and I’d prefer the text “coax” its way around the stain but it is an alternate way of doing it:
See the red curves — this is approximately the effect I’m looking for. I’m sorry I know I’m not describing this well Paul. Indented on a curve. Kind of like when we tidy HTML and the code forms these “waves” of text. Just for the first two stanzas and then it returns to align left. I’ll modify the indent on the third stanza on my own.
I’m always better with a graphic:
From the Mozilla site I tried their model for an ellipse but truly I do not know what I am doing. Thank you anyone who can help. 
I’m uncertain the shape-outside protocol is even applicable to me because I’m not giving the code an alpha layer to work with. Perhaps there is a more appropriate way of going about it. Where is Snady . . . He’s mastered the art of typing in a non-linear environment. Paging Snady (probably outside enjoying the weather lol).
