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

44 lines
1.0 KiB

<header>
<nav>
<left>
<logo><Icon name="pinterest" color="var(--color)" /> Pinterest</logo>
<a>Today</a>
<a>Explore</a>
</left>
<input placeholder="Search">
<ul>
<li><button>Log In</button></li>
<li><button id="signup">Sign Up</button></li>
</ul>
</nav>
</header>
{#if !thumbnail}
<profile>
<info>
<h1>Vincent van Gogh</h1>
<p>Collection by A Person</p>
<p><b>420</b> Pins • <b>3.59k</b> Followers</p>
<p>"I dream my painting and I paint my dream." ~ Vincent van Gogh
</info>
<figure>
<img alt="Zed's Face" src="https://via.placeholder.com/128x128?text=Zed's Face">
</figure>
</profile>
<pins>
{#each lanes as lane}
<lane>
{#each random_sample(pin_sizes, 10) as height}
<figure>
<img alt="Zed's Face" src="https://via.placeholder.com/240x{height}?text=Art240x{height}">
<figcaption>Something about Van Gogh {height} high.</figcaption>
</figure>
{/each}
</lane>
{/each}
</pins>
{/if}