Add main layout

docs/css/bulma-docs.css

@@ -5084,7 +5084,7 @@ a.tag:hover {
   color: #3273dc;
   display: flex;
   justify-content: center;
-  padding: 0.5em 0.75em;
+  padding: 0 0.75em;
 }
 
 .breadcrumb a:hover {
@@ -5848,6 +5848,7 @@ a.dropdown-item.is-active {
   box-shadow: 0 2px 0 0 whitesmoke;
   min-height: 3.25rem;
   position: relative;
+  z-index: 30;
 }
 
 .navbar.is-white {
@@ -9491,6 +9492,88 @@ label.panel-block:hover {
   padding: 3rem 1.5rem 6rem;
 }
 
+.bd-main {
+  overflow: hidden;
+  position: relative;
+}
+
+.bd-lead {
+  position: relative;
+}
+
+.bd-breadcrumb {
+  margin-bottom: 2.5rem;
+}
+
+.bd-header {
+  margin-bottom: 2.5rem;
+}
+
+.bd-header .subtitle {
+  color: #7a7a7a;
+}
+
+.bd-header .subtitle strong {
+  color: currentColor;
+}
+
+.bd-side,
+.bd-side-background {
+  background-color: #fafafa;
+}
+
+.bd-side {
+  position: relative;
+}
+
+.bd-side-background {
+  bottom: 0;
+  left: 50%;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+@media screen and (max-width: 1023px) {
+  .bd-lead,
+  .bd-side {
+    padding: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .bd-side-background {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 769px), print {
+  .bd-duo {
+    display: flex;
+  }
+  .bd-lead {
+    background-color: white;
+    overflow: hidden;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .bd-side {
+    flex: 0 0 300px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .bd-main {
+    padding: 0 3rem;
+  }
+  .bd-lead {
+    padding: 3rem 3rem 3rem 0;
+  }
+  .bd-side {
+    padding: 3rem 0 3rem 1.5rem;
+  }
+}
+
 .highlight {
   background-color: #f5f5f5;
   color: #586e75;
@@ -9770,8 +9853,9 @@ svg {
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
-  max-width: 340px;
+  max-width: 300px;
   min-height: 150px;
+  min-width: 280px;
 }
 
 #carbon {
@@ -9787,7 +9871,7 @@ svg {
 
 @media screen and (min-width: 769px), print {
   #carbon {
-    width: 340px;
+    width: 300px;
   }
 }
 
@@ -10282,6 +10366,100 @@ svg {
   text-decoration: underline;
 }
 
+.bd-has-text-rss {
+  color: #f26522;
+}
+
+.bd-has-text-star {
+  color: #FFD257;
+}
+
+.bd-navbar-item-documentation .icon {
+  color: #00d1b2;
+}
+
+.bd-navbar-item-documentation:hover {
+  background-color: #00d1b2 !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-documentation:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-templates .icon {
+  color: #209cee;
+}
+
+.bd-navbar-item-templates:hover {
+  background-color: #209cee !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-templates:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-videos .icon {
+  color: #23d160;
+}
+
+.bd-navbar-item-videos:hover {
+  background-color: #23d160 !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-videos:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-blog .icon {
+  color: #f26522;
+}
+
+.bd-navbar-item-blog:hover {
+  background-color: #f26522 !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-blog:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-expo .icon {
+  color: #FFD257;
+}
+
+.bd-navbar-item-expo:hover {
+  background-color: #FFD257 !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-expo:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-love .icon {
+  color: #ff3860;
+}
+
+.bd-navbar-item-love:hover {
+  background-color: #ff3860 !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-love:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-expo:hover {
+  color: #744F09 !important;
+}
+
+.bd-navbar-item-expo:hover .icon {
+  color: #FF7B00 !important;
+}
+
 .bd-special-shadow {
   background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
   height: 8px;