Sebin/task/issue 95 and 96 (#100)

* make sure the text isn't covered by the images

* add close button to the fundraiser banner

* make all the link tag styles consistent across the website

* revert the uncompleted work for banner issue

* fix the wierd duplicated banner issue

* remove @nanostores/persistent pkg

* fix the issue where page top-padding is too large event when fundraiser is hidden

package.json

@@ -20,7 +20,7 @@
     "@remark-embedder/core": "3.0.1",
     "@remark-embedder/transformer-oembed": "3.0.0",
     "gsap": "^3.11.4",
-    "nanostores": "^0.7.1",
+    "nanostores": "^0.10.0",
     "rehype-katex": "^6.0.2",
     "remark-breaks": "3.0.2",
     "remark-gfm": "3.0.1",

src/components/Fundraiser.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="fundraiser" v-if="$isFundraiserOpen" @click="isFundraiserOpen.set(false)">
+<div class="fundraiser" v-if="$isFundraiserOpen">
   <div class="wrapper">
     <b>Help us reach our goal! 🙏</b>
     <div class="progress-wrapper">
@@ -11,12 +11,16 @@
       </div>
     </div>
     <a :href="resolvePath('/donate')" class="button">Donate now</a>
+    <i class="icon-times icon-button c-close-btn has-shallow-box-shadow"
+      tabindex="0"
+      @click="closeFundraiser"
+    ></i>
   </div>
 </div>
 </template>
 
 <script setup>
-import { isFundraiserOpen } from '../store.js';
+import { isFundraiserOpen, closeFundraiser } from '../store.ts';
 import { useStore } from '@nanostores/vue';
 import { resolvePath } from '@/utils/helpers.js'
 
@@ -59,6 +63,7 @@ b {
 }
 
 .wrapper {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -77,6 +82,16 @@ b {
   }
 }
 
+.c-close-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 2rem;
+  transform: translate(35%, -35%);
+}
+
 progress {
   opacity: 0;
 }

src/components/GetStarted.vue

@@ -76,5 +76,10 @@
     background: #A1D10E;
     box-shadow: 0 0 0 0.4rem  rgba(#A1D10E, 0.4);
   }
