Skip to content
This repository was archived by the owner on Feb 17, 2025. It is now read-only.

Quadrat: Add responsive Paragraph styles and start styling the Code b… #3663

Merged
merged 3 commits into from
Apr 22, 2021

Conversation

danieldudzic
Copy link
Contributor

@danieldudzic danieldudzic commented Apr 16, 2021

Add responsive styles for the Paragraph

Part of #3640

@danieldudzic danieldudzic requested a review from a team April 16, 2021 01:30
@pbking
Copy link
Contributor

pbking commented Apr 19, 2021

So this change makes 'Huge' and 'Extra Large' font sizes dynamic right? Neat technique, I hadn't seen that before).
Are there specs outlining this dynamic behavior that I should check the values against? I checked against the figma but I wasn't sure what to look for.

Looks like the code block should have a background according to the design.
image

Perhaps that (the code block changes) would be better served in its own PR.

@danieldudzic
Copy link
Contributor Author

@pbking

@MaggieCabrera suggested using fluid typography :) - it seems to be working pretty well.

I checked against the figma but I wasn't sure what to look for.

Paragraph font sizes can be found in the following Figma: https://www.figma.com/file/EDoXTvsZt4lMHItzOczFQw/Quadrat?node-id=760%3A112

Perhaps that (the code block changes) would be better served in its own PR.

Good idea. I'll move it to a separate PR tomorrow.

@jffng
Copy link
Contributor

jffng commented Apr 22, 2021

Very cool, thanks @danieldudzic !

I revised some of the heading max values because they weren't actually hitting their largest size with the previous minmax rules.

Kapture 2021-04-22 at 14 19 30

@jffng jffng merged commit bdd7931 into make/quadrat Apr 22, 2021
@jffng jffng deleted the quadrat-responsive-paragraph branch April 22, 2021 18:21
scruffian pushed a commit that referenced this pull request Apr 23, 2021
#3663)

* Quadrat: Add responsive Paragraph styles and start styling the Code block

* Quadrat: Remove Code block styling

* Revise heading max vw.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
scruffian pushed a commit that referenced this pull request Apr 26, 2021
#3663)

* Quadrat: Add responsive Paragraph styles and start styling the Code block

* Quadrat: Remove Code block styling

* Revise heading max vw.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
jffng added a commit that referenced this pull request Apr 27, 2021
#3663)

* Quadrat: Add responsive Paragraph styles and start styling the Code block

* Quadrat: Remove Code block styling

* Revise heading max vw.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
scruffian pushed a commit that referenced this pull request Apr 28, 2021
#3663)

* Quadrat: Add responsive Paragraph styles and start styling the Code block

* Quadrat: Remove Code block styling

* Revise heading max vw.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
jffng added a commit that referenced this pull request May 4, 2021
#3663)

* Quadrat: Add responsive Paragraph styles and start styling the Code block

* Quadrat: Remove Code block styling

* Revise heading max vw.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
pbking pushed a commit that referenced this pull request May 6, 2021
#3663)

* Quadrat: Add responsive Paragraph styles and start styling the Code block

* Quadrat: Remove Code block styling

* Revise heading max vw.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
pbking pushed a commit that referenced this pull request May 6, 2021
#3663)

* Quadrat: Add responsive Paragraph styles and start styling the Code block

* Quadrat: Remove Code block styling

* Revise heading max vw.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
scruffian pushed a commit that referenced this pull request May 6, 2021
#3663)

* Quadrat: Add responsive Paragraph styles and start styling the Code block

* Quadrat: Remove Code block styling

* Revise heading max vw.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
jffng added a commit that referenced this pull request May 6, 2021
* Scaffolding a universal theme plus basic typography and color palette.

* fixed do_blocks routes and override index.html from BCB

* added header and footer templates

* changed query to post content block

* commented with the GB issue

