Integrate illustrations as a showcase (#544)

Integrate some custom graphics, and a whole comics explanation, only in French for now.
Fix #363 

1 files changed, 29 insertions, 7 deletions

diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css
index 7d91c38..ec1481b 100644
--- a/ihatemoney/static/css/main.css
+++ b/ihatemoney/static/css/main.css
@@ -50,16 +50,28 @@ body {
   font-size: 2.4em;
 }
 
-#header .tryout {
-  margin-right: 10em;
+#header .tryout, #header .showcase {
   color: #fff;
   background-color: #414141;
   border-color: #414141;
+  margin-left: 3px;
+  margin-right: 3px;
 }
 
-#header .tryout:hover {
+#header .tryout:hover, #header .showcase:hover {
   background-color: #606060;
   border-color: #606060;
+  cursor: pointer;
+}
+
+#header .showcaseimg {
+  width: 55px;
+}
+
+#header .shareimg {
+  width: 80px;
+  margin-left: 5px;
+  margin-bottom: 8px;
 }
 
 #header .additional-content {
@@ -168,10 +180,10 @@ body {
   border: 0;
 }
 
-.empty-bill .hand-holding-heart svg {
+.empty-bill .billimg svg {
   fill: lightgray;
-  height: 5em;
-  width: 5em;
+  height: 6em;
+  width: 4em;
 }
 
 .invites textarea {
@@ -535,11 +547,17 @@ tr:hover .extra-info {
   width: 1.2em; /* protection for IE11 */
 }
 
+.icon.high svg {
+  height: 2em;
+  margin-top: -0.2em;
+  margin-bottom: -0.2em;
+}
+
 .download-project .icon svg {
   fill: white;
 }
 
-.icon.plus svg {
+.icon.before-text svg {
   margin-right: 3px;
 }
 footer .icon svg {
@@ -562,6 +580,10 @@ footer .icon svg {
   width: 200px;
 }
 
+.hiddenpswp {
+  display: none;
+}
+
 #history_warnings {
   margin-top: 30px;
 }