monostable.github.io/index.html at master · monostable/monostable.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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>monostable.co.uk</title>
        <style type="text/css">
            a {
                color: #2a2a2a;
                text-decoration: none;
            }
            a:hover {
                text-decoration: underline;
            }
            a:visited {
                color: #686868;
            }
            body {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
                    "Helvetica Neue", sans-serif;
            }
            table {
                font-size: 15px;
                width: 400px;
                text-align: center;
            }
            .linkBox {
                margin: 10px;
                font-size: 24px;
                padding: 0.5em;
            }
            .tilde {
                font-size: 24px;
                margin: 10px;
                padding: 0.5em;
            }

            .linkBoxContainer {
                display: flex;
                justify-content: space-around;
            }

            @media (max-width: 800px) {
                .linkBoxContainer {
                    flex-wrap: wrap;
                }
                .tilde {
                    display: none;
                }
                .linkBox {
                    border: 1px dashed;
                }
            }
        </style>
        <link href="favicon.png" rel="shortcut icon" type="image/png" />
    </head>
    <body>
        <div
            style="
                height: 95vh;
                display: flex;
                justify-content: center;
                align-items: center;
            "
        >
            <div style="max-width: 80%">
                <div class="linkBoxContainer">
                    <a href="https://github.com/kasbah"
                        ><img
                            alt="monostable monster logo"
                            style="max-width: 100%"
                            src="banner.png"
                    /></a>
                </div>
                <div class="linkBoxContainer">
                    <div class="linkBox">
                        <a href="https://blog.monostable.co.uk">blog</a>
                    </div>
                    <div class="tilde">~</div>
                    <div class="linkBox">
                        <a href="https://twitter.com/kaspar_e">twitter</a>
                    </div>
                    <div class="tilde">~</div>
                    <div class="linkBox">
                        <a href="mailto:kaspar@monostable.co.uk">email</a>
                    </div>
                    <div class="tilde">~</div>
                    <div class="linkBox">
                        <a href="https://github.com/kasbah">github</a>
                    </div>
                </div>
                <div class="linkBoxContainer">
                    <div class="linkBox" style="margin-left: 0">
                        <a href="https://kitspace.org">kitspace.org</a>
                    </div>
                    <div class="tilde">~</div>
                    <div class="linkBox">
                        <div>
                            <a href="https://openflexure.org"
                                >openflexure.org</a
                            >
                        </div>
                    </div>
                    <div class="tilde">~</div>
                    <div class="linkBox">
                        <a href="https://reseq.hackteria.org"
                            >reseq.hackteria.org</a
                        >
                    </div>
                </div>
                <div class="linkBoxContainer">
                    <div class="linkBox">
                        <a href="https://generative.monostable.co.uk"
                            >generative art</a
                        >
                    </div>
                    <div class="linkBox">
                        <a href="presentations/">presentations</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>