Add a new theme for the website based on bootstrap.
https://github.com/IronSummitMedia/startbootstrap/tree/master/templates/grayscale
This commit is contained in:
JC Brand
parent
737e9e0de2
commit
3d2137a677
102
converse.css
102
converse.css
@ -20,7 +20,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Use the following CSS code if you want to use data attributes for inserting your icons */
|
/* Use the following CSS code if you want to use data attributes for inserting your icons */
|
||||||
[data-icon]:before {
|
#conversejs [data-icon]:before {
|
||||||
font-family: 'Converse-js';
|
font-family: 'Converse-js';
|
||||||
content: attr(data-icon);
|
content: attr(data-icon);
|
||||||
speak: none;
|
speak: none;
|
||||||
@ -409,6 +409,85 @@ you can use the generic selector below, but it's slower:
|
|||||||
right: 0;
|
right: 0;
|
||||||
z-index: 30;
|
z-index: 30;
|
||||||
display: block;
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#conversejs div,
|
||||||
|
#conversejs span,
|
||||||
|
#conversejs h1,
|
||||||
|
#conversejs h2,
|
||||||
|
#conversejs h3,
|
||||||
|
#conversejs h4,
|
||||||
|
#conversejs h5,
|
||||||
|
#conversejs h6,
|
||||||
|
#conversejs p,
|
||||||
|
#conversejs blockquote,
|
||||||
|
#conversejs pre,
|
||||||
|
#conversejs a,
|
||||||
|
#conversejs em,
|
||||||
|
#conversejs img,
|
||||||
|
#conversejs strong,
|
||||||
|
#conversejs dl,
|
||||||
|
#conversejs dt,
|
||||||
|
#conversejs dd,
|
||||||
|
#conversejs ol,
|
||||||
|
#conversejs ul,
|
||||||
|
#conversejs li,
|
||||||
|
#conversejs fieldset,
|
||||||
|
#conversejs form,
|
||||||
|
#conversejs label,
|
||||||
|
#conversejs legend,
|
||||||
|
#conversejs table,
|
||||||
|
#conversejs caption,
|
||||||
|
#conversejs tbody,
|
||||||
|
#conversejs tfoot,
|
||||||
|
#conversejs thead,
|
||||||
|
#conversejs tr,
|
||||||
|
#conversejs th,
|
||||||
|
#conversejs td,
|
||||||
|
#conversejs article,
|
||||||
|
#conversejs aside,
|
||||||
|
#conversejs canvas,
|
||||||
|
#conversejs details,
|
||||||
|
#conversejs embed,
|
||||||
|
#conversejs figure,
|
||||||
|
#conversejs figcaption,
|
||||||
|
#conversejs footer,
|
||||||
|
#conversejs header,
|
||||||
|
#conversejs hgroup,
|
||||||
|
#conversejs menu,
|
||||||
|
#conversejs nav,
|
||||||
|
#conversejs output,
|
||||||
|
#conversejs ruby,
|
||||||
|
#conversejs section,
|
||||||
|
#conversejs summary,
|
||||||
|
#conversejs time,
|
||||||
|
#conversejs mark,
|
||||||
|
#conversejs audio,
|
||||||
|
#conversejs video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#conversejs,
|
||||||
|
#conversejs input,
|
||||||
|
#conversejs textarea {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgb(79, 79, 79);
|
||||||
|
}
|
||||||
|
|
||||||
|
#conversejs ol,
|
||||||
|
#conversejs ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#conversejs li {
|
||||||
|
height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#conversejs a {
|
#conversejs a {
|
||||||
@ -417,32 +496,11 @@ you can use the generic selector below, but it's slower:
|
|||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#conversejs form {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversejs,
|
|
||||||
#conversejs input {
|
|
||||||
color: rgb(79, 79, 79);
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversejs a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversejs ol,
|
|
||||||
#conversejs ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversejs ul,
|
#conversejs ul,
|
||||||
#conversejs ol,
|
#conversejs ol,
|
||||||
#conversejs dl {
|
#conversejs dl {
|
||||||
border: 0;
|
|
||||||
font: inherit;
|
font: inherit;
|
||||||
margin: 0 0 15px 0;
|
margin: 0 0 15px 0;
|
||||||
padding: 0;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#conversejs .emoticon {
|
#conversejs .emoticon {
|
||||||
|
|||||||
BIN
css/images/bitcoin_qr_code.png
Normal file
BIN
css/images/bitcoin_qr_code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
@ -1,168 +0,0 @@
|
|||||||
/* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */
|
|
||||||
|
|
||||||
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}
|
|
||||||
|
|
||||||
/* Box Model */
|
|
||||||
|
|
||||||
*, *:before, *:after {
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-o-box-sizing: border-box;
|
|
||||||
-ms-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Container */
|
|
||||||
|
|
||||||
body {
|
|
||||||
min-width: 1200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 1200px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modifiers */
|
|
||||||
|
|
||||||
.container.small {
|
|
||||||
width: 900px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container.big {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1500px;
|
|
||||||
min-width: 1200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid */
|
|
||||||
|
|
||||||
/* Cells */
|
|
||||||
|
|
||||||
.\31 2u { width: 100% }
|
|
||||||
.\31 1u { width: 91.6666666667% }
|
|
||||||
.\31 0u { width: 83.3333333333% }
|
|
||||||
.\39 u { width: 75% }
|
|
||||||
.\38 u { width: 66.6666666667% }
|
|
||||||
.\37 u { width: 58.3333333333% }
|
|
||||||
.\36 u { width: 50% }
|
|
||||||
.\35 u { width: 41.6666666667% }
|
|
||||||
.\34 u { width: 33.3333333333% }
|
|
||||||
.\33 u { width: 25% }
|
|
||||||
.\32 u { width: 16.6666666667% }
|
|
||||||
.\31 u { width: 8.3333333333% }
|
|
||||||
.\-11u { margin-left: 91.6666666667% }
|
|
||||||
.\-10u { margin-left: 83.3333333333% }
|
|
||||||
.\-9u { margin-left: 75% }
|
|
||||||
.\-8u { margin-left: 66.6666666667% }
|
|
||||||
.\-7u { margin-left: 58.3333333333% }
|
|
||||||
.\-6u { margin-left: 50% }
|
|
||||||
.\-5u { margin-left: 41.6666666667% }
|
|
||||||
.\-4u { margin-left: 33.3333333333% }
|
|
||||||
.\-3u { margin-left: 25% }
|
|
||||||
.\-2u { margin-left: 16.6666666667% }
|
|
||||||
.\-1u { margin-left: 8.3333333333% }
|
|
||||||
|
|
||||||
.row > * {
|
|
||||||
padding: 50px 0 0 50px;
|
|
||||||
float: left;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-o-box-sizing: border-box;
|
|
||||||
-ms-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row + .row > * {
|
|
||||||
padding-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
margin-left: -50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Rows */
|
|
||||||
|
|
||||||
.row:after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
clear: both;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row:first-child > * {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row > * {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modifiers */
|
|
||||||
|
|
||||||
/* Flush */
|
|
||||||
|
|
||||||
.row.flush {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.flush > * {
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Quarter */
|
|
||||||
|
|
||||||
.row.quarter > * {
|
|
||||||
padding: 12.5px 0 0 12.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.quarter + .row.quarter > * {
|
|
||||||
padding-top: 12.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.quarter {
|
|
||||||
margin-left: -12.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Half */
|
|
||||||
|
|
||||||
.row.half > * {
|
|
||||||
padding: 25px 0 0 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.half + .row.half > * {
|
|
||||||
padding-top: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.half {
|
|
||||||
margin-left: -25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* One and (a) Half */
|
|
||||||
|
|
||||||
.row.oneandhalf > * {
|
|
||||||
padding: 75px 0 0 75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.oneandhalf + .row.oneandhalf > * {
|
|
||||||
padding-top: 75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.oneandhalf {
|
|
||||||
margin-left: -75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Double */
|
|
||||||
|
|
||||||
.row.double > * {
|
|
||||||
padding: 100px 0 0 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.double + .row.double > * {
|
|
||||||
padding-top: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.double {
|
|
||||||
margin-left: -100px;
|
|
||||||
}
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
/*
|
|
||||||
Tessellate 1.0 by HTML5 UP
|
|
||||||
html5up.net | @n33co
|
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Basic */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
body,input,textarea,select
|
|
||||||
{
|
|
||||||
font-size: 11pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sections/Articles */
|
|
||||||
|
|
||||||
section,
|
|
||||||
article,
|
|
||||||
.row > section,
|
|
||||||
.row > article
|
|
||||||
{
|
|
||||||
margin: 0 0 1.5em 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Buttons */
|
|
||||||
|
|
||||||
.button
|
|
||||||
{
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lists */
|
|
||||||
|
|
||||||
ul.icons
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.icons li
|
|
||||||
{
|
|
||||||
padding-left: 0.35em;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.actions
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.actions li
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
margin: 1em 0 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.menu
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.menu li
|
|
||||||
{
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: block;
|
|
||||||
margin: 1em 0 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Header */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
#header
|
|
||||||
{
|
|
||||||
padding: 6em 20px 6em 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header > header
|
|
||||||
{
|
|
||||||
padding: 0 1em 0 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Main Sections */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
.main
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > header
|
|
||||||
{
|
|
||||||
padding: 3em 20px 3em 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > header h2
|
|
||||||
{
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > .content
|
|
||||||
{
|
|
||||||
padding: 3em 20px 3em 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > .content h3
|
|
||||||
{
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
@ -1,124 +0,0 @@
|
|||||||
/*
|
|
||||||
Tessellate 1.0 by HTML5 UP
|
|
||||||
html5up.net | @n33co
|
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Basic */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
header, footer, h2, h3, h4, h5, h6
|
|
||||||
{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > p
|
|
||||||
{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sections/Articles */
|
|
||||||
|
|
||||||
section,
|
|
||||||
article,
|
|
||||||
.row > section,
|
|
||||||
.row > article
|
|
||||||
{
|
|
||||||
margin: 0 0 2.5em 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tables */
|
|
||||||
|
|
||||||
.table-wrapper
|
|
||||||
{
|
|
||||||
width: 100%;
|
|
||||||
overflow-x: scroll;
|
|
||||||
padding-left: 1px;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lists */
|
|
||||||
|
|
||||||
ul.actions
|
|
||||||
{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Header */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
#header
|
|
||||||
{
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 8em 2em 8em 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header header
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
#header header p
|
|
||||||
{
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header footer
|
|
||||||
{
|
|
||||||
padding-top: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Main Sections */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
.main
|
|
||||||
{
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > header
|
|
||||||
{
|
|
||||||
padding: 3.5em 2em 3.5em 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > header h2
|
|
||||||
{
|
|
||||||
font-size: 1.85em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > header br
|
|
||||||
{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > header p
|
|
||||||
{
|
|
||||||
margin: 1.5em 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > .content
|
|
||||||
{
|
|
||||||
padding: 3.5em 20px 3.5em 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > .content > .container > :last-child
|
|
||||||
{
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Footer */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
#footer
|
|
||||||
{
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 3em 0 3em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer .copyright
|
|
||||||
{
|
|
||||||
margin-top: 2em;
|
|
||||||
}
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
/*
|
|
||||||
Tessellate 1.0 by HTML5 UP
|
|
||||||
html5up.net | @n33co
|
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Basic */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
body,input,textarea,select
|
|
||||||
{
|
|
||||||
font-size: 13pt;
|
|
||||||
line-height: 1.65em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Feature Icon */
|
|
||||||
|
|
||||||
.feature-icon
|
|
||||||
{
|
|
||||||
margin-bottom: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Header */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
#header
|
|
||||||
{
|
|
||||||
padding: 12em 0 12em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Main Sections */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
.main
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > header
|
|
||||||
{
|
|
||||||
padding: 4em 0 4em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main > .content
|
|
||||||
{
|
|
||||||
padding: 4em 0 4em 0;
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
/*
|
|
||||||
Tessellate 1.0 by HTML5 UP
|
|
||||||
html5up.net | @n33co
|
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Basic */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
body,input,textarea,select
|
|
||||||
{
|
|
||||||
font-size: 15pt;
|
|
||||||
line-height: 1.75em;
|
|
||||||
}
|
|
||||||
1350
css/style.css
1350
css/style.css
File diff suppressed because it is too large
Load Diff
400
css/theme.css
Normal file
400
css/theme.css
Normal file
@ -0,0 +1,400 @@
|
|||||||
|
@charset 'UTF-8';
|
||||||
|
@font-face {
|
||||||
|
font-family:'FontAwesome';
|
||||||
|
src:url('font/fontawesome-webfont.eot?v=4.0.1');
|
||||||
|
src:url('font/fontawesome-webfont.eot?#iefix&v=4.0.1') format('embedded-opentype'),url('font/fontawesome-webfont.woff?v=4.0.1') format('woff'),url('font/fontawesome-webfont.ttf?v=4.0.1') format('truetype'),url('font/fontawesome-webfont.svg?v=4.0.1#fontawesomeregular') format('svg');
|
||||||
|
font-weight:normal;
|
||||||
|
font-style:normal
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin: 0 0 35px;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 25px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width:767px) {
|
||||||
|
p {
|
||||||
|
margin: 0 0 35px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #28c3ab;
|
||||||
|
-webkit-transition: all .2s ease-in-out;
|
||||||
|
-moz-transition: all .2s ease-in-out;
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
a:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #176e61;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,.3);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-custom a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-custom .nav li a {
|
||||||
|
-webkit-transition: background .3s ease-in-out;
|
||||||
|
-moz-transition: background .3s ease-in-out;
|
||||||
|
transition: background .3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-custom .nav li a:hover,
|
||||||
|
.navbar-custom .nav li a:focus,
|
||||||
|
.navbar-custom .nav li.active {
|
||||||
|
outline: 0;
|
||||||
|
background-color: rgba(255,255,255,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggle {
|
||||||
|
padding: 4px 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggle:focus,
|
||||||
|
.navbar-toggle:active {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width:767px) {
|
||||||
|
.navbar {
|
||||||
|
padding: 20px 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
background: 0 0;
|
||||||
|
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
|
||||||
|
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
|
||||||
|
transition: background .5s ease-in-out,padding .5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-nav-collapse {
|
||||||
|
padding: 0;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-custom.top-nav-collapse {
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
padding: 100px 0;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
background: url(images/header.jpg) no-repeat bottom center scroll;
|
||||||
|
background-color: #000;
|
||||||
|
-webkit-background-size: cover;
|
||||||
|
-moz-background-size: cover;
|
||||||
|
background-size: cover;
|
||||||
|
-o-background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-body {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-heading {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-text {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width:767px) {
|
||||||
|
.intro {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-heading {
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-text {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-circle {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding: 7px 16px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-radius: 35px;
|
||||||
|
font-size: 40px;
|
||||||
|
color: #fff;
|
||||||
|
background: 0 0;
|
||||||
|
-webkit-transition: background .3s ease-in-out;
|
||||||
|
-moz-transition: background .3s ease-in-out;
|
||||||
|
transition: background .3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-circle:hover,
|
||||||
|
.btn-circle:focus {
|
||||||
|
outline: 0;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(255,255,255,.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-scroll .btn-circle i.animated {
|
||||||
|
-webkit-transition-property: -webkit-transform;
|
||||||
|
-webkit-transition-duration: 1s;
|
||||||
|
-moz-transition-property: -moz-transform;
|
||||||
|
-moz-transition-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-scroll .btn-circle:hover i.animated {
|
||||||
|
-webkit-animation-name: pulse;
|
||||||
|
-moz-animation-name: pulse;
|
||||||
|
-webkit-animation-duration: 1.5s;
|
||||||
|
-moz-animation-duration: 1.5s;
|
||||||
|
-webkit-animation-iteration-count: infinite;
|
||||||
|
-moz-animation-iteration-count: infinite;
|
||||||
|
-webkit-animation-timing-function: linear;
|
||||||
|
-moz-animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes pulse {
|
||||||
|
0 {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: scale(1.2);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes pulse {
|
||||||
|
0 {
|
||||||
|
-moz-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-moz-transform: scale(1.2);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-moz-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
padding-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-section {
|
||||||
|
width: 100%;
|
||||||
|
padding: 50px 0;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-section p.bitcoin-header {
|
||||||
|
margin: 0 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width:767px) {
|
||||||
|
.content-section {
|
||||||
|
padding-top: 100px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-section {
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
font-weight: 400;
|
||||||
|
-webkit-transition: all .3s ease-in-out;
|
||||||
|
-moz-transition: all .3s ease-in-out;
|
||||||
|
transition: all .3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-default {
|
||||||
|
border: 1px solid #28c3ab;
|
||||||
|
color: #28c3ab;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-default:hover,
|
||||||
|
.btn-default:focus {
|
||||||
|
border: 1px solid #28c3ab;
|
||||||
|
outline: 0;
|
||||||
|
color: #000;
|
||||||
|
background-color: #28c3ab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-huge {
|
||||||
|
padding: 25px;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-social-buttons {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 4em;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:1199px) {
|
||||||
|
ul.banner-social-buttons {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:767px) {
|
||||||
|
ul.banner-social-buttons>li {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.banner-social-buttons>li:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #fcfcfc;
|
||||||
|
background: rgba(255,255,255,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #fcfcfc;
|
||||||
|
background: rgba(255,255,255,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
img::selection {
|
||||||
|
background: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img::-moz-selection {
|
||||||
|
background: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
webkit-tap-highlight-color: rgba(255,255,255,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.contact,
|
||||||
|
ul.integration,
|
||||||
|
ul.screencasts,
|
||||||
|
ul.features {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 5em;
|
||||||
|
margin-bottom: 2.75em;
|
||||||
|
cursor: default;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon .fa {
|
||||||
|
display: inline-block;
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
font-size: 4em;
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: inset 0 0 0 1px white;
|
||||||
|
color: white;
|
||||||
|
line-height: 2.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon:before {
|
||||||
|
content: '';
|
||||||
|
background: white;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -0.325em;
|
||||||
|
width: 0.65em;
|
||||||
|
height: 0.65em;
|
||||||
|
display: block;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0.65em;
|
||||||
|
width: 1px;
|
||||||
|
height: 4.35em;
|
||||||
|
background: white;
|
||||||
|
margin-left: -0.5px;
|
||||||
|
}
|
||||||
365
index.html
365
index.html
@ -1,190 +1,221 @@
|
|||||||
<!DOCTYPE HTML>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Converse.js</title>
|
<title>Converse.js</title>
|
||||||
<meta charset='utf-8' />
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="Converse.js: A free chat client for your website" />
|
<meta name="description" content="Converse.js: A free chat client for your website" />
|
||||||
|
<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 href="http://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic"
|
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||||
rel="stylesheet" type="text/css" />
|
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||||
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
|
<link href="css/theme.css" rel="stylesheet">
|
||||||
<script src="js/jquery.min.js"></script>
|
<link href="converse.css" rel="stylesheet" type="text/css" media="screen">
|
||||||
<script src="js/skel.min.js"></script>
|
|
||||||
<script src="js/init.js"></script>
|
|
||||||
<noscript>
|
|
||||||
<link rel="stylesheet" href="css/skel-noscript.css" />
|
|
||||||
<link rel="stylesheet" href="css/style.css" />
|
|
||||||
<link rel="stylesheet" href="css/style-wide.css" />
|
|
||||||
</noscript>
|
|
||||||
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
|
|
||||||
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
|
|
||||||
<link rel="stylesheet" type="text/css" media="screen" href="converse.css">
|
|
||||||
<script data-main="main" src="components/requirejs/require.js"></script>
|
<script data-main="main" src="components/requirejs/require.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
<!-- Header -->
|
|
||||||
<section id="header" class="dark" style="padding-top: 1em;">
|
|
||||||
<header>
|
|
||||||
<ul class="icons" style="margin-bottom: 13em;">
|
|
||||||
<li><a href="https://twitter.com/jcopkode" target="_blank" class="fa fa-twitter solo" title="Twitter"><span>Twitter</span></a></li>
|
|
||||||
<li><a href="#" target="_blank" class="fa fa-github solo" title="GitHub"><span>GitHub</span></a></li>
|
|
||||||
<li><a href="#" target="_blank" class="fa fa-dribbble solo" title="XMPP"><span>XMPP</span></a></li>
|
|
||||||
</ul>
|
|
||||||
</header>
|
|
||||||
<header>
|
|
||||||
<h1>Converse.js</h1>
|
|
||||||
<p>An XMPP/Jabber webchat client for your website</p>
|
|
||||||
</header>
|
|
||||||
<footer>
|
|
||||||
<a href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank">Download</a>
|
|
||||||
<a href="#first" class="button scrolly">Learn More</a>
|
|
||||||
</footer>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- First -->
|
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
|
||||||
<section id="first" class="main">
|
|
||||||
<header>
|
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2><strong>Converse.js</strong> is a free and open source webchat client that runs in the browser and can be integrated into any website.</h3>
|
<div class="navbar-header page-scroll">
|
||||||
<p>Similar to <a href="https://www.facebook.com/sitetour/chat.php" target="_blank">Facebook chat</a> but it also supports multi-user chatrooms.</p>
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
|
||||||
<p>
|
<i class="fa fa-bars"></i>
|
||||||
<strong>Converse.js</strong> can connect to any accessible <a href="http://xmpp.org" target="_blank">XMPP/Jabber</a> server,
|
</button>
|
||||||
either from a public provider such as <a href="http://jabber.org">jabber.org</a>, or one you have set up yourself.
|
<a class="navbar-brand" href="#page-top">
|
||||||
</p>
|
<i class="fa fa-play-circle"></i> <span class="light">Home</span>
|
||||||
<p>
|
</a>
|
||||||
It's possible to enable single-site-login, whereby users already authenticated in your website will also automatically be logged in on the chat server.
|
</div>
|
||||||
Please refer to the <strong><a target="_blank" href="/docs/html/index.html">documentation</a></strong> for more info.
|
|
||||||
</p>
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||||
</div>
|
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
|
||||||
</header>
|
<ul class="nav navbar-nav">
|
||||||
<div class="content dark style1 featured">
|
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
|
||||||
<div class="container">
|
<li class="hidden">
|
||||||
<div class="row">
|
<a href="#page-top"></a>
|
||||||
<div class="4u">
|
</li>
|
||||||
<section>
|
<li class="page-scroll">
|
||||||
<span class="feature-icon"><span class="fa fa-cloud"></span></span>
|
<a href="#about">About</a>
|
||||||
<header>
|
</li>
|
||||||
<h3>Integration</h3>
|
<li class="page-scroll">
|
||||||
</header>
|
<a href="#features">Features</a>
|
||||||
<ul class="integration">
|
</li>
|
||||||
<li><a href="http://github.com/collective/collective.xmpp.chat" target="_blank">Plone</a></li>
|
<li class="page-scroll">
|
||||||
<li><a href="https://pypi.python.org/pypi/django-conversejs" target="_blank">Django</a></li>
|
<a href="#donate">Donate</a>
|
||||||
<li><a href="https://github.com/priyadi/roundcube-converse.js-xmpp-plugin" target="_blank">Roundcube</a></li>
|
</li>
|
||||||
<li><a href="http://wordpress.org/plugins/conversejs" target="_blank">Wordpress</a></li>
|
<li class="page-scroll">
|
||||||
</ul>
|
<a href="#contact">Contact</a>
|
||||||
</section>
|
</li>
|
||||||
</div>
|
<li class="page-scroll">
|
||||||
<div class="4u">
|
<a href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank">Download</a>
|
||||||
<section>
|
</li>
|
||||||
<span class="feature-icon"><span class="fa fa-bolt"></span></span>
|
<li class="page-scroll">
|
||||||
</section>
|
<a href="/docs/html/index.html" target="_blank">Documentation</a>
|
||||||
<header>
|
</li>
|
||||||
<h3>Features</h3>
|
</ul>
|
||||||
</header>
|
</div>
|
||||||
<ul class="features">
|
<!-- /.navbar-collapse -->
|
||||||
<li>Single-user chat</li>
|
</div>
|
||||||
<li>Multi-user chatrooms (<a href="http://xmpp.org/extensions/xep-0045.html" target="_blank">XEP 45</a>)</li>
|
<!-- /.container -->
|
||||||
<li>vCard support (<a href="http://xmpp.org/extensions/xep-0054.html" target="_blank">XEP 54</a>)</li>
|
</nav>
|
||||||
<li>Service discovery (<a href="http://xmpp.org/extensions/xep-0030.html" target="_blank">XEP 30</a>)</li>
|
|
||||||
<li>Contact rosters</li>
|
<section class="intro">
|
||||||
<li>Contact subscriptions</li>
|
<div class="intro-body">
|
||||||
<li>Accept or decline contact requests</li>
|
<div class="container">
|
||||||
<li>Roster item exchange (<a href="http://xmpp.org/extensions/tmp/xep-0144-1.1.html" target="_blank">XEP 144</a>)</li>
|
<div class="row">
|
||||||
<li>Chat statuses (online, busy, away, offline)</li>
|
<div class="col-md-8 col-md-offset-2">
|
||||||
<li>Custom status messages</li>
|
<h1 class="brand-heading">Converse.js</h1>
|
||||||
<li>Typing notifications</li>
|
<p class="intro-text">An XMPP/Jabber webchat client for your website</p>
|
||||||
<li>Third person messages (/me )</li>
|
<div class="page-scroll">
|
||||||
<li>Translated into 13 languages</li>
|
<a href="#about" class="btn btn-default btn-lg">Learn More</a>
|
||||||
<li>Off-the-record encryption (via <a href="http://arlolra.github.io/otr/" target="_blank">OTR.js</a>)</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="4u">
|
|
||||||
<section>
|
|
||||||
<span class="feature-icon"><span class="fa fa-clock-o"></span></span>
|
|
||||||
<header>
|
|
||||||
<h3>Screencasts</h3>
|
|
||||||
</header>
|
|
||||||
<ul class="screencasts">
|
|
||||||
<li>
|
|
||||||
<a href="http://opkode.com/media/blog/instant-messaging-for-plone-with-javascript-and-xmpp" target="_blank">
|
|
||||||
In a Plone site.
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="http://opkode.com/media/blog/2013/04/02/converse.js-xmpp-instant-messaging-with-javascript" target="_blank">
|
|
||||||
Chatting with buddies from Jabber.org and Gmail.
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://opkode.com/media/blog/2013/11/11/conversejs-otr-support" target="_blank">
|
|
||||||
Off-the-record encryption.
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
</section>
|
<div class="col-md-8 col-md-offset-2 banner-social-buttons">
|
||||||
|
<ul class="list-inline">
|
||||||
<!-- Second -->
|
<li><a href="https://twitter.com/jcopkode" class="btn btn-circle btn-lg" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
|
||||||
<section id="second" class="main">
|
</li>
|
||||||
<header>
|
<li><a href="https://github.com/jcbrand/converse.js" class="btn btn-circle btn-lg" title="GitHub" target="_blank"><i class="fa fa-github"></i></a>
|
||||||
<div class="container">
|
</li>
|
||||||
<h2>Is it secure?</h2>
|
</ul>
|
||||||
<p>
|
</div>
|
||||||
<strong>Converse.js</strong> uses <a href="https://en.wikipedia.org/wiki/Transport_Layer_Security">TLS</a> to make
|
|
||||||
encrypted HTTPS requests to a <em>connection manager</em>, which in turn makes a TLS encrypted connection to your XMPP server (if the server supports it).
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
If you are planning on integrating <strong>converse.js</strong> in your own website, it's important that you serve your pages via <a href="https://en.wikipedia.org/wiki/Https">HTTPS</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
That said, the developers don't assume any liability for any loss or damages as a result of using this software. Use at your own risk.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</div>
|
||||||
<div class="content dark style2">
|
</div>
|
||||||
<div class="container">
|
</section>
|
||||||
<h3>Licence</h3>
|
|
||||||
<p>The <a href="https://www.mozilla.org/MPL/2.0/index.txt" target="_blank">Mozilla Public License (MPL)</a>.</p>
|
|
||||||
|
|
||||||
<h3>Documentation</h3>
|
<section id="about" class="container content-section text-center">
|
||||||
<p>
|
<div class="row">
|
||||||
The documentation is included in the source download under the <strong>docs</strong>
|
<div class="col-lg-8 col-lg-offset-2">
|
||||||
folder, or <a href="/docs/html/index.html" target="_blank">can be read online</a>.
|
<h2><strong>Converse.js</strong> is a free and open source chat client that runs in your browser and can be integrated into any website.</h3>
|
||||||
</p>
|
<p>Similar to <a href="https://www.facebook.com/sitetour/chat.php" target="_blank">Facebook chat</a> but it also supports multi-user chatrooms.</p>
|
||||||
|
<p>
|
||||||
|
<strong>Converse.js</strong> can connect to any accessible <a href="http://xmpp.org" target="_blank">XMPP/Jabber</a> server,
|
||||||
|
either from a public provider such as <a href="http://jabber.org">jabber.org</a>, or one you have set up yourself.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
It's possible to enable single-site-login, whereby users already authenticated in your website will also automatically be logged in on the chat server.
|
||||||
|
Please refer to the <strong><a target="_blank" href="/docs/html/index.html">documentation</a></strong> for more info.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="intro content-section" id="features">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<section>
|
||||||
|
<span class="feature-icon"><span class="fa fa-globe"></span></span>
|
||||||
|
<header>
|
||||||
|
<h2>Integration</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="integration">
|
||||||
|
<li><a href="http://github.com/collective/collective.xmpp.chat" target="_blank">Plone</a></li>
|
||||||
|
<li><a href="https://pypi.python.org/pypi/django-conversejs" target="_blank">Django</a></li>
|
||||||
|
<li><a href="https://github.com/priyadi/roundcube-converse.js-xmpp-plugin" target="_blank">Roundcube</a></li>
|
||||||
|
<li><a href="http://wordpress.org/plugins/conversejs" target="_blank">Wordpress</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<section>
|
||||||
|
<span class="feature-icon"><span class="fa fa-check-square-o"></span></span>
|
||||||
|
</section>
|
||||||
|
<header>
|
||||||
|
<h2>Features</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="features">
|
||||||
|
<li>Single-user chat</li>
|
||||||
|
<li>Multi-user chatrooms (<a href="http://xmpp.org/extensions/xep-0045.html" target="_blank">XEP 45</a>)</li>
|
||||||
|
<li>vCard support (<a href="http://xmpp.org/extensions/xep-0054.html" target="_blank">XEP 54</a>)</li>
|
||||||
|
<li>Service discovery (<a href="http://xmpp.org/extensions/xep-0030.html" target="_blank">XEP 30</a>)</li>
|
||||||
|
<li>Contact rosters</li>
|
||||||
|
<li>Contact subscriptions</li>
|
||||||
|
<li>Accept or decline contact requests</li>
|
||||||
|
<li>Roster item exchange (<a href="http://xmpp.org/extensions/tmp/xep-0144-1.1.html" target="_blank">XEP 144</a>)</li>
|
||||||
|
<li>Chat statuses (online, busy, away, offline)</li>
|
||||||
|
<li>Custom status messages</li>
|
||||||
|
<li>Typing notifications</li>
|
||||||
|
<li>Third person messages (/me )</li>
|
||||||
|
<li>Translated into 13 languages</li>
|
||||||
|
<li>Off-the-record encryption
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<section>
|
||||||
|
<span class="feature-icon"><span class="fa fa-video-camera"></span></span>
|
||||||
|
<header>
|
||||||
|
<h2>Screencasts</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="screencasts">
|
||||||
|
<li>
|
||||||
|
<a href="http://opkode.com/media/blog/instant-messaging-for-plone-with-javascript-and-xmpp" target="_blank">
|
||||||
|
In a Plone site
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://opkode.com/media/blog/2013/04/02/converse.js-xmpp-instant-messaging-with-javascript" target="_blank">
|
||||||
|
Chatting with buddies from Jabber.org and Gmail
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://opkode.com/media/blog/2013/11/11/conversejs-otr-support" target="_blank">
|
||||||
|
Off-the-record encryption
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="donate" class="donate-section content-section text-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 col-lg-offset-2">
|
||||||
<h3>Donate</h3>
|
<h3>Donate</h3>
|
||||||
<p><strong>Bitcoin:</strong> 16FsPqE9DhFTryxrUenpsGX4LJ1TPu8GqS</p>
|
<p>Thank you for your donations. They allow me to spend more time working on <strong>converse.js</strong>.
|
||||||
|
|
||||||
<h3>Contact</h3>
|
|
||||||
<p>
|
|
||||||
<ul class="default">
|
|
||||||
<li>Follow me on <a href="http://twitter.com/jcopkode" target="_blank">Twitter</a>.</li>
|
|
||||||
<li>Chat with me via XMPP: <a href="xmpp:jc@opkode.com" class="xmpp JSnocheck" title="XMPP/Jabber">jc@opkode.com</a>.</li>
|
|
||||||
<li>For <strong>support queries</strong>, please write to the mailing list: <a href="mailto:conversejs@librelist.com">conversejs@librelist.com</a>.</li>
|
|
||||||
<li>Please <a target="_blank" href="https://github.com/jcbrand/converse.js/issues">file <strong>bugs</strong> on Github</a>.</li>
|
|
||||||
<li>I'm available for special features and consulting work. Please <a href="http://opkode.com/contact" target="_blank">contact me here</a>.</li>
|
|
||||||
<ul>
|
|
||||||
</p>
|
</p>
|
||||||
|
<p class="bitcoin-header"><strong>Bitcoin</strong></p>
|
||||||
|
<img src="css/images/bitcoin_qr_code.png"/>
|
||||||
|
<p>16FsPqE9DhFTryxrUenpsGX4LJ1TPu8GqS</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Footer -->
|
<section class="intro content-section" id="contact">
|
||||||
<section id="footer">
|
<div class="intro-body">
|
||||||
<div class="copyright">
|
<div class="container">
|
||||||
<ul class="menu">
|
<div class="row">
|
||||||
<li>© <a href="http://opkode.com" target="_blank">JC Brand</a></li>
|
<div class="col-lg-8 col-lg-offset-2">
|
||||||
<li>Design: <a href="http://html5up.net/">HTML5 UP</a></li>
|
<h2>Contact</h2>
|
||||||
</ul>
|
<p>
|
||||||
|
<ul class="contact">
|
||||||
|
<li>Follow me on <a href="http://twitter.com/jcopkode" target="_blank">Twitter</a>.</li>
|
||||||
|
<li>Chat with me via XMPP: <a href="xmpp:jc@opkode.com" class="xmpp JSnocheck" title="XMPP/Jabber">jc@opkode.com</a>.</li>
|
||||||
|
<li>For <strong>support queries</strong>, please write to: <a href="mailto:conversejs@librelist.com">conversejs@librelist.com</a>.</li>
|
||||||
|
<li>Please <a target="_blank" href="https://github.com/jcbrand/converse.js/issues">file <strong>bugs</strong> on Github</a>.</li>
|
||||||
|
<li>I'm available for features and consulting. Please <a href="http://opkode.com/contact" target="_blank">contact me here</a>.</li>
|
||||||
|
<ul>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Core JavaScript Files -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||||
|
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
|
||||||
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
|
||||||
|
<!-- Custom Theme JavaScript -->
|
||||||
|
<script src="js/init.js"></script>
|
||||||
|
|
||||||
<div id="conversejs"></div>
|
<div id="conversejs"></div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
98
js/init.js
98
js/init.js
@ -1,81 +1,19 @@
|
|||||||
/*
|
//jQuery to collapse the navbar on scroll
|
||||||
Tessellate 1.0 by HTML5 UP
|
$(window).scroll(function() {
|
||||||
html5up.net | @n33co
|
if ($(".navbar").offset().top > 50) {
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
$(".navbar-fixed-top").addClass("top-nav-collapse");
|
||||||
*/
|
} else {
|
||||||
|
$(".navbar-fixed-top").removeClass("top-nav-collapse");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
/*********************************************************************************/
|
//jQuery for page scrolling feature - requires jQuery Easing plugin
|
||||||
/* Settings */
|
$(function() {
|
||||||
/*********************************************************************************/
|
$('.page-scroll a').bind('click', function(event) {
|
||||||
|
var $anchor = $(this);
|
||||||
var _settings = {
|
$('html, body').stop().animate({
|
||||||
|
scrollTop: $($anchor.attr('href')).offset().top
|
||||||
// skelJS
|
}, 700, 'easeInOutExpo');
|
||||||
skelJS: {
|
event.preventDefault();
|
||||||
prefix: 'css/style',
|
});
|
||||||
resetCSS: true,
|
});
|
||||||
boxModel: 'border',
|
|
||||||
containers: 1200,
|
|
||||||
useOrientation: true,
|
|
||||||
breakpoints: {
|
|
||||||
'widest': { range: '*', containers: 1360, grid: { gutters: 50 }, hasStyleSheet: false },
|
|
||||||
'wide': { range: '-1680', containers: 1200, grid: { gutters: 40 } },
|
|
||||||
'normal': { range: '-1280', containers: 960, grid: { gutters: 30 }, lockViewport: true },
|
|
||||||
'narrow': { range: '-1000', containers: '100%', grid: { gutters: 25, collapse: true }, lockViewport: true },
|
|
||||||
'mobile': { range: '-640', containers: '100%', grid: { gutters: 10, collapse: true }, lockViewport: true }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* jQuery Plugins */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
// formerize
|
|
||||||
jQuery.fn.n33_formerize=function(){var _fakes=new Array(),_form = jQuery(this);_form.find('input[type=text],textarea').each(function() { var e = jQuery(this); if (e.val() == '' || e.val() == e.attr('placeholder')) { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).blur(function() { var e = jQuery(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).focus(function() { var e = jQuery(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); _form.find('input[type=password]').each(function() { var e = jQuery(this); var x = jQuery(jQuery('<div>').append(e.clone()).remove().html().replace(/type="password"/i, 'type="text"').replace(/type=password/i, 'type=text')); if (e.attr('id') != '') x.attr('id', e.attr('id') + '_fakeformerizefield'); if (e.attr('name') != '') x.attr('name', e.attr('name') + '_fakeformerizefield'); x.addClass('formerize-placeholder').val(x.attr('placeholder')).insertAfter(e); if (e.val() == '') e.hide(); else x.hide(); e.blur(function(event) { event.preventDefault(); var e = jQuery(this); var x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } }); x.focus(function(event) { event.preventDefault(); var x = jQuery(this); var e = x.parent().find('input[name=' + x.attr('name').replace('_fakeformerizefield', '') + ']'); x.hide(); e.show().focus(); }); x.keypress(function(event) { event.preventDefault(); x.val(''); }); }); _form.submit(function() { jQuery(this).find('input[type=text],input[type=password],textarea').each(function(event) { var e = jQuery(this); if (e.attr('name').match(/_fakeformerizefield$/)) e.attr('name', ''); if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); }).bind("reset", function(event) { event.preventDefault(); jQuery(this).find('select').val(jQuery('option:first').val()); jQuery(this).find('input,textarea').each(function() { var e = jQuery(this); var x; e.removeClass('formerize-placeholder'); switch (this.type) { case 'submit': case 'reset': break; case 'password': e.val(e.attr('defaultValue')); x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } else { e.show(); x.hide(); } break; case 'checkbox': case 'radio': e.attr('checked', e.attr('defaultValue')); break; case 'text': case 'textarea': e.val(e.attr('defaultValue')); if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } break; default: e.val(e.attr('defaultValue')); break; } }); window.setTimeout(function() { for (x in _fakes) _fakes[x].trigger('formerize_sync'); }, 10); }); return _form; };
|
|
||||||
|
|
||||||
// scrolly
|
|
||||||
jQuery.fn.n33_scrolly = function(offset) {
|
|
||||||
|
|
||||||
jQuery(this).click(function(e) {
|
|
||||||
var h = jQuery(this).attr('href'), target;
|
|
||||||
|
|
||||||
if (h.charAt(0) == '#' && h.length > 1 && (target = jQuery(h)).length > 0)
|
|
||||||
{
|
|
||||||
var pos = Math.max(target.offset().top, 0);
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (offset)
|
|
||||||
{
|
|
||||||
if (typeof(offset) == 'function')
|
|
||||||
pos -= (offset)();
|
|
||||||
else
|
|
||||||
pos -= offset;
|
|
||||||
}
|
|
||||||
|
|
||||||
jQuery('body,html').animate({ scrollTop: pos }, 1000, 'swing');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/*********************************************************************************/
|
|
||||||
/* Initialize */
|
|
||||||
/*********************************************************************************/
|
|
||||||
|
|
||||||
// skelJS
|
|
||||||
skel.init(_settings.skelJS);
|
|
||||||
|
|
||||||
// jQuery
|
|
||||||
jQuery(function() {
|
|
||||||
|
|
||||||
var $window = $(window);
|
|
||||||
|
|
||||||
// Scrolly links
|
|
||||||
$('.scrolly').n33_scrolly();
|
|
||||||
|
|
||||||
// Forms
|
|
||||||
if (skel.vars.IEVersion < 10)
|
|
||||||
$('form').n33_formerize();
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|||||||
412
less/theme.less
Normal file
412
less/theme.less
Normal file
@ -0,0 +1,412 @@
|
|||||||
|
// Variables
|
||||||
|
|
||||||
|
@primary: #28c3ab;
|
||||||
|
@dark: #000;
|
||||||
|
@light: #fff;
|
||||||
|
|
||||||
|
// LESS
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||||
|
color: @light;
|
||||||
|
background-color: @dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Typhography
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin: 0 0 35px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 25px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width:767px) {
|
||||||
|
p {
|
||||||
|
margin: 0 0 35px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: @primary;
|
||||||
|
-webkit-transition: all .2s ease-in-out;
|
||||||
|
-moz-transition: all .2s ease-in-out;
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
a:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
color: darken(@primary, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navigation
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.3);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||||
|
background-color: @dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-custom a {
|
||||||
|
color: @light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-custom .nav li a {
|
||||||
|
-webkit-transition: background .3s ease-in-out;
|
||||||
|
-moz-transition: background .3s ease-in-out;
|
||||||
|
transition: background .3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-custom .nav li a:hover,
|
||||||
|
.navbar-custom .nav li a:focus,
|
||||||
|
.navbar-custom .nav li.active {
|
||||||
|
outline: none;
|
||||||
|
background-color: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggle {
|
||||||
|
padding: 4px 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: @light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggle:focus,
|
||||||
|
.navbar-toggle:active {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width:767px) {
|
||||||
|
.navbar {
|
||||||
|
padding: 20px 0;
|
||||||
|
border-bottom: none;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
background: transparent;
|
||||||
|
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
|
||||||
|
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
|
||||||
|
transition: background .5s ease-in-out,padding .5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-nav-collapse {
|
||||||
|
padding: 0;
|
||||||
|
background-color: @dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-custom.top-nav-collapse {
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Full Page Image Intro Section
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
padding: 100px 0;
|
||||||
|
text-align: center;
|
||||||
|
color: @light;
|
||||||
|
background: url(images/header.jpg) no-repeat bottom center scroll;
|
||||||
|
background-color: @dark;
|
||||||
|
-webkit-background-size: cover;
|
||||||
|
-moz-background-size: cover;
|
||||||
|
background-size: cover;
|
||||||
|
-o-background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-body {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-heading {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-text {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width:767px) {
|
||||||
|
.intro {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-heading {
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-text {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-circle {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding: 7px 16px;
|
||||||
|
border: 2px solid @light;
|
||||||
|
border-radius: 35px;
|
||||||
|
font-size: 40px;
|
||||||
|
color: @light;
|
||||||
|
background: transparent;
|
||||||
|
-webkit-transition: background .3s ease-in-out;
|
||||||
|
-moz-transition: background .3s ease-in-out;
|
||||||
|
transition: background .3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-circle:hover,
|
||||||
|
.btn-circle:focus {
|
||||||
|
outline: none;
|
||||||
|
color: @light;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-scroll .btn-circle i.animated {
|
||||||
|
-webkit-transition-property: -webkit-transform;
|
||||||
|
-webkit-transition-duration: 1s;
|
||||||
|
-moz-transition-property: -moz-transform;
|
||||||
|
-moz-transition-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-scroll .btn-circle:hover i.animated {
|
||||||
|
-webkit-animation-name: pulse;
|
||||||
|
-moz-animation-name: pulse;
|
||||||
|
-webkit-animation-duration: 1.5s;
|
||||||
|
-moz-animation-duration: 1.5s;
|
||||||
|
-webkit-animation-iteration-count: infinite;
|
||||||
|
-moz-animation-iteration-count: infinite;
|
||||||
|
-webkit-animation-timing-function: linear;
|
||||||
|
-moz-animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes pulse {
|
||||||
|
0 {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: scale(1.2);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes pulse {
|
||||||
|
0 {
|
||||||
|
-moz-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-moz-transform: scale(1.2);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-moz-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Content Sections
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
padding-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-section {
|
||||||
|
width: 100%;
|
||||||
|
padding: 50px 0;
|
||||||
|
color: @light;
|
||||||
|
background-color: @dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-section p.bitcoin-header {
|
||||||
|
margin: 0 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width:767px) {
|
||||||
|
.content-section {
|
||||||
|
padding-top: 100px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-section {
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
font-weight: 400;
|
||||||
|
-webkit-transition: all .3s ease-in-out;
|
||||||
|
-moz-transition: all .3s ease-in-out;
|
||||||
|
transition: all .3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-default {
|
||||||
|
border: 1px solid @primary;
|
||||||
|
color: @primary;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-default:hover,
|
||||||
|
.btn-default:focus {
|
||||||
|
border: 1px solid @primary;
|
||||||
|
outline: none;
|
||||||
|
color: @dark;
|
||||||
|
background-color: @primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-huge {
|
||||||
|
padding: 25px;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-social-buttons {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 4em;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:1199px) {
|
||||||
|
ul.banner-social-buttons {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:767px) {
|
||||||
|
ul.banner-social-buttons > li {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.banner-social-buttons > li:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Highlight Color Customization
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #fcfcfc;
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #fcfcfc;
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
img::selection {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
img::-moz-selection {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
webkit-tap-highlight-color: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.contact,
|
||||||
|
ul.integration,
|
||||||
|
ul.screencasts,
|
||||||
|
ul.features {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 5em;
|
||||||
|
margin-bottom: 2.75em;
|
||||||
|
cursor: default;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon .fa {
|
||||||
|
display: inline-block;
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
font-size: 4em;
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: inset 0 0 0 1px white;
|
||||||
|
color: white;
|
||||||
|
line-height: 2.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon:before {
|
||||||
|
content: '';
|
||||||
|
background: white;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -0.325em;
|
||||||
|
width: 0.65em;
|
||||||
|
height: 0.65em;
|
||||||
|
display: block;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0.65em;
|
||||||
|
width: 1px;
|
||||||
|
height: 4.35em;
|
||||||
|
background: white;
|
||||||
|
margin-left: -0.5px;
|
||||||
|
}
|
||||||
@ -1 +0,0 @@
|
|||||||
{"name":"Converse.js","tagline":"Browser-based Instant Messaging with Strophe.js and Backbone.js","body":"``Converse.js`` implements an [XMPP](http://xmpp.org) based instant messaging client in the browser.\r\n\r\nIt is used by [collective.xmpp.chat](http://github.com/collective/collective.xmpp.chat), which is a [Plone](http://plone.org) instant messaging add-on.\r\n\r\nThe ultimate goal is to enable anyone to add chat functionality to their websites, regardless of the backend.\r\n\r\nCurrently this is not yet the case, as the code makes ajax calls to the (Plone) backend\r\nto fetch user info. \r\n\r\n--------\r\nFeatures\r\n--------\r\n\r\nIt has the following features:\r\n\r\n* Manually or automically subscribe to other users.\r\n* With manual roster subscriptions, you can accept or decline contact requests.\r\n* Chat statuses (online, busy, away, offline)\r\n* Custom status message\r\n* Typing notifications (i.e when the contact is typing)\r\n* Third person messages (/me )\r\n* Multi-user chat in chatrooms\r\n* Topics can be set for chatrooms\r\n* Full name and profile picture support\r\n\r\nA screencast of ``Converse.js`` in action via ``collective.xmpp.chat`` can be seen [here](http://opkode.com/media/blog/instant-messaging-for-plone-with-javascript-and-xmpp).\r\n\r\nIt depends on quite a few third party libraries, including [strophe.js](http://strophe.im/strophejs),\r\n[backbone.js](http:/backbonejs.org) and [require.js](http:/requirejs.org).\r\n\r\n-------\r\nLicence\r\n-------\r\n\r\n``Converse.js`` is released under both the [MIT](http://opensource.org/licenses/mit-license.php) and [GPL](http://opensource.org/licenses/gpl-license.php) licenses.\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
|
|
||||||
Loading…
Reference in New Issue
Block a user