jekyll-twitter-theme 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '058fe07683c1ede02dcdde4a255c51abc7f265a7afd7e6ec97ecddbc73a45033'
-  data.tar.gz: cdabad6983ba18fd3bb70237fb323b203ff8f06c09b39fa6866de2cbe36d0f48
+  metadata.gz: 5abd93f345935d30d84fc0a06fa52fc9480759a4cb379cec3ddd476ee897281d
+  data.tar.gz: 2e87cfb2fbc1112a59eb444a06ccda6f30dcd87a0bfcc59ac4cca4ba17235b54
 SHA512:
-  metadata.gz: 836418f9e0215150269f7b9eb5ad93a842a4a0e3742354a26bed17415003beed4523b9973142b066103ace1512c4bab25754f07ee5cfcf951f66484da44d76bb
-  data.tar.gz: 2da7cbe80b12d30ffc1e718f02c677a96e9404c26b1e828d11ed8fe31eefc36a861b02c734d43ecf24d1b52f744aabb92957631c085beb356ee770614a8483aa
+  metadata.gz: b5f4d2de06343e5dc59de8082645350b5eb729357a992186782ba5d285ba38ab8c7bc8e688d30345b29600e68502233c3d0dea5f23c9ef806536f5d39dfdebaa
+  data.tar.gz: cf22a0bb81180e78380198cac35fd766dd016a0135d6c79eadacfb8f70c184c5919b41c59a6323ad57b236a7f5f3020aa82aaf6b85e403fe27067b9b8b6699b4

data/_layouts/home.html

