host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit social links icons

Browse source
This commit is contained in:
Paul Nicoué 2022-11-22 17:41:17 +01:00
parent c12732989c
commit d0310f35b8
4 changed files with 47 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/css/main.scss
View file

@ -146,8 +146,6 @@ body {
svg { svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
fill: var(--black);
transition: fill 200ms ease-in-out;
} }
&--white { &--white {
@ -155,10 +153,6 @@ body {
&:focus-visible { &:focus-visible {
outline: 1px dashed var(--white); outline: 1px dashed var(--white);
} }
svg {
fill: var(--white);
}
} }
} }
} }

4
assets/css/partials/variables.scss
View file

@ -25,15 +25,13 @@
// Dimensions // Dimensions
--icon-size: 2.25rem; --icon-size: 3.2rem;
--sidebar-padding: 0.8rem; --sidebar-padding: 0.8rem;
// Colors // Colors
--black: #000; --black: #000;
--transparent-black: rgba(0, 0, 0, 0.3);
--white: #fff; --white: #fff;
--transparent-white: rgba(255, 255, 255, 0.9);
} }
// Media queries // Media queries

2
public/build/main.css
View file

File diff suppressed because one or more lines are too long

51
site/templates/home.twig
View file

@ -17,15 +17,54 @@
</nav> </nav>
<div class="sidebar__social"> <div class="sidebar__social">
<a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Go to {{ site.title }}'s Instagram profile"> <a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Go to {{ site.title }}'s Instagram profile">
<svg aria-hidden="true" viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <svg class="instagram-icon" aria-hidden="true" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M 128 0 L 0 0 L 0 128 L 128 128 L 128 0 Z M 119.874 119.874 L 8.126 119.874 L 8.126 8.126 L 119.874 8.126 L 119.874 119.874 Z"/> <defs>
<path d="M64,93c16,0,29-13,29-29S80,35,64,35S35,48,35,64S48,93,64,93z M64,43c11.6,0,21,9.4,21,21s-9.4,21-21,21s-21-9.4-21-21 S52.4,43,64,43z"/> <linearGradient id="instagram-icon__gradient" gradientUnits="userSpaceOnUse" x1="328.27" x2="183.73" y1="508.05" y2="3.95">
<rect height="10" width="10" x="98" y="20"/> <stop offset="0" stop-color="#ffdb73"/>
<stop offset="0.08" stop-color="#fdad4e"/>
<stop offset="0.15" stop-color="#fb832e"/>
<stop offset="0.19" stop-color="#fa7321"/>
<stop offset="0.23" stop-color="#f6692f"/>
<stop offset="0.37" stop-color="#e84a5a"/>
<stop offset="0.48" stop-color="#e03675"/>
<stop offset="0.55" stop-color="#dd2f7f"/>
<stop offset="0.68" stop-color="#b43d97"/>
<stop offset="0.97" stop-color="#4d60d4"/>
<stop offset="1" stop-color="#4264db"/>
</linearGradient>
</defs>
<style>
.instagram-icon__background {
fill: url(#instagram-icon__gradient);
}
.instagram-icon__white-path {
fill: #fff;
}
</style>
<rect class="instagram-icon__background" height="465.06" rx="107.23" ry="107.23" width="465.06" x="23.47" y="23.47"/>
<path class="instagram-icon__white-path" d="M331,115.22a66.92,66.92,0,0,1,66.65,66.65V330.13A66.92,66.92,0,0,1,331,396.78H181a66.92,66.92,0,0,1-66.65-66.65V181.87A66.92,66.92,0,0,1,181,115.22H331m0-31H181c-53.71,0-97.66,44-97.66,97.66V330.13c0,53.71,44,97.66,97.66,97.66H331c53.71,0,97.66-44,97.66-97.66V181.87c0-53.71-43.95-97.66-97.66-97.66Z"/>
<path class="instagram-icon__white-path" d="M256,198.13A57.87,57.87,0,1,1,198.13,256,57.94,57.94,0,0,1,256,198.13m0-31A88.87,88.87,0,1,0,344.87,256,88.87,88.87,0,0,0,256,167.13Z"/>
<circle class="instagram-icon__white-path" cx="346.81" cy="163.23" r="21.07"/>
</svg> </svg>
</a> </a>
<a class="sidebar__social-link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}"> <a class="sidebar__social-link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <svg class="apple-mail-icon" aria-hidden="true" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M 0 48 L 0 0 L 48 0 L 48 48 L 0 48 Z M 24 24.35 L 3.1 7.126 L 3.1 44.5 L 44.9 44.5 L 44.9 7.126 L 24 24.35 Z M 24 20.35 L 44.9 3.5 L 3.1 3.5 L 24 20.35 Z M 3.1 7.126 L 3.1 3.5 L 3.1 7.126 Z"/> <defs>
<linearGradient id="apple-mail-icon__gradient" gradientTransform="matrix(60 0 0 -60 4071 44901)" gradientUnits="userSpaceOnUse" x1="-67.0167" x2="-67.0167" y1="748.2662" y2="746.7667">
<stop offset="0" stop-color="#1e51ee"/>
<stop offset="1" stop-color="#19e6ff"/>
</linearGradient>
</defs>
<style>
.apple-mail-icon__background {
fill: url(#apple-mail-icon__gradient);
}
.apple-mail-icon__white-path {
fill: #fff;
}
</style>
<path class="apple-mail-icon__background" d="M63.6,5c9,0,13.5,0,18.4,1.5c5.3,1.9,9.5,6.1,11.4,11.4C95,22.8,95,27.4,95,36.4v27.2 c0,9,0,13.5-1.5,18.4c-1.9,5.3-6.1,9.5-11.4,11.4C77.2,95,72.6,95,63.6,95H36.4c-9,0-13.5,0-18.4-1.5C12.7,91.5,8.5,87.4,6.6,82 C5,77.2,5,72.7,5,63.6V36.4c0-9,0-13.5,1.5-18.4C8.5,12.7,12.7,8.5,18,6.6C22.8,5,27.4,5,36.4,5H63.6z" id="Background_2_"/>
<path class="apple-mail-icon__white-path" d="M78.9,69.5c-0.1,0-0.3,0.1-0.4,0.1h-57c-0.1,0-0.3,0-0.4-0.1l0,0l17.8-17.8l3.8,3.9c4.1,4.2,10.6,4.2,14.7,0 l3.8-3.9L78.9,69.5L78.9,69.5L78.9,69.5z M80,67.6V32.3c0-0.2,0-0.4-0.1-0.5C79.8,32,62.2,50.2,62.2,50.2l17.8,17.8 C80,67.8,80,67.7,80,67.6L80,67.6z M20,67.7V32.5c0-0.2,0-0.4,0.1-0.5c0.1,0.2,17.7,18.4,17.7,18.4L20.1,68.1 C20,68,20,67.8,20,67.7L20,67.7z M79,30.6L56.3,53.8c-3.5,3.5-9.1,3.5-12.5,0L21.1,30.6C21,30.5,79,30.6,79,30.6L79,30.6z"/>
</svg> </svg>
</a> </a>
</div> </div>