js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove layout classes from blog post patterns

Browse Source
This commit is contained in:
lindsaym-fa
2024-03-29 17:22:24 -04:00
parent 2d5fde324a
commit ec07b7dd74
4 changed files with 345 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/pages/experimental/demo_patterns/blog_listing.md
View File

@@ -28,7 +28,7 @@ toc: false
<div class="preview-container wa:block-flow:3xl">
<div class="wa:blog_header wa:background:college_ruled">
<h1>Latest from the Blog</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Don't miss the hottest takes on art and design from respected industry experts.</p>
</div>
<div class="wa:arrange:aside-end" style="--wa-grid-size: 45ch;">
<div class="wa:block-flow:m">
@@ -37,13 +37,13 @@ toc: false
</div>
<div class="wa:arrange:flex:justify-space_between">
<small><wa-format-date month="long" year="numeric"></wa-format-date></small>
<wa-badge variant="neutral">Design</wa-badge>
<wa-tag size="small">Design</wa-tag>
</div>
<h1>Pantone's Color of the Year 2024</h1>
<p>PANTONE 13-1023 Peach Fuzz has our new year starting off with lots of warm and fuzzies.</p>
<div class="wa:arrange:flex:gap-s">
<wa-avatar label="User avatar" style="--size: 2rem;"></wa-avatar>
<small>Author</small>
<small>Jane Doe</small>
</div>
</div>
<div class="wa:arrange" style="align-content: start;">
@@ -113,7 +113,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Dolore eu Fugiat Nulla</h4>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
@@ -122,7 +122,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Sed Tincidunt Nibh Felis</h4>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
@@ -131,7 +131,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Curabitur Cursus Eleifend</h4>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
@@ -140,7 +140,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Ante Est Non Ligula</h4>
</div>
</div>
</div>
@@ -160,7 +160,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Maecenas ut Metus</h4>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
@@ -169,7 +169,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Morbi Vitae Sapien Non Velit</h4>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
@@ -178,7 +178,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Vestibulum Ante Ipsum Primis</h4>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
@@ -187,7 +187,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Viverra Eros Vitae</h4>
</div>
</div>
</div>
@@ -207,7 +207,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Ante Est Non Ligula Imperdiet</h4>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
@@ -216,7 +216,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Viverra Eros Vitae</h4>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
@@ -225,7 +225,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Maecenas ut Metus</h4>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
@@ -234,7 +234,7 @@ toc: false
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Headline Dolor Sit Amet</h4>
<h4>Dolore eu Fugiat Nulla</h4>
</div>
</div>
</div>
@@ -248,8 +248,8 @@ toc: false
<img src="https://images.pexels.com/photos/1194420/pexels-photo-1194420.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
</div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
<h4>Headline Dolor Sit Amet</h4>
<wa-badge variant="neutral">Design</wa-badge>
<h4>Vestibulum Ante Ipsum Primis</h4>
<wa-tag size="small">Design</wa-tag>
</wa-card>
<wa-card class="wa:block-flow:xs">
<div class="wa:frame:landscape" slot="image">
@@ -257,15 +257,15 @@ toc: false
</div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
<h4>Consectetur Adipiscing Elit</h4>
<wa-badge variant="neutral">Arts & Culture</wa-badge>
<wa-tag size="small">Arts & Culture</wa-tag>
</wa-card>
<wa-card class="wa:block-flow:xs">
<div class="wa:frame:landscape" slot="image">
<img src="https://images.pexels.com/photos/6321244/pexels-photo-6321244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
</div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
<h4>Headline Dolor Sit Amet</h4>
<wa-badge variant="neutral">Web Development</wa-badge>
<h4>Ante Est Non Ligula Imperdiet</h4>
<wa-tag size="small">Web Development</wa-tag>
</wa-card>
</div>
<div>

125
docs/pages/experimental/demo_patterns/blog_patterns.md
View File

