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/Twitter.html

132 lines
3.9 KiB

<left>
<Icon name="twitter" color="var(--color)" />
<h4># Explore</h4>
<h4><Icon name="settings" color="var(--color-text)" /> Settings</h4>
</left>
<middle>
<header>
<nav>
<back><Icon name="arrow-left" /></back>
<name>
<h4>Zed A. Shaw, Writer</h4>
<span>7,754 Tweets</span>
</name>
</nav>
</header>
<images>
<figure id="background">
<img src="/header_pic.jpg">
</figure>
<figure id="avatar"> <img src="/profile_pic.jpg">
<button id="follow">Follow</button>
</figure>
</images>
<profile>
<h3>Zed A. Shaw, Writer</h3>
<p>@lzsthw</p>
<p>Blah blah profile stuff.</p>
<p><Icon name="map" size="24" color="var(--color-bg-secondary)" />
Some Place, KY <Icon name="link" size="24" color="var(--color-bg-secondary)" />
<a>learnjsthehardway.org</a>
<Icon name="calendar" size="24" color="var(--color-bg-secondary)" />
Joined Jan, 1999.
</p>
<p><b>167</b> Following <b>10.4k</b> Followers</p>
</profile>
<hr>
<tweets>
{#each tweets as tweet}
<tweet>
<figure id="avatar">
<img alt="Stock photo" src="/profile_pic.jpg">
</figure>
<post>
<h4>Zed A. Shaw, Writer</h4>
<p>Lorem ipsum dolor siThe author of The Hard Way Series published by
Addison/Wesley including Learn Python The Hard Way and many more.
Follow me here for coding tips and book news.t amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam: <br>
<a>quis nostrud exercitation</a> ullamco laboris nisi ut aliquip ex ea
commodo consequat. 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>
<actions>
<Icon size="16" name="message-circle" color="var(--color-inactive)" /> 2
<Icon size="16" name="repeat" color="var(--color-inactive)" /> 1
<Icon size="16" name="heart" color="var(--color-inactive)" /> 12
<Icon size="16" name="upload" color="var(--color-inactive)" />
</actions>
</post>
<Icon name="more-horizontal" />
</tweet>
{/each}
</tweets>
</middle>
<right>
<input placeholder="Search Twitter" />
<section>
<aside id="newperson">
<h3>New to Twitter?</h3>
<p>Sign up now to get your own personalized hate stream!</p>
<button id="signup">Sign Up</button>
</aside>
<aside>
<recent-media>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
</figure>
</recent-media>
</aside>
<aside id="trending">
<h3>You Might Like</h3>
<ul>
<li>Card Person</li>
<li>Card Person</li>
<li>Card Person</li>
</ul>
<a>Show More</a>
</aside>
<aside id="trending">
<h3>What's Happening</h3>
<ul>
<li>News news news.</li>
<li>News news news.</li>
<li>News news news.</li>
<li>News news news.</li>
<li>News news news.</li>
</ul>
</aside>
</section>
</right>