Przeglądaj źródła

Use bootstrap4 for the Converse website

JC Brand 6 lat temu
rodzic
commit
0833478da4

Plik diff jest za duży
+ 0 - 4
css/bootstrap.min.css


+ 2 - 0
css/converse.css

@@ -9938,6 +9938,8 @@ body.reset {
   #conversejs.converse-overlayed #controlbox .box-flyout {
     min-width: 250px !important;
     width: 250px; }
+  #conversejs.converse-overlayed #controlbox #converse-login-trusted {
+    margin-top: 0.5em; }
   #conversejs.converse-overlayed #controlbox:not(.logged-out) .controlbox-head {
     height: 15px; }
   #conversejs.converse-overlayed #controlbox .controlbox-head {

Plik diff jest za duży
+ 5325 - 0
css/website.css


+ 38 - 16
demo/embedded.html

@@ -9,8 +9,8 @@
     <meta name="author" content="JC Brand" />
     <meta name="keywords" content="xmpp chat webchat converse.js" />
     <link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/font-awesome.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/website.css" />
     <script type="text/javascript" src="/src/website.js"></script>
     <script type="text/javascript" src="/analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
@@ -26,20 +26,42 @@
     </style>
 </head>
 
-<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
-    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
-        <div class="container">
-            <div class="navbar-header page-scroll">
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
-                    <i class="fa fa-bars"></i>
-                </button>
-            </div>
-            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
-                <ul class="nav navbar-nav"><li> <a href="/docs/html/index.html">Documentation</a> </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
+<body id="page-top" data-spy="scroll">
+	<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
+		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+            <a class="navbar-brand" href="/"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
+			<ul class="navbar-nav mt-2 mt-lg-0">
+				<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
+				<li class="hidden">
+					<a class="nav-link" href="#page-top"></a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#about">About</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#features">Features</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#contact">Contact</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#sponsors">Sponsor</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#hosting">Hosting</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="/docs/html/index.html">Documentation&nbsp;<i class="fa fa-external-link-alt"></i></a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank" rel="noopener">Download&nbsp;<i class="fa fa-external-link-alt"></i></a>
+				</li>
+			</ul>
+		</div>
+	</nav>
 
     <section class="intro">
         <div class="intro-body">

+ 42 - 49
demo/index.html

@@ -10,9 +10,8 @@
     <meta name="keywords" content="xmpp chat webchat converse.js" />
 
     <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="/css/font-awesome.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/website.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
     <script src="/src/website.js"></script>
     <script type="text/javascript" src="/analytics.js"></script>
@@ -22,59 +21,52 @@
     <![endif]>
 </head>
 
-<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
-
-    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
-        <div class="container">
-            <div class="navbar-header page-scroll">
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
-                    <i class="fa fa-bars"></i>
-                </button>
-                <a class="navbar-brand" href="/#page-top">
-                    <i class="fa fa-play-circle"></i>  <span class="light">Home</span>
-                </a>
-            </div>
-
-            <!-- Collect the nav links, forms, and other content for toggling -->
-            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
-                <ul class="nav navbar-nav">
-                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
-                    <li class="hidden">
-                        <a href="#page-top"></a>
-                    </li>
-                    <li class="page-scroll">
-                        <a href="#about">About</a>
-                    </li>
-                    <li class="page-scroll">
-                        <a href="#features">Features</a>
-                    </li>
-                    <li class="page-scroll">
-                        <a href="#contact">Contact</a>
-                    </li>
-                    <li>
-                        <a href="/docs/html/manual.html">User Manual</a>
-                    </li>
-                    <li>
-                        <a href="/docs/html/index.html">Documentation</a>
-                    </li>
-                    <li>
-                        <a href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank">Download</a>
-                    </li>
-                </ul>
-            </div>
-            <!-- /.navbar-collapse -->
-        </div>
-        <!-- /.container -->
-    </nav>
+<body id="page-top" data-spy="scroll">
+<section class="section-wrapper">
+	<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
+		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+            <a class="navbar-brand" href="/"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
+			<ul class="navbar-nav mt-2 mt-lg-0">
+				<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
+				<li class="hidden">
+					<a class="nav-link" href="#page-top"></a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#about">About</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#features">Features</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#contact">Contact</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#sponsors">Sponsor</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#hosting">Hosting</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="/docs/html/index.html">Documentation&nbsp;<i class="fa fa-external-link-alt"></i></a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank" rel="noopener">Download&nbsp;<i class="fa fa-external-link-alt"></i></a>
+				</li>
+			</ul>
+		</div>
+	</nav>
 
     <section class="intro" class="container">
         <div class="row">
