Fade in the brand heading
This commit is contained in:
parent
debb8f0e4f
commit
fafaf4e15e
|
@ -5067,6 +5067,22 @@ a.text-dark:hover, a.text-dark:focus {
|
|||
.invisible {
|
||||
visibility: hidden !important; }
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
/* make things invisible upon start */
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
animation-name: fadein;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease; }
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
@ -5118,14 +5134,6 @@ a {
|
|||
.hidden {
|
||||
display: none !important; }
|
||||
|
||||
.indiechat {
|
||||
font-size: 100px !important;
|
||||
margin-bottom: 0 !important; }
|
||||
.indiechat .subdued {
|
||||
opacity: 0.15;
|
||||
font-size: 95%;
|
||||
word-spacing: 50px; }
|
||||
|
||||
.byline {
|
||||
font-family: 'Muli', sans-serif;
|
||||
font-size: 28px;
|
||||
|
@ -5243,7 +5251,12 @@ section h4 {
|
|||
font-family: 'Baumans', cursive;
|
||||
font-size: 6em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0;
|
||||
color: white; }
|
||||
.brand-heading .subdued {
|
||||
opacity: 0.15;
|
||||
font-size: 95%;
|
||||
word-spacing: 50px; }
|
||||
.brand-heading .converse-svg-logo {
|
||||
height: 1.2em;
|
||||
margin-right: 0.25em; }
|
||||
|
|
|
@ -34,8 +34,6 @@
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
|
||||
<span class="page-scroll">
|
||||
|
||||
|
||||
<a class="navbar-brand" href="#intro"><span class="converse-brand-heading">Converse</span></a>
|
||||
</span>
|
||||
<ul class="navbar-nav mt-2 mt-lg-0">
|
||||
|
@ -71,7 +69,7 @@
|
|||
<section id="intro" class="intro" class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-md-offset-2">
|
||||
<h1 class="brand-heading indiechat">
|
||||
<h1 class="brand-heading fade-in">
|
||||
<svg class="converse-svg-logo"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
@ -94,7 +92,7 @@
|
|||
converse<span class="subdued">.js</span></h1>
|
||||
<p class="byline">messaging freedom</p>
|
||||
<p class="intro-text">A free and open-source XMPP chat client in your browser</p>
|
||||
<p>Try out the <a href="/fullscreen.html">fullpage</a> version</p>
|
||||
<p>Try the <a href="/fullscreen.html">fullpage</a> version</p>
|
||||
<p>
|
||||
<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>
|
||||
|
|
|
@ -22,6 +22,19 @@
|
|||
@import "bootstrap/scss/close";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
@import "bourbon";
|
||||
@mixin fade-in {
|
||||
opacity: 0; /* make things invisible upon start */
|
||||
@include animation-name(fadein);
|
||||
@include animation-fill-mode(forwards);
|
||||
@include animation-duration(1s);
|
||||
@include animation-timing-function(ease);
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
@include fade-in;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -84,15 +97,6 @@ a {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.indiechat {
|
||||
font-size: 100px !important;
|
||||
margin-bottom: 0 !important;
|
||||
.subdued {
|
||||
opacity: 0.15;
|
||||
font-size: 95%;
|
||||
word-spacing: 50px;
|
||||
}
|
||||
}
|
||||
.byline {
|
||||
font-family: 'Muli', sans-serif;
|
||||
font-size: 28px;
|
||||
|
@ -236,8 +240,15 @@ section {
|
|||
font-family: 'Baumans', cursive;
|
||||
font-size: 6em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0;
|
||||
color: white;
|
||||
|
||||
.subdued {
|
||||
opacity: 0.15;
|
||||
font-size: 95%;
|
||||
word-spacing: 50px;
|
||||
}
|
||||
|
||||
.converse-svg-logo {
|
||||
height: 1.2em;
|
||||
margin-right: 0.25em;
|
||||
|
|
Loading…
Reference in New Issue
Block a user