An experiment in cleaning up CSS by just avoiding dis-features and focusing on flexbox and CSS grids.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
fsckcss/public/code/Youtube.html

119 lines
3.8 KiB

<header>
<nav>
<nav-left>
<a><Icon name="menu" /> <Icon name="youtube" /> <logo>Youtube</logo></a>
</nav-left>
<input id="search" placeholder="Search" name="search">
<ul>
<li><Icon name="camera" color="#000" /></li>
<li><Icon name="more-vertical" color="#000" /></li>
<li><Icon name="grid" color="#000" /></li>
<li><button><Icon name="user" /> Sign In</button></li>
</ul>
</nav>
</header>
<main>
<left>
<figure>
<a href="/demos/google" use:link>
<img src="https://via.placeholder.com/800x450?text=Video">
</a>
<figcaption>
<a>#tag</a> <a>#anothertag</a>
<p>Title And Stuff</p>
<video-actions>
<likes>Stats Stats</likes>
<video-buttons>
<Icon name="thumbs-up" color="#999" /> 1.1K
<Icon name="thumbs-down" color="#999" /> 22
<Icon name="corner-up-right" color="#999" /> SHARE
<Icon name="menu" color="#999" /> SAVE
<Icon name="vertical-more" />
</video-buttons>
</video-actions>
</figcaption>
</figure>
<hr>
<promotion>
<nav>
<card>
<img src="https://via.placeholder.com/64x64?text=ME">
<info>
<h4>Zed A. Shaw</h4>
<subs>1 subscriber</subs>
</card>
<button id="subscribe">SUBSCRIBE</button>
</nav>
<content>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur </content>
</promotion>
<hr>
<comments>
<nav>
<span>125 Comments</span> <sort><Icon name="bar-chart" color="var(--sub-color)" /> SORT BY</sort>
</nav>
{#each cards as card}
<card>
<img src="https://via.placeholder.com/64x64?text=Person">
<info>
<h4>Guys</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque</p>
<nav>
<Icon name="thumbs-up" color="var(--sub-color)" /> 233
<Icon name="thumbs-down" color="var(--sub-color)" /> 1
</nav>
<reply><Icon name="chevron-down" /> View replies</reply>
</info>
</card>
{/each}
</comments>
</left>
<right>
{#each cards as card}
<card class="small">
<img src="https://via.placeholder.com/120x80?text=Thumb">
<info>
<h4>Video Thumb Title</h4>
<author>Zed</author>
<views>1.1M views</views>
<date>2 years ago</date>
</info>
</card>
{/each}
<figure>
<a href="/demos/google" use:link>
<img src="https://via.placeholder.com/300x150?text=Advert">
</a>
</figure>
{#each cards as card}
<card>
<img src="https://via.placeholder.com/120x80?text=Thumb">
<info>
<h4>Video Thumb Title</h4>
<author>Zed</author>
<views>1.1M views</views>
<date>2 years ago</date>
</info>
</card>
{/each}
</right>
</main>