Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
C
converse.js
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
converse.js
Commits
d0f490bb
Commit
d0f490bb
authored
May 15, 2018
by
JC Brand
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Start using Sass for the website CSS and rename
parent
50a67331
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
386 additions
and
85 deletions
+386
-85
Makefile
Makefile
+5
-2
css/website.css
css/website.css
+322
-0
index.html
index.html
+1
-1
mockup/index.html
mockup/index.html
+1
-1
sass/_website.scss
sass/_website.scss
+55
-79
tests/index.html
tests/index.html
+1
-1
tests/transpiled.html
tests/transpiled.html
+1
-1
No files found.
Makefile
View file @
d0f490bb
...
...
@@ -123,7 +123,7 @@ stamp-bundler: Gemfile
clean
:
rm
-rf
node_modules .bundle stamp-npm
rm
dist/
*
.min.js
rm
css/
them
e.min.css
rm
css/
websit
e.min.css
rm
css/converse.min.css
rm
css/
*
.map
...
...
@@ -134,7 +134,7 @@ dev: stamp-bundler stamp-npm
## Builds
.PHONY
:
css
css
:
dev sass/*.scss css/converse.css css/converse.min.css css/
them
e.min.css css/inverse.css css/inverse.min.css css/fonts.css
css
:
dev sass/*.scss css/converse.css css/converse.min.css css/
website.css css/websit
e.min.css css/inverse.css css/inverse.min.css css/fonts.css
css/inverse.css
::
dev sass sass
$(SASS)
-I
$(BOURBON)
-I
$(BOOTSTRAP)
sass/inverse.scss css/inverse.css
...
...
@@ -145,6 +145,9 @@ css/converse.css:: dev sass
css/fonts.css
::
dev sass
$(SASS)
-I
$(BOURBON)
-I
$(BOOTSTRAP)
sass/font-awesome.scss
$@
css/website.css
::
dev sass
$(SASS)
-I
$(BOURBON)
-I
$(BOOTSTRAP)
sass/_website.scss
$@
css/%.min.css
::
css/%.css
make dev
$(CLEANCSS)
$<
>
$@
...
...
css/website.css
0 → 100644
View file @
d0f490bb
html
{
width
:
100%
;
height
:
100%
;
}
body
{
width
:
100%
;
height
:
100%
;
font-family
:
"Lora"
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
color
:
#ffffff
;
background-color
:
#211018
;
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
margin
:
0
0
35px
;
font-family
:
Futura
,
Helvetica
,
Trebuchet
MS
,
Arial
,
sans-serif
;
font-weight
:
normal
;
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
:
#82B397
;
-webkit-transition
:
all
0.2s
ease-in-out
;
-moz-transition
:
all
0.2s
ease-in-out
;
transition
:
all
0.2s
ease-in-out
;
}
a
:hover
,
a
:focus
{
text-decoration
:
none
;
color
:
#00aaff
;
}
.light
{
font-weight
:
400
;
}
.navbar
{
font-family
:
Futura
,
Helvetica
,
Trebuchet
MS
,
Arial
,
sans-serif
;
margin-bottom
:
0
;
border-bottom
:
1px
solid
rgba
(
255
,
255
,
255
,
0.3
);
text-transform
:
uppercase
;
background-color
:
#211018
;
}
.navbar-brand
{
font-weight
:
700
;
}
.navbar-brand
:focus
{
outline
:
none
;
}
.navbar-custom
a
{
color
:
#ffffff
;
}
.navbar-custom
.nav
li
a
{
-webkit-transition
:
background
0.3s
ease-in-out
;
-moz-transition
:
background
0.3s
ease-in-out
;
transition
:
background
0.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
:
#ffffff
;
}
.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
0.5s
ease-in-out
,
padding
0.5s
ease-in-out
;
-moz-transition
:
background
0.5s
ease-in-out
,
padding
0.5s
ease-in-out
;
transition
:
background
0.5s
ease-in-out
,
padding
0.5s
ease-in-out
;
}
.top-nav-collapse
{
padding
:
0
;
background-color
:
#211018
;
}
.navbar-custom.top-nav-collapse
{
border-bottom
:
1px
solid
rgba
(
255
,
255
,
255
,
0.3
);
}
}
@media
(
max-width
:
480px
)
{
.navbar
{
display
:
none
;
}
}
.features-section
,
.outro
,
.intro
{
width
:
100%
;
padding
:
100px
0
;
text-align
:
center
;
color
:
#fff
;
}
.intro
{
background
:
url(images/header.jpg)
no-repeat
bottom
center
scroll
;
background-color
:
#211018
;
-webkit-background-size
:
cover
;
-moz-background-size
:
cover
;
background-size
:
cover
;
-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
);
}
.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
);
}
.brand-heading
{
font-family
:
Futura
,
Helvetica
,
Trebuchet
MS
,
Arial
,
sans-serif
;
font-weight
:
normal
;
font-size
:
2em
;
text-align
:
center
;
margin-top
:
2.5em
;
}
.brand-heading
.icon-conversejs
{
font-size
:
60%
;
}
.brand-heading-embedded
{
margin-top
:
1.5em
;
}
.intro-text
{
font-family
:
Futura
,
Helvetica
,
Trebuchet
MS
,
Arial
,
sans-serif
;
font-size
:
18px
;
}
@media
(
min-width
:
767px
)
{
.intro
{
height
:
100%
;
padding
:
0
;
}
.brand-heading
{
font-size
:
80px
;
}
.intro-text
{
font-size
:
25px
;
}
}
.btn-circle
{
width
:
70px
;
height
:
70px
;
margin-top
:
15px
;
padding
:
7px
16px
;
border
:
2px
solid
#ffffff
;
border-radius
:
35px
;
font-size
:
40px
;
color
:
#ffffff
;
background
:
transparent
;
-webkit-transition
:
background
0.3s
ease-in-out
;
-moz-transition
:
background
0.3s
ease-in-out
;
transition
:
background
0.3s
ease-in-out
;
}
.btn-circle
:hover
,
.btn-circle
:focus
{
outline
:
none
;
color
:
#ffffff
;
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
;
}
.content-section
{
padding-top
:
100px
;
}
.donate-section
{
width
:
100%
;
padding
:
50px
0
;
color
:
#ffffff
;
background-color
:
#211018
;
}
.donate-section
p
.bitcoin-header
{
margin
:
0
0
5px
;
}
@media
(
min-width
:
767px
)
{
.content-section
{
padding-top
:
150px
;
padding-bottom
:
50px
;
}
.donate-section
{
padding
:
100px
0
;
}
}
.btn
{
font-family
:
Futura
,
Helvetica
,
Trebuchet
MS
,
Arial
,
sans-serif
;
font-weight
:
400
;
-webkit-transition
:
all
0.3s
ease-in-out
;
-moz-transition
:
all
0.3s
ease-in-out
;
transition
:
all
0.3s
ease-in-out
;
}
.btn-default
{
border
:
1px
solid
#82B397
;
color
:
#82B397
;
background-color
:
transparent
;
}
.btn-default
:hover
,
.btn-default
:focus
{
border
:
1px
solid
#82B397
;
outline
:
none
;
color
:
#211018
;
background-color
:
#82B397
;
}
.btn-huge
{
padding
:
25px
;
font-size
:
26px
;
}
.banner-social-buttons
{
padding-top
:
3em
;
}
::-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
;
}
.row
{
margin-left
:
0
;
margin-right
:
0
;
}
.mastodon
{
width
:
4em
;
height
:
4em
;
margin-top
:
0.9em
;
}
.sponsors
{
clear
:
both
;
font-size
:
1.4em
;
padding
:
2em
0
6em
0
;
}
.sponsors
h2
{
text-align
:
center
;
}
.sponsors
ul
{
margin
:
0
0
1em
0
;
}
.sponsors
ul
li
{
margin
:
1em
0
;
list-style
:
none
;
}
.sponsors-text
{
text-align
:
left
;
padding
:
0
0
2em
0
;
}
/*# sourceMappingURL=website.css.map */
index.html
View file @
d0f490bb
...
...
@@ -13,7 +13,7 @@
<link
rel=
"shortcut icon"
type=
"image/ico"
href=
"css/images/favicon.ico"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"css/bootstrap.min.css"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"css/font-awesome.min.css"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"css/
them
e.css"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"css/
websit
e.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>
<script
type=
"text/javascript"
src=
"analytics.js"
></script>
...
...
mockup/index.html
View file @
d0f490bb
...
...
@@ -4,7 +4,7 @@
<head>
<title>
Converse.js Live Mockup
</title>
<meta
name=
"description"
content=
"Converse.js: A chat client for your website"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"../css/
them
e.css"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"../css/
websit
e.css"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"../css/converse.css"
/>
</head>
...
...
css/theme.
css
→
sass/_website.s
css
View file @
d0f490bb
html
{
width
:
100%
;
height
:
100%
;
}
body
{
width
:
100%
;
height
:
100%
;
font-family
:
"Lora"
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
color
:
#ffffff
;
background-color
:
#211018
;
width
:
100%
;
height
:
100%
;
font-family
:
"Lora"
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
color
:
#ffffff
;
background-color
:
#211018
;
}
html
{
width
:
100%
;
height
:
100%
;
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
margin
:
0
0
35px
;
font-family
:
Futura
,
Trebuchet
MS
,
Arial
,
sans-serif
;
font-weight
:
normal
;
letter-spacing
:
1px
;
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
margin
:
0
0
35px
;
font-family
:
Futura
,
Helvetica
,
Trebuchet
MS
,
Arial
,
sans-serif
;
font-weight
:
normal
;
letter-spacing
:
1px
;
}
p
{
margin
:
0
0
25px
;
font-size
:
18px
;
line-height
:
1.5
;
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
;
}
p
{
margin
:
0
0
35px
;
font-size
:
20px
;
line-height
:
1
.6
;
}
}
a
{
color
:
#82B397
;
-webkit-transition
:
all
0.2s
ease-in-out
;
-moz-transition
:
all
0.2s
ease-in-out
;
transition
:
all
0.2s
ease-in-out
;
color
:
#82B397
;
-webkit-transition
:
all
0
.2s
ease-in-out
;
-moz-transition
:
all
0
.2s
ease-in-out
;
transition
:
all
0
.2s
ease-in-out
;
}
a
:hover
,
a
:focus
{
text-decoration
:
none
;
color
:
#00aaff
;
a
:hover
,
a
:focus
{
text-decoration
:
none
;
color
:
#00aaff
;
}
.light
{
font-weight
:
400
;
font-weight
:
400
;
}
.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
:
#211018
;
font-family
:
Futura
,
Helvetica
,
Trebuchet
MS
,
Arial
,
sans-serif
;
margin-bottom
:
0
;
border-bottom
:
1px
solid
rgba
(
255
,
255
,
255
,
0
.3
)
;
text-transform
:
uppercase
;
background-color
:
#211018
;
}
.navbar-brand
{
font-weight
:
700
;
}
.navbar-brand
:focus
{
outline
:
none
;
font-weight
:
700
;
&
:focus
{
outline
:
none
;
}
}
.navbar-custom
a
{
color
:
#ffffff
;
.navbar-custom
{
a
{
color
:
#ffffff
;
}
}
.navbar-custom
.nav
li
a
{
-webkit-transition
:
background
0
.3s
ease-in-out
;
-moz-transition
:
background
0
.3s
ease-in-out
;
...
...
@@ -134,7 +138,7 @@ a:focus {
.brand-heading
{
font-family
:
Futura
,
Trebuchet
MS
,
Arial
,
sans-serif
;
font-family
:
Futura
,
Helvetica
,
Trebuchet
MS
,
Arial
,
sans-serif
;
font-weight
:
normal
;
font-size
:
2em
;
text-align
:
center
;
...
...
@@ -148,6 +152,7 @@ a:focus {
margin-top
:
1
.5em
;
}
.intro-text
{
font-family
:
Futura
,
Helvetica
,
Trebuchet
MS
,
Arial
,
sans-serif
;
font-size
:
18px
;
}
@media
(
min-width
:
767px
)
{
...
...
@@ -198,36 +203,7 @@ a:focus {
-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
;
}
...
...
@@ -250,7 +226,7 @@ a:focus {
}
}
.btn
{
font-family
:
Futura
,
Trebuchet
MS
,
Arial
,
sans-serif
;
font-family
:
Futura
,
Helvetica
,
Trebuchet
MS
,
Arial
,
sans-serif
;
font-weight
:
400
;
-webkit-transition
:
all
0
.3s
ease-in-out
;
-moz-transition
:
all
0
.3s
ease-in-out
;
...
...
tests/index.html
View file @
d0f490bb
...
...
@@ -9,7 +9,7 @@
<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/
them
e.css"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"../css/
websit
e.css"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"../css/converse.css"
/>
<script
src=
"../src/config.js"
></script>
...
...
tests/transpiled.html
View file @
d0f490bb
...
...
@@ -9,7 +9,7 @@
<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/
them
e.css"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"../css/
websit
e.css"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"../css/converse.css"
/>
<script
src=
"../src/config.js"
></script>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment