Merge branch 'hotfix/update-style'

docs/_includes/header.html

@@ -19,8 +19,8 @@
 <link href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.css" rel="stylesheet">
 <link href="../assets/css/docs.min.css" rel="stylesheet">
 <link href="../assets/css/sidenav.css?v={{ site.current_version }}" rel="stylesheet">
-<link href="../assets/css/style.css?v={{ site.current_version }}&m=1" rel="stylesheet">
-<link href="../assets/css/ads.css?m=1" rel="stylesheet">
+<link href="../assets/css/style.css?v={{ site.current_version }}&m=2" rel="stylesheet">
+<link href="../assets/css/ads.css?m=2" rel="stylesheet">
 
 <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 <script src="../assets/js/ie-emulation-modes-warning.js"></script>

docs/_layouts/default.html

@@ -14,11 +14,11 @@
     <div class="bs-docs-header" id="content">
       <div class="container">
         <div class="row">
-          <div class="col-md-9">
+          <div class="col-md-8">
             <h1>{% t page.title %}</h1>
             <div>{% t page.lead %}</div>
           </div>
-          <div class="col-md-3">
+          <div class="col-md-4">
             {% include ads.html %}
           </div>
         </div>

docs/assets/css/ads.css

@@ -1,105 +1,41 @@
 #carbonads {
-    --width: 180px;
-    --font-size: 14px;
-}
-
-#carbonads {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    display: block;
-    overflow: hidden;
-    margin-bottom: 20px;
-    max-width: var(--width);
-    border-radius: 4px;
-    text-align: center;
-    box-shadow: 0 0 0 1px hsla(0, 0%, 0%, .1);
-    background-color: hsl(0, 0%, 98%);
-    font-size: var(--font-size);
-    line-height: 1.5;
-}
-
-#carbonads a {
-    color: #222 !important;
-    text-shadow: 0 1px hsla(0, 0%, 100%, .8);
-    text-decoration: none;
-}
-
-#carbonads a:hover {
-    color: inherit;
+  display: block;
+  overflow: hidden;
+  padding: 1em;
+  font-family: Verdana, "Helvetica Neue", Helvetica, sans-serif;
+  line-height: 1.5;
 }
 
 #carbonads span {
-    position: relative;
-    display: block;
-    overflow: hidden;
+  position: relative;
+  display: block;
+  overflow: hidden;
 }
 
 .carbon-img {
-    display: block;
-    margin-bottom: 8px;
-    max-width: var(--width);
-    line-height: 1;
+  float: left;
+  margin-right: 1em;
 }
 
 .carbon-img img {
-    display: block;
-    margin: 0 auto;
-    max-width: var(--width) !important;
-    width: var(--width);
-    height: auto;
+  display: block;
+  line-height: 1;
 }
 
 .carbon-text {
-    display: block;
-    padding: 0 1em 8px;
+  display: block;
+  float: left;
+  max-width: calc(100% - 130px - 1em);
+  text-align: left;
 }
 
 .carbon-poweredby {
-    display: block;
-    padding: 10px var(--font-size);
-    background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
-    text-transform: uppercase;
-    letter-spacing: .5px;
-    font-weight: 600;
-    font-size: 9px;
-    line-height: 0;
-}
-
-@media only screen and (min-width: 320px) and (max-width: 759px) {
-    #carbonads {
-        float: none;
-        margin: 0 auto;
-        max-width: 330px;
-    }
-
-    #carbonads span {
-        position: relative;
-    }
-
-    #carbonads>span {
-        max-width: none;
-    }
-
-    .carbon-img {
-        float: left;
-        margin: 0;
-    }
-
-    .carbon-img img {
-        max-width: 130px !important;
-    }
-
-    .carbon-text {
-        float: left;
-        margin-bottom: 0;
-        padding: 8px 20px;
-        text-align: left;
-        max-width: calc(100% - 130px - 3em);
-    }
-
-    .carbon-poweredby {
-        left: 130px;
-        bottom: 0;
-        display: block;
-        width: 100%;
-    }
+  position: absolute;
+  right: 0; // You can also set the position to the "left" with the value of calc(130px + carbon-text’s font size). If the font-size is 12px, you’ll want to set the left value as 142px. It’ll align the .carbon-text with .carbon-poweredby
+  bottom: 0;
+  display: block;
+  font-size: .8em;
+  text-transform: uppercase;
+  line-height: 1;
+  letter-spacing: 1px;
 }

