Merge pull request #102 from AyuntamientoMadrid/debates

Debates

app/assets/fonts/icons.svg

@@ -12,11 +12,10 @@
 <glyph unicode="&#99;" d="M335 238c0-3-1-5-3-7l-133-133c-2-2-5-3-7-3-2 0-5 1-7 3l-14 14c-2 2-3 4-3 7 0 2 1 5 3 6l112 113-112 112c-2 2-3 4-3 7 0 2 1 4 3 6l14 14c2 2 5 3 7 3 2 0 5-1 7-3l133-133c2-2 3-4 3-6z"/>
 <glyph unicode="&#100;" d="M399 174c0-3-1-5-3-7l-15-14c-1-2-4-3-6-3-3 0-5 1-7 3l-112 112-112-112c-2-2-4-3-7-3-2 0-5 1-6 3l-15 14c-2 2-3 4-3 7 0 2 1 4 3 6l133 133c2 2 5 3 7 3 2 0 5-1 7-3l133-133c2-2 3-4 3-6z"/>
 <glyph unicode="&#101;" d="M201 402c-29 0-56-5-82-15-25-9-45-23-60-40-15-17-22-35-22-54 0-16 5-31 15-46 10-14 24-27 42-37l28-16-10-24c6 4 12 7 18 11l12 9 15-3c15-3 30-4 44-4 29 0 57 5 82 15 25 10 45 23 60 40 15 17 23 35 23 55 0 19-8 37-23 54-15 17-35 31-60 40-25 10-53 15-82 15z m0 37c37 0 70-7 101-20 31-13 56-31 73-53 18-22 27-47 27-73 0-27-9-51-27-74-17-22-42-40-73-53-31-13-64-20-101-20-16 0-33 2-50 5-24-17-50-29-80-37-6-1-15-3-24-4l-1 0c-2 0-4 0-6 2-2 2-3 4-3 6 0 1 0 1 0 2 0 1 0 1 0 2 0 0 0 1 0 1l1 2c0 0 0 0 1 1 1 1 1 2 1 2 0 0 1 0 1 1 1 1 2 2 2 2 1 1 3 3 6 7 4 3 6 6 8 8 1 2 3 5 6 8 3 4 5 8 7 11 2 4 4 8 6 13-24 14-42 31-56 51-13 20-20 41-20 64 0 26 9 51 27 73 18 22 42 40 73 53 31 13 65 20 101 20z m235-334c2-5 4-9 6-13 2-4 4-7 7-11 3-3 5-6 6-8 2-2 4-5 8-8 3-4 5-6 6-8 1 0 1 0 2-1 0-1 1-1 1-1 0-1 1-1 1-2 0 0 1-1 1-1l1-2c0 0 0 0 0-1 1-2 1-2 0-2 0 0 0-1 0-2 0-3-2-5-4-6-1-2-4-3-6-2-9 1-18 2-24 4-30 8-56 20-80 37-17-3-34-5-50-5-52 0-97 13-135 38 11-1 19-1 25-1 31 0 60 4 88 13 29 8 54 20 76 36 24 18 42 38 55 61 12 23 19 47 19 73 0 14-2 29-7 43 25-14 44-30 59-51 14-20 21-42 21-66 0-22-7-44-20-64-14-20-32-36-56-50z"/>
