diff --git a/css/converse.css b/css/converse.css index d229c3167..a9f621892 100644 --- a/css/converse.css +++ b/css/converse.css @@ -11,6 +11,12 @@ font-weight: 400; src: local("Baumans Regular"), local("Baumans-Regular"), url(webfonts/baumans.ttf) format("truetype"); } +@font-face { + font-family: 'Muli'; + font-style: normal; + font-weight: 400; + src: local("Muli Regular"), local("Muli-Regular"), url(webfonts/muli.ttf) format("truetype"); } + @font-face { font-family: 'ConverseFontAwesomeBrands'; font-style: normal; @@ -9357,7 +9363,8 @@ readers do not read off random characters that represent icons */ --mobile-chat-width: 100%; --mobile-chat-height: 400px; --normal-font: "Helvetica", "Arial", sans-serif; - --heading-font: 'Baumans', cursive; + --heading-font: 'Muli', normal; + --branding-font: 'Baumans', cursive; --heading-display: block; --heading-color: white; --chatroom-head-color: #E77051; @@ -9553,7 +9560,7 @@ body.reset { max-width: 83.33333%; } } .converse-brand__text { - font-family: var(--heading-font); + font-family: var(--branding-font); font-weight: normal; width: 50%; margin: auto; @@ -9599,7 +9606,7 @@ body.reset { font-size: 200%; display: inline-flex; align-items: flex-end; - font-family: var(--heading-font); } + font-family: var(--branding-font); } #conversejs .brand-heading:hover .brand-name { color: var(--link-color); } #conversejs .brand-heading .converse-svg-logo { @@ -11943,7 +11950,8 @@ body.reset { text-overflow: ellipsis; white-space: nowrap; font-family: var(--heading-font); - font-size: 115%; } + font-size: 115%; + font-weight: bold; } #conversejs .message.chat-msg .chat-msg__heading .chat-msg__author .badge { font-size: 80%; font-family: var(--normal_font); } diff --git a/css/webfonts/muli.ttf b/css/webfonts/muli.ttf new file mode 100644 index 000000000..0753befd3 Binary files /dev/null and b/css/webfonts/muli.ttf differ diff --git a/css/website.css b/css/website.css index 3da9e1846..2a5ab7994 100644 --- a/css/website.css +++ b/css/website.css @@ -5091,7 +5091,7 @@ img::-moz-selection { h1, h2, h3, h4, h5, h6 { margin: 0 0 35px; - font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-family: 'Muli', sans-serif; font-weight: normal; letter-spacing: 1px; } @@ -5127,10 +5127,10 @@ a { word-spacing: 50px; } .byline { - font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-family: 'Muli', sans-serif; font-size: 28px; - opacity: 0.6; - margin-bottom: 3em; } + opacity: 0.5; + margin-bottom: 2em; } #about p { opacity: 0.9; } @@ -5139,7 +5139,7 @@ a { font-weight: 400; } .navbar { - font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-family: 'Muli', sans-serif; margin-bottom: 0; background: transparent; font-size: 95%; @@ -5337,7 +5337,7 @@ section h4 { padding: 100px 0; } } .btn { - font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-family: 'Muli', sans-serif; font-weight: 400; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; diff --git a/index.html b/index.html index aab645e5a..b68e6a5ef 100644 --- a/index.html +++ b/index.html @@ -71,28 +71,6 @@
-

- - converse

-

converse.js

- +

A free and open-source XMPP chat client in your browser

+

Try out the fullpage version

diff --git a/sass/_core.scss b/sass/_core.scss index 76f5d8de6..9721c0b63 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -71,7 +71,7 @@ body.reset { } .converse-brand__text { - font-family: var(--heading-font); + font-family: var(--branding-font); font-weight: normal; width: 50%; margin: auto; @@ -138,7 +138,7 @@ body.reset { font-size: 200%; display: inline-flex; align-items: flex-end; - font-family: var(--heading-font); + font-family: var(--branding-font); &:hover { .brand-name { color: var(--link-color); diff --git a/sass/_messages.scss b/sass/_messages.scss index 1a4530f56..25ed7b442 100644 --- a/sass/_messages.scss +++ b/sass/_messages.scss @@ -218,6 +218,7 @@ white-space: nowrap; font-family: var(--heading-font); font-size: 115%; + font-weight: bold; .badge { font-size: 80%; font-family: var(--normal_font); diff --git a/sass/_variables.scss b/sass/_variables.scss index cf1a8c749..0b847e31e 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -92,7 +92,8 @@ $mobile_portrait_length: 480px !default; // --font-path: "webfonts/icomoon/fonts/"; --normal-font: "Helvetica", "Arial", sans-serif; - --heading-font: 'Baumans', cursive; + --heading-font: 'Muli', normal; + --branding-font: 'Baumans', cursive; --heading-display: block; --heading-color: white; diff --git a/sass/font-awesome.scss b/sass/font-awesome.scss index a7a4daf7a..f9e26baf5 100644 --- a/sass/font-awesome.scss +++ b/sass/font-awesome.scss @@ -5,6 +5,13 @@ src: local('Baumans Regular'), local('Baumans-Regular'), url(webfonts/baumans.ttf) format('truetype'); } +@font-face { + font-family: 'Muli'; + font-style: normal; + font-weight: 400; + src: local('Muli Regular'), local('Muli-Regular'), url(webfonts/muli.ttf) format('truetype'); +} + @font-face { font-family: 'ConverseFontAwesomeBrands'; font-style: normal; diff --git a/sass/website.scss b/sass/website.scss index cfa2d25e5..3cd4abfc4 100644 --- a/sass/website.scss +++ b/sass/website.scss @@ -49,7 +49,7 @@ img::-moz-selection { h1, h2, h3, h4, h5, h6 { margin: 0 0 35px; - font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-family: 'Muli', sans-serif; font-weight: normal; letter-spacing: 1px; } @@ -94,11 +94,10 @@ a { } } .byline { - font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-family: 'Muli', sans-serif; font-size: 28px; - opacity: 0.6; - // color: #E7A151; - margin-bottom: 3em; + opacity: 0.5; + margin-bottom: 2em; } #about { @@ -112,7 +111,7 @@ a { } .navbar { - font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-family: 'Muli', sans-serif; margin-bottom: 0; background: transparent; font-size: 95%; @@ -353,7 +352,7 @@ section { } } .btn { - font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-family: 'Muli', sans-serif; font-weight: 400; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;