-            <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1>
-            <div class="col-md-8 col-md-offset-2">
+            <div class="col-md-12 col-md-offset-2">
+                <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1>
                 <p class="intro-text">Demos:</p>
                 <p class="intro-text">
                     <ul style="list-style: none; font-size: 22px;">
-                        <li><a href="https://inverse.chat" target="_blank" rel="noopener">As a fullscreen application</a></li>
+                        <li><a href="/fullscreen.html">As a fullscreen application</a></li>
                         <li><a href="/demo/anonymous.html">Anonymous login</a></li>
                         <li><a href="/demo/embedded.html">Single MUC chatroom embedded into the page</a></li>
                         <li><a href="/demo/without_bundled_dependencies.html">Dependencies loaded externally as &lt;script&gt; tags</a></li>
@@ -83,6 +75,7 @@
             </div>
         </div>
     </section>
+</section>
 </body>
 
 <script>

+ 4 - 2
dist/converse.js

@@ -75694,6 +75694,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
             _converse.xmppstatus.save({
               'status': show
+            }, {
+              'silent': true
             });
 
             const status_message = _.propertyOf(presence.querySelector('status'))('textContent');
@@ -79452,11 +79454,11 @@ __e(o.__("Password:")) +
 __e(o.__('password')) +
 '">\n                </div>\n                ';
  } ;
-__p += '\n                <div class="form-group form-check">\n                    <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" ';
+__p += '\n                <div class="form-group form-check login-trusted">\n                    <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" ';
  if (o._converse.config.get('trusted')) { ;
 __p += ' checked="checked" ';
  } ;
-__p += '>\n                    <label for="converse-login-trusted" class="form-check-label">' +
+__p += '>\n                    <label for="converse-login-trusted" class="form-check-label login-trusted__desc">' +
 __e(o.__('This is a trusted device')) +
 '</label>\n                    <i class="fa fa-info-circle" data-toggle="popover"\n                       data-title="Trusted device?"\n                       data-content="' +
 __e(o.__('To improve performance, we cache your data in this browser. Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all cached data might be deleted.')) +

+ 55 - 63
index.html

@@ -11,9 +11,8 @@
 
     <!-- These files are NOT needed when using converse.js in your own project. -->
     <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="css/bootstrap.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="css/font-awesome.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="css/website.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/font-awesome.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="/css/website.css" />
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
     <script type="text/javascript" src="/src/website.js"></script>
     <script type="text/javascript" src="analytics.js"></script>
@@ -25,60 +24,53 @@
     <![endif]>
 </head>
 
-<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
-    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
-        <div class="container">
-            <div class="navbar-header page-scroll">
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
-                    <i class="fa fa-bars"></i>
-                </button>
-                <a class="navbar-brand" href="#page-top">
-                    <i class="fa fa-play-circle"></i>  <span class="light">Home</span>
-                </a>
-            </div>
+<body id="page-top" data-spy="scroll">
 
