Problem: No link on the sword (fix fractalide#187 2/2)

Solution: Create link over the sword in the comic.
miguelsimoni · Sep 4, 2018 · d0dd45e · d0dd45e
1 parent e2e8290
commit d0dd45e
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 18 deletions.
diff --git a/content/ico/comic.md b/content/ico/comic.md
@@ -2,8 +2,8 @@
     <div class="row">
         <div class="col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10">
             <div class="text-center">
-                <p class="text_dark_blue">
-                    Please spread the word to *kind people* who make decisions *based on facts*.
+                <p class="text_blue">
+                    Please spread the word to <b>kind people</b> who make decisions <b>based on facts</b>.
                     An initial group of people of such caliber would be a uplifting experience indeed.
                     The actual link to the ICO is hidden in plain sight,
                     hence our rather pathetic attempt in trying to filter for these qualities becomes apparent.
@@ -12,14 +12,25 @@
         </div>
     </div>
 </div>
-<div class="container">
-    <div class="row">
-        <div class="col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10">
-            <img class="comic" src="/img/comic/01-min.png" />
-            <img class="comic" src="/img/comic/02-min.png" />
-            <img class="comic" src="/img/comic/03-min.png" />
-            <img class="comic" src="/img/comic/04-min.png" />
-            <img class="comic comic_end" src="/img/comic/05-min.png" />
+<div class="comic_container" align="center">
+    <div class="comic_slide">
+        <img class="comic" src="/img/comic/01-min.png" />
+    </div>
+    <div class="comic_slide">
+        <img class="comic" src="/img/comic/02-min.png" />
+    </div>
+    <div class="comic_slide">
+        <img class="comic" src="/img/comic/03-min.png" />
+    </div>
+    <div class="comic_slide">
+        <img class="comic" src="/img/comic/04-min.png" />
+        <div class="comic_secret" align="right">
+            <a href="/ico/details">
+                <img class="comic_secret_sword" src="/img/comic/sword-glint-04.gif" />
+            </a>
         </div>
     </div>
+    <div class="comic_slide comic_end">
+        <img class="comic" src="/img/comic/05-min.png" />
+    </div>
 </div>
diff --git a/content/ico/detail.md b/content/ico/detail.md
diff --git a/themes/fractalide-site/files/img/comic/sword-glint-04.gif b/themes/fractalide-site/files/img/comic/sword-glint-04.gif
diff --git a/themes/fractalide/files/css/custom.css b/themes/fractalide/files/css/custom.css
@@ -13,6 +13,10 @@
 .text_blue {
     color: #58B4CD;
 }
+.text_blue b {
+    color: #58B4CD;
+    font-weight: bold;
+}
 .text_dark_blue {
     color: #0d3e4c;
 }
@@ -825,23 +829,71 @@ section#ico h1.fractal_white {
     margin-bottom: 80px;
 }
 
+.comic_container {
+    width: 100%;
+}
+.comic_slide {
+    width: 770px;
+}
 .comic {
-    max-width: 100%;
+    width: 100%;
+}
+.comic_secret {
+    width: 100%;
+}
+.comic_secret_sword {
+    width: 391px;
+    margin: -309px -1px 0 0;
+    z-index: 9999;
 }
 .comic_end {
     margin-bottom: -350px;
 }
-@media (max-width: 768px) {
+
+@media (max-width: 479px) {
+    .comic_slide {
+        width: 350px;
+    }
+    .comic_secret_sword {
+        width: 178px;
+        margin: -153px -1px 0 0;
+    }
+    .comic_end {
+        margin-bottom: 0px;
+    }
+}
+@media (min-width: 480px) and (max-width: 767px) {
+    .comic_slide {
+        width: 350px;
+    }
+    .comic_secret_sword {
+        width: 178px;
+        margin: -153px -1px 0 0;
+    }
     .comic_end {
         margin-bottom: 0px;
     }
 }
-@media (min-width: 769px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991px) {
+    .comic_slide {
+        width: 550px;
+    }
+    .comic_secret_sword {
+        width: 279px;
+        margin: -227px -1px 0 0;
+    }
     .comic_end {
         margin-bottom: -240px;
     }
 }
 @media (min-width: 992px) and (max-width: 1199px) {
+    .comic_slide {
+        width: 770px;
+    }
+    .comic_secret_sword {
+        width: 391px;
+        margin: -309px -1px 0 0;
+    }
     .comic_end {
         margin-bottom: -180px;
     }