Color Standardization

assets/variables.scss

@@ -2,7 +2,18 @@
 //
 // The variables you want to modify
 // $font-size-root: 20px0;
-
+:root{
+  --project-card-glow-primary:#89ff00;
+  --project-card-glow-secondary:#00bcd4;
+  --project-card-content:#0946ca;
+  --project-card-background:#060c21;
+  --contact-link-bg-primary:rgba(255, 255, 255, 0.911);
+  --contact-link-bg-secondary:rgba(255, 255, 255, 0.911);
+  --contact-link-shadow-primary:rgba(116, 227, 235, 0.959);
+  --navbar-color:#56eefd;
+  --navbar-bg:#111;
+  --sdgcard-bg:#06508b;
+}
 @layer base {
   @font-face {
     font-family: 'Open Sans';
@@ -47,3 +58,4 @@ body {
 h1, h2, h3 {
   font-family: 'Libre Baskerville', Arial, Helvetica, sans-serif;
 }
+

components/Home/projectCard.vue

@@ -102,7 +102,7 @@ export default {
   left: 10vw;
 }
 .box {
-  background: #060c21;
+  background: var(--project-card-background);
 }
 .box::before {
   content: '';
@@ -128,7 +128,7 @@ export default {
 .box::before,
 .box::after {
   border-radius: 1.5rem;
-  background: linear-gradient(235deg, #89ff00, #010615, #00bcd4);
+  background: linear-gradient(235deg, var(--project-card-glow-primary), #010615, var(--project-card-glow-secondary));
 }
 
 .info h2 {
@@ -142,10 +142,10 @@ export default {
   margin: 0px 16px 0 0px;
 }
 .contentBtn {
-  box-shadow: 0 0 40px 40px #0946ca inset, 0 0 0 0 #0946ca;
+  box-shadow: 0 0 40px 40px var(--project-card-content) inset, 0 0 0 0 var(--project-card-content);
 }
 .contentBtn:hover {
-  box-shadow: 0 0 10px 0 #0946ca inset, 0 0 10px 4px #0946ca;
+  box-shadow: 0 0 10px 0 var(--project-card-content) inset, 0 0 10px 4px var(--project-card-content);
 }
 @media only screen and (max-width: 1000px) {
   .wrapper {

components/about-us/carousel/carousel-3d.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="carousel-3d-container my-10 mx-auto"
-    :style="{ height: slideHeight + 'px' }"
+    :style="{ height:  parseInt(slideHeight+150,10) + 'px' }"
   >
     <div
       class="carousel-3d-slider"
@@ -150,14 +150,12 @@ export default {
     slideWidth () {
       const vw = this.viewport
       const sw = parseInt(this.width) + parseInt(this.border, 10) * 2
-
       return vw < sw && process.browser ? vw : sw
     },
     slideHeight () {
       const sw = parseInt(this.width, 10) + parseInt(this.border, 10) * 2
       const sh = parseInt(parseInt(this.height) + this.border * 2, 10)
       const ar = this.calculateAspectRatio(sw, sh)
-
       return this.slideWidth / ar
     },
     visible () {
@@ -427,6 +425,7 @@ export default {
   z-index: 0;
   overflow: hidden;
   box-sizing: border-box;
+  /* background: red; */
 }
 
 .carousel-3d-slider {
@@ -436,5 +435,6 @@ export default {
   -webkit-perspective: 1000px;
   -moz-perspective: 1000px;
   perspective: 1000px;
+  /* background: red; */
 }
 </style>

components/about-us/carousel/carousel-slide.vue

@@ -183,6 +183,8 @@ export default {
   border-color: rgba(0, 0, 0, 0.4);
   border-style: solid;
   background-size: cover;
+  background: linear-gradient(90deg, hsla(180, 0%, 41%, 1) 0%, hsla(0, 0%, 0%, 1) 100%);
+;
 }
 
 .carousel-3d-slide img {

components/about-us/carousel/controls.vue

@@ -8,7 +8,11 @@
       aria-label="Previous slide"
       @click.prevent="parent.goPrev()"
     >
-      <span v-html="prevHtml"></span>
+
+      <span class="control-prev"
+      v-html="prevHtml"
+      >
+</span>
     </a>
     <a
       href="#"
@@ -18,7 +22,7 @@
       aria-label="Next slide"
       @click.prevent="parent.goNext()"
     >
-      <span v-html="nextHtml"></span>
+      <span class="control-next" v-html="nextHtml"></span>
     </a>
   </div>
 </template>
@@ -55,48 +59,53 @@ export default {
 <style scoped>
 .carousel-3d-controls {
   position: absolute;
-  top: 50%;
+  bottom: 20%;
   height: 0;
-  margin-top: -30px;
-  left: 0;
-  width: 100%;
+  left: 37.5%;
+  width: 20%;
   z-index: 1000;
+  min-width: 12rem;
+}
+@media(max-width: 963px) {
+  .carousel-3d-controls {
+    left: calc(47% - 6rem);
+  }
+}
+@media(max-width: 700px){
+  .carousel-3d-controls {
+     display: none;
+  }
 }
-
 .next,
 .prev {
   width: 60px;
   position: absolute;
   z-index: 1010;
   font-size: 60px;
-  height: 60px;
-  line-height: 60px;
-  color: #fff;
+  color: white;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   text-decoration: none;
   top: 0;
-  @media (max-width: 1470px) {
-    color: #333;
-  }
 }
 
 .next:hover,
 .prev:hover {
   cursor: pointer;
-  opacity: 0.7;
+  opacity: 0.8;
+  /* filter: brightness(2); */
 }
 
 .prev {
   left: 10px;
-  text-align: left;
+  text-align: center;
 }
 
 .next {
   right: 10px;
-  text-align: right;
+  text-align: center;
 }
 
 .disabled {
@@ -108,4 +117,23 @@ export default {
   cursor: default;
   opacity: 0.2;
 }
+.control-next{
+  background: rgb(0, 238, 255);
+  padding: 0.5rem 50px;
+  border-radius: 49% 51% 50% 50% / 0% 57% 43% 100%;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  margin-bottom: 2rem;
+  box-shadow: 0 0rem 3rem rgb(0, 238, 255);
+}
+.control-prev{
+  border-radius: 49% 51% 50% 50% / 50% 0% 100% 50% ;
+  background: rgb(0, 238, 255);
+  padding: 0.5rem 50px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  box-shadow: 0 0rem 3rem rgb(0, 238, 255);
+}
 </style>

components/navbar.vue

@@ -123,7 +123,7 @@ export default {
   transition-property: stroke, stroke-dasharray, stroke-dashoffset;
   transition-timing-function: ease;
   transition-duration: 400ms;
-  stroke: #fff;
+  stroke: white;
   stroke-width: 5.5;
   stroke-linecap: round;
 }
@@ -150,8 +150,8 @@ export default {
 }
 /* NAVBAR STYLING */
 .navbar {
-  background-color: #111;
-  border-left: 5px solid #56eefd;
+  background-color: var(--navbar-bg);
+  border-left: 5px solid var(--navbar-color);
   height: 100vh;
   left: 100vw;
 }
@@ -167,7 +167,7 @@ export default {
   width: 0;
   top: 2px;
   height: 100%;
-  border-bottom: 2px solid #56eefd;
+  border-bottom: 2px solid var(--navbar-color);
   transition: 0.3s;
 }
 .list_item:before {
@@ -178,7 +178,7 @@ export default {
   bottom: 0;
 }
 .list_item:hover {
-  color: #56eefd;
+  color: var(--navbar-color);
 }
 
 .list_item:hover:before, .list_item:hover:after {

components/sdgCard.vue

@@ -130,10 +130,10 @@ export default defineComponent({
 .our-team .team-content {
   width: 100%;
   height: 100%;
-  background: #06508b;
+  background: var(--sdgcard-bg);
   position: absolute;
   padding-top: 35%;
-  color: #fff;
+  color: white;
   opacity: 0;
   top: 0;
   left: 0;

pages/aboutus/index.vue

@@ -47,12 +47,12 @@
     <loading-spinner v-if="$fetchState.pending" />
     <carousel3d v-else>
       <slide v-for="(slide, i) in slides" :key="i" :index="i">
-        <h3 class="text-xl font-semibold">{{ slide.title }}</h3>
-        <p class="px-6 my-2">
+        <h3 class="text-3xl font-semibold text-white" style="color:#39a0ed">{{ slide.title }}</h3>
+        <p class="px-6 my-2 text-white">
           {{ slide.description }}
           <br /><a
             v-if="slide.showlink"
-            style="color: blue"
+            style="color: #6fffe9"
             :href="slide.link"
             target="_blank"
             rel="noreferrer"

pages/contact/index.vue

@@ -202,12 +202,12 @@ img {
 }
 
 ul li a {
-  background-color: rgba(255, 255, 255, 0.911);
+  background-color: var(--contact-link-bg-primary);
   transition: 0.4s;
 }
 ul li a:hover {
   transform: translate(0, -5px) scale(1.05);
-  background-color: rgba(255, 255, 255, 0.979);
-  box-shadow: 0px 0px 18px rgba(116, 227, 235, 0.959);
+  background-color: var(--contact-link-bg-secondary);
+  box-shadow: 0px 0px 18px var(--contact-link-shadow-primary);
 }
 </style>