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">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+      <div class="coin-intro col">
+        <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="wallet-screen col">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
-      </div>
-      <div class="col col-info">
+    <div class="article">
+      <div class="art">
+        <div class="part color_red">
           <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
-          a cryptography mailing list and later open sourced the software that
-          implements the protocol.
+            programmer known as Satoshi Nakamoto, who released the white paper
+            in a cryptography mailing list and later open sourced the software
+            that implements the protocol.
           </p>
         </div>
-      <div class="col col-info">
-        <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">
+        <div class="part color_blue">
           <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
-          smartphones as mobile wallets, PCs as desktop wallets, to ASICs for
-          mining. Transactions are relayed between nodes in a peer-to-peer
+            Bitcoin software runs on a number of distributed devices ranging
+            from smartphones as mobile wallets, PCs as desktop wallets, to ASICs
+            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
-          bitcoin to the system is done via the process of mining. The mining
-          software runs on specialized hardware and it tries to compute the hash
-          of assembled transactions and a number called the nonce. The software
-          targets a difficulty index automatically adjusted by the network. The
-          first miner to find the correct nonce wins the mining reward and can
-          relay the mined block to other peers on the network.
+            consensus on which are the valid blocks. The process of supplying
+            new bitcoin to the system is done via the process of mining. The
+            mining software runs on specialized hardware and it tries to compute
+            the hash of assembled transactions and a number called the nonce.
+            The software targets a difficulty index automatically adjusted by
+            the network. The first miner to find the correct nonce wins the
+            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
-          and advanced contracts to an extent. Complex transactions like
-          Multi-Sig are possible because of advanced Bitcoin scripting.
+            An assembly like language used to build complex types of
+            transactions and advanced contracts to an extent. Complex
+            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; */
-  /* margin-top: 8rem; */
+  padding-bottom: 10rem;
+  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;
+  }
+}