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,75 +58,77 @@ 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">
+          <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.
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>
+            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
+            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.
+          </p>
+        </div>
       </div>
-      <div class="col col-info">
+      <div class="art">
-        <h3>What is <span>bitcoin</span></h3>
+        <div class="part color_yellow">
-        <p>
+          <h3>What are <span>the features of Bitcoin</span>?</h3>
-          Bitcoin was the first decentralized digital currency based on
+          <p>
-          blockchain technology. It was created in 2008 by an anonymous
+            <span>Store of Value</span> <br />
-          programmer known as Satoshi Nakamoto, who released the white paper in
+            Bitcoin, unlike other cryptocurrencies is considered as a store of
-          a cryptography mailing list and later open sourced the software that
+            value and could arguably become the next global reserve currency.
-          implements the protocol.
+          </p>
-        </p>
+          <p>
-      </div>
+            <span>Gateway to the Digital Currency World</span> <br />
-      <div class="col col-info">
+            Bitcoin is considered as the gateway to the cryptocurrency world,
-        <h3>Some key <span>terms</span></h3>
+            based on its status as the first successful digital currency
-        <p>
+            experiment.
-          <span>Soft work</span> <br />
+          </p>
-          Change to the Bitcoin protocol that makes old blocks invalid which
+          <p>
-          were valid in the past. Bitcoin Segwit transactions feature was
+            <span>Bitcoin Script Language</span> <br />
-          implemented as a soft fork to the network.
+            An assembly like language used to build complex types of
-        </p>
+            transactions and advanced contracts to an extent. Complex
-        <p>
+            transactions like Multi-Sig are possible because of advanced Bitcoin
-          <span>Hard work</span> <br />
+            scripting.
-          Change to the Bitcoin protocol that makes previously invalid blocks or
+          </p>
-          transactions valid. The BerkeleyDB bug activated an accidental hard
+        </div>
-          fork to the Bitcoin network in 2013.
+        <div class="part color_blue">
-        </p>
+          <h3>Some key <span>terms</span></h3>
-      </div>
+          <p>
-    </div>
+            <span>Soft work</span> <br />
-    <div class="row article">
+            Change to the Bitcoin protocol that makes old blocks invalid which
-      <div class="col col-info">
+            were valid in the past. Bitcoin Segwit transactions feature was
-        <h3>
+            implemented as a soft fork to the network.
-          How does Bitcoin work & <span>where can I get a bitcoin wallet</span>?
+          </p>
-        </h3>
+          <p>
-        <p>
+            <span>Hard work</span> <br />
-          Bitcoin software runs on a number of distributed devices ranging from
+            Change to the Bitcoin protocol that makes previously invalid blocks
-          smartphones as mobile wallets, PCs as desktop wallets, to ASICs for
+            or transactions valid. The BerkeleyDB bug activated an accidental
-          mining. Transactions are relayed between nodes in a peer-to-peer
+            hard fork to the Bitcoin network in 2013.
-          fashion. In a few seconds a given block will be propagated to all
+          </p>
-          other nodes on the network. While insuring that all nodes reach
+        </div>
-          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">
-        <h3>What are <span>the features of Bitcoin</span>?</h3>
-        <p>
-          <span>Store of Value</span> <br />
-          Bitcoin, unlike other cryptocurrencies is considered as a store of
-          value and could arguably become the next global reserve currency.
-        </p>
-        <p>
-          <span>Gateway to the Digital Currency World</span> <br />
-          Bitcoin is considered as the gateway to the cryptocurrency world,
-          based on its status as the first successful digital currency
-          experiment.
-        </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.
-        </p>
       </div>
     </div>
   </div>

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;
+  }
+}