Skip to content

C
converse.js
Commit 28bc3a22 authored by JC Brand's avatar JC Brand
Browse files
Options

Use future for headings

parent 4bdc9636
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 27 deletions
css/converse.css
View file @ 28bc3a22
......@@ -6834,8 +6834,9 @@ body.reset {
font-weight: normal;
font-style: normal; }
.icon-conversejs {
padding-right: 0.2em;
padding-right: 0.5em;
font-family: 'Converse-js';
font-size: 80%;
speak: none;
font-style: normal;
font-weight: normal;
......@@ -6849,6 +6850,13 @@ body.reset {
.icon-conversejs:before {
content: "\e600"; }
.converse-brand-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-size: 6em;
font-weight: normal; }
.converse-brand-heading .icon-conversejs {
font-size: 60%; }
#conversejs {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
......@@ -6858,6 +6866,10 @@ body.reset {
direction: ltr;
display: block;
z-index: 1031; }
#conversejs .brand-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; }
#conversejs .brand-heading .icon-conversejs {
font-size: 80%; }
#conversejs .converse-chatboxes {
z-index: 1031;
position: fixed;
......@@ -6988,6 +7000,8 @@ body.reset {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
#conversejs .btn {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-weight: normal;
color: #fff; }
#conversejs .btn .fa {
color: #fff;
......@@ -7213,7 +7227,7 @@ body.reset {
margin: 0; }
@media screen and (max-width: 575px) {
body .brand-heading {
body .converse-brand-heading {
font-size: 3.75em; }
#conversejs:not(.converse-embedded) .chatbox .chat-body {
......@@ -7355,6 +7369,7 @@ body.reset {
width: 100%;
height: 100vh; } }
#conversejs .chatbox .chat-title {
font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
color: white;
display: block;
line-height: 20px;
......@@ -7810,6 +7825,7 @@ body.reset {
#conversejs #controlbox .controlbox-section {
margin: 1em 0 0 0; }
#conversejs #controlbox .controlbox-section .controlbox-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
margin: 0 0 0.5em 0;
text-transform: uppercase; }
#conversejs #controlbox .dropdown a {
......@@ -7959,6 +7975,7 @@ body.reset {
text-align: left;
padding: 0.3em 0; }
#conversejs .list-container .rooms-toggle {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
display: block;
color: #666;
padding: 0 0 0.5rem 0; }
......@@ -8082,6 +8099,7 @@ body.reset {
text-shadow: 0 1px 0 #FAFAFA;
margin: 0.75em 0 0.75em 0; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
color: #666;
display: block;
width: 100%;
......@@ -8292,8 +8310,8 @@ body.reset {
padding: 0.5em; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
padding: 0.3em 0;
font-weight: bold; }
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
padding: 0.3em 0; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
width: 100%; }
......@@ -8541,7 +8559,11 @@ body.reset {
padding-bottom: 0.25rem;
display: block; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
font-weight: bold; }
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-size: 115%; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author .badge {
font-size: 80%;
font-family: "Helvetica", "Arial", sans-serif; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
padding-left: 0.25em;
color: #8c8c8c; }
......
css/inverse.css
View file @ 28bc3a22
......@@ -6834,8 +6834,9 @@ body.reset {
font-weight: normal;
font-style: normal; }
.icon-conversejs {
padding-right: 0.2em;
padding-right: 0.5em;
font-family: 'Converse-js';
font-size: 80%;
speak: none;
font-style: normal;
font-weight: normal;
......@@ -6849,6 +6850,13 @@ body.reset {
.icon-conversejs:before {
content: "\e600"; }
.converse-brand-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-size: 6em;
font-weight: normal; }
.converse-brand-heading .icon-conversejs {
font-size: 60%; }
#conversejs {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
......@@ -6858,6 +6866,10 @@ body.reset {
direction: ltr;
display: block;
z-index: 1031; }
#conversejs .brand-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; }
#conversejs .brand-heading .icon-conversejs {
font-size: 80%; }
#conversejs .converse-chatboxes {
z-index: 1031;
position: fixed;
......@@ -6988,6 +7000,8 @@ body.reset {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
#conversejs .btn {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-weight: normal;
color: #fff; }
#conversejs .btn .fa {
color: #fff;
......@@ -7213,7 +7227,7 @@ body.reset {
margin: 0; }
@media screen and (max-width: 575px) {
body .brand-heading {
body .converse-brand-heading {
font-size: 3.75em; }
#conversejs:not(.converse-embedded) .chatbox .chat-body {
......@@ -7406,6 +7420,7 @@ body {
width: 100%;
height: 100vh; } }
#conversejs .chatbox .chat-title {
font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
color: white;
display: block;
line-height: 24px;
......@@ -7880,6 +7895,7 @@ body {
#conversejs #controlbox .controlbox-section {
margin: 1em 0 0 0; }
#conversejs #controlbox .controlbox-section .controlbox-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
margin: 0 0 0.5em 0;
text-transform: uppercase; }
#conversejs #controlbox .dropdown a {
......@@ -8134,6 +8150,7 @@ body {
text-shadow: 0 1px 0 #FAFAFA;
margin: 0.75em 0 0.75em 0; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
color: #666;
display: block;
width: 100%;
......@@ -8226,6 +8243,7 @@ body {
text-align: left;
padding: 0.3em 0; }
#conversejs .list-container .rooms-toggle {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
display: block;
color: #666;
padding: 0 0 0.5rem 0; }
......@@ -8431,8 +8449,8 @@ body {
padding: 0.5em; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
padding: 0.3em 0;
font-weight: bold; }
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
padding: 0.3em 0; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
width: 100%; }
......@@ -8726,7 +8744,11 @@ body {
padding-bottom: 0.25rem;
display: block; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
font-weight: bold; }
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-size: 115%; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author .badge {
font-size: 80%;
font-family: "Helvetica", "Arial", sans-serif; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
padding-left: 0.25em;
color: #8c8c8c; }
......
css/theme.css
View file @ 28bc3a22
......@@ -16,8 +16,8 @@ h4,
h5,
h6 {
margin: 0 0 35px;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
font-family: Futura,Trebuchet MS,Arial,sans-serif;
font-weight: normal;
letter-spacing: 1px;
}
p {
......@@ -131,11 +131,19 @@ a:focus {
.outro {
background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
}
.brand-heading {
font-size: 2em;
text-align: center;
margin-top: 2.5em;
font-family: Futura,Trebuchet MS,Arial,sans-serif;
font-weight: normal;
font-size: 2em;
text-align: center;
margin-top: 2.5em;
}
.brand-heading .icon-conversejs {
font-size: 60%;
}
.brand-heading-embedded {
margin-top: 1.5em;
}
......@@ -242,7 +250,7 @@ a:focus {
}
}
.btn {
font-family: FontAwesome;
font-family: Futura,Trebuchet MS,Arial,sans-serif;
font-weight: 400;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
......
dev.html
View file @ 28bc3a22
......@@ -17,7 +17,7 @@
<body class="reset">
<div class="content">
<div class="inner-content">
<h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1>
<h1 class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</h1>
</div>
</div>
......@@ -37,8 +37,8 @@
notify_all_room_messages: [
'discuss@conference.conversejs.org'
],
bosh_service_url: 'http://chat.example.org:5280/http-bind/',
// bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
// bosh_service_url: 'http://chat.example.org:5280/http-bind/',
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
message_archiving: 'always',
debug: true
});
......
index.html
View file @ 28bc3a22
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converse.js</title>
<title>Converse</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
......@@ -74,7 +74,7 @@
<section class="intro" class="container">
<div class="row">
<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
<h1 class="brand-heading converse-brand-heading"><i class="icon-conversejs"></i>Converse</h1>
<div class="col-md-8 col-md-offset-2">
<p class="intro-text">A free and open-source XMPP chat client in your browser</p>
<p>Now also available in a fullscreen version.
......@@ -105,7 +105,7 @@
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2><strong>Converse.js</strong> is written in Javascript and runs in your browser.</h2>
<h2>Converse is written in JavaScript and runs in your browser.</h2>
<p>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>Take a look at the <a href="/demo">demo page</a> for other examples of how Converse.js can be configured and used.</a>
......
sass/_chatbox.scss
View file @ 28bc3a22
......@@ -136,6 +136,7 @@
}
}
.chat-title {
font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
color: white;
display: block;
line-height: $line-height-large;
......
sass/_chatrooms.scss
View file @ 28bc3a22
......@@ -124,8 +124,8 @@
padding: 0.5em;
.occupants-heading {
font-family: $heading-font;
padding: 0.3em 0;
font-weight: bold;
}
.chatroom-features {
......
sass/_controlbox.scss
View file @ 28bc3a22
......@@ -244,6 +244,7 @@
margin: 1em 0 0 0;
.controlbox-heading {
font-family: $heading-font;
margin: 0 0 0.5em 0;
text-transform: uppercase;
}
......
sass/_core.scss
View file @ 28bc3a22
......@@ -22,8 +22,9 @@ body.reset {
}
.icon-conversejs {
padding-right: 0.2em;
padding-right: 0.5em;
font-family: 'Converse-js';
font-size: 80%;
speak: none;
font-style: normal;
font-weight: normal;
......@@ -39,6 +40,15 @@ body.reset {
content: "\e600";
}
.converse-brand-heading {
font-family: $heading-font;
font-size: 6em;
font-weight: normal;
.icon-conversejs {
font-size: 60%;
}
}
#conversejs {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
......@@ -49,6 +59,13 @@ body.reset {
display: block;
z-index: 1031; // One more than bootstrap navbar
.brand-heading {
font-family: $heading-font;
.icon-conversejs {
font-size: 80%;
}
}
.converse-chatboxes {
z-index: 1031; // One more than bootstrap navbar
position: fixed;
......@@ -230,6 +247,8 @@ body.reset {
}
.btn {
font-family: $heading-font;
font-weight: normal;
color: #fff;
.fa {
color: #fff;
......@@ -455,9 +474,9 @@ body.reset {
@media screen and (max-width: 575px) {
body {
.brand-heading {
.converse-brand-heading {
font-size: 3.75em;
}
}
}
#conversejs:not(.converse-embedded) {
.chatbox {
......
sass/_messages.scss
View file @ 28bc3a22
......@@ -136,7 +136,12 @@
display: block;
.chat-msg-author {
font-weight: bold;
font-family: $heading-font;
font-size: 115%;
.badge {
font-size: 80%;
font-family: $normal_font;
}
}
.chat-msg-time {
padding-left: 0.25em;
......
sass/_roomslist.scss
View file @ 28bc3a22
......@@ -4,6 +4,7 @@
padding: 0.3em 0;
.rooms-toggle {
font-family: $heading-font;
display: block;
color: $text-color;
padding: 0 0 0.5rem 0;
......
sass/_roster.scss
View file @ 28bc3a22
......@@ -66,6 +66,7 @@
&:hover {
color: $dark-gray-color;
}
font-family: $heading-font;
color: $text-color;
display: block;
width: 100%;
......
sass/_variables.scss
View file @ 28bc3a22
......@@ -107,6 +107,9 @@ $small-mobile-chat-height: 300px !default;
$font-path: "../fonticons/fonts/" !default;
$normal-font: "Helvetica", "Arial", sans-serif;
$heading-font: Futura,Helvetica,Trebuchet MS,Arial,sans-serif !default;
$chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default;
$chatroom-color-dark: $darkest-red !default;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7