Skip to content

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

Fix various website CSS issues. Re-add images

parent bc27b3a3
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 42 deletions
Makefile
View file @ a116a1ec
...@@ -129,7 +129,7 @@ dev: stamp-npm ...@@ -129,7 +129,7 @@ dev: stamp-npm
## Builds ## Builds
.PHONY: css .PHONY: css
css: sass/*.scss dist/converse.css dist/converse.min.css dist/website.css dist/website.min.css dist/font-awesome.css css: sass/*.scss dist/converse.css dist/converse.min.css dist/website.css dist/website.min.css
dist/website.css:: stamp-npm sass dist/website.css:: stamp-npm sass
$(SASS) --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass/website.scss $@ $(SASS) --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass/website.scss $@
...@@ -137,9 +137,6 @@ dist/website.css:: stamp-npm sass ...@@ -137,9 +137,6 @@ dist/website.css:: stamp-npm sass
dist/website.min.css:: stamp-npm dist/website.css dist/website.min.css:: stamp-npm dist/website.css
$(CLEANCSS) dist/website.css > $@ $(CLEANCSS) dist/website.css > $@
dist/font-awesome.css:: stamp-npm sass
$(SASS) --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass/font-awesome.scss $@
dist/converse.css:: stamp-npm webpack.config.js sass dist/converse.css:: stamp-npm webpack.config.js sass
npm run converse.css npm run converse.css
......
demo/anonymous.html
View file @ a116a1ec
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<![endif]> <![endif]>
</head> </head>
<body> <body id="page-top" data-spy="scroll" class="converse-website">
<section class="section-wrapper"> <section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation"> <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
......
demo/embedded.html
View file @ a116a1ec
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
<meta name="author" content="JC Brand" /> <meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" /> <meta name="keywords" content="xmpp chat webchat converse.js" />
<link rel="shortcut icon" type="image/ico" href="../images/favicon.ico"/> <link rel="shortcut icon" type="image/ico" href="../images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.0/dist/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.0/dist/website.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.0/dist/website.min.css" />
<script type="text/javascript" src="/analytics.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> <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
...@@ -24,7 +23,7 @@ ...@@ -24,7 +23,7 @@
</style> </style>
</head> </head>
<body id="page-top" data-spy="scroll"> <body id="page-top" data-spy="scroll" class="converse-website">
<section class="section-wrapper"> <section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation"> <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
......
demo/index.html
View file @ a116a1ec
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<![endif]> <![endif]>
</head> </head>
<body id="page-top" data-spy="scroll"> <body id="page-top" data-spy="scroll" class="converse-website">
<section class="section-wrapper"> <section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation"> <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
......
images/bgbl.svg 0 → 100644
View file @ a116a1ec
<!--
Tessellate 1.0 by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" zoomAndPan="disable">
<style type="text/css"><![CDATA[
line
{
stroke: rgba(255,255,255,0.1);
stroke-width: 0.85px;
}
]]></style>
<line x1="-180" y1="0" x2="820" y2="1000" />
<line x1="-380" y1="0" x2="620" y2="1000" />
<line x1="-530" y1="0" x2="470" y2="1000" />
<line x1="-655" y1="0" x2="345" y2="1000" />
<line x1="-755" y1="0" x2="245" y2="1000" />
<line x1="-830" y1="0" x2="170" y2="1000" />
<line x1="-880" y1="0" x2="120" y2="1000" />
<line x1="-920" y1="0" x2="80" y2="1000" />
<line x1="-950" y1="0" x2="50" y2="1000" />
<line x1="-970" y1="0" x2="30" y2="1000" />
<line x1="-985" y1="0" x2="15" y2="1000" />
<line x1="-995" y1="0" x2="5" y2="1000" />
</svg>
\ No newline at end of file
images/bgtr.svg 0 → 100644
View file @ a116a1ec
<!--
Tessellate 1.0 by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" zoomAndPan="disable">
<style type="text/css"><![CDATA[
line
{
stroke: rgba(255,255,255,0.1);
stroke-width: 0.85px;
}
]]></style>
<line x1="180" y1="0" x2="1180" y2="1000" />
<line x1="380" y1="0" x2="1380" y2="1000" />
<line x1="530" y1="0" x2="1530" y2="1000" />
<line x1="655" y1="0" x2="1655" y2="1000" />
<line x1="755" y1="0" x2="1775" y2="1000" />
<line x1="830" y1="0" x2="1830" y2="1000" />
<line x1="880" y1="0" x2="1880" y2="1000" />
<line x1="920" y1="0" x2="1920" y2="1000" />
<line x1="950" y1="0" x2="1970" y2="1000" />
<line x1="970" y1="0" x2="1970" y2="1000" />
<line x1="985" y1="0" x2="1985" y2="1000" />
<line x1="995" y1="0" x2="1995" y2="1000" />
</svg>
\ No newline at end of file
index.html
View file @ a116a1ec
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
<!-- These files are NOT needed when using converse.js in your own project. --> <!-- These files are NOT needed when using converse.js in your own project. -->
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/> <link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.0/dist/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.0/dist/website.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.0/dist/website.min.css" />
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript> <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="/src/website.js"></script>
...@@ -25,7 +24,7 @@ ...@@ -25,7 +24,7 @@
<![endif]> <![endif]>
</head> </head>
<body id="page-top" data-spy="scroll"> <body id="page-top" data-spy="scroll" class="converse-website">
<section class="section-wrapper"> <section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation"> <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
......
mockup/chatbox.html
View file @ a116a1ec
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Converse.js Mockups</title> <title>Converse.js Mockups</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head> </head>
......
mockup/chatroom.html
View file @ a116a1ec
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chatroom Fullscreen</title> <title>Chatroom Fullscreen</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head> </head>
......
mockup/fullscreen-login.html
View file @ a116a1ec
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Fullscreen</title> <title>Login Fullscreen</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head> </head>
......
mockup/overlayed-login.html
View file @ a116a1ec
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Overlayed</title> <title>Login Overlayed</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head> </head>
......
mockup/overlayed.html
View file @ a116a1ec
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overlayed chats</title> <title>Overlayed chats</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head> </head>
......
sass/font-awesome.scss
View file @ a116a1ec
...@@ -2,38 +2,38 @@ ...@@ -2,38 +2,38 @@
font-family: 'Baumans'; font-family: 'Baumans';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Baumans Regular'), local('Baumans-Regular'), url('../webfonts/baumans.ttf') format('truetype'); src: local('Baumans Regular'), local('Baumans-Regular'), url('../dist/webfonts/baumans.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Muli'; font-family: 'Muli';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Muli Regular'), local('Muli-Regular'), url('../webfonts/muli.ttf') format('truetype'); src: local('Muli Regular'), local('Muli-Regular'), url('../dist/webfonts/muli.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'ConverseFontAwesomeBrands'; font-family: 'ConverseFontAwesomeBrands';
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
src: url('../webfonts/fa-brands-400.eot'); src: url('../dist/webfonts/fa-brands-400.eot');
src: url('../webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'), src: url('../dist/webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fa-brands-400.woff2') format('woff2'), url('../dist/webfonts/fa-brands-400.woff2') format('woff2'),
url('../webfonts/fa-brands-400.woff') format('woff'), url('../dist/webfonts/fa-brands-400.woff') format('woff'),
url('../webfonts/fa-brands-400.ttf') format('truetype'), url('../dist/webfonts/fa-brands-400.ttf') format('truetype'),
url('../webfonts/fa-brands-400.svg#fontawesome') format('svg'); url('../dist/webfonts/fa-brands-400.svg#fontawesome') format('svg');
} }
@font-face { @font-face {
font-family: 'ConverseFontAwesomeRegular'; font-family: 'ConverseFontAwesomeRegular';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url('../webfonts/fa-regular-400.eot'); src: url('../dist/webfonts/fa-regular-400.eot');
src: url('../webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'), src: url('../dist/webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fa-regular-400.woff2') format('woff2'), url('../dist/webfonts/fa-regular-400.woff2') format('woff2'),
url('../webfonts/fa-regular-400.woff') format('woff'), url('../dist/webfonts/fa-regular-400.woff') format('woff'),
url('../webfonts/fa-regular-400.ttf') format('truetype'), url('../dist/webfonts/fa-regular-400.ttf') format('truetype'),
url('../webfonts/fa-regular-400.svg#fontawesome') format('svg'); url('../dist/webfonts/fa-regular-400.svg#fontawesome') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
...@@ -42,14 +42,15 @@ ...@@ -42,14 +42,15 @@
font-family: 'ConverseFontAwesomeSolid'; font-family: 'ConverseFontAwesomeSolid';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
src: url('../webfonts/fa-solid-900.eot'); src: url('../dist/webfonts/fa-solid-900.eot');
src: url('../webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'), src: url('../dist/webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fa-solid-900.svg#fontawesome') format('svg'), url('../dist/webfonts/fa-solid-900.svg#fontawesome') format('svg'),
url('../webfonts/fa-solid-900.woff2') format('woff2'), url('../dist/webfonts/fa-solid-900.woff2') format('woff2'),
url('../webfonts/fa-solid-900.woff') format('woff'), url('../dist/webfonts/fa-solid-900.woff') format('woff'),
url('../webfonts/fa-solid-900.ttf') format('truetype'); url('../dist/webfonts/fa-solid-900.ttf') format('truetype');
} }
@import "@fortawesome/fontawesome-free/scss/variables"; @import "@fortawesome/fontawesome-free/scss/variables";
@import "@fortawesome/fontawesome-free/scss/mixins"; @import "@fortawesome/fontawesome-free/scss/mixins";
@import "@fortawesome/fontawesome-free/scss/core"; @import "@fortawesome/fontawesome-free/scss/core";
...@@ -63,7 +64,8 @@ ...@@ -63,7 +64,8 @@
@import "@fortawesome/fontawesome-free/scss/icons"; @import "@fortawesome/fontawesome-free/scss/icons";
@import "@fortawesome/fontawesome-free/scss/screen-reader"; @import "@fortawesome/fontawesome-free/scss/screen-reader";
#conversejs { #conversejs, .converse-website {
/* Apparent font-awesome bug? The circle has some kind of bottom margin */
.far { .far {
font-family: 'ConverseFontAwesomeRegular' !important; font-family: 'ConverseFontAwesomeRegular' !important;
font-weight: 400; font-weight: 400;
...@@ -85,7 +87,6 @@ ...@@ -85,7 +87,6 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
/* Apparent font-awesome bug? The circle has some kind of bottom margin */
.fa-info-circle { .fa-info-circle {
height: 1em; height: 1em;
} }
......
sass/website.scss
View file @ a116a1ec
...@@ -197,7 +197,7 @@ a { ...@@ -197,7 +197,7 @@ a {
.intro { .intro {
margin-top: -4em; margin-top: -4em;
height: calc(100vh + 4em); height: calc(100vh + 4em);
background: url(images/header.jpg) no-repeat bottom center scroll; background: url(../images/header.jpg) no-repeat bottom center scroll;
background-color: #211018; background-color: #211018;
-webkit-background-size: cover; -webkit-background-size: cover;
-moz-background-size: cover; -moz-background-size: cover;
...@@ -205,13 +205,13 @@ a { ...@@ -205,13 +205,13 @@ a {
-o-background-size: cover; -o-background-size: cover;
} }
.features-section { .features-section {
background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #85505f, #384955, #655361); background: url('../images/bgtr.svg') top right no-repeat, url('../images/bgbl.svg') bottom left no-repeat, url('../images/bgbl.svg') bottom left no-repeat, url('../images/overlay.png'), linear-gradient(45deg, #85505f, #384955, #655361);
} }
.features-section a { .features-section a {
color: #82B397; color: #82B397;
} }
.outro { .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); 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);
} }
section { section {
......
tests/fullpage.html
View file @ a116a1ec
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
<link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/images/jasmine_favicon.png"> <link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/images/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" media="screen" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css"> <link rel="stylesheet" type="text/css" media="screen" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<link type="text/css" rel="stylesheet" media="screen" href="../node_modules/font-awesome/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />
<script src="../dist/converse.js"></script> <script src="../dist/converse.js"></script>
<script src="../src/config.js"></script> <script src="../src/config.js"></script>
......
tests/transpiled.html
View file @ a116a1ec
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
<link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/images/jasmine_favicon.png"> <link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/images/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" media="screen" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css"> <link rel="stylesheet" type="text/css" media="screen" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<link type="text/css" rel="stylesheet" media="screen" href="../node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/jasmine.css"> <link rel="stylesheet" type="text/css" media="screen" href="../css/jasmine.css">
<link type="text/css" rel="stylesheet" media="screen" href="../css/website.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../css/website.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />
......
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