mirror of
https://mgit.msbls.de/m/gitea-custom.git
synced 2026-02-06 00:02:08 +00:00
feat: finalize logo — git branch tree forming 'm'
Design B chosen: bold top-down git tree with three branches. Second fork nearly at same height as first for balanced 'm' shape. Applied to logo.svg, favicon.svg, and homepage hero. Restored clean homepage layout (removed design picker).
This commit is contained in:
m
@@ -9,8 +9,19 @@
|
||||
}
|
||||
.mgit-hero {
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
.mgit-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.mgit-mark svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.mgit-title {
|
||||
font-size: 2.5rem;
|
||||
@@ -22,42 +33,9 @@
|
||||
.mgit-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text-light, #64748b);
|
||||
margin: 0 0 2.5rem;
|
||||
margin: 0 0 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.mgit-designs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.mgit-design-card {
|
||||
border: 2px solid var(--color-secondary-dark-2, #e2e8f0);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--color-box-body, #f8fafc);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.mgit-design-card:hover {
|
||||
border-color: var(--color-primary, #2563eb);
|
||||
box-shadow: 0 4px 12px var(--color-shadow, rgba(0,0,0,0.1));
|
||||
}
|
||||
.mgit-design-card h3 {
|
||||
margin: 1rem 0 0.25rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text, #1e293b);
|
||||
}
|
||||
.mgit-design-card p {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-light, #64748b);
|
||||
}
|
||||
.mgit-design-card svg {
|
||||
width: 100%;
|
||||
max-width: 180px;
|
||||
height: auto;
|
||||
}
|
||||
.mgit-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
@@ -78,185 +56,52 @@
|
||||
background: var(--color-primary, #2563eb);
|
||||
color: #fff !important;
|
||||
}
|
||||
.mgit-btn-primary:hover { opacity: 0.9; text-decoration: none !important; }
|
||||
.mgit-btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.mgit-btn-secondary {
|
||||
border: 1px solid var(--color-secondary-dark-2, #e2e8f0);
|
||||
color: var(--color-text, #1e293b) !important;
|
||||
background: var(--color-box-body, transparent);
|
||||
}
|
||||
.mgit-btn-secondary:hover { border-color: var(--color-primary, #2563eb); text-decoration: none !important; }
|
||||
@media (max-width: 700px) {
|
||||
.mgit-designs { grid-template-columns: 1fr; max-width: 300px; margin-left: auto; margin-right: auto; }
|
||||
.mgit-btn-secondary:hover {
|
||||
border-color: var(--color-primary, #2563eb);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
</style>
|
||||
<div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home_title"}}{{end}}" class="page-content mgit-home">
|
||||
<div class="mgit-hero">
|
||||
<h1 class="mgit-title">mGit</h1>
|
||||
<p class="mgit-subtitle">Pick a logo — which one speaks to you?</p>
|
||||
|
||||
<div class="mgit-designs">
|
||||
|
||||
<!-- 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>
|
||||
<linearGradient id="gradA" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#3b82f6"/>
|
||||
<stop offset="100%" stop-color="#1e40af"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="200" height="200" fill="url(#gradA)" rx="40"/>
|
||||
<!--
|
||||
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">
|
||||
<!-- 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 — Git Tree</h3>
|
||||
<p>Top-down branches forking into 'm'</p>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<linearGradient id="gradB" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#3b82f6"/>
|
||||
<stop offset="100%" stop-color="#1e40af"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="200" height="200" fill="url(#gradB)" rx="40"/>
|
||||
<!--
|
||||
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>
|
||||
<!-- Key nodes only -->
|
||||
<g fill="#ffffff">
|
||||
<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 — Bold Tree</h3>
|
||||
<p>Thicker branches, key nodes only</p>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<linearGradient id="gradC" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#3b82f6"/>
|
||||
<stop offset="100%" stop-color="#1e40af"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="200" height="200" fill="url(#gradC)" rx="40"/>
|
||||
<!--
|
||||
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>
|
||||
<!-- Many small commit dots -->
|
||||
<g fill="#ffffff">
|
||||
<!-- 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 — Full Graph</h3>
|
||||
<p>Realistic git log with many commits</p>
|
||||
</div>
|
||||
|
||||
<div class="mgit-mark">
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="heroGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#3b82f6"/>
|
||||
<stop offset="100%" stop-color="#1e40af"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="200" height="200" fill="url(#heroGrad)" rx="40"/>
|
||||
<g stroke="#ffffff" stroke-width="8" stroke-linecap="round" fill="none">
|
||||
<line x1="45" y1="40" x2="45" y2="160"/>
|
||||
<path d="M45,72 C65,62 80,62 100,72"/>
|
||||
<line x1="100" y1="72" x2="100" y2="160"/>
|
||||
<path d="M100,80 C120,70 135,70 155,80"/>
|
||||
<line x1="155" y1="80" x2="155" y2="160"/>
|
||||
</g>
|
||||
<g fill="#ffffff">
|
||||
<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="80" r="7"/>
|
||||
<circle cx="155" cy="80" 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>
|
||||
</div>
|
||||
|
||||
<h1 class="mgit-title">mGit</h1>
|
||||
<p class="mgit-subtitle">Private Git hosting for projects, code, and collaboration.</p>
|
||||
<div class="mgit-actions">
|
||||
{{if .IsSigned}}
|
||||
<a href="{{AppSubUrl}}/" class="mgit-btn-primary">Dashboard</a>
|
||||
|
||||
Reference in New Issue
Block a user