-            <!-- Collect the nav links, forms, and other content for toggling -->
-            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
-                <ul class="nav navbar-nav">
-                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
-                    <li class="hidden">
-                        <a href="#page-top"></a>
-                    </li>
-                    <li class="page-scroll">
-                        <a href="#about">About</a>
-                    </li>
-                    <li class="page-scroll">
-                        <a href="#features">Features</a>
-                    </li>
-                    <li class="page-scroll">
-                        <a href="#contact">Contact</a>
-                    </li>
-                    <li class="page-scroll">
-                        <a href="#sponsors">Sponsor</a>
-                    </li>
-                    <li class="page-scroll">
-                        <a href="#hosting">Hosting</a>
-                    </li>
-                    <li>
-                        <a href="/docs/html/index.html">Documentation</a>
-                    </li>
-                    <li>
-                        <a href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank" rel="noopener">Download</a>
-                    </li>
-                </ul>
-            </div>
-            <!-- /.navbar-collapse -->
-        </div>
-        <!-- /.container -->
-    </nav>
+<section class="section-wrapper">
+	<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
+		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+			<span class="page-scroll">
+				<a class="navbar-brand" href="#intro"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
+			</span>
+			<ul class="navbar-nav mt-2 mt-lg-0">
+				<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
+				<li class="hidden">
+					<a class="nav-link" href="#page-top"></a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#about">About</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#features">Features</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#contact">Contact</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#sponsors">Sponsor</a>
+				</li>
+				<li class="nav-item page-scroll">
+					<a class="nav-link" href="#hosting">Hosting</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="/docs/html/index.html">Documentation&nbsp;<i class="fa fa-external-link-alt"></i></a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank" rel="noopener">Download&nbsp;<i class="fa fa-external-link-alt"></i></a>
+				</li>
+			</ul>
+		</div>
+	</nav>
 
-    <section class="intro" class="container">
+    <section id="intro" class="intro" class="container">
         <div class="row">
-            <h1 class="brand-heading converse-brand-heading"><i class="icon-conversejs"></i>Converse</h1>
-            <div class="col-md-8 col-md-offset-2">
+            <div class="col-md-12 col-md-offset-2">
+                <h1 class="brand-heading converse-brand-heading"><i class="icon-conversejs"></i>Converse</h1>
                 <p class="intro-text">A free and open-source XMPP chat client in your browser</p>
-                <p>Also available as a <a href="https://conversejs.org/fullscreen.html">fullpage</a> app</p>
-
+                <p>Try out 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>
@@ -90,11 +82,11 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-md-8 col-md-offset-2 banner-social-buttons">
+            <div class="col-md-12 col-md-offset-2 banner-social-buttons">
                 <ul class="list-inline">
-                    <li><a href="https://twitter.com/jcopkode" class="btn btn-circle btn-lg" title="Twitter" target="_blank" rel="noopener"><i class="fab fa-twitter"></i></a></li>
-                    <li><a href="https://mastodon.xyz/@jcbrand" class="btn btn-lg" title="Mastodon" target="_blank" rel="noopener"><img class="mastodon" src="/logo/mastodon.svg"/></a></li>
-                    <li><a href="https://github.com/jcbrand/converse.js" class="btn btn-circle btn-lg" title="GitHub" target="_blank" rel="noopener"><i class="fab fa-github"></i></a></li>
+                    <li class="list-inline-item"><a href="https://twitter.com/jcopkode" class="btn btn-circle btn-lg" title="Twitter" target="_blank" rel="noopener"><i class="fab fa-twitter"></i></a></li>
+                    <li class="list-inline-item"><a href="https://mastodon.xyz/@jcbrand" class="btn btn-lg" title="Mastodon" target="_blank" rel="noopener"><img class="mastodon" src="/logo/mastodon.svg"/></a></li>
+                    <li class="list-inline-item"><a href="https://github.com/jcbrand/converse.js" class="btn btn-circle btn-lg" title="GitHub" target="_blank" rel="noopener"><i class="fab fa-github"></i></a></li>
                 </ul>
             </div>
         </div>
@@ -102,7 +94,7 @@
 
     <section id="about" class="container content-section text-center">
         <div class="row">
