Fix website styles for mobile

This commit is contained in:
JC Brand 2019-02-18 19:36:32 +01:00
parent c026dc8a86
commit 1bc2480ffb
5 changed files with 55 additions and 23 deletions

View File

@ -9581,7 +9581,7 @@ body.converse-fullscreen {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
color: var(--text-color);
font-family: "Helvetica", "Arial", sans-serif;
font-family: var(--normal-font);
font-size: var(--font-size);
direction: ltr;
z-index: 1031; }

View File

@ -5244,7 +5244,7 @@ section h4 {
align-items: center;
font-family: 'Baumans', cursive;
font-size: 6em;
margin-top: 1em;
margin-top: 2em;
margin-bottom: 0.5em;
color: white; }
.brand-heading .byline {
@ -5271,6 +5271,18 @@ section h4 {
.brand-heading .converse-svg-logo .cls-4 {
fill: white; }
@media (max-width: 767.98px) {
.banner-social-buttons {
display: none; }
.chatroom-name {
font-size: 16px; }
.brand-heading {
flex-direction: column;
font-size: 4em;
margin-top: 1em; }
.brand-heading .byline {
margin: auto; } }
.brand-heading__text {
font-size: 0.9em;
display: inline-flex;

View File

@ -221,8 +221,8 @@
or <a href="https://mastodon.xyz/@jcbrand" target="_blank" rel="noopener">Mastodon</a>
<li>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, you can ask on <a href="https://stackoverflow.com/questions/tagged/converse.js">Stack Overflow</a>
<li>The Converse XMPP chatroom: <a href="xmpp:discuss@conference.conversejs.org?join" class="xmpp JSnocheck" title="Converse chat room">discuss@conference.conversejs.org</a>.</li>
<li>Please file bugs and feature requests on <a target="_blank" rel="noopener" href="https://github.com/jcbrand/converse.js/issues">Github</a>.</li>
<li>The Converse XMPP chatroom: <a href="xmpp:discuss@conference.conversejs.org?join" class="xmpp JSnocheck chatroom-name" title="Converse chat room">discuss@conference.conversejs.org</a></li>
<li>Please file bugs and feature requests on <a target="_blank" rel="noopener" href="https://github.com/jcbrand/converse.js/issues">Github</a></li>
</ul>
</div>

View File

@ -607,30 +607,30 @@ body.converse-fullscreen {
@media screen and (min-width: 576px) {
#conversejs .offset-sm-2 {
margin-left: 16.666667%;
}
#conversejs .offset-sm-2 {
margin-left: 16.666667%;
}
}
@media screen and (min-width: 768px) {
#conversejs .offset-md-2 {
margin-left: 16.666667%;
}
#conversejs .offset-md-3 {
margin-left: 25%;
}
#conversejs .offset-md-2 {
margin-left: 16.666667%;
}
#conversejs .offset-md-3 {
margin-left: 25%;
}
}
@media screen and (min-width: 992px) {
#conversejs .offset-lg-2 {
margin-left: 16.666667%;
}
#conversejs .offset-lg-3 {
margin-left: 25%;
}
#conversejs .offset-lg-2 {
margin-left: 16.666667%;
}
#conversejs .offset-lg-3 {
margin-left: 25%;
}
}
@media screen and (min-width: 1200px) {
#conversejs .offset-xl-2 {
margin-left: 16.666667%;
}
#conversejs .offset-xl-2 {
margin-left: 16.666667%;
}
}
@media screen and (max-height: 450px) {
#conversejs {

View File

@ -232,7 +232,7 @@ section {
align-items: center;
font-family: 'Baumans', cursive;
font-size: 6em;
margin-top: 1em;
margin-top: 2em;
margin-bottom: 0.5em;
color: white;
@ -270,6 +270,26 @@ section {
}
}
@include media-breakpoint-down(sm) {
.banner-social-buttons {
display: none;
}
.chatroom-name {
font-size: 16px;
}
.brand-heading {
flex-direction: column;
font-size: 4em;
margin-top: 1em;
.byline {
margin: auto;
}
}
}
.brand-heading__text {
font-size: 0.9em;
display: inline-flex;