_includes/header.html

@@ -37,13 +37,13 @@
           </ul>
         </li>
         <li class="nav-item link">
-          <a href="{{ site.baseurl }}#features">Features</a>
+          <a href="{{ site.baseurl }}/index.html#features">Features</a>
         </li>
         <li class="nav-item link">
-          <a href="{{ site.baseurl }}#coins">Coins</a>
+          <a href="{{ site.baseurl }}/index.html#coins">Coins</a>
         </li>
         <li class="nav-item link">
-          <a href="{{ site.baseurl }}#support">Support</a>
+          <a href="{{ site.baseurl }}/index.html#support">Support</a>
         </li>
         <li class="nav-item link">
           <a href="{{ site.baseurl }}/donate.html">Donate</a>

bitcoin.html

@@ -6,15 +6,15 @@ permalink: /bitcoin.html
 
 <section id="intro" class="page-intro section">
   <div class="container">
-    <div class="intro-coin row">
+    <div class="row">
       <div class="intro-info col">
         <h1>A human-centered wallet for Bitcoin</h1>
         <p>
           Stack Wallet supports Bitcoin (BTC) as well as many other
-          cryptocurrencies <a href="/index.html">(full list here)</a> Use Stack
+          cryptocurrencies <a href="/index.html#coins">(full list here)</a> Use
-          Wallet to send, receive, exchange, and store Bitcoin, with the added
+          Stack Wallet to send, receive, exchange, and store Bitcoin, with the
-          confidence that every key generated for Bitcoin stays on your device,
+          added confidence that every key generated for Bitcoin stays on your
-          and you retain complete control. Download Stack Wallet below!
+          device, and you retain complete control. Download Stack Wallet below!
         </p>
         <div class="row download-btn">
           <a
@@ -48,9 +48,8 @@ permalink: /bitcoin.html
           ></a>
         </div>
       </div>
-      <div class="coin-intro col">
+      <div class="intro-img-coin col">
-        <img class="intro-img-wallet" src="/img/coin-btc-wallet.svg" />
+        <img src="/img/coin-btc.png" />
-        <img class="intro-img-coin" src="/img/coin-btc.svg" />
       </div>
     </div>
   </div>

bitcoincash.html

@@ -11,10 +11,10 @@ permalink: /bitcoincash.html
         <h1>A human-centered wallet for Bitcoin cash</h1>
         <p>
           Stack Wallet supports Bitcoin cash (BCH) as well as many other
-          cryptocurrencies <a href="/coins.html">(full list here)</a> Use Stack
+          cryptocurrencies <a href="/index.html#coins">(full list here)</a> Use
-          Wallet to send, receive, exchange, and store Bitcoin cash, with the
+          Stack Wallet to send, receive, exchange, and store Bitcoin cash, with
-          added confidence that every key generated for Bitcoin cash stays on
+          the added confidence that every key generated for Bitcoin cash stays
-          your device, and you retain complete control. Download Stack Wallet
+          on your device, and you retain complete control. Download Stack Wallet
           below!
         </p>
         <div class="row download-btn">
@@ -49,11 +49,51 @@ permalink: /bitcoincash.html
           ></a>
         </div>
       </div>
-      <div class="coin-screen col">
+      <div class="intro-img-coin col">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+        <img src="/img/.png" />
       </div>
     </div>
   </div>
 </section>
 
-<section class="coin-info">Bitcoin cash</section>
+<section id="about" class="section">
+  <div class="container" id="art">
+    <div class="article">
+      <div class="art">
+        <div class="part color_red">
+          <h3>Text <span>Red</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>
+            Text
+            <span>Blue</span>?
+          </h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+      <div class="art">
+        <div class="part color_yellow">
+          <h3>Text <span>Yellow</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>Text <span>Blue</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

css/style.css

@@ -1756,6 +1756,7 @@ h3 {
 }
 
 #intro-info h3,
+#art h3,
 #intro-info h3 + p {
   margin-bottom: 1rem;
 }
