Issue #950 Inspired by shadcn Combine tailwind-merge: Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts. clsx: constructing className strings conditionally. import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) }
Issue #701 Use mark. This does not work for multiline <p> <mark css={css` display: inline-block; line-height: 0em; padding-bottom: 0.5em; `}>{feature.title} </mark> </p> Another way is to use background .highlight { background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%); } Read more https://beatrizcaraballo.com/blog/low-highlight-heading-links-squarespace https://stackoverflow.com/questions/43683187/how-can-i-create-custom-underline-or-highlight-for-text-in-html-or-css https://medium.com/@codingdudecom/highlight-text-css-97331a5b71b5 Updated at 2020-11-20 05:23:59
Issue #649 Check flag then define css const Picture = (feature) => { const shadowCss = feature.shadow ? css` border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); ` : css`` return ( <div css={css` width: 40vw; @media (max-width: 420px) { width: 98vw; } `}> <div css={shadowCss}> <img css={css` max-width: 100%; height: auto; `} src={require(`../apps/${feature.image}`)} /> </div> </div> ) }
Issue #643 Use material icons <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> div#filter-container { display: flex; align-items: center; justify-content: center; margin-top: 10%; height: 60px; } div#filter-items { display: inline-flex; background-color: #fff; box-shadow: 0 0 1px 0 rgba(52, 46, 173, 0.25), 0 15px 30px 0 rgba(52, 46, 173, 0.1); border-radius: 12px; overflow: hidden; padding: 10px; } a.filter-item { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100px; text-decoration: none; padding: 10px; } a.filter-item:hover { background-color: rgb(239, 240, 241); border-radius: 10px; } a....
Issue #642 Specify container with flex-wrap and justify-content, and item with float: left div.cards { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; margin-top: 10%; } div.card { overflow: hidden; float: left; width: 220px; color: #232330; text-align: center; border-radius: 10px; border-color: silver; box-shadow: 1px 8px 8px rgba(10, 10, 10, 0.2); font-family: 'Open Sans', sans-serif; margin: 16px; transition: all .2s ease-in-out; } div.card:hover { transform: scale(1.2); }
Issue #494 Code https://github.com/iTimeTraveler/hexo-theme-hiero Remove max-width from source/css/style.styl .outer clearfix() // max-width: (column-width + gutter-width) * columns + gutter-width margin: 40px auto padding: 0 gutter-width Change font-size of code block from source/css/_partial/highlight.styl $code-block background: $highlight-background margin: article-padding article-padding * 0 padding: 15px article-padding border-style: solid border-color: color-border border-width: 1px 0 overflow: auto color: $highlight-foreground font-size: 1.0em; line-height: 1em Change font-size of article-header from source/css/_partial/article.styl .article-header h1 margin: 0 0 3px 0; font-size: 26px; line-height: 1....
Issue #208 During the alpha test of LearnTalks, some of my friends reported that the screen is completely blank in the search page, and this happened in mobile only. This article is how I identify the problem and found a workaround for the issue, it may not be the solution, but at least the screen does not appear blank anymore. As someone who likes to keep up with tech via watching conference videos, I thought it might be a good idea to collect all of these to better search and explore later....