switch to postcss styling, add zap btn, and december meetup

app.vue

@@ -18,13 +18,6 @@
       {  defer: 'true', 'data-domain': 'crbtc.org', src: 'https://pa.inspin.io/js/latest.js' }
     ]
   })
-
-  const nuxtApp = useNuxtApp()
-
-  nuxtApp.hook("page:finish", () => {
-    window.scrollTo(0, 0)
-  })
-  
 </script>
 
 <template>

assets/fonts/crbtc/crbtc.svg

@@ -10,4 +10,5 @@
 <glyph unicode="&#xe900;" d="M1024 448c0-282.77-229.23-512-512-512s-512 229.23-512 512c0 282.77 229.23 512 512 512s512-229.23 512-512z" />
 <glyph unicode="&#xe901;" d="M484.771 781.592l-23.031-92.254c-12.226 2.785-24.221 5.536-35.869 8.431l0.061 0.285-77.485 19.346-14.946-60c0 0 41.687-9.548 40.808-10.138 22.755-5.679 26.866-20.742 26.177-32.677l-26.208-105.131c1.569-0.4 3.598-0.981 5.838-1.877-1.873 0.464-3.874 0.981-5.938 1.477l-36.738-147.285c-2.785-6.912-9.841-17.273-25.746-13.338 0.559-0.816-40.838 10.192-40.838 10.192l-27.892-64.308 73.115-18.223c13.601-3.409 26.934-6.972 40.054-10.331l-23.254-93.346 56.115-14 23.031 92.354c-0.134-0.577 14.87-4.575 29.937-8.413l14.832-3.203-22.946-91.923 56.185-14 23.246 93.169c95.802-18.129 167.848-10.816 198.169 75.823 24.436 69.76-1.218 109.998-51.623 136.238 36.707 8.46 64.354 32.604 71.731 82.477h0.008c10.193 68.127-41.688 104.753-112.623 129.185l23.015 92.285-56.185 14-22.4-89.854c-14.77 3.681-29.942 7.153-45.015 10.592l22.562 90.446zM503.217 610.792c31.717-7.903 133.851-22.654 117.354-88.846-15.841-63.455-113.608-31.218-145.323-23.315zM461.133 442.030c38.082-9.503 160.207-28.326 142.062-101.077-17.363-69.76-134.831-32.048-172.915-22.592z" />
 <glyph unicode="&#xe902;" glyph-name="btc-b" d="M483.775 884.721l-30.357-121.602c-16.115 3.671-31.927 7.297-47.28 11.113l0.080 0.375-102.134 25.501-19.701-79.087c0 0 54.949-12.585 53.79-13.364 29.994-7.486 35.413-27.34 34.504-43.072l-34.545-138.575c2.068-0.528 4.743-1.293 7.696-2.474-2.468 0.612-5.106 1.294-7.828 1.947l-48.426-194.139c-3.671-9.111-12.972-22.768-33.937-17.582 0.737-1.075-53.83 13.435-53.83 13.435l-36.766-84.765 96.375-24.020c17.928-4.493 35.502-9.19 52.796-13.617l-30.651-123.042 73.967-18.454 30.357 121.734c-0.177-0.76 19.6-6.030 39.461-11.089l19.551-4.222-30.246-121.166 74.058-18.454 30.641 122.808c126.278-23.896 221.244-14.257 261.211 99.944 32.209 91.952-1.605 144.991-68.046 179.579 48.384 11.152 84.827 42.977 94.55 108.715h0.010c13.435 89.8-54.951 138.078-148.451 170.281l30.337 121.642-74.058 18.454-29.526-118.438c-19.468 4.852-39.468 9.428-59.336 13.962l29.739 119.219zM508.089 659.585c41.807-10.417 176.433-29.86 154.687-117.11-20.88-83.641-149.749-41.15-191.554-30.733zM452.616 437.137c50.197-12.526 211.172-37.337 187.255-133.232-22.886-91.952-177.724-42.243-227.924-29.779z" />
