drone build Mon Sep 21 13:56:03 PDT 2026
This commit is contained in:
inherentlee committed
1 parent
aed489d9e1
commit
683db4c7dd
320 files changed
+8158
-4463
No files matched your search
@@ -293,6 +293,175 @@
|
||||
</li>
|
||||
<li>Some users need <strong>reduced or removed animations</strong>. There is a setting in Framer to <a href="https://www.framer.com/help/articles/reduced-motion-settings/" target="_blank" rel="external">allow reduced motion support</a>. It's turned off by default.</li>
|
||||
</ul>
|
||||
</content>
|
||||
</entry>
|
||||
<entry>
|
||||
<title>leatherworking zine</title>
|
||||
<link href="https://leecat.art/leatherworking-zine/" />
|
||||
<updated>2026-08-28T00:00:00Z</updated>
|
||||
<id>https://leecat.art/leatherworking-zine/</id>
|
||||
<content type="html"><p>This page contains textual representation of and supplementary material for my Leatherworking Tools zine, including links to all tools and additional information as needed.</p>
|
||||
<p>The Leatherworking Tools zine has been created for <a href="https://leecat.art/fedizinefest-2026-2027">FediZineFest 2026-2027</a> and will be part of the physical and digital bundles. For digital material, there will be a home-printable version and a version for reading on digital devices. If you want the delightfully illustrated zine itself, <a href="https://ko-fi.com/inherentlee/shop/fedizinefest2026_2027" target="_blank" rel="external">buy a bundle now</a>.</p>
|
||||
<h2 id="on-tool-links">On tool links</h2>
|
||||
<p>Please note that links are examples, and you do not need the precise model linked. Where possible, I have found cheaper versions of tools - for example, you <em>can</em> get a fancy mallet or maul (they <em>are</em> nice), or you can get a 16oz or 32oz hardware store rubber mallet. I have linked the hardware store version.</p>
|
||||
<p>Some things, like thread or rivets, come in other colors or finishes. Feel free to explore; I have linked only one.</p>
|
||||
<h2 id="retailers">Retailers</h2>
|
||||
<p>Please note that I am familiar with US retailers, and cannot make recommendations for other countries.</p>
|
||||
<p>My favorite leatherworking retailer is <a href="https://www.buckleguy.com/" target="_blank" rel="external">Buckleguy</a>. They offer tools, hardware, leather, supplies, etc. and are generally extremely high quality with good customer service.</p>
|
||||
<p>Occasionally, I will link other retailers such as <a href="https://tandyleather.com/" target="_blank" rel="external">Tandy</a> (a common retailer, but with products that may be lower quality - great for bulk leather for prototype and practice though!), <a href="https://www.weaverleathersupply.com/" target="_blank" rel="external">Weaver</a>, or <a href="https://springfieldleather.com/" target="_blank" rel="external">Springfield</a>. I will also link to non-leather specific retailers such as <a href="https://www.dickblick.com/" target="_blank" rel="external">Blick</a> and <a href="https://www.acehardware.com/" target="_blank" rel="external">Ace Hardware</a> as is relevant.</p>
|
||||
<h2 id="cover">Cover</h2>
|
||||
<p>The front and back cover spread is patterned with many small icons of leatherworking tools and explanatory diagrams in dark pink. Dark teal text reads &quot;Leatherworking tools&quot; &quot;by Lee,&quot; and, on the back &quot;2026.&quot;</p>
|
||||
<h2 id="page-1%3A-basics">Page 1: Basics</h2>
|
||||
<ul>
|
||||
<li><a href="https://www.buckleguy.com/4-2-scratch-awl-3-1-2/" target="_blank" rel="external">Scratch awl</a> for marking
|
||||
<ul>
|
||||
<li>Do not use a pen/sharpie/similar for marking as it will very much show on the finished product</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://www.weaverleathersupply.com/products/pattern-sheet-24-x-45" target="_blank" rel="external">Pattern plastic</a> for templating</li>
|
||||
<li><a href="https://www.buckleguy.com/bg-acrylic-tool-leather-thickness-gauge/" target="_blank" rel="external">Leather thickness gauge</a> for measuring
|
||||
<ul>
|
||||
<li>You can also use calipers and a table of sizes, but this is very handy</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2 id="page-2%3A-cut">Page 2: Cut</h2>
|
||||
<ul>
|
||||
<li><a href="https://www.dickblick.com/products/x-acto-1-knife/" target="_blank" rel="external">Craft knife</a>
|
||||
<ul>
|
||||
<li>Replace blades often</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://www.dickblick.com/products/blick-aluminum-non-slip-rulers/" target="_blank" rel="external">Non-slip metal ruler</a>
|
||||
<ul>
|
||||
<li>Metal is a must if you don't want to cut into your ruler</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://www.dickblick.com/products/blick-self-healing-cutting-mats/" target="_blank" rel="external">Cutproof mat</a></li>
|
||||
<li><a href="https://www.buckleguy.com/bg-acrylic-tool-belt-tabs-multiple-styles/" target="_blank" rel="external">Strap end template</a></li>
|
||||
</ul>
|
||||
<p>If you're cutting a curve, make many straight cuts rather than one curved cut.</p>
|
||||
<h2 id="page-3%3A-burnish">Page 3: Burnish</h2>
|
||||
<h3 id="my-core-tools">My core tools</h3>
|
||||
<ul>
|
||||
<li><a href="https://springfieldleather.com/products/burnishing-cloth-10-pk" target="_blank" rel="external">Canvas</a>
|
||||
<ul>
|
||||
<li>Of course you can just go find some at a fabric store, but this lets you buy just a few small pieces</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://leecat.art/leatherworking-zine/tandyleather.com/products/tokonole-burnishing-agent">Tokonole</a>
|
||||
<ul>
|
||||
<li>You'll want clear Tokonole</li>
|
||||
<li>Shake before use</li>
|
||||
<li>You can apply this with a bit of cloth, <a href="https://www.buckleguy.com/wool-daubers-5-length-12-per-bag/" target="_blank" rel="external">wool dauber</a>, <a href="https://www.dickblick.com/products/lineco-micro-spatula/" target="_blank" rel="external">micro spatula</a>, etc... I just use my finger</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="other-potential-tools">Other potential tools</h3>
|
||||
<ul>
|
||||
<li><a href="https://www.buckleguy.com/bg-leather-edge-beveler-multiple-sizes/" target="_blank" rel="external">Edge beveler</a>
|
||||
<ul>
|
||||
<li>Proper finished edges should be beveled, but you can get away without this when starting</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://www.acehardware.com/departments/paint-and-supplies/painting-tools-and-supplies/sandpaper/F035922?variationProductCode=19808" target="_blank" rel="external">Sandpaper</a>
|
||||
<ul>
|
||||
<li>Grit varies; use significantly higher grits for final finish</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://www.buckleguy.com/fiebing-s-beeswax-1oz/" target="_blank" rel="external">Beeswax</a></li>
|
||||
</ul>
|
||||
<h2 id="page-4%3A-punch">Page 4: Punch</h2>
|
||||
<ul>
|
||||
<li><a href="https://www.buckleguy.com/cutting-board-multiple-sizes/" target="_blank" rel="external">Cutting board</a>
|
||||
<ul>
|
||||
<li>Don't use hole punches on your cutproof mat!</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://www.acehardware.com/departments/tools/hand-tools/deadblow-hammers-mallets/2037238" target="_blank" rel="external">Mallet</a>
|
||||
<ul>
|
||||
<li>Mauls are also an option</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://www.buckleguy.com/245-belt-punch-multiple-sizes/" target="_blank" rel="external">Single hole punches</a>, or...</li>
|
||||
<li><a href="https://www.buckleguy.com/cs-osborne-223-revolving-punch/" target="_blank" rel="external">Rotary punch</a>
|
||||
<ul>
|
||||
<li>If you choose a rotary punch, you don't need the cutting board and mallet (at least for this)</li>
|
||||
<li>I find rotary punches are too big for my small hands! So I prefer single hole punches</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://www.buckleguy.com/cs-osborne-151-bag-punch-oblong-multiple-sizes/" target="_blank" rel="external">Oblong punches</a>
|
||||
<ul>
|
||||
<li>If you're setting buckles, you might want this, or...</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="simulating-an-oblong-punch">Simulating an oblong punch</h3>
|
||||
<ol>
|
||||
<li><strong>Plan:</strong> draw your oblong shape. You'll probably want it about as long as your leather strap is wide, and the width should be determined by the width of the buckle tongue</li>
|
||||
<li><strong>Punch two holes:</strong> punch a hole at each end of the oblong</li>
|
||||
<li><strong>Cut from one side <em>halfway</em> in:</strong> from one hole, cut halfway through the oblong</li>
|
||||
<li><strong>Cut remainder of line from other side:</strong> meet your existing cut</li>
|
||||
<li><strong>Success!</strong></li>
|
||||
</ol>
|
||||
<h2 id="page-6%3A-stitch">Page 6: Stitch</h2>
|
||||
<ul>
|
||||
<li><a href="https://www.buckleguy.com/bg-leather-wing-divider-compass-0-20mm/" target="_blank" rel="external">Wing divider/scratch compass</a>
|
||||
<ul>
|
||||
<li>Lets you draw guidelines an even distance from edges</li>
|
||||
<li>Craft store compasses <em>may</em> work, but you'd want to ensure that they are pointed enough to mark a line</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://www.buckleguy.com/bg-stitching-punch/" target="_blank" rel="external">Stitching chisels</a>
|
||||
<ul>
|
||||
<li>Get a 2-tooth and one with lots of teeth - a full set is nice, but not as necessary</li>
|
||||
<li>Also called &quot;pricking irons&quot;</li>
|
||||
<li><strong>Use these with your cutting board, <em>not</em> your cutproof mat</strong></li>
|
||||
<li>You can also use a combination of a <a href="https://www.buckleguy.com/japanese-stitching-marking-wheel-curved-handle/" target="_blank" rel="external">marking wheel</a> and <a href="https://www.buckleguy.com/bg-leather-awls-detachable-needle/" target="_blank" rel="external">awl</a>, but this <em>will</em> be slower and you won't be able to punch out 6-9 stitches at once</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>2 <a href="https://www.buckleguy.com/517-harness-needles-for-hand-sewing-blunt-tip-5-needles/" target="_blank" rel="external">Blunt tip needles</a></li>
|
||||
<li><a href="https://www.buckleguy.com/ritza-25-tiger-thread-waxed-polyester-cream/" target="_blank" rel="external">Waxed polyester thread</a>
|
||||
<ul>
|
||||
<li>I use 0.8mm thickness</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Lighter (you don't need a link</li>
|
||||
</ul>
|
||||
<h3 id="saddle-stitch">Saddle stitch</h3>
|
||||
<p>I recommend watching <a href="https://www.youtube.com/watch?v=nHL_duaJxWQ" target="_blank" rel="external">How to Saddle Stitch</a> in addition to reading my single-page overview. Particularly useful is his method of securing the thread to the needle (I just didn't have the space to cover this).</p>
|
||||
<ol>
|
||||
<li>Pre-punch holes</li>
|
||||
<li>Thread needles on both ends</li>
|
||||
<li>Thread through first hole</li>
|
||||
<li>Needle 1 through next hole</li>
|
||||
<li>Follow with needle 2. Pull existing thread to the side to avoid piercing it</li>
|
||||
<li>Pull tight with even tension</li>
|
||||
<li>Repeat</li>
|
||||
</ol>
|
||||
<p>To finish, stitch backwards for a few stitches. Trim ends short. Melt. Flatten by rubbing against metal end of lighter.</p>
|
||||
<h2 id="page-8%3A-rivet">Page 8: Rivet</h2>
|
||||
<p>One end of the rivet sits in the bowl of the <strong>anvil</strong>. The other end caps on and is nested in the <strong>setter</strong>, which is then hit with a mallet (or maul).</p>
|
||||
<p>A basic setter and anvil has an anvil that is larger than the rivet.</p>
|
||||
<ul>
|
||||
<li><strong>Good:</strong> works with multiple rivet sizes; cheap and common</li>
|
||||
<li><strong>Bad:</strong> hard to set evenly</li>
|
||||
</ul>
|
||||
<p>My preference is a fixed-size setter and anvil. The anvil is sized to the rivet cap size.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><strong>Good:</strong> better looking and easier</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Bad:</strong> only one size of rivet; often higher quality which raises the price</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><a href="https://tandyleather.com/products/easy-to-do-rivets-setter" target="_blank" rel="external">Basic double-cap rivets, setter, and anvil set</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Fixed-size <a href="https://www.buckleguy.com/bg-rivet-setter-concave-end-multiple-sizes/" target="_blank" rel="external">setter</a> and <a href="https://www.buckleguy.com/bg-rivet-setter-base-for-9-2-11-13mm-cap-rivets/" target="_blank" rel="external">anvil</a>; paired <a href="https://www.buckleguy.com/double-cap-rivet-antique-brass-solid-brass-ll-100-sets-per-bag-multiple-sizes/" target="_blank" rel="external">double-cap rivets</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
</content>
|
||||
</entry>
|
||||
<entry>
|
||||
@@ -1058,326 +1227,6 @@
|
||||
<id>https://leecat.art/log-cabin-dishtowels/</id>
|
||||
<content type="html"><p>Yarn: <a href="https://woolery.com/products/circulo-anne-weaving-yarn" target="_blank" rel="external">Circulo Anne Weaving Yarn</a>.</p>
|
||||
<p>3 towels. Woven area roughly 12&quot;x24&quot;. Hemstitched.</p>
|
||||
</content>
|
||||
</entry>
|
||||
<entry>
|
||||
<title>core CSS</title>
|
||||
<link href="https://leecat.art/core-css/" />
|
||||
<updated>2026-06-30T00:00:00Z</updated>
|
||||
<id>https://leecat.art/core-css/</id>
|
||||
<content type="html"><p>What CSS would you implement if you had no or very low vision? Recently, a Blind friend wanted to know more about CSS. This is my attempt at a very minimal CSS file that cleans up a few <a href="https://browserdefaultstyles.com/" target="_blank" rel="external">browser defaults</a> for a more pleasant browsing experience without needing much if any visual testing.</p>
|
||||
<p>Want to just see the final stylesheet? <a href="https://leecat.art/core-css/#result">Skip to the end of the page</a>.</p>
|
||||
<h2 id="css-resets">CSS resets</h2>
|
||||
<p>Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended <a href="https://www.joshwcomeau.com/css/custom-css-reset/" target="_blank" rel="external">Josh W. Comeau's CSS Reset</a>, which looks largely very solid to me. However, if using that particular reset, I would <em><strong>not</strong></em> reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually.</p>
|
||||
<h2 id="color">color</h2>
|
||||
<p>Complex color palettes are a no-go. But browser defaults are also pretty bad - stark black and white are really hard on sighted users' eyes. Dulling the black and white down to nearby grays helps a lot. And of course, we'll support light and dark modes.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">color-scheme</span><span class="token punctuation">:</span> light dark<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token property">--color-light</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
|
||||
<span class="token property">--color-dark</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token property">--color-bg</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-light<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-dark<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token property">--color-text</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-dark<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-light<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-text<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h3 id="accents">accents</h3>
|
||||
<p>To skip reading about accent colors, head right to <a href="https://leecat.art/core-css/#focus-indication">focus indication</a>.</p>
|
||||
<p>If you have any opinions about color, you might pick accents. At the simplest level, I'd pick one for light mode and one for dark mode. <a href="https://xkcd.com/color/rgb/" target="_blank" rel="external">XKCD has a color sheet based on a wide survey</a> that is potentially useful here. Validate that the color contrast is enough with a tool like <a href="https://webaim.org/resources/contrastchecker/" target="_blank" rel="external">WebAIM's Contrast Checker</a>. You might color your headers and links.</p>
|
||||
<p>If you're coloring links, it's worth considering browser defaults. Blue is unvisited, purple is visited, and red is inactive. Choosing a red or purple link color might confuse users. Blues are pretty safe. A green might be fun.</p>
|
||||
<p>Being the person that I am, I'm picking a teal and a pink. XKCD labels these &quot;dark teal&quot; (contrast ratio of 7.11 against our gray-white) and &quot;powder pink&quot; (contrast ratio of 9.49 against our gray-black) respectively.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">--color-teal</span><span class="token punctuation">:</span> #014d4e<span class="token punctuation">;</span>
|
||||
<span class="token property">--color-pink</span><span class="token punctuation">:</span> #ffb2d0<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token property">--color-accent</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-teal<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-pink<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">h1, h2, h3, h4, h5, h6,
|
||||
a</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h2 id="focus-indication">focus indication</h2>
|
||||
<p>Focus indication is a visual change that occurs when something interactive on the screen (like a link) receives keyboard focus. Without it, sighted keyboard-only users can't tell where they are on the page. Conventionally, it's an outline. <a href="https://www.sarasoueidan.com/blog/focus-indicators/" target="_blank" rel="external">Read more about accessible focus indication</a>.</p>
|
||||
<p>I would recommend a <em>smidge</em> of padding (spacing <em>inside</em> the border or outline of an element) around your links to allow for more space between the letters and focus outline in order to help with legibility.</p>
|
||||
<p>If you recolor your links as mentioned in the previous section, recolor your focus indication for cohesiveness! Additionally, if you overwrite the browser default focus outline in this way or any other, you might want to add a very small border radius to your links. I find that perfectly square corners are a bit of a harsh look, but I'll admit this one is kind of personal preference.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">padding</span><span class="token punctuation">:</span> .1rem<span class="token punctuation">;</span>
|
||||
<span class="token property">border-radius</span><span class="token punctuation">:</span> .05rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">a:focus-visible</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">outline</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h2 id="font">font</h2>
|
||||
<p>All-serif everything (a common browser default) is, uh, kinda ugly and overwhelming. Little tails on every letter are visual clutter, at least to my eyes. It feels outdated, like an old-timey newspaper. Picking serif for headers and sans-serif for body (or vice versa) can be a nice alternative. Plus, the contrast will help on lower-level headings... if you ever drill down to <code>h5</code>s or <code>h6</code>s anyway.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">h1, h2, h3, h4, h5, h6</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">font-family</span><span class="token punctuation">:</span> serif<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h2 id="margins">margins</h2>
|
||||
<p>Margins create visual space around an element, and this whitespace helps significantly with focus. We're <em>super super not</em> going to reset the margins for everything. That puts us in design hell and becomes a very visually-oriented problem. Instead, we're just changing two things: the width of the body and where it sits on the page. Readers, particularly dyslexic readers, can more easily move to the next line when they are not trying to track back across the full width of the screen.</p>
|
||||
<p>This margin rule defines a small amount of top/bottom space first (<code>1rem</code>), and then tells the page to make the left and right margins equal with <code>auto</code> - centering the body in the middle of the page. I'm also going to set a <code>max-width</code> to handle those mystical ultra-wide screens (never used one), and a couple of breakpoints for tablets and mobile.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 65%<span class="token punctuation">;</span>
|
||||
<span class="token property">max-width</span><span class="token punctuation">:</span> 1800px<span class="token punctuation">;</span>
|
||||
<span class="token property">margin</span><span class="token punctuation">:</span> 1rem auto<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1050px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
||||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 85%<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 650px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
||||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 92%<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h2 id="links">links</h2>
|
||||
<p>One quick note about accessible links: they should be identifiable by a method other than color. Basically, don't turn off your underlines! Additionally, I would recommend against using underlines for emphasis elsewhere - use <code>&lt;em&gt;</code> or <code>&lt;strong&gt;</code> instead.</p>
|
||||
<h2 id="images">images</h2>
|
||||
<p>As mentioned up top, this overlaps with the linked CSS Reset writeup.</p>
|
||||
<p>By default, an image will be full size. If it's a large image, that can be even larger than the viewport. We'll give them a <code>max-width</code> and center them in case they are narrower than the body. <code>display: block</code> allows that centering to actually work.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">img, picture, video, canvas, svg</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
|
||||
<span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
|
||||
<span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h2 id="headers%2C-footers%2C-navs">headers, footers, navs</h2>
|
||||
<p>Let's talk the components that every page likely has - a header, a footer, and navs. I'm going to use a very simple design for our header - a <a href="https://webaim.org/techniques/skipnav/" target="_blank" rel="external">skip link</a>, an (optional) site title (the title could also be one of the nav links), and then an unordered list of links enclosed in a <code>nav</code> element. Like the following:</p>
|
||||
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skip<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Skip to content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is my cool website<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main menu navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/header-nav-1/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Header nav item 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/header-nav-2/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Header nav item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/header-nav-3/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Header nav item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">></span></span></code></pre>
|
||||
<p>and our footer will be similar:</p>
|
||||
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/footer-nav-1/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footer nav item 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/footer-nav-2/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footer nav item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>footer</span><span class="token punctuation">></span></span></code></pre>
|
||||
<h3 id="skip-link">skip link</h3>
|
||||
<p>Let's handle the skip link first. Your skip link can be hard to style without visual feedback. Commonly, they start hidden and only appear when receiving keyboard focus. It's entirely reasonable, in my opinion, to leave it visible. <strong>I actually like this as a design choice</strong>, as it highlights the idea and hopefully purpose of a skip link to sighted readers. However, if you want to hide it, there's a lot (a <em>lot</em>) of ways to do so. Using <code>position: absolute</code>, <code>left</code>, and <code>top</code>, we can place the skip link outside of the page, then move it in when it receives focus. We'll also stick a background on there to prevent the text from overlaying our site title and becoming illegible.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">#skip</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
|
||||
<span class="token property">left</span><span class="token punctuation">:</span> -999px<span class="token punctuation">;</span>
|
||||
<span class="token property">top</span><span class="token punctuation">:</span> -999px<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">#skip:focus-visible</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">left</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
|
||||
<span class="token property">top</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h3 id="site-title">site title</h3>
|
||||
<p>I won't do much here, but I am going to remove the underline (which is the default for links). It's commonly understood that the site title (or sometimes just the word &quot;home&quot;) links to the home page, and the underline is unnecessary visual clutter.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">header h2</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h3 id="flexbox-navs">flexbox navs</h3>
|
||||
<p>We're going to dip our toes into flexbox for this one - it allows us to make content fall neatly into rows or columns. It's pretty powerful, and can get pretty weird, but we'll keep it bare-bones.</p>
|
||||
<p>By default, the unordered lists in the navs will display with each list item on a new line with a bullet point in front of the list item. Let's take up less space by putting them all on one line. I'm going to center the items, and I'm going to allow them to wrap onto a new line. I'm also taking the bullet points off of the list items and allowing for a bit of space between each item.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">nav ul</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||||
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||||
<span class="token property">flex-flow</span><span class="token punctuation">:</span> row wrap<span class="token punctuation">;</span>
|
||||
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h3 id="aria-current">aria-current</h3>
|
||||
<p>Screen reader users get <code>aria-current</code> information, and it can be helpful to present it to sighted users as well. There are of course many ways to do this with color, but we'll avoid that. Let's add carets before and after the current page link to indicate this. We'll scope them only to the header and footer just in case we run across a weird case.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">header a[aria-current="page"]::before,
|
||||
footer a[aria-current="page"]::before</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"> "</span> / <span class="token string">""</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">header a[aria-current="page"]::after,
|
||||
footer a[aria-current="page"]::after</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" &lt;"</span> / <span class="token string">""</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<p>The content after the forward slash is what is conveyed to screen reader users. The carets are not useful from a screen reader perspective, so this excerpts them.</p>
|
||||
<h3 id="separating-header-and-footer-from-main">separating header and footer from main</h3>
|
||||
<p>The header and footer can visually run into the main text area if there's not extra space or a border. We'll keep it simple with borders. If you're not using an accent color, use your text color instead.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">header</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">border-bottom</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">footer</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">border-top</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h2 id="print-media">print media</h2>
|
||||
<p>There's a couple straightforward additions we can make to handle printing the site cleanly and making best use of the physical paper space. Remove the header and footer, reset the width and colors to limit ink usage, and print link URLs after the link.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">{</span>
|
||||
<span class="token selector">header,
|
||||
footer,
|
||||
nav</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 95vw<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">body,
|
||||
h1, h2, h3, h4, h5,
|
||||
a</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">a::after</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" ("</span> <span class="token function">attr</span><span class="token punctuation">(</span>href<span class="token punctuation">)</span> <span class="token string">")"</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h2 id="feedback">feedback</h2>
|
||||
<p>Did I make a mistake? Is there more I could add? <a href="https://leecat.art/contact/">Reach out</a>!</p>
|
||||
<h2 id="result">result</h2>
|
||||
<p>Here's our outcome.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">color-scheme</span><span class="token punctuation">:</span> light dark<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token property">--color-light</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
|
||||
<span class="token property">--color-dark</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
|
||||
<span class="token property">--color-teal</span><span class="token punctuation">:</span> #014d4e<span class="token punctuation">;</span>
|
||||
<span class="token property">--color-pink</span><span class="token punctuation">:</span> #ffb2d0<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token property">--color-bg</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-light<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-dark<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token property">--color-text</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-dark<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-light<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token property">--color-accent</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-teal<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-pink<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-text<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 65%<span class="token punctuation">;</span>
|
||||
<span class="token property">max-width</span><span class="token punctuation">:</span> 1800px<span class="token punctuation">;</span>
|
||||
<span class="token property">margin</span><span class="token punctuation">:</span> 1rem auto<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1100px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
||||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 85%<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 650px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
||||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 92%<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token comment">/* Basic elements */</span>
|
||||
<span class="token selector">h1, h2, h3, h4, h5, h6</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">font-family</span><span class="token punctuation">:</span> serif<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">h1, h2, h3, h4, h5, h6,
|
||||
a</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">a</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">padding</span><span class="token punctuation">:</span> .1rem<span class="token punctuation">;</span>
|
||||
<span class="token property">border-radius</span><span class="token punctuation">:</span> .05rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">a:focus-visible</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">outline</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">img, picture, video, canvas, svg</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
|
||||
<span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
|
||||
<span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token comment">/* Header, footer, nav */</span>
|
||||
<span class="token selector">header</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">border-bottom</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">#skip</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
|
||||
<span class="token property">left</span><span class="token punctuation">:</span> -999px<span class="token punctuation">;</span>
|
||||
<span class="token property">top</span><span class="token punctuation">:</span> -999px<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">#skip:focus-visible</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">left</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
|
||||
<span class="token property">top</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">header a[aria-current="page"]::before,
|
||||
footer a[aria-current="page"]::before</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"> "</span> / <span class="token string">""</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">header a[aria-current="page"]::after,
|
||||
footer a[aria-current="page"]::after</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" &lt;"</span> / <span class="token string">""</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">header h2 a</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">nav ul</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||||
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||||
<span class="token property">flex-flow</span><span class="token punctuation">:</span> row wrap<span class="token punctuation">;</span>
|
||||
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">footer</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">border-top</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token comment">/* Print media */</span>
|
||||
<span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">{</span>
|
||||
<span class="token selector">header,
|
||||
footer,
|
||||
nav</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 95vw<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">body,
|
||||
h1, h2, h3, h4, h5,
|
||||
a</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">a::after</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" ("</span> <span class="token function">attr</span><span class="token punctuation">(</span>href<span class="token punctuation">)</span> <span class="token string">")"</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
</content>
|
||||
</entry>
|
||||
</feed>
|
||||
Reference in new issue
Block a user
