Skip to content

C
converse.js
Commit a52ccc65 authored by JC Brand's avatar JC Brand
Browse files
Options

Position branding. Fixes #1155

parent 2ef117e4
Show whitespace changes
Inline Side-by-side
Showing with 139 additions and 8 deletions
css/converse.css
View file @ a52ccc65
...@@ -8631,13 +8631,72 @@ body.reset { ...@@ -8631,13 +8631,72 @@ body.reset {
.icon-conversejs:before { .icon-conversejs:before {
content: "\e600"; } content: "\e600"; }
.converse-brand-heading { .converse-brand {
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif; display: flex;
justify-content: space-between; }
.converse-brand__padding {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
padding: 0; }
@media (min-width: 768px) {
.converse-brand__padding {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; } }
@media (min-width: 992px) {
.converse-brand__padding {
flex: 0 0 25%;
max-width: 25%; } }
@media (min-width: 1200px) {
.converse-brand__padding {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
.converse-brand__heading {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
padding: 0; }
@media (min-width: 768px) {
.converse-brand__heading {
font-size: 4em;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; } }
@media (min-width: 992px) {
.converse-brand__heading {
font-size: 5em;
flex: 0 0 75%;
max-width: 75%; } }
@media (min-width: 1200px) {
.converse-brand__heading {
font-size: 6em; font-size: 6em;
font-weight: normal; } flex: 0 0 83.3333333333%;
.converse-brand-heading .icon-conversejs { max-width: 83.3333333333%; } }
.converse-brand__text {
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
font-weight: normal;
width: 50%;
margin: auto;
margin-top: 10%;
text-align: center; }
.converse-brand__text .icon-conversejs {
font-size: 60%; } font-size: 60%; }
.converse-brand__byline {
font-size: 12px;
width: 50%;
margin: auto;
text-align: center; }
.converse-brand__byline a {
text-decoration: none;
color: #f6ccc1; }
#conversejs { #conversejs {
bottom: 0; bottom: 0;
height: 100%; height: 100%;
...@@ -8981,7 +9040,7 @@ body.reset { ...@@ -8981,7 +9040,7 @@ body.reset {
margin: 0; } margin: 0; }
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
body .converse-brand-heading { body .converse-brand {
font-size: 3.75em; } font-size: 3.75em; }
#conversejs:not(.converse-embedded) .chatbox .chat-body { #conversejs:not(.converse-embedded) .chatbox .chat-body {
......
dev.html
View file @ a52ccc65
...@@ -16,6 +16,17 @@ ...@@ -16,6 +16,17 @@
</head> </head>
<body class="reset"> <body class="reset">
<div class="content">
<div class="inner-content converse-brand row">
<div class="converse-brand__padding"></div>
<div class="converse-brand__heading">
<div class="converse-brand__text"><i class="icon-conversejs"></i>Converse</div>
<div class="converse-brand__byline">
brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a>
</div>
</div>
</div>
</div>
<script> <script>
converse.initialize({ converse.initialize({
......
fullscreen.html
View file @ a52ccc65
...@@ -12,6 +12,17 @@ ...@@ -12,6 +12,17 @@
<script src="dist/converse.js"></script> <script src="dist/converse.js"></script>
</head> </head>
<body class="reset"> <body class="reset">
<div class="content">
<div class="inner-content converse-brand row">
<div class="converse-brand__padding"></div>
<div class="converse-brand__heading">
<div class="converse-brand__text"><i class="icon-conversejs"></i>Converse</div>
<div class="converse-brand__byline">
brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a>
</div>
</div>
</div>
</div>
<script> <script>
/* /*
@licstart @licstart
......
sass/_core.scss
View file @ a52ccc65
...@@ -40,14 +40,64 @@ body.reset { ...@@ -40,14 +40,64 @@ body.reset {
content: "\e600"; content: "\e600";
} }
.converse-brand-heading { .converse-brand {
font-family: $heading-font; display: flex;
justify-content: space-between;
}
.converse-brand__padding {
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(4);
}
@include media-breakpoint-up(lg) {
@include make-col(3);
}
@include media-breakpoint-up(xl) {
@include make-col(2);
}
padding: 0;
}
.converse-brand__heading {
@include make-col-ready();
@include media-breakpoint-up(md) {
font-size: 4em;
@include make-col(8);
}
@include media-breakpoint-up(lg) {
font-size: 5em;
@include make-col(9);
}
@include media-breakpoint-up(xl) {
font-size: 6em; font-size: 6em;
@include make-col(10);
}
padding: 0;
}
.converse-brand__text {
font-family: $heading-font;
font-weight: normal; font-weight: normal;
width: 50%;
margin: auto;
margin-top: 10%;
text-align: center;
.icon-conversejs { .icon-conversejs {
font-size: 60%; font-size: 60%;
} }
} }
.converse-brand__byline {
font-size: $font-size-small;
width: 50%;
margin: auto;
text-align: center;
a {
text-decoration: none;
color: lighten($chatroom-head-color, 25%);
}
}
#conversejs { #conversejs {
bottom: 0; bottom: 0;
...@@ -442,7 +492,7 @@ body.reset { ...@@ -442,7 +492,7 @@ body.reset {
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
body { body {
.converse-brand-heading { .converse-brand {
font-size: 3.75em; font-size: 3.75em;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7