Position branding. Fixes #1155

a52ccc65 · JC Brand · 2ef117e4 · a52ccc65 · a52ccc65 · a52ccc65
Commit a52ccc65 authored Sep 06, 2018 by JC Brand
Hide whitespace changes
Inline Side-by-side

Showing with 139 additions and 8 deletions

css/converse.css css/converse.css +64 -5

dev.html dev.html +11 -0

fullscreen.html fullscreen.html +11 -0

sass/_core.scss sass/_core.scss +53 -3

No files found.
--- a/css/converse.css
+++ b/css/converse.css
@@ -8631,13 +8631,72 @@ body.reset {
 .icon-conversejs:before {
  content: "\e600"; }

-.converse-brand-heading {
+.converse-brand {
+  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;
+      flex: 0 0 83.3333333333%;
+      max-width: 83.3333333333%; } }
+
+.converse-brand__text {
  font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
-  font-size: 6em;
-  font-weight: normal; }
-  .converse-brand-heading .icon-conversejs {
+  font-weight: normal;
+  width: 50%;
+  margin: auto;
+  margin-top: 10%;
+  text-align: center; }
+  .converse-brand__text .icon-conversejs {
    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 {
  bottom: 0;
  height: 100%;
@@ -8981,7 +9040,7 @@ body.reset {
    margin: 0; }

 @media screen and (max-width: 575px) {
-  body .converse-brand-heading {
+  body .converse-brand {
    font-size: 3.75em; }

  #conversejs:not(.converse-embedded) .chatbox .chat-body {

--- a/dev.html
+++ b/dev.html
@@ -16,6 +16,17 @@
 </head>

 <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>
    converse.initialize({

--- a/fullscreen.html
+++ b/fullscreen.html
@@ -12,6 +12,17 @@
    <script src="dist/converse.js"></script>
 </head>
 <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>
    /*
    @licstart

--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -40,14 +40,64 @@ body.reset {
    content: "\e600";
 }

-.converse-brand-heading {
+.converse-brand {
+    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;
+        @include make-col(10);
+    }
+    padding: 0;
+}
+
+.converse-brand__text {
    font-family: $heading-font; 
-    font-size: 6em;
    font-weight: normal;
+    width: 50%;
+    margin: auto;
+    margin-top: 10%;
+    text-align: center;
    .icon-conversejs {
        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 {
    bottom: 0;
@@ -442,7 +492,7 @@ body.reset {

 @media screen and (max-width: 575px) {
    body {
-      .converse-brand-heading {
+      .converse-brand {
        font-size: 3.75em;
      }
    }