docs/assets/css/style.css

@@ -1,60 +1,80 @@
 .bs-docs-featurette .row {
-    text-align: left;
+  text-align: left;
 }
+
 .bs-docs-nav + p {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
+
 .bs-docs-header {
-    padding: 10px 0 0;
+  padding: 10px 0 0;
 }
-.bs-docs-header .col-md-9 {
-    padding: 20px 0 40px;
+
+.bs-docs-header .col-md-8 {
+  padding: 0 0 20px;
 }
+
 .bs-docs-header h1 {
-    margin-top: 20px;
-    margin-bottom: 20px;
+  margin-top: 20px;
+  margin-right: 0;
 }
+
+.bs-docs-header div {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.bs-docs-header a {
+  color: #fff;
+}
+
 .edit-page-link {
-    float: right;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 39px;
+  float: right;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 39px;
 }
+
 .examples-parent {
-    position: relative;
+  position: relative;
 }
+
 .examples-button {
-    position: absolute;
-    left: 20px;
-    top: 20px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
 }
+
 .tc {
-    text-align: center;
+  text-align: center;
 }
+
 .tc img {
-    max-width: 100%;
+  max-width: 100%;
 }
+
 .help-btn {
-    background-color: #eee;
-    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fcfcfc),color-stop(100%,#eee));
-    background-image: -webkit-linear-gradient(top,#fcfcfc 0,#eee 100%);
-    background-image: -moz-linear-gradient(top,#fcfcfc 0,#eee 100%);
-    background-image: -ms-linear-gradient(top,#fcfcfc 0,#eee 100%);
-    background-image: -o-linear-gradient(top,#fcfcfc 0,#eee 100%);
-    background-image: linear-gradient(to bottom,#fcfcfc 0,#eee 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#eeeeee', GradientType=0);
-    background-repeat: no-repeat;
-    border: 1px solid #d5d5d5;
-    padding: 2px 5px 2px 4px;
-    color: #333;
-    text-decoration: none;
-    text-shadow: 0 1px 0 #fff;
-    white-space: nowrap;
-    cursor: pointer;
-    border-radius: 3px;
-    font-weight: bold;
-    font-size: 12px;
+  background-color: #eee;
+  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fcfcfc),color-stop(100%,#eee));
+  background-image: -webkit-linear-gradient(top,#fcfcfc 0,#eee 100%);
+  background-image: -moz-linear-gradient(top,#fcfcfc 0,#eee 100%);
+  background-image: -ms-linear-gradient(top,#fcfcfc 0,#eee 100%);
+  background-image: -o-linear-gradient(top,#fcfcfc 0,#eee 100%);
+  background-image: linear-gradient(to bottom,#fcfcfc 0,#eee 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#eeeeee', GradientType=0);
+  background-repeat: no-repeat;
+  border: 1px solid #d5d5d5;
+  padding: 2px 5px 2px 4px;
+  color: #333;
+  text-decoration: none;
+  text-shadow: 0 1px 0 #fff;
+  white-space: nowrap;
+  cursor: pointer;
+  border-radius: 3px;
+  font-weight: bold;
+  font-size: 12px;
 }
+
 .github-btn, .help-btn {
-    vertical-align: bottom;
+  vertical-align: bottom;
 }

docs/home.md

@@ -22,12 +22,12 @@ title: pages.home.title
 <div>
   <div class="container">
     <div class="row">
-      <div class="col-md-9">
+      <div class="col-md-8">
         <h2 class="bs-docs-featurette-title">{% t pages.home.sub_title %}</h2>
         <p class="lead">{% t pages.home.sub_lead %}</p>
       </div>
 
-      <div class="col-md-3">
+      <div class="col-md-4">
         {% include ads.html %}
       </div>
     </div>