yet another edit spoilers

authors.html

@@ -21,7 +21,7 @@ Evgeniy Alekseev wrote this file. As long as you retain this notice you can do w
     <li><a href="http://jekyllrb.com/">Jekyll</a> that licensed under <a href="http://opensource.org/licenses/MIT">MIT License</a>.</li>
     <li>The source theme was created by <a href="https://github.com/orderedlist/minimal">Steve Smith</a> and licensed under <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.</li>
     <li>The comment block was created by <a href="https://github.com/izuzak/izuzak.github.com">Ivan Žužak</a> and licensed under <a href="http://opensource.org/licenses/MIT">MIT License</a>.</li>
-    <li>The spoiler block was created by <a href="http://www.cyberforum.ru/post5368179.html">markeley</a> and it looks like it has no any license.</li>
+    <li>The spoiler block was created by <a href="http://www.cyberforum.ru/post5368179.html">markeley</a> and <a href="http://habrahabr.ru/post/167151/">Defff</a> and it looks like it has no any license.</li>
     <li>Google Custom Search is licensed under own <a href="https://support.google.com/customsearch/answer/1714300">custom license</a>.</li>
     <li>Sharethis have own <a href="http://www.sharethis.com/legal/publisher-terms-of-use">custom license</a> too.</li>
     <li><a href="https://www.redhat.com/promo/fonts/">Liberation font</a> is licensed under <a href="http://scripts.sil.org/OFL">The SIL Open Font License</a>.</li>

blog/archive.html

@@ -16,21 +16,25 @@ back: 2
       {% assign month = post.date | date: "%B, %Y" %}
     {% endfor %}
     <label class="spoiler">
-      <input type="checkbox" class="bo"/>
+      <input type="checkbox" tabindex="-1">
-      <div class="title">{{ month }} (show)</div>
+      <div class="box">
-      <div class="body">
+        <b>{{ month }}</b> <span class="close" style="float:right;">(hide)</span><span class="open" style="float:right;">(show)</span>
+        <blockquote>
           {% for post in site.categories.en %}
             {% assign new_month = post.date | date: "%B, %Y" %}
             {% if new_month != month %}
+        </blockquote>
       </div>
     </label>
     <label class="spoiler">
-            <input type="checkbox" class="bo"/>
+      <input type="checkbox" tabindex="-1">
-            <div class="title">{{ new_month }} (show)</div>
+      <div class="box">
-            <div class="body">
+        <b>{{ new_month }}</b> <span class="close" style="float:right;">(hide)</span><span class="open" style="float:right;">(show)</span>
+        <blockquote>
             {% endif %}
             {% assign month = post.date | date: "%B, %Y" %}
             <i>{{ post.date | date_to_string }}</i> &raquo; <a name="{{ post.short }}" class="anchor" href="#{{ post.short }}"><span class="octicon octicon-link"></span></a><a href="{{ post.url }}">{{ post.title }}</a> ({{ post.tags }})<br>
           {% endfor %}
+        </blockquote>
       </div>
     </label>

index.html

@@ -11,14 +11,14 @@ title: arcanis' homepage
         <h1>{{ page.title }}</h1>
 
         <label class="spoiler">
-          <input type="checkbox" class="bo"/>
+          <input type="checkbox" tabindex="-1">
-          <div class="title"><a href="/blog/">Latest posts:</a></div>
+          <div class="box">
-          <div class="body">
+            <a href="/blog/">My blog</a> <span class="close">(hide)</span><span class="open">(show)</span>
-            <p>
+            <blockquote>
             {% for post in site.categories.en limit:3 %}
               <a href="{{ post.url }}">{{ post.title }}</a><br>
             {% endfor %}
-            </p>
+            </blockquote>
           </div>
         </label>
         <p class="view"><a href="/projects/">My projects</a></p>

resources/css/styles.css

@@ -1,28 +1,51 @@
 /* spoiler */
