Left: | ||
Right: |
OLD | NEW |
---|---|
(Empty) | |
1 <style> | |
2 | |
3 #media-links | |
4 { | |
5 text-align: center; | |
6 } | |
7 | |
8 #media-links img | |
9 { | |
10 max-height: 30px; | |
11 max-width: 100%; | |
juliandoucette
2017/07/31 20:00:28
What does this do?
ire
2017/08/01 10:04:05
On smaller screens, the image shouldn't expand pas
| |
12 } | |
13 | |
14 #media-links a | |
15 { | |
16 display: inline-block; | |
17 position: relative; | |
18 margin: 0px 10px 20px; | |
19 } | |
20 | |
21 #media-links a:after, | |
22 #media-links a:after | |
23 { | |
24 content: ""; | |
25 background-image: url("/images/icon-external-link.svg"); | |
26 background-size: 20px; | |
juliandoucette
2017/07/31 20:00:28
NIT: SVG background-image and background-size do n
ire
2017/08/01 10:04:05
Okay. I'm going to change this to using an actual
| |
27 position: absolute; | |
28 top: 50%; | |
29 left: 50%; | |
30 height: 20px; | |
31 width: 20px; | |
32 margin-left: -10px; | |
33 margin-top: -12px; | |
34 opacity: 0; | |
35 } | |
36 | |
37 #media-links a:hover:after, | |
38 #media-links a:focus:after | |
39 { | |
40 opacity: 1; | |
41 } | |
42 | |
43 #media-links a:hover img, | |
44 #media-links a:focus img | |
45 { | |
46 opacity: 0.2; | |
47 } | |
48 | |
49 </style> | |
OLD | NEW |