Skip to content
This repository has been archived by the owner. It is now read-only.

Reduce Theme Specificity #154

Merged
merged 19 commits into from Jul 19, 2020
Merged

Reduce Theme Specificity #154

merged 19 commits into from Jul 19, 2020

Conversation

pacollins
Copy link
Owner

@pacollins pacollins commented Jun 27, 2020

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 #109 and replacing #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 #151.
  8. Complete refactor of CSS in response to #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.

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.

image

image

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"

image

stretch = "vertical"

image

stretch ="both"

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

image

Checklist:

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

@pra-dan

This comment has been minimized.

@pacollins

This comment has been minimized.

@pra-dan

This comment has been minimized.

@pacollins pacollins mentioned this pull request Jun 27, 2020
@pacollins

This comment has been minimized.

@pra-dan

This comment has been minimized.

@twatzl

This comment has been minimized.

@pacollins

This comment has been minimized.

@twatzl

This comment has been minimized.

@pacollins

This comment has been minimized.

@pacollins pacollins mentioned this pull request Jul 8, 2020
pacollins and others added 2 commits Jul 9, 2020
* add Indonesian language

* I was update id.toml based PR (#154) new format

I was update id.toml based PR (#154) new format on https://github.com/pacollins/hugo-future-imperfect-slim/blob/reduce-specificity/i18n/en.toml
@pacollins

This comment has been minimized.

@pacollins

This comment has been minimized.

@kdbruin

This comment has been minimized.

@twatzl

This comment has been minimized.

@pacollins

This comment has been minimized.

@twatzl

This comment has been minimized.

@twatzl

This comment has been minimized.

@pacollins
Copy link
Owner Author

@pacollins pacollins commented Jul 15, 2020

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

@pacollins pacollins merged commit 2f9ab4f into master Jul 19, 2020
@pacollins pacollins deleted the reduce-specificity branch Jul 19, 2020
@tmswfrk
Copy link

@tmswfrk tmswfrk commented Aug 23, 2020

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
Copy link
Owner Author

@pacollins pacollins commented Aug 23, 2020

Check out #182 and removeBlur = true.

@tmswfrk
Copy link

@tmswfrk tmswfrk commented Aug 23, 2020

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
Copy link
Owner Author

@pacollins pacollins commented Aug 24, 2020

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%

image

35%

image

@tmswfrk
Copy link

@tmswfrk tmswfrk commented Aug 24, 2020

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
New

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
Copy link
Owner Author

@pacollins pacollins commented Aug 24, 2020

@tmswfrk
Copy link

@tmswfrk tmswfrk commented Sep 6, 2020

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
Copy link

@dotMavriQ dotMavriQ commented Feb 18, 2021

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.