-<glyph unicode="&#102;" d="M110 128c0 5-2 9-6 13-3 3-8 5-13 5-5 0-9-2-12-5-4-4-6-8-6-13 0-5 2-9 6-13 3-3 7-5 12-5 5 0 10 2 13 5 4 4 6 8 6 13z m329 165c0 9-4 18-11 25-8 7-16 11-26 11l-100 0c0 11 4 26 13 46 10 19 14 34 14 46 0 18-3 32-9 41-6 9-18 13-37 13-5-5-8-13-10-24-3-11-6-23-9-36-4-12-9-23-17-31-4-4-12-13-22-26-1-1-3-4-7-9-3-4-6-8-9-11-2-3-5-7-10-12-4-5-8-10-11-13-3-3-7-7-11-10-4-4-8-6-11-8-4-2-8-2-11-2l-9 0 0-183 9 0c3 0 6-1 9-1 4-1 7-1 10-2 3-1 6-2 11-3 4-2 8-3 10-3 2-1 5-2 10-4 4-2 7-3 8-3 40-14 73-21 98-21l34 0c37 0 55 16 55 48 0 5 0 10-1 16 6 3 10 8 13 15 4 7 5 14 5 21 0 7-1 13-5 20 10 9 15 20 15 34 0 4-1 10-2 15-2 6-5 11-8 14 7 0 12 5 16 13 4 9 6 17 6 24z m36 0c0-17-4-33-14-47 2-6 3-13 3-19 0-15-4-29-11-42 1-4 1-8 1-12 0-19-6-36-17-51 0-26-8-47-24-62-17-16-38-23-65-23l-37 0c-18 0-36 2-54 6-18 4-39 11-62 19-22 7-35 11-40 11l-82 0c-10 0-19 4-26 11-7 7-10 16-10 26l0 183c0 10 3 18 10 25 7 8 16 11 26 11l78 0c7 5 20 19 40 44 11 15 21 27 30 37 5 5 8 13 10 24 2 12 5 24 9 37 4 12 10 22 18 30 7 7 16 11 25 11 16 0 31-3 44-9 12-6 22-16 29-29 6-13 10-31 10-53 0-18-5-36-14-55l50 0c20 0 37-8 52-22 14-14 21-32 21-51z"/>
-<glyph unicode="&#103;" d="M110 384c0 5-2 9-6 13-3 3-8 5-13 5-5 0-9-2-12-5-4-4-6-8-6-13 0-5 2-9 6-13 3-3 7-5 12-5 5 0 10 2 13 5 4 4 6 8 6 13z m329-165c0 7-2 15-6 24-4 8-9 13-16 13 3 3 6 8 8 14 1 5 2 11 2 15 0 14-5 25-15 34 4 7 5 13 5 20 0 7-1 14-5 21-3 7-7 12-13 15 1 6 1 11 1 16 0 16-4 28-14 36-9 8-22 12-39 12l-36 0c-25 0-58-7-98-21-1 0-4-1-8-3-5-2-8-3-10-4-2 0-6-1-10-3-5-1-8-2-11-3-3-1-6-1-10-2-3 0-6-1-9-1l-9 0 0-183 9 0c3 0 7 0 11-2 3-2 7-4 11-8 4-3 8-7 11-10 3-3 7-8 11-13 5-5 8-9 10-12 3-3 6-7 9-11 4-5 6-8 7-9 10-13 18-22 22-26 8-8 13-19 17-31 3-13 6-25 9-36 2-11 5-19 10-24 19 0 31 4 37 13 6 9 9 23 9 41 0 12-4 27-14 46-9 20-13 35-13 46l100 0c10 0 18 4 26 11 7 7 11 16 11 25z m36 0c0-19-7-37-21-51-15-14-32-22-52-22l-50 0c9-19 14-37 14-55 0-22-4-40-10-53-7-13-17-23-29-29-13-6-28-9-44-9-9 0-18 4-25 11-7 6-12 14-16 23-4 9-6 18-7 26-1 8-3 16-5 24-2 8-5 14-9 18-9 10-19 22-30 37-20 25-33 39-40 44l-78 0c-10 0-19 3-26 11-7 7-10 15-10 25l0 183c0 10 3 19 10 26 7 7 16 11 26 11l82 0c5 0 18 4 40 11 24 9 45 15 64 19 18 4 37 6 57 6l32 0c26 0 48-7 64-22 17-15 25-36 25-62l0-1c11-15 17-32 17-51 0-4 0-8-1-12 7-13 11-27 11-42 0-6-1-13-3-19 10-14 14-30 14-47z"/>
-<glyph unicode="&#104;" d="M481 395c-13-18-28-34-46-47 0-3 0-7 0-12 0-25-3-50-11-74-7-25-18-49-33-71-14-23-32-43-52-61-21-17-45-31-74-41-29-11-60-16-92-16-52 0-99 14-142 42 7-1 14-2 22-2 43 0 81 14 115 40-20 0-38 6-54 18-16 12-27 27-33 46 7-1 13-2 18-2 8 0 16 1 24 4-21 4-39 15-53 31-14 17-21 37-21 59l0 1c13-7 27-11 42-11-13 8-23 19-30 32-8 14-11 29-11 44 0 17 4 33 12 47 23-28 51-51 84-68 33-17 69-27 107-29-2 8-3 15-3 22 0 25 9 47 27 65 18 18 40 27 66 27 26 0 49-10 67-29 21 4 40 11 59 22-7-22-21-39-41-51 18 2 35 7 53 14z"/>
-<glyph unicode="&#105;" d="M238 421l0-202c0-19-4-38-12-56-8-18-18-34-31-47-13-13-29-24-47-31-18-8-37-12-57-12l-18 0c-5 0-9 2-13 6-3 3-5 7-5 12l0 37c0 5 2 9 5 13 4 3 8 5 13 5l18 0c21 0 38 7 52 22 14 14 22 31 22 51l0 10c0 7-3 14-8 19-6 5-12 8-20 8l-64 0c-15 0-28 5-39 16-10 11-16 24-16 39l0 110c0 15 6 28 16 38 11 11 24 16 39 16l110 0c15 0 28-5 39-16 10-10 16-23 16-38z m256 0l0-202c0-19-4-38-12-56-8-18-18-34-31-47-13-13-29-24-47-31-18-8-37-12-57-12l-18 0c-5 0-9 2-13 6-3 3-5 7-5 12l0 37c0 5 2 9 5 13 4 3 8 5 13 5l18 0c21 0 38 7 52 22 14 14 22 31 22 51l0 10c0 7-3 14-8 19-6 5-12 8-20 8l-64 0c-15 0-28 5-39 16-10 11-16 24-16 39l0 110c0 15 6 28 16 38 11 11 24 16 39 16l110 0c15 0 28-5 39-16 10-10 16-23 16-38z"/>
-<glyph unicode="&#106;" d="M55 37l402 0 0 292-402 0z m110 347l0 82c0 3-1 5-3 7-2 2-4 2-7 2l-18 0c-3 0-5 0-6-2-2-2-3-4-3-7l0-82c0-3 1-5 3-7 1-1 3-2 6-2l18 0c3 0 5 1 7 2 2 2 3 4 3 7z m219 0l0 82c0 3-1 5-3 7-1 2-3 2-6 2l-18 0c-3 0-5 0-7-2-2-2-3-4-3-7l0-82c0-3 1-5 3-7 2-1 4-2 7-2l18 0c3 0 5 1 6 2 2 2 3 4 3 7z m110 18l0-365c0-10-4-19-11-26-7-7-16-11-26-11l-402 0c-10 0-19 4-26 11-7 7-11 16-11 26l0 365c0 10 4 19 11 26 7 7 16 11 26 11l36 0 0 27c0 13 5 24 14 33 9 9 20 13 32 13l18 0c13 0 24-4 33-13 9-9 13-20 13-33l0-27 110 0 0 27c0 13 4 24 13 33 9 9 20 13 33 13l18 0c12 0 23-4 32-13 9-9 14-20 14-33l0-27 36 0c10 0 19-4 26-11 7-7 11-16 11-26z"/>
-<glyph unicode="&#107;" d="M320 347c0-2-1-4-3-6-2-2-4-3-6-3-3 0-5 1-7 3-1 2-2 4-2 6 0 9-5 16-16 21-10 4-20 7-30 7-2 0-5 1-6 3-2 1-3 4-3 6 0 2 1 5 3 6 1 2 4 3 6 3 10 0 19-1 28-4 10-3 18-9 25-16 7-7 11-16 11-26z m46 0c0 14-4 27-10 39-7 12-15 21-26 29-10 7-22 13-35 17-13 5-26 7-39 7-13 0-26-2-39-7-13-4-25-10-35-17-11-8-19-17-26-29-6-12-10-25-10-39 0-19 7-36 20-51 2-2 5-5 8-9 4-5 7-8 9-10 25-29 38-57 40-85l66 0c2 28 15 56 40 85 2 2 5 5 9 10 3 4 6 7 8 9 13 15 20 32 20 51z m36 0c0-29-10-55-29-76-9-9-16-18-21-25-6-7-12-16-17-27-6-11-9-21-10-31 9-5 13-13 13-23 0-7-2-14-7-19 5-5 7-11 7-18 0-10-4-18-13-23 3-5 4-9 4-14 0-8-3-15-9-20-6-5-13-7-22-7-4-8-10-15-17-20-8-5-16-7-25-7-9 0-17 2-25 7-7 5-13 12-17 20-9 0-16 2-22 7-6 5-9 12-9 20 0 5 1 9 4 14-9 5-13 13-13 23 0 7 2 13 7 18-5 5-7 12-7 19 0 10 4 18 13 23-1 10-4 20-10 31-5 11-11 20-17 27-5 7-12 16-21 25-19 21-29 47-29 76 0 19 4 37 12 53 9 16 20 30 34 41 14 10 29 19 47 25 17 6 35 9 53 9 18 0 36-3 53-9 18-6 33-15 47-25 14-11 25-25 34-41 8-16 12-34 12-53z"/>
-<glyph unicode="&#108;" d="M238 238l0-110c0-15-6-28-16-39-11-11-24-16-39-16l-110 0c-15 0-28 5-39 16-10 11-16 24-16 39l0 201c0 20 4 39 12 57 8 18 18 33 31 47 13 13 29 23 47 31 18 8 37 11 57 11l18 0c5 0 9-1 13-5 3-4 5-8 5-13l0-36c0-5-2-10-5-13-4-4-8-6-13-6l-18 0c-21 0-38-7-52-21-14-14-22-32-22-52l0-9c0-8 3-14 8-19 6-6 12-8 20-8l64 0c15 0 28-6 39-16 10-11 16-24 16-39z m256 0l0-110c0-15-6-28-16-39-11-11-24-16-39-16l-110 0c-15 0-28 5-39 16-10 11-16 24-16 39l0 201c0 20 4 39 12 57 8 18 18 33 31 47 13 13 29 23 47 31 18 8 37 11 57 11l18 0c5 0 9-1 13-5 3-4 5-8 5-13l0-36c0-5-2-10-5-13-4-4-8-6-13-6l-18 0c-21 0-38-7-52-21-14-14-22-32-22-52l0-9c0-8 3-14 8-19 6-6 12-8 20-8l64 0c15 0 28-6 39-16 10-11 16-24 16-39z"/>
+<glyph unicode="&#102;" d="M481 395c-13-18-28-34-46-47 0-3 0-7 0-12 0-25-3-50-11-74-7-25-18-49-33-71-14-23-32-43-52-61-21-17-45-31-74-41-29-11-60-16-92-16-52 0-99 14-142 42 7-1 14-2 22-2 43 0 81 14 115 40-20 0-38 6-54 18-16 12-27 27-33 46 7-1 13-2 18-2 8 0 16 1 24 4-21 4-39 15-53 31-14 17-21 37-21 59l0 1c13-7 27-11 42-11-13 8-23 19-30 32-8 14-11 29-11 44 0 17 4 33 12 47 23-28 51-51 84-68 33-17 69-27 107-29-2 8-3 15-3 22 0 25 9 47 27 65 18 18 40 27 66 27 26 0 49-10 67-29 21 4 40 11 59 22-7-22-21-39-41-51 18 2 35 7 53 14z"/>
+<glyph unicode="&#103;" d="M55 37l402 0 0 292-402 0z m110 347l0 82c0 3-1 5-3 7-2 2-4 2-7 2l-18 0c-3 0-5 0-6-2-2-2-3-4-3-7l0-82c0-3 1-5 3-7 1-1 3-2 6-2l18 0c3 0 5 1 7 2 2 2 3 4 3 7z m219 0l0 82c0 3-1 5-3 7-1 2-3 2-6 2l-18 0c-3 0-5 0-7-2-2-2-3-4-3-7l0-82c0-3 1-5 3-7 2-1 4-2 7-2l18 0c3 0 5 1 6 2 2 2 3 4 3 7z m110 18l0-365c0-10-4-19-11-26-7-7-16-11-26-11l-402 0c-10 0-19 4-26 11-7 7-11 16-11 26l0 365c0 10 4 19 11 26 7 7 16 11 26 11l36 0 0 27c0 13 5 24 14 33 9 9 20 13 32 13l18 0c13 0 24-4 33-13 9-9 13-20 13-33l0-27 110 0 0 27c0 13 4 24 13 33 9 9 20 13 33 13l18 0c12 0 23-4 32-13 9-9 14-20 14-33l0-27 36 0c10 0 19-4 26-11 7-7 11-16 11-26z"/>
+<glyph unicode="&#104;" d="M320 347c0-2-1-4-3-6-2-2-4-3-6-3-3 0-5 1-7 3-1 2-2 4-2 6 0 9-5 16-16 21-10 4-20 7-30 7-2 0-5 1-6 3-2 1-3 4-3 6 0 2 1 5 3 6 1 2 4 3 6 3 10 0 19-1 28-4 10-3 18-9 25-16 7-7 11-16 11-26z m46 0c0 14-4 27-10 39-7 12-15 21-26 29-10 7-22 13-35 17-13 5-26 7-39 7-13 0-26-2-39-7-13-4-25-10-35-17-11-8-19-17-26-29-6-12-10-25-10-39 0-19 7-36 20-51 2-2 5-5 8-9 4-5 7-8 9-10 25-29 38-57 40-85l66 0c2 28 15 56 40 85 2 2 5 5 9 10 3 4 6 7 8 9 13 15 20 32 20 51z m36 0c0-29-10-55-29-76-9-9-16-18-21-25-6-7-12-16-17-27-6-11-9-21-10-31 9-5 13-13 13-23 0-7-2-14-7-19 5-5 7-11 7-18 0-10-4-18-13-23 3-5 4-9 4-14 0-8-3-15-9-20-6-5-13-7-22-7-4-8-10-15-17-20-8-5-16-7-25-7-9 0-17 2-25 7-7 5-13 12-17 20-9 0-16 2-22 7-6 5-9 12-9 20 0 5 1 9 4 14-9 5-13 13-13 23 0 7 2 13 7 18-5 5-7 12-7 19 0 10 4 18 13 23-1 10-4 20-10 31-5 11-11 20-17 27-5 7-12 16-21 25-19 21-29 47-29 76 0 19 4 37 12 53 9 16 20 30 34 41 14 10 29 19 47 25 17 6 35 9 53 9 18 0 36-3 53-9 18-6 33-15 47-25 14-11 25-25 34-41 8-16 12-34 12-53z"/>
+<glyph unicode="&#105;" d="M453 425c-1 9-8 16-17 16l-360 0 0 0c-9 0-16-7-17-16l0 0 0-288 0 0c2-8 9-14 17-14l0 0 59 0 0-35c0-9 8-17 17-17 6 0 11 3 14 8l45 44 225 0c8 0 15 6 17 14l0 0 0 288z m-308-172c-15 0-29 12-29 34 0 25 13 47 34 61l0 0c1 1 1 1 2 1 1 0 1 0 2-1l0 0 14-9 0 0c1 0 1-1 1-3 0-1 0-2-2-3l0 0c0 0 0 0 0 0 0 0 0 0 0 0-10-6-22-19-25-31 2 1 4 1 7 1 13 0 23-10 23-24 0-14-12-26-27-26z m68 0c-15 0-29 12-29 34 0 25 13 47 34 61l0 0c0 1 1 1 2 1 0 0 1 0 2-1l0 0 14-9 0 0c1 0 1-1 1-3 0-1-1-2-2-3l0 0c0 0 0 0 0 0 0 0 0 0 0 0-11-6-22-19-25-31 1 1 4 1 7 1 12 0 22-10 22-24 0-14-12-26-26-26z m81-37l0 0c0 0-1-1-2-1 0 0-1 1-2 1l0 0-14 9 0 0c-1 1-1 2-1 3 0 1 1 3 2 3l0 0c0 0 0 0 0 0 0 0 0 0 0 0 11 6 22 20 25 31-1 0-4-1-7-1-12 0-22 10-22 24 0 15 12 27 26 27 15 0 29-13 29-34 0-25-13-48-34-62z m68 0l0 0c-1 0-1-1-2-1-1 0-1 1-2 1l0 0-14 9 0 0c-1 1-1 2-1 3 0 1 0 3 2 3l0 0c0 0 0 0 0 0 0 0 0 0 0 0 10 6 22 20 25 31-2 0-4-1-7-1-13 0-23 10-23 24 0 15 12 27 27 27 15 0 29-13 29-34 0-25-13-48-34-62z"/>
+<glyph unicode="&#106;" d="M91 347c0-5-1-9-5-12-4-4-8-6-13-6-5 0-9 2-13 6-3 3-5 7-5 12 0 6 2 10 5 13 4 4 8 6 13 6 5 0 9-2 13-6 4-3 5-7 5-13z m46-146l0 183c0 5-2 9-5 13-4 3-8 5-13 5l-82 0c-5 0-10-2-13-5-4-4-6-8-6-13l0-183c0-5 2-9 6-13 3-3 8-5 13-5l82 0c5 0 9 2 13 5 3 4 5 8 5 13z m323 43c10-12 15-26 15-43 0-15-5-28-16-38-11-11-24-17-38-17l-80 0c1-2 2-5 3-7 0-1 2-4 3-6 1-2 2-4 3-5 3-7 6-12 7-16 2-4 4-10 6-17 2-7 3-15 3-22 0-4 0-8 0-11-1-3-1-7-2-13-1-6-2-10-3-14-2-4-4-8-7-13-3-5-7-9-12-12-4-3-10-5-17-7-7-2-15-3-23-3-5 0-10 2-13 5-4 4-7 9-10 15-3 5-4 10-5 15-1 4-3 10-4 17-2 8-3 14-4 17-1 4-2 8-5 14-2 6-5 10-9 14-6 6-16 18-29 34-9 12-19 24-28 35-10 11-18 16-22 17-5 0-9 2-12 5-4 4-6 8-6 13l0 183c0 5 2 9 6 13 3 3 8 5 13 5 6 0 21 5 45 13 15 5 26 9 34 11 9 3 20 5 35 8 15 3 29 5 41 5l37 0c25-1 44-8 56-22 11-14 16-31 14-52 8-7 13-16 16-27 3-12 3-23 0-33 8-12 13-25 12-40 0-6-1-13-4-21z"/>
+<glyph unicode="&#107;" d="M91 128c0 5-1 9-5 13-4 3-8 5-13 5-5 0-9-2-13-5-3-4-5-8-5-13 0-5 2-9 5-13 4-4 8-5 13-5 5 0 9 1 13 5 4 4 5 8 5 13z m46 146l0-183c0-5-2-9-5-12-4-4-8-6-13-6l-82 0c-5 0-10 2-13 6-4 3-6 7-6 12l0 183c0 5 2 10 6 13 3 4 8 6 13 6l82 0c5 0 9-2 13-6 3-3 5-8 5-13z m338 0c0-16-5-30-15-42 3-9 4-16 4-22 1-14-4-28-12-39 3-11 3-22 0-34-3-10-8-19-16-26 2-22-3-39-14-52-12-15-31-22-56-22l-37 0c-12 0-26 1-41 4-15 3-26 6-35 8-8 3-19 7-34 12-24 8-39 12-45 12-5 0-10 2-13 6-4 3-6 7-6 12l0 184c0 4 2 8 6 12 3 4 7 5 12 6 4 0 12 6 22 17 9 11 19 22 28 34 13 17 23 28 29 35 4 3 7 8 9 13 3 6 4 11 5 14 1 4 2 9 4 17 1 8 3 14 4 18 1 4 2 9 5 15 3 5 6 10 10 14 3 4 8 5 13 5 8 0 16-1 23-3 7-2 13-4 17-7 5-3 9-7 12-12 3-4 5-9 7-12 1-4 2-9 3-15 1-5 1-10 2-13 0-2 0-6 0-11 0-7-1-14-3-21-2-8-4-13-5-18-2-4-5-9-8-16-1-1-2-2-3-5-1-2-3-4-3-6-1-2-2-4-3-7l80 0c14 0 27-5 38-16 11-11 16-24 16-39z"/>
 </font></defs></svg>

