deploy: bfed7c8

Author: akudev

_includes/head-custom.html

@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="{{ 'assets/css/custom.css' | relative_url }}">
+<script src="{{ 'assets/js/custom.js' | relative_url }}"></script>

assets/css/custom.css

@@ -0,0 +1,145 @@
+/* color-scheme for light/default appearance */
+:root {
+    --active-bg: white;
+    --active-color: black;
+    --active-border: #0969da;
+    --inactive-bg: #eee;
+    --inactive-color: #666;
+    --inactive-border: #ccc;
+    --neutral-border: #aaa;
+}
+
+/* color-scheme for dark mode */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --active-bg: black;
+        --active-color: white;
+        --active-border: #0969da;
+        --inactive-bg: black;
+        --inactive-color: #aaa;
+        --inactive-border: #666;
+        --neutral-border: #666;
+    }
+}
+
+/* hide content in the non-current language */
+.page-language-ts .js-only,
+.page-language-ts .code-couple .language-js.highlighter-rouge {
+    display: none;
+}
+
+.page-language-js .ts-only,
+.page-language-js .code-couple .language-ts.highlighter-rouge {
+    display: none;
+}
+
+.hidden {
+    display: none;
+}
+
+
+/* tabbed switchable language area */
+.code-couple-button {
+    margin-top: 8px;
+    padding: 10px 20px;
+    border-width: 2px;
+    border-style: solid;
+    border-bottom-width: 0;
+    border-radius: 16px 16px 0 0;
+    cursor: pointer;
+}
+
+/* active */
+.code-couple-button-active {
+    color: var(--active-color);
+    background-color: var(--active-bg);
+    font-weight: bold;
+    border-color: var(--active-border);
+}
+
+/* inactive */
+.code-couple-button-inactive {
+    color: var(--inactive-color);
+    background-color: var(--inactive-bg);
+    border-color: var(--inactive-border);
+}
+
+/* default state based on page language */
+.page-language-ts .code-couple-button-ts:not(.code-couple-button-active):not(.code-couple-button-inactive),
+.page-language-js .code-couple-button-js:not(.code-couple-button-active):not(.code-couple-button-inactive) {
+    color: var(--active-color);
+    background-color: var(--active-bg);
+    font-weight: bold;
+}
+
+.page-language-ts .code-couple-button-js:not(.code-couple-button-active):not(.code-couple-button-inactive),
+.page-language-js .code-couple-button-ts:not(.code-couple-button-active):not(.code-couple-button-inactive) {
+    color: var(--inactive-color);
+    background-color: var(--inactive-bg);
+}
+
+.code-couple-container {
+    border: 1px solid var(--neutral-border);
+}
+
+
+/* overall language switch buttons */
+
+.language-switch-container {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    gap: 5px;
+    z-index: 1000;
+}
+
+.language-switch-button {
+    background-color: var(--inactive-bg);
+    color: var(--inactive-color);
+    border-color: var(--inactive-border);
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 5px;
+    padding: 5px 10px;
+    cursor: pointer;
+    transition: opacity 0.3s, background-color 0.3s;
+    opacity: 1;
+}
+
+body.page-language-js .language-switch-button.lang-js,
+body.page-language-ts .language-switch-button.lang-ts {
+    background-color: var(--active-bg);
+    color: var(--active-color);
+    border-color: var(--active-border);
+}
+
+li > section.ts-only, li > section.js-only {
+	display: inline;
+}
+
+.language-switch-button:hover {
+    opacity: 0.8;
+    background-color: rgba(20, 20, 20, 0.8);
+}
+
+/* for OS dark theme */
+@media (prefers-color-scheme: dark) {
+    .language-switch-button {
+        border-color: var(--inactive-border);
+        color: var(--inactive-color);
+        background-color: var(--inactive-bg);
+    }
+
+    body.page-language-js .language-switch-button.lang-js,
+    body.page-language-ts .language-switch-button.lang-ts {
+        background-color: var(--active-bg);
+        color: var(--active-color);
+        border-color: var(--active-border);
+    }
+}
+
+#__bs_notify__ {
+    background-color: rgba(27, 32, 50, 0.3) !important;
+    top: 40px !important;
+}