catsocks.github.io/index.html at master · catsocks/catsocks.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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">
    <meta property="og:title" content="catsocks">
    <meta property="og:site_name" content="catsocks">
    <meta property="og:url" content="https://catsocks.github.io">
    <meta property="og:description" content="My personal website with some links.">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://catsocks.github.io/open-graph.png">
    <style>
    body {
        font: 24px monospace;
    }

    #container {
        display: flex;
        align-items: center;
    }

    .absolute-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    img {
        width: 241px;
        margin-right: 2em;
    }

    ul {
        list-style-type: square;
        white-space: nowrap;
    }

    a {
        color: royalblue;
    }

    a:visited {
        color: midnightblue;
    }

    @media all and (max-width: 769px) {
        img {
            width: 160px;
        }

        body {
            font-size: 19px;
        }
    }

    @media all and (max-width: 480px) {
        img {
            width: 125px;
        }

        body {
            font-size: 15px;
        }
    }

    @media (prefers-color-scheme: dark) {
        body {
            background: #111213;
            color: white;
        }

        img {
            filter: invert(1);
        }

        a {
            color: cornflowerblue;
        }

        a:visited {
            color: hsl(240, 63.5%, 58%);
        }
    }
    </style>
    <title>catsocks</title>
</head>
<body>
    <div id="container" class="absolute-center">
        <img src="avatar.png">
        <main>
            <h1>catsocks</h1>
            <ul>
                <li><a href="https://github.com/catsocks">GitHub</a> (<a href="https://gist.github.com/catsocks">gists</a>)</li>
                <li><a href="https://codepen.io/catsocks">CodePen</a></li>
                <li><a href="https://repl.it/@catsocks">Replit</a></li>
                <li><a href="https://twitter.com/catsocks">Twitter</a></li>
            </ul>
        </main>
    </div>
</body>
</html>