articles.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ZY's articles</title>
    <style>
        @import url('https://rsms.me/inter/inter.css');

        body {
            font-family: 'Inter', Helvatica, Arial, sans-serif;
            text-rendering: optimizeLegibility;

            font-size: 85%;
            margin: auto;
            text-align: justify;
            color: #1b1b1c;
        }

        .container {
            display: grid;
            width: auto;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-template-rows: repeat(auto-fill, minmax(200px, 1fr));
            grid-gap: 3em;
            list-style-type: none;
            margin: 2em;
            padding: 0;
        }

        @media (max-width: 1000px) {
            .container {
                grid-template-columns: .5fr 1fr 1fr;
            }
        }

        @media (max-width: 750px) {
            .container {
                display: flex;
                flex-direction: column;
                padding: 1.5rem;
            }

            header {
                height: 11rem;
            }

            a:not(:first-of-type) {
                padding-top: 2em;
            }
        }

        .container header {
            grid-column: 2 / -1;
            display: flex;
            align-items: center;
        }

        .empty {
            grid-row: 2 / 22;
            height: auto;
            width: auto;
        }

        header#archive {
            line-height: 100px;
            margin-top: calc(100px - 1rem);
        }

        a {
            text-decoration: none;
            display: grid;
            padding-bottom: 1em;
            border-bottom: 1px solid #1b1b1c;
            color: #1b1b1c;
        }

        a:hover {
            background-color: yellow;
            border-bottom: 1px dotted #1b1b1c;
        }

        @-webkit-keyframes spin {
            0%   { transform: rotateY(-180deg) }
            100% { transform: rotateY(0deg) }
        }
        @-moz-keyframes spin {
            0%   { transform: rotateY(-180deg) }
            100% { transform: rotateY(0deg) }
        }
        @-o-keyframes spin {
            0%   { transform: rotateY(-180deg) }
            100% { transform: rotateY(0deg) }
        }
        @keyframes spin {
            0%   { transform: rotateY(-180deg) }
            100% { transform: rotateY(0deg) }
        }
        /* fade */
        @-webkit-keyframes fade {
            0%   { opacity: 0 }
            66%  { opacity: 0 }
            100% { opacity: 1 }
        }
        @-moz-keyframes fade {
            0%   { opacity: 0 }
            66%  { opacity: 0 }
            100% { opacity: 1 }
        }
        @-o-keyframes fade {
            0%   { opacity: 0 }
            66%  { opacity: 0 }
            100% { opacity: 1 }
        }
        @keyframes fade {
            0%   { opacity: 0 }
            66%  { opacity: 0 }
            100% { opacity: 1 }
        }

        .ani header#archive {
            animation: fade 2.4s 1 ease backwards;
        }

        .ani a {
            animation: spin 1.2s 1 ease backwards;
            transform-style: preserve-3d;
            transform-origin: -50vw 0;
        }

        .ani a:nth-of-type(1) { animation-delay: 80ms }
        .ani a:nth-of-type(2) { animation-delay: 160ms }
        .ani a:nth-of-type(3) { animation-delay: 240ms }
        .ani a:nth-of-type(4) { animation-delay: 320ms }
        .ani a:nth-of-type(5) { animation-delay: 400ms }
        .ani a:nth-of-type(6) { animation-delay: 480ms }
        .ani a:nth-of-type(7) { animation-delay: 560ms }
        .ani a:nth-of-type(8) { animation-delay: 640ms }
        .ani a:nth-of-type(9) { animation-delay: 720ms }
        .ani a:nth-of-type(10) { animation-delay: 800ms }
        .ani a:nth-of-type(11) { animation-delay: 880ms }
        .ani a:nth-of-type(12) { animation-delay: 960ms }
        .ani a:nth-of-type(13) { animation-delay: 1020ms }
    </style>
    <script>
        (function () {
            document.addEventListener("DOMContentLoaded", function () {
                document.body.classList.add('ani');
            });
        }).call(this);
    </script>
</head>

<body>
    <div class="container">
        <header>
            zypeh.github.io/<strong>articles</strong>
        </header>
        <div class="empty"></div>
        <!-- <a href="/articles/write-yourself-a-goroutine-pool.html">
            01<span style="color: #AAA">DRAFT</span><br /><br />
            Write yourself a Goroutine pool
        </a> -->
        <a href="/articles/understanding-category-theory-for-haskeller.html">
            01<br /><br />
            Understanding category<br />theory for haskeller
        </a>
        <a href="/articles/ch-monetary-value.html">
            02<br /><br />
            浅谈货币类型的存储方式
        </a>
        <a href="/articles/what I try to make these years.html">
            03<br /><br />
            What I try to make these years
        </a>
        <a href="articles/learning-language design.html">
            04<br/><br />
            Learning, Language Design
        </a>
        <header id="archive">
            <strong>Archive</strong> - could be outdated, ported from github.
        </header>
        <a href="/articles/sbcl-setup-gentoo.html">
            01<br /><br />
            SBCL setup in Gentoo
        </a>
        <a href="/articles/ch-shellcode-note-01.html">
            02<br /><br />
            Shellcode 手册 01
        </a>
        <a href="/articles/ch-shellcode-note-02.html">
            03<br /><br />
            Shellcode 手册 02 <br />(Incomplete)
        </a>
        <a href="/articles/ch-polymorphic-malware.html">
            04<br /><br />
            Polymorhic 病毒的研究笔记<br/>(Incomplete)
        </a>
        <a href="https://github.com/zypeh/zypeh.github.io/blob/archive/21%20%E4%B8%96%E7%BA%AA%20C%20%E8%AF%AD%E8%A8%80%E6%8C%87%E5%8D%97%20-%20%E5%89%8D%E8%A8%80.md">
            05<br /><br />
            21 世纪 C 语言指南 - 前言<br/>(Github)
        </a>
        <a href="https://github.com/zypeh/zypeh.github.io/blob/archive/21%20%E4%B8%96%E7%BA%AA%20C%20%E8%AF%AD%E8%A8%80%E6%8C%87%E5%8D%97%20-%20%E7%BB%93%E6%9E%84.md">
            06<br /><br />
            21 世纪 C 语言指南 - 结构<br/>(Github)
        </a>
        <a href="https://github.com/zypeh/zypeh.github.io/blob/archive/21%20%E4%B8%96%E7%BA%AA%20C%20%E8%AF%AD%E8%A8%80%E6%8C%87%E5%8D%97%20-%20%E7%BB%93%E6%9E%84.md">
            07<br /><br />
            21 世纪 C 语言指南 - 结构
        </a>
        <a href="https://github.com/zypeh/zypeh.github.io/blob/archive/Rust%20%E5%AD%A6%E4%B9%A0%E6%9D%82%E8%AE%B0%20-%20%E7%B1%BB%E5%9E%8B%E4%B8%8E%E7%B1%BB%E5%9E%8B%E4%B9%8B%E9%97%B4%E7%9A%84%E5%85%B3%E7%B3%BB.md">
            08<br /><br />
            Rust 学习杂记 - 类型与类型之间的关系<br />(Github)
        </a>
        <a href="https://github.com/zypeh/zypeh.github.io/blob/archive/Rust%20%E5%AD%A6%E4%B9%A0%E6%9D%82%E8%AE%B0%20-%20%E8%AF%AD%E6%B3%95%E4%B8%8E%E8%AF%AD%E4%B9%89.md">
            09<br /><br />
            Rust 学习杂记 - 语法与语义<br />(Incomplete, Github)
        </a>
        <a href="/articles/ch-function-explained.html">
            10<br /><br />
            浅谈函数
        </a>
    </div>
</body>

</html>