Skip to content

Commit cd1e0e9

Browse files
flovogtflovogt
committed
deploy: b2eb072 
0 parents  commit cd1e0e9

2,799 files changed

Lines changed: 61236 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎_includes/head-custom.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<link rel="stylesheet" href="{{ 'assets/css/custom.css' | relative_url }}">
2+
<script src="{{ 'assets/js/custom.js' | relative_url }}"></script>

‎assets/css/custom.css‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/* color-scheme for light/default appearance */
2+
:root {
3+
--active-bg: white;
4+
--active-color: black;
5+
--active-border: #0969da;
6+
--inactive-bg: #eee;
7+
--inactive-color: #666;
8+
--inactive-border: #ccc;
9+
--neutral-border: #aaa;
10+
}
11+
12+
/* color-scheme for dark mode */
13+
@media (prefers-color-scheme: dark) {
14+
:root {
15+
--active-bg: black;
16+
--active-color: white;
17+
--active-border: #0969da;
18+
--inactive-bg: black;
19+
--inactive-color: #aaa;
20+
--inactive-border: #666;
21+
--neutral-border: #666;
22+
}
23+
}
24+
25+
/* hide content in the non-current language */
26+
.page-language-ts .js-only,
27+
.page-language-ts .code-couple .language-js.highlighter-rouge {
28+
display: none;
29+
}
30+
31+
.page-language-js .ts-only,
32+
.page-language-js .code-couple .language-ts.highlighter-rouge {
33+
display: none;
34+
}
35+
36+
.hidden {
37+
display: none;
38+
}
39+
40+
41+
/* tabbed switchable language area */
42+
.code-couple-button {
43+
margin-top: 8px;
44+
padding: 10px 20px;
45+
border-width: 2px;
46+
border-style: solid;
47+
border-bottom-width: 0;
48+
border-radius: 16px 16px 0 0;
49+
cursor: pointer;
50+
}
51+
52+
/* active */
53+
.code-couple-button-active {
54+
color: var(--active-color);
55+
background-color: var(--active-bg);
56+
font-weight: bold;
57+
border-color: var(--active-border);
58+
}
59+
60+
/* inactive */
61+
.code-couple-button-inactive {
62+
color: var(--inactive-color);
63+
background-color: var(--inactive-bg);
64+
border-color: var(--inactive-border);
65+
}
66+
67+
/* default state based on page language */
68+
.page-language-ts .code-couple-button-ts:not(.code-couple-button-active):not(.code-couple-button-inactive),
69+
.page-language-js .code-couple-button-js:not(.code-couple-button-active):not(.code-couple-button-inactive) {
70+
color: var(--active-color);
71+
background-color: var(--active-bg);
72+
font-weight: bold;
73+
}
74+
75+
.page-language-ts .code-couple-button-js:not(.code-couple-button-active):not(.code-couple-button-inactive),
76+
.page-language-js .code-couple-button-ts:not(.code-couple-button-active):not(.code-couple-button-inactive) {
77+
color: var(--inactive-color);
78+
background-color: var(--inactive-bg);
79+
}
80+
81+
.code-couple-container {
82+
border: 1px solid var(--neutral-border);
83+
}
84+
85+
86+
/* overall language switch buttons */
87+
88+
.language-switch-container {
89+
position: fixed;
90+
top: 10px;
91+
right: 10px;
92+
display: flex;
93+
gap: 5px;
94+
z-index: 1000;
95+
}
96+
97+
.language-switch-button {
98+
background-color: var(--inactive-bg);
99+
color: var(--inactive-color);
100+
border-color: var(--inactive-border);
101+
border-width: 2px;
102+
border-style: solid;
103+
border-radius: 5px;
104+
padding: 5px 10px;
105+
cursor: pointer;
106+
transition: opacity 0.3s, background-color 0.3s;
107+
opacity: 1;
108+
}
109+
110+
body.page-language-js .language-switch-button.lang-js,
111+
body.page-language-ts .language-switch-button.lang-ts {
112+
background-color: var(--active-bg);
113+
color: var(--active-color);
114+
border-color: var(--active-border);
115+
}
116+
117+
li > section.ts-only, li > section.js-only {
118+
display: inline;
119+
}
120+
121+
.language-switch-button:hover {
122+
opacity: 0.8;
123+
background-color: rgba(20, 20, 20, 0.8);
124+
}
125+
126+
/* for OS dark theme */
127+
@media (prefers-color-scheme: dark) {
128+
.language-switch-button {
129+
border-color: var(--inactive-border);
130+
color: var(--inactive-color);
131+
background-color: var(--inactive-bg);
132+
}
133+
134+
body.page-language-js .language-switch-button.lang-js,
135+
body.page-language-ts .language-switch-button.lang-ts {
136+
background-color: var(--active-bg);
137+
color: var(--active-color);
138+
border-color: var(--active-border);
139+
}
140+
}
141+
142+
#__bs_notify__ {
143+
background-color: rgba(27, 32, 50, 0.3) !important;
144+
top: 40px !important;
145+
}

0 commit comments

Comments
 (0)