@@ -2143,24 +2144,76 @@ footer .bottom-row p a {
 
 /* Coin intro */
 
-.coin-intro {
+/* .coin-intro {
   position: relative;
+} */
+
+/* .intro-img-coin {
+  display: block;
+  padding-left: 3rem;
+  width: 70%;
+} */
+
+#intro .intro-img-coin {
+  -ms-flex-preferred-size: 50%;
+  flex-basis: 50%;
+  max-width: 50%;
 }
 
-.intro-img-coin {
+#intro .intro-img-coin {
-  display: block;
+  padding: 0;
-  position: absolute;
-  width: auto;
-  right: 2rem;
-  transform: translateY(-40%);
 }
 
-.intro-img-wallet {
+#intro .intro-img-coin img {
-  display: block;
+  margin: 0 auto;
-  position: absolute;
   width: auto;
-  left: 0;
+}
-  transform: translate(30%, -55%);
+
+@media only screen and (min-width: 112rem) {
+  #intro .intro-img-coin img {
+    width: auto;
+  }
+}
+
+@media only screen and (max-width: 112rem) {
+  #intro .intro-img-coin img {
+    width: auto;
+    margin: 0 auto;
+  }
+}
+
+@media only screen and (max-width: 62rem) {
+  #intro .intro-img-coin img {
+    width: 100%;
+    padding: 0 1rem;
+  }
+}
+
+@media only screen and (max-width: 48rem) {
+  #intro .intro-img-coin {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    margin-top: 3rem;
+  }
+
+  #intro .intro-img-coin img {
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media only screen and (max-width: 37rem) {
+  #intro .intro-img-coin img {
+    width: 70%;
+  }
+}
+
+@media only screen and (max-width: 37rem) {
+  #intro .intro-img-coin img {
+    width: 70%;
+  }
 }
 
 /* Article */
@@ -2169,7 +2222,7 @@ footer .bottom-row p a {
   position: relative;
   padding-top: 15rem;
   padding-bottom: 10rem;
-  margin-top: 8rem;
+  margin-top: 6rem;
 }
 
 #about .container::before {
@@ -2233,6 +2286,12 @@ footer .bottom-row p a {
   }
 }
 
