includes/index/style.html - Issue 29499714: Issue 4912 - Update media coverage links on eyeo.com

Side by Side Diff

Use n/p to move between diff chunks; N/P to move between comments.

Keyboard Shortcuts

	File
u :	up to issue
m :	publish + mail comments
M :	edit review message
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line
<Enter> :	respond to / edit current comment
d :	mark current comment as done

	Issue
u :	up to list of issues
m :	publish + mail comments
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue
# :	close issue

	Comment/message editing
<Ctrl> + s or <Ctrl> + Enter :	save comment
<Esc> :	cancel edit

Side by Side Diff: includes/index/style.html

Issue 29499714: Issue 4912 - Update media coverage links on eyeo.com (Closed) Base URL: https://hg.adblockplus.org/web.eyeo.com

Patch Set: Refactor alternative text and title for media coverage links Created Aug. 2, 2017, 10:33 a.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

View unified diff | Download patch

OLD	NEW
(Empty)
	1 <style>

	2

	3 #media

	4 {

	5 text-align: center;

	6 }

	7

	8 #media-links

	9 {

	10 list-style: none;

	11 padding: 0;

	12 margin-bottom: 0;

	13 }

	14

	15 #media-links li

	16 {

	17 display: inline-block;

	18 position: relative;

	19 margin: 0px 10px 20px;

	20 }

	21

	22 .publisher-logo

	23 {

	24 max-height: 25px;

	25 max-width: 100%;

	26 }

	27

	28 .external-link-icon
	juliandoucette 2017/08/02 20:31:13 NIT: I think you could center this icon by positio NIT: I think you could center this icon by positioning [top/left: 0, height/width: 100%, line-height: 25px (100%), text-align: center]. And that would properly center the alt text without overflowing if the image fails to load.
	29 {

	30 position: absolute;

	31 top: 50%;

	32 left: 50%;

	33 height: 20px;

	34 width: 20px;

	35 margin-left: -10px;

	36 margin-top: -12px;

	37 opacity: 0;

	38 }

	39

	40 #media-links a:hover .external-link-icon,

	41 #media-links a:focus .external-link-icon

	42 {

	43 opacity: 1;

	44 }

	45

	46 #media-links a:hover .publisher-logo,

	47 #media-links a:focus .publisher-logo

	48 {

	49 opacity: 0.2;
	juliandoucette 2017/08/02 20:31:13 NIT: It may be hard to see the external link icon NIT: It may be hard to see the external link icon at this opacity. Here are a few things that may help: - Add a white background to the image via CSS (so that the alt text has a white background too if the image doesn't load) - Change this opacity to 0.1 (I'm not sure about this. I think we want people who can't see well to see the effect as well as possible. And 0.1 may may the fade out too hard to see.)
	50 }

	51

	52 #media small

	53 {

	54 display: block;

	55 margin-bottom: 1em;

	56 }

	57

	58 @media (min-width: 620px) and (max-width: 930px)

	59 {

	60 #media-links

	61 {

	62 max-width: 600px;

	63 margin-right: auto;

	64 margin-left: auto;

	65 }

	66 }

	67

	68 @media (min-width: 930px)

	69 {

	70 #media small

	71 {

	72 display: none;

	73 }

	74 }

	75

	76 </style>

OLD	NEW

« includes/index/media.tmpl ('K') | « includes/index/media.tmpl ('k') | pages/index.html » ('j') | no next file with comments »