Skip to content
This repository was archived by the owner on Nov 12, 2024. It is now read-only.

Commit 4486850

Browse files
informatykgosiainformatykgosia
committed
social icons
1 parent c199efb commit 4486850

File tree

5 files changed

+128
-2
lines changed

5 files changed

+128
-2
lines changed

‎stylesheets/config/_variables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ $font-secondary: 'Lato', 'Helvetica', sans-serif;
1515

1616
// colors
1717
$dark: #800e32;
18-
$main-accent: #ed145b;
18+
$main-accent: #ff5d56;
1919
$bg-primary: #ffffff;
2020
$bg-secondary: #fff9f5;
2121

‎stylesheets/main/_page-styles.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ fieldset {
7777
}
7878

7979
.output-box {
80-
margin: 1.5em 0 2em;
80+
margin: 1.5em 0 1em;
8181
padding: 1em 1.5em;
8282
border: 1px solid $main-accent;
8383
font-size: 1.1em;

‎stylesheets/main/_sharing-btns.scss

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
.resp-sharing-button__link,
2+
.resp-sharing-button__icon {
3+
display: inline-block
4+
}
5+
6+
.resp-sharing-button__link {
7+
text-decoration: none;
8+
color: #fff;
9+
margin: 0 0.5em 2em 0
10+
}
11+
12+
.resp-sharing-button {
13+
border-radius: $border-radius;
14+
transition: 25ms ease-out;
15+
padding: 0.6em 0.75em 0.4em;
16+
font-family: Helvetica Neue,Helvetica,Arial,sans-serif
17+
}
18+
19+
.resp-sharing-button__icon svg {
20+
width: 1em;
21+
height: 1em
22+
}
23+
24+
.resp-sharing-button span {
25+
padding-left: 0.4em
26+
}
27+
28+
/* Solid icons get a fill */
29+
.resp-sharing-button__icon--solid,
30+
.resp-sharing-button__icon--solidcircle {
31+
fill: #fff;
32+
stroke: none
33+
}
34+
35+
.resp-sharing-button--twitter {
36+
background-color: #55acee
37+
}
38+
39+
.resp-sharing-button--twitter:hover {
40+
background-color: #2795e9
41+
}
42+
43+
.resp-sharing-button--pinterest {
44+
background-color: #bd081c
45+
}
46+
47+
.resp-sharing-button--pinterest:hover {
48+
background-color: #8c0615
49+
}
50+
51+
.resp-sharing-button--facebook {
52+
background-color: #3b5998
53+
}
54+
55+
.resp-sharing-button--facebook:hover {
56+
background-color: #2d4373
57+
}
58+
59+
.resp-sharing-button--facebook {
60+
background-color: #3b5998;
61+
border-color: #3b5998;
62+
}
63+
64+
.resp-sharing-button--facebook:hover,
65+
.resp-sharing-button--facebook:active {
66+
background-color: #2d4373;
67+
border-color: #2d4373;
68+
}
69+
70+
.resp-sharing-button--twitter {
71+
background-color: #55acee;
72+
border-color: #55acee;
73+
}
74+
75+
.resp-sharing-button--twitter:hover,
76+
.resp-sharing-button--twitter:active {
77+
background-color: #2795e9;
78+
border-color: #2795e9;
79+
}
80+
81+
.resp-sharing-button--pinterest {
82+
background-color: #bd081c;
83+
border-color: #bd081c;
84+
}
85+
86+
.resp-sharing-button--pinterest:hover,
87+
.resp-sharing-button--pinterest:active {
88+
background-color: #8c0615;
89+
border-color: #8c0615;
90+
}

‎stylesheets/style.scss

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@import 'main/layout';
88
@import 'main/footer';
99
@import 'main/page-styles';
10+
@import 'main/sharing-btns';
1011

1112
body {
1213
background-color: $bg-primary;

‎views/index.erb

+35
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,42 @@
5555
<div id="output" class="output-box" role="region" aria-live="polite">
5656
<%= @generated %>
5757
</div>
58+
<!-- Sharingbutton Facebook -->
59+
<a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io" target="_blank" aria-label="">
60+
<div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
61+
<svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
62+
<g>
63+
<path d="M18.768,7.465H14.5V5.56c0-0.896,0.594-1.105,1.012-1.105s2.988,0,2.988,0V0.513L14.171,0.5C10.244,0.5,9.5,3.438,9.5,5.32 v2.145h-3v4h3c0,5.212,0,12,0,12h5c0,0,0-6.85,0-12h3.851L18.768,7.465z"/>
64+
</g>
65+
</svg>
66+
</div>
67+
</div>
68+
</a>
69+
70+
<!-- Sharingbutton Twitter -->
71+
<a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&amp;url=http%3A%2F%2Fsharingbuttons.io" target="_blank" aria-label="">
72+
<div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
73+
<svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
74+
<g>
75+
<path d="M23.444,4.834c-0.814,0.363-1.5,0.375-2.228,0.016c0.938-0.562,0.981-0.957,1.32-2.019c-0.878,0.521-1.851,0.9-2.886,1.104 C18.823,3.053,17.642,2.5,16.335,2.5c-2.51,0-4.544,2.036-4.544,4.544c0,0.356,0.04,0.703,0.117,1.036 C8.132,7.891,4.783,6.082,2.542,3.332C2.151,4.003,1.927,4.784,1.927,5.617c0,1.577,0.803,2.967,2.021,3.782 C3.203,9.375,2.503,9.171,1.891,8.831C1.89,8.85,1.89,8.868,1.89,8.888c0,2.202,1.566,4.038,3.646,4.456 c-0.666,0.181-1.368,0.209-2.053,0.079c0.579,1.804,2.257,3.118,4.245,3.155C5.783,18.102,3.372,18.737,1,18.459 C3.012,19.748,5.399,20.5,7.966,20.5c8.358,0,12.928-6.924,12.928-12.929c0-0.198-0.003-0.393-0.012-0.588 C21.769,6.343,22.835,5.746,23.444,4.834z"/>
76+
</g>
77+
</svg>
78+
</div>
79+
</div>
80+
</a>
81+
82+
<!-- Sharingbutton Pinterest -->
83+
<a class="resp-sharing-button__link" href="https://pinterest.com/pin/create/button/?url=http%3A%2F%2Fsharingbuttons.io&amp;media=http%3A%2F%2Fsharingbuttons.io&amp;summary=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking." target="_blank" aria-label="">
84+
<div class="resp-sharing-button resp-sharing-button--pinterest resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
85+
<svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
86+
<path d="M12.137,0.5C5.86,0.5,2.695,5,2.695,8.752c0,2.272,0.8 ,4.295,2.705,5.047c0.303,0.124,0.574,0.004,0.661-0.33 c0.062-0.231,0.206-0.816,0.271-1.061c0.088-0.331,0.055-0.446-0.19-0.736c-0.532-0.626-0.872-1.439-0.872-2.59 c0-3.339,2.498-6.328,6.505-6.328c3.548,0,5.497,2.168,5.497,5.063c0,3.809-1.687,7.024-4.189,7.024 c-1.382,0-2.416-1.142-2.085-2.545c0.397-1.675,1.167-3.479,1.167-4.688c0-1.081-0.58-1.983-1.782-1.983 c-1.413,0-2.548,1.461-2.548,3.42c0,1.247,0.422,2.09,0.422,2.09s-1.445,6.126-1.699,7.199c-0.505,2.137-0.076,4.756-0.04,5.02 c0.021,0.157,0.224,0.195,0.314,0.078c0.13-0.171,1.813-2.25,2.385-4.325c0.162-0.589,0.929-3.632,0.929-3.632 c0.459,0.876,1.801,1.646,3.228,1.646c4.247,0,7.128-3.871,7.128-9.053C20.5,4.15,17.182,0.5,12.137,0.5z"/>
87+
</svg>
88+
</div>
89+
</div>
90+
</a>
5891
</section>
92+
93+
5994
</div>
6095
<footer role="contentinfo">
6196
<p>

0 commit comments

Comments
 (0)