[add] crosswords img

css/index.less

@@ -20,19 +20,19 @@ body.home {
         width: @grid-size;
         overflow: hidden;
         margin: 0.25em;
-        background-size: 125%;
+        background-size: 112%;
         background-repeat: no-repeat;
         background-position: center;
         border: 1px solid @border-color;
 
-        transition: background-size 0.4s ease-in;
+        transition: background-size 0.2s ease-in;
 
         &:hover {
-            background-size: 150%;
+            background-size: 120%;
         }
 
         &.crossword {
-            background-image: url("img/crosswords.png");
+            background-image: url("img/crosswords.svg");
         }
 
         & > a {
@@ -52,8 +52,9 @@ body.home {
         right: -40px;
         top: 20px;
         width: 100%;
+        padding: 2px 0;
         transform: rotate(45deg);
-        background-color: rgba(255, 135, 135, 0.75);
+        background-color: rgba(255, 135, 135, 0.95);
         color: white;
         font-weight: 700;
         text-align: center;
@@ -63,7 +64,7 @@ body.home {
         display: block;
         padding: 0.25em 0;
         text-align: center;
-        background: rgba(0, 0, 0, 0.5);
+        background: rgba(0, 0, 0, 0.65);
         color: white;
     }
 

public/img/crosswords.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" standalone="no"?>
+<svg width="150" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <line x1="2" x2="2" y1="2" y2="142" stroke="black" stroke-width="1"/>
+  <line x1="22" x2="22" y1="2" y2="142" stroke="black" stroke-width="1"/>
+  <line x1="42" x2="42" y1="2" y2="142" stroke="black" stroke-width="1"/>
+  <line x1="62" x2="62" y1="2" y2="142" stroke="black" stroke-width="1"/>
+  <line x1="82" x2="82" y1="2" y2="142" stroke="black" stroke-width="1"/>
+  <line x1="102" x2="102" y1="2" y2="142" stroke="black" stroke-width="1"/>
+  <line x1="122" x2="122" y1="2" y2="142" stroke="black" stroke-width="1"/>
+  <line x1="142" x2="142" y1="2" y2="142" stroke="black" stroke-width="1"/>
+
+  <line x1="2" x2="142" y1="2" y2="2" stroke="black" stroke-width="1"/>
+  <line x1="2" x2="142" y1="22" y2="22" stroke="black" stroke-width="1"/>
+  <line x1="2" x2="142" y1="42" y2="42" stroke="black" stroke-width="1"/>
+  <line x1="2" x2="142" y1="62" y2="62" stroke="black" stroke-width="1"/>
+  <line x1="2" x2="142" y1="82" y2="82" stroke="black" stroke-width="1"/>
+  <line x1="2" x2="142" y1="102" y2="102" stroke="black" stroke-width="1"/>
+  <line x1="2" x2="142" y1="122" y2="122" stroke="black" stroke-width="1"/>
+  <line x1="2" x2="142" y1="142" y2="142" stroke="black" stroke-width="1"/>
+
+  <text x="26" y="54" style="font-size:5px">imite</text>
+
+  <text x="44" y="58">M</text>
+  <text x="44" y="74" style="font-size:5px">parent</text>
+
+  <text x="66" y="11" style="font-size:5px">chat</text>
+  <text x="63" y="16" style="font-size:5px">mignon</text>
+  <text x="64" y="38">M</text>
+  <text x="68" y="58">I</text>
+  <text x="64" y="78">M</text>
+  <text x="66" y="98">O</text>
+  <text x="66" y="118">U</text>
+  <text x="65" y="128" style="font-size:5px">Unite</text>
+  <text x="69" y="134" style="font-size:5px">de</text>
+  <text x="62" y="139" style="font-size:5px">lumiere</text>
+
+
+  <text x="84" y="58">M</text>
+  <text x="86" y="78">E</text>
+  <text x="86" y="138">L</text>
+
+
+
+  <text x="104" y="10" style="font-size:5px">travail</text>
+  <line x1="102" x2="122" y1="13" y2="13" stroke="black" stroke-width="1"/>
+  <text x="108" y="19" style="font-size:5px">eau</text>
+  <text x="106" y="38">M</text>
+  <text x="106" y="58">E</text>
+  <text x="106" y="78">R</text>
+  <text x="105" y="94" style="font-size:5px">avoir</text>
+  <text x="106" y="118">E</text>
+  <text x="106" y="138">U</text>
+
+  <text x="126" y="18">B</text>
+  <text x="126" y="38">U</text>
+  <text x="126" y="58">R</text>
+  <text x="126" y="78">E</text>
+  <text x="126" y="98">A</text>
+  <text x="126" y="118">U</text>
+  <text x="126" y="138">X</text>
+</svg>