JC Brand преди 6 години
родител
ревизия
a52ccc6588
променени са 4 файла, в които са добавени 139 реда и са изтрити 8 реда
  1. 64 5
      css/converse.css
  2. 11 0
      dev.html
  3. 11 0
      fullscreen.html
  4. 53 3
      sass/_core.scss

+ 64 - 5
css/converse.css

@@ -8631,13 +8631,72 @@ body.reset {
 .icon-conversejs:before {
 .icon-conversejs:before {
   content: "\e600"; }
   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-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%; }
     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 {
     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 {

+ 11 - 0
dev.html

@@ -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({

+ 11 - 0
fullscreen.html

@@ -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

+ 53 - 3
sass/_core.scss

@@ -40,14 +40,64 @@ body.reset {
     content: "\e600";
     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-family: $heading-font; 
-    font-size: 6em;
     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 {
 
 
 @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;
       }
       }
     }
     }