app/assets/stylesheets/debates.scss

@@ -1,8 +1,6 @@
 // Table of Contents
 //
 // 01. Variables
-//  01.1. Fonts
-//  01.2. Colors
 // 02. Global styles
 // 03. Header
 // 04. Footer
@@ -19,43 +17,7 @@
 // 01. Variables
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-// 01.1. Fonts
-// - - - - - - - - - - - -
-
-$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$line-height: rem-calc(24);
-
-// 01.2. Colors
-// - - - - - - - - - - - -
-
-$background:        #E9E9E9;
-$border:            #DEE0E3;
-$brand:             #0077B9;
-
-$debates:           #008CCF;
-
-$comments-bg:       #F1F1F1;//FAF9F8;
-$comments-info:     #A5B2B9;
-$comments-text:     #3F4549;
-
-
-$header-color:      #292B33;
-$link:              #0077B9;
-
-$tags-bg:           #FAFAFA;
-$tags-border:       #F0F0F0;
-$tags-color:        #8F8F8F;
-
-$text-color:        #222222;
-$text-medium:       #999999;
-$text-light:        #A3A6AD;
-
-$votes:             #A0AEC4;
-$votes-background:  #F0F0F0;
-$votes-border:      #D8D8D8;
-$votes-unlike:      #EF8585;
-$votes-like:        #7BD2A8;
-$votes-text:        #54627C;
+@import "variables";
 
 // 02. Global styles
 // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -66,19 +28,15 @@ $votes-text:        #54627C;
 }
 
 body {
-  background: white;
+  background: $background;
   font-family: $font-family-sans-serif;
   font-size: rem-calc(13);
   font-weight: normal;
   text-rendering: optimizeLegibility;
 }
 
