index.html

---
layout: default
title: arp242.net
---

{% include _top.html %}
<div class="center-flex">
	<article id="home">
		<div class="page">
			<h1 id="writings">Writings
				<sup style="text-align: top">
					By: <a href="/tags.html">tag</a>, <a href="/popular.html">popularity</a>
					•
					<a href="feed.xml">RSS</a>
				</sup>
			</h1>

			<ul class="posts fade-height" data-fade-height="400">{% for p in site.posts %}
				{% unless p.archive %}<li{% if p.standout %} class="s"{% endif %}><span>{{ p.date | date_to_string_space }}</span> <a href="{{ p.url }}">{{ p.title }}</a></li>{% endunless %}{% endfor %}
			</ul>
		</div>

		<hr>

		<h1 id="code">Code projects</h1>
		{% include _code.html %}
	</article>
</div>

<style>
.code        { display:flex; flex-wrap:wrap; justify-content:space-around; max-width:54rem; }
#home h2     { font-size:1.3rem; }
h3           { margin:0; width:100%; }
h3 a:after   { content:''; }
h3 a         { font-size:1rem; line-height:0; color:#00f; }
.code span   {  position:absolute; top:.4em; right:.8em; }
.code p      { margin:0; }
.code div    { position:relative; display:flex; flex-wrap:wrap; align-content:flex-start;
               width:17.5rem; min-height:2rem; margin-bottom:1em; padding:.4em .8em; background:#fff; hyphens:auto; }
div.blank    { background:transparent; border:none; }

@media (max-width:60em) { .code div    { width:45%;  } }
@media (max-width:40em) { .code div    { width:100%; margin-bottom:-1px; }
                          .code .blank { display:none; }
                          h3           { min-width: 12rem; } }
#home h1#code, #home h2  { margin-left:1rem; }
.more         { position:relative; width:100%; text-align:center; padding-top:4rem; z-index:10; margin-top:-5rem;
                background-image:linear-gradient(to bottom, transparent, #fff 75%); }
.code + .more { margin-top:-3.5rem; background-image:linear-gradient(to bottom, transparent, #eee 75%); }

@media (min-width:46rem) {
.code div:nth-child(4n+1) { clip-path:polygon(0px 0px, 22.47% 5.08%, 88.92% -3.82%, 98.17% 4.56%, 94.82% 62.39%, 95.36% 101.01%, 34.99% 91.65%, 15.36% 94.15%, 0.86% 100%); }
.code div:nth-child(4n+2) { clip-path:polygon(0px 19px, 8.9% 5.08%, 43.21% 9.28%, 98.17% 4.56%, 94.82% 62.39%, 95.36% 101.01%, 2.13% 95.68%, -1.43% 72.98%, 1.93% 47.58%); }
.code div:nth-child(4n+3) { clip-path:polygon(0px 0px, 55.69% 14.15%, 68.21% 5.25%, 98.17% 4.56%, 96.5% 42.45%, 94.10% 72.41%, 95.36% 101.01%, 85.35% 93.67%, 43.58% 109.27%, 0.86% 100%); }
.code div:nth-child(4n+4) { clip-path:polygon(0px 0px, 55.68% -0.39%, 99.99% -1.48%, 96.75% 38.94%, 94.82% 88.17%, 86.07% 101.79%, 3.92% 96.34%, -1.07% 36.33%, 1.93% 17.97%); }
}
</style>
<script>
	document.querySelectorAll('.fade-height').forEach((elem) => {
		let h = elem.clientHeight,
			f = parseInt(elem.dataset.fadeHeight) || 200
		if (f >= h)
			return
		elem.style.height = f + 'px'
		elem.style.overflow = 'hidden'
		elem.style.transition = 'height 400ms'

		let d = document.createElement('div'),
			a = document.createElement('a')
		a.innerText = 'More…'
		a.href = '#'
		d.className = 'more'
		a.addEventListener('click', (e) => {
			e.preventDefault()
			d.parentNode.removeChild(d)
			elem.style.height = h + 'px'
			setTimeout(() => {
				elem.style.height = ''
				elem.style.overflow = ''
			}, 400)
		})
		d.appendChild(a)
		elem.insertAdjacentElement('afterend', d)
	})
</script>