Fix some responsiveness and offset issues in the theme.
This commit is contained in:
parent
d36775fe91
commit
d62ae0c63a
|
@ -106,9 +106,7 @@ a:focus {
|
||||||
.features-section,
|
.features-section,
|
||||||
.outro,
|
.outro,
|
||||||
.intro {
|
.intro {
|
||||||
display: table;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
padding: 100px 0;
|
padding: 100px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -130,12 +128,10 @@ a:focus {
|
||||||
.outro {
|
.outro {
|
||||||
background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
|
background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
|
||||||
}
|
}
|
||||||
.intro-body {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.brand-heading {
|
.brand-heading {
|
||||||
font-size: 40px;
|
font-size: 2em;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 3em;
|
||||||
}
|
}
|
||||||
.intro-text {
|
.intro-text {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
@ -146,7 +142,7 @@ a:focus {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.brand-heading {
|
.brand-heading {
|
||||||
font-size: 100px;
|
font-size: 80px;
|
||||||
}
|
}
|
||||||
.intro-text {
|
.intro-text {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
|
@ -264,24 +260,7 @@ a:focus {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
}
|
}
|
||||||
.banner-social-buttons {
|
.banner-social-buttons {
|
||||||
position: absolute;
|
padding-top: 7em;
|
||||||
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 {
|
::-moz-selection {
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
|
@ -349,3 +328,7 @@ ul.features {
|
||||||
background: white;
|
background: white;
|
||||||
margin-left: -0.5px;
|
margin-left: -0.5px;
|
||||||
}
|
}
|
||||||
|
.row {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
81
index.html
81
index.html
|
@ -74,30 +74,26 @@
|
||||||
<!-- /.container -->
|
<!-- /.container -->
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<section class="intro">
|
<section class="intro" class="container">
|
||||||
<div class="intro-body">
|
<div class="row">
|
||||||
<div class="container">
|
<h1 class="brand-heading"><i class="icon-conversejs"></i> Converse.js</h1>
|
||||||
<div class="row">
|
<div class="col-md-8 col-md-offset-2">
|
||||||
<div class="col-md-8 col-md-offset-2">
|
<p class="intro-text">A free and open-source XMPP chat client in your browser</p>
|
||||||
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
|
<div class="page-scroll">
|
||||||
<p class="intro-text">A free and open-source XMPP chat client in your browser</p>
|
<a href="#about" class="btn btn-default btn-lg"><span class="btn-text">Learn More</span></a>
|
||||||
<div class="page-scroll">
|
|
||||||
<a href="#about" class="btn btn-default btn-lg"><span class="btn-text">Learn More</span></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-8 col-md-offset-2 banner-social-buttons">
|
|
||||||
<ul class="list-inline">
|
|
||||||
<li><a href="https://twitter.com/jcopkode" class="btn btn-circle btn-lg" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
|
|
||||||
</li>
|
|
||||||
<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>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-8 col-md-offset-2 banner-social-buttons">
|
||||||
|
<ul class="list-inline">
|
||||||
|
<li><a href="https://twitter.com/jcopkode" class="btn btn-circle btn-lg" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
|
||||||
|
</li>
|
||||||
|
<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>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="about" class="container content-section text-center">
|
<section id="about" class="container content-section text-center">
|
||||||
|
@ -158,8 +154,8 @@
|
||||||
<li>Messages appear in all connected chat clients (<a href="http://xmpp.org/extensions/xep-0280.html" target="_blank">XEP 280</a>)</li>
|
<li>Messages appear in all connected chat clients (<a href="http://xmpp.org/extensions/xep-0280.html" target="_blank">XEP 280</a>)</li>
|
||||||
<li>Third person "/me" messages (<a href="http://xmpp.org/extensions/xep-0245.html" target="_blank">XEP 245</a>)</li>
|
<li>Third person "/me" messages (<a href="http://xmpp.org/extensions/xep-0245.html" target="_blank">XEP 245</a>)</li>
|
||||||
<li>XMPP Ping (<a href="http://xmpp.org/extensions/xep-0199.html" target="_blank">XEP 199</a>)</li>
|
<li>XMPP Ping (<a href="http://xmpp.org/extensions/xep-0199.html" target="_blank">XEP 199</a>)</li>
|
||||||
<li>Server-side archiving of messages (<a href="http://xmpp.org/extensions/xep-0313.html" target="_blank">XEP 313</a>)</li>A
|
<li>Server-side archiving of messages (<a href="http://xmpp.org/extensions/xep-0313.html" target="_blank">XEP 313</a>)</li>
|
||||||
<li>Client state indication (<a href="http://xmpp.org/extensions/xep-0352.html" target="_blank">XEP 352</a>)</li>A
|
<li>Client state indication (<a href="http://xmpp.org/extensions/xep-0352.html" target="_blank">XEP 352</a>)</li>
|
||||||
<li>Off-the-record encryption</li>
|
<li>Off-the-record encryption</li>
|
||||||
<li>Translated into 16 languages</li>
|
<li>Translated into 16 languages</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -193,38 +189,19 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!--
|
<section class="outro content-section text-center" id="contact">
|
||||||
<section id="donate" class="donate-section content-section text-center">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-8 col-lg-offset-2">
|
<div class="col-lg-8 col-lg-offset-2">
|
||||||
<h3>Donate</h3>
|
<h2>Contact</h2>
|
||||||
<p class="bitcoin-header">Most of the work done on <strong>converse.js</strong> is unpaid and a labor of love.</p>
|
<ul class="contact">
|
||||||
<p>Thanks to those have donated already.</p>
|
<li>Follow me on <a href="http://twitter.com/jcopkode" target="_blank">Twitter</a> or chat with me via XMPP at <a href="xmpp:jc@opkode.com" class="xmpp JSnocheck" title="XMPP/Jabber">jc@opkode.com</a>.</li>
|
||||||
<p class="bitcoin-header"><strong>Bitcoin</strong></p>
|
<li>For technical support, please write to the mailing list: <a href="mailto:conversejs@librelist.com">conversejs@librelist.com</a><br/>
|
||||||
<img src="css/images/bitcoin_qr_code.png"/>
|
or ask in the Converse.js chat room: <a href="xmpp:discuss@conference.conversejs.org" class="xmpp JSnocheck" title="Converse.js chat room">discuss@conference.conversejs.org</a>.</li>
|
||||||
<p>16FsPqE9DhFTryxrUenpsGX4LJ1TPu8GqS</p>
|
<li>Also check out the <a href="http://librelist.com/browser/conversejs" target="_blank">mailing list archives</a>.</li>
|
||||||
</div>
|
<li>Please file <a target="_blank" href="https://github.com/jcbrand/converse.js/issues">bugs on Github</a>.</li>
|
||||||
</div>
|
<li>I'm available for features and <a href="http://opkode.com/contact" target="_blank">consulting</a>.</li>
|
||||||
</div>
|
</ul>
|
||||||
</section>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<section class="outro content-section" id="contact">
|
|
||||||
<div class="intro-body">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-8 col-lg-offset-2">
|
|
||||||
<h2>Contact</h2>
|
|
||||||
<ul class="contact">
|
|
||||||
<li>Follow me on <a href="http://twitter.com/jcopkode" target="_blank">Twitter</a> or chat with me via XMPP at <a href="xmpp:jc@opkode.com" class="xmpp JSnocheck" title="XMPP/Jabber">jc@opkode.com</a>.</li>
|
|
||||||
<li>For technical support, please write to the mailing list: <a href="mailto:conversejs@librelist.com">conversejs@librelist.com</a><br/>
|
|
||||||
or ask in the Converse.js chat room: <a href="xmpp:discuss@conference.conversejs.org" class="xmpp JSnocheck" title="Converse.js chat room">discuss@conference.conversejs.org</a>.</li>
|
|
||||||
<li>Also check out the <a href="http://librelist.com/browser/conversejs" target="_blank">mailing list archives</a>.</li>
|
|
||||||
<li>Please file <a target="_blank" href="https://github.com/jcbrand/converse.js/issues">bugs on Github</a>.</li>
|
|
||||||
<li>I'm available for features and <a href="http://opkode.com/contact" target="_blank">consulting</a>.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user