Skip to content

Resolve #3485103 "Updates to base font Type Scale"

Bill Sprowl requested to merge issue/bluecheese-3485103:3485103-updates-to- into 2.x

Closes #3485103

Updates base font sizing.

To test:

Create a story page with a long title and add some example markup to the body:

 <h2>Heading H2</h2>
      <p>Lorem ipsum odor amet, <a href="https://www.google.com">here is a link</a> consectetuer <strong> adipiscing elit. Velit massa proin integer; </strong> senectus viverra. Posuere maecenas aliquam nulla ut, egestas ex turpis eleifend. Proin parturient elit iaculis eleifend diam mattis parturient dolor aliquam? Feugiat id vehicula maecenas augue habitant laoreet sodales. Tempor maecenas dignissim lacinia cras est volutpat dignissim. Aliquet convallis nisl faucibus integer facilisis augue tristique luctus nullam. Dictumst habitant viverra nibh, massa feugiat tellus.</p>
      <h3>Heading H3</h3>
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. <em>Duis cubilia conubia tempor magnis quis conubia etiam magnis.</em> Nunc fringilla mauris a maximus magna imperdiet efficitur; arcu vel. Primis senectus tincidunt rhoncus ullamcorper purus. Rutrum morbi rutrum gravida nisl imperdiet finibus viverra congue. Sollicitudin etiam nascetur luctus placerat magnis augue nulla faucibus tempor. Tortor convallis mauris phasellus ultricies; eget imperdiet aptent maximus. Interdum finibus elit ante blandit suspendisse phasellus natoque. Mollis pellentesque magna tristique hendrerit ridiculus imperdiet auctor. Lorem pellentesque senectus ligula nisl pulvinar elementum habitant hac.</p>
      <blockquote class="quote__blockquote ">
        "Consectetur tincidunt egestas nisl scelerisque phasellus. Molestie feugiat natoque eget; nec cras magnis. Quam tempor sem tristique primis sollicitudin a. Maecenas a orci torquent maecenas dis sodales cursus. Praesent parturient tempus curae taciti pretium tincidunt justo. Ut eleifend penatibus praesent etiam leo."
      </blockquote>
      <p>Dictum mollis ex netus morbi malesuada tristique. <b>Natoque</b> tincidunt vulputate nec nisl viverra vulputate fusce elit? Commodo arcu fermentum nulla; blandit est feugiat. Sapien ridiculus mus vel ridiculus ac commodo. Id commodo metus justo sapien accumsan mattis leo mollis. Semper nascetur habitant vestibulum eget mi sed tincidunt.</p>
      <h4>Heading H4</h4>
      <p>Eget blandit porta sodales dis vivamus purus. Nibh himenaeos <i>fringilla pulvinar urna gravida</i> torquent fringilla. Facilisis nisi pulvinar et urna netus suscipit. Proin id lectus sed netus est. Ipsum ex accumsan volutpat augue nec vivamus malesuada. Est montes curabitur dignissim, fermentum urna elementum. Ligula magnis porttitor blandit blandit ridiculus auctor felis.</p>
      <ol>
        <li>This text is list item</li>
        <li>This is a longer list item by just a little.</li>
        <li>This list item is very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</li>
      </ol>
      <table>
        <thead>
        <tr>
          <th>Feature</th>
          <th>Tollgate</th>
          <th>Wall</th>
          <th>Unexpected longer text header here</th>
          <th>Glass</th>
          <th>Borders</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>Sautéed</td>
          <td>disappearance</td>
          <td>raise</td>
          <td>A long text item here that goes onto a few lines</td>
          <td>quite</td>
          <td>unknown</td>
        </tr>
        <tr>
          <td>Risky</td>
          <td>soul</td>
          <td>sleeps</td>
          <td>going</td>
          <td>a long text item here</td>
          <td>yards</td>
        </tr>
        <tr>
          <td>Throttle</td>
          <td>dragons with longer names that wrap onto a few lines</td>
          <td>gift</td>
          <td>candles</td>
          <td>walls</td>
          <td>lying</td>
        </tr>
        <tr>
          <td>Judged</td>
          <td>flutters</td>
          <td>searing</td>
          <td>respectable</td>
          <td>gladly</td>
          <td>SOme longer text here too just to see how it looks.</td>
        </tr>
        <tr>
          <td>Archers</td>
          <td>unlikely</td>
          <td>uses</td>
          <td>markets</td>
          <td>sworn</td>
          <td>stayed</td>
        </tr>
        <tr>
          <td>Weapon</td>
          <td>pointy-ear</td>
          <td>crowners</td>
          <td>learned</td>
          <td>grief</td>
          <td>avail</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <td>felt</td>
          <td>year</td>
          <td>despair</td>
          <td>remarked</td>
          <td>mutton</td>
          <td>80</td>
        </tr>
        </tfoot>
      </table>

      <h5>Heading H5</h5>
      <p>Leo dictumst libero ultricies mus dignissim pellentesque. Nostra montes purus malesuada tempus massa pretium dapibus mus. Augue a adipiscing potenti dictum hendrerit dolor eleifend consequat. Mollis est curabitur dui etiam sodales parturient hac duis. Felis convallis leo mi nisi maecenas. Curabitur nibh suscipit eu lacus porttitor viverra velit tristique. Mi augue porttitor mus eget turpis arcu sed ipsum? Fusce sapien viverra cubilia aliquet scelerisque mi in. Ad fermentum amet cubilia lobortis accumsan. Torquent penatibus pharetra ac praesent penatibus, mollis malesuada gravida.</p>
      <ul>
        <li>This text is list item</li>
        <li>This is a longer list item by just a little.</li>
        <li>This list item is very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</li>
      </ul>
      <h6>Heading H6</h6>
      <p>Dapibus nisi dignissim etiam maecenas; euismod magna libero. Dignissim hendrerit quis hac parturient ridiculus finibus montes sem. Laoreet volutpat blandit commodo blandit morbi sagittis habitasse. Vehicula ultrices justo sit odio nunc faucibus suspendisse. Maecenas accumsan sociosqu orci et augue enim ridiculus etiam. Quam risus fames euismod, natoque semper bibendum nibh pellentesque!</p>
      <table>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Adam</td>
          <td>Johnson</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
        </tr>
      </table>

Review at mobile below 640px to match figma at: https://www.figma.com/design/tKYim76bnDZAyWubUi3sVv/New-Drupal-Brand---Drupal.org-Design?node-id=6979-3348&t=EuNIRFRLBkWb8op0-1

Review from 641 to 1919px to match https://www.figma.com/design/tKYim76bnDZAyWubUi3sVv/New-Drupal-Brand---Drupal.org-Design?node-id=6865-12162&t=EuNIRFRLBkWb8op0-1

Review at 1920px and wider to match: https://www.figma.com/design/tKYim76bnDZAyWubUi3sVv/New-Drupal-Brand---Drupal.org-Design?node-id=4289-29893&t=EuNIRFRLBkWb8op0-1

Review existing components to make sure there no regressions. There are already tickets to redo CTA section and Hero Centered so regressions are less important to those.

Edited by Bill Sprowl

Merge request reports

Loading