Files
kashilo/css/base.css
2026-01-28 07:02:55 +01:00

104 lines
1.8 KiB
CSS

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--color-text);
background-color: var(--color-bg);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-primary-hover);
}
img, svg {
display: block;
max-width: 100%;
height: auto;
}
button, input, textarea, select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
border: none;
background: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: -0.02em;
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
p + p {
margin-top: var(--space-md);
}
:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
}
::selection {
background-color: var(--color-primary);
color: white;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-md);
}
@media (min-width: 768px) {
.container {
padding: 0 var(--space-lg);
}
}