update @ Sun Oct 29 00:03:22 EEST 2023

Signed-off-by: Ari Archer <ari.web.xyz@gmail.com>

blog.json

@@ -46,7 +46,7 @@
   "website": "https://ari-web.xyz",
   "blog": "https://blog.ari-web.xyz",
   "source": "/git",
-  "visitor-count": "/visit",
+  "visitor-count": "https://server.ari-web.xyz/visit",
   "comment": "/c",
   "theme": {
     "primary": "#262220",
@@ -2159,7 +2159,7 @@
     "how-to-print-coloured-text-in-c-and-c--": {
       "title": "how to print coloured text in c and c++",
       "description": "this is a simple problem but ppl look for complex solutions",
-      "content": "I decided to make this blog as I always need to\nfind how to print coloured text, so this is my solution to it\n\n## C++\n\n### Code\n\n    #define ANSI_BEGIN \"\\x1B[\"\n\n    namespace AnsiColour {\n    const char *red = ANSI_BEGIN \"31m\";\n    const char *green = ANSI_BEGIN \"32m\";\n    const char *yellow = ANSI_BEGIN \"33m\";\n    const char *blue = ANSI_BEGIN \"34m\";\n    const char *magenta = ANSI_BEGIN \"35m\";\n    const char *cyan = ANSI_BEGIN \"36m\";\n    const char *white = ANSI_BEGIN \"37m\";\n    } // namespace AnsiColour\n\n    namespace AnsiEffect {\n    const char *bold = ANSI_BEGIN \"1m\";\n    const char *reset = ANSI_BEGIN \"0m\";\n    const char *underline = ANSI_BEGIN \"4m\";\n    } // namespace AnsiEffect\n\n### Example usage\n\n    std::cout << AnsiColour::blue << AnsiEffect::bold\n        << \"Hello world\" << AnsiEffect::reset << '\\n';\n\n## C\n\n### Code\n\n    #define ANSI_BEGIN \"\\x1B[\"\n\n    const char *CLR_RED = ANSI_BEGIN \"31m\";\n    const char *CLR_GREEN = ANSI_BEGIN \"32m\";\n    const char *CLR_YELLOW = ANSI_BEGIN \"33m\";\n    const char *CLR_BLUE = ANSI_BEGIN \"34m\";\n    const char *CLR_MAGENTA = ANSI_BEGIN \"35m\";\n    const char *CLR_CYAN = ANSI_BEGIN \"36m\";\n    const char *CLR_WHITE = ANSI_BEGIN \"37m\";\n\n    const char *EFF_BOLD = ANSI_BEGIN \"1m\";\n    const char *EFF_RESET = ANSI_BEGIN \"0m\";\n    const char *EFF_UNDERLINE = ANSI_BEGIN \"4m\";\n\n### Example usage\n\n    printf(\"%s%sHello world%s\\n\", CLR_BLUE, EFF_BOLD, EFF_RESET);\n",
+      "content": "I decided to make this blog as I always need to\nfind how to print coloured text, so this is my solution to it\n\n## C++\n\n### Code\n\n    #define ANSI_BEGIN \"\\x1B[\"\n\n    namespace AnsiColour {\n        const char *red = ANSI_BEGIN \"31m\";\n        const char *green = ANSI_BEGIN \"32m\";\n        const char *yellow = ANSI_BEGIN \"33m\";\n        const char *blue = ANSI_BEGIN \"34m\";\n        const char *magenta = ANSI_BEGIN \"35m\";\n        const char *cyan = ANSI_BEGIN \"36m\";\n        const char *white = ANSI_BEGIN \"37m\";\n    } // namespace AnsiColour\n\n    namespace AnsiEffect {\n        const char *bold = ANSI_BEGIN \"1m\";\n        const char *reset = ANSI_BEGIN \"0m\";\n        const char *underline = ANSI_BEGIN \"4m\";\n    } // namespace AnsiEffect\n\n### Example usage\n\n    std::cout << AnsiColour::blue << AnsiEffect::bold\n        << \"Hello world\" << AnsiEffect::reset << '\\n';\n\n## C\n\n### Code\n\n    #define ANSI_BEGIN \"\\x1B[\"\n\n    const char *CLR_RED = ANSI_BEGIN \"31m\";\n    const char *CLR_GREEN = ANSI_BEGIN \"32m\";\n    const char *CLR_YELLOW = ANSI_BEGIN \"33m\";\n    const char *CLR_BLUE = ANSI_BEGIN \"34m\";\n    const char *CLR_MAGENTA = ANSI_BEGIN \"35m\";\n    const char *CLR_CYAN = ANSI_BEGIN \"36m\";\n    const char *CLR_WHITE = ANSI_BEGIN \"37m\";\n\n    const char *EFF_BOLD = ANSI_BEGIN \"1m\";\n    const char *EFF_RESET = ANSI_BEGIN \"0m\";\n    const char *EFF_UNDERLINE = ANSI_BEGIN \"4m\";\n\n### Example usage\n\n    printf(\"%s%sHello world%s\\n\", CLR_BLUE, EFF_BOLD, EFF_RESET);",
       "keywords": [
         "colour",
         "C++",
@@ -2174,7 +2174,8 @@
         "colors",
         "terminal"
       ],
-      "created": 1652041043.26174
+      "created": 1652041043.26174,
+      "edited": 1698513497.438135
     },
     "happy-pi-e--day": {
       "title": "happy pi(e) day",

content/critical.css

@@ -1,9 +1,5 @@
 :root {
-    --bq-b: #ede9d3;
+    --af: #cdc4c4;
-
-    --bqw: 2px;
-
-    --a-f: #cdc4c4; /* #9e9b9b; */
 }
 
 *,
@@ -14,7 +10,16 @@
     word-wrap: break-word;
 }
 
+h1 {
+    text-align: center;
+}
+
 html {
+    background-image: -o-radial-gradient(
+        circle,
+        rgba(249, 240, 194, 0.15) 1px,
+        transparent 1px
+    );
     background-image: radial-gradient(
         circle,
         rgba(249, 240, 194, 0.15) 1px,
@@ -25,71 +30,68 @@ html {
 }
 
 body {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+
+    padding: 2em;
+
     margin: auto;
-    padding: 2rem;
     max-width: 1100px;
     min-height: 100vh;
     text-rendering: optimizeSpeed;
 }
 
-h1 {
+main {
-    text-align: center;
+    -webkit-box-flex: 1;
-    margin: 1em;
+    -ms-flex: 1;
-    font-size: 2em;
+    flex: 1;
-}
-
-li {
-    margin: 0.5em;
-}
-
-#info-bar {
-    text-align: center;
-}
-
-#post-content {
-    padding: 0.3em;
     line-height: 1.4;
 }
 
-a {
+footer {
-    text-decoration: none;
+    text-align: center;
-    font-style: italic;
+    -webkit-filter: brightness(75%);
-    color: var(--a-f);
+    filter: brightness(75%);
-}
-
-*[h] > a {
-    opacity: 0.3;
-    -webkit-transition: opacity 0.1s ease-in-out;
-    -o-transition: opacity 0.1s ease-in-out;
-    transition: opacity 0.1s ease-in-out;
-}
-
-nav img {
-    height: 1rem;
-}
-
-code:not(pre code),
-time {
-    border-radius: 2px;
-    padding: 0.2em;
 }
 
 br {
     margin-bottom: 0.2em;
 }
 
-main {
+hr {
-    height: 96.5vh;
+    margin-top: 1em;
-    display: flex;
-    flex-direction: column;
 }
 
-footer {
+nav {
     text-align: center;
-    filter: brightness(75%);
+}
-
+
-    display: flex;
+#blist {
-    flex-direction: column;
+    margin-left: 1em;
-    flex-grow: 2;
+}
-    justify-content: flex-end;
+
+li {
+    margin-bottom: 0.3em;
+}
+
+a {
+    text-decoration: none;
+    font-style: italic;
+    color: var(--af);
+}
+
+nav img {
+    height: 1em;
+}
+
+code:not(pre code),
+time,
+pre {
+    border-radius: 2px;
+    padding: 0.2em;
 }

content/post_critical.css

@@ -1,3 +1,21 @@
+:root {
+    --qw: 2px;
+    --qb: #ede9d3;
+    --qf: #e6e0c8;
+}
+
+pre {
+    padding: 1em;
+    overflow-y: auto;
+}
+
+*[h] > a {
+    opacity: 0.3;
+    -webkit-transition: opacity 0.1s ease-in-out;
+    -o-transition: opacity 0.1s ease-in-out;
+    transition: opacity 0.1s ease-in-out;
+}
+
 blockquote {
     margin: 10px 0;
     overflow: hidden;
@@ -6,24 +24,16 @@ blockquote {
     position: relative;
 }
 
+blockquote,
+blockquote * {
+    color: var(--qf);
+}
+
 blockquote:before {
     content: "";
-    border-left: var(--bqw) solid var(--bq-b); /* Thx cel */
+    border-left: var(--qw) solid var(--qb);
     position: absolute;
     bottom: 14px;
     top: 13px;
     left: 0;
 }
-
-pre {
-    padding: 1em;
-    border-radius: 4px;
-}
-
-pre,
-pre code {
-    overflow-x: auto !important;
-
-    scrollbar-width: initial;
-    -ms-overflow-style: initial;
-}

content/styles.css

@@ -1,13 +1,9 @@
 @import url(/content/fonts/Hack.min.css);
 
 :root {
-    --bq-f: #e6e0c8;
+    --cf: #f0f3e6;
-
+    --cb: #1f1b1a;
-    --cd-b: #1f1b1a;
+    --s: 6px;
-    --cd-f: #f0f3e6;
-    --cd-bd: #181414;
-
-    --scrlh: 6px; /* TODO Firefox */
 }
 
 *,
@@ -16,10 +12,7 @@
     font-family: Hack, hack, monospace;
 
     scrollbar-width: none;
-    -ms-overflow-style: none;
+    scrollbar-color: var(--cb) transparent;
-
-    scrollbar-color: var(--cd-bd) transparent;
-
     scroll-behavior: smooth;
 
     outline-offset: 3px;
@@ -27,7 +20,7 @@
 
 ::-webkit-scrollbar,
 ::-webkit-scrollbar-thumb {
-    height: var(--scrlh);
+    height: var(--s);
 }
 
 ::-webkit-scrollbar {
@@ -35,7 +28,7 @@
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--cd-bd);
+    background-color: var(--cb);
 }
 
 html::-webkit-scrollbar,
@@ -48,25 +41,11 @@ a:hover {
     text-decoration: underline;
 }
 
-pre,
+code,
-pre * {
+time,
-    background-color: var(--cd-b);
+pre {
-}
+    color: var(--cf);
-
+    background-color: var(--cb);
-pre,
-pre *,
-code {
-    color: var(--cd-f);
-}
-
-code:not(pre code),
-time {
-    background-color: var(--cd-b);
-}
-
-blockquote,
-blockquote * {
-    color: var(--bq-f);
 }
 
 *[h]:hover > a,
@@ -81,9 +60,9 @@ blockquote * {
 
 @media only screen and (max-width: 1200px) {
     *[h] > a,
-    *[h]:hover > a,
+    *[h] > a:hover,
-    *[h]:focus > a {
+    *[h] > a:focus {
-        opacity: 1;
+        opacity: 1 !important;
     }
 }
 
@@ -110,28 +89,17 @@ blockquote * {
         --b: #000;
         --f: #fff;
 
-        --bq-f: #ededed;
+        --cf: #f0f0f0;
-        --bq-b: #868e91;
+        --cb: #090909;
 
-        --cd-b: #090909;
+        --qf: #ededed;
-        --cd-f: #f0f0f0;
+        --qb: #868e91;
 
-        --a-f: #a9c4d1;
+        --af: #a9c4d1;
 
-        --bqw: 4px;
+        --bw: 4px;
 
-        --scrlh: initial; /* TODO: Firefox */
+        --s: initial;
-    }
-
-    html::-webkit-scrollbar {
-        display: initial !important;
-    }
-
-    *,
-    *::before,
-    *::after {
-        scrollbar-width: initial !important;
-        -ms-overflow-style: initial !important;
     }
 
     a {

scripts/blog.py

@@ -215,7 +215,6 @@ POST_TEMPLATE: typing.Final[str] = (
 </head>
 
 <body>
-<main id="post-content">
  <header role="group">
   <h1 role="heading" aria-level="1">{post_title}</h1>
 
@@ -253,9 +252,10 @@ POST_TEMPLATE: typing.Final[str] = (
     <hr aria-hidden="true" role="seperator" />
   </nav>
  </header>
+<main>
  <article id="main">{post_content}</article>
- <footer><p>{author} &lt;<a href="mailto:{email}">{email}</a>&gt; + {license}</p></footer>
 </main>
+ <footer><p>{author} &lt;<a href="mailto:{email}">{email}</a>&gt; + {license}</p></footer>
 </body>
 </html>"""
 )
@@ -269,7 +269,6 @@ INDEX_TEMPLATE: typing.Final[str] = (
 </head>
 
 <body>
-<main id="post-content">
  <header role="group">
   <h1 role="heading" aria-level="1">{blog_header}</h1>
 
@@ -301,9 +300,10 @@ INDEX_TEMPLATE: typing.Final[str] = (
     <hr aria-hidden="true" role="seperator" />
   </nav>
  </header>
- <article id="main"><ol reversed>{blog_list}</ol></article>
+<main>
- <footer><p>{author} &lt;<a href="mailto:{email}">{email}</a>&gt; + {license}</p></footer>
+ <article id="main"><ol reversed id=blist>{blog_list}</ol></article>
 </main>
+ <footer><p>{author} &lt;<a href="mailto:{email}">{email}</a>&gt; + {license}</p></footer>
 </body>
 </html>"""
 )