mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-23 21:02:09 +00:00
Remove responsive navbar
It's mobile-friendly as-is. I made sure that tap-targets were even bigger and more spaced-apart, just to be safe. Hide unnecessary nav-links in print mode.
This commit is contained in:
Rohan Kumar
parent
2d260b7d84
commit
321f851431
5 changed files with 39 additions and 70 deletions
|
|
@ -19,14 +19,14 @@
|
|||
color: #f1e7b2;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #b93;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #fdf;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #b93;
|
||||
}
|
||||
|
||||
/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */
|
||||
@media (prefers-contrast: less) {
|
||||
/* stylelint-enable */
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ html {
|
|||
* viewport.
|
||||
* 45em is the lowest reasonable width for titles, nav, footers, etc */
|
||||
max-width: 45em;
|
||||
padding: 0 2%;
|
||||
padding: 0 3%;
|
||||
}
|
||||
|
||||
/* 45em is too wide for long body text. */
|
||||
|
|
@ -97,26 +97,40 @@ h1 {
|
|||
}
|
||||
|
||||
/* Compensate for misalignment caused by a padding increase. */
|
||||
header nav,
|
||||
footer nav {
|
||||
margin-left: -.25em;
|
||||
header nav {
|
||||
margin-left: -.375em;
|
||||
}
|
||||
|
||||
footer nav {
|
||||
margin: -.375em;
|
||||
}
|
||||
|
||||
/* Save some space and paper by making the nav single-line, but bump
|
||||
* up the line-height to increase space between tap-targets (a11y) */
|
||||
header nav li,
|
||||
footer nav li {
|
||||
display: inline;
|
||||
line-height: 2.125;
|
||||
}
|
||||
|
||||
/* Lists without bullets: navlinks, posts lists, webmentions.
|
||||
* Those three are lists whose items are already easily distinguishable,
|
||||
* rendering bullet points as unnecessary extra visual noise. Pretty
|
||||
* much the only purely-aesthetic change in this CSS file. */
|
||||
.unstyled-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.unstyled-list li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
|
||||
/* Increase nav link tap target size a bit */
|
||||
header nav li a,
|
||||
footer nav li a {
|
||||
/* inline-end doesn't work in netsurf. -right should stil make sense
|
||||
* in RTL machine translation, it'll just look a bit indented. */
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
/* single-line nav on widescreen and print.
|
||||
* Single-line nav on print saves almost half a page. */
|
||||
@media print, (min-width: 32em) {
|
||||
header nav li,
|
||||
footer nav li {
|
||||
display: inline;
|
||||
}
|
||||
margin: .25em;
|
||||
padding: .125em;
|
||||
}
|
||||
|
||||
/* <kbd> should be distinguished from <code> and surrounding text
|
||||
|
|
@ -137,24 +151,6 @@ figure:not([itemtype]) figcaption {
|
|||
margin: 0 10%;
|
||||
}
|
||||
|
||||
/* Mobile optimization: nav links are tappable with fat fingers */
|
||||
nav li,
|
||||
.unstyled-list li {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
/* Lists without bullets: navlinks, posts lists, webmentions.
|
||||
* Those three are lists whose items are already easily distinguishable,
|
||||
* rendering bullet points as unnecessary extra visual noise. Pretty
|
||||
* much the only purely-aesthetic change in this CSS file. */
|
||||
.unstyled-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.unstyled-list li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* browsers make monospace small and unreadable for some dumb legacy
|
||||
* reason and this somehow fixes that without overriding the user's
|
||||
* font size preferences. */
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
/* Currently only used for anchors */
|
||||
span[aria-hidden],
|
||||
/* You can't navigate in a printout. */
|
||||
footer nav {
|
||||
footer nav,
|
||||
header nav li a:not([aria-current]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,6 +20,6 @@ h4 {
|
|||
|
||||
figure,
|
||||
article article,
|
||||
div[role="doc-endnotes"] ol li {
|
||||
li {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -415,14 +415,6 @@ Ultimately, surveillance self-defense on the web is an arms race full of trade-o
|
|||
|
||||
Browsers allow users to zoom by adjusting size metrics. Additionally, most browsers allow users to specify a minimum font size. Minimum sizes don't always work; setting size values in `px` can override these settings.
|
||||
|
||||
In your stylesheets, avoid using "px" where possible. Define sizes and dimensions using relative units (preferably "em"). Exceptions exist for some decorations⁴ (e.g. borders), but they are uncommon.
|
||||
|
||||
Set font size and line-spacing with a percentage and a unitless value, respectively:
|
||||
|
||||
```
|
||||
font: 100%/1.5 sans-serif;
|
||||
```
|
||||
|
||||
## Beyond alt-text
|
||||
|
||||
Expect some readers to have images disabled or unloaded. Examples include:
|
||||
|
|
@ -876,15 +868,7 @@ Nontrivial use of width-selectors, in CSS queries or imagesets, is actually a po
|
|||
=> https://matt.traudt.xyz/posts/2016-09-04-how-css-alone-can-help-track-you/ How CSS alone can help track you
|
||||
|
||||
|
||||
Exceptions exist: one or two very simple responsive changes won't hurt. The main anti-patterns are adjusting the relative order of elements, layout shifts dramatic enough to cause confusion, and making requests based on media queries that reveal fingerprintable information. For example, the only responsive layout change on my website (https://seirdy.one) is a single CSS declaration to switch between inline and multi-line navigation links at the beginning of the page:
|
||||
|
||||
```
|
||||
@media print, (min-width: 32rem) {
|
||||
header nav li {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
```
|
||||
Exceptions exist: one or two very simple responsive changes won't hurt. The main anti-patterns are adjusting the relative order of elements, layout shifts dramatic enough to cause confusion, and making requests based on media queries that reveal fingerprintable information.
|
||||
|
||||
### What about sidebars?
|
||||
|
||||
|
|
|
|||
|
|
@ -890,18 +890,6 @@ Nontrivial use of width-selectors, in CSS queries or imagesets, is actually a po
|
|||
|
||||
Exceptions exist: one or two very simple responsive changes won't hurt. The main anti-patterns are adjusting the relative order of elements, layout shifts dramatic enough to cause confusion, and making requests based on media queries that reveal fingerprintable information.
|
||||
|
||||
{{<codefigure>}} {{< codecaption lang="CSS" >}} the only responsive layout change on [my website](https://seirdy.one/) is a single CSS declaration to switch between inline and multi-line navigation links at the beginning of the page.{{< /codecaption >}}
|
||||
|
||||
```figure
|
||||
@media print, (min-width: 32rem) {
|
||||
header nav li {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
{{</codefigure>}}
|
||||
|
||||
### Sidebar pitfalls
|
||||
|
||||
Sidebars are probably unnecessary, and can be quite annoying to readers who re-size windows frequently. This is especially true for tiling window manager users like me: we frequently shrink windows to a fraction of their original size. When this happens to a website with a sidebar, one of two things happens:
|
||||
|
|
@ -1482,7 +1470,7 @@ A special thanks goes out to GothAlice for the questions she answered in <samp>#
|
|||
|
||||
<figure itemscope itemtype="https://schema.org/SoftwareSourceCode">
|
||||
<figcaption>
|
||||
<strong itemprop="name"> <span itemprop="codeSampleType">Code snippet</span> 12</strong>:
|
||||
<strong itemprop="name"> <span itemprop="codeSampleType">Code snippet</span> 11</strong>:
|
||||
Firefox prefs to turn off JIT compilation
|
||||
</figcaption>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue