kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Updated footer style

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-01-06 10:20:32 +01:00
parent 6c890d03d6
commit 24415e7743
1 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Footer.vue
View File

@ -1,17 +1,19 @@
<template> <template>
<footer class="footer"> <footer class="footer">
<div class="footer-container"> <div class="footer_container">
<div class="logo">Kamil<span class="logo-element">Craft</span></div> <div class="container_logo">Kamil<span class="logo_element">Craft</span></div>
<ul class="social-media"> <ul class="socials">
<li class="social-link" <li class="social_link"
v-for="link in socialLinks" v-for="link in socialLinks"
:key="link.title.slug"> :key="link.title.slug">
<a class="link" <a class="link"
:href="link.link" :href="link.link"
:title="link.title" :title="link.title"
target="_blank"> target="_blank"
rel="noopener nofollow noreferrer">
<font-awesome-icon class="icon" :icon="['fab', link.icon]" /> <font-awesome-icon class="icon" :icon="['fab', link.icon]" />
<span class="title">{{ link.title }}</span> <span class="social_title">{{ link.title }}</span>
<span class="social_shortcut">{{ link.shortcut }}</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -27,30 +29,31 @@
background-color: #323232; background-color: #323232;
padding: 35px 0; padding: 35px 0;
&-container { &_container {
@extend .container; @extend .container;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.logo { .container_logo {
padding: 14px 20px 14px 40px; padding: 14px 20px 14px 40px;
font-family: 'Thasadith', sans-serif; font-family: 'Thasadith', sans-serif;
font-size: 2.5em; font-size: 2.5em;
color: #D4D4D4; color: #D4D4D4;
background-color: #5B5B5B; background-color: #5B5B5B;
.logo-element { .logo_element {
color: #A2CF00; color: #A2CF00;
} }
} }
.social-media { .socials {
display: flex; display: flex;
list-style: none; list-style: none;
.social-link { .social_link {
margin-right: 25px; margin-right: 25px;
padding-right: 15px;
font-size: 1.1em; font-size: 1.1em;
a { a {
@ -60,8 +63,22 @@
margin-right: 5px; margin-right: 5px;
} }
.social_shortcut {
display: none;
}
@include media-tablet { @include media-tablet {
.title { .social_title {
display: none;
}
.social_shortcut {
display: inline-block;
}
}
@include media-mobile {
.social_shortcut {
display: none; display: none;
} }
} }
@ -71,12 +88,9 @@
margin-right: 0; margin-right: 0;
} }
} }
@include media-mobile {
padding-right: 15px;
}
} }
@include media-mobile {
@include media-tablet {
padding: 0; padding: 0;
} }
} }
@ -93,8 +107,8 @@ export default {
data () { data () {
return { return {
socialLinks: [ socialLinks: [
{ link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube' }, { 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' } { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
] ]
} }
} }