mirror of
https://mgit.msbls.de/m/gitea-custom.git
synced 2026-02-06 00:02:08 +00:00
feat: redesign logo options as top-down git trees forming 'm'
A — Git Tree: branches fork from left trunk, feature branch detail B — Bold Tree: thicker strokes, smooth curves, minimal nodes C — Full Graph: realistic git log with many commits and a merge
This commit is contained in:
m
@@ -96,7 +96,7 @@
|
||||
|
||||
<div class="mgit-designs">
|
||||
|
||||
<!-- Design A: Classic Three-Branch -->
|
||||
<!-- Design A: Top-down git tree forming 'm' -->
|
||||
<div class="mgit-design-card">
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
@@ -106,36 +106,54 @@
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="200" height="200" fill="url(#gradA)" rx="40"/>
|
||||
<!-- Three branches forming 'm': left stem, middle peak, right peak -->
|
||||
<g stroke="#ffffff" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none">
|
||||
<!-- Left vertical (stem of m) -->
|
||||
<line x1="50" y1="60" x2="50" y2="155"/>
|
||||
<!-- First arch: left to middle -->
|
||||
<path d="M50,80 C50,50 100,50 100,80"/>
|
||||
<!-- Middle vertical -->
|
||||
<line x1="100" y1="80" x2="100" y2="155"/>
|
||||
<!-- Second arch: middle to right -->
|
||||
<path d="M100,80 C100,50 150,50 150,80"/>
|
||||
<!-- Right vertical -->
|
||||
<line x1="150" y1="80" x2="150" y2="155"/>
|
||||
<!--
|
||||
Real git tree flowing TOP to BOTTOM:
|
||||
- Start node at top-left
|
||||
- Main trunk goes down on the left
|
||||
- First branch forks right, goes down as middle leg
|
||||
- Second branch forks right from middle, goes down as right leg
|
||||
Three vertical legs = the three strokes of 'm'
|
||||
-->
|
||||
<g stroke="#ffffff" stroke-width="6" stroke-linecap="round" fill="none">
|
||||
<!-- Left trunk: straight down -->
|
||||
<line x1="48" y1="42" x2="48" y2="158"/>
|
||||
<!-- First fork: curves from left trunk to middle leg -->
|
||||
<path d="M48,68 C58,68 78,58 88,68 L88,68"/>
|
||||
<!-- Middle leg: down from fork -->
|
||||
<line x1="88" y1="68" x2="88" y2="158"/>
|
||||
<!-- Second fork: curves from middle to right leg -->
|
||||
<path d="M88,95 C98,95 118,85 128,95"/>
|
||||
<!-- Right leg: down from second fork -->
|
||||
<line x1="128" y1="95" x2="128" y2="158"/>
|
||||
<!-- Bonus: a small feature branch off the right -->
|
||||
<path d="M128,125 C138,125 150,118 156,108"/>
|
||||
</g>
|
||||
<!-- Commit nodes -->
|
||||
<g fill="#ffffff">
|
||||
<circle cx="50" cy="155" r="8"/>
|
||||
<circle cx="100" cy="155" r="8"/>
|
||||
<circle cx="150" cy="155" r="8"/>
|
||||
<circle cx="50" cy="80" r="6"/>
|
||||
<circle cx="100" cy="80" r="6"/>
|
||||
<circle cx="150" cy="80" r="6"/>
|
||||
<circle cx="75" cy="56" r="5"/>
|
||||
<circle cx="125" cy="56" r="5"/>
|
||||
<!-- Root commit -->
|
||||
<circle cx="48" cy="42" r="7"/>
|
||||
<!-- Fork points on trunk -->
|
||||
<circle cx="48" cy="68" r="6"/>
|
||||
<circle cx="48" cy="110" r="5"/>
|
||||
<!-- Middle branch start + commits -->
|
||||
<circle cx="88" cy="68" r="6"/>
|
||||
<circle cx="88" cy="95" r="6"/>
|
||||
<!-- Right branch start + commit -->
|
||||
<circle cx="128" cy="95" r="6"/>
|
||||
<circle cx="128" cy="125" r="5"/>
|
||||
<!-- Feature branch tip -->
|
||||
<circle cx="156" cy="108" r="5"/>
|
||||
<!-- Bottom endpoints (HEAD of each branch) -->
|
||||
<circle cx="48" cy="158" r="7"/>
|
||||
<circle cx="88" cy="158" r="7"/>
|
||||
<circle cx="128" cy="158" r="7"/>
|
||||
</g>
|
||||
</svg>
|
||||
<h3>A — Classic Branch</h3>
|
||||
<p>Clean arches with commit nodes</p>
|
||||
<h3>A — Git Tree</h3>
|
||||
<p>Top-down branches forking into 'm'</p>
|
||||
</div>
|
||||
|
||||
<!-- Design B: Flowing Merge -->
|
||||
<!-- Design B: Tighter tree, thicker lines, fewer nodes -->
|
||||
<div class="mgit-design-card">
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
@@ -145,25 +163,39 @@
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="200" height="200" fill="url(#gradB)" rx="40"/>
|
||||
<!-- Flowing 'm' from continuous branch paths -->
|
||||
<g stroke="#ffffff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none">
|
||||
<!-- Single continuous path forming 'm' -->
|
||||
<!-- Left stem up, arch over, down, arch over, down -->
|
||||
<path d="M45,155 L45,75 C45,45 95,45 100,75 L100,155"/>
|
||||
<path d="M100,75 C100,45 155,45 155,75 L155,155"/>
|
||||
<!--
|
||||
Bolder version: thicker strokes, smoother curves,
|
||||
only key nodes shown
|
||||
-->
|
||||
<g stroke="#ffffff" stroke-width="8" stroke-linecap="round" fill="none">
|
||||
<!-- Left trunk -->
|
||||
<line x1="45" y1="40" x2="45" y2="160"/>
|
||||
<!-- First fork: smooth curve to middle -->
|
||||
<path d="M45,72 C65,62 80,62 100,72"/>
|
||||
<!-- Middle leg -->
|
||||
<line x1="100" y1="72" x2="100" y2="160"/>
|
||||
<!-- Second fork: smooth curve to right -->
|
||||
<path d="M100,100 C120,90 135,90 155,100"/>
|
||||
<!-- Right leg -->
|
||||
<line x1="155" y1="100" x2="155" y2="160"/>
|
||||
</g>
|
||||
<!-- Minimal commit nodes at endpoints only -->
|
||||
<!-- Key nodes only -->
|
||||
<g fill="#ffffff">
|
||||
<circle cx="45" cy="155" r="9"/>
|
||||
<circle cx="100" cy="155" r="9"/>
|
||||
<circle cx="155" cy="155" r="9"/>
|
||||
<circle cx="45" cy="40" r="9"/>
|
||||
<circle cx="45" cy="72" r="7"/>
|
||||
<circle cx="100" cy="72" r="7"/>
|
||||
<circle cx="100" cy="100" r="7"/>
|
||||
<circle cx="155" cy="100" r="7"/>
|
||||
<circle cx="45" cy="160" r="9"/>
|
||||
<circle cx="100" cy="160" r="9"/>
|
||||
<circle cx="155" cy="160" r="9"/>
|
||||
</g>
|
||||
</svg>
|
||||
<h3>B — Smooth Flow</h3>
|
||||
<p>Continuous branches, minimal nodes</p>
|
||||
<h3>B — Bold Tree</h3>
|
||||
<p>Thicker branches, key nodes only</p>
|
||||
</div>
|
||||
|
||||
<!-- Design C: Network Graph -->
|
||||
<!-- Design C: Realistic git log with extra commits -->
|
||||
<div class="mgit-design-card">
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
@@ -173,41 +205,54 @@
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="200" height="200" fill="url(#gradC)" rx="40"/>
|
||||
<!-- Network-style 'm': dots connected by lines like a git graph -->
|
||||
<g stroke="#ffffff" stroke-width="5" stroke-linecap="round" fill="none">
|
||||
<!-- Left branch: bottom to top -->
|
||||
<line x1="48" y1="155" x2="48" y2="100"/>
|
||||
<line x1="48" y1="100" x2="48" y2="65"/>
|
||||
<!-- Fork left to mid-left peak -->
|
||||
<path d="M48,100 C48,70 80,55 80,55"/>
|
||||
<path d="M80,55 C80,55 100,70 100,100"/>
|
||||
<!-- Mid vertical -->
|
||||
<line x1="100" y1="100" x2="100" y2="155"/>
|
||||
<!-- Fork mid to mid-right peak -->
|
||||
<path d="M100,100 C100,70 132,55 132,55"/>
|
||||
<path d="M132,55 C132,55 152,70 152,100"/>
|
||||
<!-- Right branch -->
|
||||
<line x1="152" y1="100" x2="152" y2="155"/>
|
||||
<!--
|
||||
Most realistic: looks like `git log --graph`
|
||||
Many small commits, branches diverge and continue
|
||||
-->
|
||||
<g stroke="#ffffff" stroke-width="4" stroke-linecap="round" fill="none">
|
||||
<!-- Left trunk (main) -->
|
||||
<line x1="50" y1="35" x2="50" y2="165"/>
|
||||
<!-- Branch 1 forks to middle -->
|
||||
<path d="M50,55 C60,50 75,48 90,55"/>
|
||||
<!-- Middle branch continues down -->
|
||||
<line x1="90" y1="55" x2="90" y2="165"/>
|
||||
<!-- Branch 2 forks to right -->
|
||||
<path d="M90,85 C100,80 115,78 130,85"/>
|
||||
<!-- Right branch continues down -->
|
||||
<line x1="130" y1="85" x2="130" y2="165"/>
|
||||
<!-- A merge back: right feature into right branch -->
|
||||
<path d="M130,115 C140,110 150,105 155,95"/>
|
||||
<path d="M155,95 L155,75"/>
|
||||
</g>
|
||||
<!-- All the commit dots -->
|
||||
<!-- Many small commit dots -->
|
||||
<g fill="#ffffff">
|
||||
<!-- Bottom row -->
|
||||
<circle cx="48" cy="155" r="7"/>
|
||||
<circle cx="100" cy="155" r="7"/>
|
||||
<circle cx="152" cy="155" r="7"/>
|
||||
<!-- Fork points -->
|
||||
<circle cx="48" cy="100" r="7"/>
|
||||
<circle cx="100" cy="100" r="7"/>
|
||||
<!-- Peaks -->
|
||||
<circle cx="80" cy="55" r="7"/>
|
||||
<circle cx="132" cy="55" r="7"/>
|
||||
<!-- Mid-stem -->
|
||||
<circle cx="48" cy="65" r="5"/>
|
||||
<circle cx="152" cy="100" r="7"/>
|
||||
<!-- Left trunk commits -->
|
||||
<circle cx="50" cy="35" r="6"/>
|
||||
<circle cx="50" cy="55" r="5"/>
|
||||
<circle cx="50" cy="80" r="4"/>
|
||||
<circle cx="50" cy="105" r="4"/>
|
||||
<circle cx="50" cy="130" r="4"/>
|
||||
<circle cx="50" cy="165" r="6"/>
|
||||
<!-- Middle branch commits -->
|
||||
<circle cx="90" cy="55" r="5"/>
|
||||
<circle cx="90" cy="75" r="4"/>
|
||||
<circle cx="90" cy="85" r="5"/>
|
||||
<circle cx="90" cy="110" r="4"/>
|
||||
<circle cx="90" cy="135" r="4"/>
|
||||
<circle cx="90" cy="165" r="6"/>
|
||||
<!-- Right branch commits -->
|
||||
<circle cx="130" cy="85" r="5"/>
|
||||
<circle cx="130" cy="100" r="4"/>
|
||||
<circle cx="130" cy="115" r="5"/>
|
||||
<circle cx="130" cy="140" r="4"/>
|
||||
<circle cx="130" cy="165" r="6"/>
|
||||
<!-- Feature branch -->
|
||||
<circle cx="155" cy="95" r="4"/>
|
||||
<circle cx="155" cy="75" r="4"/>
|
||||
</g>
|
||||
</svg>
|
||||
<h3>C — Git Graph</h3>
|
||||
<p>Network nodes with branch forks</p>
|
||||
<h3>C — Full Graph</h3>
|
||||
<p>Realistic git log with many commits</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user