rustfest.ch/index.html at master · RustFestZurich/rustfest.ch · 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
<html>
    <head>
        <meta charset="utf-8" />
        <title>RustFest Zürich 2017-09-30</title>
        <style>
            @font-face { font-family: "ocrb"; src: url("OCRB.ttf"); }
            html, body { display: flex; padding: 6px; background: #084f80 /* #084788 */; background: linear-gradient( 0deg, #084f80, #084788 ); font-family: 'ocrb'; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: break-word; min-height: min-content; }

            html { font-size: 66px; }
            @media screen and (max-width: 640px) {
                html { font-size: 42px; }
            }
            @media screen and (max-width: 480px) {
                html { font-size: 36px; }
            }

            h1, h2, h3, div { color: #fff; text-align: center; }
            h1 { font-size: 1rem; }
            h2 { font-size: 0.8rem; }
            h3 { font-size: 0.7rem; }
            div { font-size: 0.4rem; }
            img { width: 256px; min-width: 32%; }
            a, a:visited { color: #88f; }
            a:hover { color: #bbf; }


            .centering { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;
               display: flex; flex-direction: column;
            align-items: center; align-content: center; justify-content: space-around; }


            #overlayed_organizing {
                position: relative;
                width: 80%; height: 66%;
            }
            canvas { width: 100%; height: 100%; }
            #centered_overlay {
                position: absolute;
                top: calc(50% - 42px); bottom: calc(50% - 42px);
                left: 0px; right: 0px;
            }
        </style>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.7, maximum-scale=2.0, user-scalable=yes"/>
        <meta http-equiv="refresh" content="6; url=http://zurich.rustfest.eu/" />
    </head>
    <body class="centering">
        <h1>RustFest Zürich</h1>
        <h2>Sa 30.09. and Sun 01.10. 2017</h2>

        <div id="overlayed_organizing">
            <canvas></canvas>

            <div id="centered_overlay" class="centering">
                <div class="loader">
                    <span>{</span><div class="text">organizing ...</div><span>}</span>
                </div>
            </div>
        </div>


        <!-- Bottom animation -->
        <style>
.loader {
  color: #fff;

  font-family: 'ocrb', monospace;
  font-weight: bold;
  font-size: 0.7rem;

  opacity: 0.8;

}
.loader  span {
    display: inline-block;
    animation: pulse 0.8s alternate infinite ease-in-out;
}
.loader  :last-child { animation-delay: 0.8s; }

.loader  .text { display: inline; font-size: 0.7em; vertical-align: middle; }

@keyframes pulse {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}
        </style>
        <script src="logo_renderer.js"></script>
        <script>
            let logo = new LogoRenderer('canvas');
        </script>

        <div>
            Flollow our <a href="http://blog.rustfest.eu/" target="_blank">Blog</a>
        </div>
        <div>
            Follow us on <a href="https://twitter.com/RustFest" target="_blank">Twitter</a>
        </div>
    </body>
</html>