Skip to content

Commit 636b750

Browse files
grmbyrngrmbyrn
committed
scrollbar on mobile, arrows on tablets and up
1 parent 88863d5 commit 636b750

File tree

2 files changed

+83
-48
lines changed

2 files changed

+83
-48
lines changed

‎src/lib/components/atoms/Slider.svelte‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
.slider {
7373
position: relative;
7474
overflow: hidden;
75-
padding: 20px;
75+
padding-block: 20px;
7676
}
7777
7878
.slider-container {
@@ -83,12 +83,17 @@
8383
gap: 1rem;
8484
width: 100vw;
8585
margin: 3rem 0rem 0 0rem;
86-
padding-inline: 1.5rem;
86+
padding-inline: 0rem;
8787
padding-bottom: 1rem;
8888
box-sizing: border-box;
8989
position: relative;
9090
left: 0;
9191
92+
padding-left: 2rem;
93+
transition:
94+
margin 0.3s ease-out,
95+
padding 0.3s ease-out;
96+
9297
div {
9398
flex: 0 0 auto;
9499
width: 280px;
@@ -121,16 +126,46 @@
121126
}
122127
}
123128
124-
.slider-container::-webkit-scrollbar {
125-
display: none;
129+
.slider-container {
130+
// Firefox specific styling
131+
scrollbar-width: thin;
132+
scrollbar-color: rgba(255, 49, 0, 0.8) transparent;
133+
134+
@include bp.for-tablet-portrait-up {
135+
&::-webkit-scrollbar {
136+
display: none !important;
137+
}
138+
scrollbar-width: none !important;
139+
}
140+
141+
&::-webkit-scrollbar {
142+
width: 2px !important;
143+
min-width: 2px;
144+
}
145+
146+
&::-webkit-scrollbar-track {
147+
background: transparent;
148+
}
149+
150+
&::-webkit-scrollbar-thumb {
151+
background: rgba(255, 49, 0, 0.8);
152+
border-radius: 10px;
153+
width: 2px;
154+
min-width: 2px;
155+
}
156+
157+
&::-webkit-scrollbar-thumb:hover {
158+
background: rgba(255, 49, 0, 0.8);
159+
}
126160
}
127161
128162
.button-group {
163+
display: none;
129164
opacity: 0;
130165
transition: opacity 0.3s ease-in-out;
131166
pointer-events: none;
132167
133-
@include bp.for-desktop-up {
168+
@include bp.for-tablet-portrait-up {
134169
display: flex;
135170
justify-content: center;
136171
gap: 1rem;

‎static/blogMetadata.json‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,16 @@
11
[
22
{
3-
"title": "Benchmarking the Torrust BitTorrent Tracker",
4-
"slug": "benchmarking-the-torrust-bittorrent-tracker",
5-
"contributor": "Jose Celano",
6-
"contributorSlug": "jose-celano",
7-
"date": "2024-03-19T00:00:00.000Z",
8-
"coverImage": "/images/posts/benchmarking-the-torrust-bittorrent-tracker/benchmarking-the-torrust-bittorrent-tracker-banner.webp",
9-
"excerpt": "In the ever-evolving landscape of BitTorrent technology, performance and scalability are paramount. Torrust stands at the forefront, offering a suite of open-source software products designed to enhance peer-to-peer file sharing. At the heart of this suite is the Torrust BitTorrent Tracker, a Rust-based engine crafted for efficiency and speed. This post will introduce you to the benchmarking tools we are using at the moment for the tracker.",
10-
"tags": [
11-
"Performance",
12-
"Benchmarking"
13-
]
14-
},
15-
{
16-
"title": "Deploying Torrust To Production",
17-
"slug": "deploying-torrust-to-production",
3+
"title": "Containerizing Rust Applications",
4+
"slug": "containerizing-rust-applications-best-practices",
185
"contributor": "Jose Celano",
196
"contributorSlug": "jose-celano",
20-
"date": "2023-12-20T00:00:00.000Z",
21-
"coverImage": "/images/posts/deploying-torrust-to-production/deploy-torrust-to-a-digital-ocean-droplet.png",
22-
"excerpt": "Dive into our step-by-step tutorial on deploying a BitTorrent Index and Tracker, written in Rust, on a Digital Ocean droplet. From initial server setup to advanced configurations, this guide is designed for both non-developers and tech-savvy users, ensuring a seamless, production-ready deployment.",
7+
"date": "2023-11-09T12:08:04.295Z",
8+
"coverImage": "/images/posts/rust-crab-carrying-a-shipping-container.jpeg",
9+
"excerpt": "Torrust services (Tracker and Index) support docker, we want to ensure that contributors understand our containerfile and we also want to share good practices for containerizing Rust applications.",
2310
"tags": [
24-
"Tutorial",
25-
"Deployment",
26-
"Production"
11+
"Torrent",
12+
"Tracker",
13+
"BitTorrent"
2714
]
2815
},
2916
{
@@ -41,20 +28,6 @@
4128
"Rust"
4229
]
4330
},
44-
{
45-
"title": "Contributor Path",
46-
"slug": "contributor-path",
47-
"contributor": "Jose Celano",
48-
"contributorSlug": "jose-celano",
49-
"date": "2024-10-29T09:20:51.608Z",
50-
"coverImage": "/images/posts/contributor-path/rust-crab-going-safe-into-water.webp",
51-
"excerpt": "Ready to contribute to Torrust? Here's your guide to get started and make meaningful contributions, from small fixes to full-fledged features.",
52-
"tags": [
53-
"Community",
54-
"Onboarding",
55-
"Contributors"
56-
]
57-
},
5831
{
5932
"title": "Hash2Torrent - Retrieve Torrent Files Effortlessly!",
6033
"slug": "hash2torrent-retrieve-torrent-files-effortlessly",
@@ -72,17 +45,31 @@
7245
]
7346
},
7447
{
75-
"title": "Containerizing Rust Applications",
76-
"slug": "containerizing-rust-applications-best-practices",
48+
"title": "Deploying Torrust To Production",
49+
"slug": "deploying-torrust-to-production",
7750
"contributor": "Jose Celano",
7851
"contributorSlug": "jose-celano",
79-
"date": "2023-11-09T12:08:04.295Z",
80-
"coverImage": "/images/posts/rust-crab-carrying-a-shipping-container.jpeg",
81-
"excerpt": "Torrust services (Tracker and Index) support docker, we want to ensure that contributors understand our containerfile and we also want to share good practices for containerizing Rust applications.",
52+
"date": "2023-12-20T00:00:00.000Z",
53+
"coverImage": "/images/posts/deploying-torrust-to-production/deploy-torrust-to-a-digital-ocean-droplet.png",
54+
"excerpt": "Dive into our step-by-step tutorial on deploying a BitTorrent Index and Tracker, written in Rust, on a Digital Ocean droplet. From initial server setup to advanced configurations, this guide is designed for both non-developers and tech-savvy users, ensuring a seamless, production-ready deployment.",
8255
"tags": [
83-
"Torrent",
84-
"Tracker",
85-
"BitTorrent"
56+
"Tutorial",
57+
"Deployment",
58+
"Production"
59+
]
60+
},
61+
{
62+
"title": "Contributor Path",
63+
"slug": "contributor-path",
64+
"contributor": "Jose Celano",
65+
"contributorSlug": "jose-celano",
66+
"date": "2024-10-29T09:20:51.608Z",
67+
"coverImage": "/images/posts/contributor-path/rust-crab-going-safe-into-water.webp",
68+
"excerpt": "Ready to contribute to Torrust? Here's your guide to get started and make meaningful contributions, from small fixes to full-fledged features.",
69+
"tags": [
70+
"Community",
71+
"Onboarding",
72+
"Contributors"
8673
]
8774
},
8875
{
@@ -98,6 +85,19 @@
9885
"Announcement"
9986
]
10087
},
88+
{
89+
"title": "Benchmarking the Torrust BitTorrent Tracker",
90+
"slug": "benchmarking-the-torrust-bittorrent-tracker",
91+
"contributor": "Jose Celano",
92+
"contributorSlug": "jose-celano",
93+
"date": "2024-03-19T00:00:00.000Z",
94+
"coverImage": "/images/posts/benchmarking-the-torrust-bittorrent-tracker/benchmarking-the-torrust-bittorrent-tracker-banner.webp",
95+
"excerpt": "In the ever-evolving landscape of BitTorrent technology, performance and scalability are paramount. Torrust stands at the forefront, offering a suite of open-source software products designed to enhance peer-to-peer file sharing. At the heart of this suite is the Torrust BitTorrent Tracker, a Rust-based engine crafted for efficiency and speed. This post will introduce you to the benchmarking tools we are using at the moment for the tracker.",
96+
"tags": [
97+
"Performance",
98+
"Benchmarking"
99+
]
100+
},
101101
{
102102
"title": "How To Contribute To This Site",
103103
"slug": "how-to-contribute-to-this-site",

0 commit comments

Comments
 (0)