[Branding] Customize homepage's text and links + CSS adjustments.

This commit is contained in:
pitchum 2022-10-19 15:49:16 +02:00
parent 8d67dce865
commit b49146b36f
3 changed files with 12 additions and 18 deletions

View File

@ -10,16 +10,14 @@ export class ConverseBrandByline extends CustomElement {
return html` return html`
${is_fullscreen ${is_fullscreen
? html` ? html`
<p class="brand-subtitle">${_converse.VERSION_NAME}</p>
<p class="brand-subtitle"> <p class="brand-subtitle">
<a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client Une messagerie instantanée qui respecte vos libertés et votre vie privée.
brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a>
</p> </p>
<p class="brand-subtitle"> <p class="brand-subtitle">
<a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages" Application Web qui s'appuie sur <a target="_blank" rel="nofollow" href="https://conversejs.org">ConverseJS</a>,
>Translate</a un client XMPP conçu par <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a>
> <br/>
it into your own language <small>${_converse.VERSION_NAME}</small>
</p> </p>
` `
: ''} : ''}

View File

@ -8,7 +8,7 @@ export class ConverseBrandLogo extends CustomElement {
render () { // eslint-disable-line class-methods-use-this render () { // eslint-disable-line class-methods-use-this
const is_fullscreen = api.settings.get('view_mode') === 'fullscreen'; const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
return html` return html`
<a class="brand-heading" href="https://conversejs.org" target="_blank" rel="noopener"> <a class="brand-heading" href="https://chapril.org/XMPP" target="_blank" rel="noopener">
<span class="brand-name-wrapper ${is_fullscreen ? 'brand-name-wrapper--fullscreen' : ''}"> <span class="brand-name-wrapper ${is_fullscreen ? 'brand-name-wrapper--fullscreen' : ''}">
<svg <svg
@ -56,12 +56,7 @@ export class ConverseBrandLogo extends CustomElement {
</g> </g>
</svg> </svg>
<span class="brand-name"> <span class="brand-name">
<span class="brand-name__text">converse<span class="subdued">.js</span></span> <span class="brand-name__text">Tchat Chapril</span>
${is_fullscreen
? html`
<p class="byline">messaging freedom</p>
`
: ''}
</span> </span>
</span> </span>
</a> </a>

View File

@ -50,8 +50,10 @@
.brand-heading { .brand-heading {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: column;
align-items: flex-start; flex-wrap: wrap;
justify-content: center;
align-items: center;
font-family: var(--branding-font); font-family: var(--branding-font);
color: var(--link-color); color: var(--link-color);
margin-bottom: 0.75em; margin-bottom: 0.75em;
@ -67,7 +69,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: -0.25em;
.byline { .byline {
font-family: var(--heading-font); font-family: var(--heading-font);
@ -119,7 +120,7 @@
font-family: var(--heading-font); font-family: var(--heading-font);
font-size: 0.25em; font-size: 0.25em;
opacity: 0.55; opacity: 0.55;
margin-left: -7em; max-width: 350px;
word-spacing: 5px; word-spacing: 5px;
} }
} }