+
+  .is-link.is-display-block {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 </style>

src/components/Hamburger.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { isNavigationOpen, toggleNavigation } from '../store.js';
+import { isNavigationOpen, toggleNavigation } from '../store.ts';
 import { useStore } from '@nanostores/vue';
 
 const $isNavigationOpen = useStore(isNavigationOpen);

src/components/HomeAnimation.vue

@@ -24,7 +24,7 @@
           </h1>
           <p class="is-subtitle c-main-para">Group income makes it easy for small communities to
             voluntarily provide a financial safety net for their members.</p>
-          <i class="icon-chevron-bottom" @click="scrollTo('#container2')"></i>
+          <i class="icon-button icon-chevron-bottom" @click="scrollTo('#container2')"></i>
         </div>
       </section>
 
@@ -330,7 +330,7 @@ export default {
 
 #face-1 {
   top: 76vh;
-  left: 17%;
+  left: 22%;
 
   @include tablet {
     top: 70vh;
@@ -380,8 +380,8 @@ export default {
 }
 
 #face-4 {
-  top: 74vh;
-  left: 63%;
+  top: 73vh;
+  left: 52%;
 
   @include tablet {
     top: 65vh;
@@ -415,8 +415,8 @@ export default {
 }
 
 #face-6 {
-  top: 59vh;
-  left: 80%;
+  top: 69vh;
+  left: 75%;
 
   @include tablet {
     top: 47vh;
@@ -450,11 +450,11 @@ export default {
 }
 
 #face-8 {
-  top: 8vh;
+  top: 10vh;
   left: 75%;
 
   @include tablet {
-    top: 6vh;
+    top: 12vh;
     left: 87%;
   }
 
@@ -464,7 +464,7 @@ export default {
   }
 
   @include desktop {
-    top: 21vh;
+    top: 24vh;
     left: 92%;
     transform: scale(1.2);
   }
@@ -489,21 +489,13 @@ export default {
 }
 
 .icon-chevron-bottom {
+  display: flex;
   height: 2.5rem;
   width: 2.5rem;
-  display: flex;
-  background-color: #EFF2F5;
   border-radius: 4rem;
   margin-left: calc(50% - 1.25rem);
-  justify-content: center;
-  align-items: center;
   margin-top: 3rem;
   margin-bottom: -3rem;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #D0DEEA;
-  }
 
   @include phone {
     display: none;
@@ -588,6 +580,16 @@ export default {
   &-link {
     margin-top: 1.6rem;
     display: block;
+    width: max-content;
+
+    @include until($desktop) {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    + .is-link {
+      width: max-content;
+    }
   }
 }
 
@@ -615,6 +617,7 @@ export default {
 .c-main-wrapper {
   margin-top: -1.6rem;
   position: relative;
+  z-index: 2;
 }
 
 .c-main-title {

src/components/Navigation.vue

@@ -27,7 +27,7 @@
 
 <script setup>
 import { onMounted, ref } from 'vue'
-import { isNavigationOpen, closeNavigation } from '../store.js';
+import { isNavigationOpen, closeNavigation } from '../store.ts';
 import { useStore } from '@nanostores/vue';
 import { resolvePath } from '@/utils/helpers.js'
 const $isNavigationOpen = useStore(isNavigationOpen);

src/components/pageWrapper.vue

@@ -1,28 +1,34 @@
 <template>
-  <div :class="['main-wrapper', { 'open-nav': $isNavigationOpen }]">
+  <div :class="['main-wrapper', { 'open-nav': $isNavigationOpen, 'is-with-fundraiser': $isFundraiserOpen }]">
     <slot></slot>
   </div>
 </template>
 
 <script setup>
-import { isNavigationOpen } from '../store.js';
+import { isNavigationOpen, isFundraiserOpen } from '../store.ts';
 import { useStore } from '@nanostores/vue';
 
 const $isNavigationOpen = useStore(isNavigationOpen);
+const $isFundraiserOpen = useStore(isFundraiserOpen);
 </script>
 
 <style lang="scss" scoped>
 @import "../styles/_variables";
-$bannerHeight: 2.75rem;
 
 .main-wrapper {
-	padding-top: calc($headerHeightMobile + 14rem);
-	@include tablet {
-		padding-top: calc($headerHeightTablet + 10rem);
-	}
-	@include desktop {
-		padding-top: calc($headerHeight + 8rem);
-	}
+  --fundraiser-space: 0rem;
+	padding-top: calc(#{$headerHeightMobile} + var(--fundraiser-space));
+
+  &.is-with-fundraiser {
+    --fundraiser-space: 14rem;
+
+    @include tablet {
+      --fundraiser-space: 10rem;
+    }
+    @include desktop {
+      --fundraiser-space: 8rem;
+    }
+  }
 
   &.open-nav {
     overflow: hidden;

src/layouts/DefaultLayout.astro

@@ -13,9 +13,9 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 	</head>
 	<body>
-		<PageWrapper>
+		<PageWrapper client:only="vue">
 			<AppStyles/>
-			<Header client:load :randomStr="currentPath" />
+			<Header client:only="vue"  />
 			<main>
 				<slot />
 			</main>

src/pages/about-us.astro

@@ -94,7 +94,7 @@ import { resolvePath } from '@/utils/helpers.js'
       </div>
       <hr class="spacer"/>
       <p class="c-container-para-link">Do you like our project and want to join our team?<br/>
-        <a class="c-container-link" href="/hiring" data-test="hiringLink">See open positions</a>
+        <a class="c-container-link is-link" href="/hiring" data-test="hiringLink">See open positions</a>
       </p>
     </section>
     <section class="container grey-container">
@@ -117,7 +117,7 @@ import { resolvePath } from '@/utils/helpers.js'
       <div class="span-2">
         <h2 class="is-title-2">okTurtles Foundation</h2>
         <p class="c-container-para">okTurtles Foundation is a 501(c)(3) non-profit. Our research, education, and development efforts go to supporting beneficial decentralization technologies. Our work has been covered in TechCrunch, VICE, Engadget, and elsewhere on the web.<br/>
-          <a class="c-container-link" href={resolvePath("/donate")} data-test="donateLink">Donate to Group Income</a>
+          <a class="c-container-link is-link" href={resolvePath("/donate")} data-test="donateLink">Donate to Group Income</a>
         </p>
       </div>
     </section>
@@ -233,13 +233,8 @@ import { resolvePath } from '@/utils/helpers.js'
   &-link {
     display: inline-block;
     margin-top: 1.6rem;
-    color: #0AA5DE;
+    font-size: inherit;
     font-weight: bold;
-
-    &:hover {
-      border-bottom: 2px solid #0AA5DE;
-      margin-bottom: -2px;
-    }
   }
 }
 
@@ -402,10 +397,6 @@ import { resolvePath } from '@/utils/helpers.js'
 .c-container-para-link {
   margin: 2rem auto 0rem auto;
   font-size: 1.5rem;
-
-  a {
-    color: #0AA5DE;
-  }
 }
 
 .c-container-delimitation {

src/pages/get-started.astro

@@ -127,10 +127,5 @@ import Servers from '../components/Servers.vue';
   margin: 0.5rem auto 6rem auto;
   width: max-content;
   font-size: 1.125rem;
-
-  &:hover {
-    color: #fff;
-    border-bottom-color: #fff;
-  }
 }
 </style>

src/store.ts

@@ -0,0 +1,23 @@
+import { atom, StoreValue } from 'nanostores'
+
+export const isNavigationOpen = atom<boolean>(false)
+export const isFundraiserOpen = atom<boolean>(true)
+
+// manipulate navigation menu
+export const openNavigation = (): StoreValue<typeof isNavigationOpen> => {
+  isNavigationOpen.set(true)
+  return isNavigationOpen.get()
+}
+export const closeNavigation = (): StoreValue<typeof isNavigationOpen> => {
+  isNavigationOpen.set(false)
+  return isNavigationOpen.get()
+}
+export const toggleNavigation = (): StoreValue<typeof isNavigationOpen> => {
+  isNavigationOpen.set(!isNavigationOpen.get())
+  return isNavigationOpen.get()
+}
+
+export const closeFundraiser = (): StoreValue<typeof isFundraiserOpen> => {
+  isFundraiserOpen.set(false)
+  return isFundraiserOpen.get()
+}