+<glyph unicode="&#xe903;" glyph-name="zap" d="M553.833 917.333c-12.819-0.265-24.214-6.142-31.863-15.267l-0.054-0.066-426.667-512c-6.159-7.346-9.9-16.901-9.9-27.329 0-23.559 19.093-42.659 42.649-42.671h335.668l-36.667-293.333c-0.211-1.593-0.331-3.435-0.331-5.305 0-23.567 19.104-42.671 42.671-42.671 13.123 0 24.862 5.924 32.69 15.243l0.054 0.066 426.667 512c6.159 7.346 9.9 16.901 9.9 27.329 0 23.559-19.093 42.659-42.649 42.671h-335.668l36.667 293.333c0.213 1.603 0.335 3.456 0.335 5.337 0 23.567-19.104 42.671-42.671 42.671-0.292 0-0.584-0.003-0.874-0.009l0.044 0.001zM494.25 735.583l-24.583-196.917c-0.213-1.6-0.334-3.45-0.334-5.329 0-23.565 19.102-42.669 42.667-42.671h292.917l-275.167-330.25 24.583 196.917c0.213 1.6 0.334 3.45 0.334 5.329 0 23.565-19.102 42.669-42.667 42.671h-292.917z" />
 </font></defs></svg>

assets/style/_config.scss

@@ -1,23 +0,0 @@
-
-// Font Stack
-$p-font: 'Titillium Web', sans-serif;
-
-// Primary Colors
-$b-color: #000000; // background
-$s-color: #f7931a; // secondary
-$t-color: #242424; // ternary
-
-$w-color: #ffffff; // white
-$bl-color: #000000; // black
-$e-color: #d30012; // error
-$p-color: #666666; // past
-
-$sh-color: #0D0801; // secondary hover
-$link: #308fe7; // link
-$i-color: #494949; // input
-
-// Font Colors
-$f-color: #ffffff; // primary
-$fs-color: #ffffff; // secondary
-$fh-color: #f7931a; // hover
-$btc: #f7931a; // btc

assets/style/components/footer.css

