xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-06 05:17:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

Disable word hyphenation on md+ screens

Browse Source
This commit is contained in:
Xevion
2022-12-28 20:32:13 -06:00
parent fc80f00fb0
commit 828928b579
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ItemCard.tsx
View File

@@ -55,12 +55,11 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location}: Ite
className="col-span-12 sm:col-span-9 lg:col-span-8 max-h-full overflow-hidden drop-shadow-2xl pb-2 md:p-1 pl-2"> className="col-span-12 sm:col-span-9 lg:col-span-8 max-h-full overflow-hidden drop-shadow-2xl pb-2 md:p-1 pl-2">
<Link href={{pathname: location}} <Link href={{pathname: location}}
className="text-lg sm:text-2xl md:text-3xl font-semibold">{title}</Link> className="text-lg sm:text-2xl md:text-3xl font-semibold">{title}</Link>
<div className="mt-0 md:mt-1.5 text-base sm:text-xl md:text-xl overflow-hidden" <div className="description mt-0 md:mt-1.5 text-base sm:text-xl md:text-xl overflow-hidden"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
navigate(); navigate();
}} }}>
style={{hyphens: "auto"}}>
<ReactMarkdown>{description}</ReactMarkdown> <ReactMarkdown>{description}</ReactMarkdown>
</div> </div>
</div> </div>

7
src/styles/globals.scss
View File

@@ -60,3 +60,10 @@ html, body {
@apply transition-transform drop-shadow-md hover:scale-[120%] opacity-80 hover:opacity-100 text-white m-auto aspect-square; @apply transition-transform drop-shadow-md hover:scale-[120%] opacity-80 hover:opacity-100 text-white m-auto aspect-square;
} }
} }
.description {
hyphens: auto;
@screen md {
hyphens: none;
}
}