Skip to content

Fix blockquote styles #454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
Krinkle opened this issue Mar 5, 2024 · 1 comment
Closed

Fix blockquote styles #454

Krinkle opened this issue Mar 5, 2024 · 1 comment
Assignees
@Krinkle
Labels
design Type: Problem

Comments

@Krinkle
Copy link
Member

Krinkle commented Mar 5, 2024 •
edited
Loading

I'm looking to add blockquote styles to Amethyst for use in the QUnit docs on https://api.qunitjs.com/QUnit/load/#karma-runner, where there is currently an unstyled blockquote.

Looking at jquery-wp-content for inspiration, I noticed the styles are quite odd.

For example: https://meetings.jquery.org/2013-01-31-tc39/#map-set-comparator (scroll down slightly) renders today as:

Screenshot

Notice that:

  • The font seems disproportionally large.
  • The background shade is applied to each line separately instead of to the block as a whole.
  • The list doesn't seem part of the quote.
  • The bold text is receiving its regular text color override instead of inhering the quote text color.

In the doc sites, I could not find any other pages that uses blockquotes. We do have various blog posts with quotes though, such as:

https://blog.jquery.com/2016/07/27/the-jquery-foundation-and-standards-2/

Screenshot
@Krinkle Krinkle self-assigned this Mar 5, 2024
@Krinkle Krinkle closed this as completed in 7cf3414 Mar 5, 2024
@Krinkle
Copy link
Member Author

Krinkle commented Mar 5, 2024

After:

Doc example Blog example
Screenshot Screenshot

Krinkle added a commit to qunitjs/jekyll-theme-amethyst that referenced this issue Mar 5, 2024
@Krinkle
Theme: Add blockquote styles
de98cdd 
Ref jquery/jquery-wp-content#454
Krinkle added a commit that referenced this issue Apr 7, 2024
@Krinkle
blog.jquery.com: Sync sites.php entry and import blog.jquery.com theme
01d05dd 
The version of this theme in this repo is practicaly empty and hasn't
been used in a long time. When activating this locally via jquery-wp-docker,
I noticed the settings don't match what we use in production.

* Import files from:
  https://github.com/jquery/blog.jquery.com-theme/tree/6710984735eb/jquery.com

  Refactor files slightly to work on the current version of the base
  theme.

  blog.jquery.com-theme/jquery/
  - /header.php
    /footer-bottom.php
    /menu-header.php
    /page-fullwidth.php
    /searchform.php

    Minor differences, differed only in being a older but compatible
    version. Kept the newer ones here unchanged.
    (e.g. still mentioned Forum, IRC, and StackPath, and older search
    input field styling).

  - /functions.jquery.php
    This defined one extra function, jq_logo_link, which served
    as a workaround for missing some parts of jquery-wp-content
    by hardcoding `return '/'`, and already had a TODO for removing
    it when merging into jquery-wp-content. It was used in header.php,
    where we now use `get_option('jquery_logo_link', '/')` which
    works fine for the blog.

  blog.jquery.com-theme/jquery.com/
  - /functions.php:
    The body_class filter for class "listing" is already here
    as part of plugins/jquery-filters.php.

    The twentyeleven_comment (now jq_comment) function had logic
    for pingbanks. Import this code over so that (approved) pingbacks
    remain displayed among blog comments.

  - /category.php
    Identical to the one in the current "jquery" base theme,
    except for the heading "Category Archives" instead of "Category".
    This is presumably because API pages are considered posts in a
    category, and so the word "Archives" would be confusing there.
    Solve this by keeping the neutral "Category" that we have in
    the base theme and remove the forked veersion for that one word
    difference.

  - /content.php
    The only difference was the class "entry-posted" instead of
    "entry-meta" for the "posted on" date. This branch in the base
    theme is never used, so change it to the one the blog has.

    The entry-posted class is styled nearly the same as entry-meta
    except that in category/search listings we don't float "post on"
    to the right, whereas entry-meta categories are.

  - /single.php
    This is an override for blog posts. In order to share this neatly
    across the three blogs in the future, I've added this to the
    base theme as "single-blogpost.php" with a stub in
    blog.jquery.com/single.php that references this. This is akin to
    how we share templates for API sites with single-api.php.

* comments.php: Add missing support for post_password_required
  This is included at https://github.com/jquery/blog.jquery.com-theme
  but missing here. Given no other sites use this, prefer to keep this
  as-is instead of figuring out whether it is safe to remove.

* base.css: Move text-shadow from `blockquote p` to `blockquote`.
  In markdown, things generally get wrapped in paragraphs, but in
  WordPress they typically don't. Tweak this to match the styles of
  the blog theme instead, which should still apply to paragraphs
  inside quotes just as well.
  Follows-up #454.

