Compare commits
No commits in common. "661c408a18d82cc5bec6c0e91116f94267053663" and "d726af26398d6a48ab7e26b3159724d1946dd206" have entirely different histories.
661c408a18
...
d726af2639
@ -1,47 +1,122 @@
|
|||||||
<template>
|
<template>
|
||||||
<footer class="bg-neutral-800 py-8">
|
<footer class="footer">
|
||||||
<div class="flex items-center justify-between max-w-screen-xl mx-auto">
|
<div class="footer_container">
|
||||||
<div class="bg-neutral-600 text-white pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith">
|
<div class="container_logo">
|
||||||
Kamil<span class="text-lime-500">Craft</span>
|
Kamil<span class="logo_element">Craft</span>
|
||||||
</div>
|
</div>
|
||||||
<ul class="flex gap-5 pr-3 text-lg">
|
<ul class="socials">
|
||||||
<li
|
<li
|
||||||
v-for="link in socialLinks"
|
v-for="link in socialLinks"
|
||||||
:key="link.title.slug"
|
:key="link.title.slug"
|
||||||
|
class="social_link"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
class="text-neutral-400 hover:text-neutral-500"
|
class="link"
|
||||||
:href="link.link"
|
:href="link.link"
|
||||||
:title="link.title"
|
:title="link.title"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener nofollow noreferrer"
|
rel="noopener nofollow noreferrer"
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon
|
<font-awesome-icon
|
||||||
class="mr-1"
|
class="icon"
|
||||||
:icon="['fab', link.icon]"
|
:icon="['fab', link.icon]"
|
||||||
/>
|
/>
|
||||||
<span class="hidden md:inline-block">{{ link.title }}</span>
|
<span class="social_title">{{ link.title }}</span>
|
||||||
<span class="md:hidden">{{ link.shortcut }}</span>
|
<span class="social_shortcut">{{ link.shortcut }}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="container" />
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
const socialLinks = [
|
const socialLinks = [
|
||||||
{
|
{ link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
|
||||||
link: 'https://www.youtube.com/user/kamilniemczycki',
|
{ link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
|
||||||
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>
|
</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>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="flex relative items-center justify-between md:justify-start max-w-screen-xl mx-auto gap-5"
|
class="flex relative items-center justify-between md:justify-start max-w-screen-lg mx-auto gap-5"
|
||||||
:class="{ 'clicked-menu': isClicked }"
|
:class="{ 'clicked-menu': isClicked }"
|
||||||
>
|
>
|
||||||
<RouterLink to="/">
|
<RouterLink to="/">
|
||||||
@ -134,3 +134,141 @@ function linkClicked() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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