@@ -13,12 +13,22 @@ layout: default
             {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
             <a class="post-item" href="{{ post.url | relative_url }}">
                 <article class="post-inner">
-                    <img class="post-thumbnail"
-                        src="{{ post.thumbnail | relative_url | default: site.global.post.default_thumbnail }}">
-                    <div class="post-details">
-                        <span class="post-title">{{ post.title }}</span>
-                        <span class="post-date">{{ post.date | date: date_format }}</span>
-                        <span class="post-description">{{ post.description }}</span>
+                    <div class="post-thumbnail-container">
+                        <img class="post-thumbnail"
+                            src="{{ post.thumbnail | relative_url | default: site.global.post.default_thumbnail }}">
+                    </div>
+                    <div class="post-inner-right">
+                        <div class="post-details">
+                            <span class="post-title">{{ post.title }}</span>
+                            <span class="post-date">{{ post.date | date: date_format }}</span>
+                            <span class="post-description">{{ post.description }}</span>
+                        </div>
+                        <div class="post-decorations">
+                            <div class="post-decoration-icon">{% include tw_reply_icon.html %}</div>
+                            <div class="post-decoration-icon">{% include tw_retweet_icon.html %}</div>
+                            <div class="post-decoration-icon">{% include tw_like_icon.html %}</div>
+                            <div class="post-decoration-icon">{% include tw_share_icon.html %}</div>
+                        </div>
                     </div>
                 </article>
             </a>

data/_sass/_main.scss

@@ -106,7 +106,7 @@ header {
             text-decoration: none;
             color: $color-font;
         }
-        >a {
+        > a {
             width: 100%;
             @include desktop_collapsed() {
                 width: fit-content;
@@ -269,7 +269,7 @@ main {
         width: $width-body;
         max-width: $width-body;
         border-right: 1px solid $color-border;
-        margin-bottom: 20px;
+        //margin-bottom: 20px;
         @include desktop_collapsed_lv4() {
             width: 100%;
         }
@@ -318,7 +318,7 @@ main {
         border-radius: 50%;
         width: 39px;
         height: 39px;
-        transition: .2s ease;
+        transition: 0.2s ease;
         &:hover {
             background: rgba($color-primary, 0.15);
         }
@@ -332,11 +332,12 @@ main {
 }
 
 .posts-container {
+    background: $color-background-hover;
     display: flex;
     flex-direction: column;
-    padding-left: 20px;
-    padding-right: 20px;
-    padding-top: 20px;
+    //padding-left: 20px;
+    //padding-right: 20px;
+    //padding-top: 20px;
     width: 100%;
     @include smartphone() {
         padding: 12px !important;
@@ -346,14 +347,16 @@ main {
         color: $color-font;
     }
     .post-item {
+        background: $color-background;
         padding: 10px;
-        border-radius: 12px;
-        border: 1px solid $color-border;
+        border-top: 1px solid $color-border;
         display: flex;
         flex-direction: row;
-        margin-bottom: 12px;
+        &:first-child {
+            margin-top: 10px;
+        }
         &:last-child {
-            margin-bottom: 0;
+            border-bottom: 1px solid $color-border;
         }
         &:hover {
             background: $color-background-hover;
@@ -362,13 +365,21 @@ main {
             display: flex;
             flex-direction: row;
             width: 100%;
+            .post-inner-right {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+            }
         }
-        .post-thumbnail {
-            border-radius: 12px;
-            object-fit: cover;
-            width: 120px;
-            height: 120px;
+        .post-thumbnail-container {
+            height: 100%;
             margin-right: 10px;
+            .post-thumbnail {
+                border-radius: 12px;
+                object-fit: cover;
+                width: 120px;
+                height: 120px;
+            }
         }
         .post-details {
             display: flex;
@@ -394,6 +405,19 @@ main {
                 @include elipse_by_line(3);
             }
         }
+        .post-decorations {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            max-width: 425px;
+            margin-top: auto;
+            .post-decoration-icon {
+                svg {
+                    width: 1.25em;
+                    fill: $color-font-thin;
+                }
+            }
+        }
     }
 }
 
@@ -458,7 +482,8 @@ main {
         -webkit-text-size-adjust: 100%;
         line-height: 1.5;
         color: #24292e;
-        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
+            Segoe UI Emoji;
         font-size: 16px;
         line-height: 1.5;
         word-wrap: break-word;
@@ -646,7 +671,7 @@ main {
         -webkit-appearance: none;
         appearance: none;
     }
-     :checked+.radio-label {
+    :checked + .radio-label {
         position: relative;
         z-index: 1;
         border-color: #0366d6;
@@ -899,10 +924,10 @@ main {
     body:after {
         clear: both;
     }
-    body> :first-child {
+    body > :first-child {
         margin-top: 0 !important;
     }
-    body> :last-child {
+    body > :last-child {
         margin-bottom: 0 !important;
     }
     a:not([href]) {
@@ -932,10 +957,10 @@ main {
         color: #6a737d;
         border-left: 0.25em solid #dfe2e5;
     }
-    blockquote> :first-child {
+    blockquote > :first-child {
         margin-top: 0;
     }
-    blockquote> :last-child {
+    blockquote > :last-child {
         margin-bottom: 0;
     }
     h1,
@@ -987,10 +1012,10 @@ main {
     li {
         word-wrap: break-all;
     }
-    li>p {
+    li > p {
         margin-top: 16px;
     }
-    li+li {
+    li + li {
         margin-top: 0.25em;
     }
     dl {
@@ -1048,7 +1073,7 @@ main {
     pre {
         word-wrap: normal;
     }
-    pre>code {
+    pre > code {
         padding: 0;
         margin: 0;
         font-size: 100%;
@@ -1197,7 +1222,7 @@ main {
     .task-list-item {
         list-style-type: none;
     }
-    .task-list-item+.task-list-item {
+    .task-list-item + .task-list-item {
         margin-top: 3px;
     }
     .task-list-item input {
@@ -1216,4 +1241,14 @@ main {
     h1 {
         font-size: 74px !important;
     }
-}
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+}
+
+.col {
+    display: flex;
+    flex-direction: column;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-twitter-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
-- kento
+- Kento Oki
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-17 00:00:00.000000000 Z
+date: 2021-01-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll