diff --git a/blog.json b/blog.json index f4c4413..e5c0c0c 100644 --- a/blog.json +++ b/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", diff --git a/content/critical.css b/content/critical.css index fe5b2f2..92ddef7 100644 --- a/content/critical.css +++ b/content/critical.css @@ -1,9 +1,5 @@ :root { - --bq-b: #ede9d3; - - --bqw: 2px; - - --a-f: #cdc4c4; /* #9e9b9b; */ + --af: #cdc4c4; } *, @@ -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 { - text-align: center; - margin: 1em; - font-size: 2em; -} - -li { - margin: 0.5em; -} - -#info-bar { - text-align: center; -} - -#post-content { - padding: 0.3em; +main { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; line-height: 1.4; } -a { - text-decoration: none; - font-style: italic; - color: var(--a-f); -} - -*[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; +footer { + text-align: center; + -webkit-filter: brightness(75%); + filter: brightness(75%); } br { margin-bottom: 0.2em; } -main { - height: 96.5vh; - display: flex; - flex-direction: column; +hr { + margin-top: 1em; } -footer { +nav { text-align: center; - filter: brightness(75%); - - display: flex; - flex-direction: column; - flex-grow: 2; - justify-content: flex-end; +} + +#blist { + margin-left: 1em; +} + +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; } diff --git a/content/post_critical.css b/content/post_critical.css index e545bd3..a390907 100644 --- a/content/post_critical.css +++ b/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; -} diff --git a/content/styles.css b/content/styles.css index df3f7d9..d5e8e56 100644 --- a/content/styles.css +++ b/content/styles.css @@ -1,13 +1,9 @@ @import url(/content/fonts/Hack.min.css); :root { - --bq-f: #e6e0c8; - - --cd-b: #1f1b1a; - --cd-f: #f0f3e6; - --cd-bd: #181414; - - --scrlh: 6px; /* TODO Firefox */ + --cf: #f0f3e6; + --cb: #1f1b1a; + --s: 6px; } *, @@ -16,10 +12,7 @@ font-family: Hack, hack, monospace; scrollbar-width: none; - -ms-overflow-style: none; - - scrollbar-color: var(--cd-bd) transparent; - + scrollbar-color: var(--cb) 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, -pre * { - background-color: var(--cd-b); -} - -pre, -pre *, -code { - color: var(--cd-f); -} - -code:not(pre code), -time { - background-color: var(--cd-b); -} - -blockquote, -blockquote * { - color: var(--bq-f); +code, +time, +pre { + color: var(--cf); + background-color: var(--cb); } *[h]:hover > a, @@ -81,9 +60,9 @@ blockquote * { @media only screen and (max-width: 1200px) { *[h] > a, - *[h]:hover > a, - *[h]:focus > a { - opacity: 1; + *[h] > a:hover, + *[h] > a:focus { + opacity: 1 !important; } } @@ -110,28 +89,17 @@ blockquote * { --b: #000; --f: #fff; - --bq-f: #ededed; - --bq-b: #868e91; + --cf: #f0f0f0; + --cb: #090909; - --cd-b: #090909; - --cd-f: #f0f0f0; + --qf: #ededed; + --qb: #868e91; - --a-f: #a9c4d1; + --af: #a9c4d1; - --bqw: 4px; + --bw: 4px; - --scrlh: initial; /* TODO: Firefox */ - } - - html::-webkit-scrollbar { - display: initial !important; - } - - *, - *::before, - *::after { - scrollbar-width: initial !important; - -ms-overflow-style: initial !important; + --s: initial; } a { diff --git a/scripts/blog.py b/scripts/blog.py index 2b77455..fa2a3eb 100755 --- a/scripts/blog.py +++ b/scripts/blog.py @@ -215,7 +215,6 @@ POST_TEMPLATE: typing.Final[str] = ( -

{post_title}

@@ -253,9 +252,10 @@ POST_TEMPLATE: typing.Final[str] = (
+
{post_content}
-
+ """ ) @@ -269,7 +269,6 @@ INDEX_TEMPLATE: typing.Final[str] = ( -

{blog_header}

@@ -301,9 +300,10 @@ INDEX_TEMPLATE: typing.Final[str] = (
-
    {blog_list}
- +
+
    {blog_list}
+ """ )