Merge pull request 'Added blog and coin control guide' (#8) from maria/stack-wallet-website:blog into master

Reviewed-on: diego/stack-wallet-website#8

_config.yml

@@ -12,3 +12,10 @@ markdown: kramdown
 kramdown:
     smart_quotes: ["apos", "apos", "quot", "quot"]
     input: GFM
+    
+plugins:
+  - jekyll-paginate
+
+# paginate
+paginate: 6
+paginate_path: "/blog/page:num/"

_includes/header.html

@@ -18,6 +18,7 @@
                        <li class="nav-item link"><a href="{{ site.baseurl }}index.html#features">Features</a></li>
                        <li class="nav-item link"><a href="{{ site.baseurl }}/index.html#support">Support</a></li>
                        <li class="nav-item link"><a href="{{ site.baseurl }}/donate.html">Donate</a></li>
+                       <li class="nav-item link"><a href="{{ site.baseurl }}/blog/index.html">Blog</a></li>
                    </ul>
                </nav>
                <nav role='navigation' class="mobile-menu row">
@@ -32,6 +33,7 @@
                       <li class="mob-item"><a href="{{ site.baseurl }}index.html#features">Features</a></li>
                       <li class="mob-item"><a href="{{ site.baseurl }}index.html#support">Support</a></li>
                       <li class="nav-item link"><a href="{{ site.baseurl }}/donate.html">Donate</a></li>
+                      <li class="nav-item link"><a href="{{ site.baseurl }}/blog/index.html">Blog</a></li>
                       <!--li class="mob-item">
                           <input class="burger-checkdropdown" id="list4" type="checkbox" tabindex="0">
                           <label for="list4">Download</label>

_layouts/post.html

@@ -11,14 +11,12 @@
          <div class="container">
               <div class="row">
                   <div class="col post-page">
-                     <h1>{{page.title}}</h1>
-                     <p class="p-summary">{{ page.summary }}</p>
                      <div class="post-meta">
                          <p class="post-date">{{page.date | date: '%B %d, %Y'}}</p>
                          <p class="post-author">{{page.author}}</p>
                      </div>
+                     <h1>{{page.title}}</h1>
                      <div class="post-body">
-                         <img src="{{page.img}}" alt="{{page.alt}}">
                           {{content}}
                      </div>
                   </div>

_layouts/tag.html

@@ -14,11 +14,8 @@ title: page.tag
     <section class="faq-nav">
           <div class="container">
               <ul class="row">
-                  <li><a href="{{ site.baseurl }}/blog/">All</a></li>
-                  <li><a href="{{ site.baseurl }}/tag/news/">News</a></li>
-                  <li><a href="{{ site.baseurl }}/tag/dev/">Dev</a></li>
-                  <li><a href="{{ site.baseurl }}/tag/community/">Community</a></li>
-                  <li><a href="{{ site.baseurl }}/tag/guides/">Guides</a></li>
+                  <li><a href="{{ site.baseurl }}/blog/">all</a></li>
+                  <li><a href="{{ site.baseurl }}/tag/guides/">guides</a></li>
               </ul>
           </div>
       </section>
@@ -32,19 +29,18 @@ title: page.tag
                   <div class="col post-section">
                         <div class="post-meta">
                             <p class="post-date">{{post.date | date: '%B %d, %Y'}}</p>
-                            <p class="post-author">by {{post.author}}</p>
                         </div>
                         
                         <a href="{{ post.url }}" class="post-link">
+                            <h2>{{ post.title }}</h2>
+                            <p>{{ post.summary }}</p>
                             {%if post.img%}
                             <img src="{{post.img}}" alt="{{post.alt}}">
                             {%endif%}
-                            <h2>{{ post.title }}</h2>
-                            <p>{{ post.summary }}</p>
                         </a>
                         <p class="post-tag">
                             {% for tag in post.tags %}
-                            <a href="{{ site.baseurl }}/tag/{{tag}}">#{{tag}}</a>
+                            <a href="{{ site.baseurl }}/tag/{{tag}}">{{tag}}</a>
                             {% endfor %}
                         </p>
                   </div>

_posts/2023-04-28-coin-control-guide-for-stack-wallet.md

@@ -0,0 +1,68 @@
+---
+layout: post
+title: "New to Coin Control? Learn with Stack."
+summary: "With coin control you have the ability to choose the outputs you’d like to be spent in transactions, and freeze the ones you’d prefer not to. Here is our guide to Coin Control in Stack Wallet."
+tags: [guides]
+author: 
+img: "/blog/assets/coin-control-giude-min.png"
+---
+
+With coin control you have the ability to choose the outputs you’d like to be spent in transactions, and freeze the ones you’d prefer not to.
+
+## Step 1
+
+To get started, log into your app and navigate to the settings menu (gear button) at the top right. From here select Advanced near the bottom of the listed options. Once on this screen, make sure to toggle Enable Coin Control to ON. 
+
+Desktop views will be shown beneath mobile views for each step.
+
+![Stack Wallet Coin Control Guide - Step 1 on mobile](/blog/assets/coin-control-guide-mob-step1-min.png "Stack Wallet Coin Control Guide - Step 1 on mobile")
+
+![Stack Wallet Coin Control Guide - Step 1 on desktop](/blog/assets/coin-control-guide-desk-step1-min.png "Stack Wallet Coin Control Guide - Step 1 on desktop")
+
+## Step 2
+
+Afterwards head back to the main My Stack screen and open the wallet that you’d like to use (hint: must be coin control compatible, i.e. BTC, BCH, DOGE, NMC, or PART). Looking to the menu along the bottom of your wallet screen, select the More option and then Coin Control from there.
+
+![Stack Wallet Coin Control Guide - Step 2 on mobile](/blog/assets/coin-control-guide-mob-step2-min.png "Stack Wallet Coin Control Guide - Step 2 on mobile")
+
+![Stack Wallet Coin Control Guide - Step 1 on desktop](/blog/assets/coin-control-guide-desk-step2-min.png "Stack Wallet Coin Control Guide - Step 2 on desktop")
+
+## Step 3
+
+You should now be able to see the available (spendable) outputs in your wallet. You can also switch the view to Frozen Outputs to review or unfreeze any that have been made unavailable for spending. In order to select any of these outputs to change its status, simply touch/click on the coin symbol beside it and then freeze/unfreeze at the bottom of your screen.
+
+Frozen outputs cannot be used for any future transactions until manually unfrozen. Because of this, the Available Balance in your wallet may reflect a lower amount than what can be seen in your Full Balance. When in doubt, always check for any frozen outputs that may have gone forgotten!
+
+![Stack Wallet Coin Control Guide - Step 3 on mobile](/blog/assets/coin-control-guide-mob-step3-min.png "Stack Wallet Coin Control Guide - Step 3 on mobile")
+
+![Stack Wallet Coin Control Guide - Step 3 on desktop](/blog/assets/coin-control-guide-desk-step3-min.png "Stack Wallet Coin Control Guide - Step 3 on desktop")
+
+## Step 4
+
+You also have the option to sort your outputs in several different ways. To try this, select the icon (3 lines) at the top right of the coin control page, then choose between sorting by the age of the output, its address, or its value. 
+
+![Stack Wallet Coin Control Guide - Step 4 on mobile](/blog/assets/coin-control-guide-mob-step4-min.png "Stack Wallet Coin Control Guide - Step 4 on mobile")
+
+![Stack Wallet Coin Control Guide - Step 4 on desktop](/blog/assets/coin-control-guide-desk-step4-min.png "Stack Wallet Coin Control Guide - Step 24 on desktop")
+
+## Step 5
+
+In order to see more detailed information about an individual output, simply touch or click on the amount itself. From there you will be able to view and/or edit its status, address, transaction ID, number of confirmations, and freeze reason (note: freeze reasons simply serve the purpose of describing why outputs were initially set aside as unavailable for spending). This last section may be autofilled with context from previous activity, but can always be customized to suit different circumstances.
+
+![Stack Wallet Coin Control Guide - Step 5 on mobile](/blog/assets/coin-control-guide-mob-step5-min.png "Stack Wallet Coin Control Guide - Step 5 on mobile")
+
+![Stack Wallet Coin Control Guide - Step 5 on desktop](/blog/assets/coin-control-guide-desk-step5-min.png "Stack Wallet Coin Control Guide - Step 5 on desktop")
+
+## Step 6
+
+From this point, transacting with coin control turned on is a breeze. After you’ve chosen a wallet to use and initiated the sending process you may fill out all other forms as usual and underneath the amount to send, select Coin Control>Select Coins. This will bring you to a screen much like before where you have the opportunity to view your available and frozen outputs and choose which in particular to spend from.
+
+![Stack Wallet Coin Control Guide - Step 6 on mobile](/blog/assets/coin-control-guide-mob-step6-min.png "Stack Wallet Coin Control Guide - Step 6 on mobile")
+
+![Stack Wallet Coin Control Guide - Step 6 on desktop](/blog/assets/coin-control-guide-desk-step6-min.png "Stack Wallet Coin Control Guide - Step 6 on desktop")
+
+## Step 7
+
+Then once you’ve made your selection(s), that’s it - you’re ready to send!
+
+This is one easy-to-pick-up feature that puts further control of your funds into your hands. Try taking advantage of coin control when you #BuildYourStack with Stack Wallet!

blog/index.html

@@ -0,0 +1,79 @@
+---
+layout: base
+title: Stack Wallet Blog
+---
+
+    <section class="page-intro section">
+          <div class="row">
+              <div class="col">
+                  <h1>Blog</h1>
+              </div>
+          </div>
+    </section>
+    
+    <section class="faq-nav">
+          <div class="container">
+              <ul class="row">
+                  <li><a href="{{ site.baseurl }}/blog/">all</a></li>
+                  <li><a href="{{ site.baseurl }}/tag/guides/">guides</a></li>
+
+              </ul>
+          </div>
+      </section>
+      
+      <section class="blog-section">
+         <div class="container">
+             {% for post in paginator.posts %}
+              <div class="row">
+                  <div class="col post-section">
+                        <div class="post-meta">
+                            <p class="post-date">{{post.date | date: '%B %d, %Y'}}</p>
+                        </div>
+                        
+                        <a href="{{ site.baseurl }}{{ post.url }}" class="post-link">
+                            <h2>{{ post.title }}</h2>
+                            <p>{{ post.summary }}</p>
+                            {%if post.img%}
+                            <img src="{{post.img}}" alt="{{post.alt}}">
+                            {%endif%}
+                        </a>
+                        <p class="post-tag">
+                            {% for tag in post.tags %}
+                            <a href="{{ site.baseurl }}/tag/{{tag}}">{{tag}}</a>
+                            {% endfor %}
+                        </p>
+                  </div>
+              </div>
+              {% endfor %}
+          </div>
+      </section>
+
+      <section class="blog-section">
+          <div class="container">
+             <div class="pagination">
+              {% if paginator.total_pages > 1 %}
+                <div class="text-center page-numbers"><p>
+                  {% if paginator.previous_page %}
+                    <a href="{{ site.baseurl }}{{ paginator.previous_page_path}}" class="page-button">Prev</a>
+                  {% endif %}
+
+                  {% for page in (1..paginator.total_pages) %}
+                   {% assign total = paginator.total_pages %}
+                   
+                   
+                    {% if page == paginator.page %}
+                       {{ page }} of {{total}}
+                    
+                      
+                    
+                    {% endif %}
+                  {% endfor %}
+
+                  {% if paginator.next_page %}
+                    <a href="{{ site.baseurl }}{{ paginator.next_page_path}}" class="page-button">Next</a>
+                  {% endif %}
+                </p></div>
+                {% endif %}
+              </div>
+          </div>
+      </section>

css/style.css

@@ -1748,6 +1748,358 @@ header .container {
     line-height: 1.6;
 }
 
+/*blog*/
+
+.page-intro {
+    padding: 6rem 0 2rem 0;
+}
+
+.page-intro h1 {
+    text-align: center;
+    font-size: 3rem;
+    font-family: "Noto Sans", sans-serif;
+    font-weight: 800;
+}
+
+.faq-nav .row {
+    -ms-flex-pack: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.faq-nav ul li {
+    margin-right: 1rem;
+}
+
+.faq-nav ul li:last-of-type {
+    margin-right: 0;
+}
+
+.faq-nav ul li a {
+    padding: 0.5rem 1rem;
+    display: block;
+    text-decoration: none;
+    font-size: 1rem;
+    -webkit-transition: all ease-out .2s;
+    -moz-transition: all ease-out .2s;
+    -o-transition: all ease-out .2s;
+    transition: all ease-out .2s;
+    background-color: #E0E3E3;
+    border-radius: 100px;
+    min-width: 4rem;
+}
+
+.faq-nav ul li a:hover, .faq-nav ul li a:focus, .faq-nav ul li a:active {
+    background-color: #CDCFD2;
+}
+
+@media only screen and (max-width: 62rem) {
+    
+.faq-nav ul li a {
+    font-size: 1rem;
+}    
+    
+}
+
+@media only screen and (max-width: 48rem) {
+    
+.page-intro h1 {
+    font-size: 2.5rem;
+}
+    
+}
+
+@media only screen and (max-width: 45rem) {
+    
+.faq-nav {
+    display: none;
+}
+    
+.faq-nav.disclaimer {
+    display: block;
+}
+    
+}
+
+@media only screen and (max-width: 30rem) {
+    
+}
+
+.blog-section {
+    padding-top: 4rem;
+}
+
+.blog-section:last-of-type {
+    padding-bottom: 6rem;
+}
+
+@media only screen and (max-width: 38rem) {
+    
+.blog-section {
+    padding-top: 4rem;
+}  
+    
+.blog-section:last-of-type {
+    padding-bottom: 4rem;
+}
+
+}
+
+.blog-section .container {
+    width: 43rem;
+}
+
+.blog-section .col.post-section {
+    background-color: #ffffff;
+    margin-top: 2rem;
+    border-radius: 32px;
+    padding: 2rem;
+}
+
+.blog-section .col.post-section .post-meta {
+    margin-bottom: 1rem;
+}
+
+.blog-section .col.post-section .post-meta p, .blog-section .col.post-page .post-meta p {
+    color: #A9ACAC;
+}
+
+.blog-section .col.post-section a.post-link {
+    text-decoration: none;
+}
+
+.blog-section .col.post-section a.post-link h2 {
+    font-size: 1.8rem;
+    line-height: 1.3;
+}
+
+.blog-section .col.post-section a.post-link p, .blog-section .post-page .p-summary {
+    font-size: 1rem;
+    color: #A9ACAC;
+    padding-top: 0.5rem;
+}
+
+.blog-section .col.post-section a.post-link img {
+    margin-top: 1.5rem;
+    border-radius: 16px;
+}
+
+.blog-section .col.post-section .post-tag {
+    margin-top: 2rem;
+}
+
+.blog-section .col.post-section .post-tag a {
+    text-decoration: none;
+    color: #232323;
+    background-color: #E0E3E3;
+    border-radius: 32px;
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    -webkit-transition: all ease-out .2s;
+    -moz-transition: all ease-out .2s;
+    -o-transition: all ease-out .2s;
+    transition: all ease-out .2s;
+}
+
+.blog-section .col.post-section .post-tag a:hover, .blog-section .col.post-section .post-tag a:active, .blog-section .col.post-section .post-tag a:focus {
+    background-color: #CDCFD2;
+}
+
+.blog-section .pagination {
+    text-align: center;
+    font-size: 1.2rem;
+}
+
+.blog-section .pagination .page-button {
+    text-decoration: none;
+    color: #fff;
+    background-color: #232323;
+    padding: 0.5rem 1rem;
+    min-width: 4rem;
+    border-radius: 100px;
+    display: inline-block;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    -webkit-transition: all ease-out .2s;
+    -moz-transition: all ease-out .2s;
+    -o-transition: all ease-out .2s;
+    transition: all ease-out .2s;
+}
+
+.blog-section .pagination .page-button:hover, .blog-section .pagination .page-button:active, .blog-section .pagination .page-button:focus {
+    background-color: #454545;
+}
+
+.blog-section .col.post-page .post-meta {
+    margin-top: 1rem;
+}
+
+.blog-section .post-page h1 {
+    font-size: 1.8rem;
+    line-height: 1.3;
+    margin-top: 2rem;
+}
+
+.blog-section .col.post-page .post-body img {
+    max-width: 100%;
+    width: auto;
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
+}
+
+.blog-section .col.post-page .post-body h2 {
+    font-size: 1.5rem;
+    margin-top: 3rem;
+    margin-bottom: -1rem;
+    font-weight: 700;
+    line-height: 1.3;
+}
+
+.blog-section .col.post-page .post-body h3 {
+    font-size: 1.5rem;
+    font-family: "Noto Sans", sans-serif;
+    margin-bottom: -1rem;
+    margin-top: 2rem;
+    line-height: 1.5;
+}
+
+.blog-section .col.post-page .post-body h4 {
+    font-size: 1.5rem;
+    font-family: "Noto Sans", sans-serif;
+    margin-bottom: -1rem;
+    margin-top: 2rem;
+    line-height: 1.5;
+}
+
+.blog-section .col.post-page .post-body p, .blog-section .col.post-page .post-body table {
+    font-size: 1.2rem;
+    padding-top: 2rem;
+}
+
+.blog-section .col.post-page .post-body table {
+    margin-top: 2rem;
+}
+
+.blog-section .col.post-page .post-body table td, th {
+    padding: 1rem 2rem;
+    text-align: left;
+    background: #DFEBF2;
+}
+
+.blog-section .col.post-page .post-body table tr {
+    border-bottom: 1px solid #fff;
+}
+
+.blog-section .col.post-page .post-body p a {
+    text-decoration: none;
+    color: #9b1c2e;
+    border-bottom: 1px solid #9b1c2e;
+}
+
+.blog-section .col.post-page .post-body ul {
+    list-style: disc;
+    padding-top: 2rem;
+    padding-left: 2rem;
+}
+
+.blog-section .col.post-page .post-body ul ul {
+    list-style: circle;
+    padding-top: 0;
+}
+
+.blog-section ol, .guide-section ol {
+    list-style: decimal;
+    margin-left: 1.5rem;
+    margin-top: 2rem;
+}
+
+.blog-section .col.post-page .post-body ul li, .blog-section .col.post-page .post-body ol li {
+    font-size: 1.2rem;
+}
+
+.blog-section .col.post-page .post-body ul li a, .blog-section .col.post-page .post-body ol li a {
+    color: #9b1c2e;
+    text-decoration: none;
+    border-bottom: 1px solid #9b1c2e;
+}
+
+.blog-section .col.post-page .post-body ul p, .blog-section .col.post-page .post-body ol p {
+    display: block;
+}
+
+.blog-section .col.post-page .post-body code {
+    background-color: blue;
+    display: block;
+    overflow: auto;
+    padding: 1rem;
+    white-space: pre;
+    background-color: #DFEBF2;
+    font: 0.9rem andale mono,Courier,courier new,monospace;
+    margin-top: 1rem;
+}
+
+.blog-section h2.tag-blog {
+    font-size: 2.5rem;
+    text-align: center;
+}
+
+@media only screen and (max-width: 48rem) {
+
+.page-intro {
+    padding-top: 3rem;
+}
+
+.blog-section {
+    padding-top: 3rem;
+}
+
+.blog-section .container {
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.blog-section .post-page {
+    padding: 0;
+}
+    
+.blog-section .row:first-child .col.post-section {
+    margin-top: 0;
+}
+    
+.blog-section .col.post-section a.post-link h2, .blog-section .post-page h1 {
+    font-size: 1.8rem;
+}
+    
+.blog-section .col.post-page .post-body h2 {
+    font-size: 1.7rem;
+}
+
+.blog-section .col.post-section .post-tag {
+    margin-top: 1.5rem;
+}
+    
+.blog-section .col.post-section .post-tag a {
+    display: inline-block;
+}
+    
+}
+
+@media only screen and (max-width: 45rem) {
+   
+    .blog-section {
+        padding-top: 0;
+    } 
+}
+
+@media only screen and (max-width: 30rem) {
+
+.blog-section .col.post-section a.post-link h2, .blog-section .post-page h1 {
+    font-size: 1.7rem;
+}
+    
+}
+
 /* footer */
 
 footer {