Skip to content

Instantly share code, notes, and snippets.

@UnaiYecora
Last active November 6, 2024 18:23
Show Gist options
  • Save UnaiYecora/73e96687a8329de43c421bb452e94bce to your computer and use it in GitHub Desktop.
Save UnaiYecora/73e96687a8329de43c421bb452e94bce to your computer and use it in GitHub Desktop.
/**
* SETTINGS
* Also included: ".sr-only" for visually hiding content while keeping it accessible to screen readers
*/
:root {
--max-paragraph-width: 65ch;
--anchor-scroll-margin: 5ex;
--min-textarea-height: 10em;
--focus-outline-color: #4d90fe;
--focus-outline-width: 2px;
--focus-outline-style: solid;
}
:root{interpolate-size:allow-keywords}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}html{hanging-punctuation:first last}html:focus-within,:has(:target){scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html:focus-within,:has(:target){scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}body{min-height:100svh;line-height:1.5;margin:0}p,h1,h2,h3,h4,h5,h6,figure,ul,ol,li{margin-block:0}p:not([class]),ul:not([class]),ol:not([class]),figure:not([class]){margin-block:1em}li:not([class]){margin-block:.5em}h1:not([class]),h2:not([class]),h3:not([class]),h4:not([class]),h5:not([class]),h6:not([class]){margin-block:.75em}ul[role='list'],ol[role='list'],ul[class],ol[class]{list-style:none;padding:0}h1,h2,h3,h4,h5,h6,button,input,label{line-height:1.1}h1,h2,h3,h4,h5,h6{text-wrap:balance;letter-spacing:-0.05ch}p,h1,h2,h3,h4,h5,h6,li,figure,blockquote,figcaption{overflow-wrap:break-word;word-break:normal}p,li,figcaption{max-width:var(--max-paragraph-width,75ch);text-wrap:pretty}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture,video,svg,canvas{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit;color:inherit}textarea:not([rows]){min-height:var(--min-textarea-height,10em)}:target{scroll-margin-block:var(--anchor-scroll-margin,5ex)}:root{font-family:BlinkMacSystemFont,-apple-system,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif}pre,code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace,monospace}main,section,article{container-type:inline-size}:focus-visible{outline:var(--focus-outline-width,2px) solid var(--focus-outline-color,#4d90fe);outline-offset:2px;outline-style:var(--focus-outline-style,solid)}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
/**
* SETTINGS
* Also included: ".sr-only" for visually hiding content while keeping it accessible to screen readers
*/
:root {
--max-paragraph-width: 65ch;
--anchor-scroll-margin: 5ex;
--min-textarea-height: 10em;
--focus-outline-color: #4d90fe;
--focus-outline-width: 2px;
--focus-outline-style: solid;
}
:root {
interpolate-size: allow-keywords;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
html {
hanging-punctuation: first last;
}
html:focus-within,
:has(:target) {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html:focus-within,
:has(:target) {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body {
min-height: 100svh;
line-height: 1.5;
margin: 0;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
ul,
ol,
li {
margin-block: 0;
}
p:not([class]),
ul:not([class]),
ol:not([class]),
figure:not([class]) {
margin-block: 1em;
}
li:not([class]) {
margin-block: 0.5em;
}
h1:not([class]),
h2:not([class]),
h3:not([class]),
h4:not([class]),
h5:not([class]),
h6:not([class]) {
margin-block: 0.75em;
}
ul[role='list'],
ol[role='list'],
ul[class],
ol[class] {
list-style: none;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
label {
line-height: 1.1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
letter-spacing: -0.05ch;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
figure,
blockquote,
figcaption {
overflow-wrap: break-word;
word-break: normal;
}
p,
li,
figcaption {
max-width: var(--max-paragraph-width, 75ch);
text-wrap: pretty;
}
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
img,
picture,
video,
svg,
canvas {
max-width: 100%;
display: block;
}
input,
button,
textarea,
select {
font-family: inherit;
font-size: inherit;
color: inherit;
}
textarea:not([rows]) {
min-height: var(--min-textarea-height, 10em);
}
:target {
scroll-margin-block: var(--anchor-scroll-margin, 5ex);
}
:root {
font-family: BlinkMacSystemFont, -apple-system, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
}
pre,
code,
kbd,
samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace;
}
main,
section,
article {
container-type: inline-size;
}
:focus-visible {
outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, #4d90fe);
outline-offset: 2px;
outline-style: var(--focus-outline-style, solid);
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment