Gemfile

@@ -3,3 +3,9 @@
 source "https://rubygems.org"
 
 # gem "rails"
+
+gem "webrick", "~> 1.8"
+
+gem "kramdown-parser-gfm"
+
+gem "jekyll-watch"

Gemfile.lock

@@ -1,12 +1,30 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    ffi (1.15.5)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    listen (3.8.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    webrick (1.8.1)
 
 PLATFORMS
   ruby
   x86_64-linux
 
 DEPENDENCIES
+  jekyll-watch
+  kramdown-parser-gfm
+  webrick (~> 1.8)
 
 BUNDLED WITH
-   2.4.5
+   2.3.24

bitcoin.html

@@ -11,7 +11,7 @@ permalink: /bitcoin.html
         <h1>A human-centered wallet for Bitcoin</h1>
         <p>
           Stack Wallet supports Bitcoin (BTC) as well as many other
-          cryptocurrencies <a href="/coins.html">(full list here)</a> Use Stack
+          cryptocurrencies <a href="/index.html">(full list here)</a> Use Stack
           Wallet to send, receive, exchange, and store Bitcoin, with the added
           confidence that every key generated for Bitcoin stays on your device,
           and you retain complete control. Download Stack Wallet below!
@@ -48,8 +48,9 @@ permalink: /bitcoin.html
           ></a>
         </div>
       </div>
-      <div class="coin-screen col">
+      <div class="coin-intro col">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+        <img class="intro-img-wallet" src="/img/coin-btc-wallet.svg" />
+        <img class="intro-img-coin" src="/img/coin-btc.svg" />
       </div>
     </div>
   </div>
@@ -57,57 +58,42 @@ permalink: /bitcoin.html
 
 <section id="about" class="section">
   <div class="container" id="art">
-    <div class="row article">
+    <div class="article">
-      <div class="wallet-screen col">
+      <div class="art">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+        <div class="part color_red">
-      </div>
-      <div class="col col-info">
           <h3>What is <span>bitcoin</span></h3>
           <p>
             Bitcoin was the first decentralized digital currency based on
             blockchain technology. It was created in 2008 by an anonymous
-          programmer known as Satoshi Nakamoto, who released the white paper in
+            programmer known as Satoshi Nakamoto, who released the white paper
-          a cryptography mailing list and later open sourced the software that
+            in a cryptography mailing list and later open sourced the software
-          implements the protocol.
+            that implements the protocol.
           </p>
         </div>
-      <div class="col col-info">
+        <div class="part color_blue">
-        <h3>Some key <span>terms</span></h3>
-        <p>
-          <span>Soft work</span> <br />
-          Change to the Bitcoin protocol that makes old blocks invalid which
-          were valid in the past. Bitcoin Segwit transactions feature was
-          implemented as a soft fork to the network.
-        </p>
-        <p>
-          <span>Hard work</span> <br />
-          Change to the Bitcoin protocol that makes previously invalid blocks or
-          transactions valid. The BerkeleyDB bug activated an accidental hard
-          fork to the Bitcoin network in 2013.
-        </p>
-      </div>
-    </div>
-    <div class="row article">
-      <div class="col col-info">
           <h3>
-          How does Bitcoin work & <span>where can I get a bitcoin wallet</span>?
+            How does Bitcoin work &
+            <span>where can I get a bitcoin wallet</span>?
           </h3>
           <p>
-          Bitcoin software runs on a number of distributed devices ranging from
+            Bitcoin software runs on a number of distributed devices ranging
-          smartphones as mobile wallets, PCs as desktop wallets, to ASICs for
+            from smartphones as mobile wallets, PCs as desktop wallets, to ASICs
-          mining. Transactions are relayed between nodes in a peer-to-peer
+            for mining. Transactions are relayed between nodes in a peer-to-peer
             fashion. In a few seconds a given block will be propagated to all
             other nodes on the network. While insuring that all nodes reach
-          consensus on which are the valid blocks. The process of supplying new
+            consensus on which are the valid blocks. The process of supplying
-          bitcoin to the system is done via the process of mining. The mining
+            new bitcoin to the system is done via the process of mining. The
-          software runs on specialized hardware and it tries to compute the hash
+            mining software runs on specialized hardware and it tries to compute
-          of assembled transactions and a number called the nonce. The software
+            the hash of assembled transactions and a number called the nonce.
-          targets a difficulty index automatically adjusted by the network. The
+            The software targets a difficulty index automatically adjusted by
-          first miner to find the correct nonce wins the mining reward and can
+            the network. The first miner to find the correct nonce wins the
-          relay the mined block to other peers on the network.
+            mining reward and can relay the mined block to other peers on the
+            network.
           </p>
         </div>
-      <div class="col col-info">
+      </div>
+      <div class="art">
+        <div class="part color_yellow">
           <h3>What are <span>the features of Bitcoin</span>?</h3>
           <p>
             <span>Store of Value</span> <br />
@@ -122,11 +108,28 @@ permalink: /bitcoin.html
           </p>
           <p>
             <span>Bitcoin Script Language</span> <br />
-          An assembly like language used to build complex types of transactions
+            An assembly like language used to build complex types of
-          and advanced contracts to an extent. Complex transactions like
+            transactions and advanced contracts to an extent. Complex
-          Multi-Sig are possible because of advanced Bitcoin scripting.
+            transactions like Multi-Sig are possible because of advanced Bitcoin
+            scripting.
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>Some key <span>terms</span></h3>
+          <p>
+            <span>Soft work</span> <br />
+            Change to the Bitcoin protocol that makes old blocks invalid which
+            were valid in the past. Bitcoin Segwit transactions feature was
+            implemented as a soft fork to the network.
+          </p>
+          <p>
+            <span>Hard work</span> <br />
+            Change to the Bitcoin protocol that makes previously invalid blocks
+            or transactions valid. The BerkeleyDB bug activated an accidental
+            hard fork to the Bitcoin network in 2013.
           </p>
         </div>
       </div>
     </div>
+  </div>
 </section>

css/style.css

@@ -970,11 +970,6 @@ h3 {
   padding: 0;
 }
 
-.intro-img-coin {
-  width: auto;
-  padding-left: 4rem;
-}
-
 #intro .intro-img img {
   width: 100%;
 }