+@media only screen and (max-width: 62rem) {
+  #about .container::before {
+    font-size: 6rem;
+  }
+}
+
 @media only screen and (max-width: 48rem) {
   #about .container::before {
     left: 1.5rem;

dogecoin.html

@@ -11,10 +11,10 @@ permalink: /dogecoin.html
         <h1>A human-centered wallet for Dogecoin</h1>
         <p>
           Stack Wallet supports Dogecoin (DOGE) as well as many other
-          cryptocurrencies <a href="/coins.html">(full list here)</a> Use Stack
+          cryptocurrencies <a href="/index.html#coins">(full list here)</a> Use
-          Wallet to send, receive, exchange, and store Dogecoin, with the added
+          Stack Wallet to send, receive, exchange, and store Dogecoin, with the
-          confidence that every key generated for Dogecoin stays on your device,
+          added confidence that every key generated for Dogecoin stays on your
-          and you retain complete control. Download Stack Wallet below!
+          device, and you retain complete control. Download Stack Wallet below!
         </p>
         <div class="row download-btn">
           <a
@@ -48,11 +48,51 @@ permalink: /dogecoin.html
           ></a>
         </div>
       </div>
-      <div class="coin-screen col">
+      <div class="intro-img-coin col">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+        <img src="/img/coin-dogecoin.png" />
       </div>
     </div>
   </div>
 </section>
 
-<section class="coin-info">Dogecoin</section>
+<section id="about" class="section">
+  <div class="container" id="art">
+    <div class="article">
+      <div class="art">
+        <div class="part color_red">
+          <h3>Text <span>Red</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>
+            Text
+            <span>Blue</span>?
+          </h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+      <div class="art">
+        <div class="part color_yellow">
+          <h3>Text <span>Yellow</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>Text <span>Blue</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

epiccash.html

@@ -11,9 +11,9 @@ permalink: /epiccash.html
         <h1>A human-centered wallet for Epic cash</h1>
         <p>
           Stack Wallet supports Epic cash (EPIC) as well as many other
-          cryptocurrencies <a href="/coins.html">(full list here)</a> Use Stack
+          cryptocurrencies <a href="/index.html#coins">(full list here)</a> Use
-          Wallet to send, receive, exchange, and store Epic cash, with the added
+          Stack Wallet to send, receive, exchange, and store Epic cash, with the
-          confidence that every key generated for Epic cash stays on your
+          added confidence that every key generated for Epic cash stays on your
           device, and you retain complete control. Download Stack Wallet below!
         </p>
         <div class="row download-btn">
@@ -48,11 +48,51 @@ permalink: /epiccash.html
           ></a>
         </div>
       </div>
-      <div class="coin-screen col">
+      <div class="intro-img-coin col">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+        <img src="/img/coin-epiccash.png" />
       </div>
     </div>
   </div>
 </section>
 
-<section class="coin-info">Epic cash</section>
+<section id="about" class="section">
+  <div class="container" id="art">
+    <div class="article">
+      <div class="art">
+        <div class="part color_red">
+          <h3>Text <span>Red</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>
+            Text
+            <span>Blue</span>?
+          </h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+      <div class="art">
+        <div class="part color_yellow">
+          <h3>Text <span>Yellow</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>Text <span>Blue</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

firo.html

@@ -11,10 +11,10 @@ permalink: /firo.html
         <h1>A human-centered wallet for Firo</h1>
         <p>
           Stack Wallet supports Firo (FIRO) as well as many other
-          cryptocurrencies <a href="/coins.html">(full list here)</a> Use Stack
+          cryptocurrencies <a href="/index.html#coins">(full list here)</a> Use
-          Wallet to send, receive, exchange, and store Firo, with the added
+          Stack Wallet to send, receive, exchange, and store Firo, with the
-          confidence that every key generated for Firo stays on your device, and
+          added confidence that every key generated for Firo stays on your
-          you retain complete control. Download Stack Wallet below!
+          device, and you retain complete control. Download Stack Wallet below!
         </p>
         <div class="row download-btn">
           <a
@@ -48,11 +48,51 @@ permalink: /firo.html
           ></a>
         </div>
       </div>
-      <div class="coin-screen col">
+      <div class="intro-img-coin col">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+        <img src="/img/coin-firo.png" />
       </div>
     </div>
   </div>
 </section>
 
-<section class="coin-info">Firo</section>
+<section id="about" class="section">
+  <div class="container" id="art">
+    <div class="article">
+      <div class="art">
+        <div class="part color_red">
+          <h3>Text <span>Red</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>
+            Text
+            <span>Blue</span>?
+          </h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+      <div class="art">
+        <div class="part color_yellow">
+          <h3>Text <span>Yellow</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>Text <span>Blue</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

litecoin.html

@@ -11,10 +11,10 @@ permalink: /litecoin.html
         <h1>A human-centered wallet for Litecoin</h1>
         <p>
           Stack Wallet supports Litecoin (LTC) as well as many other
-          cryptocurrencies <a href="/coins.html">(full list here)</a> Use Stack
+          cryptocurrencies <a href="/index.html#coins">(full list here)</a> Use
-          Wallet to send, receive, exchange, and store Litecoin, with the added
+          Stack Wallet to send, receive, exchange, and store Litecoin, with the
-          confidence that every key generated for Litecoin stays on your device,
+          added confidence that every key generated for Litecoin stays on your
-          and you retain complete control. Download Stack Wallet below!
+          device, and you retain complete control. Download Stack Wallet below!
         </p>
         <div class="row download-btn">
           <a
@@ -48,11 +48,51 @@ permalink: /litecoin.html
           ></a>
         </div>
       </div>
-      <div class="coin-screen col">
+      <div class="intro-img-coin col">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+        <img src="/img/coin-litecoin.png" />
       </div>
     </div>
   </div>
 </section>
 
-<section class="coin-info">Litecoin</section>
+<section id="about" class="section">
+  <div class="container" id="art">
+    <div class="article">
+      <div class="art">
+        <div class="part color_red">
+          <h3>Text <span>Red</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>
+            Text
+            <span>Blue</span>?
+          </h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+      <div class="art">
+        <div class="part color_yellow">
+          <h3>Text <span>Yellow</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>Text <span>Blue</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

monero.html

@@ -11,10 +11,10 @@ permalink: /monero.html
         <h1>A human-centered wallet for Monero</h1>
         <p>
           Stack Wallet supports Monero (XMR) as well as many other
-          cryptocurrencies <a href="/coins.html">(full list here)</a> Use Stack
+          cryptocurrencies <a href="/index.html#coins">(full list here)</a> Use
-          Wallet to send, receive, exchange, and store Monero, with the added
+          Stack Wallet to send, receive, exchange, and store Monero, with the
-          confidence that every key generated for Monero stays on your device,
+          added confidence that every key generated for Monero stays on your
-          and you retain complete control. Download Stack Wallet below!
+          device, and you retain complete control. Download Stack Wallet below!
         </p>
         <div class="row download-btn">
           <a
@@ -48,11 +48,51 @@ permalink: /monero.html
           ></a>
         </div>
       </div>
-      <div class="coin-screen col">
+      <div class="intro-img-coin col">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+        <img src="/img/coin-monero.png" />
       </div>
     </div>
   </div>
 </section>
 
-<section class="coin-info">Monero</section>
+<section id="about" class="section">
+  <div class="container" id="art">
+    <div class="article">
+      <div class="art">
+        <div class="part color_red">
+          <h3>Text <span>Red</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>
+            Text
+            <span>Blue</span>?
+          </h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+      <div class="art">
+        <div class="part color_yellow">
+          <h3>Text <span>Yellow</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>Text <span>Blue</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

namecoin.html

@@ -11,10 +11,10 @@ permalink: /namecoin.html
         <h1>A human-centered wallet for Namecoin</h1>
         <p>
           Stack Wallet supports Namecoin (NMC) as well as many other
-          cryptocurrencies <a href="/coins.html">(full list here)</a> Use Stack
+          cryptocurrencies <a href="/index.html#coins">(full list here)</a> Use
-          Wallet to send, receive, exchange, and store Namecoin, with the added
+          Stack Wallet to send, receive, exchange, and store Namecoin, with the
-          confidence that every key generated for Namecoin stays on your device,
+          added confidence that every key generated for Namecoin stays on your
-          and you retain complete control. Download Stack Wallet below!
+          device, and you retain complete control. Download Stack Wallet below!
         </p>
         <div class="row download-btn">
           <a
@@ -48,11 +48,51 @@ permalink: /namecoin.html
           ></a>
         </div>
       </div>
-      <div class="coin-screen col">
+      <div class="intro-img-coin col">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+        <img src="/img/coin-namecoin.png" />
       </div>
     </div>
   </div>
 </section>
 
-<section class="coin-info">Namecoin</section>
+<section id="about" class="section">
+  <div class="container" id="art">
+    <div class="article">
+      <div class="art">
+        <div class="part color_red">
+          <h3>Text <span>Red</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>
+            Text
+            <span>Blue</span>?
+          </h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+      <div class="art">
+        <div class="part color_yellow">
+          <h3>Text <span>Yellow</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>Text <span>Blue</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

particl.html

@@ -11,10 +11,10 @@ permalink: /particl.html
         <h1>A human-centered wallet for Particl</h1>
         <p>
           Stack Wallet supports Particl (PART) as well as many other
-          cryptocurrencies <a href="/coins.html">(full list here)</a> Use Stack
+          cryptocurrencies <a href="/index.html#coins">(full list here)</a> Use
-          Wallet to send, receive, exchange, and store Particl, with the added
+          Stack Wallet to send, receive, exchange, and store Particl, with the
-          confidence that every key generated for Particl stays on your device,
+          added confidence that every key generated for Particl stays on your
-          and you retain complete control. Download Stack Wallet below!
+          device, and you retain complete control. Download Stack Wallet below!
         </p>
         <div class="row download-btn">
           <a
@@ -48,11 +48,51 @@ permalink: /particl.html
           ></a>
         </div>
       </div>
-      <div class="coin-screen col">
+      <div class="intro-img-coin col">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+        <img src="/img/.png" />
       </div>
     </div>
   </div>
 </section>
 
-<section class="coin-info">Particl</section>
+<section id="about" class="section">
+  <div class="container" id="art">
+    <div class="article">
+      <div class="art">
+        <div class="part color_red">
+          <h3>Text <span>Red</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>
+            Text
+            <span>Blue</span>?
+          </h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+      <div class="art">
+        <div class="part color_yellow">
+          <h3>Text <span>Yellow</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>Text <span>Blue</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

wownero.html

@@ -11,10 +11,10 @@ permalink: /wownero.html
         <h1>A human-centered wallet for Wownero</h1>
         <p>
           Stack Wallet supports Wownero (WOW) as well as many other
-          cryptocurrencies <a href="/coins.html">(full list here)</a> Use Stack
+          cryptocurrencies <a href="/index.html#coins">(full list here)</a> Use
-          Wallet to send, receive, exchange, and store Wownero, with the added
+          Stack Wallet to send, receive, exchange, and store Wownero, with the
-          confidence that every key generated for Wownero stays on your device,
+          added confidence that every key generated for Wownero stays on your
-          and you retain complete control. Download Stack Wallet below!
+          device, and you retain complete control. Download Stack Wallet below!
         </p>
         <div class="row download-btn">
           <a
@@ -48,11 +48,51 @@ permalink: /wownero.html
           ></a>
         </div>
       </div>
-      <div class="coin-screen col">
+      <div class="intro-img-coin col">
-        <img class="intro-img-coin" src="/img/coin-btc-screen.svg" />
+        <img src="/img/coin-wownero.png" />
       </div>
     </div>
   </div>
 </section>
 
-<section class="coin-info">Wownero</section>
+<section id="about" class="section">
+  <div class="container" id="art">
+    <div class="article">
+      <div class="art">
+        <div class="part color_red">
+          <h3>Text <span>Red</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>
+            Text
+            <span>Blue</span>?
+          </h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+      <div class="art">
+        <div class="part color_yellow">
+          <h3>Text <span>Yellow</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+        <div class="part color_blue">
+          <h3>Text <span>Blue</span></h3>
+          <p>
+            <span>Text</span> <br />
+            Text
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>