github/television
1
1
Fork 0
mirror of https://github.com/alexpasmantier/television.git synced 2025-07-29 06:11:37 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

fix: Added gap between home page features on smaller screens

Browse Source
This commit is contained in:
Faruk 2025-07-15 16:19:49 +02:00
parent 37e31b2443
commit bfd51ad143
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
website/src/components/HomepageFeatures/index.tsx
View File

@ -15,8 +15,10 @@ const FeatureList: FeatureItem[] = [
imgSrc: require("@site/static/img/files-toml.png").default, imgSrc: require("@site/static/img/files-toml.png").default,
description: ( description: (
<> <>
<a href="/docs/Users/channels">Create your own channels in a simple TOML file and search through <a href="/docs/Users/channels">
files, git repositories, environment variables, docker images, and more. Create your own channels in a simple TOML file and search through
files, git repositories, environment variables, docker images, and
more.
</a> </a>
</> </>
), ),
@ -27,8 +29,8 @@ const FeatureList: FeatureItem[] = [
description: ( description: (
<> <>
<a href="/docs/Users/shell-integration"> <a href="/docs/Users/shell-integration">
Television integrates with your shell and provides autocompletion that is both Television integrates with your shell and provides autocompletion that
extensible and configurable to use your own channels. is both extensible and configurable to use your own channels.
</a> </a>
</> </>
), ),
@ -48,11 +50,11 @@ function Feature({ title, imgSrc, description }: FeatureItem) {
<p>{description}</p> <p>{description}</p>
</div> </div>
<div className="featureImageContainer"> <div className="featureImageContainer">
<img <img
src={imgSrc} src={imgSrc}
alt={title} alt={title}
className={styles.featureImage} className={styles.featureImage}
role="img" role="img"
/> />
</div> </div>
</div> </div>
@ -63,7 +65,7 @@ export default function HomepageFeatures(): ReactNode {
return ( return (
<section className={styles.features}> <section className={styles.features}>
<div className="container"> <div className="container">
<div className="row"> <div className={clsx("row", styles.featuresRow)}>
{FeatureList.map((props, idx) => ( {FeatureList.map((props, idx) => (
<Feature key={idx} {...props} /> <Feature key={idx} {...props} />
))} ))}

6
website/src/components/HomepageFeatures/styles.module.css
View File

@ -40,3 +40,9 @@ html[data-theme='dark'] .featureSvg {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
@media screen and (max-width: 996px) {
.featuresRow {
gap: 2rem;
}
}