-
Notifications
You must be signed in to change notification settings - Fork 0
/
social-icons.css
94 lines (77 loc) · 6.81 KB
/
social-icons.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
.social-icon {
display: block;
width: 40px;
height: 40px;
background-color: #ff0000;
border-radius: 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.social-icon::after {
content: '';
display: block;
height: 0;
width: 55%;
padding-bottom: 55%;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: contain;
background-size: contain;
margin: 0 auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.social-icon--facebook {
background-color: #517abf;
}
.social-icon--facebook::after {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M296.3%20512h-95.9V256h-64v-88.2h64l-.1-52C200.3%2043.8%20219.8%200%20304.6%200h70.6v88.2H331c-33%200-34.6%2012.3-34.6%2035.3l-.1%2044.2h79.3l-9.4%2088.2h-69.9V512z%22%2F%3E%3C%2Fsvg%3E');
}
.social-icon--twitter {
background-color: #00c0fb;
}
.social-icon--twitter::after {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M16%203c-.6.3-1.2.4-1.9.5.7-.4%201.2-1%201.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7%200-3.2%201.5-3.2%203.3%200%20.3%200%20.5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4%201-.4%201.6%200%201.1.6%202.1%201.5%202.7-.5%200-1-.2-1.5-.4%200%201.6%201.1%202.9%202.6%203.2-.3.2-.6.2-.9.2-.2%200-.4%200-.6-.1.4%201.3%201.6%202.3%203.1%202.3-1.1.9-2.5%201.4-4.1%201.4H0c1.5.9%203.2%201.5%205%201.5%206%200%209.3-5%209.3-9.3v-.4C15%204.3%2015.6%203.7%2016%203z%22%2F%3E%3C%2Fsvg%3E');
}
.social-icon--youtube {
background-color: #d01917;
}
.social-icon--youtube::after {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M10%202.3C.2%202.3%200%203.2%200%2010s.2%207.7%2010%207.7%2010-.9%2010-7.7-.2-7.7-10-7.7zm3.2%208l-4.5%202.1c-.4.2-.7%200-.7-.4V8c0-.4.3-.6.7-.5l4.5%202.1c.4.2.4.5%200%20.7z%22%2F%3E%3C%2Fsvg%3E');
}
.social-icon--instagram {
background-color: #2d80a9;
}
.social-icon--instagram::after {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M17%201H3c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h14c1.1%200%202-.9%202-2V3c0-1.1-.9-2-2-2zm-7%2014.5c3.1%200%205.5-2.5%205.5-5.5%200-.3%200-.7-.1-1H17v7.2c0%20.4-.3.7-.7.7H3.7c-.4%200-.7-.3-.7-.7V9h1.5c-.1.3-.1.6-.1%201%200%203%202.5%205.5%205.6%205.5zM6.5%2010c0-1.9%201.6-3.5%203.5-3.5S13.5%208%2013.5%2010s-1.6%203.5-3.5%203.5c-1.9-.1-3.5-1.6-3.5-3.5zm9.8-4h-1.6c-.4%200-.7-.3-.7-.7V3.7c0-.4.3-.7.7-.7h1.6c.4%200%20.7.3.7.7v1.6c0%20.4-.3.7-.7.7z%22%2F%3E%3C%2Fsvg%3E');
}
.social-icon--linkedin {
background-color: #0976b4;
}
.social-icon--linkedin::after {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M6%206h2.8v1.4c.4-.7%201.3-1.4%202.7-1.4%202.9%200%203.5%201.8%203.5%204.2V15h-2.9v-4.3c0-1%200-2.3-1.5-2.3s-1.7%201.1-1.7%202.3V15H6V6zM1%206h3v9H1V6zM4%203.5C4%204.3%203.3%205%202.5%205S1%204.3%201%203.5%201.7%202%202.5%202%204%202.7%204%203.5z%22%2F%3E%3C%2Fsvg%3E');
}
.social-icon--tumblr {
background-color: #548096;
}
.social-icon--tumblr::after {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M9%207v3.7c0%20.9%200%201.5.1%201.7.1.3.3.5.6.7.4.2.8.3%201.2.3.8%200%201.3-.1%202.1-.6v2.4c-.7.3-1.3.5-1.8.6-.6.1-1.2.2-1.8.2-.7%200-1.2-.1-1.7-.3-.6-.2-1-.4-1.4-.8-.4-.3-.7-.7-.8-1.1s-.2-.9-.2-1.7V6.6H3V4.3c.6-.2%201.3-.5%201.8-.9.4-.4.8-.8%201.1-1.4.3-.5.5-1.2.6-2H9v4h4v3H9z%22%2F%3E%3C%2Fsvg%3E');
}
.social-icon--email {
background-color: #81b8db;
}
.social-icon--email::after {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20612%20792%22%3E%3Cg%20fill%3D%22%23FFF%22%3E%3Cpath%20d%3D%22M306%20483.4l-75.7-66.3L13.8%20602.7c7.9%207.3%2018.5%2011.8%2030.2%2011.8h524c11.7%200%2022.3-4.5%2030.1-11.8L381.7%20417.2%20306%20483.4z%22%2F%3E%3Cpath%20d%3D%22M598.2%20189.3c-7.9-7.3-18.4-11.8-30.2-11.8H44c-11.7%200-22.3%204.5-30.1%2011.9L306%20439.7l292.2-250.4zM0%20215.8V579l211.3-179.5M400.7%20399.5L612%20579V215.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
width: 70%;
padding-bottom: 70%;
}
.social-icon--snapchat {
background-color: #fffc00;
}
.social-icon--snapchat::after {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20485.9%22%3E%3Cpath%20fill%3D%22%23FFF%22%20stroke%3D%22%23000%22%20stroke-width%3D%2210%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M407.7%20200.4c5.9-1.5%2011.4-5.3%2017.2-5.5%208.9-.2%2018.8-.3%2026.4%203.4%2013.1%206.5%2014.1%2020.8%202.2%2029.4-9.6%206.9-21.1%2011.4-32.3%2015.7-24.9%209.6-28.2%2016.8-15.6%2040.4%2020.8%2039%2050%2068.1%2094.7%2078.8%204.6%201.1%2012%206.2%2011.8%208.9-.5%206.1-3.5%2015.1-8.1%2017.2-15%207-30.9%2013-47.1%2016.5-10.1%202.1-13.9%205.8-16%2015.3-4.5%2020-8.5%2022.5-27.9%2018.6-30.9-6.2-58-.9-84.3%2018.1-53.2%2038.4-92.7%2038.3-145.7-.2-25.8-18.8-52.6-24.1-83-17.8-20.4%204.2-23.9%201.7-28.8-19-2-8.5-5.2-12.9-15.1-14.7-15.3-2.9-30.7-7.9-44.8-14.6-5.6-2.7-10.2-11.8-11.3-18.4-.4-2.8%209.1-9%2015-10.7%2048.1-13.1%2077.3-46%2097-89.6%204.6-10.3.7-17.6-7.8-22.4-7.6-4.2-16.2-6.6-24.4-10-5.1-2.2-10.4-4.3-15.1-7.2-9.6-5.9-17.6-13.2-12.1-26%204.5-10.4%2019.4-16%2031.1-12.2%206.6%202.1%2013.1%204.8%2019.9%206.3%208.8%201.9%2013.8-.6%2013.5-11.5-.8-24.6-2.2-49.4-.2-73.9%204.2-51.8%2034.5-86%2081.1-104.1C265.4-15%20345.8%204.8%20382.1%2069.9c12.7%2022.9%2014.7%2047.6%2015.7%2072.8-1%2015.8-1.8%2031.6-3.1%2047.4-.7%2010.3%204.7%2012.4%2013%2010.3z%22%2F%3E%3C%2Fsvg%3E');
}