Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Positioning of logo and text

Browse Source
This commit is contained in:
JC Brand 2019-01-01 13:04:12 +01:00
parent fafaf4e15e
commit 72838be77e
3 changed files with 56 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
css/website.css
View File

@ -5134,12 +5134,6 @@ a {
.hidden { .hidden {
display: none !important; } display: none !important; }
.byline {
font-family: 'Muli', sans-serif;
font-size: 28px;
opacity: 0.5;
margin-bottom: 2em; }
#about p { #about p {
opacity: 0.9; } opacity: 0.9; }
@ -5247,19 +5241,26 @@ section h4 {
.brand-heading { .brand-heading {
display: inline-flex; display: inline-flex;
align-items: flex-end; align-items: center;
font-family: 'Baumans', cursive; font-family: 'Baumans', cursive;
font-size: 6em; font-size: 6em;
margin-top: 1em; margin-top: 1em;
margin-bottom: 0; margin-bottom: 0.5em;
color: white; } color: white; }
.brand-heading .byline {
font-family: 'Muli', sans-serif;
font-size: 20px;
opacity: 0.5;
margin-bottom: 2em;
margin-left: -75px; }
.brand-heading .subdued { .brand-heading .subdued {
opacity: 0.15; opacity: 0.15;
font-size: 95%; font-size: 95%;
word-spacing: 50px; } word-spacing: 50px; }
.brand-heading .converse-svg-logo { .brand-heading .converse-svg-logo {
height: 1.2em; height: 1.2em;
margin-right: 0.25em; } margin-right: 0.25em;
margin-bottom: 0.1em; }
.brand-heading .converse-svg-logo .cls-1 { .brand-heading .converse-svg-logo .cls-1 {
isolation: isolate; } isolation: isolate; }
.brand-heading .converse-svg-logo .cls-2 { .brand-heading .converse-svg-logo .cls-2 {
@ -5270,6 +5271,12 @@ section h4 {
.brand-heading .converse-svg-logo .cls-4 { .brand-heading .converse-svg-logo .cls-4 {
fill: white; } fill: white; }
.brand-heading__text {
font-size: 0.9em;
display: inline-flex;
flex-direction: column;
justify-content: center; }
.brand-heading-embedded { .brand-heading-embedded {
margin-top: 1.5em; } margin-top: 1.5em; }
@ -5277,6 +5284,12 @@ section h4 {
.intro { .intro {
padding: 0; } } padding: 0; } }
.intro-text {
font-size: 1.1em;
opacity: 0.8;
margin-bottom: 0;
padding-bottom: 1em; }
.btn-circle { .btn-circle {
width: 70px; width: 70px;
height: 70px; height: 70px;

12
index.html
View File

@ -89,11 +89,15 @@
</g> </g>
</g> </g>
</svg> </svg>
converse<span class="subdued">.js</span></h1> <span class="brand-heading__text">
<p class="byline">messaging freedom</p> <span>converse<span class="subdued">.js</span></span>
<p class="byline">messaging freedom</p>
</span>
</h1>
<p class="intro-text">A free and open-source XMPP chat client in your browser</p> <p class="intro-text">A free and open-source XMPP chat client in your browser</p>
<p>Try the <a href="/fullscreen.html">fullpage</a> version</p> <p class="intro-text">Try the <a href="/fullscreen.html">fullpage</a> version</p>
<p> <p style="padding-top: 1.5em">
<a href="https://inverse.chat/#converse/room?jid=discuss@conference.conversejs.org" <a href="https://inverse.chat/#converse/room?jid=discuss@conference.conversejs.org"
target="_blank" rel="noopener"><img src="https://inverse.chat/badge.svg?room=discuss@conference.conversejs.org"/></a> target="_blank" rel="noopener"><img src="https://inverse.chat/badge.svg?room=discuss@conference.conversejs.org"/></a>
</p> </p>

35
sass/website.scss
View File

@ -97,13 +97,6 @@ a {
display: none !important; display: none !important;
} }
.byline {
font-family: 'Muli', sans-serif;
font-size: 28px;
opacity: 0.5;
margin-bottom: 2em;
}
#about { #about {
p { p {
opacity: 0.9; opacity: 0.9;
@ -236,13 +229,21 @@ section {
.brand-heading { .brand-heading {
display: inline-flex; display: inline-flex;
align-items: flex-end; align-items: center;
font-family: 'Baumans', cursive; font-family: 'Baumans', cursive;
font-size: 6em; font-size: 6em;
margin-top: 1em; margin-top: 1em;
margin-bottom: 0; margin-bottom: 0.5em;
color: white; color: white;
.byline {
font-family: 'Muli', sans-serif;
font-size: 20px;
opacity: 0.5;
margin-bottom: 2em;
margin-left: -75px;
}
.subdued { .subdued {
opacity: 0.15; opacity: 0.15;
font-size: 95%; font-size: 95%;
@ -252,6 +253,7 @@ section {
.converse-svg-logo { .converse-svg-logo {
height: 1.2em; height: 1.2em;
margin-right: 0.25em; margin-right: 0.25em;
margin-bottom: 0.1em;
.cls-1 { .cls-1 {
isolation: isolate; isolation: isolate;
} }
@ -268,6 +270,13 @@ section {
} }
} }
.brand-heading__text {
font-size: 0.9em;
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.brand-heading-embedded { .brand-heading-embedded {
margin-top: 1.5em; margin-top: 1.5em;
} }
@ -276,6 +285,14 @@ section {
padding: 0; padding: 0;
} }
} }
.intro-text {
font-size: 1.1em;
opacity: 0.8;
margin-bottom: 0;
padding-bottom: 1em;
}
.btn-circle { .btn-circle {
width: 70px; width: 70px;
height: 70px; height: 70px;