blob: ff81161903229d188f69a948482328c9a68caa05 (
plain) (
blame)
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
|
<template>
<router-link tag="div" :to="{ name: 'home' }" class="logo">
The Mana World
<!--<span>Feel the mana power growing inside you</span>-->
<span>A free open source 2D MMORPG in development</span>
</router-link>
</template>
<style scoped>
/*
XXX: I couldn't find the font usued in the original PNG logo so I used something
similar-ish
*/
@import url('https://fonts.googleapis.com/css?family=Carter+One&display=swap');
.logo {
/* this is all relative because our mobile site has to be responsive */
background: url(../assets/logo.svg) no-repeat left top; /* FIXME: the -small logo is fugly */
background-size: 12vw 12vw;
padding: 2vw 0 0 12vw;
font-family: 'Carter One', cursive;
font-size: 7vw;
text-shadow: 0.03ch 0.06ch #070905;
color: #34B039;
height: 11vw;
cursor: pointer;
& span {
display: none;
}
}
@media (min-width: 800px) {
.logo {
background-image: url(../assets/logo.svg);
background-size: 100px 100px;
padding: 10px 0 0 100px;
font-size: 3em;
height: 100px;
position: relative;
& span {
display: inline;
position: absolute;
font-family: Helvetica;
font-size: 0.3em;
top: 72px;
left: 110px;
text-shadow: none;
color: #616260;
font-style: oblique;
}
}
}
@media (max-width: 300px) {
.logo {
background: url(../assets/logo-extrasmall.svg) no-repeat left top;
background-size: 12vw 12vw;
font-weight: bold;
text-shadow: none;
}
}
</style>
|
