v1.0.6

css/main.css

@@ -341,7 +341,6 @@ ul .balance:last-of-type {
 
 #main_search .input {
   border-radius: 0.5rem;
-  border: solid 1px rgba(var(--text), 0.12);
 }
 
 .input {
@@ -356,7 +355,7 @@ ul .balance:last-of-type {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 1rem;
+  padding: 0.8rem;
   gap: 1em;
   background: rgba(var(--text), 0.1);
 }
@@ -507,6 +506,7 @@ ul .balance:last-of-type {
 
 #page_header h3 {
   font-weight: 500;
+  text-transform: capitalize;
 }
 
 #page_header .icon {
@@ -729,7 +729,7 @@ p {
   font-weight: 500;
 }
 
-.transaction .block,
+.transaction .block-height,
 .transaction h4:first-of-type {
   margin-bottom: 1.5rem;
 }
@@ -748,6 +748,7 @@ p {
 
 #loader_page h4 {
   margin-top: 1.5rem;
+  font-weight: 500;
 }
 
 #loader {
@@ -761,6 +762,7 @@ p {
   stroke-dasharray: 200;
   -webkit-animation: load 2s infinite linear;
           animation: load 2s infinite linear;
+  stroke: var(--primary-color);
 }
 
 @-webkit-keyframes load {
@@ -861,6 +863,23 @@ p {
     grid-area: info;
     border-left: 1px solid rgba(var(--text), 0.2);
   }
+  .balance-card {
+    width: 40%;
+  }
+  #transaction_page {
+    display: -ms-grid;
+    display: grid;
+    gap: 0 1.5rem;
+    -ms-grid-columns: 40% 60%;
+        grid-template-columns: 40% 60%;
+        grid-template-areas: 'header header'
 '. .';
+  }
+  #transaction_page .grid-2 {
+    -ms-grid-row: 1;
+    -ms-grid-column: 1;
+    -ms-grid-column-span: 2;
+    grid-area: header;
+  }
 }
 
 @media only screen and (min-width: 1280px) {

css/main.scss

@@ -245,7 +245,6 @@ ul{
     }
     .input{
         border-radius: 0.5rem; 
-        border: solid 1px rgba(var(--text), 0.12);
     }
 }
 .input{
@@ -256,7 +255,7 @@ ul{
     width: 100%;
     margin: 1.5rem 0;
     align-items: center;
-    padding: 1rem;
+    padding: 0.8rem;
     gap: 1em;
     background: rgba(var(--text), 0.1);
     input{
@@ -354,6 +353,7 @@ ul{
     align-items: center;
     h3{
         font-weight: 500;
+        text-transform: capitalize;
     }
     .icon{
         height: 2rem;
@@ -514,7 +514,7 @@ p{
     h4{
         font-weight: 500;
     }
-    .block,
+    .block-height,
     h4:first-of-type{
         margin-bottom: 1.5rem;
     }
@@ -530,6 +530,7 @@ p{
     background: rgba(var(--foreground), 1);
     h4{
         margin-top: 1.5rem;
+        font-weight: 500;
     }
 }
 #loader{
@@ -540,6 +541,7 @@ p{
     stroke-dashoffset: 200;
     stroke-dasharray: 200;
     animation: load 2s infinite linear;
+    stroke: var(--primary-color);
 }
 @keyframes load{
     50%{
@@ -618,6 +620,19 @@ p{
             border-left: 1px solid rgba(var(--text), 0.2);
         }
     }
+    .balance-card{
+        width: 40%;
+    }
+    #transaction_page{
+        display: grid;
+        gap: 0 1.5rem;
+        grid-template-columns: 40% 60%;
+        grid-template-areas:    'header header'
+                                '. .';
+        .grid-2{
+            grid-area: header;
+        }
+    }
 }
 @media only screen and (min-width: 1280px){
     .margin, .page{

index.html

@@ -133,14 +133,18 @@
             },
             blockPage: function(obj){
                 let {blockHeight, size, transactions, reward, hash, difficulty, nonce} = obj,
-                    page = document.createElement('div');
+                    page = document.createElement('div'),
+                    wordForm = 'transaction';
+                if(transactions > 1)
+                    wordForm = 'transactions'
                 page.classList.add('page')
                 page.id = 'block_page'
+
                 page.innerHTML = `    
                 <h5 class="label">Block Height</h5>
                 <h2 class="block-height">${blockHeight}</h2>
                 <div class="card">
-                    <h4>1 Transaction</h4>
+                    <h4>1 ${wordForm}</h4>
                     <h5 class="label">${size}</h5>
                     <h5 class="label">Reward</h5>
                     <h4>${reward}</h4>