Fixed styles on main and nav
This commit is contained in:
parent
fafe1e67df
commit
6e747fba07
GPG key ID:
487C4334CE04CE66
15
src/App.vue
15
src/App.vue
|
|
@ -16,9 +16,19 @@ export default {
|
|||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-color: #192236;
|
||||
--bg-alt-color: #151d2f;
|
||||
--fg-color: #fff;
|
||||
--padding: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color)
|
||||
}
|
||||
|
||||
html, body, #app {
|
||||
scroll-behavior: smooth;
|
||||
background-color: #192236;
|
||||
}
|
||||
|
||||
#app {
|
||||
|
|
@ -26,11 +36,12 @@ html, body, #app {
|
|||
flex-direction: column;
|
||||
max-width: 1920px;
|
||||
margin: auto;
|
||||
padding: 0px 20px;
|
||||
padding: var(--padding);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,39 @@
|
|||
<template>
|
||||
<div class="navbar">
|
||||
<nav>
|
||||
<h1>Keyemail</h1>
|
||||
<ul class="navContents" v-if="!(isMobile() || smallScreen)">
|
||||
<li><router-link to="/">Home</router-link></li>
|
||||
<li><router-link to="/gallery">Gallery</router-link></li>
|
||||
<li><router-link to="/socials">Socials</router-link></li>
|
||||
<li><a href="https://git.keyemail.dev/explore/">Projects</a></li>
|
||||
<ul v-if="!(isMobile() || smallScreen)">
|
||||
<li>
|
||||
<router-link to="/">Home</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/gallery">Gallery</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/socials">Socials</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.keyemail.dev/explore/">Git</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mobileNavButton" v-else>
|
||||
<i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-if="turnOnMobileUI"></i>
|
||||
<i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-else-if="turnOnMobileUI"></i>
|
||||
<i class="fas fa-bars" @click="mobileUI();" v-else></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobileNav" v-if="turnOnMobileUI">
|
||||
<div class="mobileNavContents">
|
||||
</nav>
|
||||
|
||||
<div id="mobileNav" v-if="turnOnMobileUI">
|
||||
<div>
|
||||
<ul>
|
||||
<li><router-link to="/" @click="mobileUI()">Home</router-link></li>
|
||||
<li><router-link to="/gallery" @click="mobileUI()">Gallery</router-link></li>
|
||||
<li><router-link to="/socials" @click="mobileUI()">Socials</router-link></li>
|
||||
<li><a href="https://git.keyemail.dev/explore/">Projects</a></li>
|
||||
<li>
|
||||
<router-link to="/" @click="mobileUI()">Home</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/gallery" @click="mobileUI()">Gallery</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/socials" @click="mobileUI()">Socials</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.keyemail.dev/explore/">Git</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -66,7 +81,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navbar{
|
||||
nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -74,20 +89,19 @@ export default {
|
|||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-weight: 500;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.navbar h1{
|
||||
nav h1{
|
||||
width: fit-content;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.navContents {
|
||||
nav ul {
|
||||
list-style: none;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navContents li{
|
||||
nav ul li{
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
|
|
@ -95,31 +109,28 @@ export default {
|
|||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.navContents a {
|
||||
nav ul a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.navContents li:hover{
|
||||
nav ul li:hover{
|
||||
color: #8ee8fc;
|
||||
}
|
||||
|
||||
.mobileNavButton {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mobileNavButton i {
|
||||
nav i {
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s color;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mobileNavButton i:hover {
|
||||
nav i:hover {
|
||||
color: #74d2f1;
|
||||
}
|
||||
|
||||
.mobileNav {
|
||||
#mobileNav {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -129,21 +140,21 @@ export default {
|
|||
z-index: 9;
|
||||
}
|
||||
|
||||
.mobileNav i {
|
||||
#mobileNav i {
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s color;
|
||||
}
|
||||
|
||||
.mobileNavContents {
|
||||
#mobileNav div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mobileNavContents li {
|
||||
#mobileNav div li {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
font-weight: 400;
|
||||
|
|
@ -154,13 +165,13 @@ export default {
|
|||
margin: 10px;
|
||||
}
|
||||
|
||||
.mobileNavContents a {
|
||||
#mobileNav div a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
transition: 0.3s color;
|
||||
}
|
||||
|
||||
.mobileNavContents a:hover {
|
||||
#mobileNav div a:hover {
|
||||
color: #74d2f1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,27 +7,27 @@
|
|||
<h1>Keyemail</h1>
|
||||
<ul>
|
||||
<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"/>
|
||||
<div v-if="showActiveBadge">Active Developer</div>
|
||||
<template v-else/>
|
||||
</li>
|
||||
<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"/>
|
||||
<div v-if="showHTMLBadge">HTML</div>
|
||||
<template v-else/>
|
||||
</li>
|
||||
<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"/>
|
||||
<div v-if="showCSSBadge">CSS</div>
|
||||
<template v-else/>
|
||||
</li>
|
||||
<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"/>
|
||||
<div v-if="showJavascriptBadge">Javascript</div>
|
||||
<template v-else/>
|
||||
</li>
|
||||
<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"/>
|
||||
<div v-if="showVue3Badge">Vue 3</div>
|
||||
<template v-else/>
|
||||
</li>
|
||||
|
|
@ -127,11 +127,14 @@ header {
|
|||
background-color: #151d2f;
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
box-sizing: content-box;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -144,14 +147,12 @@ header {
|
|||
|
||||
li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: inherit;
|
||||
text-decoration: none;
|
||||
background-color: #151d2f;
|
||||
background-color: var(--bg-alt-color);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
box-sizing: border-box;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -165,7 +166,7 @@ header {
|
|||
width: 100%;
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
background-color: #151d2f;
|
||||
background-color: var(--bg-alt-color);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
|
|
|
|||
Loading…
Reference in a new issue