Minecraft-pikselilogo: Press Start 2P Google Font

Vaihdetaan SVG-img-lähestymistapa HTML+CSS-lähestymistapaan, jolloin fontti latautuu luotettavasti. SVG:nä ladattu kuva ei voi käyttää sivun ulkoisia fontteja. - index.html: lisätty Press Start 2P Google Fonts link; logo-h1 käyttää pixel-logo-luokkaa (♥tykkää.fi) - style.css: .pixel-logo fontti+koko+varjo, .logo-heart oranssi, .logo-fi cream-väri + pienempi koko Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-08 01:54:11 +02:00
parent 416db62e5c
commit 60065ac9ef
3 changed files with 72 additions and 16 deletions
--- a/index.html
+++ b/index.html
@@ -5,6 +5,8 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>tykkää.fi</title>
  <link rel="stylesheet" href="style.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
 </head>
 <body>

@@ -12,7 +14,7 @@
  <header>
    <div class="header-inner">
      <div class="logo">
-        <img src="logo.svg" alt="tykkää.fi" class="logo-svg" />
+        <h1 class="pixel-logo"><span class="logo-heart">♥</span>tykkää<span class="logo-fi">.fi</span></h1>
      </div>
      <p class="tagline" data-i18n="tagline"></p>
      <nav>