jekyll-theme-mehdix-rtl 1.1.1 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: be3ecf54b83ae4e034e5513538b527357c740ee5e96971d7201356df04c548df
-  data.tar.gz: 33e49b993631a9c2e71a23e40586595bcc7651a84bca367ffdc0be1f3e19150d
+  metadata.gz: 444d2f8db5ebc254c6cc2fde845fcbe38846fb18e9c0aeaf2c847acc75c211f9
+  data.tar.gz: ba0227f705d6d5b5851a336b6694110c1f49da1cec6edc5deb7a33e16a5356cb
 SHA512:
-  metadata.gz: 2d34fa60124a8a45268ff1bb242ed3d6a25f5fa70ed5e71ce93e749b00da495f10d7e7182648cc47b6f16bf3a0b0cb074ef17478a6c04baf33cb4d06eb310a79
-  data.tar.gz: 5503624fd882c3fe06ab910696bff49df52c7c67fd22457b69abe58d79300fdf175cfd1b1b1f2d4703c1830c7b20184db6caafb4e6b0d57d24064a7e88a7bd59
+  metadata.gz: a6c38c05ecf53ec624fd7f72959dde75461cdbfd3c7c34e4c229ef9a5474426243b1af6509640ea0c708e1be78135fb6a9956c9498b905a97285448cc1020f47
+  data.tar.gz: 3c361ef733fde63f2c36b59f768362013111c957b49e977b8ce181a4204fad9c1286ffdec3b4306a3f753251d757d0e80aa30e998e4392cf7008e1f8123ab69d

data/_includes/static_comments.html

@@ -4,10 +4,11 @@
   {% capture key %}{{ page.id | remove_first: "/" }}{% endcapture %}
   {% assign comments = site.data.comments[key] %}
   {% if comments %}
-  <h4 id="comments-header">نظرات خوانندگان</h4>
+  <h4 id="comments-header">دیدگاه‌ها</h4>
   <div id="comments">
     {% for comment in comments %}
-      <article>
+    <div class="comment-chain">
+      <article id="{{ comment.id }}">
         <div class="comment-image-wrapper">
           <img class="comment-avatar" src="https://www.gravatar.com/avatar/{{comment.email}}?s=200&d=robohash" />
         </div>
@@ -15,16 +16,48 @@
           <span class="comment-meta">
             <small>
               {% if comment.website != '' %}
-                <a href={{comment.website}} target="_">{{ comment.name }}</a>
+                <a href={{comment.website}} target="_"><span commenter>{{ comment.name }}</span></a>
               {% else %}
-                {{ comment.name }}
+                <span commenter>{{ comment.name }}</span>
               {% endif %}
             </small>
-            <small> &nbsp; {{ comment.date | jdate: "%d %b %Y" | habify }}</small>
+            <small> &nbsp; <a href="#{{ comment.id }}">{{ comment.created_at | jdate: "%d %b %Y" | habify }}</a></small>
+            <small> &nbsp; <a href="#comment-form" onclick="replyTo('{{ comment.id }}')">پاسخ</a></small>
+            <span style="display:none" commentId>{{ comment.id }}</span>
           </span>
           {{ comment.message | replace: "<p>", '' | replace: "</p>", newLine | replace: "<br>", newLine | strip_html | markdownify }}
         </div>
       </article>
+
+        {% if comment.reply_to %}
+          {% for cmt in comments %}
+            {% if cmt.id == comment.reply_to %}
+              <article class="sub-comment">
+
+                <div class="comment-image-wrapper">
+                  <img class="comment-avatar" src="https://www.gravatar.com/avatar/{{comment.email}}?s=200&d=robohash" />
+                </div>
+                <div class="comment-body-wrapper">
+                  <span class="comment-meta">
+                    <small>
+                      {% if cmt.website != '' %}
+                        <a href={{comment.website}} target="_"><span commenter>{{ cmt.name }}</span></a>
+                      {% else %}
+                        {{ cmt.name }}
+                      {% endif %}
+                    </small>
+                    <small> &nbsp; <a href="#{{ cmt.id }}">{{ cmt.created_at | jdate: "%d %b %Y" | habify }}</a></small>
+                  </span>
+                  {{ cmt.message | replace: "<p>", '' | replace: "</p>", newLine | replace: "<br>", newLine | strip_html | markdownify }}
+                </div>
+
+              </article>
+              {% break %}
+            {% endif %}
+          {% endfor %}
+        {% endif %}
+
+    </div>
     {% endfor%}
   </div>
   {% endif %}
