keyemail/keyemail-dev
1
2
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fixed popup

Browse source
This commit is contained in:
Patrick Hatsune 2024-06-03 16:45:50 -07:00
parent 46be945e1a
commit 0d573e212f
Signed by: keyemail
GPG key ID: 6FD1A0FDB0D914C2
2 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/NavBar.vue
View file

@ -22,6 +22,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<template v-else/>
</template> </template>
<script> <script>

20
src/views/HomePage.vue
View file

@ -9,22 +9,27 @@
<li @mouseover="showActiveBadge = true" @mouseleave="showActiveBadge = false"> <li @mouseover="showActiveBadge = true" @mouseleave="showActiveBadge = false">
<img src="@/assets/badges/code.svg" aria-label="CODE" width="25px" height="25px"/> <img src="@/assets/badges/code.svg" aria-label="CODE" width="25px" height="25px"/>
<div v-if="showActiveBadge">Active Developer</div> <div v-if="showActiveBadge">Active Developer</div>
<template v-else/>
</li> </li>
<li @mouseover="showHTMLBadge = true" @mouseleave="showHTMLBadge = false"> <li @mouseover="showHTMLBadge = true" @mouseleave="showHTMLBadge = false">
<img src="@/assets/badges/html.svg" aria-label="HTML5" width="25px" height="25px"/> <img src="@/assets/badges/html.svg" aria-label="HTML5" width="25px" height="25px"/>
<div v-if="showHTMLBadge">HTML</div> <div v-if="showHTMLBadge">HTML</div>
<template v-else/>
</li> </li>
<li @mouseover="showCSSBadge = true" @mouseleave="showCSSBadge = false"> <li @mouseover="showCSSBadge = true" @mouseleave="showCSSBadge = false">
<img src="@/assets/badges/css.svg" aria-label="CSS3" width="25px" height="25px"/> <img src="@/assets/badges/css.svg" aria-label="CSS3" width="25px" height="25px"/>
<div v-if="showCSSBadge">CSS</div> <div v-if="showCSSBadge">CSS</div>
<template v-else/>
</li> </li>
<li @mouseover="showJavascriptBadge = true" @mouseleave="showJavascriptBadge = false"> <li @mouseover="showJavascriptBadge = true" @mouseleave="showJavascriptBadge = false">
<img src="@/assets/badges/js.svg" aria-label="JS" width="25px" height="25px"/> <img src="@/assets/badges/js.svg" aria-label="JS" width="25px" height="25px"/>
<div v-if="showJavascriptBadge">Javascript</div> <div v-if="showJavascriptBadge">Javascript</div>
<template v-else/>
</li> </li>
<li @mouseover="showVue3Badge = true" @mouseleave="showVue3Badge = false"> <li @mouseover="showVue3Badge = true" @mouseleave="showVue3Badge = false">
<img src="@/assets/badges/vue.svg" aria-label="VUE3" width="25px" height="25px"/> <img src="@/assets/badges/vue.svg" aria-label="VUE3" width="25px" height="25px"/>
<div v-if="showVue3Badge">Vue 3</div> <div v-if="showVue3Badge">Vue 3</div>
<template v-else/>
</li> </li>
</ul> </ul>
</div> </div>
@ -88,10 +93,13 @@ header {
} }
#name div { #name div {
top: calc(100% + 5px);
left: 50%;
pointer-events: none;
position: absolute; position: absolute;
top: 230px; translate: -50%;
transform: translate(0%, -50%); z-index: 1;
width: fit-content; white-space: nowrap;
padding: 5px; padding: 5px;
height: 20px; height: 20px;
background-color: #151d2f; background-color: #151d2f;
@ -108,11 +116,11 @@ header h1 {
header ul { header ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: 10px;
width: fit-content; width: fit-content;
} }
header li { header li {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -241,9 +249,7 @@ article input {
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;
} }
#name div {
top: 325px
}
header h1 { header h1 {
margin-left: 0px; margin-left: 0px;
} }