summaryrefslogtreecommitdiff
path: root/src/components/Logo.vue
blob: e3fa27fc70706d8f80a2e150655fb493965f83f6 (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
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
<template>
	<router-link tag="div" :to="{ name: 'home' }" class="logo">
		<span>The </span>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>
@font-face {
	font-family: "Albertus TMW";
	font-display: swap;
	src: url("../assets/fonts/AlbertusTMW.eot");
	src: url("../assets/fonts/AlbertusTMW.woff2") format("woff2"),
		url("../assets/fonts/AlbertusTMW.woff") format("woff"),
		url("../assets/fonts/AlbertusTMW.ttf") format("truetype");
}

.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: "Albertus TMW", "Arial Black", "Times New Roman", fantasy;
	font-size: 7vw;
	text-shadow: 0.03ch 0.07ch #070905;
	color: #34B039;
	height: 11vw;
	cursor: pointer;
	z-index: 200;
	max-width: calc(90% - 15vw);

	& span:last-of-type {
		display: none;
	}
}

@media (min-width: 800px) {
	.logo {
		background-image: url(../assets/logo.svg);
		background-size: 120px 120px;
		padding: 30px 0 0 125px;
		font-size: 4em;
		height: 100px;
		margin-top: 20px;
		position: relative;
		text-shadow: 0.05ch 0.09ch #070905;

		&::selection {
			text-shadow: none;
		}

		& span:first-of-type {
			position: absolute;
			left: 125px;
			top: 0;
			font-size: 0.6em;
		}

		& span:last-of-type {
			display: inline;
			position: absolute;
			font-family: Helvetica;
			font-size: 0.2em;
			letter-spacing: 2px;
			top: 99px;
			left: 128px;
			text-shadow: none;
			color: #616260;
			font-style: oblique;
		}
	}
}

@media (max-width: 300px) {
	.logo {
		background-image: url(../assets/logo-extrasmall.svg);
		background-size: 12vw 12vw;
		font-weight: bold;
		text-shadow: none;
	}
}

@media (min-width: 1100px) {
	.logo {
		max-width: 100%;
	}
}
</style>