Resize searchbox

static/css/codehilite.css

@@ -1,84 +1,463 @@
-pre { line-height: 125%; background: #0d1117; color: #c9d1d9 }
-td.linenos .normal { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
-span.linenos { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
-td.linenos .special { color: #c9d1d9; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
-span.linenos.special { color: #c9d1d9; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
-.codehilite .hll { background-color: #6e7681 }
-.codehilite .c { color: #8b949e; font-style: italic } /* Comment */
-.codehilite .err { color: #f85149 } /* Error */
-.codehilite .esc { color: #c9d1d9 } /* Escape */
-.codehilite .g { color: #c9d1d9 } /* Generic */
-.codehilite .k { color: #ff7b72 } /* Keyword */
-.codehilite .l { color: #a5d6ff } /* Literal */
-.codehilite .n { color: #c9d1d9 } /* Name */
-.codehilite .o { color: #ff7b72; font-weight: bold } /* Operator */
-.codehilite .x { color: #c9d1d9 } /* Other */
-.codehilite .p { color: #c9d1d9 } /* Punctuation */
-.codehilite .ch { color: #8b949e; font-style: italic } /* Comment.Hashbang */
-.codehilite .cm { color: #8b949e; font-style: italic } /* Comment.Multiline */
-.codehilite .cp { color: #8b949e; font-weight: bold; font-style: italic } /* Comment.Preproc */
-.codehilite .cpf { color: #8b949e; font-style: italic } /* Comment.PreprocFile */
-.codehilite .c1 { color: #8b949e; font-style: italic } /* Comment.Single */
-.codehilite .cs { color: #8b949e; font-weight: bold; font-style: italic } /* Comment.Special */
-.codehilite .gd { color: #ffa198; background-color: #490202 } /* Generic.Deleted */
-.codehilite .ge { color: #c9d1d9; font-style: italic } /* Generic.Emph */
-.codehilite .gr { color: #ffa198 } /* Generic.Error */
-.codehilite .gh { color: #79c0ff; font-weight: bold } /* Generic.Heading */
-.codehilite .gi { color: #56d364; background-color: #0f5323 } /* Generic.Inserted */
-.codehilite .go { color: #8b949e } /* Generic.Output */
-.codehilite .gp { color: #8b949e } /* Generic.Prompt */
-.codehilite .gs { color: #c9d1d9; font-weight: bold } /* Generic.Strong */
-.codehilite .gu { color: #79c0ff } /* Generic.Subheading */
-.codehilite .gt { color: #ff7b72 } /* Generic.Traceback */
-.codehilite .g-Underline { color: #c9d1d9; text-decoration: underline } /* Generic.Underline */
-.codehilite .kc { color: #79c0ff } /* Keyword.Constant */
-.codehilite .kd { color: #ff7b72 } /* Keyword.Declaration */
-.codehilite .kn { color: #ff7b72 } /* Keyword.Namespace */
-.codehilite .kp { color: #79c0ff } /* Keyword.Pseudo */
-.codehilite .kr { color: #ff7b72 } /* Keyword.Reserved */
-.codehilite .kt { color: #ff7b72 } /* Keyword.Type */
-.codehilite .ld { color: #79c0ff } /* Literal.Date */
-.codehilite .m { color: #a5d6ff } /* Literal.Number */
-.codehilite .s { color: #a5d6ff } /* Literal.String */
-.codehilite .na { color: #c9d1d9 } /* Name.Attribute */
-.codehilite .nb { color: #c9d1d9 } /* Name.Builtin */
-.codehilite .nc { color: #f0883e; font-weight: bold } /* Name.Class */
-.codehilite .no { color: #79c0ff; font-weight: bold } /* Name.Constant */
-.codehilite .nd { color: #d2a8ff; font-weight: bold } /* Name.Decorator */
-.codehilite .ni { color: #ffa657 } /* Name.Entity */
-.codehilite .ne { color: #f0883e; font-weight: bold } /* Name.Exception */
-.codehilite .nf { color: #d2a8ff; font-weight: bold } /* Name.Function */
-.codehilite .nl { color: #79c0ff; font-weight: bold } /* Name.Label */
-.codehilite .nn { color: #ff7b72 } /* Name.Namespace */
-.codehilite .nx { color: #c9d1d9 } /* Name.Other */
-.codehilite .py { color: #79c0ff } /* Name.Property */
-.codehilite .nt { color: #7ee787 } /* Name.Tag */
-.codehilite .nv { color: #79c0ff } /* Name.Variable */
-.codehilite .ow { color: #ff7b72; font-weight: bold } /* Operator.Word */
-.codehilite .pm { color: #c9d1d9 } /* Punctuation.Marker */
-.codehilite .w { color: #6e7681 } /* Text.Whitespace */
-.codehilite .mb { color: #a5d6ff } /* Literal.Number.Bin */
-.codehilite .mf { color: #a5d6ff } /* Literal.Number.Float */
-.codehilite .mh { color: #a5d6ff } /* Literal.Number.Hex */
-.codehilite .mi { color: #a5d6ff } /* Literal.Number.Integer */
-.codehilite .mo { color: #a5d6ff } /* Literal.Number.Oct */
-.codehilite .sa { color: #79c0ff } /* Literal.String.Affix */
-.codehilite .sb { color: #a5d6ff } /* Literal.String.Backtick */
-.codehilite .sc { color: #a5d6ff } /* Literal.String.Char */
-.codehilite .dl { color: #79c0ff } /* Literal.String.Delimiter */
-.codehilite .sd { color: #a5d6ff } /* Literal.String.Doc */
-.codehilite .s2 { color: #a5d6ff } /* Literal.String.Double */
-.codehilite .se { color: #79c0ff } /* Literal.String.Escape */
-.codehilite .sh { color: #79c0ff } /* Literal.String.Heredoc */
-.codehilite .si { color: #a5d6ff } /* Literal.String.Interpol */
-.codehilite .sx { color: #a5d6ff } /* Literal.String.Other */
-.codehilite .sr { color: #79c0ff } /* Literal.String.Regex */
-.codehilite .s1 { color: #a5d6ff } /* Literal.String.Single */
-.codehilite .ss { color: #a5d6ff } /* Literal.String.Symbol */
-.codehilite .bp { color: #c9d1d9 } /* Name.Builtin.Pseudo */
-.codehilite .fm { color: #d2a8ff; font-weight: bold } /* Name.Function.Magic */
-.codehilite .vc { color: #79c0ff } /* Name.Variable.Class */
-.codehilite .vg { color: #79c0ff } /* Name.Variable.Global */
-.codehilite .vi { color: #79c0ff } /* Name.Variable.Instance */
-.codehilite .vm { color: #79c0ff } /* Name.Variable.Magic */
-.codehilite .il { color: #a5d6ff } /* Literal.Number.Integer.Long */
+.codehilite {
+    padding-bottom: 1rem;
+}
+
+.copy-code-button {
+    cursor: pointer;
+    display: block;
+    margin: 1rem 0 -2px auto;
+    font-size: 1.1rem !important;
+}
+
+pre {
+    line-height: 125%;
+    background: #0d1117;
+    color: #c9d1d9
+}
+
+td.linenos .normal {
+    color: #6e7681;
+    background-color: #0d1117;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+span.linenos {
+    color: #6e7681;
+    background-color: #0d1117;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+td.linenos .special {
+    color: #c9d1d9;
+    background-color: #6e7681;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+span.linenos.special {
+    color: #c9d1d9;
+    background-color: #6e7681;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.codehilite .hll {
+    background-color: #6e7681
+}
+
+.codehilite .c {
+    color: #8b949e;
+    font-style: italic
+}
+
+/* Comment */
+.codehilite .err {
+    color: #f85149
+}
+
+/* Error */
+.codehilite .esc {
+    color: #c9d1d9
+}
+
+/* Escape */
+.codehilite .g {
+    color: #c9d1d9
+}
+
+/* Generic */
+.codehilite .k {
+    color: #ff7b72
+}
+
+/* Keyword */
+.codehilite .l {
+    color: #a5d6ff
+}
+
+/* Literal */
+.codehilite .n {
+    color: #c9d1d9
+}
+
+/* Name */
+.codehilite .o {
+    color: #ff7b72;
+    font-weight: bold
+}
+
+/* Operator */
+.codehilite .x {
+    color: #c9d1d9
+}
+
+/* Other */
+.codehilite .p {
+    color: #c9d1d9
+}
+
+/* Punctuation */
+.codehilite .ch {
+    color: #8b949e;
+    font-style: italic
+}
+
+/* Comment.Hashbang */
+.codehilite .cm {
+    color: #8b949e;
+    font-style: italic
+}
+
+/* Comment.Multiline */
+.codehilite .cp {
+    color: #8b949e;
+    font-weight: bold;
+    font-style: italic
+}
+
+/* Comment.Preproc */
+.codehilite .cpf {
+    color: #8b949e;
+    font-style: italic
+}
+
+/* Comment.PreprocFile */
+.codehilite .c1 {
+    color: #8b949e;
+    font-style: italic
+}
+
+/* Comment.Single */
+.codehilite .cs {
+    color: #8b949e;
+    font-weight: bold;
+    font-style: italic
+}
+
+/* Comment.Special */
+.codehilite .gd {
+    color: #ffa198;
+    background-color: #490202
+}
+
+/* Generic.Deleted */
+.codehilite .ge {
+    color: #c9d1d9;
+    font-style: italic
+}
+
+/* Generic.Emph */
+.codehilite .gr {
+    color: #ffa198
+}
+
+/* Generic.Error */
+.codehilite .gh {
+    color: #79c0ff;
+    font-weight: bold
+}
+
+/* Generic.Heading */
+.codehilite .gi {
+    color: #56d364;
+    background-color: #0f5323
+}
+
+/* Generic.Inserted */
+.codehilite .go {
+    color: #8b949e
+}
+
+/* Generic.Output */
+.codehilite .gp {
+    color: #8b949e
+}
+
+/* Generic.Prompt */
+.codehilite .gs {
+    color: #c9d1d9;
+    font-weight: bold
+}
+
+/* Generic.Strong */
+.codehilite .gu {
+    color: #79c0ff
+}
+
+/* Generic.Subheading */
+.codehilite .gt {
+    color: #ff7b72
+}
+
+/* Generic.Traceback */
+.codehilite .g-Underline {
+    color: #c9d1d9;
+    text-decoration: underline
+}
+
+/* Generic.Underline */
+.codehilite .kc {
+    color: #79c0ff
+}
+
+/* Keyword.Constant */
+.codehilite .kd {
+    color: #ff7b72
+}
+
+/* Keyword.Declaration */
+.codehilite .kn {
+    color: #ff7b72
+}
+
+/* Keyword.Namespace */
+.codehilite .kp {
+    color: #79c0ff
+}
+
+/* Keyword.Pseudo */
+.codehilite .kr {
+    color: #ff7b72
+}
+
+/* Keyword.Reserved */
+.codehilite .kt {
+    color: #ff7b72
+}
+
+/* Keyword.Type */
+.codehilite .ld {
+    color: #79c0ff
+}
+
+/* Literal.Date */
+.codehilite .m {
+    color: #a5d6ff
+}
+
+/* Literal.Number */
+.codehilite .s {
+    color: #a5d6ff
+}
+
+/* Literal.String */
+.codehilite .na {
+    color: #c9d1d9
+}
+
+/* Name.Attribute */
+.codehilite .nb {
+    color: #c9d1d9
+}
+
+/* Name.Builtin */
+.codehilite .nc {
+    color: #f0883e;
+    font-weight: bold
+}
+
+/* Name.Class */
+.codehilite .no {
+    color: #79c0ff;
+    font-weight: bold
+}
+
+/* Name.Constant */
+.codehilite .nd {
+    color: #d2a8ff;
+    font-weight: bold
+}
+
+/* Name.Decorator */
+.codehilite .ni {
+    color: #ffa657
+}
+
+/* Name.Entity */
+.codehilite .ne {
+    color: #f0883e;
+    font-weight: bold
+}
+
+/* Name.Exception */
+.codehilite .nf {
+    color: #d2a8ff;
+    font-weight: bold
+}
+
+/* Name.Function */
+.codehilite .nl {
+    color: #79c0ff;
+    font-weight: bold
+}
+
+/* Name.Label */
+.codehilite .nn {
+    color: #ff7b72
+}
+
+/* Name.Namespace */
+.codehilite .nx {
+    color: #c9d1d9
+}
+
+/* Name.Other */
+.codehilite .py {
+    color: #79c0ff
+}
+
+/* Name.Property */
+.codehilite .nt {
+    color: #7ee787
+}
+
+/* Name.Tag */
+.codehilite .nv {
+    color: #79c0ff
+}
+
+/* Name.Variable */
+.codehilite .ow {
+    color: #ff7b72;
+    font-weight: bold
+}
+
+/* Operator.Word */
+.codehilite .pm {
+    color: #c9d1d9
+}
+
+/* Punctuation.Marker */
+.codehilite .w {
+    color: #6e7681
+}
+
+/* Text.Whitespace */
+.codehilite .mb {
+    color: #a5d6ff
+}
+
+/* Literal.Number.Bin */
+.codehilite .mf {
+    color: #a5d6ff
+}
+
+/* Literal.Number.Float */
+.codehilite .mh {
+    color: #a5d6ff
+}
+
+/* Literal.Number.Hex */
+.codehilite .mi {
+    color: #a5d6ff
+}
+
+/* Literal.Number.Integer */
+.codehilite .mo {
+    color: #a5d6ff
+}
+
+/* Literal.Number.Oct */
+.codehilite .sa {
+    color: #79c0ff
+}
+
+/* Literal.String.Affix */
+.codehilite .sb {
+    color: #a5d6ff
+}
+
+/* Literal.String.Backtick */
+.codehilite .sc {
+    color: #a5d6ff
+}
+
+/* Literal.String.Char */
+.codehilite .dl {
+    color: #79c0ff
+}
+
+/* Literal.String.Delimiter */
+.codehilite .sd {
+    color: #a5d6ff
+}
+
+/* Literal.String.Doc */
+.codehilite .s2 {
+    color: #a5d6ff
+}
+
+/* Literal.String.Double */
+.codehilite .se {
+    color: #79c0ff
+}
+
+/* Literal.String.Escape */
+.codehilite .sh {
+    color: #79c0ff
+}
+
+/* Literal.String.Heredoc */
+.codehilite .si {
+    color: #a5d6ff
+}
+
+/* Literal.String.Interpol */
+.codehilite .sx {
+    color: #a5d6ff
+}
+
+/* Literal.String.Other */
+.codehilite .sr {
+    color: #79c0ff
+}
+
+/* Literal.String.Regex */
+.codehilite .s1 {
+    color: #a5d6ff
+}
+
+/* Literal.String.Single */
+.codehilite .ss {
+    color: #a5d6ff
+}
+
+/* Literal.String.Symbol */
+.codehilite .bp {
+    color: #c9d1d9
+}
+
+/* Name.Builtin.Pseudo */
+.codehilite .fm {
+    color: #d2a8ff;
+    font-weight: bold
+}
+
+/* Name.Function.Magic */
+.codehilite .vc {
+    color: #79c0ff
+}
+
+/* Name.Variable.Class */
+.codehilite .vg {
+    color: #79c0ff
+}
+
+/* Name.Variable.Global */
+.codehilite .vi {
+    color: #79c0ff
+}
+
+/* Name.Variable.Instance */
+.codehilite .vm {
+    color: #79c0ff
+}
+
+/* Name.Variable.Magic */
+.codehilite .il {
+    color: #a5d6ff
+}
+
+/* Literal.Number.Integer.Long */

static/css/style.css

@@ -37,13 +37,6 @@ blockquote {
   background-color: #f8f8f8;
 }
 
-.copy-code-button {
-  cursor: pointer;
-  display: block;
-  margin: 1rem 0 -2px auto;
-  font-size: 1.1rem !important;
-}
-
 button {
   padding: 0.5rem;
   border: 0.1;
@@ -70,7 +63,9 @@ button {
   width: 30%;
 }
 
-
+p.lang {
+  margin: 0;
+}
 
 /* Блок для правильной вёрстки аудио/видео начало */
 /* Применяем max-width для замещаемых элементов и контролов формы. */
@@ -126,6 +121,12 @@ body {
   grid-template-columns: repeat(6, 1fr);
 }
 
+header {
+  display: grid;
+  align-content: space-between;
+  grid-row-end: 2    
+}
+
 header,
 footer,
 main {
@@ -135,7 +136,17 @@ main {
 .social-icons {
   grid-column-start: 3;
   grid-column-end: 5;
+  align-self: start;
   justify-self: end;
+  grid-row-end: 2  
+}
+
+#search {
+  grid-column-start: 4;
+  grid-column-end: 5;
+  justify-self: end;
+  align-self: end;
+  grid-row-end: 2
 }
 
 footer,
@@ -173,8 +184,11 @@ main,
 
 @media screen and (max-width:50em) {
 
-  header,
-  main {
+  header {
+    grid-column-end: 4;
+  }
+
+  main, #search, .social-icons {
     grid-column-end: 7
   }
 }

templates/base.j2

@@ -23,6 +23,9 @@
         {% endif %}
     </main>
     {% include "components/social.j2" %}
+    {% if config.pagefind %}
+    {% include "components/search.j2" %}
+    {% endif %}
     {% include "components/sidebar.j2" %}
     {% include "components/footer.j2" %}
     {% include "components/script.j2" %}

templates/components/all_languages.j2

@@ -1,13 +1,12 @@
+<p class="lang">
 {% if home %}
-<p>&#127760;
+&#127760;
     {% for key, value in config.languages.items() %}
     {% if key != language %}
     <a href="/{{ key }}">{{ value.language_name }}</a>
     {% endif %}
     {% endfor %}
-</p>
 {% else %}
-<p>
     &#127760;
     {% for key, value in config.languages.items() %}
     {% if key != language %}
@@ -15,5 +14,5 @@
         value.language_name }}</a>
     {% endif %}
     {% endfor %}
-</p>
 {% endif %}
+</p>

templates/components/header.j2

@@ -1,5 +1,5 @@
 <header>
-    <a href="/{{ language }}">
+    <a href="/{{ language }}/">
         <img src="/logo.svg" alt="{{ config['languages'][language]['title'] }}" />
         <h3>{{ config['languages'][language]['description'] }}</h3>
     </a>

templates/components/post_summary.j2

@@ -1,6 +1,6 @@
 <article>
     <h2>
-        <a class="index-title" href="/{{ language }}{{ url }}" rel="permalink" title="{{ post.title }}">{{ post.title }}</a>
+        <a class="index-title" href="/{{ language }}{{ url }}/" rel="permalink" title="{{ post.title }}">{{ post.title }}</a>
     </h2>
     {% include "components/author_and_date.j2" %}
     {% include "components/image.j2" %}

templates/components/search.j2

@@ -0,0 +1,16 @@
+<div id="search"></div>
+<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
+<script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
+<script>
+    window.addEventListener('DOMContentLoaded', (event) => {
+        new PagefindUI(
+            {
+                element: "#search",
+                translations: {
+                    "placeholder": "",
+                    "clear_search": ""
+                }
+            }
+        );
+    });
+</script>

templates/components/sidebar.j2

@@ -3,7 +3,7 @@
         {% for section, urls in posts[language].items() %}
         {% if section != "/" %}
         <p>
-            <a href="/{{ language}}/{{ section }}">{{ translate(section, language) }} ({{ urls | length }})</a>
+            <a href="/{{ language}}/{{ section }}/">{{ translate(section, language) }} ({{ urls | length }})</a>
         </p>
         {% endif %}
         {% endfor %}

templates/components/single.j2

@@ -1,7 +1,8 @@
-<article>
+<article data-pagefind-body>
+    <header>
         <h1>{{ post.title }}</h1>
+    </header>
     {% include "components/author_and_date.j2" %}
     {% include "components/image.j2" %}
     {{ post.content }}
 </article>
-

templates/components/social.j2

@@ -1,20 +1,17 @@
 <div class="social-icons">
     {% if config.languages[language].youtube %}
     <a href="https://youtube.com/{{ config.languages[language].youtube }}">
-        <img src="/images/youtube.svg"
-            alt="{{ config.languages[language].title }}" width="100" />
+        <img src="/images/youtube.svg" alt="{{ config.languages[language].title }}" width="60" />
     </a>
     {% endif %}
     {% if config.languages[language].github %}
     <a href="https://github.com/{{ config.languages[language].github }}">
-        <img src="/images/github.svg"
-            alt="{{ config.languages[language].title }}" width="100" />
+        <img src="/images/github.svg" alt="{{ config.languages[language].title }}" width="60" />
     </a>
     {% endif %}
     {% if config.languages[language].telegram %}
     <a href="https://t.me/{{ config.languages[language].telegram }}">
-        <img src="/images/telegram.svg"
-            alt="{{ config.languages[language].title }}" width="100" />
+        <img src="/images/telegram.svg" alt="{{ config.languages[language].title }}" width="60" />
     </a>
     {% endif %}
 </div>