cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

start implementing frontend design

Browse Source
This commit is contained in:
Michel Fromme
2023-06-18 10:48:50 +02:00
parent 89f47b3692
commit db41b03456
27 changed files with 997 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Navbar.vue
+49 -25
View File
@@ -36,9 +36,31 @@ onBeforeUnmount(() => {
<img alt="logo" class="logo" src="@/assets/img/vampir.png" />
</router-link>
</div>
<div class="navbar-center"></div>
<div class="navbar-text">Bloodline</div>
<div class="navbar-center">
<div class="navbar-social-links">
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-discord" />
</div>
<div class="social-bloodline-badge-text">Discord</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-telegram" />
</div>
<div class="social-bloodline-badge-text">Telegram</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-twitter" />
</div>
<div class="social-bloodline-badge-text">Twitter</div>
</div>
</div>
</div>
<div class="navbar-end">
<button v-if="!connected" @click="walletStore.connectWallet">connect</button>
<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
<span v-else> {{ address }}</span>
</div>
</div>
@@ -52,39 +74,41 @@ header
position: fixed
z-index: 3
box-sizing: border-box
background-color: grey
background-color: #202020
width: 100%
transform: translate3d(0,0,0)
transition: transform .3s ease,visibility 0s .3s linear
height: 128px
&.navbar--hidden
transform: translate3d(0,-100%,0)
.navbar-inner
display: flex
justify-content: space-between
padding: 0 20px
padding: 16px 24px
box-sizing: border-box
height: 100%
align-items: center
@media (min-width: 992px)
padding: 10px 80px
padding: 16px 24px
.navbar-text
font-family: 'Vampire', sans-serif
font-size: 64px
letter-spacing: 0.138em
.navbar-center
display: flex
align-items: center
.main-menu-links
margin-right: 48px
&:hover, &:active, &:focus
color: lighten(black, 20%)
.main-menu-link
cursor: pointer
margin-left: auto
.navbar-social-links
display: flex
gap: 18px
.social-bloodline-badge
font-size: 16px
padding: 8px 16px 8px 16px
border-radius: 14px
background-color: #0F0F0F
display: flex
.social-bloodline-badge-icon
margin-right: 8px
.navbar-end
display: flex
align-items: center
align-self: center
a
color: black
&:hover,&:focus, &:active
color: lighten(black, 20%)
.navbar-hamburger-open
font-size: 35px
.parry-twitter
font-size: 30px
margin-left: 32px
flex: 0 0 200px
justify-content: flex-end
</style>