Sign in

[TechNews] Font size for first card title is not consistent for 2 columns layout

  • This topic has 7 replies, 3 voices, and was last updated 3 months, 1 week ago by .
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #7443
    shaun2k

    The h1 class=c-card__title for the first card displayed on the homepage is causing inconsistent font size whenever 2 column layouts are selected. It is much larger than the other cards.

    On the other hand, there is no such problem for the tag, tags, and authors pages as the first card’s c-card__title is declared as h2 class=h5 c-card__title

     

    #7447
    Bob

    I will fix it in an upcoming Publii release, meanwhile, you can fix it by editing the index.hbs ‎⁨file (Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME) as follows:

    about 73 lines, find the following code snippet:

     <h1 class="c-card__title">
       <a href="{{url}}">
          {{title}}
       </a>
    </h1>

    and replace it with:

    <h1 class="c-card__title {{#checkIf @config.custom.layoutFrontpage '==' "2col" }}h5{{/checkIf}}">
       <a href="{{url}}">
          {{title}}
       </a>
    </h1>

    You don’t need to overwrite the index.hbs file as this is exactly what I will apply in the next theme release.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #7449
    shaun2k

    Thanks for your help, Bob.

    However, the fix only worked for Frontpage Layout: 2 columns.

    The first card card title still shows h1 fontsize when Frontpage Layout is “2 columns -2-1” or “2 columns -4-1”.

    #7450
    itips3727

    Thanks for your help, Bob.

    However, the fix only worked for Frontpage Layout: 2 columns.

    The first card card title still shows h1 fontsize when Frontpage Layout is “2 columns -2-1” or “2 columns -4-1”.

     

    On Apple Safari browser, if after making the change Bob suggest above, in the Theme > Theme Settings > Custom Settings > Layout > Layout, change from 1 column to 2 columns, that seems to fix your issue on the latest version demo.

    You still have the H1 on the home page for the first card, but the heading font size now matches the other cards.

    May be a browser cache element involved too, so you might need to clear your browser cache to detect the change.

    <hr />

    Scrub that: you’re right. Sorry 🙂

    #7451
    itips3727

    Thanks for your help, Bob.

    However, the fix only worked for Frontpage Layout: 2 columns.

    The first card card title still shows h1 fontsize when Frontpage Layout is “2 columns -2-1” or “2 columns -4-1”.

    On Apple Safari browser, if after making the change Bob suggest above, in the Theme > Theme Settings > Custom Settings > Layout > Layout, change from 1 column to 2 columns, that seems to fix your issue on the latest version demo.

    You still have the H1 on the home page for the first card, but the heading font size now matches the other cards.

    May be a browser cache element involved too, so you might need to clear your browser cache to detect the change.

    <hr />

    Scrub that: you’re right. Sorry 🙂

    After regenerating a few times with Frontpage Layout set to “2 columns -2-1” or “2 columns -4-1”, on my device, the problem did indeed clear. So looks like a caching issue.

    #7452
    itips3727

    Thanks for your help, Bob.

    However, the fix only worked for Frontpage Layout: 2 columns.

    The first card card title still shows h1 fontsize when Frontpage Layout is “2 columns -2-1” or “2 columns -4-1”.

    On Apple Safari browser, if after making the change Bob suggest above, in the Theme > Theme Settings > Custom Settings > Layout > Layout, change from 1 column to 2 columns, that seems to fix your issue on the latest version demo.

    You still have the H1 on the home page for the first card, but the heading font size now matches the other cards.

    May be a browser cache element involved too, so you might need to clear your browser cache to detect the change.

    <hr />

    Scrub that: you’re right. Sorry 🙂

    After regenerating a few times with Frontpage Layout set to “2 columns -2-1” or “2 columns -4-1”, on my device, the problem did indeed clear. So looks like a caching issue.

    Another update. I’ve checked again, and it looks like the problem is still present: sorry. (it’s weird :-). Might need further updates to index.hbs to check for “2col-1-4” and “2col-4-1” in addition to “2col”. Perhaps @Bob can help further.

    #7462
    itips3727

    Thanks for your help, Bob.

    However, the fix only worked for Frontpage Layout: 2 columns.

    The first card card title still shows h1 fontsize when Frontpage Layout is “2 columns -2-1” or “2 columns -4-1”.

    Try using the following:

    <h1 class="c-card__title {{#checkIf @config.custom.layoutFrontpage '==' "2col" }}h5{{/checkIf}} {{#checkIf @config.custom.layoutFrontpage '==' "2col-1-4" }}h5{{/checkIf}} {{#checkIf @config.custom.layoutFrontpage '==' "2col-4-1" }}h5{{/checkIf}} {{#checkIf @config.custom.layoutFrontpage '==' "2col-2-1" }}h5{{/checkIf}} {{#checkIf @config.custom.layoutFrontpage '==' "2col-1-2" }}h5{{/checkIf}}">
       
          {{title}}
       
    </h1>

     

    #7464
    shaun2k

    Thanks @itips3727. Your code helped.

    I was caught over complicating things trying to figure out how to use OR logic expressions to test for the various frontpage layouts, @config.custom.layoutFrontpage.
    And it didn’t occur to me to do brute-force testing one-by-one worked.
    Testing were only necessary in layouts when the first card is a “small” card. Hence, I took out the checkif’s for 2col-1-2 and 2col-1-4

    <h1 class="c-card__title 
     {{#checkIf @config.custom.layoutFrontpage '==' "2col" }}h5{{/checkIf}} 
     {{#checkIf @config.custom.layoutFrontpage '==' "2col-2-1" }}h5{{/checkIf}} 
     {{#checkIf @config.custom.layoutFrontpage '==' "2col-4-1" }}h5{{/checkIf}}">
    </h1>
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.