Jukka Lampikoski
60065ac9ef
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>
60 lines
2.9 KiB
XML
60 lines
2.9 KiB
XML
<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"
|
||
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>
|