danvics/docling-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add logo across navbar, home hero, studio, and favicon

Browse source 
Replace generic orange "D" placeholders with the duck mascot logo
in all branding touchpoints: navbar header, home page hero, studio
import view, and browser favicon.
This commit is contained in:
Pier-Jean Malandrino 2026-04-02 17:11:31 +02:00
parent 199785aa29
commit f6fa6907d7
5 changed files with 16 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Docling Studio</title> <title>Docling Studio</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" href="/logo.png">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
frontend/public/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 463 KiB

16
frontend/src/app/App.vue
View file

@ -7,7 +7,7 @@
</svg> </svg>
</button> </button>
<div class="topbar-logo"> <div class="topbar-logo">
<span class="topbar-logo-icon">D</span> <img src="/logo.png" alt="Docling Studio" class="topbar-logo-icon" />
<span class="topbar-logo-text">Docling Studio</span> <span class="topbar-logo-text">Docling Studio</span>
</div> </div>
<div class="topbar-spacer" /> <div class="topbar-spacer" />
@ -167,16 +167,10 @@ body {
} }
.topbar-logo-icon { .topbar-logo-icon {
width: 26px; width: 28px;
height: 26px; height: 28px;
background: var(--accent); border-radius: 6px;
color: white; object-fit: contain;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
font-weight: 700;
font-size: 13px;
} }
.topbar-logo-text { .topbar-logo-text {

21
frontend/src/pages/HomePage.vue
View file

@ -2,9 +2,7 @@
<div class="home-page"> <div class="home-page">
<div class="home-center"> <div class="home-center">
<div class="hero"> <div class="hero">
<div class="hero-icon"> <img src="/logo.png" alt="Docling Studio" class="hero-logo" />
<span class="hero-d">D</span>
</div>
<h1 class="hero-title">{{ t('home.title') }}</h1> <h1 class="hero-title">{{ t('home.title') }}</h1>
<p class="hero-subtitle">{{ t('home.subtitle') }}</p> <p class="hero-subtitle">{{ t('home.subtitle') }}</p>
</div> </div>
@ -116,21 +114,12 @@ onMounted(() => {
text-align: center; text-align: center;
} }
.hero-icon { .hero-logo {
width: 72px;
height: 72px;
object-fit: contain;
margin-bottom: 4px; margin-bottom: 4px;
}
.hero-d {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: var(--accent);
color: white;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
font-weight: 700;
font-size: 26px;
} }
.hero-title { .hero-title {

21
frontend/src/pages/StudioPage.vue
View file

@ -2,9 +2,7 @@
<!-- STATE 1: No document selected — Import view --> <!-- STATE 1: No document selected — Import view -->
<div v-if="!selectedDoc" class="import-page"> <div v-if="!selectedDoc" class="import-page">
<div class="import-center"> <div class="import-center">
<div class="import-logo"> <img src="/logo.png" alt="Docling Studio" class="import-logo-img" />
<span class="logo-icon">D</span>
</div>
<h1 class="import-title">{{ t('studio.title') }}</h1> <h1 class="import-title">{{ t('studio.title') }}</h1>
<p class="import-subtitle">{{ t('studio.subtitle') }}</p> <p class="import-subtitle">{{ t('studio.subtitle') }}</p>
<DocumentUpload /> <DocumentUpload />
@ -482,21 +480,12 @@ onBeforeUnmount(() => {
gap: 20px; gap: 20px;
} }
.import-logo { .import-logo-img {
width: 64px;
height: 64px;
object-fit: contain;
margin-bottom: 8px; margin-bottom: 8px;
}
.import-logo .logo-icon {
width: 48px;
height: 48px;
background: var(--accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius); border-radius: var(--radius);
font-weight: 700;
font-size: 22px;
} }
.import-title { .import-title {