andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Social buttons for website

Browse Source
This commit is contained in:
Angelos Chalaris
2018-09-28 21:49:26 +03:00
parent 02c8e79cce
commit d10edb213b
16 changed files with 209 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/scss/style.scss
View File

@ -513,6 +513,8 @@ h2.category-name {
padding-bottom: calc(0.75 * var(#{$universal-padding-var}));
margin-bottom: calc(2 * var(#{$universal-margin-var}));
border-bottom: $__1px solid var(#{$border-color-var});
padding-top: 5rem;
margin-top: -4.25rem;
}
&.code-card {
margin-top: calc(5 * var(#{$universal-margin-var}));
@ -812,6 +814,29 @@ nav {
color: var(#{$nav-link-fore-color-var});
}
}
button.social {
width: 33.333%;
margin: 0;
border: 0;
border-radius: 0;
box-sizing: border-box;
height: 4rem;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
&.fb {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-facebook'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'%3E%3C/path%3E%3C/svg%3E");
background-color: #1565c0;
}
&.instagram {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-instagram'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.5' y2='6.5'%3E%3C/line%3E%3C/svg%3E");
background-color: #ec407a;
}
&.twitter {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-twitter'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'%3E%3C/path%3E%3C/svg%3E");
background-color: #03a9f4;
}
}
}
[type="search"] {