Responsive TOC leader lines with CSS
Not long ago I replaced my homepage of an image based overview with a very slim Table Of Contents version. The trickiest part was to make that responsive. I finally found a solution. As usual: no JavaScript involved. A table of contents (TOC) page is something coming from the good old book world. Here's an example: It lists the different chapters and on which page you can find them. For this kind
vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.
import { createTheme, style } from '@vanilla-extract/css'; export const [themeClass, vars] = createTheme({ color: { brand: 'blue', white: '#fff' }, space: { small: '4px', medium: '8px', } }); export const hero = style({ backgroundColor: vars.color.brandd, color: vars.color.white, padding: vars.space.large });
Breaking Out With Viewport Units and Calc
While iterating on a new article layout for the impending Cloud Four redesign, I encountered an old CSS layout problem. For long-form content, it’s usually a good idea to limit line lengths for readability. The most straightforward way to do that is to wrap the post content in a containing element: .u-containProse { max-width: 40em; margin-left: auto; margin-right: auto; } Code language: CSS (css)
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
３つのフロート解除方法 | Security.GS Magazine