Ref jquery/infrastructure-puppet#17
Krinkle added a commit that referenced this issue Apr 10, 2024
@Krinkle
blog.jquery.com: Sync sites.php entry and import blog.jquery.com theme
9131422 
The version of this theme in this repo is practicaly empty and hasn't
been used in a long time. When activating this locally via jquery-wp-docker,
I noticed the settings don't match what we use in production.

Import files from:
https://github.com/jquery/blog.jquery.com-theme/tree/6710984735eb/jquery.com

And refactor these slightly in order to work with the current version
of the base theme.

blog.jquery.com-theme/jquery/
* /header.php
  /footer-bottom.php
  /menu-header.php
  /page-fullwidth.php
  /searchform.php

  Minor differences, differed only in being a older but compatible
  version. Kept the newer ones here unchanged.
  (e.g. still mentioned Forum, IRC, and StackPath, and older search
  input field styling).

* /functions.jquery.php
  This defined one extra function, jq_logo_link, which served
  as a workaround for missing some parts of jquery-wp-content
  by hardcoding `return '/'`, and already had a TODO for removing
  it when merging into jquery-wp-content. It was used in header.php,
  where we now use `get_option('jquery_logo_link', '/')` which
  works fine for the blog.

* /comments.php
  Support for post_password_required is present at
  https://github.com/jquery/blog.jquery.com-theme but missing here.
  Given non-blog sites wouldn't use this it makes sense that it was
  absent. Cary this over as-is instead of figuring out whether we
  want or need it. It won't do anything on regular blog posts
  or an any non-blog sites.

blog.jquery.com-theme/jquery.com/
* /functions.php:
  The body_class filter for class "listing" is already here
  as part of plugins/jquery-filters.php.

  The twentyeleven_comment (now jq_comment) function had logic
  for pingbanks. Import this code over so that (approved) pingbacks
  remain displayed among blog comments.

* /category.php
  Identical to the one in the current "jquery" base theme,
  except for the heading "Category Archives" instead of "Category".
  This is presumably because API pages are considered posts in a
  category, and so the word "Archives" would be confusing there.
  Solve this by keeping the neutral "Category" that we have in
  the base theme and remove the forked veersion for that one word
  difference.

* /content.php
  The only difference was the class "entry-posted" instead of
  "entry-meta" for the "posted on" date. This branch in the base
  theme is never used, so change it to the one the blog has.

  The entry-posted class is styled nearly the same as entry-meta
  except that in category/search listings we don't float "post on"
  to the right, whereas entry-meta categories are.

* /single.php
  This is an override for blog posts. In order to share this neatly
  across the three blogs in the future, I've added this to the
  base theme as "single-blogpost.php" with a stub in
  blog.jquery.com/single.php that references this. This is akin to
  how we share templates for API sites with single-api.php.

Additional CSS changes and fixes relating to blog posts:

* Move text-shadow from `blockquote p` to `blockquote`.

  On our doc sites, HTML comes from Markdown parsers, which generally
  wrap text paragraphs. In WordPress, our blog posts are already
  stored in HTML, where there is generally not a paragraph wrapper
  within simple blockquotes. Fix our styles accomodate blog posts
  with blockquotes by applying this to the outer element. It should
  not affect any blockquotes that do for some reason have paragraphs
  in them, as they inherit the text-shadow just the same.
  Follows-up #454.

* Fix broken `#comments-title` rule,
  lost to `#content h2`.

  Fix broken `.commentlist > li.bypostauthor` rule,
  lost to `#comments .commentlist > li.comment`.

  These were already broken on the blog,
  Bring these back in a more suble way (the original, if restored,
  was quite dark and imho hard to read), and strengthen the selector
  for now as-needed (one day, we'll get rid of these ID selectors...)

* Remove unused `#reply-title` rule,
  lost in practice to `#content h3`, which seems fine as-is.

* Remove unused `p.comment-form-comment` rule,
  lost in practice to `#respond p`, which looks fine.

* Remove unused `.commentlist .children` rules.
  Unused for a long time since thread_comments=0 on all sites,
  including on the blogs. When thread_comment equals 0, it applies
  how old comment threads are rendered as well, so these truly are
  unused.

* Remove unused `#cancel-comment-reply-link`,
  this is specific to WordPress's comment-reply.js,
  which we don't load.

* Remove unused `.page-template-sidebar-page-php` rules.

  https://github.com/search?q=org%3Ajquery+pageTemplate+NOT+repo%3Ajquery%2Firc.jquery.org+NOT+repo%3Ajquery%2Fevents.jquery.org&type=code

  https://github.com/search?q=org%3Ajquery+%22sidebar-page.php%22+NOT+repo%3Ajquery%2Fblog.jquery.com-theme&type=code

Ref jquery/infrastructure-puppet#17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Krinkle Krinkle

Labels
design Type: Problem
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Krinkle