Creating scaleable SVG file folder tabs

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&#47;Formatted &#7172;</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">&ldquo;Zhuangzi&rdquo;</a></span></div>
         </div>
      </div>
      <div class="parch">
         <div class="poem-a">
            <div class="leada">
               &ldquo;Cracking the Safe&rdquo;
            </div>
            <div class="leadb">
               From <i>&ldquo;The Way of Chuang Tzu&rdquo;</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">&#10034;&#10034;&#10034;&#10034;</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&nbsp;&mdash;<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">&nbsp;</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">&#10034;&#10034;&#10034;&#10034;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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.

1 Like

I did have one question Paul. You had this commented out and I wondered if I should leave it in. If it’s a placeholder I definitely want to keep it in. But if it won’t be used for anything may I delete it?

    /*
.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);
    }
    */

You can delete that unless you are going to use different tab colors or different images for each,

1 Like

In that case I am definitely keeping it! I wish I had one of those text comparison utilities (I had them on all 3 of the desktops that were stolen from me sigh) so I/we could see where the errant code was hiding but ah well, it works, that’s what matters.

Hey Paul I don’t suppose I could talk you into doing a 2-tab-across set? It would be for parchment tabs that have need of extra labeling room. I’m not always going to be able to fit my labels into 3 tabs. If it’s a major production β€” and most importantly not fun β€” I can ask @snadyleiby to help me. It’s just I love the burnishing on them. They’re wickedly cool (especially when they’re animated) :eyebrows: and I don’t know if @snadyleiby will be able to replicate them in SVG. You are such an artist Paul! I still can’t believe you did these in CSS.

A brief pause and then on to the issue that is the focus of this thread: SVG tabs is believe it or not what’s next . . .

Haven’t had much spare time today but here’s a start.

1 Like

They’re lovely Paul! Perfect. I’m uploading a favorite poem of mine. Before my hip went out I used to love to go hiking and camping. In this piece Merton captures the lowing of the forests on a windy day.

And I’m sharing one last graphic as we close out parchments and transition to SVG tabs. Its dimensions are particularly well suited to poetry if anyone’s sharing poetry on their site, and you can easily customize its appearance by opening the graphic in your painting app and dragging its hue to the desired color. Anyone interested in parchment backgrounds will appreciate this one, it’s quite unique. Here then, β€œThe Breath of Nature” and β€œTwo Kings and No-Form” (one of Merton’s more deadly pieces, a favorite).

