Compare commits
3 Commits
d726af2639
...
661c408a18
| Author | SHA1 | Date | |
|---|---|---|---|
661c408a18
|
|||
|
cbfb67945a
|
|||
|
401f4e1b3c
|
@ -1,122 +1,47 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="footer_container">
|
||||
<div class="container_logo">
|
||||
Kamil<span class="logo_element">Craft</span>
|
||||
<footer class="bg-neutral-800 py-8">
|
||||
<div class="flex items-center justify-between max-w-screen-xl mx-auto">
|
||||
<div class="bg-neutral-600 text-white pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith">
|
||||
Kamil<span class="text-lime-500">Craft</span>
|
||||
</div>
|
||||
<ul class="socials">
|
||||
<ul class="flex gap-5 pr-3 text-lg">
|
||||
<li
|
||||
v-for="link in socialLinks"
|
||||
:key="link.title.slug"
|
||||
class="social_link"
|
||||
>
|
||||
<a
|
||||
class="link"
|
||||
class="text-neutral-400 hover:text-neutral-500"
|
||||
:href="link.link"
|
||||
:title="link.title"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
<FontAwesomeIcon
|
||||
class="mr-1"
|
||||
:icon="['fab', link.icon]"
|
||||
/>
|
||||
<span class="social_title">{{ link.title }}</span>
|
||||
<span class="social_shortcut">{{ link.shortcut }}</span>
|
||||
<span class="hidden md:inline-block">{{ link.title }}</span>
|
||||
<span class="md:hidden">{{ link.shortcut }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="container" />
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const socialLinks = [
|
||||
{ link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
|
||||
{ link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
|
||||
{
|
||||
link: 'https://www.youtube.com/user/kamilniemczycki',
|
||||
icon: 'youtube',
|
||||
title: 'Oglądaj mnie na YouTube',
|
||||
shortcut: 'YouTube'
|
||||
},
|
||||
{
|
||||
link: 'https://www.facebook.com/nikcamii',
|
||||
icon: 'facebook',
|
||||
title: 'Znajdź mnie na Facebooku',
|
||||
shortcut: 'Facebook'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/default";
|
||||
|
||||
.footer {
|
||||
background-color: #323232;
|
||||
padding: 35px 0;
|
||||
|
||||
&_container {
|
||||
@extend .container;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.container_logo {
|
||||
padding: 14px 20px 14px 40px;
|
||||
font-family: 'Thasadith', sans-serif;
|
||||
font-size: 2.5em;
|
||||
color: #D4D4D4;
|
||||
background-color: #5B5B5B;
|
||||
|
||||
.logo_element {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
|
||||
.social_link {
|
||||
margin-right: 25px;
|
||||
padding-right: 15px;
|
||||
font-size: 1.1em;
|
||||
|
||||
a {
|
||||
color: #A3A3A3;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.social_shortcut {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
.social_title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social_shortcut {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-mobile {
|
||||
.social_shortcut {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-mobile {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-mobile {
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex relative items-center justify-between md:justify-start max-w-screen-lg mx-auto gap-5"
|
||||
class="flex relative items-center justify-between md:justify-start max-w-screen-xl mx-auto gap-5"
|
||||
:class="{ 'clicked-menu': isClicked }"
|
||||
>
|
||||
<RouterLink to="/">
|
||||
@ -134,141 +134,3 @@ function linkClicked() {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--<style lang="scss" scoped>
|
||||
//@import "scss/media";
|
||||
//
|
||||
//.sub-page > .container {
|
||||
// .nav-btn {
|
||||
// color: #8D8D8D;
|
||||
// }
|
||||
//
|
||||
// .nav .site-menu .menu-element {
|
||||
// a:not([class|=router-link]) {
|
||||
// color: #8D8D8D;
|
||||
//
|
||||
// &:hover {
|
||||
// color: #A2CF00;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//.container {
|
||||
// display: flex;
|
||||
// height: 80px;
|
||||
// align-items: center;
|
||||
// justify-content: flex-start;
|
||||
// padding: 0;
|
||||
//
|
||||
// div.logo {
|
||||
// padding: 14px 20px 14px 40px;
|
||||
// font-family: 'Thasadith', sans-serif;
|
||||
// font-size: 2.5em;
|
||||
// color: #5C5C5C;
|
||||
// background-color: white;
|
||||
//
|
||||
// .logo-element {
|
||||
// color: #A2CF00;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-menu-active {
|
||||
// color: #8D8D8D;
|
||||
// animation: container-active-menu 500ms forwards ease-in-out;
|
||||
//
|
||||
// div.logo {
|
||||
// animation: logo-active-menu 500ms forwards ease-in-out;
|
||||
// }
|
||||
// .nav {
|
||||
// .nav-btn {
|
||||
// color: #8D8D8D;
|
||||
// }
|
||||
// .site-menu .menu-element a {
|
||||
// color: #8D8D8D;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//.nav {
|
||||
// margin-left: 20px;
|
||||
// z-index: 10;
|
||||
// .nav-btn {
|
||||
// display: none;
|
||||
// margin: 10px 25px;
|
||||
// font-size: 2em;
|
||||
// color: white;
|
||||
// background: transparent !important;
|
||||
// border: none;
|
||||
// }
|
||||
// .site-menu {
|
||||
// display: flex;
|
||||
// list-style: none;
|
||||
//
|
||||
// .menu-element {
|
||||
// margin-right: 30px;
|
||||
//
|
||||
// a {
|
||||
// color: #EBEBEB;
|
||||
//
|
||||
// &.router-link-exact-active, &:hover {
|
||||
// color: #A2CF00;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &:last-child {
|
||||
// margin-right: unset;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include media-tablet {
|
||||
// margin-left: 0;
|
||||
//
|
||||
// .nav-btn {
|
||||
// display: block;
|
||||
// }
|
||||
//
|
||||
// .site-menu {
|
||||
// display: none;
|
||||
// width: 100%;
|
||||
// position: absolute;
|
||||
// top: 80px;
|
||||
// left: 0;
|
||||
// background-color: white;
|
||||
// box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
|
||||
//
|
||||
// .menu-element {
|
||||
// width: 100%;
|
||||
// padding: 5px 20px;
|
||||
// text-align: right;
|
||||
// font-size: 1.8em;
|
||||
// line-height: 2em;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .menu-clicked {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//@include media-tablet {
|
||||
// .container {
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
//}
|
||||
//@keyframes container-active-menu {
|
||||
// 0% {
|
||||
// background-color: transparent;
|
||||
// }
|
||||
// 100% {
|
||||
// background-color: #EFEFEF;
|
||||
// }
|
||||
//}
|
||||
//@keyframes logo-active-menu {
|
||||
// 0% {
|
||||
// background-color: white;
|
||||
// }
|
||||
// 100% {
|
||||
// background-color: #F6F6F6;
|
||||
// }
|
||||
//}
|
||||
</style>-->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user