feat: Show detailed date

css/style.css

@@ -1,74 +1,104 @@
-*{
+* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 }
-h1,h2,h3{
+
+li:hover {
+    background: #EFF1F3;
+}
+
+@media screen and (max-width:768px) {
+    .list-group-item {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+}
+
+h1,
+h2,
+h3 {
     font-size: initial !important;
 }
-body{
+
+body {
     padding: 1em;
 }
+
 .wrap,
-.giscus{
+.giscus {
     max-width: 1200px;
     margin: auto;
 }
+
 h2,
-h3{ 
+h3 {
     font-weight: 600;
 }
-h2{
+
+h2 {
     margin-top: 0.4em;
 }
-.wrap{
+
+.wrap {
     border: #e5e7eb 1px solid;
     border-radius: .375rem;
     padding: 1.2rem;
     margin-top: 1em;
 }
-.introduction h2{
+
+.introduction h2 {
     font-weight: 600;
     font-size: 2em !important;
-    
+
 }
-.underline{
+
+.underline {
     border-bottom: 1px solid #e5e7eb;
     padding-bottom: .6rem;
     margin-bottom: 1rem;
 }
-.introduction h1{
+
+.introduction h1 {
     margin-bottom: 1rem;
     font-size: 1em !important;
     font-weight: normal;
     line-height: 1.8em;
 }
-.github-badge{
+
+.github-badge {
     margin-bottom: 1rem;
 }
-.todo{
+
+.todo {
     margin-left: 1em;
     line-height: 1.8em;
 }
-.usage{
+
+.usage {
     margin-top: 1.5em;
 }
-.usage p{
+
+.usage p {
     /* margin-top: 0.8em; */
     line-height: 1.7em;
 }
-h2{
+
+h2 {
     font-size: 1.6em !important;
 }
-h3{
+
+h3 {
     margin-bottom: .5em;
     font-size: 1.2em !important;
 }
-.usage p + h3{
+
+.usage p+h3 {
     margin-top: 1em;
 }
-code{
+
+code {
     background: #afb8c133;
     font-weight: normal;
     padding: .2em .4em;
@@ -77,24 +107,139 @@ code{
 }
 
 .main .follower,
-.main .following{
+.main .following {
     margin-bottom: 1em;
 }
+
 .main .follower h2,
-.main .following h2{
+.main .following h2 {
     margin-bottom: .4em;
 }
 
-.bx::before{
+.bx::before {
     font-size: clamp(1.2em, 1.5vw, 1.5em);
     vertical-align: sub;
 }
-.bxl-instagram::before{
+
+.bxl-instagram::before {
     vertical-align: top;
 }
 
-.wrap .icon{
+.wrap .icon {
     display: inline-block;
     margin-top: .4em;
     margin-left: 0.4em;
+}
+
+
+
+
+/* checkbox settings 👇 */
+
+.ui-checkbox {
+    --primary-color: #1677ff;
+    --secondary-color: #fff;
+    --primary-hover-color: #4096ff;
+    /* checkbox */
+    --checkbox-diameter: 20px;
+    --checkbox-border-radius: 5px;
+    --checkbox-border-color: #d9d9d9;
+    --checkbox-border-width: 1px;
+    --checkbox-border-style: solid;
+    /* checkmark */
+    --checkmark-size: 1.2;
+}
+
+.ui-checkbox,
+.ui-checkbox *,
+.ui-checkbox *::before,
+.ui-checkbox *::after {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.ui-checkbox {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: var(--checkbox-diameter);
+    height: var(--checkbox-diameter);
+    border-radius: var(--checkbox-border-radius);
+    background: var(--secondary-color);
+    border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
+    -webkit-transition: all 0.3s;
+    -o-transition: all 0.3s;
+    transition: all 0.3s;
+    cursor: pointer;
+    position: relative;
+    vertical-align: sub;
+    margin-left: 0.1em;
+}
+
+.ui-checkbox::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
+    box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
+    border-radius: inherit;
+    opacity: 0;
+    -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+    -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+    transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+}
+
+.ui-checkbox::before {
+    top: 40%;
+    left: 50%;
+    content: "";
+    position: absolute;
+    width: 4px;
+    height: 7px;
+    border-right: 2px solid var(--secondary-color);
+    border-bottom: 2px solid var(--secondary-color);
+    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
+    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
+    transform: translate(-50%, -50%) rotate(45deg) scale(0);
+    opacity: 0;
+    -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
+    -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
+    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
+}
+
+.btn{
+    display: block !important;
+}
+
+/* actions */
+
+.ui-checkbox:hover {
+    border-color: var(--primary-color);
+}
+
+.ui-checkbox:checked {
+    background: var(--primary-color);
+    border-color: transparent;
+}
+
+.ui-checkbox:checked::before {
+    opacity: 1;
+    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
+    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
+    transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
+    -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+    -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+}
+
+.ui-checkbox:active:not(:checked)::after {
+    -webkit-transition: none;
+    -o-transition: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    transition: none;
+    opacity: 1;
 }