Reduce Theme Specificity

[pacollins]

Description

Due to the breadth of this PR, please feel free to comment with anything that you feel is off (even if you aren't sure if it was before or after these changes)

Notes below are in order of commit:

1. Bloat from extra highlight.js themes has been removed. The default theme is now the default. dark was left as an alternative without cdn, but also for future use in dark mode.
   ⚠️ Users that utilize enableCDN = false may require config.toml adjustments.
2. Adjusted site templates to reduce lookup order at the theme level.
   ⚠️ Users that reference the following files in custom templates (ROOT/layouts) may require adjustment:
   • _default/comments.html
   • ❌_default/home.html
   • _default/list,html
   • ❌_default/pagination.html
   • _default/single.html
   • ❌_default/staticman.html
   • ❌partials/pagination.html
3. Adjusted i18n to reduce specificity and repetition (particularly with forms).
   ⚠️ Users that have implemented their own i18n languages, or reference i18n translations in custom templates may require adjustment.
   • postreadingtime --> reading_time
   • 404_goback --> 404_back
   • ❌ category --> [categories] one
   • ❌ tag --> [tags] one
   • repliestext --> contact_replies
   • say_sth --> say_something
   • name --> form_name
   • email --> form_email
   • website --> form_website
   • body --> form_body
   • no_comment --> nothing_yet
   • btn_reset --> reset
   • btn_submitted --> submitted
   • btn_sumbit[sic] --> submit
4. Adjusted and refactored comment classes to reduce specificity and increase efficiency.
   ⚠️ Users that have a custom template for comments will require adjustment if it uses the theme's CSS and JS.
5. Adjusted featured/images for posts in response to BUG: Featured Image Scaling #109 and replacing Add multiple featured images per post #128. See below for screenshots. [[images]] now allows for multiple images for the purposes of OpenGraph tags.
   ⚠️ Users that have front matter that utilize images (backwards compatibility for featured and associated parameters still remains) will need to adjust from [images]="SRC" to the following format:

   [[images]]
       src = "" // Link to image
       alt = "" // Alt text for image
       stretch = // Optional: See screenshots for referenced values and outcomes
   

6. Original exampleSite images had an unknown origin, so they have been changed to known royalty-free images. Additionally, exampleSite and archetype front matter has been adjusted.
7. Set exampleSite/config.toml to allow inline HTML rendering (commit name error) in response to BUG: Hugo 0.60 removed inline HTML for Markdown Files #151.
8. Complete refactor of CSS in response to BUG: Page extends beyond view port on small devices #147 and the general reduction of specificity.
   ⚠️ Users with custom CSS may need to adjust due to a variety of class name changes and specificity changes.
9. Add featuredstretch parameter to frontmatter for backwards compatibility. This is the same as stretch in 5 above.
10. Add imagestretch global parameter to .Site.Parameters to allow a default stretch value to be set.

Motivation and Context

The overall motivation is to give more power to the user to customize the theme easily.

• Closes BUG: Featured Image Scaling #109
• Closes BUG: Page extends beyond view port on small devices #147
• Closes BUG: Hugo 0.60 removed inline HTML for Markdown Files #151
• Closes FEATURE: add ability to include alt text in featured images #159
• Closes BUG: Truncated formatting of categories in the post meta #161
• Closes BUG: Previous/next for blog inconsistent with pagination #163

Screenshots (if appropriate):

Featured Image

The featured image at full size is 880x280 and scales with the page. Images fit vertically into the container. For images that do not fill the whole container, the image is duplicated, stretched, and blurred behind the original.

🐞 Note: It is a known bug that it does not center vertically, I am still working on that. Bug has been fixed.

If you do not prefer this look, you can add stretch to your front matter. Accepted values are Horizontal, H, Vertical, and V, This parameter is not case sensitive.

stretch = "horizontal"

stretch = "vertical"

stretch ="both"

Since this would distort images (see below), this is not a valid value.

Checklist:

• I have updated the documentation, as applicable.
• I have updated the theme.toml, as applicable.

[pacollins]

If that is the case, I am going to tiny some of the documentation related items. My hope will be to merge tomorrow.

[tmswfrk]

hey, sorry I haven't mentioned this sooner, but is there a particular stretch param that we can include here to make the image look as it used to? I'm unable to determine how to get my single featured image without the additional --bg-image class coming through and changing the way my site looks. I tried implementing the featured and featured alt params that I see are available, but the same css class structure is coming through. I'm hoping not to have to write my own partial for this one :) Thanks.

[pacollins]

Check out #182 and removeBlur = true.

[tmswfrk]

Thanks for responding so quickly, but this still doesn't revert the change for my site. I have images now that, while still considerably larger in resolution than they are being fitted (fine by me), they're still being reduced in size and are being matched in size to each other. The regular images that I have elsewhere in my posts look unchanged. I'm not enough of a UI person to understand what CSS properties are affecting this, but I have noticed that when I turn off position: absolute style from the img tag, and then remove the padding-bottom: 33% style from the a href tag just above it, the image appears as I remember it. Is there something here that I'm missing that you can potentially help me out with?

Looking through git, I see that this padding-bottom and position value are both configured within the assets/scss/main.scss file, but I don't know if they were changed recently in the #182 commit you referred to here. I think there's something else here that I'm missing. I can provide screenshots if you'd like. Thanks.

[pacollins]

Screenshots are great, a live example is even better (albeit sometimes not a reasonable request).

position: absolute allows the image to appear over the blurred image.

padding-bottom: 33% maintains the aspect ratio. On my site, it looks like I adjust the header image to be shorter and wider. padding-bottom: 35% seems to revert it back to the original aspect ratio. I am trying to remember why I did this exactly - I think I was trying to make it a more typical aspect ratio.

See the left and right sides on the images below:

33%

35%

[tmswfrk]

Thanks for that. My issue appears to be a bit more significant. See the "original" and the "new" files attached. Both were zoomed out to 67% so that I could showcase the differences a bit more obviously. Seems that most of the featured images (including the original logo) are now appearing to be significantly reduced with additional, unneeded whitespace / padding around them.

Original site that showcases the previous code is at https://www.bicyclewatercooler.com while the new one is still locally staged for now. I'd have to push up a duplicate site to Azure to showcase it a bit more obviously for you. Thanks. I'll keep looking into this one myself, too.

[pacollins]

I see. To ensure consistent design and make the blurred background work, I forced the image to maintain the aspect ratio. The container has a set height and the image is set to fill that height. Since your images are tall, they are being squished down to fit the container. In your custom css, you want the container height to be unset. As for the logo image - in not sure. I'll look into that.

…

On Sun, Aug 23, 2020, 10:03 PM tmswfrk ***@***.***> wrote: Thanks for that. My issue appears to be a bit more significant. See the "original" and the "new" files attached. Both were zoomed out to 67% so that I could showcase the differences a bit more obviously. Seems that most of the featured images (including the original logo) are now appearing to be significantly reduced with additional, unneeded whitespace / padding around them. [image: Original] <https://user-images.githubusercontent.com/9256442/90996244-ffde1b80-e572-11ea-92b5-fc94a79d0f6f.png> [image: New] <https://user-images.githubusercontent.com/9256442/90996249-01a7df00-e573-11ea-9e75-0a6054980c1d.png> Original site that showcases the previous code is at https://www.bicyclewatercooler.com while the new one is still locally staged for now. I'd have to push up a duplicate site to Azure to showcase it a bit more obviously for you. Thanks. I'll keep looking into this one myself, too. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#154 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACWVJSMCRMNHA6UWP2BSN3TSCHC7NANCNFSM4OJ2BP7A> .

[tmswfrk]

So given that this is more of a side project of mine and that this has been causing me enough undue stress to the point where I'm not writing any more content, I'm going to revert back to an older commit and continue in a detached state. This whole thing is reminding me just how much I despise dealing with CSS.

If you have any specifics for me to help me out (the container point earlier did not seem to help, I think the issue here is more as to the order in which some of these styles are being applied from my best guess), please let me know and I'll do what I can to get back up to HEAD on this repo. Thanks.

[dotMavriQ]

If you happen to be a big dumb like me, and forked this theme a good while back before these improvements and changes to the front matter. There's a conversion script I can provide here that will help. Link to GitLab