首页 发现 帮助
注册 登录
im-changing.ru
/
converse.js
镜像自地址 https://github.com/conversejs/converse.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Position branding. Fixes #1155

JC Brand 6 年之前
父节点
2ef117e402
当前提交
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;
 
       }
 
       }
 
     }
 
     }