jukka/tykkaa.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minecraft-pikselilogo: Press Start 2P Google Font

Browse Source 
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>
This commit is contained in:
Jukka Lampikoski
2026-03-08 01:54:11 +02:00
parent 416db62e5c
commit 60065ac9ef
3 changed files with 72 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tykkää.fi</title> <title>tykkää.fi</title>
<link rel="stylesheet" href="style.css" /> <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> </head>
<body> <body>
@@ -12,7 +14,7 @@
<header> <header>
<div class="header-inner"> <div class="header-inner">
<div class="logo"> <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> </div>
<p class="tagline" data-i18n="tagline"></p> <p class="tagline" data-i18n="tagline"></p>
<nav> <nav>

72
logo.svg
View File

@@ -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"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 56" width="420" height="56" role="img" aria-label="tykkää.fi">
<!-- Heart --> <defs>
<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)"/> <!-- Drop shadow for depth like Minecraft text -->
<!-- tykkää --> <filter id="shadow" x="-5%" y="-5%" width="115%" height="115%">
<text x="36" y="46" <feDropShadow dx="2" dy="2" stdDeviation="0" flood-color="#3b1a00" flood-opacity="0.7"/>
font-family="Georgia, 'Times New Roman', serif" </filter>
font-style="italic" </defs>
font-size="44"
<!-- 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" fill="#ffffff"
letter-spacing="-0.5">tykkää</text> filter="url(#shadow)"
<!-- .fi --> letter-spacing="1"
<text x="196" y="46" style="font-variant-numeric: tabular-nums; image-rendering: pixelated;">tykkää</text>
font-family="Georgia, 'Times New Roman', serif"
font-style="italic" <text x="228" y="42"
font-size="34" font-family="'Courier New', Courier, monospace"
fill="#e8c9a8">.fi</text> font-size="30"
font-weight="bold"
fill="#e8c9a8"
filter="url(#shadow)"
letter-spacing="1">.fi</text>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 701 B

After

Width:  |  Height:  |  Size: 2.9 KiB

12
style.css
View File

@@ -53,6 +53,18 @@ header {
.logo-icon { font-size: 2.4rem; } .logo-icon { font-size: 2.4rem; }
.logo-svg { height: 52px; width: auto; display: block; } .logo-svg { height: 52px; width: auto; display: block; }
.pixel-logo {
font-family: 'Press Start 2P', 'Courier New', monospace;
font-size: 20px;
font-weight: normal;
color: #ffffff;
text-shadow: 3px 3px 0px #3b1a00;
letter-spacing: 1px;
line-height: 1;
}
.logo-heart { color: #e07b39; margin-right: 10px; }
.logo-fi { color: #e8c9a8; font-size: 0.72em; }
header h1 { header h1 {
font-size: 2.4rem; font-size: 2.4rem;
color: #fff; color: #fff;