init

assets/habr-fixer.js

@@ -0,0 +1,14 @@
+(function(document)
+{
+    const onDOMBuild = () =>
+    {
+        // Fix blurred images
+        const images = document.querySelectorAll('img[data-blurred="true"]');
+        for (let image of images)
+        {
+            image.src = image.dataset.src;
+        }
+    };
+
+    document.addEventListener('DOMContentLoaded', onDOMBuild);
+})(document);

assets/highlight.min.css

@@ -0,0 +1,9 @@
+/*!
+  Theme: Default
+  Description: Original highlight.js style
+  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
+  Maintainer: @highlightjs/core-team
+  Website: https://highlightjs.org/
+  License: see project LICENSE
+  Touched: 2021
+*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

assets/style.css

@@ -0,0 +1,89 @@
+body {
+  background-color: #F1F5F9;
+  font-family: sans-serif;
+  font-size: 14px;
+}
+header, main, footer {
+  margin: 0 auto;
+  max-width: 1080px;
+}
+article {
+  background-color: white;
+  padding: 0.5rem 1.5rem;
+  border: 1px solid #E6E7E9;
+  border-radius: 8px;
+}
+pre code.hljs {
+  border-radius: 8px;
+}
+article img {
+  height: 100% !important;
+  width: 100% !important;
+  object-fit: scale-down;
+}
+blockquote {
+  border-left: 4px solid #bbbbbb;
+  padding-left: 8px;
+  margin-left: 4px;
+}
+figure {
+  text-align: center;
+}
+figcaption {
+  text-align: center;
+  opacity: 60%;
+}
+#date-published {
+  opacity: 60%;
+}
+#article-title {
+  font-size: 28px;
+  font-weight: 500;
+}
+#tags {
+  margin: 1rem 0;
+}
+#hubs {
+  margin: 1rem 0;
+}
+span.comma:not(:empty) ~ span.comma:not(:empty):before {
+  content: ", ";
+}
+#comments {
+  margin-top: 1rem;
+  background-color: white;
+  padding: 0.5rem 1.5rem;
+  border: 1px solid #E6E7E9;
+  border-radius: 8px;
+}
+.comment {
+  padding: 0.5rem 0;
+  margin: 0;
+}
+.comment-header {
+  background-color: #f5f5f5;
+}
+.replies-list {
+  margin: 1rem 0;
+}
+ul.inline-list {
+  margin: 0;
+  padding: 0;
+}
+ul.inline-list li {
+  display: inline;
+  list-style: none;
+}
+table, th, td {
+  border: 1px solid #E6E7E9;
+  border-collapse: collapse;
+  padding: 2px 16px;
+}
+:target {
+  border-left: 4px solid black;
+  padding: 0 1rem !important;
+  background-color: #f8f8f8;
+  .comment-header {
+    background-color: #cccccc;
+  }
+}