-            <div class="col-lg-8 col-lg-offset-2">
+            <div class="col-lg-12 col-lg-offset-2">
                 <h2>Converse is easy to set up</h2>
                 <p class="text-left">You can start using it here immediately, or you can <a href="/docs/html/index.html">integrate it into your own website</a>.</p>
                 <p class="text-left">Take a look at the <a href="/demo">demo page</a> for other examples of how Converse can be configured and used.</a>
@@ -194,7 +186,7 @@
     <section class="outro content-section text-center" id="contact">
         <div class="container">
             <div class="row">
-                <div class="col-lg-8 col-lg-offset-2">
+                <div class="col-lg-12 col-lg-offset-2">
                     <h2>Contact</h2>
                     <ul class="contact">
                         <li>Follow me on <a href="https://twitter.com/jcopkode" target="_blank" rel="noopener">Twitter</a>
@@ -206,7 +198,7 @@
                     </ul>
                 </div>
 
-                <div class="col-lg-8 col-lg-offset-2" style="margin-top: 4em; text-align: left">
+                <div class="col-lg-12 col-lg-offset-2" style="margin-top: 4em; text-align: left">
                     <h2 style="text-align: center">Professional support and custom development</h2>
                     <p>
                         I'm available for paid-for features, custom development and consulting.<br/>
@@ -223,13 +215,12 @@
     <section class="outro content-section text-center" id="sponsors">
         <div class="container">
             <div class="row">
-                <div class="col-lg-8 col-lg-offset-2" style="margin-top: 3em">
+                <div class="col-lg-12 col-lg-offset-2" style="margin-top: 3em">
                     <div class="sponsors">
                         <h2>Converse is supported by:</h2>
                         <ul>
                             <li><a href="https://www.keycdn.com/?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 3em" src="/logo/keycdn.svg" alt="KeyCDN"></a></li>
                             <li><a href="https://wikisuite.org/?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 4em" src="/logo/wikisuite-white.png" alt="WikiSuite"></a></li>
-                            <li><a href="https://hostpresto.com/?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 3em" src="/logo/hostpresto.png" alt="HostPresto"></a></li>
                         </ul>
                     </div>
 
@@ -248,7 +239,7 @@
     <section class="outro content-section text-center" id="hosting">
         <div class="container">
             <div class="row">
-                <div class="col-lg-8 col-lg-offset-2" style="margin-top: 3em">
+                <div class="col-lg-12 col-lg-offset-2" style="margin-top: 3em">
                     <h2>XMPP Account Hosting</h2>
                     <p>
                         We provide free XMPP accounts under the domain <strong>conversejs.org</strong>.
@@ -330,6 +321,7 @@
             </div>
         </div>
     </section>
+</section>
 </body>
 
 <script>

+ 3 - 0
sass/_controlbox.scss

@@ -352,6 +352,9 @@
             width: $controlbox-width;
         }
 
