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>

logo.svg

@@ -1,17 +1,59 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 252 62" width="252" height="62" role="img" aria-label="tykkää.fi">
-  <!-- Heart -->
-  <path fill="#e07b39" d="M14,5.5 C14,0.5 7.5,-3 3.5,1 C-0.5,-3 -7,0.5 -7,5.5 C-7,12 3.5,20.5 3.5,20.5 C3.5,20.5 14,12 14,5.5Z" transform="translate(9,18)"/>
-  <!-- tykkää -->
-  <text x="36" y="46"
-        font-family="Georgia, 'Times New Roman', serif"
-        font-style="italic"
-        font-size="44"
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 56" width="420" height="56" role="img" aria-label="tykkää.fi">
+  <defs>
+    <!-- Drop shadow for depth like Minecraft text -->
+    <filter id="shadow" x="-5%" y="-5%" width="115%" height="115%">
+      <feDropShadow dx="2" dy="2" stdDeviation="0" flood-color="#3b1a00" flood-opacity="0.7"/>
+    </filter>
+  </defs>
+
+  <!-- Pixel font: each "pixel" is a 5×5 block, letters are 5 wide × 7 tall (+ spacing) -->
+  <!-- Using a simple pixel font definition via rect elements -->
+  <!-- Colors: main text white, shadow dark brown, heart orange accent -->
+
+  <!-- HEART (pixel art) -->
+  <!-- Row 1: .X..X. -->
+  <rect x="5"  y="4"  width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <rect x="15" y="4"  width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <!-- Row 2: XXXXX -->
+  <rect x="0"  y="9"  width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <rect x="5"  y="9"  width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <rect x="10" y="9"  width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <rect x="15" y="9"  width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <rect x="20" y="9"  width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <!-- Row 3: XXXXX -->
+  <rect x="0"  y="14" width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <rect x="5"  y="14" width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <rect x="10" y="14" width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <rect x="15" y="14" width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <rect x="20" y="14" width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <!-- Row 4: .XXX. -->
+  <rect x="5"  y="19" width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <rect x="10" y="19" width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <rect x="15" y="19" width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+  <!-- Row 5: ..X.. -->
+  <rect x="10" y="24" width="4" height="4" fill="#e07b39" filter="url(#shadow)"/>
+
+  <!-- PIXEL TEXT: "tykkää.fi" using a blocky pixel font -->
+  <!-- Scale: each pixel = 5px, letters are 5 pixels wide, gaps = 2px between letters -->
+  <!-- Text starts at x=34 -->
+
+  <!-- Using image-rendering trick: embed pixel font as text with a pixelated web font fallback -->
+  <!-- Actually, simpler: use SVG text with a monospace/pixel-style approach -->
+
+  <text x="34" y="42"
+        font-family="'Courier New', Courier, monospace"
+        font-size="40"
+        font-weight="bold"
         fill="#ffffff"
-        letter-spacing="-0.5">tykkää</text>
-  <!-- .fi -->
-  <text x="196" y="46"
-        font-family="Georgia, 'Times New Roman', serif"
-        font-style="italic"
-        font-size="34"
-        fill="#e8c9a8">.fi</text>
+        filter="url(#shadow)"
+        letter-spacing="1"
+        style="font-variant-numeric: tabular-nums; image-rendering: pixelated;">tykkää</text>
+
+  <text x="228" y="42"
+        font-family="'Courier New', Courier, monospace"
+        font-size="30"
+        font-weight="bold"
+        fill="#e8c9a8"
+        filter="url(#shadow)"
+        letter-spacing="1">.fi</text>
 </svg>