-.row {
-  max-width: 1170px;
-}
-
-.row-full {
-  max-width: 100% !important;
+.button {
+  padding: rem-calc(15) rem-calc(32);
 }
 
 .clear {
@@ -89,6 +47,14 @@ body {
   display: inline-block;
 }
 
+.row {
+  max-width: 1170px;
+}
+
+.row-full {
+  max-width: 100% !important;
+}
+
 ::selection, ::-moz-selection {
   background: $brand;
   color: white;
@@ -126,6 +92,7 @@ header {
 
   .button {
     color: white;
+    font-family: inherit;
     margin-top: $line-height*2;
   }
 }
@@ -195,200 +162,253 @@ header {
 // 05. Debates
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-aside {
-  .button {
-    margin-top: $line-height;
+@mixin votes {
+  border-top: 1px solid $votes-border;
+  padding: rem-calc(14) rem-calc(12);
+  background: $votes-background;
+  margin: 0 -12px;
+
+  .icon-like {
+    background: white;
+    border: 2px solid white;
+    border-radius: rem-calc(3);
+    color: $votes-neutral;
+    display: inline-block;
+    font-size: rem-calc(30);
+    line-height: rem-calc(30);
+    padding: rem-calc(3) rem-calc(6);
+    position: relative;
+    //when active => color: $votes-like;
+
+    &:hover {
+      background: $votes-like;
+      color: white;
+      cursor: pointer;
+    }
+
+    &:active {
+      border-color: $votes-like-act;
+    }
+  }
+
+  .icon-unlike {
+    background: white;
+    border: 2px solid white;
+    border-radius: rem-calc(3);
+    color: $votes-neutral;
+    display: inline-block;
+    font-size: rem-calc(30);
+    line-height: rem-calc(30);
+    padding: rem-calc(3) rem-calc(6);
+    position: relative;
+    //when active => color: $votes-unlike;
+
+    &:hover {
+      background: $votes-unlike;
+      color: white;
+      cursor: pointer;
+    }
+
+    &:active {
+      border-color: $votes-unlike-act;
+    }
+  }
+
+  .like {
+    line-height: rem-calc(48);
+    vertical-align: super;
+
+    span {
+      color: $votes-text;
+      display: inline-block;
+      font-size: rem-calc(16);
+      font-weight: lighter;
+      line-height: $line-height*2;
+      padding-left: rem-calc(8);
+      vertical-align: top;
+    }
+  }
+
+  .unlike {
+    @extend .like;
+  }
+
+  .total-votes {
+    color: $votes-text;
+    float: right;
+    line-height: $line-height*2;
+  }
+
+  .divider {
+    margin: 0 rem-calc(6);
   }
 }
 
 // 05.1. Debates Index
 // - - - - - - - - - - - -
 
-.debates-list {
-  margin-top: $line-height;
-}
+.debate-featured {
+  margin-bottom: rem-calc(34);
+  margin-top: rem-calc(23);
 
-.debates-featured {
+  .panel {
+    background: white;
+    border: 1px solid;
+    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
+    border-radius: rem-calc(3);
+    margin-bottom: $line-height;
+    padding: rem-calc(24) rem-calc(12) 0 rem-calc(12);
 
-  .debate {
+    .debate-content {
+      min-height: $line-height*14.71;
+    }
 
-    .panel {
-      background: white;
-      box-shadow: 0 2px 0 rgba(0,0,0,.1);
-      padding: rem-calc(20) rem-calc(20) 0 rem-calc(20);
+    .label {
+      background: none;
+      clear: both;
+      color: $debates;
+      display: block;
+      font-weight: bold;
+      text-transform: uppercase;
+      padding-left: 0;
+      padding-top: 0;
+    }
 
-      .debate-content {
-        min-height: $line-height*11;
-      }
+    .icon-comment-quotes {
+      color: $debates;
+      font-size: rem-calc(36);
+      line-height: $line-height;
+      position: absolute;
+      right: rem-calc(18);
+      top: rem-calc(24);
+    }
 
-      .label {
-        background: none;
+    h3 {
+      font-weight: bold;
+      margin: rem-calc(8) 0 0 0;
+      min-height: rem-calc(65);
+
+      a {
         clear: both;
-        color: $debates;
+        color: $header-color;
         display: block;
-        font-weight: bold;
-        text-transform: uppercase;
-        padding: 0;
-      }
-
-      .icon-quote-right {
-        color: $debates;
-        font-size: rem-calc(30);
+        font-size: rem-calc(16);
         line-height: $line-height;
-        position: absolute;
-        right: $line-height;
-        top: $line-height/2;
       }
+    }
+
+    .debate-info {
+      color: $text-light;
+      font-weight: lighter;
+      margin-bottom: 0;
 
       .icon-chat-bubble-two {
-        vertical-align: middle;
-      }
-
-      h3 {
-        margin: rem-calc(12) 0 0 0;
-        font-weight: bold;
-
-        a {
-          clear: both;
-          color: $header-color;
-          display: block;
-          font-size: rem-calc(16);
-          line-height: $line-height;
-        }
-      }
-
-      .debate-info {
-        color: $text-light;
-        font-weight: lighter;
-        margin-bottom: 0;
-
-        .icon-chat-bubble-two {
-          font-size: rem-calc(16);
-        }
-      }
-
-      p {
-        color: $text-color;
-        font-size: rem-calc(13);
-        line-height: $line-height;
-        margin-bottom: $line-height/2;
+        font-size: rem-calc(16);
+        vertical-align: top;
       }
     }
 
-    .votes {
-      border-top: 1px solid $votes-border;
-      padding: $line-height/2 0;
-
-      .icon-like {
-        background: $votes-background;
-        border: 1px solid $votes-border;
-        border-radius: rem-calc(3);
-        color: $votes;
-        display: inline-block;
-        font-size: rem-calc(30);
-        line-height: rem-calc(30);
-        padding: rem-calc(6) rem-calc(12);
-        //when active => color: $votes-like;
-
-        &:hover {
-          background: white;
-          color: $brand;
-        }
-      }
-
-      .icon-unlike {
-        background: $votes-background;
-        border: 1px solid $votes-border;
-        border-radius: rem-calc(3);
-        color: $votes;
-        display: inline-block;
-        font-size: rem-calc(30);
-        line-height: rem-calc(30);
-        padding: rem-calc(6) rem-calc(12);
-        //when active => color: $votes-unlike;
-
-        &:hover {
-          background: white;
-          color: $brand;
-        }
-      }
-
-      .like {
-        line-height: rem-calc(48);
-        vertical-align: super;
-
-        span {
-          color: $votes-text;
-          display: inline-block;
-          font-size: rem-calc(18);
-          font-weight: bold;
-          line-height: $line-height*2;
-          padding-left: rem-calc(6);
-          vertical-align: top;
-        }
-      }
-
-      .unlike {
-        @extend .like;
-      }
-
-      .total-votes {
-        color: $votes-text;
-        line-height: $line-height*2;
-      }
-
-      .divider {
-        margin: 0 rem-calc(3);
-      }
+    .debate-description {
+      color: $text-color;
+      font-size: rem-calc(13);
+      height: $line-height*6.5;
+      line-height: $line-height;
+      margin-bottom: $line-height/2;
+      margin-top: $line-height;
+      overflow: hidden;
+      position: relative;
     }
+
+    .truncate {
+      background: url('truncate.png');
+      background-repeat: repeat-x;
+      bottom: 0;
+      height: 24px;
+      position: absolute;
+      width: 100%;
+    }
+
+    p {
+      color: $text-color;
+      font-size: rem-calc(13);
+      line-height: $line-height;
+      margin-bottom: $line-height/2;
+    }
+  }
+
+  .votes {
+    @include votes;
   }
 }
 
-.debates-index {
-  @extend .debates-featured;
+.debates-list {
+  margin-bottom: $line-height*2;
+}
 
-  .debate {
-    margin-bottom: rem-calc(6);
+.debate {
+  @extend .debate-featured;
+  margin-bottom: 0;
+  margin-top: 0;
 
-    .panel {
-      border: 0;
-      box-shadow: none;
-      margin-bottom: 0;
-      padding: 0 rem-calc(6);
+  .panel {
+    margin-bottom: 0;
+    min-height: $line-height*8;
+    padding: 0 rem-calc(12) rem-calc(2) rem-calc(12);
 
-      p {
-        text-align: justify;
-      }
+    &:first-child {
+      padding-top: $line-height;
+    }
 
-      .debate-content {
-        min-height: 0;
-      }
+    .label {
+      line-height: $line-height;
+      padding-bottom: 0;
+    }
 
-      .icon-quote-right {
-        font-size: rem-calc(14);
-        position: initial;
-        vertical-align: bottom;
-      }
+    h3 {
+      margin-top: 0;
+      min-height: $line-height*2;
+    }
 
-      .label {
-        line-height: $line-height;
-        margin-right: rem-calc(5);
+    p {
+      text-align: justify;
+    }
+
+    .debate-content {
+      margin: 0;
+      min-height: 0;
+
+      .tags {
+        display: block;
       }
     }
 
-    .votes {
-      border: 0;
-      margin-top: $line-height;
+    .icon-comment-quotes {
+      font-size: rem-calc(18);
+      left: rem-calc(60);
+      top: 0;
+    }
 
-      .like {
+    .debate-description {
+      height: $line-height*3;
+      margin-top: 0;
+    }
+  }
 
-        span {
-          color: $votes-text;
-          display: block;
-          font-size: rem-calc(18);
-          font-weight: bold;
-          line-height: $line-height*1.5;
-        }
+  .votes {
+    border: 0;
+
+    .total-votes {
+      display: block;
+      float: none;
+      line-height: $line-height;
+    }
+
+    .like {
+
+      span {
+        color: $votes-text;
+        display: block;
+        line-height: $line-height/2;
       }
     }
   }
@@ -452,78 +472,23 @@ aside {
     font-weight: bold;
   }
 
+  h3 {
+    border-bottom: 1px solid $border;
+    font-size: rem-calc(18);
+    margin: 0 0 $line-height 0;
+    text-transform: uppercase;
+  }
+
   .votes {
-    padding-top: 0;
-
-    @media (min-width: 480px) {
-      padding-top: $line-height*1.5;
-    }
-
-    h3 {
-      border-bottom: 1px solid $border;
-      font-size: rem-calc(18);
-      margin: 0 0 $line-height 0;
-      text-transform: uppercase;
-    }
-
-    .icon-like {
-      background: $votes-background;
-      border: 1px solid $votes-border;
-      border-radius: rem-calc(3);
-      color: $votes;
-      display: inline-block;
-      font-size: rem-calc(30);
-      line-height: rem-calc(30);
-      padding: rem-calc(6) rem-calc(12);
-      //when active => color: $votes-like;
-
-      &:hover {
-        background: white;
-        color: $brand;
-      }
-    }
-
-    .icon-unlike {
-      background: $votes-background;
-      border: 1px solid $votes-border;
-      border-radius: rem-calc(3);
-      color: $votes;
-      display: inline-block;
-      font-size: rem-calc(30);
-      line-height: rem-calc(30);
-      padding: rem-calc(6) rem-calc(12);
-      //when active => color: $votes-unlike;
-
-      &:hover {
-        background: white;
-        color: $brand;
-      }
-    }
-
-    .like {
-
-      span {
-        color: $votes-text;
-        display: block;
-        font-size: rem-calc(18);
-        font-weight: bold;
-        line-height: $line-height*1.5;
-      }
-    }
-
-    .unlike {
-      @extend .like;
-    }
+    @include votes;
+    border: 0;
+    margin: 0;
 
     .total-votes {
-      color: $votes-text;
-      font-size: rem-calc(14);
+      display: block;
+      float: none;
       line-height: $line-height;
     }
-
-    .divider {
-      margin: 0 rem-calc(12);
-    }
   }
 
   .leave-comment {
@@ -610,6 +575,7 @@ aside {
     color: $tags-color;
     display: inline-block;
     font-size: rem-calc(13);
+    line-height: rem-calc(22);
     margin-bottom: rem-calc(8);
     margin-right: rem-calc(8);
     padding: 0 rem-calc(6);

app/assets/stylesheets/icons.scss

@@ -52,24 +52,21 @@
 .icon-chat-bubble-two:before {
   content: "e";
 }
-.icon-like:before {
+.icon-twitter:before {
   content: "f";
 }
-.icon-unlike:before {
+.icon-calendar:before {
   content: "g";
 }
-.icon-twitter:before {
+.icon-lightbulb:before {
   content: "h";
 }
-.icon-quote-left:before {
-  content: "l";
-}
-.icon-quote-right:before {
+.icon-comment-quotes:before {
   content: "i";
 }
-.icon-calendar:before {
+.icon-unlike:before {
   content: "j";
 }
-.icon-lightbulb:before {
+.icon-like:before {
   content: "k";
-}
+}

app/assets/stylesheets/variables.scss

@@ -0,0 +1,45 @@
+// Table of Contents
+//
+// 01. Fonts
+// 02. Colors
+//
+
+// 01. Fonts
+// - - - - - - - - - - - -
+
+$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$line-height: rem-calc(24);
+
+// 02. Colors
+// - - - - - - - - - - - -
+
+$background:        #EDEFF0;
+$border:            #DEE0E3;
+$brand:             #0077B9;
+
+$debates:           #008CCF;
+
+$comments-bg:       #F1F1F1;
+$comments-info:     #A5B2B9;
+$comments-text:     #3F4549;
+
+$header-color:      #292B33;
+$link:              #0077B9;
+
+$tags-bg:           #FAFAFA;
+$tags-border:       #F0F0F0;
+$tags-color:        #8F8F8F;
+
+$text-color:        #222222;
+$text-medium:       #999999;
+$text-light:        #A3A6AD;
+
+$votes:             #31708f;
+$votes-background:  #0081B3;
+$votes-border:      #005b80;
+$votes-like:        #7BD2A8;
+$votes-like-act:    #5D9E7F;
+$votes-neutral:		#CCCCCC;
+$votes-text:        #FFFFFF;
+$votes-unlike:      #EF8585;
+$votes-unlike-act:  #BD6A6A;

app/controllers/debates_controller.rb

@@ -9,8 +9,8 @@ class DebatesController < ApplicationController
       @debates = Debate.tagged_with(params[:tag]).order("created_at DESC")
     else
       @debates = Debate.all.order("created_at DESC")
+      @featured_debates = @debates.to_a.shift(3)
     end
-    @featured_debates = @debates.to_a.shift(3)
   end
 
   def show

app/views/debates/_debate.html.erb

@@ -1,25 +1,29 @@
-<div class="debates-index">
-  <div id="debate-<%= debate.id %>" class="debate">
-    <div class="panel">
-      <div class="row">
-        <div class="small-12 medium-9 column">
-          <div class="debate-content">
-            <span class="label left"><%= t("debates.debate.debate") %></span>
-            <i class="icon-quote-right"></i>
-            <h3><%= link_to debate.title, debate %></h3>
-            <p class="debate-info">
-              <i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(debate.comment_threads.count, t("debates.debate.comment"), t("debates.debate.comments")) %>
-            </p>
+<div id="debate-<%= debate.id %>" class="debate">
+  <div class="panel">
+    <div class="row">
+
+      <div class="small-12 medium-9 column">
+        <div class="debate-content">
+          <span class="label left"><%= t("debates.debate.debate") %></span>
+          <i class="icon-comment-quotes"></i>
+          <h3><%= link_to debate.title, debate %></h3>
+          <p class="debate-info">
+            <i class="icon-chat-bubble-two"></i>&nbsp;
+            <%= pluralize(debate.comment_threads.count,
+                t("debates.debate.comment"), t("debates.debate.comments")) %>
+          </p>
+          <div class="debate-description">
             <%= debate.description %>
-            <%= render "shared/tags", debate: debate %>
+            <div class="truncate"></div>
           </div>
+          <%= render "shared/tags", debate: debate %>
         </div>
-
-        <div id="<%= dom_id(debate) %>_votes" class="small-12 medium-3 column">
-          <%= render 'debates/votes_min', debate: debate %>
-        </div>
-
       </div>
+
+      <div id="<%= dom_id(debate) %>_votes" class="small-12 medium-3 column text-center">
+          <%= render 'debates/votes', debate: debate %>
+      </div>
+
     </div>
   </div>
-</div>
+</div>

app/views/debates/_featured_debate.html.erb

@@ -1,27 +1,29 @@
-<div class="small-12 medium-4 column debates-list">
-  <div class="row">
-    <div class="debates-featured">
-      <div id="debate-<%= featured_debate.id %>" class="small-12 column end debate">
-        <div class="panel">
-          <div class="debate-content">
-            <span class="label left"><%= t("debates.debate.debate") %></span>
-            <i class="icon-quote-right right"></i>
+<div class="small-12 medium-4 column">
+  <div id="debate-<%= featured_debate.id %>" class="debate-featured">
+    <div class="panel">
 
-            <h3><%= link_to featured_debate.title, featured_debate %></h3>
-            <p class="debate-info">
-              <i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(featured_debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
-            </p>
-            <p><%= sanitize(truncate(featured_debate.description, length: 200).html_safe) %></p>
-            <p><%= render "shared/tags", debate: featured_debate %></p>
-          </div>
+      <div class="debate-content">
+        <span class="label left"><%= t("debates.debate.debate") %></span>
+        <i class="icon-comment-quotes right"></i>
+        <h3><%= link_to featured_debate.title, featured_debate %></h3>
+        <p class="debate-info">
+          <i class="icon-chat-bubble-two"></i>&nbsp;
+          <%= pluralize(featured_debate.comment_threads.count,
+              t("debates.show.comment"), t("debates.show.comments")) %>
+        </p>
+        <div class="debate-description">
+          <%= featured_debate.description %>
+          <div class="truncate"></div>
+        </div>
+        <%= render "shared/tags", debate: featured_debate %>
+      </div>
 
-          <div class="row votes">
-            <div id="<%= dom_id(featured_debate) %>_votes" class="small-12 column">
-              <%= render 'debates/featured_debate_votes', debate: featured_debate %>
-            </div>
-          </div>
+      <div class="row">
+        <div id="<%= dom_id(featured_debate) %>_votes" class="small-12 column">
+          <%= render 'debates/votes', debate: featured_debate %>
         </div>
       </div>
+
     </div>
   </div>
-</div>
+</div>

app/views/debates/_featured_debate_votes.html.erb

@@ -1,21 +0,0 @@
-<span id="in_favor">
-    <%= link_to vote_debate_path(debate, value: 'yes', partial: 'featured_debate_votes'),
-              class: "like", title: t('votes.agree'), method: "post", remote: true do %>
-    <i class="icon-like"></i>
-    <span><%= percentage('likes', debate) %></span>
-  <% end %>
-</span>
-
-<span class="divider"></span>
-
-<span id="against">
-  <%= link_to vote_debate_path(debate, value: 'no', partial: 'featured_debate_votes'),
-            class: "unlike", title: t('votes.disagree'), method: "post", remote: true do %>
-    <i class="icon-unlike"></i>
-    <span><%= percentage('dislikes', debate) %></span>
-  <% end %>
-</span>
-
-<span class="total-votes right">
-  <%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
-</span>

app/views/debates/_votes.html.erb

@@ -1,27 +1,22 @@
-<div class="small-12 column">
-  <p class="total-votes right">
-    <%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
-  </p>
-
-  <h3><%= t("votes.supports") %></h3>
-
-  <div class="text-center">
-    <div id="in_favor" class="inline-block">
-      <%= link_to vote_debate_path(@debate, value: 'yes', partial: 'votes'),
-                  class: "like", title: t('votes.agree'), method: "post", remote: true do %>
-        <i class="icon-like"></i>
-        <span><%= percentage('likes', @debate) %></span>
-      <% end %>
-    </div>
-
-    <span class="divider"></span>
-
-    <div id="against" class="inline-block">
-      <%= link_to vote_debate_path(@debate, value: 'no', partial: 'votes'),
-                  class: "unlike", title: t('votes.disagree'), method: "post", remote: true do %>
-        <i class="icon-unlike"></i>
-        <span><%= percentage('dislikes', @debate) %></span>
-      <% end %>
-    </div>
+<div class="votes">
+  <div class="in-favor inline-block">
+    <%= link_to vote_debate_path(debate, value: 'yes'),
+        class: "like", title: t('votes.agree'), method: "post", remote: true do %>
+      <i class="icon-like"></i>
+      <span><%= percentage('likes', debate) %></span>
+    <% end %>
   </div>
+
+  <span class="divider"></span>
+
+  <div class="against inline-block">
+    <%= link_to vote_debate_path(debate, value: 'no'), class: "unlike", title: t('votes.disagree'), method: "post", remote: true do %>
+      <i class="icon-unlike"></i>
+      <span><%= percentage('dislikes', debate) %></span>
+    <% end %>
+  </div>
+
+  <span class="total-votes">
+    <%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
+  </span>
 </div>

app/views/debates/_votes_min.html.erb

@@ -1,22 +0,0 @@
-<div class="text-center votes">
-  <span id="in_favor">
-    <%= link_to vote_debate_path(debate, value: 'yes', partial: 'votes_min'),
-            class: "like inline-block", title: t('votes.agree'), method: "post", remote: true do %>
-      <i class="icon-like"></i>
-      <span><%= percentage('likes', debate) %></span>
-    <% end %>
-  </span>
-  <span class="divider"></span>
-
-  <span id="against">
-    <%= link_to vote_debate_path(debate, value: 'no', partial: 'votes_min'),
-             class: "unlike inline-block", title: t('votes.disagree'), method: "post", remote: true do %>
-      <i class="icon-unlike"></i>
-      <span><%= percentage('dislikes', debate) %></span>
-    <% end %>
-  </span>
-  <br>
-  <span class="total-votes">
-    <%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
-  </span>
-</div>

app/views/debates/index.html.erb

@@ -8,7 +8,7 @@
     </div>
     <div class="small-12 medium-3 column">
       <aside role="complementary">
-        <%= link_to t("debates.index.create_debate"), new_debate_path, class: 'button radius' %>
+        <%= link_to t("debates.index.create_debate"), new_debate_path, class: 'button radius expand' %>
         <%= render "shared/tag_cloud" %>
       </aside>
     </div>

app/views/debates/show.html.erb

@@ -10,16 +10,19 @@
       <%= @debate.description %>
       <p><%= render 'shared/tags', debate: @debate %></p>
     </div>
-    <div id="<%= dom_id(@debate) %>_votes" class="votes small-12 medium-3 column">
-      <%= render 'debates/votes' %>
+
+    <div id="<%= dom_id(@debate) %>_votes" class="small-12 medium-3 column">
+      <h3><%= t("votes.supports") %></h3>
       <div class="text-center">
-      <% if user_signed_in? %>
-        <%= link_to t("debates.show.leave_comment"), "#comments", class: "leave-comment" %>
-      <% else %>
-        <%= link_to t("debates.show.login_to_comment"), new_user_session_path, class: "leave-comment" %>
-      <% end %>
+        <%= render 'debates/votes', debate: @debate %>
+        <% if user_signed_in? %>
+          <%= link_to t("debates.show.leave_comment"), "#comments", class: "leave-comment" %>
+        <% else %>
+          <%= link_to t("debates.show.login_to_comment"), new_user_session_path, class: "leave-comment" %>
+        <% end %>
       </div>
     </div>
+
   </div>
 </section>
 

app/views/debates/vote.js.erb

@@ -1 +1 @@
-$("#<%= dom_id(@debate) %>_votes").html('<%= j render("debates/#{params[:partial]}", debate: @debate) %>');
+$("#<%= dom_id(@debate) %>_votes").html('<%= j render("debates/votes", debate: @debate) %>');

spec/features/debates_spec.rb

@@ -8,7 +8,7 @@ feature 'Debates' do
 
     visit debates_path
 
-    expect(page).to have_selector('#featured-debates .debate', count: 3)
+    expect(page).to have_selector('#featured-debates .debate-featured', count: 3)
     featured_debates.each do |debate|
       within('#featured-debates') do
         expect(page).to have_content debate.title

spec/features/tags_spec.rb

@@ -26,11 +26,13 @@ feature 'Tags' do
     visit debates_path
     first(:link, "Salud").click
 
-    expect(page).to have_css('.debate', count: 2)
-    expect(page).to have_content(debate1.title)
-    expect(page).to have_content(debate2.title)
-    expect(page).to_not have_content(debate3.title)
-    expect(page).to_not have_content(debate4.title)
+    within("#debates") do
+      expect(page).to have_css('.debate', count: 2)
+      expect(page).to have_content(debate1.title)
+      expect(page).to have_content(debate2.title)
+      expect(page).to_not have_content(debate3.title)
+      expect(page).to_not have_content(debate4.title)
+    end
   end
 
   scenario 'Show' do

spec/features/votes_spec.rb

@@ -18,11 +18,11 @@ feature 'Votes' do
 
       expect(page).to have_content "0 votes"
 
-      within('#in_favor') do
+      within('.in-favor') do
         expect(page).to have_content "0%"
       end
 
-      within('#against')  do
+      within('.against')  do
         expect(page).to have_content "0%"
       end
     end
@@ -35,23 +35,23 @@ feature 'Votes' do
 
       expect(page).to have_content "2 votes"
 
-      within('#in_favor') do
+      within('.in-favor') do
         expect(page).to have_content "50%"
       end
 
-      within('#against')  do
+      within('.against')  do
         expect(page).to have_content "50%"
       end
     end
 
     scenario 'Create from debate show', :js do
-      find('#in_favor a').click
+      find('.in-favor a').click
 
-      within('#in_favor') do
+      within('.in-favor') do
         expect(page).to have_content "100%"
       end
 
-      within('#against')  do
+      within('.against')  do
         expect(page).to have_content "0%"
       end
 
@@ -62,13 +62,13 @@ feature 'Votes' do
       visit debates_path
 
       within("#featured-debates") do
-        find('#in_favor a').click
+        find('.in-favor a').click
 
-        within('#in_favor') do
+        within('.in-favor') do
           expect(page).to have_content "100%"
         end
 
-        within('#against')  do
+        within('.against')  do
           expect(page).to have_content "0%"
         end
 
@@ -84,13 +84,13 @@ feature 'Votes' do
       within("#debates") do
         expect(page).to have_css(".debate", count: 1)
 
-        find('#in_favor a').click
+        find('.in-favor a').click
 
-        within('#in_favor') do
+        within('.in-favor') do
           expect(page).to have_content "100%"
         end
 
-        within('#against')  do
+        within('.against')  do
           expect(page).to have_content "0%"
         end
 
@@ -100,14 +100,14 @@ feature 'Votes' do
     end
 
     scenario 'Update', :js do
-      find('#in_favor a').click
-      find('#against a').click
+      find('.in-favor a').click
+      find('.against a').click
 
-      within('#in_favor') do
+      within('.in-favor') do
         expect(page).to have_content "0%"
       end
 
-      within('#against')  do
+      within('.against')  do
         expect(page).to have_content "100%"
       end
 
@@ -115,14 +115,14 @@ feature 'Votes' do
     end
 
     scenario 'Trying to vote multiple times', :js do
-      find('#in_favor a').click
-      find('#in_favor a').click
+      find('.in-favor a').click
+      find('.in-favor a').click
 
-      within('#in_favor') do
+      within('.in-favor') do
         expect(page).to have_content "100%"
       end
 
-      within('#against')  do
+      within('.against')  do
         expect(page).to have_content "0%"
       end