Skip to content

Commit 9045ee2

Browse files
akyriakoakyriako
authored
hide all navbar custom links on devices with touch screen #281 (#283)
1 parent 777fd73 commit 9045ee2

File tree

1 file changed

+115
-105
lines changed

1 file changed

+115
-105
lines changed

‎src/css/custom.css‎

Lines changed: 115 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,13 @@
3030
} */
3131
:root,
3232
html {
33-
display: none; /* Hide until the correct theme is applied */
33+
display: none;
34+
/* Hide until the correct theme is applied */
3435
}
3536

3637
html[data-mode] {
37-
display: block; /* Show after the correct theme is set */
38+
display: block;
39+
/* Show after the correct theme is set */
3840
}
3941

4042
html[data-theme='light'] {
@@ -89,6 +91,7 @@ html[data-theme='dark'] {
8991
:root {
9092
--ifm-font-size-base: 18px;
9193
}
94+
9295
/* article header h1 {
9396
font-size: 1.5rem !important;
9497
font-weight: bold;
@@ -104,6 +107,7 @@ html[data-theme='dark'] {
104107
--ifm-font-size-base: 19px;
105108
font-weight: normal;
106109
}
110+
107111
/* article header h1 {
108112
font-size: 2rem !important;
109113
font-weight: bold;
@@ -139,7 +143,7 @@ html[data-theme='dark'] .scale-telekom-footer span {
139143
}
140144

141145
.footer {
142-
background-color: white;
146+
background-color: white;
143147
}
144148

145149
html[data-theme='dark'] .footer {
@@ -194,113 +198,119 @@ html[data-theme='dark'] .footer__link-item:hover {
194198
margin-left: 6px;
195199
border-radius: 50%;
196200
transition: background var(--ifm-transition-fast);
197-
}
198-
199-
.navbar--discord-link:hover {
201+
}
202+
203+
.navbar--discord-link:hover {
200204
background: var(--ifm-color-emphasis-200);
201-
}
202-
203-
.navbar--discord-link:before {
205+
}
206+
207+
.navbar--discord-link:before {
204208
content: '';
205209
height: 100%;
206210
display: block;
207211
background: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Ediscord%3C/title%3E%3Cpath d='M20.992 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.050 0.005 0.109 0.005 0.168 0 1.523-1.191 2.768-2.693 2.854l-0.008 0zM11.026 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.048 0.005 0.104 0.005 0.161 0 1.525-1.19 2.771-2.692 2.862l-0.008 0zM26.393 6.465c-1.763-0.832-3.811-1.49-5.955-1.871l-0.149-0.022c-0.005-0.001-0.011-0.002-0.017-0.002-0.035 0-0.065 0.019-0.081 0.047l-0 0c-0.234 0.411-0.488 0.924-0.717 1.45l-0.043 0.111c-1.030-0.165-2.218-0.259-3.428-0.259s-2.398 0.094-3.557 0.275l0.129-0.017c-0.27-0.63-0.528-1.142-0.813-1.638l0.041 0.077c-0.017-0.029-0.048-0.047-0.083-0.047-0.005 0-0.011 0-0.016 0.001l0.001-0c-2.293 0.403-4.342 1.060-6.256 1.957l0.151-0.064c-0.017 0.007-0.031 0.019-0.040 0.034l-0 0c-2.854 4.041-4.562 9.069-4.562 14.496 0 0.907 0.048 1.802 0.141 2.684l-0.009-0.11c0.003 0.029 0.018 0.053 0.039 0.070l0 0c2.14 1.601 4.628 2.891 7.313 3.738l0.176 0.048c0.008 0.003 0.018 0.004 0.028 0.004 0.032 0 0.060-0.015 0.077-0.038l0-0c0.535-0.72 1.044-1.536 1.485-2.392l0.047-0.1c0.006-0.012 0.010-0.027 0.010-0.043 0-0.041-0.026-0.075-0.062-0.089l-0.001-0c-0.912-0.352-1.683-0.727-2.417-1.157l0.077 0.042c-0.029-0.017-0.048-0.048-0.048-0.083 0-0.031 0.015-0.059 0.038-0.076l0-0c0.157-0.118 0.315-0.24 0.465-0.364 0.016-0.013 0.037-0.021 0.059-0.021 0.014 0 0.027 0.003 0.038 0.008l-0.001-0c2.208 1.061 4.8 1.681 7.536 1.681s5.329-0.62 7.643-1.727l-0.107 0.046c0.012-0.006 0.025-0.009 0.040-0.009 0.022 0 0.043 0.008 0.059 0.021l-0-0c0.15 0.124 0.307 0.248 0.466 0.365 0.023 0.018 0.038 0.046 0.038 0.077 0 0.035-0.019 0.065-0.046 0.082l-0 0c-0.661 0.395-1.432 0.769-2.235 1.078l-0.105 0.036c-0.036 0.014-0.062 0.049-0.062 0.089 0 0.016 0.004 0.031 0.011 0.044l-0-0.001c0.501 0.96 1.009 1.775 1.571 2.548l-0.040-0.057c0.017 0.024 0.046 0.040 0.077 0.040 0.010 0 0.020-0.002 0.029-0.004l-0.001 0c2.865-0.892 5.358-2.182 7.566-3.832l-0.065 0.047c0.022-0.016 0.036-0.041 0.039-0.069l0-0c0.087-0.784 0.136-1.694 0.136-2.615 0-5.415-1.712-10.43-4.623-14.534l0.052 0.078c-0.008-0.016-0.022-0.029-0.038-0.036l-0-0z'%3E%3C/path%3E%3C/svg%3E");
208-
}
209-
210-
html[data-theme='dark'] .navbar--discord-link:before {
212+
}
213+
214+
html[data-theme='dark'] .navbar--discord-link:before {
211215
background: url("data:image/svg+xml,%3Csvg viewBox='0 -28.5 256 256' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid'%3E%3Cg%3E%3Cpath d='M216.856339 16.5966031 C200.285002 8.84328665 182.566144 3.2084988 164.041564 0 C161.766523 4.11318106 159.108624 9.64549908 157.276099 14.0464379 C137.583995 11.0849896 118.072967 11.0849896 98.7430163 14.0464379 C96.9108417 9.64549908 94.1925838 4.11318106 91.8971895 0 C73.3526068 3.2084988 55.6133949 8.86399117 39.0420583 16.6376612 C5.61752293 67.146514 -3.4433191 116.400813 1.08711069 164.955721 C23.2560196 181.510915 44.7403634 191.567697 65.8621325 198.148576 C71.0772151 190.971126 75.7283628 183.341335 79.7352139 175.300261 C72.104019 172.400575 64.7949724 168.822202 57.8887866 164.667963 C59.7209612 163.310589 61.5131304 161.891452 63.2445898 160.431257 C105.36741 180.133187 151.134928 180.133187 192.754523 160.431257 C194.506336 161.891452 196.298154 163.310589 198.110326 164.667963 C191.183787 168.842556 183.854737 172.420929 176.223542 175.320965 C180.230393 183.341335 184.861538 190.991831 190.096624 198.16893 C211.238746 191.588051 232.743023 181.531619 254.911949 164.955721 C260.227747 108.668201 245.831087 59.8662432 216.856339 16.5966031 Z M85.4738752 135.09489 C72.8290281 135.09489 62.4592217 123.290155 62.4592217 108.914901 C62.4592217 94.5396472 72.607595 82.7145587 85.4738752 82.7145587 C98.3405064 82.7145587 108.709962 94.5189427 108.488529 108.914901 C108.508531 123.290155 98.3405064 135.09489 85.4738752 135.09489 Z M170.525237 135.09489 C157.88039 135.09489 147.510584 123.290155 147.510584 108.914901 C147.510584 94.5396472 157.658606 82.7145587 170.525237 82.7145587 C183.391518 82.7145587 193.761324 94.5189427 193.539891 108.914901 C193.539891 123.290155 183.391518 135.09489 170.525237 135.09489 Z' fill='white' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
216+
}
217+
218+
/* Github */
219+
220+
.navbar--github-link {
221+
width: 36px;
222+
height: 36px;
223+
padding: 6px;
224+
margin-right: 12px;
225+
margin-left: 6px;
226+
border-radius: 50%;
227+
transition: background var(--ifm-transition-fast);
228+
}
229+
230+
.navbar--github-link:hover {
231+
background: var(--ifm-color-emphasis-200);
232+
}
233+
234+
.navbar--github-link:before {
235+
content: '';
236+
height: 100%;
237+
display: block;
238+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 25 25' width='25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
239+
}
240+
241+
html[data-theme='dark'] .navbar--github-link:before {
242+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 25 25' width='25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
243+
}
244+
245+
246+
/* Terminal */
247+
248+
.navbar--terminal-link {
249+
width: 36px;
250+
height: 36px;
251+
padding: 6px;
252+
margin-right: 6px;
253+
margin-left: 6px;
254+
border-radius: 50%;
255+
transition: background var(--ifm-transition-fast);
256+
}
257+
258+
.navbar--terminal-link:hover {
259+
background: var(--ifm-color-emphasis-200);
260+
}
261+
262+
.navbar--terminal-link:before {
263+
content: '';
264+
height: 100%;
265+
display: block;
266+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M649 983l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23zm1079 457v64q0 14-9 23t-23 9h-960q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h960q14 0 23 9t9 23z'/%3E%3C/svg%3E") no-repeat;
267+
}
268+
269+
html[data-theme='dark'] .navbar--terminal-link:before {
270+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M649 983l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23zm1079 457v64q0 14-9 23t-23 9h-960q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h960q14 0 23 9t9 23z'/%3E%3C/svg%3E")
271+
}
272+
273+
/* Gitlab */
274+
275+
.navbar--discourse-link {
276+
width: 36px;
277+
height: 36px;
278+
padding: 6px;
279+
margin-right: 6px;
280+
margin-left: 6px;
281+
border-radius: 50%;
282+
transition: background var(--ifm-transition-fast);
283+
}
284+
285+
.navbar--discourse-link:hover {
286+
background: var(--ifm-color-emphasis-200);
287+
}
288+
289+
.navbar--discourse-link:before {
290+
content: '';
291+
height: 100%;
292+
display: block;
293+
background: url("data:image/svg+xml,%3Csvg viewBox='0 36 448 512' width='23' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z'/%3E%3C/svg%3E") no-repeat;
294+
}
295+
296+
html[data-theme='dark'] .navbar--discourse-link:before {
297+
background: url("data:image/svg+xml,%3Csvg viewBox='0 36 448 512' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z'/%3E%3C/svg%3E")
298+
}
299+
300+
@media (hover: none) and (pointer: coarse) {
301+
302+
.navbar--github-link,
303+
.navbar--terminal-link,
304+
.navbar--discord-link {
305+
display: none !important;
212306
}
307+
}
213308

214-
/* Github */
215-
216-
.navbar--github-link {
217-
width: 36px;
218-
height: 36px;
219-
padding: 6px;
220-
margin-right: 12px;
221-
margin-left: 6px;
222-
border-radius: 50%;
223-
transition: background var(--ifm-transition-fast);
224-
}
225-
226-
.navbar--github-link:hover {
227-
background: var(--ifm-color-emphasis-200);
228-
}
229-
230-
.navbar--github-link:before {
231-
content: '';
232-
height: 100%;
233-
display: block;
234-
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 25 25' width='25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
235-
no-repeat;
236-
}
237-
238-
html[data-theme='dark'] .navbar--github-link:before {
239-
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 25 25' width='25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
240-
no-repeat;
241-
}
242-
243-
244-
/* Terminal */
245-
246-
.navbar--terminal-link {
247-
width: 36px;
248-
height: 36px;
249-
padding: 6px;
250-
margin-right: 6px;
251-
margin-left: 6px;
252-
border-radius: 50%;
253-
transition: background var(--ifm-transition-fast);
254-
}
255-
256-
.navbar--terminal-link:hover {
257-
background: var(--ifm-color-emphasis-200);
258-
}
259-
260-
.navbar--terminal-link:before {
261-
content: '';
262-
height: 100%;
263-
display: block;
264-
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M649 983l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23zm1079 457v64q0 14-9 23t-23 9h-960q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h960q14 0 23 9t9 23z'/%3E%3C/svg%3E")
265-
no-repeat;
266-
}
267-
268-
html[data-theme='dark'] .navbar--terminal-link:before {
269-
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M649 983l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23zm1079 457v64q0 14-9 23t-23 9h-960q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h960q14 0 23 9t9 23z'/%3E%3C/svg%3E")
270-
}
271-
272-
/* Gitlab */
273-
274-
.navbar--discourse-link {
275-
width: 36px;
276-
height: 36px;
277-
padding: 6px;
278-
margin-right: 6px;
279-
margin-left: 6px;
280-
border-radius: 50%;
281-
transition: background var(--ifm-transition-fast);
282-
}
283-
284-
.navbar--discourse-link:hover {
285-
background: var(--ifm-color-emphasis-200);
286-
}
287-
288-
.navbar--discourse-link:before {
289-
content: '';
290-
height: 100%;
291-
display: block;
292-
background: url("data:image/svg+xml,%3Csvg viewBox='0 36 448 512' width='23' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z'/%3E%3C/svg%3E")
293-
no-repeat;
294-
}
295-
296-
html[data-theme='dark'] .navbar--discourse-link:before {
297-
background: url("data:image/svg+xml,%3Csvg viewBox='0 36 448 512' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z'/%3E%3C/svg%3E")
298-
}
299-
300-
@media (max-width: 1024px) {
301-
.navbar--github-link,
302-
.navbar--terminal-link,
303-
.navbar--discord-link {
304-
display: none !important;
305-
}
306-
}
309+
/* @media (max-width: 1024px) {
310+
311+
.navbar--github-link,
312+
.navbar--terminal-link,
313+
.navbar--discord-link {
314+
display: none !important;
315+
}
316+
} */

0 commit comments

Comments
 (0)