Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changed hex colors with standarised colors #109

Merged
merged 3 commits into from
Oct 3, 2022
Merged

Changed hex colors with standarised colors #109

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
32e9bbd
Changed hex colors with standarised colors
Oct 2, 2022
56fd7f5
Changed hex colors with standarised colors
Oct 2, 2022
fbed346
Resolved issues
Oct 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion assets/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
11 changes: 6 additions & 5 deletions components/Home/projectCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
></div>
<div
class="
text-white
flex
justify-between
items-center
Expand Down Expand Up @@ -54,6 +55,7 @@
<button
class="
contentBtn
text-white
transition-all
ease-in-out
duration-150
Expand Down Expand Up @@ -100,7 +102,7 @@ export default {
left: 10vw;
}
.box {
background: #060c21;
background: var(--project-card-background);
}
.box::before {
content: '';
Expand All @@ -126,9 +128,8 @@ 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 {
color: #00bcd4;
}
Expand All @@ -140,10 +141,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 {
Expand Down
49 changes: 15 additions & 34 deletions components/navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,5 @@
<template>
<section>
<nav class="fixed z-100 w-full backdrop-blur-sm backdrop-filter py-4 hidden md:flex justify-between py-4 px-4 items-center">
<aside class="font-bold text-3xl tracking-widest hover:(scale-125) transform px-8 py-2">
<nuxt-link to="/">SDG</nuxt-link>
</aside>
<ul class="ml-auto flex-row md:flex list-none">
<li v-for="page in pages" :key="page.url" class="hover:(font-bold scale-125) transform px-8 transition-transform">
<nuxt-link :to="page.url" :prefetch="page.prefetch">
{{ page.name }}
</nuxt-link>
</li>
</ul>
</nav>
<nav>
<button
id="toggle"
aria-label="navbar-toggle"
Expand All @@ -23,11 +11,10 @@
focus:outline-none
cursor-pointer
fixed
z-100
z-20
top-4
right-4
p-0
md:hidden
"
type="button"
:class="{ active: isActive }"
Expand All @@ -45,7 +32,7 @@
/>
</svg>
</button>
<section class="navbar top-0 w-screen fixed flex z-20 md:hidden">
<section class="navbar top-0 w-screen fixed flex z-10">
<ul
v-show="isOpen"
class="
Expand All @@ -71,7 +58,7 @@
relative
tracking-12px
cursor-pointer
text-center
text-white text-center
my-8
"
@click="closeNavbar"
Expand All @@ -82,19 +69,17 @@
</nuxt-link>
</ul>
</section>
</section>
</nav>
</template>
<script>
import { defineComponent } from '@nuxtjs/composition-api';

export default defineComponent({
data() {
export default {
data () {
return {
openTimeline: null,
isActive: false,
isOpen: false,
pages: [
{ name: 'Home', url: '/', prefetch: false },
{ name: 'Home', url: '/', prefect: false },
{ name: 'Blogs', url: '/blog', prefetch: false },
{ name: 'Team', url: '/portfolio', prefetch: false },
{ name: 'About Us', url: '/aboutus', prefetch: true },
Expand Down Expand Up @@ -123,7 +108,7 @@ export default defineComponent({
this.isOpen = false
}
}
})
}
</script>

<style scoped>
Expand All @@ -138,7 +123,7 @@ export default defineComponent({
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;
}
Expand All @@ -152,7 +137,6 @@ export default defineComponent({
.navbar-toggle.active {
transform: rotate(45deg);
}

.navbar-toggle.active .line.top {
stroke-dashoffset: -98px;
}
Expand All @@ -165,39 +149,36 @@ export default defineComponent({
}
/* 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;
}

.list_item {
@apply text-2xl md:text-3xl lg:text-4xl;
}

.list_item:before, .list_item::after {
content: ' ';
display: block;
position: absolute;
width: 0;
top: 2px;
height: 100%;
border-bottom: 2px solid #56eefd;
border-bottom: 2px solid var(--navbar-color);
transition: 0.3s;
}
.list_item:before {
right: 0;
}

.list_item:after {
bottom: 0;
}
.list_item:hover {
color: #56eefd;
color: var(--navbar-color);
}

.list_item:hover:before, .list_item:hover:after {
width: 50%;
}


</style>
7 changes: 2 additions & 5 deletions components/sdgCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,6 @@
<script>
import { defineComponent } from '@nuxtjs/composition-api'
import { OptiImage } from 'opti-image'

export default defineComponent({
components: {
OptiImage
Expand Down Expand Up @@ -123,17 +122,16 @@ export default defineComponent({
padding: 20px 20px;
border-radius: 50%;
}

.our-team:hover img {
transform: scale(1.2);
}
.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;
Expand All @@ -158,7 +156,6 @@ export default defineComponent({
opacity: 1;
transform: scale(1);
}

.opti-image-loaded.opti-image {
transition: transform 0.8s ease 0s;
}
Expand Down
9 changes: 3 additions & 6 deletions pages/contact/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,6 @@
import { defineComponent } from '@nuxtjs/composition-api'
import Online from '~/components/contact-us/discord/online.vue'
import Map from '~/components/contact-us/map.vue'

interface itemsObject {
name: string
url: string
Expand All @@ -157,7 +156,6 @@ interface itemsObject {
color: string
}
}

export default defineComponent({
components: { Map, Online },
data () {
Expand Down Expand Up @@ -200,14 +198,13 @@ img {
#content:hover img {
transform: scale(1.1);
}

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>