Chapril/xmpp.chapril.org-conversejs
Chapril
/
xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fix various website CSS issues. Re-add images

This commit is contained in:
JC Brand 2019-08-09 00:16:47 +02:00
parent bc27b3a36a
commit a116a1ec8f
18 changed files with 83 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Makefile
View File

@ -129,7 +129,7 @@ dev: stamp-npm
## Builds
.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
$(SASS) --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass/website.scss $@
@ -137,9 +137,6 @@ dist/website.css:: stamp-npm sass
dist/website.min.css:: stamp-npm 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
npm run converse.css

2
demo/anonymous.html
View File

@ -19,7 +19,7 @@
<![endif]>
</head>
<body>
<body id="page-top" data-spy="scroll" class="converse-website">
<section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">

3
demo/embedded.html
View File

@ -9,7 +9,6 @@
<meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" />
<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" />
<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>
@ -24,7 +23,7 @@
</style>
</head>
<body id="page-top" data-spy="scroll">
<body id="page-top" data-spy="scroll" class="converse-website">
<section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">

2
demo/index.html
View File

@ -20,7 +20,7 @@
<![endif]>
</head>
<body id="page-top" data-spy="scroll">
<body id="page-top" data-spy="scroll" class="converse-website">
<section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">

26
images/bgbl.svg Normal file
View File

@ -0,0 +1,26 @@
<!--
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>
Side by Side

After

Width:  |  Height:  |  Size: 1009 B

26
images/bgtr.svg Normal file
View File

@ -0,0 +1,26 @@
<!--
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>
Side by Side

After

Width:  |  Height:  |  Size: 1015 B

BIN
images/header.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
images/overlay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

3
index.html
View File

@ -11,7 +11,6 @@
<!-- 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 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" />
<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>
@ -25,7 +24,7 @@
<![endif]>
</head>
<body id="page-top" data-spy="scroll">
<body id="page-top" data-spy="scroll" class="converse-website">
<section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">

1
mockup/chatbox.html
View File

@ -4,7 +4,6 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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" />
</head>

1
mockup/chatroom.html
View File

@ -4,7 +4,6 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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" />
</head>

1
mockup/fullscreen-login.html
View File

@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head>

1
mockup/overlayed-login.html
View File

@ -4,7 +4,6 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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" />
</head>

1
mockup/overlayed.html
View File

@ -4,7 +4,6 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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" />
</head>

45
sass/font-awesome.scss vendored
View File

@ -2,38 +2,38 @@
font-family: 'Baumans';
font-style: normal;
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-family: 'Muli';
font-style: normal;
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-family: 'ConverseFontAwesomeBrands';
font-style: normal;
font-weight: normal;
src: url('../webfonts/fa-brands-400.eot');
src: url('../webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fa-brands-400.woff2') format('woff2'),
url('../webfonts/fa-brands-400.woff') format('woff'),
url('../webfonts/fa-brands-400.ttf') format('truetype'),
url('../webfonts/fa-brands-400.svg#fontawesome') format('svg');
src: url('../dist/webfonts/fa-brands-400.eot');
src: url('../dist/webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
url('../dist/webfonts/fa-brands-400.woff2') format('woff2'),
url('../dist/webfonts/fa-brands-400.woff') format('woff'),
url('../dist/webfonts/fa-brands-400.ttf') format('truetype'),
url('../dist/webfonts/fa-brands-400.svg#fontawesome') format('svg');
}
@font-face {
font-family: 'ConverseFontAwesomeRegular';
font-style: normal;
font-weight: 400;
src: url('../webfonts/fa-regular-400.eot');
src: url('../webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fa-regular-400.woff2') format('woff2'),
url('../webfonts/fa-regular-400.woff') format('woff'),
url('../webfonts/fa-regular-400.ttf') format('truetype'),
url('../webfonts/fa-regular-400.svg#fontawesome') format('svg');
src: url('../dist/webfonts/fa-regular-400.eot');
src: url('../dist/webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('../dist/webfonts/fa-regular-400.woff2') format('woff2'),
url('../dist/webfonts/fa-regular-400.woff') format('woff'),
url('../dist/webfonts/fa-regular-400.ttf') format('truetype'),
url('../dist/webfonts/fa-regular-400.svg#fontawesome') format('svg');
font-weight: normal;
font-style: normal;
}
@ -42,14 +42,15 @@
font-family: 'ConverseFontAwesomeSolid';
font-style: normal;
font-weight: 900;
src: url('../webfonts/fa-solid-900.eot');
src: url('../webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fa-solid-900.svg#fontawesome') format('svg'),
url('../webfonts/fa-solid-900.woff2') format('woff2'),
url('../webfonts/fa-solid-900.woff') format('woff'),
url('../webfonts/fa-solid-900.ttf') format('truetype');
src: url('../dist/webfonts/fa-solid-900.eot');
src: url('../dist/webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('../dist/webfonts/fa-solid-900.svg#fontawesome') format('svg'),
url('../dist/webfonts/fa-solid-900.woff2') format('woff2'),
url('../dist/webfonts/fa-solid-900.woff') format('woff'),
url('../dist/webfonts/fa-solid-900.ttf') format('truetype');
}
@import "@fortawesome/fontawesome-free/scss/variables";
@import "@fortawesome/fontawesome-free/scss/mixins";
@import "@fortawesome/fontawesome-free/scss/core";
@ -63,7 +64,8 @@
@import "@fortawesome/fontawesome-free/scss/icons";
@import "@fortawesome/fontawesome-free/scss/screen-reader";
#conversejs {
#conversejs, .converse-website {
/* Apparent font-awesome bug? The circle has some kind of bottom margin */
.far {
font-family: 'ConverseFontAwesomeRegular' !important;
font-weight: 400;
@ -85,7 +87,6 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Apparent font-awesome bug? The circle has some kind of bottom margin */
.fa-info-circle {
height: 1em;
}

6
sass/website.scss
View File

@ -197,7 +197,7 @@ a {
.intro {
margin-top: -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;
-webkit-background-size: cover;
-moz-background-size: cover;
@ -205,13 +205,13 @@ a {
-o-background-size: cover;
}
.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 {
color: #82B397;
}
.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 {

1
tests/fullpage.html
View File

@ -7,7 +7,6 @@
<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 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" />
<script src="../dist/converse.js"></script>
<script src="../src/config.js"></script>

1
tests/transpiled.html
View File

@ -7,7 +7,6 @@
<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 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 type="text/css" rel="stylesheet" media="screen" href="../css/website.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />