v4/styles.css at main · elektronstudio/v4 · 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
/* Same as theme: dark in Color.vue */
:root {
  --white: 255 255 255;
  --gray-50: 250 250 250;
  --gray-100: 245 245 245;
  --gray-200: 229 229 229;
  --gray-300: 212 212 212;
  --gray-400: 163 163 163;
  --gray-500: 115 115 115;
  --gray-600: 82 82 82;
  --gray-700: 64 64 64;
  --gray-800: 38 38 38;
  --gray-900: 23 23 23;
  --black: 0 0 0;

  --green-50: 248, 254, 249;
  --green-100: 242, 253, 243;
  --green-200: 222, 251, 225;
  --green-300: 202, 249, 207;
  --green-400: 163, 244, 171;
  --green-400: 123, 239, 135;
  --green-500: 111, 215, 122;
  --green-700: 92, 179, 101;
  --green-800: 74, 143, 81;
  --green-900: 60, 117, 66;

  --breadboard-tile-size: 5vw;
}

@font-face {
  font-family: "title";
  src: url("./assets/fonts/gthaptic-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "title";
  src: url("./assets/fonts/gthaptic-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/neuehaas-regular.woff2") format("woff2");
}
@font-face {
  font-family: "sans2";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/dmsans-regular.woff2") format("woff2");
}
@font-face {
  font-family: "mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/cousine-regular.woff2") format("woff2");
}

.page-enter-from {
  @apply opacity-0;
}

.page-enter-active,
.page-leave-active {
  @apply transition-all;
}
.page-enter,
.page-leave-to {
  @apply opacity-0;
}

.debug > * {
  @apply border border-red-500;
}

.debug2 > *,
.debug2 > * > * {
  @apply border border-red-500;
}

.debug3 > *,
.debug3 > * > *,
.debug3 > * > * > * {
  @apply border border-red-500;
}