* Quadrat: Add new heading sizes and other small misc changes (#3649)

* Quadrat: Add new heading sizes

* Quadrat: Further work on Lists and Quotes

* Quadrat: Remove whitespace

* Quadrat: Add responsive Heading font-sizes

* Fix typo.

* Recompile.

* remove older deploy actions and adding quadrat deploy action (#3655)

* Add the hosts block pattern. (#3662)

* Add the hosts block pattern.

* Fix categories.

* Update img refs.

* Add alt text to media text pattern.

* Revise block pattern names.

* Add text domain.

* Quadrat: override BCB's templates with php ones (#3667)

* override BCB's templates with php ones

* Revert unrelated changes to Seedlet Blocks that are not in trunk.

* Quadrat: Add responsive Paragraph styles and start styling the Code b… (#3663)

* Quadrat: Add responsive Paragraph styles and start styling the Code block

* Quadrat: Remove Code block styling

* Revise heading max vw.

Co-authored-by: Jeff Ong <jonger4@gmail.com>

* Quadrat: Add Latest episodes block pattern (#3665)

* added Latest episodes block pattern

* translatable strings

* staging url for media

* rebased, updated texts and adjusted paddings

* added a group with padding to the blocks

* Body line-height to 1.7.

Co-authored-by: Jeff Ong <jonger4@gmail.com>

* Add menu locations to quadrat

* Remove disconnected changes

* Remove footer menu location

* rebuild theme.json

* Quadrat: Add Quote block styles

* Tightened up the line-height and lessened the space between quote and citation.

* Remove properties that already exist in the parent theme

* Remove quote sass include and rebuild.

* Quadrat: Add list styles

* Removed variable usage for list item style

* Updated list styles to be more correcter

* Try/header template part wrapped (#3714)

* Modified site-title styles to match comps

* Added a navigation rendering function to render the navigation block based on a classic data source, wrap the output in an HTML block to be inserted anywhere blocks are do_block()'ed

* Added a header template part that leverages the rendered navigation block markup

* Replaced usage of navigation block template with new template-part

* Added styles for header for proper layout unachievable with blocks.

* Quadrat: Style the Code block

* Remove unneeded declarations

* Removed font-changing settings on code block

* Quadrat: add cover pattern (#3676)

* Try using svg for block pattern.

* Try mask-image instead.

* move the svg to a before pseudoelement

* refactored the pseudoelements

* fix for the editor interaction when cover block is highlighted

* Add block pattern.

* Use a transparent div instead of svg. Simplify how color of the diamond is set.

* Rotate closer to the design.

* Use background image with svg and mix-blend-mode.

* made block pattern wide aligned

* created exceptions bof black and white

* changes to fit the design, lowered opacity on black and white versions

* Add autoprefixing to Quadrat

* removed error from rebase

* removed unnecessary z-index, linting

* z-index added

* Scope CSS to cover block.

* :: for consistency.

Co-authored-by: Maggie Cabrera <maggie.cabrera@automattic.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>

* removes template hack

* Quadrat: Add Episode block pattern (#3695)

* create episode pattern

* added group wrapper for padding

* correct url for image

* typo

* update to use media and text

* changed the url of the image, added alt content and em tag

* remove unneeded class, added wrapper for bottom padding

* Scope the 0 padding to text content without a background.

* Remove group, add spacer. Fix local image ref.

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Jeff Ong <jonger4@gmail.com>

* Change colors used in theme.json from descreptive to semantic (#3725)

* Change colors used in theme.json from descreptive to semantic

* semanticizing the color

* formatting

* also changed the child theme.json

* Quadrat: Add table styles (#3719)

* Quadrat: Add styles for tables

* Add tbody for extra specificity

* Add a border to the top of the first row

* Remove text-align.

Co-authored-by: Jeff Ong <jonger4@gmail.com>

* Allowing overflow of group-wrapped navigation (#3732)

* Update screenshot.png (#3735)

* Quadrat: Add page templates (#3721)

* Rebase trunk.

* Revise footer.

* Add CSS for the next/prev links

* Continue rebase.

* remove test code

* used gutenberg_block_template_part to load template parts on php templates

* Remove testing text

* alignment tweaks

* Add separate templates for page and post.

* Restore header wrapper that was accidentally removed in rebase.

* Template tweaks.

* Add page block template.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Maggie Cabrera <maggie.cabrera@automattic.com>

* Make index query inherit query string.

* Update screenshot.png (#3742)

* Quadrat: Add CSS for a featured image

* Quadrat: Headlines and Buttons Block Pattern (#3744)

* created block pattern

* padding rules for mobile

* added new class to all the group blocks

* Remove all padding from text content on mobile.

Co-authored-by: Jeff Ong <jonger4@gmail.com>

* Change hover rules for buttons

* Add hover styles for buttons and links

* Remove background color from buttons. (#3752)

* Quadrat: Add the listen pattern

* refactor patterns to single files

* move utility classes to BCB

* refactor listen to the podcast

* Quadrat: Add a join pattern

* Make the pattern wide

* Check the class exists before calling it

* Make sure the plugin is loaded before adding the pattern

* Move the block pattern CSS to a new file

Co-authored-by: Maggie Cabrera <maggie.cabrera@automattic.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Kjell Reigstad <kjell.reigstad@automattic.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants