In
fonts.css I've got:
Code:
@font-face {
font-family: "Helvetica Neue";
font-weight: normal;
font-style: normal;
src: url(fonts/Helvetica-Neue-1.ttf);
}
I've got the .ttf file in the fonts section.
The texting CSS in
stylesheet.css is:
Code:
/* Texting wrapper */
.texting {
max-width: 300px;
font-family: "Helvetica Neue", sans-serif;
display: table;
margin: auto;
padding-left: 0.5em;
padding-right: 0.5em;
}
/* All texts */
.text {
margin: 0 0 0.5em;
border-radius: 1em;
padding: 0.5em 1em;
max-width: 75%;
clear: both;
position: relative;
}
.text:after {
content: "";
position: absolute;
bottom: 0;
width: 0.5em;
height: 1em;
}
/* Outgoing (sent from this phone) */
.out {
float: right;
background: #1289fe;
color: #FFF;
}
.out:after {
right: -0.5em;
border-left: 0.5em solid #1289fe;
border-bottom-left-radius: 1em 0.5em;
}
/* Incoming (reply from other person) */
.in {
float: left;
background: #e5e5ea;
color: #000;
}
.in:after {
left: -0.5em;
border-right: 0.5em solid #e5e5ea;
border-bottom-right-radius: 1em 0.5em;
}