+        #converse-login-trusted {
+            margin-top: 0.5em;
+        }
         &:not(.logged-out) {
             .controlbox-head {
                 height: 15px;

+ 50 - 9
sass/_website.scss

@@ -1,3 +1,26 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/input-group";
+@import "bootstrap/scss/custom-forms";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/media";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/utilities";
+
 html {
     width: 100%;
     height: 100%;
@@ -51,7 +74,14 @@ a:hover, a:focus {
     margin-bottom: 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
     text-transform: uppercase;
-    background-color: #211018;
+	background: transparent;
+
+	.navbar-collapse {
+		justify-content: space-between;
+	}
+	a {
+		color: white;
+	}
 }
 
 .navbar-brand {
@@ -88,7 +118,6 @@ a:hover, a:focus {
 }
 @media (min-width: 767px) {
   .navbar {
-    padding: 20px 0;
     border-bottom: none;
     letter-spacing: 1px;
     background: transparent;
@@ -97,7 +126,8 @@ a:hover, a:focus {
     transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
   }
   .top-nav-collapse {
-    padding: 0;
+	padding-top: 0;
+	padding-bottom: 0;
     background-color: #211018;
   }
   .navbar-custom.top-nav-collapse {
@@ -119,6 +149,8 @@ a:hover, a:focus {
     color: #fff;
 }
 .intro {
+    margin-top: -4em;
+    height: calc(100vh + 4em);
     background: url(images/header.jpg) no-repeat bottom center scroll;
     background-color: #211018;
     -webkit-background-size: cover;
@@ -154,7 +186,7 @@ section {
     font-weight: normal;
     font-size: 2em;
     text-align: center;
-    margin-top: 2.5em;
+    margin-top: 1.5em;
 }
 .brand-heading .icon-conversejs {
     font-size: 60%;
@@ -169,7 +201,6 @@ section {
 }
 @media (min-width: 767px) {
   .intro {
-    height: 100%;
     padding: 0;
   }
   .brand-heading {
@@ -216,6 +247,14 @@ section {
   -moz-animation-timing-function: linear;
 }
 
+.nav-item {
+	&.active {
+		a {
+			color: #E7A151 !important;
+		}
+	}
+}
+
 .content-section {
     padding-top: 100px;
     padding-top: 100px;
@@ -275,9 +314,11 @@ section {
 }
 .banner-social-buttons {
     padding-top: 3em;
-
     a {
         padding: 0.15em;
+        i {
+            font-size: 115%;
+        }
     }
 }
 ::-moz-selection {
@@ -352,9 +393,9 @@ ul.features {
 }
 
 .mastodon {
-    width: 4em;
-    height: 4em;
-    margin-top: 0.9em;
+    width: 3.6em;
+    height: 3.6em;
+    margin-top: 0.6em;
 }
 
 .sponsors {

+ 2 - 2
src/templates/login_panel.html

@@ -18,9 +18,9 @@
                     <input id="converse-login-password" class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}">
                 </div>
                 {[ } ]}
-                <div class="form-group form-check">
+                <div class="form-group form-check login-trusted">
                     <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" {[ if (o._converse.config.get('trusted')) { ]} checked="checked" {[ } ]}>
-                    <label for="converse-login-trusted" class="form-check-label">{{{o.__('This is a trusted device')}}}</label>
+                    <label for="converse-login-trusted" class="form-check-label login-trusted__desc">{{{o.__('This is a trusted device')}}}</label>
                     <i class="fa fa-info-circle" data-toggle="popover"
                        data-title="Trusted device?"
                        data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all cached data might be deleted.')}}}"></i>

+ 8 - 4
src/website.js

@@ -3,12 +3,11 @@
 
         window.addEventListener('scroll', function (ev) {
             var navbar = document.querySelector(".navbar");
-            var fixed_top = document.querySelector(".navbar-fixed-top");
             var rect = navbar.getBoundingClientRect();
             if (rect.top + window.scrollY > 50) {
-                fixed_top.classList.add("top-nav-collapse");
+                navbar.classList.add("top-nav-collapse");
             } else {
-                fixed_top.classList.remove("top-nav-collapse");
+                navbar.classList.remove("top-nav-collapse");
             }
         });
 
@@ -23,7 +22,12 @@
         Array.prototype.forEach.call(document.querySelectorAll('.page-scroll a'), function (el) {
             el.addEventListener('click', function (ev) {
                 ev.preventDefault();
-                var hash = this.getAttribute("href")
+                Array.prototype.forEach.call(document.querySelectorAll('.page-scroll'), function (child) {
+                    child.classList.remove('active');
+                });
+                this.parentElement.classList.add('active');
+
+                var hash = this.getAttribute("href");
                 var endLocation = document.querySelector(hash).offsetTop;
                 var startLocation = window.pageYOffset;
                 var distance = endLocation - startLocation;

Niektóre pliki nie zostały wyświetlone z powodu dużej ilości zmienionych plików