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

Conversion of scss into tailwind (#2)

Browse Source 
* installed tailwind

* updated menu - tailwind

* removed old style

* updated container size for navigation

* updated footer style - tailwind

* updated header style - tailwind

* updated colors

* updated about section - tailwind

* updated experiences style - tailwind

* WIP

* improved responsiveness

* updated favorite projects

* updated buttons

* updated projects view

* updated footer style

* updated about view

* updated project view

* updated style for contact form

* updated mail contact

* final style update

* fixed buttons

* fix scroll button

* added autoscroll for contact form

* updated paths in project

* empty line added

* unnecessary comment removed
This commit is contained in:
Kamil Niemczycki
2022-08-02 17:01:32 +02:00
committed by GitHub
parent 7475bb5671
commit 7bee728518
27 changed files with 1066 additions and 1343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,82 +1,92 @@
<template>
<div class="contact_info">
<header class="info_head">
Inne formy kontaktu:
<div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
<header class="mb-1.5">
<h3 class="text-xl">
Inne formy kontaktu:
</h3>
</header>
<div class="contact_element">
<img
class="contact_element_icon"
src="/assets/img/instagram.jpg"
alt="Instagram"
>
<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"
alt="Facebook"
>
<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"
alt="Twitter"
>
<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"
alt="Gadu-Gadu"
>
<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"
alt="E-mail"
>
<span
id="mailto"
class="contact_element_text"
>
<a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
</span>
<div class="flex flex-col gap-2.5 justify-start items-start">
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
<img
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
src="/assets/img/instagram.jpg"
alt="Instagram"
>
<span
id="instagram"
class="font-bold"
>
<a
href="https://www.instagram.com/nikcamii/"
target="_blank"
rel="noopener nofollow noreferrer"
class="hover:underline"
>Instagram: @NiKCamii</a>
</span>
</div>
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
<img
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
src="/assets/img/facebook.jpg"
alt="Facebook"
>
<span
id="facebook"
class="font-bold"
>
<a
href="https://www.facebook.com/nikcamii/"
target="_blank"
rel="noopener nofollow noreferrer"
class="hover:text-gray-700 hover:underline"
>Facebook: @NiKCamii</a>
</span>
</div>
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
<img
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
src="/assets/img/twitter.jpg"
alt="Twitter"
>
<span
id="twitter"
class="font-bold"
>
<a
href="https://twitter.com/nikcamii"
target="_blank"
rel="noopener nofollow noreferrer"
class="hover:text-gray-700 hover:underline"
>Twitter: @NiKCamii</a>
</span>
</div>
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
<img
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
src="/assets/img/gg.png"
alt="Gadu-Gadu"
>
<span
id="gg"
class="font-bold"
>GG: 38429969</span>
</div>
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
<img
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
src="/assets/img/user.jpg"
alt="E-mail"
>
<span
id="mailto"
class="font-bold"
>
<a
href="mailto:contact@kamilcraft.com"
class="hover:text-gray-700 hover:underline"
>Email: contact@kamilcraft.com</a>
</span>
</div>
</div>
</div>
</template>
@@ -84,51 +94,18 @@
<style lang="scss" scoped>
@import "scss/media";
.contact_info {
flex-basis: 410px;
@screen md {
.contact_info {
flex-basis: 410px;
}
}
.info_head {
padding: 10px;
line-height: 1.6em;
font-size: 1.3em;
font-weight: bold;
}
a {
color: inherit;
.contact_element {
display: flex;
align-items: center;
padding: 5px;
background-color: #fff;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 5px;
a {
color: inherit;
text-decoration: none;
&:hover {
-webkit-text-fill-color: #444444;
color: #444444;
text-decoration: underline;
}
}
&_icon {
border-radius: 50%;
border: 1px solid #e2e2e2;
width: 50px;
height: 50px;
margin-right: 10px;
object-fit: contain;
}
&_text{
padding-top: 2px;
line-height: 1.6em;
font-size: 1.1em;
font-weight: bold;
&:hover {
-webkit-text-fill-color: #374151;
color: #374151;
}
}
@@ -153,11 +130,4 @@
#gg {
color: #ffa214;
}
@include media-tablet {
#instagram, #facebook, #twitter, #mailto, #gg {
font-size: 1em;
line-height: 1.2em;
}
}
</style>