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

adjust content

Browse Source
This commit is contained in:
Cory LaViska
2024-11-21 10:26:43 -05:00
parent 29025a92d9
commit d9fb3e7353
1 changed files with 31 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
docs/docs/patterns/news.md
View File

@@ -36,23 +36,18 @@ TODO Page Description
<img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
<h2 style="margin-bottom: var(--wa-space-s);">Title</h2>
<p style="margin-bottom: var(--wa-space-3xs);">Well, the way they make shows is, they make one show. That show's called a pilot.</p>
<span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
<span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div>
<img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
<p style="margin-bottom: var(--wa-space-3xs);">Normally, both your asses would be dead as fucking fried chicken.</p>
<span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
<img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
<p style="margin-bottom: var(--wa-space-3xs);">Normally, both your asses would be dead as fucking fried chicken.</p>
<span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
</div>
<div>
<img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
<p style="margin-bottom: var(--wa-space-3xs);">Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
<span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
<img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
<p style="margin-bottom: var(--wa-space-3xs);">Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
<span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
</div>
</div>
</div>
@@ -60,67 +55,66 @@ TODO Page Description
</div>
```
## Footer
## Footer
```html{.example}
<div class="news-footer">
<div class="container">
<!-- <div class="logo"> <wa-icon name="user-secret"></wa-icon> <h1 style="--wa-space-xl: 0;">Daily Snoop</h1></div> -->
<!-- <div class="logo"> <wa-icon name="user-secret"></wa-icon><h1 style="--wa-space-xl: 0;">Daily Snoop</h1></div> -->
<div class="nav">
<section>
<h4 style="--wa-space-xl: 0;">News</h4>
<ul>
<li><a href="#">U.S.</a></li>
<li><a href="#">World</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Science</a></li>
</ul>
<li><a href="#">U.S.</a></li>
<li><a href="#">World</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Science</a></li>
</ul>
</section>
<section>
<h4 style="--wa-space-xl: 0;">Arts</h4>
<ul>
<li><a href="#">Book Review</a></li>
<li><a href="#">Dance</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Pop Culture</a></li>
</ul>
<li><a href="#">Book Review</a></li>
<li><a href="#">Dance</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Pop Culture</a></li>
</ul>
</section>
<section>
<h4 style="--wa-space-xl: 0;">Subscriptions</h4>
<ul class="list">
<li><a href="#"><wa-icon fixed-width name="game-board-simple"></wa-icon> Crossword</a></li>
<li><a href="#"><wa-icon fixed-width name="paper-plane"></wa-icon> Newsletters</a></li>
<li><a href="#"><wa-icon fixed-width name="microphone-lines"></wa-icon> Podcast</a></li>
<li><a href="#"><wa-icon fixed-width name="game-board-simple"></wa-icon>Crossword</a></li>
<li><a href="#"><wa-icon fixed-width name="paper-plane"></wa-icon>Newsletters</a></li>
<li><a href="#"><wa-icon fixed-width name="microphone-lines"></wa-icon>Podcast</a></li>
</ul>
</section>
</div>
<div class="social">
<a href="">
<wa-icon family="brands" name="bluesky"></wa-icon>
<wa-icon family="brands" name="bluesky"></wa-icon>
</a>
<a href="">
<wa-icon family="brands" name="instagram"></wa-icon>
<wa-icon family="brands" name="instagram"></wa-icon>
</a>
<a href="">
<wa-icon family="brands" name="facebook"></wa-icon>
<wa-icon family="brands" name="facebook"></wa-icon>
</a>
<a href="">
<wa-icon family="brands" name="mastodon"></wa-icon>
<wa-icon family="brands" name="mastodon"></wa-icon>
</a>
</div>
<div>
<img src="https://img.fortawesome.com/cfa83f3c/app_store.svg" alt="">
<img src="https://img.fortawesome.com/cfa83f3c/google_play.svg" alt="">
</div>
<div class="legal">&#169 2024 All rights reserved.</div>
<div class="legal">&copy; 2024 All rights reserved.</div>
</div>
</div>
<style>
.news-footer {
.container {
max-width: 960px;
margin: auto;