Curator: index template and styles (#6071)
* update index template and styles update undeline thickness and spacing add pagination pattern to post-list move padding from pattern to template * Rework design of meta and pagination. Co-authored-by: Jeff Ong <jonger4@gmail.com>
This commit is contained in:
Madhu Dollu
GitHub
parent
72e7861568
commit
e797b3fe02
4 changed files with 125 additions and 35 deletions
38
curator/patterns/posts-list.php
Normal file
38
curator/patterns/posts-list.php
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<?php
|
||||
/**
|
||||
* Title: Posts list
|
||||
* Slug: curator/posts-list
|
||||
* Inserter: no
|
||||
*/
|
||||
|
||||
?>
|
||||
|
||||
<!-- wp:group {"align":"wide"} -->
|
||||
<div class="wp-block-group alignwide">
|
||||
|
||||
<!-- wp:query {"query":{"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"perPage":3}} -->
|
||||
<div class="wp-block-query"><!-- wp:post-template -->
|
||||
<!-- wp:group {"style":{"border":{"bottom":{"width":"1px"}}}} -->
|
||||
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
|
||||
<div class="wp-block-group"><!-- wp:post-date {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /-->
|
||||
<!-- wp:post-terms {"term":"category"} /--></div>
|
||||
<!-- /wp:group -->
|
||||
|
||||
<!-- wp:post-title {"level":1,"isLink":true,"style":{"typography":{"lineHeight":1},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
|
||||
|
||||
<!-- wp:separator {"className":"alignfull"} -->
|
||||
<hr class="wp-block-separator has-alpha-channel-opacity alignfull"/>
|
||||
<!-- /wp:separator --></div>
|
||||
<!-- /wp:group -->
|
||||
<!-- /wp:post-template -->
|
||||
<!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem"}}}} -->
|
||||
<div class="wp-block-group" style="padding-top:1rem"><!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
|
||||
<!-- wp:query-pagination-numbers /-->
|
||||
<!-- wp:group {"style":{"spacing":{"blockGap":"2rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
|
||||
<div class="wp-block-group"><!-- wp:query-pagination-previous /-->
|
||||
<!-- wp:query-pagination-next /--></div>
|
||||
<!-- /wp:group -->
|
||||
<!-- /wp:query-pagination --></div>
|
||||
<!-- /wp:group --></div>
|
||||
<!-- /wp:query --></div>
|
||||
<!-- /wp:group -->
|
||||
|
|
@ -191,6 +191,14 @@ a:not(
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wp-block-post-title a:hover {
|
||||
color: var(--wp--preset--color--primary);
|
||||
text-decoration-line: underline;
|
||||
text-decoration-thickness: 0.25rem;
|
||||
text-underline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Alignment styles, borrowed from Twenty Twenty-Two.
|
||||
* These rules are temporary, and should not be relied on or
|
||||
|
|
@ -265,3 +273,33 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
|
|||
.wp-block-post-comments-count {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/*
|
||||
* Pagination
|
||||
*/
|
||||
|
||||
:is(
|
||||
.wp-block-query-pagination .wp-block-query-pagination-previous,
|
||||
.wp-block-query-pagination .wp-block-query-pagination-next
|
||||
):hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.is-arrow-arrow.wp-block-query-pagination-next-arrow {
|
||||
margin-left: 0.375rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.is-arrow-arrow.wp-block-query-pagination-previous-arrow {
|
||||
margin-right: 0.375rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.wp-block-query-pagination-numbers .page-numbers:not(.current):not(.dots):hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.wp-block-query-pagination-numbers .page-numbers.current {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media (max-width: 599px) {
|
||||
.wp-block-query-pagination-numbers {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,6 @@
|
|||
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
|
||||
|
||||
<!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->
|
||||
<main class="wp-block-query">
|
||||
<!-- wp:post-template -->
|
||||
<!-- wp:group -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:post-title {"isLink":true} /-->
|
||||
<!-- wp:post-featured-image {"isLink":true} /-->
|
||||
<!-- wp:post-excerpt /-->
|
||||
<!-- wp:template-part {"slug":"post-meta"} /-->
|
||||
<!-- wp:spacer {"height":40} -->
|
||||
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
<!-- /wp:spacer -->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
<!-- /wp:post-template -->
|
||||
<!-- wp:group {"layout":{"inherit":true}} -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:query-pagination -->
|
||||
<!-- wp:query-pagination-previous /-->
|
||||
|
||||
<!-- wp:query-pagination-numbers /-->
|
||||
|
||||
<!-- wp:query-pagination-next /-->
|
||||
<!-- /wp:query-pagination -->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
</main>
|
||||
<!-- /wp:query -->
|
||||
|
||||
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
|
||||
<!-- wp:pattern {"slug":"curator/posts-list"} /-->
|
||||
|
||||
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
|
||||
|
||||
|
|
@ -124,6 +124,16 @@
|
|||
"name": "Headings (System Font)",
|
||||
"slug": "heading-font",
|
||||
"fontFace": [
|
||||
{
|
||||
"fontDisplay": "regular",
|
||||
"fontFamily": "'Work Sans'",
|
||||
"fontWeight": "400",
|
||||
"fontStyle": "normal",
|
||||
"fontStretch": "normal",
|
||||
"src": [
|
||||
"file:./assets/fonts/WorkSans.ttf"
|
||||
]
|
||||
},
|
||||
{
|
||||
"fontDisplay": "block",
|
||||
"fontFamily": "'Work Sans'",
|
||||
|
|
@ -134,6 +144,16 @@
|
|||
"file:./assets/fonts/WorkSans.ttf"
|
||||
]
|
||||
},
|
||||
{
|
||||
"fontDisplay": "regular",
|
||||
"fontFamily": "'Work Sans'",
|
||||
"fontWeight": "400",
|
||||
"fontStyle": "italic",
|
||||
"fontStretch": "normal",
|
||||
"src": [
|
||||
"file:./assets/fonts/WorkSans-Italic.ttf"
|
||||
]
|
||||
},
|
||||
{
|
||||
"fontDisplay": "block",
|
||||
"fontFamily": "'Work Sans'",
|
||||
|
|
@ -297,11 +317,11 @@
|
|||
}
|
||||
},
|
||||
"core/query-pagination": {
|
||||
"spacing": {
|
||||
"padding": {
|
||||
"left": "20px",
|
||||
"right": "20px"
|
||||
}
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--heading-font)",
|
||||
"fontSize": "clamp(1.125rem, 4vw, 1.375rem)",
|
||||
"fontWeight": "900",
|
||||
"letterSpacing": "-0.02rem"
|
||||
},
|
||||
"elements": {
|
||||
"link": {
|
||||
|
|
@ -311,6 +331,27 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"core/query-pagination-previous": {
|
||||
"typography": {
|
||||
"textTransform": "uppercase",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"core/query-pagination-next": {
|
||||
"typography": {
|
||||
"textTransform": "uppercase",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"core/query-pagination-numbers": {
|
||||
"elements": {
|
||||
"link": {
|
||||
"typography": {
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"core/pullquote": {
|
||||
"border": {
|
||||
"style": "solid",
|
||||
|
|
|
|||
Loading…
Reference in a new issue