You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
1.9 KiB
140 lines
1.9 KiB
/** |
|
* @file |
|
* Generic base elements. |
|
*/ |
|
|
|
@import "media-queries.pcss.css"; |
|
|
|
*, |
|
*::before, |
|
*::after { |
|
box-sizing: border-box; |
|
} |
|
|
|
html { |
|
font-family: var(--font-sans); |
|
font-size: 100%; |
|
font-weight: normal; |
|
font-style: normal; |
|
line-height: var(--line-height-base); |
|
} |
|
|
|
body { |
|
margin: 0; |
|
color: var(--color-text-neutral-medium); |
|
background-color: var(--color--gray-100); |
|
background-image: url("../../images/background.svg"); |
|
background-position: top left; /* LTR */ |
|
|
|
&.is-fixed { |
|
position: fixed; |
|
overflow: hidden; |
|
width: 100%; |
|
} |
|
} |
|
|
|
[dir="rtl"] body { |
|
background-position: top right; |
|
} |
|
|
|
a { |
|
color: var(--color-text-primary-medium); |
|
|
|
&:hover { |
|
color: var(--color--primary-50); |
|
} |
|
|
|
&:focus { |
|
outline: solid 2px currentColor; |
|
outline-offset: 2px; |
|
} |
|
} |
|
|
|
button { |
|
font-family: inherit; |
|
} |
|
|
|
img, |
|
video { |
|
display: block; |
|
max-width: 100%; |
|
height: auto; |
|
} |
|
|
|
audio { |
|
display: block; |
|
max-width: 100%; |
|
} |
|
|
|
h1 { |
|
letter-spacing: -0.01em; |
|
font-size: 28px; |
|
line-height: var(--sp2); |
|
|
|
@media (--md) { |
|
font-size: 60px; |
|
line-height: var(--sp4); |
|
} |
|
} |
|
|
|
h2 { |
|
letter-spacing: -0.01em; |
|
font-size: 24px; |
|
line-height: var(--sp2); |
|
|
|
@media (--md) { |
|
font-size: 36px; |
|
line-height: var(--sp3); |
|
} |
|
} |
|
|
|
h3 { |
|
font-size: 20px; |
|
line-height: var(--sp1-5); |
|
|
|
@media (--md) { |
|
font-size: 24px; |
|
line-height: var(--sp2); |
|
} |
|
} |
|
|
|
h4 { |
|
font-size: 18px; |
|
line-height: var(--sp1-5); |
|
} |
|
|
|
h5 { |
|
font-size: 16px; |
|
line-height: var(--sp1-5); |
|
} |
|
|
|
h6 { |
|
font-size: 14px; |
|
line-height: var(--sp); |
|
} |
|
|
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6 { |
|
margin-block: var(--sp); |
|
color: var(--color-text-neutral-loud); |
|
font-family: var(--font-sans); |
|
font-weight: bold; |
|
|
|
@media (--md) { |
|
margin-block: var(--sp2); |
|
} |
|
} |
|
|
|
ul { |
|
margin-block-start: 0.25em; |
|
margin-block-end: 0.25em; |
|
margin-inline-start: 1.5em; |
|
margin-inline-end: 0; |
|
padding-inline-start: 0; |
|
list-style-type: disc; |
|
list-style-image: none; |
|
}
|
|
|