@@ -2145,13 +2140,36 @@ footer .bottom-row p a {
 }
 
 /* Page coin */
+
+/* Coin intro */
+
+.coin-intro {
+  position: relative;
+}
+
+.intro-img-coin {
+  display: block;
+  position: absolute;
+  width: auto;
+  right: 2rem;
+  transform: translateY(-40%);
+}
+
+.intro-img-wallet {
+  display: block;
+  position: absolute;
+  width: auto;
+  left: 0;
+  transform: translate(30%, -55%);
+}
+
 /* Article */
 
 #about .container {
   position: relative;
   padding-top: 15rem;
-  /* padding-bottom: 10rem; */
+  padding-bottom: 10rem;
-  /* margin-top: 8rem; */
+  margin-top: 8rem;
 }
 
 #about .container::before {
@@ -2168,3 +2186,67 @@ footer .bottom-row p a {
   line-height: 1;
   opacity: 0.5;
 }
+
+.article {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.art {
+  width: 40%;
+}
+
+.part {
+  margin-bottom: 3.75rem;
+}
+
+#art .color_blue h3 span {
+  color: #3030d0;
+}
+
+#art .color_red h3 span {
+  color: #ff4b00;
+}
+
+#art .color_yellow h3 span {
+  color: #e7b408;
+}
+
+@media only screen and (max-width: 100rem) {
+  #about .container::before {
+    left: -2rem;
+  }
+}
+
+@media only screen and (max-width: 75rem) {
+  #about .container::before {
+    font-size: 8rem;
+  }
+
+  .art {
+    width: 100%;
+  }
+
+  .part {
+    margin-bottom: 2rem;
+  }
+}
+
+@media only screen and (max-width: 48rem) {
+  #about .container::before {
+    left: 1.5rem;
+  }
+}
+
+@media only screen and (max-width: 37rem) {
+  #about .container::before {
+    font-size: 4rem;
+    left: 1.5rem;
+  }
+
+  #about .container {
+    margin-top: 4rem;
+    padding-top: 8rem;
+  }
+}