processing-website/src/styles/variables.css at 87998614086e3de53737a885dfb2bd5b69e4f8ea · processing/processing-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
@custom-media --small (max-width: 720px);
@custom-media --reduced (max-width: 960px);
@custom-media --medium (max-width: 1234px);
@custom-media --large (max-width: 1362px);
@custom-media --xlarge (max-width: 9999px);

:root {
  --font: "Space Grotesk", Helvetica, Arial, sans-serif;
  --font-serif: "Vollkorn", Garamond, Georgia, serif;
  --font-mono: "Space Mono", Menlo, monospace;

  --processing-blue-light: #82afff;
  --processing-blue-mid: #0564ff;
  --processing-blue-deep: #1e32aa;
  --processing-blue-dark: #0f195a;
  --processing-blue: #0251c8;

  --topbar-background: #02163e;

  --processing-blue-gradient: #508bff2e;

  --p5-light: #fd9db9;
  --p5-mid: #ff4077;
  --p5-dark: #af1f42;

  --foundation-light: #d4b2fe;
  --foundation-mid: #9c4bff;
  --foundation-dark: #5501a4;

  --lightgray: #f5f5f5;
  --gray: #dbdbdb;
  --darkgray: #898989;
  --darkergray: #727070;
  --black: #0d0d0d;

  --download-background: #F2F6FF;
  --download-inactive: #8890B3;
  --download-background-active: rgba(80, 139, 255, 0.08);

  --footer-hover:#ffffc2;

  --text-xsmall: 0.8rem;
  --text-small: 0.875rem;
  --text-regular: 1rem;
  --text-medium: 1.125rem;
  --text-large: 1.3rem;
  --text-reduced: 1.8rem;
  --text-xlarge: 2.25rem;
  --text-xxlarge: 2.75rem;
  --text-xxxlarge: 3.375rem;

  --container-width: 1920px;

  --margin: 48px;
  --margin-half: calc(var(--margin) / 2);
  --margin-quarter: calc(var(--margin) / 4);
  --margin-double: calc(var(--margin) * 2);
  --gutter: 16px;
  --gutter-half: calc(var(--gutter) / 2);
  --gutter-double: calc(var(--gutter) * 2);

  --vertical-margin-xxsmall: 5px;
  --vertical-margin-xsmall: 10px;
  --vertical-margin-small: 20px;
  --vertical-margin-medium: 30px;
  --vertical-margin-large: 40px;

  --col1: calc(100% / 8);
  --col2: calc(100% / 8 * 2);
  --col3: calc(100% / 8 * 3);
  --col4: calc(100% / 8 * 4);
  --col5: calc(100% / 8 * 5);
  --col6: calc(100% / 8 * 6);
  --col7: calc(100% / 8 * 7);
  --col8: 100%;

  --push1: calc(var(--col1) + var(--gutter));
  --push2: calc(var(--col2) + var(--gutter));
  --push3: calc(var(--col3) + var(--gutter));
  --push4: calc(var(--col4) + var(--gutter));
  --push5: calc(var(--col5) + var(--gutter));
  --push6: calc(var(--col6) + var(--gutter));
  --push7: calc(var(--col7) + var(--gutter));
  --push8: calc(var(--col8) + var(--gutter));
}

@media (--reduced) {
  :root {
    --margin: 24px;
    --gutter: 16px;

    --vertical-margin-xxsmall: 3px;
    --vertical-margin-xsmall: 5px;
    --vertical-margin-small: 10px;
    --vertical-margin-medium: 15px;
    --vertical-margin-large: 20px;

    --text-xsmall: 0.7rem;
    --text-small: 0.8rem;
    --text-regular: 0.875rem;
    --text-medium: 1rem;
    --text-large: 1.2rem;
    --text-xlarge: 1.5rem;
    --text-xxlarge: 2rem;
    --text-xxxlarge: 2.25rem;
  }
}

@media (--small) {
  :root {
    --margin: 10px;
    --gutter: 8px;
  }
}