Index: includes/index/style.html |
=================================================================== |
new file mode 100644 |
--- /dev/null |
+++ b/includes/index/style.html |
@@ -0,0 +1,49 @@ |
+<style> |
+ |
+#media-links |
+{ |
+ text-align: center; |
+} |
+ |
+#media-links img |
+{ |
+ max-height: 30px; |
+ 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
|
+} |
+ |
+#media-links a |
+{ |
+ display: inline-block; |
+ position: relative; |
+ margin: 0px 10px 20px; |
+} |
+ |
+#media-links a:after, |
+#media-links a:after |
+{ |
+ content: ""; |
+ background-image: url("/images/icon-external-link.svg"); |
+ 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
|
+ position: absolute; |
+ top: 50%; |
+ left: 50%; |
+ height: 20px; |
+ width: 20px; |
+ margin-left: -10px; |
+ margin-top: -12px; |
+ opacity: 0; |
+} |
+ |
+#media-links a:hover:after, |
+#media-links a:focus:after |
+{ |
+ opacity: 1; |
+} |
+ |
+#media-links a:hover img, |
+#media-links a:focus img |
+{ |
+ opacity: 0.2; |
+} |
+ |
+</style> |