summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorgumi <git@gumi.ca>2019-07-25 16:41:15 -0400
committergumi <git@gumi.ca>2019-07-25 16:41:15 -0400
commit2d33eee26f58e6d15d6e67436f75eea3b9c2a4d3 (patch)
treedd27154263ac093384cda1660aa1f27411cc5173 /src
parent063596761ba9bb97f30dbc53e73d8c58d1ab5f6a (diff)
downloadwebsite-2d33eee26f58e6d15d6e67436f75eea3b9c2a4d3.tar.gz
website-2d33eee26f58e6d15d6e67436f75eea3b9c2a4d3.tar.bz2
website-2d33eee26f58e6d15d6e67436f75eea3b9c2a4d3.tar.xz
website-2d33eee26f58e6d15d6e67436f75eea3b9c2a4d3.zip
use Arial Black (web-safe) while Albertus loads
Diffstat (limited to 'src')
-rw-r--r--src/components/Logo.vue23
1 files changed, 12 insertions, 11 deletions
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index 7cc31f3..3d0bd8f 100644
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -7,13 +7,6 @@
</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');
-*/
-
@font-face {
font-family: "Albertus TMW";
src: url("../assets/fonts/AlbertusTMW.eot");
@@ -27,14 +20,15 @@
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", cursive;
- font-display: fallback;
+ font-family: "Albertus TMW", "Arial Black", "Times New Roman", fantasy;
+ font-display: swap;
font-size: 7vw;
- text-shadow: 0.05ch 0.09ch #070905;
+ 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;
@@ -50,6 +44,7 @@
height: 100px;
margin-top: 20px;
position: relative;
+ text-shadow: 0.05ch 0.09ch #070905;
& span:first-of-type {
position: absolute;
@@ -75,10 +70,16 @@
@media (max-width: 300px) {
.logo {
- background: url(../assets/logo-extrasmall.svg) no-repeat left top;
+ 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>