GameCult/repixelizer
Watch
9
0
Fork
You've already forked repixelizer
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adopt chunky monogram logo

Browse source
This commit is contained in:
Meta Vens 2026-04-25 04:46:12 +01:00
commit 136b2e4af8
4 changed files with 30 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/repixelizer/gui_static/index.html
View file

@ -14,7 +14,7 @@
<div class="brand">
<div class="brand-lockup">
<div class="brand-emblem" aria-hidden="true">
<span class="brand-emblem-core"></span>
<img class="brand-emblem-art" src="./logos/repixelizer-logo-monogram.svg" alt="" />
</div>
<div class="copy-stack">
<p class="eyebrow">Live Pipeline</p>

2
src/repixelizer/gui_static/logo-preview.html
View file

@ -86,7 +86,7 @@
<div class="logo-meta">
<p class="eyebrow">Option 1</p>
<h2>Snapping R</h2>
<p class="logo-notes">Chunky monogram built from lattice cells, with a faint ghost trail on the left so it looks like the machine hauled it into alignment.</p>
<p class="logo-notes">Chunkier monogram pulled from the reference glyph, with the phase ghost shoved to the right where it reads as drift instead of regret.</p>
</div>
<img src="./logos/repixelizer-logo-monogram.svg" alt="Snapping R monogram logo concept" />
<div class="logo-row">

48
src/repixelizer/gui_static/logos/repixelizer-logo-monogram.svg
View file

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-labelledby="title desc">
<title id="title">Repixelizer monogram logo concept</title>
<desc id="desc">A chunky pixel-art R monogram snapping into alignment on a dark square badge.</desc>
<desc id="desc">A chunky pixel-art R monogram with a right-shifted phase ghost on a dark square badge.</desc>
<defs>
<filter id="goldGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="3" result="blur" />
@ -13,13 +13,13 @@
<path d="M 12 0 L 0 0 0 12" fill="none" stroke="#ffd84a" stroke-opacity="0.08" stroke-width="1" />
</pattern>
<style>
svg { shape-rendering: crispEdges; }
.badge { fill: #0a1b2f; stroke: #ffd84a; stroke-width: 6; }
.rim { fill: none; stroke: #1d4d75; stroke-width: 6; }
.grid { fill: url(#grid); opacity: 0.32; }
.ghost { fill: #8fe2c8; opacity: 0.34; }
.tile-main { fill: #ffe48a; }
.tile-accent { fill: #ffb72a; }
.tile-core { fill: #fff7cf; }
.ghost { fill: #8fe2c8; opacity: 0.28; }
.glyph-main { fill: #fff4bf; }
.glyph-accent { fill: #ffb72a; }
</style>
</defs>
@ -28,30 +28,20 @@
<rect class="grid" x="34" y="34" width="188" height="188" rx="18" />
<g filter="url(#goldGlow)">
<rect class="ghost" x="52" y="60" width="22" height="22" />
<rect class="ghost" x="52" y="84" width="22" height="22" />
<rect class="ghost" x="40" y="108" width="22" height="22" />
<rect class="ghost" x="52" y="132" width="22" height="22" />
<rect class="ghost" x="64" y="156" width="22" height="22" />
<g transform="translate(18 0)">
<rect class="ghost" x="56" y="44" width="32" height="168" />
<rect class="ghost" x="56" y="44" width="112" height="32" />
<rect class="ghost" x="144" y="44" width="56" height="84" />
<rect class="ghost" x="56" y="124" width="112" height="32" />
<rect class="ghost" x="112" y="156" width="56" height="32" />
<rect class="ghost" x="144" y="184" width="56" height="28" />
</g>
<rect class="tile-main" x="72" y="60" width="22" height="22" />
<rect class="tile-main" x="72" y="84" width="22" height="22" />
<rect class="tile-main" x="72" y="108" width="22" height="22" />
<rect class="tile-main" x="72" y="132" width="22" height="22" />
<rect class="tile-main" x="72" y="156" width="22" height="22" />
<rect class="tile-main" x="72" y="180" width="22" height="22" />
<rect class="tile-main" x="96" y="60" width="22" height="22" />
<rect class="tile-main" x="120" y="60" width="22" height="22" />
<rect class="tile-accent" x="144" y="60" width="22" height="22" />
<rect class="tile-main" x="144" y="84" width="22" height="22" />
<rect class="tile-main" x="96" y="108" width="22" height="22" />
<rect class="tile-core" x="120" y="108" width="22" height="22" />
<rect class="tile-main" x="144" y="108" width="22" height="22" />
<rect class="tile-main" x="96" y="132" width="22" height="22" />
<rect class="tile-accent" x="120" y="156" width="22" height="22" />
<rect class="tile-main" x="144" y="180" width="22" height="22" />
<rect class="glyph-main" x="56" y="44" width="32" height="168" />
<rect class="glyph-main" x="56" y="44" width="112" height="32" />
<rect class="glyph-accent" x="144" y="44" width="56" height="84" />
<rect class="glyph-main" x="56" y="124" width="112" height="32" />
<rect class="glyph-main" x="112" y="156" width="56" height="32" />
<rect class="glyph-accent" x="144" y="184" width="56" height="28" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Before After
Before After

46
src/repixelizer/gui_static/styles.css
View file

@ -312,45 +312,17 @@ p {
width: 132px;
height: 132px;
flex: 0 0 auto;
position: relative;
display: grid;
place-items: center;
background:
linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 6px, transparent 6px 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 6px, transparent 6px 100%),
linear-gradient(180deg, #f9df6b, #ffae1a 58%, #d37d12);
border: 4px solid rgba(8, 36, 62, 0.9);
box-shadow:
inset 0 0 0 4px rgba(255, 243, 181, 0.45),
0 0 18px rgba(255, 216, 74, 0.28);
display: block;
filter:
drop-shadow(0 0 18px rgba(255, 216, 74, 0.22))
drop-shadow(0 0 8px rgba(8, 36, 62, 0.35));
}
.brand-emblem::before,
.brand-emblem::after {
content: "";
position: absolute;
background: rgba(8, 36, 62, 0.92);
}
.brand-emblem::before {
inset: 20px 48px;
clip-path: polygon(50% 0%, 100% 26%, 100% 74%, 50% 100%, 0% 74%, 0% 26%);
}
.brand-emblem::after {
inset: 48px 20px;
clip-path: polygon(0% 50%, 26% 0%, 74% 0%, 100% 50%, 74% 100%, 26% 100%);
}
.brand-emblem-core {
width: 28px;
height: 28px;
position: relative;
z-index: 1;
background: #fff1b6;
box-shadow:
0 0 0 6px rgba(8, 36, 62, 0.94),
0 0 18px rgba(255, 216, 74, 0.38);
.brand-emblem-art {
width: 100%;
height: 100%;
display: block;
image-rendering: pixelated;
}
.brand-tag {