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

Style update to contact page

Browse Source
This commit is contained in:
Kamil Niemczycki
2022-01-06 00:53:37 +01:00
parent 76d8e59f40
commit 8f3649d141
3 changed files with 166 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/sections/contacts/OtherContact.vue
View File

@@ -1,25 +1,43 @@
<template>
<div class="contact-container" style="flex-basis: 410px">
<header class="head">Inne formy kontaktu:</header>
<div class="contact-element">
<img class="contact-element-icon" src="/assets/img/instagram.jpg" />
<span id="instagram"><a href="https://www.instagram.com/nikcamii/" target="_blank">Instagram: @NiKCamii</a></span>
<div class="contact_info">
<header class="info_head">Inne formy kontaktu:</header>
<div class="contact_element">
<img class="contact_element_icon"
src="/assets/img/instagram.jpg" />
<span id="instagram" class="contact_element_text">
<a href="https://www.instagram.com/nikcamii/"
target="_blank"
rel="noopener nofollow noreferrer">Instagram: @NiKCamii</a>
</span>
</div>
<div class="contact-element">
<img class="contact-element-icon" src="/assets/img/facebook.jpg" />
<span id="facebook"><a href="https://www.facebook.com/nikcamii/" target="_blank">Facebook: @NiKCamii</a></span>
<div class="contact_element">
<img class="contact_element_icon" src="/assets/img/facebook.jpg" />
<span id="facebook" class="contact_element_text">
<a href="https://www.facebook.com/nikcamii/"
target="_blank"
rel="noopener nofollow noreferrer">Facebook: @NiKCamii</a>
</span>
</div>
<div class="contact-element">
<img class="contact-element-icon" src="/assets/img/twitter.jpg" />
<span id="twitter"><a href="https://twitter.com/nikcamii" target="_blank">Twitter: @NiKCamii</a></span>
<div class="contact_element">
<img class="contact_element_icon"
src="/assets/img/twitter.jpg" />
<span id="twitter" class="contact_element_text">
<a href="https://twitter.com/nikcamii"
target="_blank"
rel="noopener nofollow noreferrer">Twitter: @NiKCamii</a>
</span>
</div>
<div class="contact-element">
<img class="contact-element-icon" src="/assets/img/gg.png" />
<span id="gg">GG: 38429969</span>
<div class="contact_element">
<img class="contact_element_icon"
src="/assets/img/gg.png" />
<span id="gg" class="contact_element_text">GG: 38429969</span>
</div>
<div class="contact-element">
<img class="contact-element-icon" src="/assets/img/user.jpg" />
<span id="email"><a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a></span>
<div class="contact_element">
<img class="contact_element_icon"
src="/assets/img/user.jpg" />
<span id="email" class="contact_element_text">
<a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
</span>
</div>
</div>
</template>
@@ -31,28 +49,20 @@ export default {
</script>
<style lang="scss" scoped>
.contact-container {
margin: 10px;
max-width: 500px;
background-color: #eaeaea;
border: 2px solid #dadada;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
@import "scss/media";
header.head {
padding: 10px;
line-height: 1.6em;
font-size: 1.3em;
font-weight: bold;
}
form#form-point {
display: flex;
flex-direction: column;
align-items: center;
}
.contact_info {
flex-basis: 410px;
}
.contact-element {
.info_head {
padding: 10px;
line-height: 1.6em;
font-size: 1.3em;
font-weight: bold;
}
.contact_element {
display: flex;
align-items: center;
padding: 5px;
@@ -71,22 +81,22 @@ export default {
text-decoration: underline;
}
}
}
.contact-element-icon {
border-radius: 50%;
border: 1px solid #e2e2e2;
width: 50px;
height: 50px;
margin-right: 10px;
object-fit: contain;
}
&_icon {
border-radius: 50%;
border: 1px solid #e2e2e2;
width: 50px;
height: 50px;
margin-right: 10px;
object-fit: contain;
}
#instagram, #facebook, #twitter, #email, #gg {
padding-top: 2px;
line-height: 1.6em;
font-size: 1.1em;
font-weight: bold;
&_text{
padding-top: 2px;
line-height: 1.6em;
font-size: 1.1em;
font-weight: bold;
}
}
#instagram {
@@ -110,4 +120,11 @@ export default {
#gg {
color: #ffa214;
}
@include media-tablet {
#instagram, #facebook, #twitter, #email, #gg {
font-size: 1em;
line-height: 1.2em;
}
}
</style>