Skip to content
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.

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

Subscription dark background #261

Open
onuro opened this issue Aug 22, 2022 · 9 comments
Open

Subscription dark background #261

onuro opened this issue Aug 22, 2022 · 9 comments
Milestone

Comments

@onuro
Copy link

onuro commented Aug 22, 2022

Screenshot:
image

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/08/bookimg.jpg","id":6069,"dimRatio":0,"minHeight":60,"minHeightUnit":"vh","isDark":false,"align":"wide","style":{"spacing":{"padding":{"bottom":"40px","top":"40px"}}}} -->
<div class="wp-block-cover alignwide is-light" style="padding-top:40px;padding-bottom:40px;min-height:60vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-6069" alt="" src="https://dotcompatterns.files.wordpress.com/2022/08/bookimg.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"color":{"text":"#fffffa"}},"layout":{"inherit":true}} -->
<div class="wp-block-group has-text-color" style="color:#fffffa"><!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:image {"id":6109,"width":100,"height":100,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/08/girl-avatar.png?w=200" alt="" class="wp-image-6109" width="100" height="100"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"600","fontSize":"4rem"}},"fontFamily":"domine"} -->
<h2 class="has-domine-font-family has-custom-font" style="font-size:4rem;font-style:normal;font-weight:600;font-family:domine">Of books &amp; literature</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Weekly newsletter for the great reads and book suggestions from the New York times best sellers curator.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"buttonWidth":"","submitButtonText":"\u003cstrong\u003e Subscribe\u003c/strong\u003e","customButtonBackgroundColor":"#fffffa","customTextColor":"#3a2325","borderRadius":0,"borderWeight":0,"customBorderColor":"#fffffa","padding":15,"spacing":20,"className":"is-style-split"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline is-style-split">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" submit_button_text="&lt;strong&gt; Subscribe&lt;/strong&gt;" custom_background_button_color="#fffffa" custom_text_button_color="#3a2325" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_border_color="#fffffa" custom_padding="15" custom_spacing="20" submit_button_classes="no-border-radius" email_field_classes="no-border-radius" show_only_email_and_button="true" success_message="Success! An email was just sent to confirm your subscription. Please find the email now and click &#039;Confirm Follow&#039; to start subscribing."]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Somehow the custom fonts for headings are not rendering in the Blockpatterns site. @alaczek do you have any info on this?

Preview:
https://dotcompatterns.wordpress.com/?p=6067&preview=true

@onuro onuro added this to the Subscription milestone Aug 22, 2022
@alaczek
Copy link
Contributor

alaczek commented Aug 25, 2022

I'm seeing the custom fonts alright.
A few thoughts on this one:

  • Did you mean for it to be wide, not full-width?
  • I feel like the background image is too dark - it's too hard to make out what's in the picture.
  • There's an issue with the subscribe block - it's broken in the editor.

image

@onuro
Copy link
Author

onuro commented Aug 25, 2022

I meant it to be wide, yeah but looks like full height/width suits better when I look at it again :)

Increased the bg opacity a bit. Let me know what you think.

image

Regarding the block error, I occasionally have it as well. Error goes away after refresh.

@iamtakashi
Copy link
Contributor

It's drive-by feedback, but what about using an avatar with colours? The current avatar fades away with the dark background . NVM if you think an avatar with colours ruins the vibe.

@onuro
Copy link
Author

onuro commented Sep 28, 2022

Thanks @iamtakashi. Tried out a couple more imagery and here's 2 options I have, 1 being colored and 1 b/w again.

image

image

I think I'm leaning towards the colored avatar on this one but not 100% sure. Wdyt?

@iamtakashi
Copy link
Contributor

I think a coloured avatar would work better, but not that one specifically. The image has been strangely cut out. I think it's zoomed in a little too much.

@onuro
Copy link
Author

onuro commented Oct 5, 2022

I see your point. What do you think about this one?

image

@iamtakashi
Copy link
Contributor

Thanks, @onuro . The avatar feels better.

It could just be me being not understanding English, but the heading is meant to be read as "[the avatar] of books & literature", correct? if so, should the letter "O" be lowercase?

@onuro
Copy link
Author

onuro commented Oct 14, 2022

Thanks @iamtakashi. Title was meant to translate like "Newsletter about books and literature". Example:
https://www.goodreads.com/book/show/23876.Of_Love_and_Other_Demons

@iamtakashi
Copy link
Contributor

Ah ok. TIL!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants