refactor: PageHome, add logo SVG, modify global SCSS classes

.stylelintrc.json

@@ -7,5 +7,8 @@
   ],
   "rules": {
     "scss/comment-no-empty": null
-  }
+  },
+  "ignoreFiles": [
+    "src/components/SVGLogo.vue"
+  ]
 }

src/App.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
+import { useElementBounding } from '@vueuse/core'
+import { ref } from 'vue'
 import TheContributing from '@/components/TheContributing.vue'
 import TheFooter from '@/components/layout/TheFooter.vue'
 import TheNavbar from '@/components/layout/TheNavbar.vue'
+
+const navbar = ref<HTMLElement | null>(null)
+const { height } = useElementBounding(navbar)
 </script>
 
 <template>
   <div class="relative">
-    <TheNavbar />
-    <RouterView />
+    <TheNavbar ref="navbar" />
+    <RouterView class="page" />
     <TheContributing />
     <TheFooter />
   </div>
@@ -28,40 +33,69 @@ body {
   text-size-adjust: none;
 }
 
+.page {
+  min-height: calc(100lvh - (v-bind(height) * 1px));
+  min-height: calc(100dvh - (v-bind(height) * 1px));
+}
+
+.container {
+  width: 100%;
+  margin: 0 auto;
+}
+
 .head-1 {
   font-size: rem(40px);
+
+  @include breakpoint(lg) {
+    font-size: rem(44px);
+  }
 }
 
 .head-2 {
-  font-size: rem(36px)
+  font-size: rem(36px);
+
+  @include breakpoint(lg) {
+    font-size: rem(40px);
+  }
 }
 
 .head-3 {
   font-size: rem(32px);
+
+  @include breakpoint(lg) {
+   font-size: rem(36px);
+  }
 }
 
 .head-4 {
   font-size: rem(28px);
   line-height: 0.9;
+
+  @include breakpoint(lg) {
+    font-size: rem(32px);
+  }
 }
 
 .head-5 {
-  font-size: rem(24px)
+  font-size: rem(24px);
+
+  @include breakpoint(lg) {
+    font-size: rem(28px)
+  }
 }
 
 .head-6 {
-  font-size: rem(20px)
+  font-size: rem(20px);
+
+  @include breakpoint(lg) {
+    font-size: rem(24px);
+  }
 }
 
 .poppins {
   font-family: Poppins, sans-serif;
 }
 
-.container {
-  width: 100%;
-  margin: 0 auto;
-}
-
 .logo-text {
   font-size: rem(32px);
   font-weight: 600;
@@ -70,7 +104,6 @@ body {
 }
 
 // Animations
-
 @keyframes scale {
   0% {
     transform: scale(1)

src/components/EventCard.vue

@@ -40,7 +40,7 @@ const props = defineProps<{
         <router-link
           :data-test="`event-${props.event}-read-more`"
           :to="{ name: 'EventView', params: { event } }"
-          class="read-more p-2 rounded mt-1 self-end relative hover:shadow"
+          class="read-more p-2 rounded mt-1 self-end relative"
         >
           {{ $t(`message.common.read-more`) }}
         </router-link>
@@ -51,17 +51,23 @@ const props = defineProps<{
 
 <style scoped lang="scss">
 .card {
+  transition: all 0.3s ease-in;
+
   @include breakpoint(lg)  {
     &:hover {
       transform: scale(1.05);
 
       .card-image {
-        transform: scale(1.2) rotate(-3deg);
+        transform: scale(1.05) rotate(-3deg);
       }
     }
   }
 }
 
+.card-image {
+  transition: transform 0.3s;
+}
+
 .description {
   @include breakpoint(md) {
     &::before {
@@ -79,19 +85,31 @@ const props = defineProps<{
 }
 
 .read-more {
-  background-color: $nord10;
+  border: 1px solid $bg-secondary;
+  background-color: $bg-primary;
+  transition: all 0.3s ease-in;
 
   @include breakpoint(lg) {
     background-color: transparent;
 
     &:hover {
-      animation: scale infinite alternate linear 0.8s;
-      background-color: $nord10;
+      background-color: $nord7;
+      color: $text-primary;
     }
   }
 }
 
 .#{$dark-mode-class} {
+  .read-more {
+    border-style: none;
+    background-color: $dark-bg-primary;
+
+    &:hover {
+      background: $nord7;
+      color: $text-primary;
+    }
+  }
+
   .card {
     background: $nord2;
 

src/components/SVGLogo.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 1440 1440">
+    <defs>
+      <linearGradient id="a" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(1137 0 0 -1137 -35 542.5)" gradientUnits="userSpaceOnUse" spreadMethod="pad">
+        <stop offset="0" style="stop-opacity:1;stop-color:#e00" />
+        <stop offset="1" style="stop-opacity:1;stop-color:#be1e2d" />
+      </linearGradient>
+      <clipPath id="b" clipPathUnits="userSpaceOnUse">
+        <path d="M0 1080h1080V0H0Z" />
+      </clipPath>
+    </defs>
+    <path d="M0 0h1080v1080H0Z" style="fill:url(#a);stroke:none;clip-path: circle(50%);" transform="matrix(1.33333 0 0 -1.33333 0 1440)" />
+    <g clip-path="url(#b)" transform="matrix(1.33333 0 0 -1.33333 0 1440)">
+      <path d="M0 0c.889 3.504 1.224 7.248.761 11.178l-22.772 193.281c-2.057 17.461-22.245 26.147-36.338 15.636l-80.589-60.113c-44.512 19.349-96.877 30.513-152.926 30.513-53.873 0-104.337-10.318-147.7-28.299l-85.816 64.011c-14.093 10.512-34.281 1.826-36.338-15.635L-584.49 17.291a30.49 30.49 0 0 1 1.289-13.081 149.364 149.364 0 0 1-1.509-21.193c0-114.587 131.111-207.478 292.846-207.478C-130.13-224.461.981-131.57.981-16.983.981-11.265.641-5.602 0 0" style="fill:#000;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(836.725 538.98)" />
+      <path d="M0 0c0-25.961-21.045-47.007-47.006-47.007-25.962 0-47.007 21.046-47.007 47.007s21.045 47.006 47.007 47.006C-21.045 47.006 0 25.961 0 0" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(442.202 565.793)" />
+      <path d="m0 0-29.391 29.39L-58.234.546l-16.951 16.95 28.844 28.844-29.393 29.394 18.865 18.864 29.394-29.394L1.369 94.052l16.95-16.95-28.843-28.849 29.389-29.389Z" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(707.526 518.493)" />
+    </g>
+  </svg>
+</template>

src/components/buttons/CtaComponent.vue

@@ -2,11 +2,75 @@
 import { useAttrs } from 'vue'
 import { useCtaComponent } from '@/functions/useCtaComponent'
 
+defineProps<{
+  secondary?: boolean
+}>()
+
 const { component, bindings } = useCtaComponent(useAttrs())
 </script>
 
 <template>
-  <component :is="component" v-bind="bindings">
+  <component
+    :is="component"
+    v-bind="bindings"
+    class="cta"
+    :class="{ 'secondary py-1 px-1.5 rounded-1': secondary }"
+  >
     <slot />
   </component>
 </template>
+
+<style scoped lang="scss">
+.cta {
+  border: 1px solid $bg-secondary;
+  background: $bg-primary;
+  color: $text-primary;
+  cursor: pointer;
+  font-size: rem(16px);
+  transition: all 0.2s ease-in;
+
+  @include breakpoint(md) {
+    &:hover {
+      background: $nord7;
+      color: $text-primary;
+    }
+  }
+}
+
+.secondary {
+  border: none;
+  background: none;
+  transition: background 0.3s ease-in-out;
+
+  @include breakpoint(md) {
+    &:hover {
+     background: $bg-secondary;
+    }
+  }
+}
+
+.#{$dark-mode-class} {
+  .cta {
+    border: none;
+    background: $dark-bg-secondary;
+    color: $text-secondary;
+
+    @include breakpoint(md) {
+      &:hover {
+        background: $nord7;
+        color: $text-primary;
+      }
+    }
+  }
+
+  .secondary {
+    background: none;
+
+    @include breakpoint(md) {
+      &:hover {
+        background: $dark-bg-secondary;
+      }
+    }
+  }
+}
+</style>

src/components/buttons/CtaIcon.vue

@@ -14,19 +14,36 @@ const { component, bindings } = useCtaComponent(useAttrs())
   <component
     :is="component"
     v-bind="bindings"
-    class="button mx-1 px-1 py-0.5 rounded-1"
+    class="cta mx-1 px-1 py-0.5 rounded-1"
     :class="{ small }"
   >
     <i :class="icon" />
   </component>
 </template>
 
 <style lang="scss" scoped>
-.button {
+.cta {
   font-size: rem(20px);
+  transition: background 0.3s ease-in-out;
+
+  @include breakpoint(md) {
+    &:hover {
+      background-color: $bg-secondary;
+    }
+  }
 
   &.small {
     font-size: rem(16px);
   }
 }
+
+.#{$dark-mode-class} {
+  .cta{
+    @include breakpoint(md) {
+      &:hover {
+        background-color: $dark-bg-secondary;
+      }
+    }
+  }
+}
 </style>