+.spoiler > input + .box > blockquote {
+  display: none;
+}
+.spoiler > input:checked + .box > blockquote {
+  display: block;
+}
+.spoiler > input[type="checkbox"] {
+  display: none;
+ }
+.spoiler > input[type="checkbox"]:focus {
+  outline: none;
+}
+.spoiler span.close,
+.spoiler span.open {
+  text-align: right;
+  font-style: italic;
+}
+.spoiler > input + .box > span.close {
+  display: none;
+}
+.spoiler > input:checked + .box > span.close {
+  display: inline;
+}
+.spoiler > input:checked + .box > span.open {
+  display: none;
+}
+.spoiler > input + .box > span.open {
+  display: inline;
+}
+.spoiler blockquote,
 .spoiler {
-    display: block;
-    background: #dcdcdc;
-    text-decoration: none;
-    color: #555555;
   border-radius: 5px;
-    padding: 0 0 0 0;
+  -webkit-border-radius: 5px;
-    margin: 0 0 0 0;
+  -khtml-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -o-border-radius: 5px;
+  -ms-border-radius: 5px;
 }
-.spoiler > .title {
+.spoiler {
-    font-weight: bold;
+  overflow-x: hidden;
 }
-.spoiler > .body {
+.spoiler blockquote {
-    padding: 4px;
+  min-height: 23px;
-    font-weight: 300;
+  margin: 0;
-    font-size: 11pt;
+  padding: 4px 4px 4px 10px;
-    text-align: justify;
+  border-style: none;
-    display: none;
+  font-style: normal;
-}
-.spoiler > .bo {
-    display: none;
-}
-.spoiler > :checked ~ .body {
-    display: block;
 }
 
 /* Liberation font ^^ */
@@ -188,9 +211,7 @@ header {
 header ul {
   list-style: none;
   height: 40px;
-  
   padding: 0;
-  
   background: #eee;
   background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
@@ -198,7 +219,6 @@ header ul {
   background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
   background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
   background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  
   border-radius: 5px;
   border: 1px solid #d2d2d2;
   box-shadow: inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
@@ -268,33 +288,27 @@ footer {
 }
 
 @media print, screen and (max-width: 960px) {
-  
   div.wrapper {
     width: auto;
     margin: 0;
   }
-  
   header, section, footer {
     float: none;
     position: static;
     width: auto;
   }
-  
   header {
     padding-right: 320px;
   }
-  
   section {
     border: 1px solid #e5e5e5;
     border-width: 1px 0;
     padding: 20px 0;
     margin: 0 0 20px;
   }
-  
   header a small {
     display: inline;
   }
-  
   header ul {
     position: absolute;
     right: 50px;
@@ -306,15 +320,12 @@ footer {
   body {
     word-wrap: break-word;
   }
-  
   header {
     padding: 0;
   }
-  
   header ul, header p.view {
     position: static;
   }
-  
   pre, code {
     word-wrap: normal;
   }
@@ -324,7 +335,6 @@ footer {
   body {
     padding: 15px;
   }
-  
   header ul {
     display: none;
   }
@@ -351,7 +361,6 @@ footer {
   padding: 0px;
   width: 100%;
 }
-
 .comment .commentheader {
   border-bottom-color: #CACACA;
   border-bottom-style: solid;
@@ -378,7 +387,6 @@ footer {
   white-space: nowrap;
   width: 100%;
 }
-
 .comment .commentheader .commentgravatar {
   background-attachment: scroll;
   background-clip: border-box;
@@ -410,15 +418,12 @@ footer {
   white-space: nowrap;
   width: 20px;
 }
-
 .comment .commentheader a:link {
   text-decoration: none;
 }
-
 .comment .commentheader a:hover {
   border-bottom: 1px solid;
 }
-
 .comment .commentheader .commentuser {
   background-color: transparent;
   color: black;
@@ -441,7 +446,6 @@ footer {
   white-space: nowrap;
   width: 0px;
 }
-
 .comment .commentheader .commentdate {
   background-color: transparent;
   color: #777;
@@ -463,7 +467,6 @@ footer {
   white-space: nowrap;
   width: 20em;
 }
-
 .comment .commentbody {
   background-attachment: scroll;
   background-clip: border-box;
@@ -483,24 +486,20 @@ footer {
   width: 96%;
   word-wrap: break-word;
 }
-
 .comment .commentbody p {
   margin-bottom: 0.5em;
   margin-top: 0.5em;
   margin-left: 0em;
   margin-right: 0em;
 }
-
 .comment .commentbody pre {
   border: 0px solid #ddd;
   background-color: #eef;
   padding: 0 .4em;
 }
-
 .comment .commentbody pre code {
   border: 0px solid #ddd;
 }
-
 .comment .commentbody code {
   border: 1px solid #ddd;
   background-color: #eef;

ru/authors.html

@@ -23,7 +23,7 @@ Evgeniy Alekseev wrote this file. As long as you retain this notice you can do w
     <li><a href="http://jekyllrb.com/">Jekyll</a>, который лицензирован под лицензией <a href="http://opensource.org/licenses/MIT">MIT</a>.</li>
     <li>Исходная тема была создана <a href="https://github.com/orderedlist/minimal">Steve Smith</a> и лицензирована под <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.</li>
     <li>Блок комментариев был создан <a href="https://github.com/izuzak/izuzak.github.com">Ivan Žužak</a> и лицензирован под лицензией <a href="http://opensource.org/licenses/MIT">MIT</a>.</li>
-    <li>Код для спойлеров был предложен <a href="http://www.cyberforum.ru/post5368179.html">markeley</a>, и, судя по всему, он не имеет никакой лицензии.</li>
+    <li>Код для спойлеров был предложен <a href="http://www.cyberforum.ru/post5368179.html">markeley</a> и <a href="http://habrahabr.ru/post/167151/">Defff</a>, и, судя по всему, он не имеет никакой лицензии.</li>
     <li>Google Custom Search имеет собственную <a href="https://support.google.com/customsearch/answer/1714300">кастомную лицензию</a>.</li>
     <li>Sharethis тоже имеет собственную <a href="http://www.sharethis.com/legal/publisher-terms-of-use">кастомную лицензию</a>.</li>
     <li><a href="https://www.redhat.com/promo/fonts/">Liberation font</a> лицензирован под <a href="http://scripts.sil.org/OFL">The SIL Open Font License</a>.</li>

ru/blog/archive.html

@@ -18,21 +18,25 @@ back: 2
       {% assign new_month = post.date | date: "%B, %Y" %}
     {% endfor %}
     <label class="spoiler">
-      <input type="checkbox" class="bo"/>
+      <input type="checkbox" tabindex="-1">
-      <div class="title">{% include longdate_to_ru.html %} (показать)</div>
+      <div class="box">
-      <div class="body">
+        <b>{% include longdate_to_ru.html %}</b> <span class="close" style="float:right;">(скрыть)</span><span class="open" style="float:right;">(показать)</span>
+        <blockquote>
           {% for post in site.categories.ru %}
             {% assign new_month = post.date | date: "%B, %Y" %}
             {% if new_month != month %}
+        </blockquote>
       </div>
     </label>
     <label class="spoiler">
-            <input type="checkbox" class="bo"/>
+      <input type="checkbox" tabindex="-1">
-            <div class="title">{% include longdate_to_ru.html %} (показать)</div>
+      <div class="box">
-            <div class="body">
+        <b>{% include longdate_to_ru.html %}</b> <span class="close" style="float:right;">(скрыть)</span><span class="open" style="float:right;">(показать)</span>
+        <blockquote>
             {% endif %}
             {% assign month = post.date | date: "%B, %Y" %}
             <i>{% include shortdate_to_ru.html %}</i> &raquo; <a name="{{ post.short }}" class="anchor" href="#{{ post.short }}"><span class="octicon octicon-link"></span></a><a href="{{ post.url }}">{{ post.title }}</a> ({{ post.tags }})<br>
           {% endfor %}
+        </blockquote>
       </div>
     </label>

ru/index.html

@@ -12,14 +12,14 @@ title: arcanis
         <h1>{{ page.title }}</h1>
 
         <label class="spoiler">
-          <input type="checkbox" class="bo"/>
+          <input type="checkbox" tabindex="-1">
-          <div class="title"><a href="/ru/blog/">Блог</a></div>
+          <div class="box">
-          <div class="body">
+            <a href="/ru/blog/">Блог</a> <span class="close">(скрыть)</span><span class="open">(показать)</span>
-            <p>
+            <blockquote>
             {% for post in site.categories.ru limit:3 %}
               <a href="{{ post.url }}">{{ post.title }}</a><br>
             {% endfor %}
-            </p>
+            </blockquote>
           </div>
         </label>
         <p class="view"><a href="/ru/projects/">Проекты</a></p>