diff --git a/content/blog/2024-01-10-graph-comment/graphcomments-js.png b/content/blog/2024-01-10-graph-comment/graphcomments-js.png new file mode 100644 index 0000000..9a206ac Binary files /dev/null and b/content/blog/2024-01-10-graph-comment/graphcomments-js.png differ diff --git a/content/blog/2024-01-10-graph-comment/index.md b/content/blog/2024-01-10-graph-comment/index.md index 0740710..ffc4798 100644 --- a/content/blog/2024-01-10-graph-comment/index.md +++ b/content/blog/2024-01-10-graph-comment/index.md @@ -39,4 +39,12 @@ and [used in the page itself](https://github.com/spolischook/kotoblog_v3/content My experience with Hugo has been remarkably positive, particularly for public websites. Its versatility and robust features have provided an excellent foundation for my tech blog's transformation. The extensibility of Hugo allows for seamless integration of additional functionalities, making it a dynamic and scalable solution. Moreover, as I explored alternatives for comments within the market, it became evident that the landscape is rich with options. While Graph Comment proved to be a quick and effective choice for my needs, the maturity and refinement of longstanding services in the comments domain make it clear that there are numerous well-polished alternatives to suit diverse preferences and requirements. +### P.S. + +Of course, there are the same issues with GraphComment as with Disqus. +Next time I'll try https://giscus.app/ which declare: +> No tracking, no ads, always free. + +![graphcomment js issue](./graphcomments-js.png) + {{< comments >}} diff --git a/input.css b/input.css index 8f87536..8729f59 100644 --- a/input.css +++ b/input.css @@ -185,3 +185,6 @@ li { .open .hamburger-bottom { transform: rotate(-45deg) translateY(6px) translateX(-6px); } +blockquote { + @apply p-4 my-4 border-s-4 border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-800 +} \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 21876ef..d1d30a1 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -683,18 +683,14 @@ video { height: 18rem; } -.min-h-screen { - min-height: 100vh; -} - -.min-h-\[\] { - min-height: ; -} - .min-h-\[48px\] { min-height: 48px; } +.min-h-screen { + min-height: 100vh; +} + .w-4 { width: 1rem; } @@ -793,12 +789,6 @@ video { margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } -.space-y-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - .space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); @@ -973,18 +963,6 @@ video { text-align: center; } -.align-baseline { - vertical-align: baseline; -} - -.align-bottom { - vertical-align: bottom; -} - -.align-text-bottom { - vertical-align: text-bottom; -} - .font-sans { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } @@ -1368,6 +1346,26 @@ li { transform: rotate(-45deg) translateY(6px) translateX(-6px); } +blockquote { + margin-top: 1rem; + margin-bottom: 1rem; + border-inline-start-width: 4px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); + padding: 1rem; +} + +@media (prefers-color-scheme: dark) { + blockquote { + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); + } +} + .hover\:cursor-pointer:hover { cursor: pointer; } @@ -1497,4 +1495,4 @@ li { .md\:hidden { display: none; } -} +} \ No newline at end of file