@@ -32,10 +65,8 @@
   <form id="comment-form" name="comment" netlify-honeypot="bot-field" netlify>
     <input name="bot-field" style="display:none">
     <input name="page_id" style="display:none" value="{{page.id}}">
-    <input name="page_uuid" style="display:none" value="{{page.uuid}}">
-    <input name="page_date" style="display:none" value="{{page.date}}">
-    <input name="page_title" style="display:none" value="{{page.title}}">
-    <label for="message">دیدگاه<sup class="required">*</sup> &nbsp;<small>می‌توانید با <a href="http://commonmark.org/help/" target="_">مارک‌داون</a> هم بنویسید.</small>
+    <input id="reply-to" name="reply-to" style="display:none">
+    <label for="message">دیدگاه<sup class="required">*</sup> &nbsp;<small>می‌توانید با <a href="http://commonmark.org/help/" target="_">مارک‌داون</a> هم بنویسید.</small><br><small id="replyToVisualClue"></small>
       <textarea id="message" name="message" required alt="no!!" onkeyup="preview()"></textarea>
       <div id="preview"></div>
     </label>
@@ -57,9 +88,15 @@
 <script src="{{ 'assets/js/showdown.min.js' | absolute_url }}" type="text/javascript">
 </script>
 <script type="text/javascript">
-  function preview(){
+  function preview() {
     var converter = new showdown.Converter();
     var markdown = document.getElementById("message").value;
     document.getElementById("preview").innerHTML = converter.makeHtml(markdown);
   }
+
+  function replyTo(commentID) {
+    var comment = document.getElementById(commentID);
+    document.getElementById("reply-to").value = comment.querySelector("span[commentId]").innerText;
+    document.getElementById("replyToVisualClue").innerText = "[در جواب " + comment.querySelector("span[commenter]").innerText + "]";
+  }
 </script>

data/_sass/_layout.scss

@@ -24,10 +24,7 @@ header {
     font-size: 26px;
     line-height: 56px;
     letter-spacing: -1px;
-
-    &:visited {
-        color: white;
-    }
+    color: $anti-color;
 }
 
 .post-list {
@@ -35,9 +32,6 @@ header {
 
     h2 {
         font-weight: bold;
-        a {
-            //color: darken($header-color, 30%);
-        }
     }
 
     .post-list-item {
@@ -68,7 +62,7 @@ header {
 
 .meta {
     font-size: $small-font-size;
-    color: lighten($text-color, 10%);
+    color: $grey-color;
 }
 
 .list-meta-col {
@@ -86,7 +80,7 @@ header {
 }
 
 #motto {
-    color: white;
+    color: $anti-color;
     vertical-align: calc(40%);
 }
 
@@ -123,7 +117,7 @@ header {
     padding: 5px 32px;
     background-color: lighten($brand-color, 25%);
     border-radius: 2px;
-    color: white;
+    color: $anti-color;
 }
 
 @include media-query($on-palm) {

data/_sass/_post.scss

@@ -9,7 +9,7 @@
     text-align: center;
     font-weight: bold;
     font-size: 4em;
-    color: $header-color;//a friendly dark color. darken($header-color, 10%);
+    color: $header-color;
 
     @include media-query($on-laptop) {
         font-size: 4em;
@@ -69,12 +69,10 @@
     padding-top: 1em;
     padding-bottom: 1em;
     display: flex;
-    /*border-top: 1px solid #f2f3f3;
-    border-bottom: 1px solid #f2f3f3;*/
 }
 
 .pagination--pager.disabled {
-    color: rgba(137, 140, 143, 0.5);
+    color: lighten($brand-color, 50%);
     pointer-events: none;
     cursor: not-allowed;
 }
@@ -97,13 +95,12 @@
 
 #comments, #comments-form {
     font-size: .9rem;
-    color: darken($grey-color, 30%);
+    color: $grey-color-dark;
 }
 
 #comments article {
     display: flex;
     margin-top: 1em;
-    border-bottom: 1px solid #f2f3f3;
 
     p {
         white-space: pre-wrap;
@@ -115,9 +112,41 @@
     }
 }
 
+.comment-chain {
+    border-bottom: 1px solid #f2f3f3;
+    background-color: lighten($brand-color, 55%);//lighten($grey-color-light, 20%);
+
+    .sub-comment {
+        margin: 5%;
+        padding: 3%;
+        font-size: smaller;
+        background-color: $anti-color;
+
+        p {
+            margin-bottom: 0;
+        }
+
+        blockquote > p {
+            padding: 10px;
+        }
+
+        @include media-query($on-palm) {
+            .comment-image-wrapper {
+                display: none;
+            }
+        }
+    }
+}
+
 #comments-header {
     color: darken($brand-color, 20%);
     border-bottom: 1px solid lighten($brand-color, 50%);
+    text-align: center;
+    font-size: 3em;
+
+    @include media-query($on-palm) {
+        font-size: 2em;
+    }
 }
 
 .comment-image-wrapper {
@@ -139,11 +168,16 @@
 .comment-meta {
     display: flex;
     color: $grey-color;
+
+    a {
+        color: $grey-color;
+    }
 }
 
 #comment-form {
     background: lighten($brand-color, 55%);
     color: darken($brand-color, 30%);
+    margin-top: 15px;
     font-size: .9rem;
     padding: 15px;
 
@@ -158,7 +192,7 @@
         box-sizing: border-box;
         font-family: $base-font-family;
         font-size: small;
-        color: darken($grey-color, 25%);
+        color: $grey-color-dark;
         border: 1px solid lighten($brand-color, 50%);
     }
 
@@ -173,6 +207,7 @@
     textarea {
         height: 10rem;
         resize: vertical;
+        padding: 10px;
     }
 
     sup.required {
@@ -181,11 +216,10 @@
 
     #preview {
         font-size: small;
-        color: darken($grey-color, 10%);
-        background-color: white;
-        margin-top: 1em;
+        color: $grey-color-dark;
+        padding: 10px;
         h1, h2, h3, h4, h5, h6 {
-            color: darken($grey-color, 10%);
+            color: $grey-color-dark;
             margin: initial;
         }
         p {

data/_sass/_print.scss

@@ -1,9 +1,12 @@
 @media print { 
-	/* your print styles go here */
-	.site-header, .site-footer { display: none; } 
-	#disqus_thread { display: none; }
 
-	body { background-image: none;  } 
-	h1 { font-size: 18pt; } 
+	.site-header,
+    .site-footer,
+	#disqus_thread,
+    #static-comments {
+        display: none;
+    }
+
+	h1 { font-size: 18pt; }
 	h2 { font-size: 16pt; color: #000; }
 }

data/assets/css/main.scss

@@ -39,10 +39,10 @@ $header-color:     #14213d;
 /* Palett source:
 https://coolors.co/app/2b2d42-8d99ae-edf2f4-ef233c-d90429 */
 $brand-color:      #d90429;
-$anti-color:       #8d99ae;
+$anti-color:       white;
 $text-color:       #2b2d42;
-$background-color: #ffffff; /* original one was edf2f4 */
-$header-color:     #343434;//#343434;//#ef233c;
+$background-color: #ffffff;
+$header-color:     #343434;
 
 $grey-color:       gray;
 $grey-color-light: lighten($grey-color, 25%);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-mehdix-rtl
 version: !ruby/object:Gem::Version
-  version: 1.1.1
+  version: 1.2.0
 platform: ruby
 authors:
 - Mehdi Sadeghi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-01-19 00:00:00.000000000 Z
+date: 2018-01-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -207,6 +207,8 @@ files:
 - assets/js/disqus.js
 - assets/js/main.js
 - assets/js/showdown.min.js
+- assets/pimg/saaghiabout.jpg
+- assets/pimg/saaghiquery.jpg
 - assets/uploads/dirtybike.jpg
 - assets/webfonts/fa-brands-400.eot
 - assets/webfonts/fa-brands-400.svg