58 lines
2.2 KiB
CSS
58 lines
2.2 KiB
CSS
:root {
|
|
--space-size-4xs: clamp(0.125rem, calc(0.12rem + 0.03vw), 0.21rem);
|
|
--space-size-3xs: clamp(0.25rem, calc(0.24rem + 0.06vw), 0.31rem);
|
|
--space-size-2xs: clamp(0.5rem, calc(0.48rem + 0.13vw), 0.63rem);
|
|
--space-size-xs: clamp(0.75rem, calc(0.71rem + 0.19vw), 0.94rem);
|
|
--space-size-s: clamp(1rem, calc(0.95rem + 0.25vw), 1.25rem);
|
|
--space-size-m: clamp(1.5rem, calc(1.43rem + 0.38vw), 1.88rem);
|
|
--space-size-l: clamp(2rem, calc(1.9rem + 0.5vw), 2.5rem);
|
|
--space-size-xl: clamp(3rem, calc(2.85rem + 0.75vw), 3.75rem);
|
|
--space-size-2xl: clamp(4rem, calc(3.8rem + 1vw), 5rem);
|
|
--space-size-3xl: clamp(6rem, calc(5.7rem + 1.5vw), 7.5rem);
|
|
--text-size-2xs: clamp(0.56rem, calc(0.72rem + -0.14vw), 0.69rem);
|
|
--text-size-xs: clamp(0.83rem, calc(0.83rem + 0vw), 0.83rem);
|
|
--text-size-s: clamp(1rem, calc(0.95rem + 0.25vw), 1.25rem);
|
|
--text-size-m: clamp(1.2rem, calc(1.07rem + 0.68vw), 1.88rem);
|
|
--text-size-l: clamp(1.44rem, calc(1.17rem + 1.37vw), 2.81rem);
|
|
--text-size-xl: clamp(1.73rem, calc(1.23rem + 2.49vw), 4.22rem);
|
|
--text-size-2xl: clamp(2.07rem, calc(1.22rem + 4.25vw), 6.33rem);
|
|
--text-size-3xl: clamp(2.49rem, calc(1.09rem + 7vw), 9.49rem);
|
|
--font-family-sans: ui-sans-serif, system-ui, -apple-system,
|
|
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
|
|
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
|
"Noto Color Emoji";
|
|
--font-family-mono: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo,
|
|
Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
--screen-sm: 640px;
|
|
--screen-md: 768px;
|
|
--screen-lg: 1024px;
|
|
--screen-xl: 1280px;
|
|
--screen-2xl: 1536px;
|
|
--screen-3xl: 1920px;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: var(--font-family-sans);
|
|
font-size: var(--text-size-s);
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
height: 100%;
|
|
}
|
|
|
|
main[data-for="note"] {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
article {
|
|
max-width: var(--screen-lg);
|
|
padding: var(--space-size-s);
|
|
border-radius: 5px;
|
|
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
|
|
} |