frontend/scss/main.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@use "../../node_modules/reset-css/reset.css";
@use "general";
@use "special";
@use "home";

:root {
  --color-dark: hsl(202, 25%, 9%);
  --color-light: #EFF7F6;
  --color-gray: #BCB3BB; /* quote and legend */
  --color-rose: #F2B5D4; /* link accent */
  --color-light-rose: hsl(330, 55%, 70%, 0.2); /* link accent hover and highlight */

  --font-size-tiny: 0.85rem; /* quote, legend, code */

  --width-content: 700px; /* main, article */
  --width-deco: 900px; /* header, footer, large image */
  --height-header: 8rem; /* header, footer, introduction */

  --margin-base: 1.5rem;
  --margin-header: calc(var(--height-header) / 2);

  font-size: 20px;
}