<!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">
  <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>98_THE BREATH OF NATURE w&#47;Thomas Merton &#7172;</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*/
    }

    .tablabel3 {
      position: relative;
      text-align: center;
      border-radius: 20px 20px 0px 0px;
      color: black;
      padding: 1rem 1rem 0;
      font-family: 'fira sans extra condensed', sans-serif;
      font-size: 2rem;
      line-height: 2.0;
      font-weight: bold;
      height: 70px;
      width: 250px;
      width: 393px;
      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://assets.codepen.io/74047/PARCHMENT-A.jpg");
      background-position: -3px -8px;
      transform: perspective(100px) rotateX(25deg) translateY(4px);
      border-radius: 20px 20px 0 0;
    }

    .bkdimg {
      position: relative;
      background: none;
      overflow: hidden;
      margin-top: 1rem;
      margin-bottom: -5px;
      /* 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 .tablabel3:before {
    background: var(--tab1color);
    color: #000;
    }
    .ctr2 .tab:before,
    .ctr2 .tab:after {
    box-shadow: 0 34px var(--tab1color);
    }
    .ctr3 .tab span *,
    .ctr3 .tablabel3: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-B ━━━━━━ */

.indenta {margin-left: 3.75rem}

    .spacr {
      margin-top: 40px
    }

    .spacr15 {
      margin-top: 15px
    }

    .spacrx {
      margin-top: 40px;
      margin-bottom: 150px;
    }

    .tab a {
      transform: translateY(-11px);
      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-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-b {
      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 {
      position: relative;
      z-index: 99;
      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;
    }

    .foot {
      margin-top: 2rem;
      text-align: left;
      font-style: normal;
      margin-bottom: 2.5rem;
      font-family: 'crete round', serif;
      font-weight: bold;
      font-size: 1.75rem;
      line-height: 1.75rem;
    }

    /* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
  </style>
  </head>

<body>

  <div class="bkdimg tab1active">
    <div class="ctr ctr2">
      <div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">CHUANG TZU (369-286 BC)</a></span></div>
    </div>

    <div class="ctr ctr3">
      <div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Warring_States_period">&ldquo;WARRING STATES&rdquo; c. 475 BC</a></span></div>
    </div>
  </div>

  <div class="parch">
    <div class="poem-b">
      <div class="leada">
        &ldquo;The Breath of Nature&rdquo;
      </div>
      <div class="leadb">
        From <i>&ldquo;The Way of Chuang Tzu&rdquo;</i>
      </div>
      <div class="leadc">
        Interpretation by Thomas Merton, Trappist Monk<br>
        1915-1968
      </div>

      <p class="indenta">
When great Nature sighs, we hear the winds<br>
Which, noiseless in themselves,<br>
Awaken voices from other beings,<br>
Blowing on them.<br>
From every opening<br>
Loud voices sound. Have you not heard<br>
This rush of tones?<br>
      </p>

There stands the overhanging wood<br>
On the steep mountain:<br>
Old trees with holes and cracks<br>
Like snouts, maws, and ears,<br>
Like beam-sockets, like goblets,<br>
Grooves in the wood, hollows full of water:<br>
You hear mooing and roaring, whistling,<br>
Shouts of command, grumblings,<br>
Deep drones, sad flutes.<br>
One call awakens another in dialogue.<br>
Gentle winds sing timidly,<br>
Strong ones blast on without restraint.<br>
Then the wind dies down. The openings<br>
Empty out their last sound.<br>
Have you not observed how all then trembles and subsides?<br>
<br>
Yu replied: I understand:<br>
The music of earth sings through a thousand holes.<br>
The music of man is made on flutes and instruments.<br>
What makes the music of heaven?<br>
<br
Master Ki said:<br>
Something is blowing on a thousand different holes.<br>
Some power stands behind all this and makes the sounds die down.<br>
What is this power?

<div class="foot">
[ii. 1.]<br>
38<br>
39</div>
  <!--  Closing POEM-B  -->
  </div>
  <!--  Closing PARCH  -->
  </div>

</body>
</html>

β€œTwo Kings and No-Form”

<!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;u800;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>TWO_KINGS_AND_NO_FORM w&#47;THOMAS MERTON, NO ANI &#7172;</title>

  <style>
    body {
      margin: 0px;
      background-size: 100% 100%;
      background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOe1Kjl2Sl1QRjWA1iinSIiruM3Gk--aRVlnJNg8tJe69b1jzMVkYeC7TwjixgiZVvW_LnRaOVCs8D53hMipZ87AijR__pb4Za0hdc_gJiIlbjsMQ=w1080-h3434');
      background-position: 0 -10px;
      background-attachment: scroll;
      background-repeat: no-repeat;
      font-family: 'crete round', serif;
      font-size: 2rem;
      line-height: 2.13rem;
      font-weight: bold;
      color: black;
    }

    .indent {
      margin-left: 2.5rem
    }

    .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: 5rem 0 0 0;
      text-align: center;
      font-family: 'crete round', serif;
      font-weight: bold;
      font-size: 1.63rem;
      line-height: 1.75rem;
    }

    .leadb {
      margin: 0;
      text-align: center;
      font-family: 'crete round', serif;
      font-weight: 400;
      font-size: 1.38rem;
      line-height: 1.75rem;
    }

    .leadc {
      margin: .13rem 0 0 0;
      text-align: center;
      font-family: 'crete round', serif;
      font-weight: 400;
      font-size: 1.06rem;
      line-height: 1.06rem;
    }
    .leadd {
      margin: 0;
      text-align: center;
      font-style: normal;
      margin-bottom: 2.5rem;
      font-family: 'crete round', serif;
      font-weight: 400;
      font-size: .75rem;
      line-height: .5rem;
    }

    .poem-c {
      margin: 2rem 10% 6.26rem 10%;
      text-align: left;
      color: black;
      font-family: 'crete round', serif;
      font-size: 1.25rem;
      line-height: 1.38rem;
      font-weight: bold;
    }
    .foot {
      margin-top: 1rem;
      text-align: left;
      font-style: normal;
      margin-bottom: 2.5rem;
      font-family: 'crete round', serif;
      font-weight: bold;
      font-size: 1rem;
      line-height: 1rem;
    }


    /* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
  </style>
</head>

<body>

<div class="leada">
    &ldquo;Two Kings and No-Form&rdquo;
</div>
<div class="leadb">
    From <i>&ldquo;The Way of Chuang Tzu&rdquo;</i>
</div>
<div class="leadc">
    Interpreted by Thomas Merton, Trappist Monk<br>
    1915-1968
</div>

<div class="poem-c">
The South Sea King was Act-on-Your-Hunch.<br>
The North Sea King was Act-in-a-Flash.<br>
The King of the place between them was<br>
No-Form.<br>
<br>
Now South Sea King<br>
And North Sea King<br>
Used to go together often<br>
To the land of No-Form:<br>
He treated them well.<br>
<br>
So they consulted together<br>
They thought up a good turn,<br>
A pleasant surprise, for No-Form<br>
In token of appreciation.<br>
<br>
&ldquo;Men,&rdquo; they said, &ldquo;have seven openings<br>
For seeing, hearing, eating, breathing,<br>
And so on. But No-Form<br>
Has no openings. Let&rsquo;s make him<br>
A few holes.&rdquo;<br>
So after that<br>
They put holes in No-Form,<br>
One a day, for seven days.<br>
And when they finished the seventh opening,<br>
Their friend lay dead.<br>
<br>
Lao Tan said:<br>
&ldquo;To organize is to destroy.&rdquo;<br>

<div class="foot">
[vii. 7.]<br>
66</div>
    <!--  Closing POEM-C  -->
  </div>
</body>
</html>
1 Like

Here are two more parchments β€” photoreal & uniquely suited to the poetry format β€” and now we really are moving onto SVG graphic tabs I promise!! :tongue:

β€œAdvising the Prince”

<!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>ADVISING THE PRINCE w&#47;THOMAS MERTON &#7172;</title>
        <style>
            body {
            margin: 0px;
            background-size: 100% 100%;
            background-image: url('https://lh3.googleusercontent.com/pw/AP1GczN6f2h7sIuPY0YrcHP09KArf528oSy5QX2jGbxZYiu0oIlQa4jrnrKS_gRhiY78x-3wkgacb-xyE-BHv4nH6mdzFQcOwgFJundTS-lCudA3nJNfWA=w1080-h5125');
            background-position: 0 -10px;
            background-attachment: scroll;
            background-repeat: no-repeat;
            font-family: 'crete round', serif;
            font-size: 2rem;
            line-height: 2.13rem;
            font-weight: bold;
            color: black;
            }
            .indent {
            margin-left: 2.5rem
            }
            .leada {
            color: white;
            margin:12rem 0% 0% 0%;
            text-align: center;
            font-family: 'crete round', serif;
            font-weight: bold;
            font-size: 1.5rem;
            line-height: 1.75rem;
            }
            .leadb {
            margin: 0;
            color: white;
            text-align: center;
            font-family: 'crete round', serif;
            font-weight: 400;
            font-size: 1.38rem;
            line-height: 1.75rem;
            }
            .leadc {
            margin: .13rem 0 0 0;
            color: white;
            text-align: center;
            font-family: 'crete round', serif;
            font-weight: 400;
            font-size: .88rem;
            line-height: 1.06rem;
            }
            .leadd {
            margin: 0;
            text-align: center;
            font-style: normal;
            margin-bottom: 2.5rem;
            font-family: 'crete round', serif;
            font-weight: 400;
            font-size: .75rem;
            line-height: .5rem;
            }
            .poem-j {
            margin: 2rem 25% 14rem 25%;
            text-align: left;
            color: black;
            font-family: 'crete round', serif;
            font-size: 1.25rem;
            line-height: 1.38rem;
            font-weight: bold;
            }
            .foot {
            margin-top: 1rem;
            color: white;
            text-align: left;
            font-style: normal;
            margin-bottom: 2.5rem;
            font-family: 'crete round', serif;
            font-weight: 400;
            font-size: .88rem;
            line-height: 1rem;
            }
            /* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
        </style>
    </head>
    <body>
        <div class="leada">
            &ldquo;Advising the Prince&rdquo;
        </div>
        <div class="leadb">
            From<br>
            <i>&ldquo;The Way of Chuang Tzu&rdquo;</i>
        </div>
        <div class="leadc">
            Interpreted by<br>
            Thomas Merton, Trappist Monk<br>
            1915-1968
        </div>
        <div class="poem-j">
            The recluse Hsu Su Kwei had come to see Prince Wu.<br>
            The Prince was glad. &ldquo;I have desired,&rdquo; he said,<br>
            &ldquo;To see you for a long time. Tell me<br>
            If I am doing right.<br>
            I want to love my people, and by the exercise of justice<br>
            To put an end to war.<br>
            Is this enough?&rdquo;<br>
            <br>
            &ldquo;By no means,&rdquo; said the recluse.<br>
            &ldquo;Your &lsquo;love&rsquo; for your people<br>
            Puts them in mortal danger.<br>
            Your exercise of justice is the root<br>
            Of war after war!<br>
            Your grand intentions<br>
            Will end in disaster!<br>
            <br>
            &ldquo;If you set out to &lsquo;accomplish something great&rsquo;<br>
            You only deceive yourself.<br>
            Your love and justice<br>
            Are fraudulent.<br>
            They are mere pretexts<br>
            For self-assertion, for aggression.<br>
            One action will bring on another<br>
            And in the chain of events<br>
            Your hidden intentions<br>
            Will be made plain.<br>
            <br>
            &ldquo;You claim to practice justice. Should you seem to succeed<br>
            Success itself will bring more conflict.<br>
            Why all these guards<br>
            Standing at attention<br>
            At the palace gate, around the temple altar,<br>
            Everywhere?<br>
            <br>
            &ldquo;You are at war with yourself!<br>
            You do not believe in justice,<br>
            Only in power and success.<br>
            If you overcome<br>
            An enemy and annex his country<br>
            You will be even less at peace<br>
            With yourself than you are now.<br>
            Nor will your passions let you<br>
            Sit still. You will fight again<br>
            And again for the sake of<br>
            A more perfect exercise of &lsquo;justice&rsquo;!<br>
            <br>
            &ldquo;Abandon your plan<br>
            To be a &lsquo;loving and equitable ruler.&rsquo;<br>
            Try to respond<br>
            To the demands of inner truth.<br>
            Stop vexing yourself and your people<br>
            With these obsessions!<br>
            Your people will breathe easily at last.<br>
            They will live<br>
            And war will end by itself!&rdquo;<br>
            <br>
            <div class="foot">
                [xxiv. 2.]<br>
                139<br>
                140
            </div>
        </div>
        <!--  Closing POEM-J  -->
    </body>
</html>

β€œCutting Up an Ox”

<!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>CUTTING_UP_AN_OX w&#47;THOMAS MERTON &#7172;</title>
        <style>
            body {
            margin: 0px;
            background-size: 100% 100%;
            background-image: url('https://lh3.googleusercontent.com/pw/AP1GczO5lKPt16QDl4mHkJwpHtSHAeG0SAO-CeXxioPaM-LiTbUH9ezi7sNjO5mo02ufJ0b1ffvwQ_Oh76A2all8Hmzp8M5Coy0jBkahiIAIPt2ypC5J0g=w1050-h4100');
            background-position: 0 -10px;
            background-attachment: scroll;
            background-repeat: no-repeat;
            font-family: 'crete round', serif;
            font-size: 2rem;
            line-height: 2.13rem;
            font-weight: bold;
            color: black;
            }
            .indent {
            margin-left: 2.5rem
            }
            .leada {
            color: black;
            margin: 13rem 0 0 0;
            text-align: center;
            font-family: 'crete round', serif;
            font-weight: bold;
            font-size: 1.63rem;
            line-height: 1.75rem;
            }
            .leadb {
            margin: 0;
            text-align: center;
            font-family: 'crete round', serif;
            font-weight: 400;
            font-size: 1.38rem;
            line-height: 1.75rem;
            }
            .leadc {
            margin: .13rem 0 0 0;
            text-align: center;
            font-family: 'crete round', serif;
            font-weight: 400;
            font-size: .88rem;
            line-height: 1.06rem;
            }
            .leadd {
            margin: 0;
            text-align: center;
            font-style: normal;
            margin-bottom: 2.5rem;
            font-family: 'crete round', serif;
            font-weight: 400;
            font-size: .75rem;
            line-height: .5rem;
            }
            .poem-g {
            margin: 2rem 8% 6.26rem 12%;
            text-align: left;
            color: black;
            font-family: 'crete round', serif;
            font-size: 1.25rem;
            line-height: 1.38rem;
            font-weight: bold;
            }
            .foot {
            margin-top: 1rem;
            text-align: left;
            font-style: normal;
            margin-bottom: 2.5rem;
            font-family: 'crete round', serif;
            font-weight: bold;
            font-size: 1rem;
            line-height: 1rem;
            }
            /* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
        </style>
    </head>
    <body>
        <div class="leada">
            &ldquo;Cutting Up an Ox&rdquo;
        </div>
        <div class="leadb">
            From <i>&ldquo;The Way of Chuang Tzu&rdquo;</i>
        </div>
        <div class="leadc">
            Interpreted by Thomas Merton, Trappist Monk<br>
            1915-1968
        </div>
        <div class="poem-g">
            Prince Wen Hui&rsquo;s cook<br>
            Was cutting up an ox.<br>
            Out went a hand,<br>
            Down went a shoulder,<br>
            He planted a foot,<br>
            He pressed with a knee,<br>
            The ox fell apart<br>
            With a whisper,<br>
            The bright cleaver murmured<br>
            Like a gentle wind.<br>
            Rhythm! Timing!<br>
            Like a sacred dance,<br>
            Like &ldquo;The Mulberry Grove,&rdquo;<br>
            Like ancient harmonies!<br>
            <br>
            &ldquo;Good work!&rdquo; the Prince exclaimed,<br>
            &ldquo;Your method is faultless!&rdquo;<br>
            &ldquo;Method?&rdquo; said the cook<br>
            Laying aside his cleaver,<br>
            &ldquo;What I follow is Tao<br>
            Beyond all methods!<br>
            <br>
            &ldquo;When I first began<br>
            To cut up oxen<br>
            I would see before me<br>
            The whole ox<br>
            All in one mass.<br>
            <br>
            &ldquo;After three years<br>
            I no longer saw this mass.<br>
            I saw the distinctions.<br>
            <br>
            &ldquo;But now, I see nothing<br>
            With the eye. My whole being<br>
            Apprehends.<br>
            My senses are idle. The spirit<br>
            Free to work without plan<br>
            Follows its own instinct<br>
            Guided by natural line,<br>
            By the secret opening, the hidden space,<br>
            My cleaver finds its own way.<br>
            I cut through no joint, chop no bone.<br>
            <br>
            &ldquo;A good cook needs a new chopper<br>
            Once a year he cuts.<br>
            A poor cook needs a new one<br>
            Every month β€” he hacks!<br>
            <br>
            &ldquo;I have used this same cleaver<br>
            Nineteen years.<br>
            It has cut up<br>
            A thousand oxen.<br>
            Its edge is as keen<br>
            As if newly sharpened.<br>
            <br>
            &ldquo;There are spaces in the joints;<br>
            The blade is thin and keen:<br>
            When this thinness<br>
            Finds that space<br>
            There is all the room you need!<br>
            It goes like a breeze!<br>
            Hence I have this cleaver nineteen years<br>
            As if newly sharpened!<br>
            <br>
            &ldquo;True, there are sometimes<br>
            Tough joints. I feel them coming,<br>
            I slow down, I watch closely,<br>
            Hold back, barely move the blade,<br>
            And whump! the part falls away<br>
            Landing like a clod of earth.<br>
            <br>
            &ldquo;Then I withdraw the blade,<br>
            I stand still<br>
            And let the joy of the work<br>
            Sink in.<br>
            I clean the blade<br>
            And put it away.&rdquo;<br>
            <br>
            Prince Wan Hui said,<br>
            &ldquo;This is it! My cook has shown me<br>
            How I ought to live<br>
            My own life!&rdquo;<br>
            <br>
            <div class="foot">
                [iii. 2.]<br>
                45<br>
                46<br>
                47
            </div>
            <!--  Closing POEM-G  -->
        </div>
    </body>
</html>

I created this thread because my Single-Tab thread quickly morphed into a 3-Tab thread and we had Paul’s masterpiece of CSS β€” the popularity of which is reflected in my Codepen visits. In this thread I hope to achieve fully scaleable replicas of the tab/tabs in SVG.

Below is a PERFECT replica of Paul’s tab in SVG! One of the talented artists in the Inkscape Forum produced this beauty and take special notice of the exquisite work he did on the slopes. Crisp, sharp and ready for action. Thank you Tyler! I’ve invited him (and others) to swing by and see how we’re progressing. And now to the tabs project . . .

I aspire to create eight different categories of this tab:

  1. a single tab that is the equivalent of the Yellow+Border SVG tab I’m giving you to use as your master β€” centered on the page for use as 1 standalone tab on the page
  2. a 2-tab version of the Yellow Master
  3. a 3-tab version of the master
  4. a 7-tab version of the master, and finally
    5-8) the equivalent of these 4 configurations without the tab border (we’ll call these β€œBasic” tabs)

We should be coding for both tabs that can hold links/plain text and tabs that β€” when clicked (or selected if on a SmartPhone) β€” can take you to some other website -or- local html page. I intend to use both my Drive account -and- Pure Browser to access my pages; others may have purchased web space of their own for that purpose.

As I said this is a popular coding challenge that I suspect is going to be used by more people than just myself so I want to give everyone what I anticipate they want. The key to this project is to appreciate that the built-in scaleability of SVG will allow us to create up to a 7-tab spread that can scale to everyone’s viewport, from my SmartPhone . . . to a Widescreen Desktop!

Paul absolutely nailed the shape of this tab. That’s the exact shape I want; not some other. The slope is perfect. These are intended to replicate the manila file folder tabs that have sold here in the U.S. for well over 100 years. There are a dearth of square tab, half round and other shapes you can find on the net; we’re going to create The Gold Standard using the following example. Thank you everyone who’s been following this, I hope we don’t let you down. I’m assigning these tabs the license class β€œPublic Domain”. Let’s write SVG!

semicodin

CUTE-TAB_Ver-1_2380px-TD.zip (8.9 KB)

There is a problem even with svgs in that you have to decide whether to preserve the aspect ratio of the svg or instead to allow it to stretch both ways if required.

If you preserve the aspect ratio then the height of the svg will be controlled by the width available to it which may not be enough to cover the text content of the tab. If you set the height to fit and allow the width to stretch to maintain aspect ratio then the tab becomes much wider that in needs to be and the ends become quite wide.

On the other hand if you make it stretchy in both direction then it will lose some of its aspect ratio and won’t scale uniformly.

I’ve had a brief look at the svg and made a codepen but this is far from perfect and uses the non aspect ratio approach to stretch the svg but there are some issues. There doesn’t seem to be an easy way to keep the text within the confines of the tab because the tab is just an image as such and the white space around the tab is still part of that image.

It was also quite complicated to work out how to apply your background image to the path in the svg but I eventually found a way but others more familiar with svg may know better.

I’ll have to return to this tomorrow afternoon and I will make a version that preserves aspect ratio to show the difference.

Lastly there will still be the issue of what this looks like on your phone because previously you were setting a fixed width and basically pinch and zooming on your phone. You wouldn’t have to do that with these tabs as they scale smaller but I’m guessing they will not look the same as the zoomed display you had unless all fonts and content are also made to go smaller.

Anyway, if anyone else wants to fork the codepen and improve on it then feel free as I won’t be around until tomorrow afternoon now.

Note: The svg in the codepen is your svg. I just took all the inskscape stuff out of it.

1 Like

This one preserves the aspect ratio and you can see that the height and width have to grow uniformly resulting in taller tabs when there are fewer items.

1 Like

I just wanted to give you the working table that these tabs belong to Paul. I’m going to study both your pages very carefully. By the way, the color for what should be (initially) one tab, centered, is #8e815e. There’s no rush on this Paul; take all the time you need. I wasn’t expecting a response until the weekend. :tongue:

<!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">

<title>98 2026 1-TAB CLASS-2 &#47; SENATE &#47; &#7172; SENATE ELECTION</title>

<style>

body {
    width: 880px;
    margin: 1.94rem auto;
    margin-bottom: 3.75rem;
    font-family: 'courier prime', monospace;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: bold;
    color: black;
}

td {
    padding-top: .4rem;
    padding-right: .4rem;
    padding-bottom: .4rem;
    padding-left: .7rem;
}

.lead {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-family: 'special elite', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}
.tally {
	padding-left: 0px;
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.19rem;
    line-height: 2.31rem;
    color: black;
}
.class {
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.19rem;
    line-height: 2.31rem;
    color: crimson;
}
/* ━━━━━━━━━ SVG CONTAINER ━━━━━━━━━━ */

.tab2c {  /* denotes a β€œtab in the 2nd position of a 3-tab alternate, centered” */
    text-align: center;
    }

/* ━━━━━━━━━ TABLE 1 ━━━━━━━━━━ */

.table1 {
      width: 100%;
      /*  See LINK STYLING for font sizing  */
      padding: 6px;
      text-align: center;
      background: black;
    }

/* ━━━━━━━━━ TABLE 2 ━━━━━━━━━━ */

.td2 {
      width: 268px;    /*  OPTIONAL COLUMN WIDTH  */
      color: black;
      text-align: left;
    }
    .table2 {
      background-color: #cccccc;
      border: 1rem groove #bbac86;   /*  brown  */
      padding: .25rem;
      text-align: left;
      width: 100%;
    }

/* ━━━━━━━━━ TABLE 3 ━━━━━━━━━━ */

    .table3 {
      background-image: linear-gradient(#cccccc, white);
      width: 100%;
      color: black;
      padding: .38rem .63rem .38rem .38rem;
      text-align: justify;
      vertical-align: middle;   /*  no border because it’s in table2  */
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.19rem;
      line-height: 2.31rem;
      font-weight: 400;
    }

/* ━━━━━━━━━ TABLE 4 ━━━━━━━━━━ */
.table4 th {
    border-bottom: 1rem groove #cccccc;
    background-color: black;
    font-family: 'roboto slab', serif;
    font-size: 2.06rem;
    line-height: 2.25rem;
    font-weight: bold;
    padding: .94rem;
}
.th4a {
    width: 80px;          /*    HEADER WIDTH    */
    color: white;
    text-align: center;
    border-right: .4rem solid #cccccc;
}
.th4b {
    width: 265px;          /*    HEADER WIDTH    */
    color: #56ff00;       /* neon green */
    text-align: center;
    border-right: .4rem solid #cccccc;
}
.th4c {
    width: 400px;          /*    HEADER WIDTH    */
    color: white;
    text-align: center;
}

.rowdy {
    border-top: .4rem solid black;
}

.table4 {
    width: 100%;
    border: 1rem groove #cccccc;    /* grey */
    border-collapse: collapse;
    font-family: 'roboto slab', serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: bold;
    color: black;
}
.table4 tbody tr:nth-child( odd ) {
    background-color: #ffffcc;        /* STRIPE YELLOW  */
    border-bottom: .19rem solid black;
}
.table4 tbody tr:nth-child( even ) {
    background-color: white;
    border-bottom: .19rem solid black;
}
.table4 tbody tr td:nth-of-type(1) {
    border-right: .19rem solid black;
    text-align: center;
}
.table4 tbody tr td:nth-of-type(2) {
    border-right: .19rem solid black;
    text-align: left;
}
.virgini {
	text-align: center;
	color: black;
    padding-bottom: .1rem;
    font-family: 'roboto condensed', serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 700;
}

.condl {
	text-align: left;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: 400;
}
.condj {
	text-align: justify;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: 400;
}
.condlb {
	text-align: left;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: 700;
}
.condc {
	text-align: center;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.06rem;
    line-height: 2.19rem;
    font-weight: 400;
}
.condi {
	text-align: center;
	font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: 400;
}

/* ━━━━━━━━ CELL STYLING ━━━━━━━━ */
.cell1 {
    display: block;
    color: black;
    background-color: #cccccc;         /*  grey  */
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: bold;
}
.cell2 {
    display: block;
    color: white;
    background-color: black;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: bold;
}
.cell3 {
    display: block;
    color: black;
    background-color: #c8e3ff;       /* light blue */
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: bold;
}
.cell4 {
    display: block;
    color: white;
    background-color: blue;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: bold;
}
.cell5 {
    display: block;
    text-align: center;
    color: black;
    background-color: yellow;
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}
.cell6 {
    background-image: linear-gradient(#bbac86, white);
    display: block;
    text-align: center;
    color: black;
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}
.cell7 {
    display: block;
    text-align: center;
    color: black;
    background-color: #dddddd;    /*  palest grey  */
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}
.cell8 {
    display: block;
    text-align: center;
    color: black;
    background-color: #bbbbbb;    /*  grey  */
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}
.cell9{
    background-image: linear-gradient(#cccccc, white);
    display: block;
    text-align: center;    /* going from pslest grey to white */
    color: black;
 /*   background-color: #bbbbbb;   */   /*  grey  */
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}
.cell10 {
    background-image: linear-gradient(#bbbbbb, #dddddd);
    display: block;
    text-align: center;   /*  going from grey to darker grey */
    color: black;
 /*   background-color: #bbbbbb;  */    /*  grey  */
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}

/* ━━━━━━━━━━ 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}

/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */

a:active {color: #ff70ff}
a:hover {color: #ff70ff}
a:link {color: blue}
a:visited {color: blue}

.redlink a:link {color: crimson}
.redlink a:visited {color: crimson}

.plink a:link {
    color: #ffe5fe;      /*  pink  */;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.plink a:visited {
    color: #ffe5fe;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.wlink a:link {
    color: #ffffff;      /*  cyan  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.wlink a:visited {
    color: #ffffff;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.glink a:link {
    color: #56ff00;      /*  neon green  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.glink a:visited {
    color: #56ff00;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.bnlink a:link {
      padding-bottom: 10px;
      color: #bbac86;    /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
}
.bnlink a:visited {
      padding-bottom: 10px;
      color: #bbac86;    /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
}

/* ━━━━━━ MISCELLANEOUS ━━━━━━━ */

.ctr {text-align: center}
.undr {text-decoration: underline}

.clambk {
	color: black;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 2.69rem;
    font-weight: 900;
}
.clamcr {
	color: crimson;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 2.69rem;
    font-weight: 900;
}
.clambu {
	color: blue;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 2.69rem;
    font-weight: 900;
}
.refdm {
    color: crimson;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.19rem;
}
.scor {
    color: crimson;
    font-family: 'courier prime', monospace;
    font-weight: 700;
    font-size: 2.19rem;
    line-height: 2.19rem;
}
/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */

</style>
</head>

<body>
    <div class="lead">
        10 Democratic Senate Seats in 2026
    </div>

<table class="table1">
	<tr>
		<td class="wlink">
<a href="https://fvap.gov/guide/appendix/state-elections" target="blank">
Click here for current Primary Dates</a>
        </td>
        <td class="glink">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_elections" target="blank">
Wikipedia 2026 Senate Class 2</a>
        </td>
        </tr>
</table>

<table class="table2">
<tr>
            <td>
<span class="tally">UPDATES HERE</span>&nbsp;&nbsp;OOOO/OOOOOO&nbsp;&nbsp;NOVEMBER 3<br>
<span class="tally">UPDATES HERE</span>&nbsp;&nbsp;OOOO/OOOOOO&nbsp;&nbsp;NOVEMBER 3
            </td>
            </tr>
    </table>

<table class="table3">
<tr>
            <td>
&#7172; Each state is assigned 2 senators whose election cycles are called &ldquo;Classes.&rdquo; There are 3 Classes, spread out over 6 years <i>so that neither of the state&rsquo;s allocated 2 senators ever run in the same year.</i> The red number in the first column denotes the other Senate Class the state is a member of so you can see when the candidate&rsquo;s next opportunity to run again will be if s/he loses. 
<i><span class="condib">The General will be held on Nov. 3, 2026;</span> <span class="condlb">all dates referenced below are for the </span><span class="crimb">Primaries</span>.</i>
            </td>
        </tr>
    </table>

<table class="table4">
        <thead>
<tr>
<th class="th4a">CLS</th>
<th class="th4b">STATE <img src="https://lh3.googleusercontent.com/pw/AP1GczPchWv8XcvW0pkSO4yEFFhgbl6z0VgpLa0-kreKKlt41LgPExkwbnCnfX-47MX6Wg5P2IksxxoIYn67rymQVw6T1j2i58XcmBIWW9lGWNiVXefStA=w60-h34" alt=""> LINK</th>
<th class="th4c">DATE <img src="https://lh3.googleusercontent.com/pw/AP1GczPZBBRS1BD-SrgpTPo2oA0qh50-f91t9webdRVhnN4AQqh0EF5-EMh5c8nMO21_83yM4JUGfPERhJA0IVpw5N6AKU4iz2qaqxMzTOT1GvHwYtjVxw=w60-h34" alt=""> CANDIDATE</th>
                </tr>
        </thead>
        <tbody>

<tr>
                <td class="class">3</td>
                <td class="cell10">GEORGIA</td>
                <td>MAY 19&#47;<span class="scor"></span></td>
                
            </tr>
<tr>
                <td><img src="https://lh3.googleusercontent.com/pw/AP1GczNi1ofkxioK1GoegTYGxYnjfZLzO871PbXv0GbJAgyGOQvI9GOvRzu1IBYbP471gU_ox8YwXo7IbM5SCJlQM_U3-aAnPtrSUChS5a5JLFa_-cbC_A=w68-h65-p-k"  alt=""></td>
<td>
                    PRESIDENT<br>
                    <div class="link">
                        <a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Georgia" target="blank">
SENATE &#8212; GA</a>
                    </div>
                    HOUSE
                </td>                
                <td><span class="blu">Jon Ossoff</span> v.<br>
KELLY LOEFFLER?<br>
BRIAN KEMP?</td>
                            </tr>
<tr class="rowdy">
                <td class="class">3</td>
                <td class="cell6"><i>NORTH CAROLINA</i></td>
                <td>MAY 19&#47;<span class="scor"></span></td>
                
            </tr>
<tr>
                <td></td>
                <td>
                 <i>PRESIDENT</i><br>
                    <div class="link">
                        <i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_North_Carolina" target="blank">
SENATE &#8212; NC</a></i>
                    </div>
                    <i>HOUSE</i>
                </td>
                <td><span class="blu">Roy Cooper</span> v.<br>
THOM TILLIS
                </td>
                            </tr>
<tr class="rowdy">
                <td class="class">1</td>
                <td class="cell6"><i>MONTANA</i></td>
                <td>JUN 2&#47;<span class="scor"></span></td>
                
            </tr>
<tr>
                <td></td>
                <td>
                    <i>PRESIDENT</i><br>
                    <div class="link">
                        <i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Montana" target="blank">
SENATE &#8212; MT</a></i>
                    </div>
                    <i>HOUSE</i>
                </td>
                <td><span class="green">OOOOOOOO</span> v.<br>
STEVE DAINES</td>
                            </tr>
<tr class="rowdy">
                <td class="class">1</td>
                <td>NEW MEXICO</td>
                <td>JUN 9&#47;<span class="scor"></span></td>                
            </tr>
<tr>
                <td></td>
                <td>
                 PRESIDENT<br>
                    <div class="link">
                        <a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_New_Mexico" target="blank">
SENATE &#8212; NM</a>
                    </div>
                    HOUSE
                </td>
                <td><span class="green">Ben Ray LujΓ‘n</span> v.<br>
OOOOOOOO</td>
                            </tr>
<tr class="rowdy">
                <td class="class">3</td>
                <td>COLORADO</td>
                <td>JUN 30&#47;<span class="scor"></span></td>
                
            </tr>
<tr>
                <td></td>
                <td>
                    PRESIDENT<br>
                    <div class="link">
                        <a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Colorado" target="blank">
SENATE &#8212; CO</a>
                    </div>
                    HOUSE
                </td>
                <td>Wildly popular former govnr <span class="green">John Hickenlooper</span> v. JOE O&rsquo;DEA</td>
                            </tr>
<tr class="rowdy">
                <td class="class">3</td>
                <td>ILLINOIS</td>
                <td>JUN 30&#47;<span class="scor"></span></td>                
            </tr>
<tr>
                <td></td>
                <td>PRESIDENT<br>
                    <div class="link">
                        <a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Illinois" target="blank">
SENATE &#8212; IL</a>
                    </div>
                    HOUSE
                </td>
                <td><span class="green">Dick Durbin</span> v.<br>
DARIN LAHOOD</td>
                            </tr>
<tr class="rowdy">
                <td class="class">1</td>
                <td class="cell10">MICHIGAN</td>
                <td>AUG 4&#47;<span class="scor"></span><span class="refdm">13% Uncommitted</span></td>
                
            </tr>
<tr>
                <td><img src="https://lh3.googleusercontent.com/pw/AP1GczNi1ofkxioK1GoegTYGxYnjfZLzO871PbXv0GbJAgyGOQvI9GOvRzu1IBYbP471gU_ox8YwXo7IbM5SCJlQM_U3-aAnPtrSUChS5a5JLFa_-cbC_A=w68-h65-p-k"  alt=""></td>
                <td>
                 PRESIDENT<br>
                    <div class="link">
                        <a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Michigan" target="blank">
SENATE &#8212; MI</a>
                    </div>
                    HOUSE
                </td>
                <td><span class="blu">Gary Peters</span> Dearborn MI Arab Americans @13% v.<br>
MIKE ROGERS (popular)
                </td>
                            </tr>
<tr class="rowdy">
                <td class="class">1</td>
                <td>MINNESOTA</td>
                <td>AUG 11&#47;<span class="scor"></span></td>
            </tr>
<tr>
                <td></td>
                <td>
                    PRESIDENT<br>
                    <div class="link">
                        <a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Minnesota" target="blank">
SENATE &#8212; MN</a>
                    </div>
                    HOUSE
                </td>
                <td><span class="green">Tina Smith</span> v.<br>
OOOOOOOO</td>                
                            </tr>
<tr class="rowdy">
                <td class="class">1</td>
                <td class="cell6"><i>WYOMING</i></td>
                <td>AUG 11&#47;<span class="scor"></span><span class="refdm">Paging LIZ CHENEY</span></td>                
            </tr>
<tr>
                <td></td>
                <td>
                 <i>PRESIDENT</i><br>
                    <div class="link">
                        <i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Wyoming" target="blank">
SENATE &#8212; WY</a></i>
                    </div>
                    <i>HOUSE</i>
                </td>
                <td><span class="blu">OOOOOOOO</span> v.<br>
CYNTHIA LUMMIS
                </td>
                            </tr>
<tr class="rowdy">
                <td class="class">3</td>
                <td class="cell6"><i>SOUTH CAROLINA</i></td>
                <td>AUG 11&#47;<span class="scor"></span></td>                
            </tr>
<tr>
                <td class="cell6" style="padding: 9px 0px 4px 0px"><img src="https://lh3.googleusercontent.com/pw/AP1GczMxqxABZKX_7u3OoNcRdasIYENducZtw-BQOo3R5aAgihnLt4JNniDCz-yuXCIYiPxtoPGZguslY-gck77P26YoN8qmD3omBdTARB3LUiykh6sFIw=w100-h118" alt=""></td>
                <td>
                <i>PRESIDENT</i><br>
                    <div class="link">
                        <i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_South_Carolina" target="blank">
SENATE &#8212; SC</a></i>
                    </div>
                    <i>HOUSE</i>
                </td>
                <td><span class="blu">Catherine F. Bruce</span> v.<br>
Entrenched Incumbent LINDSEY GRAHAM</td>
                            </tr>
<tr class="rowdy">
                <td class="class">1</td>
                <td class="cell6"><i>MAINE</i></td>
                <td>AUG 18&#47;<span class="scor"></span></td>                
            </tr>
<tr>
                <td class="cell6" style="padding: 9px 0px 4px 0px"><img src="https://lh3.googleusercontent.com/pw/AP1GczMxqxABZKX_7u3OoNcRdasIYENducZtw-BQOo3R5aAgihnLt4JNniDCz-yuXCIYiPxtoPGZguslY-gck77P26YoN8qmD3omBdTARB3LUiykh6sFIw=w100-h118" alt=""></td>
                <td>
                 <i>PRESIDENT</i><br>
                    <div class="link">
                        <a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Maine" target="blank">
<i>SENATE &#8212; ME</i></a>
                    </div>
                    <i>HOUSE</i>
                </td>
                <td><span class="blu">
                  OOOOOOOO</span> v.<br>
Entrenched Incumbent SUSAN COLLINS
                </td>
                            </tr>
<tr class="rowdy">
                <td class="class">3</td>
                <td class="cell6"><i>ALASKA</i></td>
                <td>AUG 18&#47;<span class="scor"></span></td>                
            </tr>
<tr>
                <td></td>
                <td><i>PRESIDENT</i><br>
                    <div class="link"><i>
                        <a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Alaska" target="blank">
SENATE &#8212; AK</a></i>
                    </div>
                    <i>HOUSE</i>
                </td>
                <td><span class="green">Mary Peltola</span> v.<br>
DAN SULLIVAN</td>
                            </tr>
<tr class="rowdy">
                <td class="class">3</td>
                <td>NEW HAMPSHIRE</td>
                <td>SEP 15&#47;<span class="scor"></span></td>                
            </tr>
<tr>
                <td></td>
                <td>
                    PRESIDENT<br>
                    <div class="link">
                        <a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_New_Hampshire" target="blank">
SENATE &#8212; NH</a>
                    </div>
                    HOUSE
                </td>
                <td><span class="green">Jeanne Shaheen</span> v.<br>
SCOTT BROWN
                </td>
                            </tr>
<tr>
            <td colspan="3"><div class="virgini">West Virginia is a Class 2 Senate Seat but 
at 78% <img src="https://lh3.googleusercontent.com/pw/AP1GczMaONXINFPTnCAL8oh4KzEM5k1CAOdaqc0IzkLsWHvYnNGTbUdcPbNdcUvCeDXJ4yvCd2MsmZWaYztn9_a8j0NkK3aKOySst9wveb_ADRnSilATpg=s30-p-k" alt=""> 
there&rsquo;s no point.</div>
</td>
            </tr>
</table>

</body>
</html>

Paul, please use the following colors scheme for the 7 tabs. I want a day-of-the-week tabs arrangement (7 tabs) and these are the 7 colors we should be building towards eventually. Earthy colors (easy on the eyes) . . .

<!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">

<title>SEVEN COLORS &#47; 2026 1-TAB CLASS-2 &#47; SENATE &#47; &#7172; SENATE ELECTION</title>

<style>

body {
    width: 1080px;
    margin: 1.94rem auto;
    margin-bottom: 3.75rem;
    font-family: 'courier prime', monospace;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: bold;
    color: black;
}

td {
    padding-top: .4rem;
    padding-right: .4rem;
    padding-bottom: .4rem;
    padding-left: .7rem;
}

.lead {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-family: 'special elite', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}
.tally {
	padding-left: 0px;
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.19rem;
    line-height: 2.31rem;
    color: black;
}
.class {
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.19rem;
    line-height: 2.31rem;
    color: crimson;
}
/* ━━━━━━━━━ SVG CONTAINER ━━━━━━━━━━ */

.tab2c {  /* denotes a β€œtab in the 2nd position of a 3-tab alternate, centered” */
    text-align: center;
    }

/* ━━━━━━━━━ TABLE 1 ━━━━━━━━━━ */

.table1 {
      width: 100%;
      /*  See LINK STYLING for font sizing  */
      padding: 6px;
      text-align: center;
      background: black;
    }

/* ━━━━━━━━━ TABLE 2 ━━━━━━━━━━ */

.td2a {
    color: white;
    background-color: black;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2b {
    color: white;
    background-color: #504329;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2c {
    color: white;
    background-color: #695a39;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2d {
    background-color: #8c7e57;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2e {
    background-color: #af9f78;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2f {
    background-color: #d9cfab;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2g {
    background-color: white;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.table2 {
    background-color: #ffffff;
    border: 1rem groove #cccccc;   /*  grey  */
    padding: .25rem;
    text-align: left;
    width: 850px;
    font-family: 'courier prime', monospace;
    font-weight: 700;
	font-size: 5rem;
    line-height: 6rem;
    color: black;
    }
/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */

a:active {color: #ff70ff}
a:hover {color: #ff70ff}
a:link {color: blue}
a:visited {color: blue}

.redlink a:link {color: crimson}
.redlink a:visited {color: crimson}

.wlink a:link {
    color: #ffffff;      /*  cyan  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.wlink a:visited {
    color: #ffffff;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.glink a:link {
    color: #56ff00;      /*  neon green  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.glink a:visited {
    color: #56ff00;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}

/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */

</style>
</head>

<body>
    <div class="lead">
        10 Democratic Senate Seats in 2026
    </div>

<table class="table1">
	<tr>
		<td class="wlink">
<a href="https://fvap.gov/guide/appendix/state-elections" target="blank">
Click here for current Primary Dates</a>
        </td>
        <td class="glink">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_elections" target="blank">
Wikipedia 2026 Senate Class 2</a>
        </td>
        </tr>
</table>

<table class="table2" align="center">
<tr>
            <td class="td2a">
#000000
            </td>
            </tr>
<tr>
            <td class="td2b">
#504329
            </td>
            </tr>
<tr>
            <td class="td2c">
#695a39
            </td>
            </tr>
<tr>
            <td class="td2d">
#8c7e57
            </td>
            </tr>
<tr>
            <td class="td2e">
#af9f78
            </td>
            </tr>
<tr>
            <td class="td2f">
#d9cfab
            </td>
            </tr>
<tr>
            <td class="td2g">
#ffffff
            </td>
            </tr>
    </table>

</body>
</html>

Paul, please take comfort in knowing β€” with the exception of the 2-tab pages β€” I don’t anticipate a great deal of content on the tabs themselves. Literally on the 7-tab pages I envision eg. MON, TUE, WED etc. Or for others 1, 2, 3 etc. They are intended to be shortcut tabs with (likely) a legend somewhere in the body of the page. Another example could be a color key of sorts. I’m just guessing.

But β€” look Paul, no one is expecting the impossible of you (or anyone). We’ll probably hit roadblocks and then . . . well, we gave it our best shot, right? If this won’t work I still have the gorgeous tabs you created for me (and a lot of others Paul!; there are definite signs of traffic on these pages my friend). You know my philosophy: Keep your sense of humor and above all, have fun! No sweat my friend. Hoisting the SVG flag and charting our course into the wild unknown! :weee:

I just have to share with you: My infernal phone created duplicate lines of code yesterday and it was all I could do not to put it in the microwave and . . . well, I was not pleased! I now run it through the validator every time I make even a small edit. You are so lucky to have your desktop with wonderful software.

Or if you wanted something more complimentary with your parchment background . . .

<!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">

<title>SEVEN COLORS 3 &#47; 2026 1-TAB CLASS-2 &#47; SENATE &#47; &#7172; SENATE ELECTION</title>

<style>

body {
    width: 1080px;
    margin: 1.94rem auto;
    margin-bottom: 3.75rem;
    font-family: 'courier prime', monospace;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: bold;
    color: black;
}

td {
    padding-top: .4rem;
    padding-right: .4rem;
    padding-bottom: .4rem;
    padding-left: .7rem;
}

.lead {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-family: 'special elite', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}
.tally {
	padding-left: 0px;
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.19rem;
    line-height: 2.31rem;
    color: black;
}
.class {
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.19rem;
    line-height: 2.31rem;
    color: crimson;
}
/* ━━━━━━━━━ SVG CONTAINER ━━━━━━━━━━ */

.tab2c {  /* denotes a β€œtab in the 2nd position of a 3-tab alternate, centered” */
    text-align: center;
    }

/* ━━━━━━━━━ TABLE 1 ━━━━━━━━━━ */

.table1 {
      width: 100%;
      /*  See LINK STYLING for font sizing  */
      padding: 6px;
      text-align: center;
      background: black;
    }

/* ━━━━━━━━━ TABLE 2 ━━━━━━━━━━ */

.td2a {
    color: white;
    background-color: black;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2b {
    color: white;
    background-color: #731919;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2c {
    color: white;
    background-color: #b16742;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2d {
    background-color: #d4b064;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2e {
    background-color: #e6d677;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2f {
    background-color: #f6efc1;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.td2g {
    background-color: white;
    width: 100%;
    border: 1rem groove #cccccc;   /*  grey  */
    text-align: center;
    }
.table2 {
    background-color: #ffffff;
    border: 1rem groove #cccccc;   /*  grey  */
    padding: .25rem;
    text-align: left;
    width: 850px;
    font-family: 'courier prime', monospace;
    font-weight: 700;
	font-size: 5rem;
    line-height: 6rem;
    color: black;
    }
/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */

a:active {color: #ff70ff}
a:hover {color: #ff70ff}
a:link {color: blue}
a:visited {color: blue}

.redlink a:link {color: crimson}
.redlink a:visited {color: crimson}

.wlink a:link {
    color: #ffffff;      /*  cyan  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.wlink a:visited {
    color: #ffffff;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.glink a:link {
    color: #56ff00;      /*  neon green  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.glink a:visited {
    color: #56ff00;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}

/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */

</style>
</head>

<body>
    <div class="lead">
        10 Democratic Senate Seats in 2026
    </div>

<table class="table1">
	<tr>
		<td class="wlink">
<a href="https://fvap.gov/guide/appendix/state-elections" target="blank">
Click here for current Primary Dates</a>
        </td>
        <td class="glink">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_elections" target="blank">
Wikipedia 2026 Senate Class 2</a>
        </td>
        </tr>
</table>

<table class="table2" align="center">
<tr>
            <td class="td2a">
##000000
            </td>
            </tr>
<tr>
            <td class="td2b">
#731919
            </td>
            </tr>
<tr>
            <td class="td2c">
#b16742
            </td>
            </tr>
<tr>
            <td class="td2d">
#d4b064
            </td>
            </tr>
<tr>
            <td class="td2e">
#e6d677
            </td>
            </tr>
<tr>
            <td class="td2f">
#f6efc1
            </td>
            </tr>
<tr>
            <td class="td2g">
#ffffff
            </td>
            </tr>
    </table>

</body>
</html>

Okay I have asked the Inkscape forum to provide me with 3 very specific sizes of tabs in SVG. The first graphic is a .PNG showing how the file tabs spread out across a 1080px width β€” tested by me after much experimentation β€” the display width of my cellphone. Demo’d are a 2-TAB, 3-TAB and 7-TAB (rough) layout. The ORIGINAL SLOPE is preserved on all three and the SVG files are PERFECT.

The TAB SIZES are therefore:

620px width X 75px height

440px X 60px height

245px X 53px height

These sizes will efficiently fill the width of a 1080px-wide page. I’m sorry if their scaleability doesn’t work for other width screens but they should work with my phone, as my one little (resized) graphic shows:

3 SVG SIZES.zip (4.7 KB)

Before I look at this (as its a mountain of work) I need to be clear about your requirements?

I was under the impression that you wanted to create scalable svg tabs (as indicated in your thread title β€œCreating scaleable SVG file folder tabs”). However from this latest post it seems that you don’t want scalable tabs at all but rather three different exact fixed width versions?

That is the opposite of what I thought we were trying to do. I assumed that we were trying to solve your β€˜pinch and zoom work ethic’ and create one set of tabs that automatically scale to the device size without the need to zoom it?

As you have said many times you are only interested in your own use case and your own device so that’s fine but I need to know which way you want to go as it involves different techniques for coding. In essence we have to create a fixed width 1080px site otherwise it would scale down if it was fluid.

Therefore to enable your three variations of tabs at 3 different sizes will require 3 different sets of code and 3 different sets of tabs. bearing in mind that your inkscape tabs are not web ready and have to be reformed into 3 different sections of code. You can see the difference in my last demo where I have had to manually adjust the svg code down to this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2380 314" width="2380" height="314" preserveAspectRatio="none" hidden style="position:absolute;left:-100vh;top:-100vh; pointer-events:none; width:1px; height:1px overflow:hidden;opacity:0;">
  <defs>
    <g id="cutetab" class="tab-unit">
      <path d="M1822.201 27.87c-422.072.001-844.146-.004-1266.219.003l-2.09.016c-13.898.187-27.782 2.387-41 6.71-18.422 5.96-35.435 15.632-51.132 26.856-18.935 13.613-36.048 29.6-52.055 46.518-19.569 20.745-37.506 42.975-54.494 65.865-5.077 6.778-9.938 13.716-14.947 20.543-13.82 18.625-30.118 35.37-48.127 49.967a314.12 314.12 0 0 1-17.12 12.906 336.624 336.624 0 0 1-7.447 5.06c-19.179 12.666-39.679 23.27-60.875 32.125a449.95 449.95 0 0 1-34.72 12.791 507.535 507.535 0 0 1-15.936 4.848L152.49 314h2074.983c-1.256-.695-2.5-1.421-3.801-2.006-15.837-4.541-31.425-9.841-46.713-16.053-24.64-10.012-48.501-22.427-70.424-37.613a309.491 309.491 0 0 1-10.334-7.46c-2.32-1.76-4.55-3.477-6.84-5.32-16.068-12.84-30.945-27.522-43.838-43.66-6.444-7.988-12.173-16.513-18.29-24.747-18.312-24.863-37.688-49-59.014-71.356-16.065-16.775-33.252-32.6-52.287-45.965-17.093-11.957-35.81-22-56.067-27.357-12.262-3.281-24.982-4.705-37.664-4.594z" />
      <path style="color:#000;fill:#000;" d="M554.598 0c-31.278.319-65.786 9.094-103.606 34.822-38.53 26.211-80.845 69.456-130.36 138.965C229.965 301.071 28.463 305.736 0 306.03V314h156.596c66.909-19.14 140.122-54.935 188.47-122.809 48.228-67.702 88.557-108.268 122.801-131.564 34.244-23.296 62.011-29.758 88.531-29.758h1267.204c26.52 0 54.286 6.462 88.53 29.758 34.245 23.296 74.574 63.862 122.802 131.564 48.348 67.874 121.561 103.669 188.47 122.809H2380v-7.97c-28.461-.294-229.964-4.96-320.633-132.243-49.514-69.51-91.83-112.754-130.36-138.965C1891.188 9.094 1856.68.32 1825.403 0H554.598z" />
    </g>
    <pattern id="imagePattern" patternContentUnits="objectBoundingBox" width="1" height="1"">
      <image href=" https://assets.codepen.io/74047/PARCHMENT-A.jpg" width="4.4" height="3.6" />
    </pattern>
  </defs>
</svg>

Whereas the code from one of the tabs from your svg zip is this monstrosity:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
     width="440.00006"
     height="60"
     viewBox="0 0 116.41668 15.874999"
     version="1.1"
     id="svg5"
     inkscape:version="1.4-beta (62f545ba, 2024-04-22)"
     xml:space="preserve"
     sodipodi:docname="440x60.svg"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
         id="namedview7"
         pagecolor="#ffffff"
         bordercolor="#000000"
         borderopacity="1.0"
         inkscape:pageshadow="2"
         inkscape:pageopacity="0.0"
         inkscape:pagecheckerboard="0"
         inkscape:deskcolor="#d1d1d1"
         inkscape:document-units="mm"
         showgrid="false"
         units="cm"
         inkscape:current-layer="layer1"
         inkscape:showpageshadow="2"
         inkscape:zoom="4.0519048"
         inkscape:cx="143.88295"
         inkscape:cy="0.98719003" /><defs
         id="defs2"><marker
             markerWidth="360.98999"
             markerHeight="4.0110002"
             refX="52.128647"
             refY="20.178822"
             orient="auto"
             id="marker1"
             viewBox="0 0 104.25729 40.357644"
             preserveAspectRatio="xMidYMid"><path
                 id="path1"
                 style="fill:#b13340;stroke:none;stroke-width:0.308684;stroke-linecap:round;stroke-miterlimit:10"
                 d="M 104.25729,20.178822 C 104.25729,31.323288 80.918483,40.357644 52.128654,40.357644 C 23.338806,40.357644 0,20.178822 0,20.178822 C 0,20.178822 23.338806,0 52.128654,0 C 80.918483,0 104.25729,9.0343559 104.25729,20.178822 Z"
                 sodipodi:nodetypes="sscss" /></marker></defs><g
         inkscape:label="Layer 1"
         inkscape:groupmode="layer"
         id="layer1"
         transform="translate(-56.818662,-301.53808)"><path
             id="path10"
             style="fill:#00ffff;stroke-width:30.5454;paint-order:fill markers stroke"
             d="M 93.070721,302.30278 C 82.001329,302.30278 78.438518,302.87922 74.325612,310.32296 C 71.321218,315.76045 68.263344,316.54741 67.526027,317.41296 H 162.52798 C 161.79067,316.54741 158.73278,315.76045 155.72839,310.32296 C 151.61548,302.87922 148.05267,302.30278 136.98328,302.30278 Z"
             sodipodi:nodetypes="ssccsss" /><path
             id="rect10"
             style="opacity:1;fill:#000000;stroke-width:0.264999;stroke-linejoin:bevel;paint-order:fill markers stroke"
             d="M 87.48449,301.53808 C 83.393523,301.54925 80.586565,302.58883 78.515529,304.16325 C 76.433282,305.7462 75.10691,307.81582 73.796437,309.79391 C 72.485964,311.772 71.194574,313.66068 69.243743,315.05561 C 67.292912,316.45054 64.661846,317.39758 60.521278,317.39758 H 56.818662 V 317.41308 H 68.055185 C 68.800941,317.0693 69.481217,316.67873 70.093304,316.24106 C 72.30126,314.66227 73.697128,312.58538 75.013417,310.59851 C 76.329706,308.61164 77.568698,306.71623 79.398162,305.32545 C 81.227626,303.93467 83.662065,302.99536 87.548569,302.99536 H 142.50543 C 146.39193,302.99536 148.82637,303.93467 150.65584,305.32545 C 152.4853,306.71623 153.72429,308.61164 155.04058,310.59851 C 156.35687,312.58538 157.75274,314.66227 159.96069,316.24106 C 160.57278,316.67873 161.25306,317.0693 161.99881,317.41308 H 173.23534 V 317.39758 H 169.53272 C 165.39215,317.39758 162.76108,316.45054 160.81025,315.05561 C 158.85942,313.66068 157.56803,311.772 156.25756,309.79391 C 154.94709,307.81582 153.62123,305.7462 151.53899,304.16325 C 149.46795,302.58883 146.66047,301.54925 142.56951,301.53808 Z" /></g></svg>

a) So to be clear we are designing a one size only page at 1080px width ? (does that include body margins and padding in that width as 1080 + body padding will be greater than 1080px). I ask this because in one of those last posts the html you ask me to use for the table has the body set to 880px so I’m a bit confused?

b) You want three different versions of the tabs all at fixed width and height sizes for the tabs (and the screen width at 1080px)?

If so that will require 3 blocks of svg tabs (3 times what I just posted above) so that you can call each different size tab when required.

1 Like

I’d already started the 7 tabs before I drafted the reply above so I’ll post it anyway as it will show how things will look.

If this is what you wanted then I can do the other two versions which as mentioned will need separate svgs and revised html and css for each.

1 Like

I did the other versions anyway as they need to be reviewed in isolation.

One tab:

Two Tab:

Three tab:

You may want to increase or decrease the font size in the span accordingly for each version dependning on text content and tab size etc.

1 Like

Paul. I don’t want you to have a β€œmountain of work”. I only solicited the three tabs in SVG because I studied your prior comments and (they seeming fully reasonable to me) I saw how the slopes would be broken with the limitations you mentioned. I got these 3 tabs because I figured β€” at a minimum β€” we could at least get them done for my phone. I thought uou’d be relieved to have the slope issue neutralized.

If you can code these to be scaleable great!
If the cost of that is our friendship . . . I’d rather we not even start going down that road (the minute this isn’t fun is the minute we’re/I’m outtahere)! :face_in_clouds: Seriously Paul.

I thought I was helping you but I see that I was only confusing you. I apologize. I’m disappointed more people weren’t checking in for this project. My takeaway?: this is extremely hard and will take so much time for you to program as to be an imposition. Let me go over to the Inkscape forum and see if one of the folks there could help me get these three iterations into something that can scale. They are deeply into SVG there and I won’t have to impose upon you my friend. Fun or nothing. :biggrin:

semicodin

Paul you have this β€”

.svgtabs.twotab a {
  margin-right: ;
}

β€” on or around line 84 of your 7-tab spread. Shall I enter a zero?

Then I’m getting an error message on the word β€œhidden” on my line 263

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2380 314" width="2380" height="314" preserveAspectRatio="none" hidden style="position:absolute;left:-100vh;top:-100vh; pointer-events:none; width:1px; height:1px overflow:hidden;opacity:0;">

And this:

━━━━━━━━━━━━━━━━
Error: Attribute " not allowed on element pattern at this point.

From line 269, column 5; to line 269, column 93