Skip to content

Commit

Permalink
docs: up cert
Browse files Browse the repository at this point in the history
  • Loading branch information
posva committed Apr 16, 2024
1 parent 7a7f8db commit 187e7d0
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 16 deletions.
50 changes: 34 additions & 16 deletions packages/docs/.vitepress/theme/components/AsideSponsors.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<a
class="mp-banner"
href="https://masteringpinia.com/?utm_source=affiliate&utm_medium=vuerouter&utm_campaign=VueRouter_MP&utm_content=sidebar"
class="banner mp"
href="https://masteringpinia.com?utm=pinia-sidebar"
target="_blank"
>
<img width="22" height="22" src="/mp-pinia-logo.svg" />
Expand All @@ -13,21 +13,22 @@
</a>

<a
class="banner"
href="https://certificates.dev/vuejs/?friend=VUEROUTER&utm_source=router_vuejs&utm_medium=link&utm_campaign=router_vuejs_links&utm_content=sidebar"
class="banner cert"
href="https://certificates.dev/vuejs/?friend=VUEROUTER&utm_source=pinia_vuejs&utm_medium=link&utm_campaign=pinia_vuejs_links&utm_content=sidebar"
target="_blank"
>
<img src="/banners/vuejs-certification.svg" alt="Vue.js Certification" />
<img width="22" height="22" src="/vue-cert-logo.svg" />
<span>
<p class="extra-info">The official</p>
<p class="heading">Vue.js Certification</p>
<p class="extra-info">Get certified!</p>
</span>
</a>
</template>

<style scoped>
.banner {
margin-bottom: 0.5rem;
}
.mp-banner {
margin: 1rem 0;
margin: 0.25rem 0;
padding: 0.4rem 0;
border-radius: 14px;
position: relative;
Expand All @@ -44,27 +45,35 @@
transition: border-color 0.5s;
}
.mp-banner:hover {
.banner:last-of-type {
margin-bottom: 1rem;
}
.banner:hover {
border: 2px solid var(--vp-c-brand-1);
}
.mp-banner img {
.banner.cert:hover {
border: 2px solid var(--vp-c-green-1);
}
.banner img {
transition: transform 0.5s;
transform: scale(1.25);
}
.mp-banner:hover img {
.banner:hover img {
transform: scale(1.75);
}
.mp-banner .extra-info {
.banner .extra-info {
color: var(--vp-c-text-1);
opacity: 0;
font-size: 0.7rem;
padding-left: 0.1rem;
transition: opacity 0.5s;
}
.mp-banner .heading {
.banner .heading {
background-image: linear-gradient(
120deg,
var(--vp-c-brand-3) 16%,
Expand All @@ -76,7 +85,16 @@
-webkit-text-fill-color: transparent;
}
.mp-banner:hover .extra-info {
.banner.cert .heading {
background-image: linear-gradient(
120deg,
var(--vp-c-green-3) 16%,
var(--vp-c-green-2),
var(--vp-c-green-1)
);
}
.banner:hover .extra-info {
opacity: 0.9;
}
</style>
5 changes: 5 additions & 0 deletions packages/docs/public/vue-cert-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 187e7d0

Please sign in to comment.