release subpages draft

_releases/v0.16.0.md

@@ -27,6 +27,10 @@ optional_magnetlink: "magnet:?xt=urn:btih:6493ae7a15b4d32bb4eca1dfaf6dcc0c143492
 ## 2. Place URLs inside angle brackets, like <http://bitcoin.org/bin>
 show_toc: true
 ---
+
+<div class="post-content" markdown="1">
+
+
 {% githubify https://github.com/bitcoin/bitcoin %}
 Bitcoin Core version 0.16.0 is now available from:
 
@@ -43,6 +47,10 @@ To receive security and update notifications, please subscribe to:
 
   <https://bitcoincore.org/en/list/announcements/join/>
 
+</div>
+
+<div class="toccontent-block boxexpand expanded" markdown="1">
+
 How to Upgrade
 ==============
 
@@ -67,6 +75,10 @@ Wallets created in 0.16 and later are not compatible with versions prior to 0.16
 and will not work if you try to use newly created wallets in older versions. Existing
 wallets that were created with older versions are not affected by this.
 
+</div>
+
+<div class="toccontent-block boxexpand expanded" markdown="1">
+
 Compatibility
 ==============
 
@@ -76,6 +88,9 @@ the Linux kernel, macOS 10.8+, and Windows Vista and later. Windows XP is not su
 Bitcoin Core should also work on most other Unix-like systems but is not
 frequently tested on them.
 
+</div>
+<div class="toccontent-block boxexpand expanded" markdown="1">
+
 Notable changes
 ===============
 
@@ -749,3 +764,5 @@ Thanks to everyone who directly contributed to this release:
 
 As well as everyone that helped translating on [Transifex](https://www.transifex.com/projects/p/bitcoin/).
 {% endgithubify %}
+
+</div>

_sass/screen.scss

@@ -1883,6 +1883,7 @@ br.big {
         height: 100%;
         display: none;
         position: absolute;
+        text-align: center;
 }
 
 .slide:first-child {
@@ -1892,19 +1893,17 @@ br.big {
 .slide-buttons {
         text-align: center;
 }
-
-.slide-buttons button {
-        background: transparent;
-        border: 0;
-        font-size: 150%;
-    border-radius: 4px;
+.slide-btn {
+    width: 11px;
+    height: 11px;
+    margin-right: 15px;
+    border-radius: 50%;
+    background: #FFEACC;
+    border: none;
 }
-
-.slide-buttons button.active {
-    background-color: #2c6fad;
-    color: #fff;
+.slide-btn.active {
+    background: #FF9500;
 }
-
 // .two-column-list ul {
 //         margin-left: 4em;
 // }
@@ -2283,6 +2282,7 @@ br.big {
 .boxexpand.expanded>*{
     display:block;
 }
+.boxexpand>h1:first-child,
 .boxexpand>h2:first-child,
 .boxexpand>h3:first-child {
     display:block;
@@ -2292,10 +2292,12 @@ br.big {
     text-align: left;
     cursor: pointer;
 }
+.boxexpand.expanded>h1:first-child,
 .boxexpand.expanded>h2:first-child,
 .boxexpand.expanded>h3:first-child {
     padding: 40px 35px 15px 30px;
 }
+.boxexpand>h1:first-child::after, 
 .boxexpand>h2:first-child::after, 
 .boxexpand>h3:first-child::after {
     content: '';
@@ -2308,6 +2310,7 @@ br.big {
     -webkit-transform: translateY(-50%);
             transform: translateY(-50%);
 }
+.boxexpand.expanded>h1:first-child::after,
 .boxexpand.expanded>h2:first-child::after,
 .boxexpand.expanded>h3:first-child::after {
     -webkit-transform: translateY(-50%) rotate(180deg);
@@ -3424,17 +3427,21 @@ br.big {
         min-width: auto;
         width: 245px;
     }
+    .boxexpand>h1:first-child, 
     .boxexpand>h2:first-child, 
     .boxexpand>h3:first-child {
         padding: 30px 35px 30px 30px;
     }
+    .boxexpand.expanded>h1:first-child, 
     .boxexpand.expanded>h2:first-child, 
     .boxexpand.expanded>h3:first-child {
         padding: 30px 35px 20px 30px;
     }
+    .boxexpand>h1
     .boxexpand>h2 {
         font-size: 150%;
     }
+    .boxexpand>h1:first-child::after, 
     .boxexpand>h2:first-child::after, 
     .boxexpand>h3:first-child::after {
         right: 15px;
@@ -4233,10 +4240,12 @@ br.big {
         margin-left: 15px;
         margin-right: 15px;
     }
+    .boxexpand>h1:first-child, 
     .boxexpand>h2:first-child, 
     .boxexpand>h3:first-child {
         padding: 30px 30px 30px 15px;
     }
+    .boxexpand.expanded>h1:first-child, 
     .boxexpand.expanded>h2:first-child, 
     .boxexpand.expanded>h3:first-child {
         padding: 30px 30px 15px 15px;
@@ -4481,14 +4490,17 @@ br.big {
     #markdown-toc>li>a::after {
         right: 0;
     }
+    .boxexpand>h1
     .boxexpand>h2 {
         font-size: 137.5%;
     }
+    .boxexpand>h1:first-child, 
     .boxexpand>h2:first-child, 
     .boxexpand>h3:first-child {
         padding: 15px 35px 15px 15px;
         background: #f8f8f8
     }
+    .boxexpand.expanded>h1:first-child, 
     .boxexpand.expanded>h2:first-child, 
     .boxexpand.expanded>h3:first-child {
         padding: 15px 35px 15px 15px;

en/bitcoin-core/features/index.md

@@ -17,8 +17,16 @@ end_of_page: |
   </script>
 ---
 
+<div class="hero">
+<div class="container" markdown="block">
+
 # Bitcoin Core
-{:.not-displayed}
+
+</div>
+</div>
+
+<div class="bitcore-content clearfix">
+<div class="container" markdown="block">
 
 <div id="slidebox">
   <div class="slide-viewer">
@@ -40,22 +48,17 @@ end_of_page: |
       </div>
     </div>
   </div>
-  <div class="slide-buttons"
-   ><button type="image" class="slide-btn button-1" markdown="1"
-     ><span class="fa fa-check-square-o"></span></button>
+  <div class="slide-buttons">
+  <button type="image" class="slide-btn button-1" markdown="1"></button>
 
-   <button type="button" class="slide-btn button-2" markdown="1"
-     ><span class="fa fa-shield"></span></button>
+  <button type="button" class="slide-btn button-2" markdown="1"></button>
 
-   <button type="button" class="slide-btn button-3" markdown="1"
-     ><span class="fa fa-bar-chart"></span></button>
+  <button type="button" class="slide-btn button-3" markdown="1"></button>
 
-   <button type="button" class="slide-btn button-4" markdown="1"
-     ><span class="fa fa-sign-in"></span></button>
+  <button type="button" class="slide-btn button-4" markdown="1"></button>
 
-   <button type="button" class="slide-btn button-5" markdown="1"
-     ><span class="fa fa-globe"></span></button
-  ></div>
+  <button type="button" class="slide-btn button-5" markdown="1"></button>
+  </div>
 </div>
 
 <br class="clear">
@@ -111,3 +114,5 @@ broadband users to contribute** to less well-connected users.
 
 <br>
 {% include references.md %}
+</div>
+</div>

en/bitcoin-core/features/network-support.md

@@ -13,8 +13,17 @@ breadcrumbs:
   - bcc features
   - Network Support
 ---
+
+<div class="hero">
+<div class="container" markdown="block">
+
 # Donate Bandwidth Using Bitcoin Core
-{:.not-displayed}
+
+</div>
+</div>
+
+<div class="bitcore-content clearfix">
+<div class="container" markdown="block">
 
 ![Support the network](/img/bitcoin-core/slider-network.svg)
 
@@ -57,3 +66,6 @@ volunteers like you, Bitcoin would never have come as far as it has.
 <br class="clear">
 
 {% include references.md %}
+
+</div>
+</div>

js/main.js

@@ -155,6 +155,9 @@ function boxShow(e) {
     expandBox(t);
     cancelEvent(e);
   }
+  document.querySelectorAll(".boxexpand > h1:first-child").forEach(function(accordionToggle) {
+    return accordionToggle.addEventListener("click", init);
+  });
   document.querySelectorAll(".boxexpand > h2:first-child").forEach(function(accordionToggle) {
     return accordionToggle.addEventListener("click", init);
   });