1
0
Fork 0
va/assets/css/typography.css

127 lines
1.9 KiB
CSS

article {
word-break: break-word;
}
h1,
h2,
h3,
h4 {
hyphens: auto;
line-height: var(--line-height-small);
}
h1 {
font-size: var(--s2);
}
h2 {
font-size: var(--s1);
}
h3 {
font-size: var(--s0);
}
b,
h3,
strong,
.font-weight_bold {
font-weight: bold;
}
input,
button,
textarea,
select {
font: inherit;
}
figcaption,
blockquote > q {
font-style: italic;
}
:any-link {
color: hsl(240, var(--l-100), var(--l-50));
cursor: pointer;
text-decoration-color: hsl(240, var(--l-100), var(--l-50));
text-decoration-skip-ink: auto;
text-decoration: underline;
transition-duration: var(--speed-medium);
transition-property: color,
text-decoration-color;
transition-timing-function: var(--easing-standard);
}
:any-link:hover {
color: hsl(355, var(--l-100), var(--l-45));
text-decoration-color: hsl(355, var(--l-100), var(--l-45));
}
abbr {
text-decoration-style: dotted;
text-decoration: underline;
}
wbr:before {
content: "\200B";
white-space: normal;
}
th {
text-align: left;
}
q {
quotes: '«' '»';
}
label,
figcaption {
font-size: var(--s-1);
}
ul {
list-style-type: '一 ';
}
ul[class],
ol[class] {
list-style: none;
}
table {
border-collapse: collapse;
}
hr {
border: none;
height: 1px;
background: hsl(0, 0%, var(--l-20));
background-image: linear-gradient(to right,
hsl(0, 0%, var(--l-80)),
hsl(0, 0%, var(--l-20)),
hsl(0, 0%, var(--l-80)));
}
html {
color: var(--color);
font-display: optional;
font-family: system-ui,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Helvetica,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji;
font-size: calc(1rem + 0.333vw);
}
body {
line-height: var(--line-height);
text-rendering: optimizeSpeed;
}