Update block canvas styles (#6640)
* update link styles * update typography * update spacing * add text underline offset and thickness
This commit is contained in:
Madhu Dollu
GitHub
parent
6ca9a84f12
commit
adde57eda2
7 changed files with 177 additions and 65 deletions
|
|
@ -1,11 +1 @@
|
|||
<!-- wp:group {"layout":{"inherit":true}} -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:group {"style":{"spacing":{"padding":{"top":"80px","bottom":"30px"}}}} -->
|
||||
<div class="wp-block-group" style="padding-top:80px;padding-bottom:30px">
|
||||
<!-- wp:paragraph {"align":"center"} -->
|
||||
<p class="has-text-align-center">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
|
||||
<!-- /wp:paragraph -->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
<!-- wp:pattern {"slug":"block-canvas/footer"} /-->
|
||||
|
|
@ -1,29 +1,22 @@
|
|||
<!-- wp:group {"layout":{"inherit":"true"}} -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:group {"align":"full","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--preset--spacing--50)","top":"var(--wp--preset--spacing--50)"}}}} -->
|
||||
<div class="wp-block-group alignfull" style="padding-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)">
|
||||
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|60","top":"var:preset|spacing|60","right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
|
||||
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"layout":{"type":"flex"}} -->
|
||||
<div class="wp-block-group"><!-- wp:site-logo {"width":64} /-->
|
||||
|
||||
<!-- wp:group {"layout":{"type":"flex"}} -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:site-logo {"width":64} /-->
|
||||
<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
|
||||
<div class="wp-block-group"><!-- wp:site-title /-->
|
||||
|
||||
<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:site-title /-->
|
||||
<!-- wp:site-tagline /-->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
<!-- wp:site-tagline /--></div>
|
||||
<!-- /wp:group --></div>
|
||||
<!-- /wp:group -->
|
||||
|
||||
<!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /-->
|
||||
|
||||
</div>
|
||||
<!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /--></div>
|
||||
<!-- /wp:group -->
|
||||
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
|
||||
<!-- wp:spacer {"height":"var(--wp--preset--spacing--60)"} -->
|
||||
<div style="height:var(--wp--preset--spacing--60)" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
<!-- wp:spacer {"height":"var(--wp--preset--spacing--80)"} -->
|
||||
<div style="height:var(--wp--preset--spacing--80)" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
<!-- /wp:spacer -->
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
<div class="wp-block-group">
|
||||
<!-- wp:group {"layout":{"type":"flex"}} -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:post-author {"showAvatar":false,"showBio":false,"style":{"typography":{"fontSize":"14px"}}} /-->
|
||||
<!-- wp:post-date {"isLink":true,"style":{"typography":{"fontSize":"14px"}}} /-->
|
||||
<!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"14px"}}} /-->
|
||||
<!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"14px"}}} /-->
|
||||
<!-- wp:post-author-name {"isLink":true,"fontSize":"small"} /-->
|
||||
<!-- wp:post-date {"isLink":true,"fontSize":"small"} /-->
|
||||
<!-- wp:post-terms {"term":"category","fontSize":"small"} /-->
|
||||
<!-- wp:post-terms {"term": "post_tag","fontSize":"small"} /-->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
</div>
|
||||
|
|
|
|||
33
block-canvas/patterns/footer.php
Normal file
33
block-canvas/patterns/footer.php
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<?php
|
||||
/**
|
||||
* Title: Default footer
|
||||
* Slug: block-canvas/footer
|
||||
* Categories: footer
|
||||
* Block Types: core/template-part/footer
|
||||
*/
|
||||
?>
|
||||
|
||||
<!-- wp:spacer {"height":"var(--wp--preset--spacing--80)"} -->
|
||||
<div style="height:var(--wp--preset--spacing--80)" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
<!-- /wp:spacer -->
|
||||
|
||||
<!-- wp:group {"layout":{"inherit":true}} -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var(--wp--preset--spacing--60)","bottom":"var(--wp--preset--spacing--60)"}}}} -->
|
||||
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
|
||||
<!-- wp:paragraph {"align":"center"} -->
|
||||
<p class="has-text-align-center">
|
||||
<?php
|
||||
/* Translators: WordPress link. */
|
||||
$wordpress_link = '<a href="' . esc_url( __( 'https://wordpress.org', 'block-canvas' ) ) . '" rel="nofollow">WordPress</a>';
|
||||
echo sprintf(
|
||||
esc_html__( 'Proudly Powered by %1$s', 'block-canvas' ),
|
||||
$wordpress_link
|
||||
);
|
||||
?>
|
||||
</p>
|
||||
<!-- /wp:paragraph -->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
=== Block Canvas ===
|
||||
Contributors: Automattic
|
||||
Requires at least: 5.8
|
||||
Requires at least: 6.0
|
||||
Tested up to: 6.0
|
||||
Requires PHP: 5.7
|
||||
License: GPLv2 or later
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Theme URI: https://github.com/Automattic/themes/tree/trunk/block-canvas
|
|||
Author: Automattic
|
||||
Author URI: https://automattic.com/
|
||||
Description: Block Canvas is a simple theme that supports full-site editing. It comes with a set of minimal templates and design settings that can be manipulated through Global Styles. Use it to build something beautiful.
|
||||
Requires at least: 5.7
|
||||
Requires at least: 6.0
|
||||
Tested up to: 6.0
|
||||
Requires PHP: 5.7
|
||||
Version: 0.0.17
|
||||
|
|
@ -80,4 +80,12 @@ GNU General Public License for more details.
|
|||
.wp-block-table figcaption {
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Link styles
|
||||
*/
|
||||
a {
|
||||
text-decoration-thickness: .0625em !important;
|
||||
text-underline-offset: .15em
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
"color": {
|
||||
"palette": [
|
||||
{
|
||||
"color": "#007cba",
|
||||
"color": "#000000",
|
||||
"name": "Primary",
|
||||
"slug": "primary"
|
||||
},
|
||||
|
|
@ -68,8 +68,12 @@
|
|||
],
|
||||
"fontSizes": [
|
||||
{
|
||||
"fluid": {
|
||||
"min": "0.825rem",
|
||||
"max": "1.0625rem"
|
||||
},
|
||||
"name": "Small",
|
||||
"size": "0.825rem",
|
||||
"size": "1rem",
|
||||
"slug": "small"
|
||||
},
|
||||
{
|
||||
|
|
@ -82,14 +86,18 @@
|
|||
"slug": "medium"
|
||||
},
|
||||
{
|
||||
"fluid": false,
|
||||
"fluid": {
|
||||
"min": "1.75rem",
|
||||
"max": "2rem"
|
||||
},
|
||||
"name": "Large",
|
||||
"size": "1.75rem",
|
||||
"slug": "large"
|
||||
},
|
||||
{
|
||||
"fluid": {
|
||||
"max": "4rem"
|
||||
"min": "2.5rem",
|
||||
"max": "3rem"
|
||||
},
|
||||
"name": "Extra Large",
|
||||
"size": "3rem",
|
||||
|
|
@ -102,8 +110,8 @@
|
|||
"blocks": {
|
||||
"core/code": {
|
||||
"border": {
|
||||
"color": "#CCCCCC",
|
||||
"radius": "0px",
|
||||
"color": "var(--wp--preset--color--foreground)",
|
||||
"radius": "0.25rem",
|
||||
"style": "solid",
|
||||
"width": "2px"
|
||||
},
|
||||
|
|
@ -136,13 +144,7 @@
|
|||
},
|
||||
"core/comment-reply-link": {
|
||||
"typography": {
|
||||
"fontSize": "var(--wp--preset--font-size--small)",
|
||||
"textDecoration": "underline"
|
||||
}
|
||||
},
|
||||
"core/comments-title": {
|
||||
"typography": {
|
||||
"fontSize": "var(--wp--preset--font-size--large)"
|
||||
"fontSize": "var(--wp--preset--font-size--small)"
|
||||
}
|
||||
},
|
||||
"core/gallery": {
|
||||
|
|
@ -159,12 +161,52 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"core/navigation": {
|
||||
"elements": {
|
||||
"link": {
|
||||
"typography": {
|
||||
"textDecoration": "none"
|
||||
},
|
||||
":hover": {
|
||||
"typography": {
|
||||
"textDecoration": "underline"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"core/post-author-name": {
|
||||
"elements": {
|
||||
"link": {
|
||||
"typography": {
|
||||
"textDecoration": "none"
|
||||
},
|
||||
":hover": {
|
||||
"typography": {
|
||||
"textDecoration": "underline"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"core/post-date": {
|
||||
"color": {
|
||||
"text": "var(--wp--preset--color--foreground)"
|
||||
},
|
||||
"typography": {
|
||||
"fontSize": "var(--wp--preset--font-size--small)"
|
||||
},
|
||||
"elements": {
|
||||
"link": {
|
||||
"typography": {
|
||||
"textDecoration": "none"
|
||||
},
|
||||
":hover": {
|
||||
"typography": {
|
||||
"textDecoration": "underline"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"core/post-title": {
|
||||
|
|
@ -172,10 +214,23 @@
|
|||
"margin": {
|
||||
"bottom": "0"
|
||||
}
|
||||
},
|
||||
"elements": {
|
||||
"link": {
|
||||
"typography": {
|
||||
"textDecoration": "none"
|
||||
},
|
||||
":hover": {
|
||||
"typography": {
|
||||
"textDecoration": "underline"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"core/pullquote": {
|
||||
"border": {
|
||||
"color": "var(--wp--preset--color--foreground)",
|
||||
"style": "solid",
|
||||
"width": "1px 0"
|
||||
},
|
||||
|
|
@ -231,8 +286,19 @@
|
|||
"core/site-title": {
|
||||
"typography": {
|
||||
"fontSize": "var(--wp--preset--font-size--medium)",
|
||||
"fontWeight": "700",
|
||||
"textDecoration": "none"
|
||||
"fontWeight": "700"
|
||||
},
|
||||
"elements": {
|
||||
"link": {
|
||||
"typography": {
|
||||
"textDecoration": "none"
|
||||
},
|
||||
":hover": {
|
||||
"typography": {
|
||||
"textDecoration": "underline"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -242,51 +308,68 @@
|
|||
},
|
||||
"elements": {
|
||||
"button": {
|
||||
":hover": {
|
||||
"border": {
|
||||
"radius": "0.25rem"
|
||||
},
|
||||
"color": {
|
||||
"background": "var(--wp--preset--color--primary)",
|
||||
"text": "var(--wp--preset--color--background)"
|
||||
},
|
||||
":hover": {
|
||||
"color": {
|
||||
"background": "var(--wp--preset--color--secondary)",
|
||||
"text": "var(--wp--preset--color--background)"
|
||||
}
|
||||
},
|
||||
"border": {
|
||||
"radius": "0"
|
||||
},
|
||||
"color": {
|
||||
"background": "var(--wp--preset--color--primary)",
|
||||
"text": "var(--wp--preset--color--background)"
|
||||
}
|
||||
":active": {
|
||||
"color": {
|
||||
"background": "var(--wp--preset--color--primary)",
|
||||
"text": "var(--wp--preset--color--background)"
|
||||
}
|
||||
},
|
||||
":focus": {
|
||||
"color": {
|
||||
"background": "var(--wp--preset--color--primary)",
|
||||
"text": "var(--wp--preset--color--background)"
|
||||
},
|
||||
"outline": {
|
||||
"color": "var(--wp--preset--color--primary)",
|
||||
"offset": "2px",
|
||||
"style": "dotted",
|
||||
"width": "1px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"heading": {
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--rubik)",
|
||||
"textTransform": "uppercase",
|
||||
"fontWeight": "400",
|
||||
"lineHeight": "1.125"
|
||||
}
|
||||
},
|
||||
"h1": {
|
||||
"typography": {
|
||||
"fontSize": "3rem"
|
||||
"fontSize": "var(--wp--preset--font-size--x-large)"
|
||||
}
|
||||
},
|
||||
"h2": {
|
||||
"typography": {
|
||||
"fontSize": "var(--wp--preset--font-size--x-large)"
|
||||
"fontSize": "var(--wp--preset--font-size--large)"
|
||||
}
|
||||
},
|
||||
"h3": {
|
||||
"typography": {
|
||||
"fontSize": "var(--wp--preset--font-size--large)"
|
||||
"fontSize": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 0.4808)), 1.75rem)"
|
||||
}
|
||||
},
|
||||
"h4": {
|
||||
"typography": {
|
||||
"fontSize": "var(--wp--preset--font-size--medium)"
|
||||
"fontSize": "clamp(1.25rem, calc(1.25rem + ((1vw - 0.48rem) * 0.4808)), 1.5rem)"
|
||||
}
|
||||
},
|
||||
"h5": {
|
||||
"typography": {
|
||||
"fontSize": "1.125rem"
|
||||
"fontSize": "var(--wp--preset--font-size--medium)"
|
||||
}
|
||||
},
|
||||
"h6": {
|
||||
|
|
@ -297,6 +380,11 @@
|
|||
"link": {
|
||||
"color": {
|
||||
"text": "var(--wp--preset--color--primary)"
|
||||
},
|
||||
":hover": {
|
||||
"typography": {
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue