Skip to content

Commit 04d831a

Browse files
meduzenmeduzen
committed
Add horizontal scrollable to long sites URLs
1 parent 868ceca commit 04d831a

File tree

3 files changed

+82
-24
lines changed

3 files changed

+82
-24
lines changed

‎public/index.html‎

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,10 @@ <h1 class="canwe">
8080
<h2 class="site__title">Can I Use</h2>
8181
<p class="site__description">Browser features support tables.</p>
8282
<div class="site__links">
83-
<a class="site__link site__link--main | flex-center" href="https://caniuse.com">caniuse.com</a>
84-
<aside class="site__secondary-links">
83+
<a class="site__link site__link--main | flex-center nowrap" href="https://caniuse.com">
84+
<span class="site__link__inner">caniuse.com</span>
85+
</a>
86+
<aside class="site__secondary-links | flex-center">
8587
<a class="site__link | flex-center" href="https://github.com/Fyrd/caniuse" title="Can I Use code repository">
8688
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
8789
<title>Code</title>
@@ -105,8 +107,10 @@ <h2 class="site__title">Can I Use</h2>
105107
<h2 class="site__title">Can I Stop</h2>
106108
<p class="site__description">Browser usage by region.</p>
107109
<div class="site__links">
108-
<a class="site__link site__link--main | flex-center" href="https://canistop.net">canistop.net</a>
109-
<aside class="site__secondary-links">
110+
<a class="site__link site__link--main | flex-center nowrap" href="https://canistop.net">
111+
<span class="site__link__inner">canistop.net</span>
112+
</a>
113+
<aside class="site__secondary-links | flex-center">
110114
<a class="site__link | flex-center" href="https://gitlab.com/meduzen/canistop" title="Can I Stop code repository">
111115
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
112116
<title>Code</title>
@@ -130,8 +134,10 @@ <h2 class="site__title">Can I Stop</h2>
130134
<h2 class="site__title">Who Can Use</h2>
131135
<p class="site__description">Colors combinations accessibility.</p>
132136
<div class="site__links">
133-
<a class="site__link site__link--main | flex-center" href="https://whocanuse.com">whocanuse.com</a>
134-
<aside class="site__secondary-links">
137+
<a class="site__link site__link--main | flex-center nowrap" href="https://whocanuse.com">
138+
<span class="site__link__inner">whocanuse.com</span>
139+
</a>
140+
<aside class="site__secondary-links | flex-center">
135141
<a class="site__link | flex-center" href="https://github.com/CoreyGinnivan/whocanuse" title="Who Can Use code repository">
136142
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
137143
<title>Code</title>
@@ -156,8 +162,10 @@ <h2 class="site__title">Who Can Use</h2>
156162
<h2 class="site__title"><abbr title="Mozilla Development Network">MDN</abbr></h2>
157163
<p class="site__description">Resources for developers, by developers.</p>
158164
<div class="site__links">
159-
<a class="site__link site__link--main | flex-center" href="https://developer.mozilla.org/en-US/docs/Web">developer.mozilla.org/docs/Web</a>
160-
<aside class="site__secondary-links">
165+
<a class="site__link site__link--main | flex-center nowrap" href="https://developer.mozilla.org/en-US/docs/Web">
166+
<span class="site__link__inner">developer.mozilla.org/docs/Web</span>
167+
</a>
168+
<aside class="site__secondary-links | flex-center">
161169
<a class="site__link | flex-center" href="https://github.com/mdn/browser-compat-data" title="MDN data code repository">
162170
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
163171
<title>Code</title>
@@ -192,8 +200,10 @@ <h2 class="section__title">Other websites</h2>
192200
<h3 class="site__title">cssdb</h3>
193201
<p class="site__description">A database of staged (future) CSS features.</p>
194202
<div class="site__links">
195-
<a class="site__link site__link--main | flex-center" href="https://cssdb.org">cssdb.org</a>
196-
<aside class="site__secondary-links">
203+
<a class="site__link site__link--main | flex-center nowrap" href="https://cssdb.org">
204+
<span class="site__link__inner">cssdb.org</span>
205+
</a>
206+
<aside class="site__secondary-links | flex-center">
197207
<a class="site__link | flex-center" href="https://github.com/csstools/cssdb" title="cssdb code repository">
198208
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
199209
<title>Code</title>
@@ -211,8 +221,10 @@ <h3 class="site__title">cssdb</h3>
211221
<h3 class="site__title">Is Houdini Ready Yet?</h3>
212222
<p class="site__description"><a href="https://developer.mozilla.org/en-US/docs/Web/Houdini" title="MDN article about Houdinis API">Houdini APIs</a> support in different browsers.</p>
213223
<div class="site__links">
214-
<a class="site__link site__link--main | flex-center" href="https://ishoudinireadyyet.com">Is Houdini Ready Yet?</a>
215-
<aside class="site__secondary-links">
224+
<a class="site__link site__link--main | flex-center nowrap" href="https://ishoudinireadyyet.com">
225+
<span class="site__link__inner">ishoudinireadyyet.com</span>
226+
</a>
227+
<aside class="site__secondary-links | flex-center">
216228
<a class="site__link | flex-center" href="https://github.com/surma/ishoudinireadyyet.com" title="Is Houdini Ready Yet code repository">
217229
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
218230
<title>Code</title>
@@ -240,8 +252,10 @@ <h2 class="section__title">Coming in your browsers</h2>
240252
<h3 class="site__title">Firefox platform status</h3>
241253
<p class="site__description">Implementation & standardization roadmap for web platform features.</p>
242254
<div class="site__links">
243-
<a class="site__link site__link--main | flex-center" href="https://platform-status.mozilla.org">platform-status.mozilla.org</a>
244-
<aside class="site__secondary-links">
255+
<a class="site__link site__link--main | flex-center nowrap" href="https://platform-status.mozilla.org">
256+
<span class="site__link__inner">platform-status.mozilla.org</span>
257+
</a>
258+
<aside class="site__secondary-links | flex-center">
245259
<a class="site__link | flex-center" href="https://github.com/mozilla/platform-status" title="Firefox platform status code repository">
246260
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
247261
<title>Code</title>
@@ -259,8 +273,10 @@ <h3 class="site__title">Firefox platform status</h3>
259273
<h3 class="site__title">Edge platform status</h3>
260274
<p class="site__description">View the status of web platform features in Edge Chromium and EdgeHTML.</p>
261275
<div class="site__links">
262-
<a class="site__link site__link--main | flex-center" href="https://status.microsoftedge.com">status.microsoftedge.com</a>
263-
<aside class="site__secondary-links">
276+
<a class="site__link site__link--main | flex-center nowrap" href="https://status.microsoftedge.com">
277+
<span class="site__link__inner">status.microsoftedge.com</span>
278+
</a>
279+
<aside class="site__secondary-links | flex-center">
264280
<a class="site__link | flex-center" href="https://github.com/MicrosoftEdge/Status" title="Microsoft Edge platform status code repository">
265281
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
266282
<title>Code</title>
@@ -283,8 +299,10 @@ <h3 class="site__title">Edge platform status</h3>
283299
<article class="site__inner">
284300
<h3 class="site__title">Webkit status</h3>
285301
<div class="site__links">
286-
<a class="site__link site__link--main | flex-center" href="https://webkit.org/status">webkit.org/status</a>
287-
<aside class="site__secondary-links">
302+
<a class="site__link site__link--main | flex-center nowrap" href="https://webkit.org/status">
303+
<span class="site__link__inner">webkit.org/status</span>
304+
</a>
305+
<aside class="site__secondary-links | flex-center">
288306
<a class="site__link | flex-center" href="https://twitter.com/webkit" title="Webkit on Twitter">
289307
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 19" width="25" height="19">
290308
<title>Twitter</title>
@@ -301,8 +319,10 @@ <h3 class="site__title">Webkit status</h3>
301319
<article class="site__inner">
302320
<h3 class="site__title">Chrome status</h3>
303321
<div class="site__links">
304-
<a class="site__link site__link--main | flex-center" href="https://chromestatus.com">chromestatus.com</a>
305-
<aside class="site__secondary-links">
322+
<a class="site__link site__link--main | flex-center nowrap" href="https://chromestatus.com">
323+
<span class="site__link__inner">chromestatus.com</span>
324+
</a>
325+
<aside class="site__secondary-links | flex-center">
306326
<a class="site__link | flex-center" href="https://twitter.com/ChromiumDev" title="Google Chrome Developer Relations team on Twitter">
307327
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 19" width="25" height="19">
308328
<title>Twitter</title>
@@ -330,8 +350,10 @@ <h2 class="section__title">Emails</h2>
330350
<h2 class="site__title">Can I email</h2>
331351
<p class="site__description">Support tables for HTML and CSS in emails.</p>
332352
<div class="site__links">
333-
<a class="site__link site__link--main | flex-center" href="https://caniemail.com">caniemail.com</a>
334-
<aside class="site__secondary-links">
353+
<a class="site__link site__link--main | flex-center nowrap" href="https://caniemail.com">
354+
<span class="site__link__inner">caniemail.com</span>
355+
</a>
356+
<aside class="site__secondary-links | flex-center">
335357
<a class="site__link | flex-center" href="https://github.com/HTeuMeuLeu/caniemail" title="Can I email code repository">
336358
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
337359
<title>Code</title>

‎src/sass/site/_ctn.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,6 @@
6868
}
6969

7070
.site__inner {
71-
position: relative;
72-
z-index: 1;
7371
height: 100%;
7472

7573
display: flex;

‎src/sass/site/_links.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
.site__secondary-links {
1111
position: relative;
1212
z-index: 1;
13+
margin-left: 1em;
14+
15+
align-items: stretch;
1316
}
1417

1518
.site__link {
@@ -23,15 +26,50 @@
2326

2427
transition: opacity .3s $in-out-quad;
2528

29+
@include all-but(1) {
30+
margin-left: .25em;
31+
}
32+
2633
&:hover,
2734
&:focus {
2835
opacity: 1;
2936
}
3037
}
3138

3239
.site__link--main {
40+
flex: 0 1 auto;
41+
42+
justify-content: flex-start;
43+
44+
overflow-x: hidden;
45+
3346
&::after {
3447
content: '';
3548
@include position(absolute, 0 0 0 0);
49+
z-index: 0;
50+
}
51+
}
52+
53+
.site__link__inner {
54+
position: relative;
55+
z-index: 1;
56+
57+
58+
overflow-x: scroll;
59+
60+
@supports (scrollbar-width: thin) {
61+
padding-bottom: .8rem; // let soom room for the scrollbar
62+
63+
scrollbar-color: v(site-accent, v(site-primary));
64+
scrollbar-width: thin;
65+
}
66+
67+
&::-webkit-scrollbar {
68+
height: .4rem;
69+
}
70+
71+
&::-webkit-scrollbar-thumb {
72+
background: v(site-accent, v(site-primary));
73+
border-radius: .2rem;
3674
}
3775
}

0 commit comments

Comments
 (0)