1
1
< html >
2
2
< head >
3
3
< meta charset ="utf-8 "/>
4
- <!-- Stylesheets -->
5
- <!-- <link rel="stylesheet" href="css/app.min.css"/> -->
6
4
< style type ="text/css ">
7
5
body {
8
6
margin : 0 ;
9
- padding : 0 ;
7
+ padding : 16 px ;
10
8
overflow : hidden;
11
9
color : # 737f9d ;
10
+ font-family : Roboto, Arial;
11
+ /* border: 1px solid blue; */
12
+ }
13
+
14
+ @font-face {
15
+ font-family : Roboto;
16
+ src : url ("fonts/RobotoCondensed-Light.ttf" );
17
+ }
18
+
19
+ @font-face {
20
+ font-family : Roboto Bold;
21
+ src : url ("fonts/RobotoCondensed-Bold.ttf" );
22
+ }
23
+
24
+
25
+ .wrapper {
26
+ display : grid;
27
+ align-items : center;
28
+ justify-content : center;
29
+ width : 100% ;
30
+ height : 100% ;
12
31
}
13
32
14
33
.splash {
15
- position : absolute;
16
34
display : grid;
17
- grid-template-rows : auto min-content;
18
- gap : 16px ;
35
+ grid-template-columns : 300px min-content;
19
36
box-sizing : border-box;
20
- width : 90% ;
21
- height : 90% ;
22
- margin : 5% ;
23
- padding : 32px ;
24
-
25
37
border-radius : 8px ;
26
- background-color : # 1e2229 ;
27
- box-shadow : 0px 0px 16px rgba (0 , 0 , 0 , 0.5 );
38
+ overflow : hidden;
39
+ box-shadow : 0px 4px 8px rgba (0 , 0 , 0 , 0.3 ),
40
+ 0px 0px 32px rgba (0 , 0 , 0 , 0.4 );
28
41
}
29
42
30
- .splash img {
43
+ .splash .logo {
44
+ padding : 16px ;
45
+ background : # 1e2229d3 ;
46
+ border-top : 1px solid # 545d7352 ;
47
+ box-shadow : 0px 0px 32px # 2c3546a4 inset;
48
+ }
49
+
50
+ .splash .logo img {
31
51
width : 100% ;
32
52
}
33
53
34
- .splash .sub {
35
- font-size : 14pt ;
36
- font-family : Roboto, Arial;
37
- text-align : center;
54
+ .splash .version {
55
+ display : grid;
56
+ grid-template-columns : min-content min-content;
57
+ justify-content : center;
58
+
59
+ color : # 1e2229 ;
60
+ white-space : nowrap;
61
+ font-size : 110px ;
62
+ line-height : 1em ;
63
+ letter-spacing : -3px ;
64
+ padding-left : 8px ;
65
+ padding-right : 16px ;
66
+
67
+ background : # fc0 ;
68
+ }
69
+
70
+ .splash .version # mainVersion ,
71
+ .splash .version # patchVersion {
72
+ display : flex;
73
+ align-items : center;
74
+ }
75
+ .splash .version # mainVersion {
76
+ font-weight : bold;
38
77
}
39
78
</ style >
40
79
</ head >
41
80
42
81
43
82
< body >
44
- < div class ="splash ">
45
- < img src ="img/LDtk.svg "/>
46
- < div class ="sub "> Loading...</ div >
83
+ < div class ="wrapper ">
84
+ < div class ="splash ">
85
+
86
+ < div class ="logo ">
87
+ < img src ="img/LDtk-simple.svg "/>
88
+ </ div >
89
+
90
+ < div class ="version ">
91
+ < span id ="mainVersion "> ???</ span >
92
+ < span id ="patchVersion "> ???</ span >
93
+ </ div >
94
+
95
+ </ div >
47
96
</ div >
97
+
98
+ < script type ="text/javascript ">
99
+ // Write version from args
100
+ window . location . search
101
+ . substr ( 1 )
102
+ . split ( "&" )
103
+ . forEach ( function ( item ) {
104
+ if ( item . split ( "=" ) [ 0 ] == "patchVersion" )
105
+ document . getElementById ( "patchVersion" ) . innerHTML = item . split ( "=" ) [ 1 ] ;
106
+ if ( item . split ( "=" ) [ 0 ] == "mainVersion" )
107
+ document . getElementById ( "mainVersion" ) . innerHTML = item . split ( "=" ) [ 1 ] ;
108
+ } ) ;
109
+ </ script >
48
110
</ body >
49
111
</ html >
0 commit comments