@@ -26,50 +26,50 @@ toc: false
## Overflowing Hero
```html:preview
<div class="wa:overflowing_hero">
<div class="wa:arrange wa:background:brand_spot_gradient">
<div>
<div class="wa:arrange:flex:justify-space_between:gap-s">
<small><wa-format-date month="long" year="numeric"></wa-format-date></small>
<wa-badge variant="neutral">Design</wa-badge>
<section class="wa:blog-hero-overflowing">
<div class="wa:hero-backdrop">
<div class="wa:hero-content">
<div class="wa:post-details">
<wa-format-date month="long" year="numeric"></wa-format-date>
<wa-tag size="small">Design</wa-tag>
</div>
<h1>Pantone's Color of the Year 2024</h1>
<p>PANTONE 13-1023 Peach Fuzz has our new year starting off with lots of warm and fuzzies.</p>
<div class="wa:arrange:flex:gap-s">
<div class="wa:post-author">
<wa-avatar label="User avatar" style="--size: 2rem;"></wa-avatar>
<small>Author</small>
<small>Jane Doe</small>
</div>
</div>
<div class="wa:frame:square">
<img src="https://bit.ly/3Irq42Q" alt="Vast, peach-colored desert">
</div>
</div>
</div>
</section>
```
## Post Body with Drop Cap
```html:preview
<div class="wa:blog_post wa:block-flow:3xl">
<div class="wa:blog_post:body wa:block-flow:xl">
<section class="wa:blog-post">
<div class="wa:post-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
```
## Footer with Reactions
```html:preview
<wa-divider></wa-divider>
<div class="wa:blog_post:footer wa:arrange:flex:justify-space_between">
<wa-radio-group name="reactions" class="wa:reaction_group">
<div class="wa:post-footer">
<wa-radio-group name="reactions" class="wa:post-reactions">
<wa-radio-button value="applaud"><wa-icon name="hands-clapping" label="Applaud"></wa-icon><small class="wa:count">74</small></wa-radio-button>
<wa-radio-button value="love"><wa-icon name="heart" label="Love"></wa-icon><small class="wa:count">161</small></wa-radio-button>
<wa-radio-button value="laugh"><wa-icon name="face-laugh-beam" label="Laugh"></wa-icon><small class="wa:count">9</small></wa-radio-button>
<wa-radio-button value="cry"><wa-icon name="face-sad-tear" label="Cry"></wa-icon><small class="wa:count">1</small></wa-radio-button>
</wa-radio-group>
<div class="wa:arrange:flex:nowrap:gap-l">
<div class="wa:post-actions">
<wa-tooltip content="Save">
<wa-icon-button name="bookmark" label="Save"></wa-icon-button>
</wa-tooltip>
@@ -83,88 +83,89 @@ toc: false
## Comment Field
```html:preview
<div class="wa:arrange:flex:nowrap:gap-s">
<article class="wa:comment-composer">
<wa-avatar label="User avatar"></wa-avatar>
<wa-textarea class="wa:fill_space" rows="1" placeholder="Add a comment"></wa-textarea>
</div>
<wa-textarea rows="1" placeholder="Add a comment"></wa-textarea>
</article>
```
## Comment
```html:preview
<div class="wa:comment wa:arrange:flex:nowrap:align-start:gap-s">
<article class="wa:comment">
<wa-avatar image="https://bit.ly/3V9kV7a" label="User avatar"></wa-avatar>
<div class="wa:fill_space">
<div class="wa:chat_bubble">
<div class="wa:arrange:flex:justify-space_between">
<div class="wa:comment-content">
<div class="wa:comment-bubble">
<div class="wa:comment-details">
<strong>Pedro Pascal</strong>
<small>1d</small>
</div>
<span>You expect me to search the galaxy for the home of this creature and deliver it to a race of enemy sorcerers?</span>
</div>
<div class="wa:arrange:flex:gap-m">
<div class="wa:reaction_single wa:arrange:flex:nowrap:gap-3xs">
<div class="wa:comment-actions">
<div class="wa:reaction-like">
<wa-icon-button name="thumbs-up" label="Like"></wa-icon-button>
<small>(3)</small>
</div>
<wa-button variant="text" size="small">Reply</wa-button>
</div>
</div>
</div>
</article>
```
## Call to Action
```html:preview
<div class="wa:blog:cta wa:arrange:gap-m">
<div class="wa:block-flow:s">
<section class="wa:blog-subscribe-cta">
<div class="wa:cta-description">
<h2><strong>Don't miss a thing.</strong></h2>
<p>Subscribe to receive the latest posts in your inbox.</p>
</div>
<div class="wa:arrange:flex:gap-s">
<wa-input class="wa:fill_space" type="email" placeholder="your@email.com">
<form>
<wa-input type="email" placeholder="your@email.com">
<wa-icon name="envelope" variant="regular" label="email" slot="prefix"></wa-icon>
</wa-input>
<wa-button variant="brand">Subscribe</wa-button>
</div>
</div>
<wa-button type="submit" variant="brand">Subscribe</wa-button>
</form>
</section>
```
## Recommended Posts
```html:preview
<div class="wa:blog:recommended">
<div class="wa:block-flow:xl">
<h2>You may also like</h2>
<div class="wa:arrange:size-s">
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
<img src="http://bit.ly/49ThK7O" alt="">
</div>
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Eget Consequat Libero</h4>
<section class="wa:blog-recommended-posts">
<h2>You may also like</h2>
<div class="wa:post-list">
<article class="wa:post-link">
<div class="wa:frame:landscape">
<img src="http://bit.ly/49ThK7O" alt="">
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
<img src="https://bit.ly/3wHdFFp" alt="">
</div>
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Sed a Leo Tempus</h4>
<div class="wa:post-details">
<wa-format-date date="2024-02-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
<wa-tag size="small">Arts & Culture</wa-tag>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
<img src="https://bit.ly/49LxbPx" alt="">
</div>
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Ultrices Posuere Cubilia Curae</h4>
<h4>Eget Consequat Libero</h4>
</article>
<article class="wa:post-link">
<div class="wa:frame:landscape">
<img src="https://bit.ly/3wHdFFp" alt="">
</div>
</div>
<div class="wa:post-details">
<wa-format-date date="2024-01-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
<wa-tag size="small">Design</wa-tag>
</div>
<h4>Sed a Leo Tempus Aute Irure</h4>
</article>
<article class="wa:post-link">
<div class="wa:frame:landscape">
<img src="https://bit.ly/49LxbPx" alt="">
</div>
<div class="wa:post-details">
<wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
<wa-tag size="small">Arts & Culture</wa-tag>
</div>
<h4>Ultrices Posuere Cubilia Curae</h4>
</article>
</div>
</div>
</section>
```

149
docs/pages/experimental/demo_patterns/blog_post.md
View File

@@ -28,41 +28,41 @@ toc: false
<!-- cSpell:dictionaries lorem-ipsum -->
<div class="preview-container wa:block-flow:3xl">
<div class="wa:overflowing_hero">
<div class="wa:arrange wa:background:brand_spot_gradient">
<div>
<div class="wa:arrange:flex:justify-space_between:gap-s">
<small><wa-format-date month="long" year="numeric"></wa-format-date></small>
<wa-badge variant="neutral">Design</wa-badge>
<section class="wa:blog-hero-overflowing">
<div class="wa:hero-backdrop">
<div class="wa:hero-content">
<div class="wa:post-details">
<wa-format-date month="long" year="numeric"></wa-format-date>
<wa-tag size="small">Design</wa-tag>
</div>
<h1>Pantone's Color of the Year 2024</h1>
<p>PANTONE 13-1023 Peach Fuzz has our new year starting off with lots of warm and fuzzies.</p>
<div class="wa:arrange:flex:gap-s">
<div class="wa:post-author">
<wa-avatar label="User avatar" style="--size: 2rem;"></wa-avatar>
<small>Author</small>
<small>Jane Doe</small>
</div>
</div>
<div class="wa:frame:square">
<img src="https://bit.ly/3Irq42Q" alt="Vast, peach-colored desert">
</div>
</div>
</div>
<div class="wa:blog_post wa:block-flow:3xl">
<div class="wa:blog_post:body wa:block-flow:xl">
</section>
<section class="wa:blog-post">
<div class="wa:post-body">
<p>Morbi vitae sapien non velit feugiat consectetur. Nulla lacinia ante a diam gravida cursus. Quisque fermentum ex a nisi cursus porttitor. Praesent id laoreet mauris, id efficitur sapien. Quisque eget metus velit. Nulla sit amet tristique lectus, tincidunt lobortis velit. Proin vitae facilisis lectus. Nunc vel sapien vitae dui commodo suscipit iaculis eget felis.</p>
<p>Praesent in erat semper, fringilla tellus non, lacinia felis. Nam eu fringilla nisl. Maecenas id tortor tempus, accumsan nisi eget, bibendum arcu. Pellentesque nec enim non nisl varius iaculis. Phasellus interdum nec ex nec faucibus. Vestibulum et quam auctor massa pellentesque tempor. Sed tincidunt nibh felis, ut euismod ante volutpat aliquam. Etiam varius suscipit ornare.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed a leo tempus, pretium mi ac, pretium ipsum. Curabitur cursus eleifend enim. Pellentesque feugiat euismod tincidunt. Sed semper velit nunc, nec imperdiet eros varius ac. Aenean aliquam augue at venenatis volutpat. Proin a imperdiet leo. Nullam eget aliquet urna.</p>
<p>Mauris faucibus varius massa vel vulputate. Praesent ac ligula pretium, viverra eros vitae, consequat metus. Morbi commodo vehicula sem, eget scelerisque ipsum rutrum ut. Maecenas cursus dolor mattis risus dapibus pulvinar. Suspendisse ut dolor nec arcu lobortis molestie.</p>
<p>Donec eros felis, dictum non placerat vitae, sodales in risus. Etiam felis lectus, consectetur quis tempor non, porta a metus. Cras finibus nibh a est semper, eget consequat libero pretium. Pellentesque placerat feugiat enim sit amet sodales. Proin convallis dui eu nibh tincidunt, a posuere dolor sagittis. Ut egestas et eros eu convallis. Integer eros elit, blandit at euismod sit amet, blandit sed velit. Donec dapibus nulla in augue commodo, at efficitur orci dictum. Praesent ultrices accumsan iaculis. Maecenas ut metus a lectus venenatis euismod. Sed auctor, dui efficitur molestie convallis, diam odio faucibus turpis, vitae bibendum ante est non ligula.</p>
<wa-divider></wa-divider>
<div class="wa:blog_post:footer wa:arrange:flex:justify-space_between">
<wa-radio-group name="reactions" class="wa:reaction_group">
<div class="wa:post-footer">
<wa-radio-group name="reactions" class="wa:post-reactions">
<wa-radio-button value="applaud"><wa-icon name="hands-clapping" label="Applaud"></wa-icon><small class="wa:count">74</small></wa-radio-button>
<wa-radio-button value="love"><wa-icon name="heart" label="Love"></wa-icon><small class="wa:count">161</small></wa-radio-button>
<wa-radio-button value="laugh"><wa-icon name="face-laugh-beam" label="Laugh"></wa-icon><small class="wa:count">9</small></wa-radio-button>
<wa-radio-button value="cry"><wa-icon name="face-sad-tear" label="Cry"></wa-icon><small class="wa:count">1</small></wa-radio-button>
</wa-radio-group>
<div class="wa:arrange:flex:nowrap:gap-l">
<div class="wa:post-actions">
<wa-tooltip content="Save">
<wa-icon-button name="bookmark" label="Save"></wa-icon-button>
</wa-tooltip>
@@ -72,103 +72,104 @@ toc: false
</div>
</div>
</div>
<div class="wa:blog_post:comments wa:block-flow:2xl">
<section class="wa:post-comments wa:block-flow:2xl">
<h2>Comments</h2>
<div class="wa:arrange:flex:nowrap:gap-s">
<article class="wa:comment-composer">
<wa-avatar label="User avatar"></wa-avatar>
<wa-textarea class="wa:fill_space" rows="1" placeholder="Add a comment"></wa-textarea>
</div>
<div class="wa:comment wa:arrange:flex:nowrap:align-start:gap-s">
<wa-textarea rows="1" placeholder="Add a comment"></wa-textarea>
</article>
<article class="wa:comment">
<wa-avatar image="https://bit.ly/3V9kV7a" label="User avatar"></wa-avatar>
<div class="wa:fill_space">
<div class="wa:chat_bubble">
<div class="wa:arrange:flex:justify-space_between">
<div class="wa:comment-content">
<div class="wa:comment-bubble">
<div class="wa:comment-details">
<strong>Pedro Pascal</strong>
<small>1d</small>
</div>
<span>You expect me to search the galaxy for the home of this creature and deliver it to a race of enemy sorcerers?</span>
</div>
<div class="wa:arrange:flex:gap-m">
<div class="wa:reaction_single wa:arrange:flex:nowrap:gap-3xs">
<div class="wa:comment-actions">
<div class="wa:reaction-like">
<wa-icon-button name="thumbs-up" label="Like"></wa-icon-button>
<small>(3)</small>
</div>
<wa-button variant="text" size="small">Reply</wa-button>
</div>
<div class="wa:comment wa:arrange:flex:nowrap:align-start:gap-s">
<article class="wa:comment">
<wa-avatar image="https://bit.ly/3Pb2cUC" label="User avatar"></wa-avatar>
<div class="wa:fill_space">
<div class="wa:chat_bubble">
<div class="wa:arrange:flex:justify-space_between">
<div class="wa:comment-content">
<div class="wa:comment-bubble">
<div class="wa:comment-details">
<strong>Emily Swallow</strong>
<small>12h</small>
</div>
<span>This is the Way.</span>
</div>
<div class="wa:arrange:flex:gap-m">
<div class="wa:reaction_single wa:arrange:flex:nowrap:gap-3xs">
<div class="wa:comment-actions">
<div class="wa:reaction-like">
<wa-icon-button name="thumbs-up" label="Like"></wa-icon-button>
<small>(21)</small>
</div>
<wa-button variant="text" size="small">Reply</wa-button>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="wa:arrange:flex:nowrap:align-start:gap-s">
</article>
<article class="wa:comment">
<wa-avatar image="https://bit.ly/3Tq9GWr" label="User avatar"></wa-avatar>
<div class="wa:fill_space">
<div class="wa:chat_bubble">
<div class="wa:arrange:flex:justify-space_between">
<div class="wa:comment-content">
<div class="wa:comment-bubble">
<div class="wa:comment-details">
<strong>Nick Nolte</strong>
<small>2w</small>
</div>
<span>I have spoken.</span>
</div>
<div class="wa:arrange:flex:gap-m">
<div class="wa:reaction_single wa:arrange:flex:nowrap:gap-3xs">
<div class="wa:comment-actions">
<div class="wa:reaction-like">
<wa-icon-button name="thumbs-up" label="Like"></wa-icon-button>
<small>(1)</small>
</div>
<wa-button variant="text" size="small">Reply</wa-button>
</div>
</div>
</div>
</article>
</section>
</section>
<section class="wa:blog-recommended-posts">
<h2>You may also like</h2>
<div class="wa:post-list">
<article class="wa:post-link">
<div class="wa:frame:landscape">
<img src="http://bit.ly/49ThK7O" alt="">
</div>
<div class="wa:post-details">
<wa-format-date date="2024-02-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
<wa-tag size="small">Arts & Culture</wa-tag>
</div>
<h4>Eget Consequat Libero</h4>
</article>
<article class="wa:post-link">
<div class="wa:frame:landscape">
<img src="https://bit.ly/3wHdFFp" alt="">
</div>
<div class="wa:post-details">
<wa-format-date date="2024-01-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
<wa-tag size="small">Design</wa-tag>
</div>
<h4>Sed a Leo Tempus Aute Irure</h4>
</article>
<article class="wa:post-link">
<div class="wa:frame:landscape">
<img src="https://bit.ly/49LxbPx" alt="">
</div>
<div class="wa:post-details">
<wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
<wa-tag size="small">Arts & Culture</wa-tag>
</div>
<h4>Ultrices Posuere Cubilia Curae</h4>
</article>
</div>
</div>
<div class="wa:blog:recommended">
<div class="wa:block-flow:xl">
<h2>You may also like</h2>
<div class="wa:arrange:size-s">
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
<img src="http://bit.ly/49ThK7O" alt="">
</div>
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Eget Consequat Libero</h4>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
<img src="https://bit.ly/3wHdFFp" alt="">
</div>
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Sed a Leo Tempus</h4>
</div>
<div class="wa:block-flow:xs">
<div class="wa:frame:landscape">
<img src="https://bit.ly/49LxbPx" alt="">
</div>
<div>
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
</div>
<h4>Ultrices Posuere Cubilia Curae</h4>
</div>
</div>
</div>
</div>
</section>
</div>

199
src/themes/demo_patterns.css
View File

@@ -97,10 +97,18 @@
z-index: -2;
}
.wa\:overflowing_hero {
.wa\:blog-hero-overflowing {
overflow: auto;
& > [class*='wa\:arrange'] {
& > [class*='wa\:hero-backdrop'] {
background-image: linear-gradient(160deg, var(--wa-color-brand-spot), var(--wa-color-brand-spot-darker));
--wa-grid-gap: var(--wa-space-3xl);
--wa-grid-size: 30ch;
display: grid;
gap: var(--wa-grid-gap);
grid-template-columns: repeat(auto-fit, minmax(min(var(--wa-grid-size), 100%), 1fr));
margin-block-end: var(--wa-grid-gap);
border-radius: var(--wa-panel-corners);
color: var(--wa-color-brand-text-on-spot);
@@ -114,6 +122,11 @@
margin-block-end: calc((var(--wa-grid-gap) * 2 * -1));
}
}
& wa-avatar::part(base) {
background-color: var(--wa-color-neutral-fill-subtle);
color: var(--wa-color-neutral-text-on-fill);
}
}
.wa\:blog_header {
@@ -132,38 +145,95 @@
}
}
.wa\:blog_post {
.wa\:blog-post {
font-size: var(--wa-font-size-l);
margin-inline: auto;
max-inline-size: 60ch;
& .wa\:blog_post\:body {
& > * {
margin-block: 0;
}
& > * + * {
margin-block-start: var(--wa-space-3xl);
}
& .wa\:post-body {
& > *:first-child::first-letter {
font-family: var(--wa-font-family-longform);
-webkit-initial-letter: 3;
initial-letter: 3;
margin-inline-end: var(--wa-space-2xs);
}
& > * {
margin-block: 0;
}
& > * + * {
margin-block-start: var(--wa-space-xl);
}
}
}
.wa\:blog_post\:footer {
.wa\:post-footer {
font-size: var(--wa-font-size-m);
gap: var(--wa-space-s);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.wa\:reaction_group .wa\:count {
.wa\:post-reactions .wa\:count {
margin-inline-start: var(--wa-space-xs);
}
.wa\:blog_post\:comments {
.wa\:post-comments {
font-size: var(--wa-font-size-m);
}
.wa\:reaction_single wa-icon-button {
color: var(--wa-color-neutral-text-on-surface);
.wa\:comment {
gap: var(--wa-space-s);
display: flex;
align-items: flex-start;
}
.wa\:chat_bubble {
.wa\:comment-content {
flex: 1 1 auto;
}
.wa\:comment-details {
gap: var(--wa-space-s);
display: flex;
align-items: center;
justify-content: space-between;
}
.wa\:comment-actions {
gap: var(--wa-space-m);
display: flex;
align-items: center;
}
.wa\:reaction-like {
gap: var(--wa-space-3xs);
display: flex;
align-items: center;
flex-wrap: nowrap;
& wa-icon-button {
color: var(--wa-color-neutral-text-on-surface);
}
}
.wa\:comment-bubble {
background-color: var(--wa-color-neutral-fill-subtle);
border-radius: var(--wa-form-controls-corners);
border-start-start-radius: 0;
@@ -186,12 +256,18 @@
}
}
.wa\:blog\:cta {
.wa\:blog-subscribe-cta {
background-color: var(--wa-color-brand-fill-subtle);
padding: var(--wa-space-3xl);
border-radius: var(--wa-panel-corners);
box-shadow: var(--wa-shadow-level-1);
--wa-grid-gap: var(--wa-space-m);
--wa-grid-size: 30ch;
display: grid;
gap: var(--wa-grid-gap);
grid-template-columns: repeat(auto-fit, minmax(min(var(--wa-grid-size), 100%), 1fr));
& h2 {
color: var(--wa-color-brand-text-on-fill);
}
@@ -199,11 +275,110 @@
& p {
color: var(--wa-color-neutral-text-on-fill);
}
& form {
--wa-grid-gap: var(--wa-space-s);
--wa-grid-size: 30ch;
gap: var(--wa-grid-gap);
display: flex;
align-items: center;
flex-wrap: wrap;
& > wa-input {
flex: 1 1 auto;
}
}
}
.wa\:blog\:recommended {
.wa\:cta-description {
& > * {
margin-block: 0;
}
& > * + * {
margin-block-start: var(--wa-space-s);
}
}
.wa\:blog-recommended-posts {
background-color: var(--wa-color-neutral-fill-subtle);
padding: var(--wa-space-3xl);
border-radius: var(--wa-panel-corners);
box-shadow: var(--wa-shadow-level-1);
& > * {
margin-block: 0;
}
& > * + * {
margin-block-start: var(--wa-space-3xl);
}
& article {
& > * {
margin-block: 0;
}
& > * + * {
margin-block-start: var(--wa-space-m);
}
}
& .wa\:post-details {
color: var(--wa-color-text-quiet);
}
}
.wa\:post-link {
& h4 {
line-height: 1;
}
& p {
font-size: var(--wa-font-size-s);
}
}
.wa\:post-details {
font-size: var(--wa-font-size-s);
display: flex;
align-items: center;
justify-content: space-between;
}
.wa\:post-author {
--wa-grid-gap: var(--wa-space-s);
--wa-grid-size: 30ch;
gap: var(--wa-grid-gap);
display: flex;
align-items: center;
flex-wrap: wrap;
}
.wa\:post-list {
--wa-grid-gap: var(--wa-space-3xl);
--wa-grid-size: 15ch;
display: grid;
gap: var(--wa-grid-gap);
grid-template-columns: repeat(auto-fit, minmax(min(var(--wa-grid-size), 100%), 1fr));
}
.wa\:post-actions {
gap: var(--wa-space-m);
display: flex;
align-items: center;
flex-wrap: wrap;
}
.wa\:comment-composer {
gap: var(--wa-space-s);
display: flex;
align-items: center;
& wa-textarea {
flex: 1 1 auto;
}
}