Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fix website styles for mobile

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/converse.css
View File

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

14
css/website.css
View File

@ -5244,7 +5244,7 @@ section h4 {
align-items: center; align-items: center;
font-family: 'Baumans', cursive; font-family: 'Baumans', cursive;
font-size: 6em; font-size: 6em;
margin-top: 1em; margin-top: 2em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: white; } color: white; }
.brand-heading .byline { .brand-heading .byline {
@ -5271,6 +5271,18 @@ section h4 {
.brand-heading .converse-svg-logo .cls-4 { .brand-heading .converse-svg-logo .cls-4 {
fill: white; } 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 { .brand-heading__text {
font-size: 0.9em; font-size: 0.9em;
display: inline-flex; display: inline-flex;

4
index.html
View File

@ -221,8 +221,8 @@
or <a href="https://mastodon.xyz/@jcbrand" target="_blank" rel="noopener">Mastodon</a> 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>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>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>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> <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> </ul>
</div> </div>

36
sass/_core.scss
View File

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

22
sass/website.scss
View File

@ -232,7 +232,7 @@ section {
align-items: center; align-items: center;
font-family: 'Baumans', cursive; font-family: 'Baumans', cursive;
font-size: 6em; font-size: 6em;
margin-top: 1em; margin-top: 2em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: white; 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 { .brand-heading__text {
font-size: 0.9em; font-size: 0.9em;
display: inline-flex; display: inline-flex;