Commit b241f8c6 authored by JC Brand's avatar JC Brand

Add new font set with an icon for converse.js

and one for logging out. Also added a favicon.
parent 7b6dfff9
......@@ -7,8 +7,8 @@
*/
@font-face {
font-family: 'Converse-js';
src: url('../fonticons/fonts/icomoon.eot?-5hv4s0');
src: url('../fonticons/fonts/icomoon.eot?#iefix-5hv4s0') format('embedded-opentype'), url('../fonticons/fonts/icomoon.woff?-5hv4s0') format('woff'), url('../fonticons/fonts/icomoon.ttf?-5hv4s0') format('truetype'), url('../fonticons/fonts/icomoon.svg?-5hv4s0#icomoon') format('svg');
src: url('../fonticons/fonts/icomoon.eot?-mnoxh0');
src: url('../fonticons/fonts/icomoon.eot?#iefix-mnoxh0') format('embedded-opentype'), url('../fonticons/fonts/icomoon.woff?-mnoxh0') format('woff'), url('../fonticons/fonts/icomoon.ttf?-mnoxh0') format('truetype'), url('../fonticons/fonts/icomoon.svg?-mnoxh0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
......@@ -38,6 +38,21 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-conversejs {
font-family: 'Converse-js';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-conversejs:before {
content: "\e600";
}
#conversejs .icon-closed:before {
content: "\25ba";
}
......@@ -307,6 +322,9 @@
#conversejs .icon-dnd:before {
content: "\e004";
}
#conversejs .icon-exit:before {
content: "\e601";
}
#conversejs .no-text-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
......
......@@ -16,7 +16,6 @@ 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;
......
......@@ -9,10 +9,23 @@
<link rel="stylesheet" href="style.css"></head>
<body>
<div class="bgc1 clearfix">
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;89)</small></h1>
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;91)</small></h1>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn bshadow fgc1">Grid Size: 16</h1>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="icon-conversejs"></span><span class="mls"> icon-conversejs</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e600" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe600;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="icon-closed"></span><span class="mls"> icon-closed</span>
......@@ -93,7 +106,7 @@
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="icon-camera2"></span><span class="mls"> icon-camera2</span>
<span class="icon-camera-2"></span><span class="mls"> icon-camera-2</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="2616" class="unit size1of2" />
......@@ -106,7 +119,7 @@
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="icon-play22"></span><span class="mls"> icon-play22</span>
<span class="icon-play"></span><span class="mls"> icon-play</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="25d9" class="unit size1of2" />
......@@ -223,7 +236,7 @@
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="icon-bubble"></span><span class="mls"> icon-bubble</span>
<span class="icon-online"></span><span class="mls"> icon-online</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="25fc" class="unit size1of2" />
......@@ -236,7 +249,7 @@
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="icon-bubble2"></span><span class="mls"> icon-bubble2</span>
<span class="icon-away"></span><span class="mls"> icon-away</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="25fb" class="unit size1of2" />
......@@ -431,7 +444,7 @@
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="icon-lock2"></span><span class="mls"> icon-lock2</span>
<span class="icon-lock-2"></span><span class="mls"> icon-lock-2</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e027" class="unit size1of2" />
......@@ -457,7 +470,7 @@
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="icon-key2"></span><span class="mls"> icon-key2</span>
<span class="icon-key-2"></span><span class="mls"> icon-key-2</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e029" class="unit size1of2" />
......@@ -1107,7 +1120,7 @@
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="icon-info2"></span><span class="mls"> icon-info2</span>
<span class="icon-room-info"></span><span class="mls"> icon-room-info</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e059" class="unit size1of2" />
......@@ -1170,6 +1183,19 @@
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="icon-exit"></span><span class="mls"> icon-exit</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e601" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe601;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
</div>
<!--[if gt IE 8]><!-->
......
......@@ -96,4 +96,6 @@
<glyph unicode="&#xe058;" d="M256 480c-141.385 0-256-114.615-256-256s114.615-256 256-256 256 114.615 256 256-114.615 256-256 256zM384 306.745l-82.744-82.745 82.744-82.744v-45.256h-45.256l-82.744 82.744-82.745-82.744h-45.255v45.256l82.745 82.744-82.745 82.745v45.255h45.255l82.745-82.745 82.744 82.745h45.256v-45.255z" />
<glyph unicode="&#xe059;" d="M256 480c-141.385 0-256-114.615-256-256s114.615-256 256-256 256 114.615 256 256-114.615 256-256 256zM224 384h64v-64h-64v64zM320 64h-128v32h32v128h-32v32h96v-160h32v-32z" />
<glyph unicode="&#xe05a;" d="M0 272v-96c0-8.836 7.164-16 16-16h480c8.836 0 16 7.164 16 16v96c0 8.836-7.164 16-16 16h-480c-8.836 0-16-7.164-16-16z" />
<glyph unicode="&#xe600;" d="M39.349 399.017c-17.206 0-31.051-13.844-31.051-31.051v-361.923c0-17.207 13.845-31.068 31.051-31.068h323.589c17.207 0 31.068 13.861 31.068 31.068v361.923c0 17.207-13.861 31.051-31.068 31.051h-323.589zM46.803 392.288h309.317c16.698 0 30.151-13.454 30.151-30.151v-118.928l-46.498-52.778h-269.841l-5.207-4.325-47.364-54.733-0.761 83.5 0.242 2.526c-0.109 1.043-0.173 2.092-0.173 3.166v141.571c0 16.698 13.437 30.152 30.134 30.152zM274.731 341.379c-27.38 0-49.578-22.182-49.578-49.561s22.198-49.578 49.578-49.578c27.38 0 49.578 22.198 49.578 49.578s-22.199 49.561-49.578 49.561zM125.65 133.691c0.425 0.010 0.853 0 1.28 0 27.38 0 49.56-22.181 49.56-49.56s-22.181-49.578-49.56-49.578c-27.38 0-49.578 22.199-49.578 49.578 0 26.952 21.51 48.882 48.298 49.56z" horiz-adv-x="410" />
<glyph unicode="&#xe601;" d="M384 160v64h-160v64h160v64l96-96zM352 192v-128h-160v-96l-192 96v416h352v-160h-32v128h-256l128-64v-288h128v96z" />
</font></defs></svg>
\ No newline at end of file
This diff is collapsed.
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-5hv4s0');
src:url('fonts/icomoon.eot?#iefix-5hv4s0') format('embedded-opentype'),
url('fonts/icomoon.woff?-5hv4s0') format('woff'),
url('fonts/icomoon.ttf?-5hv4s0') format('truetype'),
url('fonts/icomoon.svg?-5hv4s0#icomoon') format('svg');
src:url('fonts/icomoon.eot?-mnoxh0');
src:url('fonts/icomoon.eot?#iefix-mnoxh0') format('embedded-opentype'),
url('fonts/icomoon.woff?-mnoxh0') format('woff'),
url('fonts/icomoon.ttf?-mnoxh0') format('truetype'),
url('fonts/icomoon.svg?-mnoxh0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
......@@ -23,270 +23,276 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-closed:before {
#conversejs .icon-conversejs:before {
content: "\e600";
}
#conversejs .icon-closed:before {
content: "\25ba";
}
.icon-opened:before {
#conversejs .icon-opened:before {
content: "\25bc";
}
.icon-checkmark:before {
#conversejs .icon-checkmark:before {
content: "\2713";
}
.icon-home:before {
#conversejs .icon-home:before {
content: "\e000";
}
.icon-pencil:before {
#conversejs .icon-pencil:before {
content: "\270e";
}
.icon-camera:before {
#conversejs .icon-camera:before {
content: "\e003";
}
.icon-camera2:before {
#conversejs .icon-camera-2:before {
content: "\2616";
}
.icon-play22:before {
#conversejs .icon-play:before {
content: "\25d9";
}
.icon-music:before {
#conversejs .icon-music:before {
content: "\266b";
}
.icon-headphones:before {
#conversejs .icon-headphones:before {
content: "\266c";
}
.icon-phone:before {
#conversejs .icon-phone:before {
content: "\260f";
}
.icon-phone-hang-up:before {
#conversejs .icon-phone-hang-up:before {
content: "\260e";
}
.icon-address-book:before {
#conversejs .icon-address-book:before {
content: "\270f";
}
.icon-notebook:before {
#conversejs .icon-notebook:before {
content: "\2710";
}
.icon-envelop:before {
#conversejs .icon-envelop:before {
content: "\2709";
}
.icon-pushpin:before {
#conversejs .icon-pushpin:before {
content: "\e012";
}
.icon-bubble:before {
#conversejs .icon-online:before {
content: "\25fc";
}
.icon-bubble2:before {
#conversejs .icon-away:before {
content: "\25fb";
}
.icon-bubbles:before {
#conversejs .icon-bubbles:before {
content: "\e015";
}
.icon-bubbles2:before {
#conversejs .icon-bubbles2:before {
content: "\e016";
}
.icon-bubbles3:before {
#conversejs .icon-bubbles3:before {
content: "\e017";
}
.icon-user:before {
#conversejs .icon-user:before {
content: "\e01a";
}
.icon-hide-users:before {
#conversejs .icon-hide-users:before {
content: "\e01c";
}
.icon-show-users:before {
#conversejs .icon-show-users:before {
content: "\e01e";
}
.icon-users:before {
#conversejs .icon-users:before {
content: "\e01b";
}
.icon-quotes-left:before {
#conversejs .icon-quotes-left:before {
content: "\e01d";
}
.icon-spinner:before {
#conversejs .icon-spinner:before {
content: "\231b";
}
.icon-search:before {
#conversejs .icon-search:before {
content: "\e021";
}
.icon-cogs:before {
#conversejs .icon-cogs:before {
content: "\e022";
}
.icon-wrench:before {
#conversejs .icon-wrench:before {
content: "\e024";
}
.icon-unlocked:before {
#conversejs .icon-unlocked:before {
content: "\e025";
}
.icon-lock:before {
#conversejs .icon-lock:before {
content: "\e026";
}
.icon-lock2:before {
#conversejs .icon-lock-2:before {
content: "\e027";
}
.icon-key:before {
#conversejs .icon-key:before {
content: "\e028";
}
.icon-key2:before {
#conversejs .icon-key-2:before {
content: "\e029";
}
.icon-zoomout:before {
#conversejs .icon-zoomout:before {
content: "\e02a";
}
.icon-zoomin:before {
#conversejs .icon-zoomin:before {
content: "\e02b";
}
.icon-cog:before {
#conversejs .icon-cog:before {
content: "\e02f";
}
.icon-remove:before {
#conversejs .icon-remove:before {
content: "\e02d";
}
.icon-eye:before {
#conversejs .icon-eye:before {
content: "\e030";
}
.icon-eye-blocked:before {
#conversejs .icon-eye-blocked:before {
content: "\e031";
}
.icon-attachment:before {
#conversejs .icon-attachment:before {
content: "\e032";
}
.icon-globe:before {
#conversejs .icon-globe:before {
content: "\e033";
}
.icon-heart:before {
#conversejs .icon-heart:before {
content: "\2764";
}
.icon-happy:before {
#conversejs .icon-happy:before {
content: "\263b";
}
.icon-thumbs-up:before {
#conversejs .icon-thumbs-up:before {
content: "\261d";
}
.icon-smiley:before {
#conversejs .icon-smiley:before {
content: "\263a";
}
.icon-tongue:before {
#conversejs .icon-tongue:before {
content: "\e038";
}
.icon-sad:before {
#conversejs .icon-sad:before {
content: "\2639";
}
.icon-wink:before {
#conversejs .icon-wink:before {
content: "\e03a";
}
.icon-wondering:before {
#conversejs .icon-wondering:before {
content: "\2369";
}
.icon-confused:before {
#conversejs .icon-confused:before {
content: "\2368";
}
.icon-shocked:before {
#conversejs .icon-shocked:before {
content: "\2364";
}
.icon-evil:before {
#conversejs .icon-evil:before {
content: "\261f";
}
.icon-angry:before {
#conversejs .icon-angry:before {
content: "\e03f";
}
.icon-cool:before {
#conversejs .icon-cool:before {
content: "\e040";
}
.icon-grin:before {
#conversejs .icon-grin:before {
content: "\e041";
}
.icon-info:before {
#conversejs .icon-info:before {
content: "\2360";
}
.icon-notification:before {
#conversejs .icon-notification:before {
content: "\e01f";
}
.icon-warning:before {
#conversejs .icon-warning:before {
content: "\26a0";
}
.icon-spell-check:before {
#conversejs .icon-spell-check:before {
content: "\e045";
}
.icon-volume-high:before {
#conversejs .icon-volume-high:before {
content: "\e046";
}
.icon-volume-medium:before {
#conversejs .icon-volume-medium:before {
content: "\e047";
}
.icon-volume-low:before {
#conversejs .icon-volume-low:before {
content: "\e048";
}
.icon-volume-mute:before {
#conversejs .icon-volume-mute:before {
content: "\e049";
}
.icon-volume-mute2:before {
#conversejs .icon-volume-mute2:before {
content: "\e04a";
}
.icon-volume-decrease:before {
#conversejs .icon-volume-decrease:before {
content: "\e04b";
}
.icon-volume-increase:before {
#conversejs .icon-volume-increase:before {
content: "\e04c";
}
.icon-bold:before {
#conversejs .icon-bold:before {
content: "\e04d";
}
.icon-underline:before {
#conversejs .icon-underline:before {
content: "\e04e";
}
.icon-italic:before {
#conversejs .icon-italic:before {
content: "\e04f";
}
.icon-strikethrough:before {
#conversejs .icon-strikethrough:before {
content: "\e050";
}
.icon-newtab:before {
#conversejs .icon-newtab:before {
content: "\e053";
}
.icon-youtube:before {
#conversejs .icon-youtube:before {
content: "\e055";
}
.icon-close:before {
#conversejs .icon-close:before {
content: "\2715";
}
.icon-blocked:before {
#conversejs .icon-blocked:before {
content: "\2718";
}
.icon-cancel-circle:before {
#conversejs .icon-cancel-circle:before {
content: "\e058";
}
.icon-minus:before {
#conversejs .icon-minus:before {
content: "\e05a";
}
.icon-plus:before {
#conversejs .icon-plus:before {
content: "\271a";
}
.icon-checkbox-checked:before {
#conversejs .icon-checkbox-checked:before {
content: "\2611";
}
.icon-checkbox-unchecked:before {
#conversejs .icon-checkbox-unchecked:before {
content: "\2b27";
}
.icon-checkbox-partial:before {
#conversejs .icon-checkbox-partial:before {
content: "\2b28";
}
.icon-radio-checked:before {
#conversejs .icon-radio-checked:before {
content: "\2b26";
}
.icon-radio-unchecked:before {
#conversejs .icon-radio-unchecked:before {
content: "\2b25";
}
.icon-info2:before {
#conversejs .icon-room-info:before {
content: "\e059";
}
.icon-newspaper:before {
#conversejs .icon-newspaper:before {
content: "\e001";
}
.icon-image:before {
#conversejs .icon-image:before {
content: "\2b14";
}
.icon-offline:before {
#conversejs .icon-offline:before {
content: "\e002";
}
.icon-busy:before {
#conversejs .icon-busy:before {
content: "\e004";
}
#conversejs .icon-exit:before {
content: "\e601";
}
......@@ -13,6 +13,7 @@
<link type="text/css" rel="stylesheet" media="screen" href="css/theme.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
<script src="components/requirejs/require.js"></script>
<link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
......@@ -67,7 +68,7 @@
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Converse.js</h1>
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
<p class="intro-text">A free and open-source XMPP chat client for your website</p>
<div class="page-scroll">
<a href="#about" class="btn btn-default btn-lg">Learn More</a>
......
......@@ -10,11 +10,11 @@
@font-face {
font-family: 'Converse-js';
src:url('../fonticons/fonts/icomoon.eot?-5hv4s0');
src:url('../fonticons/fonts/icomoon.eot?#iefix-5hv4s0') format('embedded-opentype'),
url('../fonticons/fonts/icomoon.woff?-5hv4s0') format('woff'),
url('../fonticons/fonts/icomoon.ttf?-5hv4s0') format('truetype'),
url('../fonticons/fonts/icomoon.svg?-5hv4s0#icomoon') format('svg');
src:url('../fonticons/fonts/icomoon.eot?-mnoxh0');
src:url('../fonticons/fonts/icomoon.eot?#iefix-mnoxh0') format('embedded-opentype'),
url('../fonticons/fonts/icomoon.woff?-mnoxh0') format('woff'),
url('../fonticons/fonts/icomoon.ttf?-mnoxh0') format('truetype'),
url('../fonticons/fonts/icomoon.svg?-mnoxh0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
......@@ -46,6 +46,22 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-conversejs {
font-family: 'Converse-js';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-conversejs:before {
content: "\e600";
}
#conversejs .icon-closed:before {
content: "\25ba";
}
......@@ -315,6 +331,9 @@
#conversejs .icon-dnd:before {
content: "\e004";
}
#conversejs .icon-exit:before {
content: "\e601";
}
#conversejs .no-text-select {
-webkit-touch-callout: none;
......
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