@@ -1,8 +1,8 @@
 .footer {
-  background: $b-color;
+  background: var(--b-color);
-  padding: 1rem 0 2rem 0;
+  padding: 1rem 0 0 0;
-  margin: 2rem 0 0 0;
+  margin: 0;
-  border-top: .1rem solid $t-color;
+  border-top: .1rem solid var(--t-color);
 
   .top {
     display: grid;
@@ -29,19 +29,18 @@
       }
 
       a {
-        color: $link;
+        color: var(--link);
         &:hover { text-decoration: underline }
       }
 
       .btn a {
         display: inline-block;
-        color: $s-color;
+        background: var(--b-color);
-        background: $b-color;
         font-weight: 600;
-        border: .1rem solid $s-color;
         padding: .15rem 2rem .25rem 1.55rem;
         margin: .25rem 0;
 
+        .icon-zap,
         .icon-btc-b {
           position: relative;
           top: .15rem;
@@ -50,22 +49,32 @@
 
         &:hover {
           text-decoration: none;
-          background: $sh-color;
+          background: var(--sh-color);
         }
       }
+
+      .zap a {
+        color: var(--zap);
+        border: .1rem solid var(--zap);
+      }
+
+      .btc a {
+        color: var(--btc);
+        border: .1rem solid var(--btc);
+      }
     }
   }
 
   hr {
     height: 1px;
     border: none;
-    color: $t-color;
+    color: var(--t-color);
-    background-color: $t-color;
+    background-color: var(--t-color);
     margin: 0;
   }
 
   .bottom {
-    background: $b-color;
+    background: var(--b-color);
     
     .center {
       height: 5.5rem;
@@ -75,11 +84,11 @@
 
       .who {
         float: left;
-        color: $f-color;
+        color: var(--f-color);
         font-size: .895rem;
     
         a {
-          color: $link;
+          color: var(--link);
           margin: 0 2px;
     
           &:hover { text-decoration: underline }
@@ -105,14 +114,14 @@
         }
     
         a {
-          color: $link;
+          color: var(--link);
           margin: 0 .5rem;
     
           &:hover { text-decoration: underline }
         }
     
         p {
-          color: $f-color;
+          color: var(--f-color);
           margin: 0 0 0 .5rem;
         }
     

assets/style/components/header.css

@@ -10,11 +10,11 @@ header {
     grid-row: 1/3;
     display: inline-block;
     height: 6.25rem;
-    //border: .2rem solid $w-color;
+    //border: .2rem solid var(--w-color);
     //padding: .5rem 1rem .5rem .5rem;
 
     h1 {
-      color: $w-color;
+      color: var(--w-color);
       font-size: 1.2rem;
       line-height: 1.2rem;
     }
@@ -25,7 +25,7 @@ header {
       
       img {
         max-width: 6.5rem;
-        background: $b-color;
+        background: var(--b-color);
       }
     }
   }
@@ -40,11 +40,11 @@ header {
       margin: 0 .5rem;
       
       h2 {
-        color: $f-color;
+        color: var(--f-color);
         font-size: 1rem;
   
         &:hover {
-          color: $fh-color;
+          color: var(--fh-color);
           text-decoration: underline;
         }
       }

assets/style/config.css

@@ -0,0 +1,27 @@
+:root {
+  /* Font Stack */
+  --p-font: 'Titillium Web', sans-serif;
+
+  /* Primary Colors */
+  --b-color: #000000; /* background */
+  --s-color: #f7931a; /* secondary */
+  --t-color: #242424; /* ternary */
+  
+  --w-color: #ffffff; /* white */
+  --bl-color: #000000; /* black */
+  --e-color: #d30012; /* error */
+  --p-color: #666666; /* past */
+
+  --zap: #9623c4; /* lightning */
+  --btc: #f7931a; /* bitcoin */
+  
+  --sh-color: #0D0801; /* secondary hover */
+  --link: #308fe7; /* link */
+  --i-color: #494949; /* input */
+  
+  /* Font Colors */
+  --f-color: #ffffff; /* primary */
+  --fs-color: #ffffff; /* secondary */
+  --fh-color: #f7931a; /* hover */
+
+}

assets/style/fonts.css

@@ -40,12 +40,12 @@
 
 @font-face {
   font-family: 'crbtc';
-  src:  url('/assets/fonts/crbtc/crbtc.eot?ipcjib');
+  src:  url('/assets/fonts/crbtc/crbtc.eot?cdwm7w');
-  src:  url('/assets/fonts/crbtc/crbtc.eot?ipcjib#iefix') format('embedded-opentype'),
+  src:  url('/assets/fonts/crbtc/crbtc.eot?cdwm7w#iefix') format('embedded-opentype'),
-    url('/assets/fonts/crbtc/crbtc.woff2?ipcjib') format('woff2'),
+    url('/assets/fonts/crbtc/crbtc.woff2?cdwm7w') format('woff2'),
-    url('/assets/fonts/crbtc/crbtc.ttf?ipcjib') format('truetype'),
+    url('/assets/fonts/crbtc/crbtc.ttf?cdwm7w') format('truetype'),
-    url('/assets/fonts/crbtc/crbtc.woff?ipcjib') format('woff'),
+    url('/assets/fonts/crbtc/crbtc.woff?cdwm7w') format('woff'),
-    url('/assets/fonts/crbtc/crbtc.svg?ipcjib#crbtc') format('svg');
+    url('/assets/fonts/crbtc/crbtc.svg?cdwm7w#crbtc') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -54,6 +54,7 @@
 [class^="icon-"], [class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'crbtc' !important;
+  speak: never;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -65,6 +66,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zap:before {
+  content: "\e903";
+}
 .icon-btc .path1:before {
   content: "\e900";
   color: rgb(245, 148, 40);

assets/style/main.css

@@ -2,15 +2,17 @@
 @import 'config';
 
 body {
-  background: $b-color;
+  background: var(--b-color);
+  margin: 0;
+  /*
   background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .075) 25%, rgba(255, 255, 255, .075) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .075) 75%, rgba(255, 255, 255, .075) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .075) 25%, rgba(255, 255, 255, .075) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .075) 75%, rgba(255, 255, 255, .075) 76%, transparent 77%, transparent);
   background-size: 4.5rem 4.5rem;
-  margin: 0;
+  */
 }
 
 main {
   max-width: 60rem;
-  min-height: calc(100vh - 24.5625rem);
+  min-height: calc(100vh - 23rem);
   margin: 0 auto;
   padding: 0 4rem;
 }
@@ -42,23 +44,13 @@ p,
 a,
 b,
 label {
-  color: $f-color;
+  color: var(--f-color);
-  font-family: $p-font;
+  font-family: var(--p-font);
   margin: 0;
   padding: 0;
 }
 
 a {
-  color: $link;
+  color: var(--link);
   text-decoration: none;
-}
+}
-
-@import 'components/header';
-@import 'components/footer';
-@import 'pages/index';
-@import 'pages/pages';
-@import 'pages/event';
-@import 'pages/suggest';
-@import 'pages/guide';
-@import 'pages/auth';
-@import 'pages/404';

assets/style/pages/404.css

@@ -5,7 +5,7 @@
   text-align: center;
 
   h3 {
-    color: $fs-color;
+    color: var(--fs-color);
     font-size: 8rem;
     font-weight: 700;
     line-height: 8.5rem;
@@ -13,7 +13,7 @@
   }
 
   h4 {
-    color: $fs-color;
+    color: var(--fs-color);
     font-size: 1.5rem;
     font-weight: 700;
     padding: .25rem 0;
@@ -21,7 +21,7 @@
 
   a {
     display: inline-block;
-    color: $link;
+    color: var(--link);
 
     &:hover { text-decoration: underline }
   }

assets/style/pages/auth.css

@@ -25,7 +25,7 @@
     margin: .5rem 0;
 
     a {
-      color: $link;
+      color: var(--link);
       &:hover { text-decoration: underline }
     }
   }
@@ -36,9 +36,9 @@
     button,
     .input input {
       width: 100%;
-      color: $w-color;
+      color: var(--w-color);
-      background: $b-color;
+      background: var(--b-color);
-      font-family: $p-font;
+      font-family: var(--p-font);
       box-shadow: none;
     }
 
@@ -56,13 +56,13 @@
         font-weight: 400;
         padding: .5rem 1rem;
         margin: .25rem 0;
-        border: 1px solid $i-color;
+        border: 1px solid var(--i-color);
       }
     }
 
     span {
-      color: $e-color;
+      color: var(--e-color);
-      font-family: $p-font;
+      font-family: var(--p-font);
       font-size: .75rem;
     }
 
@@ -70,12 +70,12 @@
       font-size: .9rem;
       font-weight: 500;
       padding: .5rem 1rem .6rem 1rem;
-      border: 1px solid $s-color;
+      border: 1px solid var(--s-color);
       text-align: center;
 
       &:hover {
         cursor: pointer;
-        background: $sh-color;
+        background: var(--sh-color);
       }
     }
   }

assets/style/pages/event.css

@@ -22,7 +22,7 @@
     padding: 1rem 0;
 
     h2 a {
-      color: $f-color;
+      color: var(f-color);
     }
 
     
@@ -30,7 +30,7 @@
       padding: 1rem 0;
 
       a {
-        color: $f-color;
+        color: var(f-color);
         font-size: 1.25rem;
         font-weight: 600;
         &:hover { cursor: text }

assets/style/pages/guide.css

@@ -26,7 +26,7 @@
   .content {
 
     h2 a {
-      color: $f-color;
+      color: var(--f-color);
     }
 
     
@@ -34,7 +34,7 @@
       padding: 1rem 0;
 
       a {
-        color: $f-color;
+        color: var(--f-color);
         font-size: 1.25rem;
         font-weight: 600;
         &:hover { cursor: text }
@@ -75,7 +75,7 @@
     .content {
 
       h2 a {
-        color: $f-color;
+        color: var(--f-color);
       }
       
       h4 a {

assets/style/pages/index.css

@@ -1,14 +1,13 @@
 .index {
-  @import 'index/hero';
-
   .banner,
   .guides,
   .events,
   .sponsors {
+
     h4 {
       position: relative;
       width: fit-content;
-      color: $f-color;
+      color: var(--f-color);
       font-size: 2rem;
       margin: 1.5rem 0;
 
@@ -18,11 +17,15 @@
         top: 1.95rem;
         right: -.6rem;
         height: .2rem;
-        border: .2rem solid $btc;
+        border: .2rem solid var(--btc);
       }
     }
   }
 
+  .banner h4 {
+    margin: 0;
+  }
+
   @media only screen and (max-width: 600px) { 
     .banner,
     .guides,
@@ -36,14 +39,9 @@
           top: 1.5rem;
           right: -.5rem;
           height: .15rem;
-          border: .15rem solid $btc;
+          border: .15rem solid var(--btc);
         }
       }
     }
   }
-
-  @import 'index/guides';
-  @import 'index/events';
-  @import 'index/sponsors';
-  @import 'index/banner';
 }

assets/style/pages/index/banner.css

@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: 1fr 2fr;
   max-width: 60rem;
-  background: $t-color;
+  background: var(--t-color);
   padding: 2rem 2rem 2.25rem 2rem;  
   margin: 2rem auto 7rem auto;
 
@@ -11,11 +11,11 @@
   }
 
   h6 {
-    color: $f-color;
+    color: var(--f-color);
     font-size: 1.1rem;
     font-weight: 400;
     line-height: 1.65rem;
-    padding: .5rem 4rem 0 0;
+    padding: .25rem 4rem 0 0;
   }
 }
 
@@ -42,5 +42,6 @@
 @media only screen and (max-width: 600px) {
   .banner h6 {
     padding: .5rem 0;
+    text-align: center;
   }
 }

assets/style/pages/index/events.css

@@ -12,10 +12,10 @@
     grid-template-columns: 3fr 2fr;
     grid-template-rows: 1fr .7fr .6fr;
     grid-column: 2;
-    background: $b-color;
+    background: var(--b-color);
     padding: 1rem 2rem;
     margin: 1rem 0 0 0;
-    border: .15rem solid $w-color;
+    border: .15rem solid var(--w-color);
       
     .hide {
       display: none;
@@ -51,7 +51,7 @@
 
       h5 {
         width: 100%;
-        color: $f-color;
+        color: var(--f-color);
         font-size: 1.2rem;
         line-height: 1.8rem;
         text-overflow: ellipsis;
@@ -59,13 +59,13 @@
         white-space: nowrap;
 
         &:hover {
-          color: $fh-color;
+          color: var(--fh-color);
           text-decoration: underline;
         }
       }
 
       p {
-        color: $f-color;
+        color: var(--f-color);
         font-size: 1rem;
         line-height: 1.4rem;
       }

assets/style/pages/index/guides.css

@@ -11,8 +11,8 @@
 
   .guide {
     display: inline-block;
-    background: $b-color;
+    background: var(--b-color);
-    border: .15rem solid $w-color;
+    border: .15rem solid var(--w-color);
     padding: 0;
 
     a {
@@ -20,7 +20,7 @@
       padding: 1rem 2rem 1rem 1.5rem;
       
       h5 {
-        color: $f-color;
+        color: var(--f-color);
         font-size: 1.6rem;
         line-height: 1.8rem;
       }

assets/style/pages/index/hero.css

@@ -1,15 +1,15 @@
-.hero {
+.index .hero {
   padding: calc(50vh - 280px) 0 14vh 0;
 
   h3 {
-    color: $f-color;
+    color: var(--f-color);
     font-size: 4rem;
     line-height: 4rem;
     text-align: center;
 
     span {
       position: relative;
-      color: $btc;
+      color: var(--btc);
 
       &:after {
         content: "";
@@ -18,20 +18,20 @@
         left: 0;
         width: 100%;
         height: .2rem;
-        border: .2rem solid $btc;
+        border: .2rem solid var(--btc);
       }
     }
   }
 }
 
 @media only screen and (max-width: 1440px) {
-  .hero {
+  .index .hero {
     padding: calc(50vh - 240px) 0 10vh 0;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .hero {
+  .index .hero {
     padding: 18vh 0;
 
     h3 {

assets/style/pages/pages.css

@@ -8,7 +8,7 @@
   h3,
   h4 {
     a {
-      color: $f-color;
+      color: var(--f-color);
 
       &:hover { 
         cursor: text;
@@ -39,8 +39,8 @@
     padding: 0 0 0 1.5rem;
 
     li {
-      color: $f-color;
+      color: var(--f-color);
-      font-family: $p-font;
+      font-family: var(--p-font);
       font-size: 1.05rem;
       padding: .5rem 0;
     }
@@ -67,7 +67,7 @@
     }
 
     h2 a {
-      color: $f-color;
+      color: var(--f-color);
     }
     
     h4 a {

assets/style/pages/suggest/form.css

@@ -1,12 +1,12 @@
-form {
+.suggest form {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   padding: 1rem 0;
 
   label {
     display: block;
-    color: $fs-color;
+    color: var(--fs-color);
-    font-family: $p-font;
+    font-family: var(--p-font);
     font-size: .85rem;
     font-weight: 300;
     margin: 1rem .75rem .25rem .25rem;
@@ -24,9 +24,9 @@ form {
   textarea,
   input {
     width: 100%;
-    color: $w-color;
+    color: var(--w-color);
-    background: $b-color;
+    background: var(--b-color);
-    font-family: $p-font;
+    font-family: var(--p-font);
     box-shadow: none;
   }
 
@@ -36,15 +36,15 @@ form {
     font-weight: 400;
     padding: .5rem 1rem;
     margin: .25rem 0;
-    border: 1px solid $i-color;
+    border: 1px solid var(--i-color);
 
     &:focus {
-      border-color: $s-color;
+      border-color: var(--s-color);
-      outline: .1rem solid $s-color;
+      outline: .1rem solid var(--s-color);
     }
 
     &::placeholder {
-      font-family: $p-font;
+      font-family: var(--p-font);
       font-size: 1rem;
       opacity: .4;
     }
@@ -52,7 +52,7 @@ form {
 
   textarea {
     min-height: 10rem;
-    font-family: $p-font;
+    font-family: var(--p-font);
     padding: .75rem;
     resize: vertical;
   }
@@ -67,18 +67,18 @@ form {
     font-weight: 500;
     padding: .5rem 1rem .6rem 1rem;
     margin: 1.5rem 0 0 0;
-    border: 1px solid $s-color;
+    border: 1px solid var(--s-color);
     text-align: center;
 
     &:hover {
       cursor: pointer;
-      background: $sh-color;
+      background: var(--sh-color);
     }
   }
 }
 
 @media only screen and (max-width: 600px) {
-  form {
+  .suggest form {
     display: block;
   }
 }

assets/style/pages/suggest/poll.css

@@ -58,15 +58,15 @@ form .poll {
     visibility: hidden;
 
     &:checked ~ .check {
-      border: .15rem solid $s-color;
+      border: .15rem solid var(--s-color);
     }
     
     &:checked ~ .check::before{
-      background: $s-color;
+      background: var(--s-color);
     }
     
     &:checked ~ label{
-      color: $s-color;
+      color: var(--s-color);
     }
   }
 }

assets/style/style.css

@@ -0,0 +1,29 @@
+@import 'fonts';
+@import 'config';
+
+/* Base style */
+@import 'main';
+
+/* Pages */
+@import 'pages/404';
+@import 'pages/pages';
+@import 'pages/auth';
+@import 'pages/event';
+@import 'pages/guide';
+@import 'pages/suggest';
+
+/* Index */
+@import 'pages/index';
+@import 'pages/index/hero';
+@import 'pages/index/banner';
+@import 'pages/index/guides';
+@import 'pages/index/events';
+@import 'pages/index/sponsors';
+
+/* Suggest */
+@import 'pages/suggest/form';
+@import 'pages/suggest/poll';
+
+/* Components */
+@import 'components/header';
+@import 'components/footer';

components/Footer.vue

@@ -22,7 +22,8 @@
       </ul>
       <ul class="donate">
         <li><h5>Support us</h5></li>
-        <li class="btn" ><NuxtLink to="https://btcpay0.voltageapp.io/apps/2hjkatjQgn5LUU2bkHZxQmq8uR1y/crowdfund" target="_BLANK"><span class="icon-btc-b"></span> Donate</NuxtLink></li>
+        <li class="btn zap" ><NuxtLink to="https://coinos.io/crbtc/receive" target="_BLANK"><span class="icon-zap"></span> Donate</NuxtLink></li>
+        <li class="btn btc" ><NuxtLink to="https://btcpay0.voltageapp.io/apps/2hjkatjQgn5LUU2bkHZxQmq8uR1y/crowdfund" target="_BLANK"><span class="icon-btc-b"></span> Donate</NuxtLink></li>
       </ul>
     </div>
   </div>

content/about.md

@@ -5,8 +5,7 @@ slug: about
 
 #### About
 
-Welcome to the Capital Region Bitcoin Network. The meetup was created due to a lack of crypto communities in upstate New York 
+Welcome to the Capital Region Bitcoin Network. Our meetup was created to support local adoption of Bitcoin and the Handshake naming system.
-and for supporting local adoption of Bitcoin.
 
 The first meetup was held on Thursday, May 11th 2023. Meetups allow for open discussion 
 about Bitcoin news and common questions surrounding the currency.

content/event/handshake-workshop-12-4-2024.md

@@ -0,0 +1,19 @@
+---
+title: Handshake Workshop
+slug: handshake-workshop-12-4-2024
+date: 2024-12-04
+published: 2024-11-12
+location: Mocha Lisa's Caffe
+address: 22 Clifton Country Road, Clifton Park
+time: 6:00 PM
+meetup: 
+priority: 1
+---
+
+## Details
+
+Join us as Mocha Lisa's Caffe on Wednesday, December 4th for an introduction to the Handshake naming system. Handshake is a decentralized, permissionless naming protocol that is disrupting the domain name industry.
+
+We will also be discussing recent Bitcoin news and laying the ground work for our next workshop on setting up and running your own Lightning node at home.
+
+Looking forward to seeing everyone!

nuxt.config.ts

@@ -21,9 +21,19 @@ export default defineNuxtConfig({
         },
       },
     ],
-    "@nuxt/image",
   ],
 
-  css: ["~/assets/style/main.scss"],
+  css: [
+    "~/assets/style/style.css",
+  ],
+
+  postcss: {
+    plugins: {
+      'postcss-import': {},
+      'postcss-nested': {},
+      'postcss-hexrgba': {},
+    }
+  },
+  
   compatibilityDate: "2024-08-20",
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crbtc",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Capital Region Bitcoin Network",
   "license": "GPL-3.0-only",
   "homepage": "https://crbtc.org",
@@ -14,14 +14,15 @@
   "devDependencies": {
     "@nuxt/content": "^2.13.4",
     "@nuxt/devtools": "latest",
-    "@nuxt/image": "^1.8.1",
     "@nuxtjs/device": "^3.2.4",
-    "@types/node": "^22.7.7",
+    "@types/node": "^22.9.0",
-    "nuxt": "^3.13.2"
+    "nuxt": "^3.14.159"
   },
   "dependencies": {
     "date-fns": "^4.1.0",
     "nuxt-mail": "^5.1.1",
-    "sass": "^1.80.3"
+    "postcss-hexrgba": "^2.1.0",
+    "postcss-import": "^16.1.0",
+    "postcss-nested": "^7.0.2"
   }
 }