summaryrefslogtreecommitdiffstats
path: root/assets/css/_vars.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-11 09:44:04 +0200
committerVolpeon <git@volpeon.ink>2022-06-11 09:44:04 +0200
commit575278aba99139635adc3b1f9385befe57102541 (patch)
treed98a160167610717da37f6340b3884ba4224fe5d /assets/css/_vars.scss
parentUpdate (diff)
downloadvolpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.gz
volpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.bz2
volpeon.ink-575278aba99139635adc3b1f9385befe57102541.zip
Re-implemented design via iro-design
Diffstat (limited to 'assets/css/_vars.scss')
-rw-r--r--assets/css/_vars.scss196
1 files changed, 0 insertions, 196 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
deleted file mode 100644
index ad9e16f..0000000
--- a/assets/css/_vars.scss
+++ /dev/null
@@ -1,196 +0,0 @@
1$breakpoints: (
2 lg: 1340px,
3 md: 900px,
4 sm: 600px,
5 xs: 400px,
6);
7
8$unit-intervals: (
9 'px': 1,
10 'em': .01,
11 'rem': .01,
12 '': 0
13);
14
15$responsive-mod-scale: (
16 xs: (iro-px-to-rem(14px), 1.28),
17 md: (iro-px-to-rem(14px), 1.49)
18);
19
20$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
21$font-fam--large: 'Garet', $font-fam--text;
22$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
23$font-size: 16px;
24$line-height: 1.7;
25$content--width: 44rem;
26
27@include iro-execute {
28 $gray0: hsl(220, 5%, 4%);
29 $gray1: hsl(220, 5%, 10%);
30 $gray2: hsl(220, 5%, 16%);
31 $gray3: hsl(220, 5%, 23%);
32 $gray4: hsl(220, 5%, 38%);
33 $gray5: hsl(220, 5%, 60%);
34 $gray6: hsl(220, 5%, 80%);
35 $gray7: hsl(220, 5%, 100%);
36
37 @include store((
38 --dims: (
39 --indent: 2rem,
40 ),
41 --colors: (
42 --bg-hi: $gray0, // Darker background
43 --bg: $gray1, // Background
44 --bg-lo: $gray2, // Lighter background
45
46 --obj-hi: $gray3,
47 --obj: $gray4,
48
49 --fg-hi: $gray5, // Faint text
50 --fg: $gray6, // Text
51 --fg-lo: $gray7, // Strong text
52
53 --accent: (
54 --h: 354,
55 --s: 84%,
56 --l: 55%,
57 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
58 --strong: hsl(
59 var(--colors--accent--h),
60 calc(var(--colors--accent--s) * 1.2),
61 calc(var(--colors--accent--l) * 1.2)
62 ),
63 --faint: hsla(
64 var(--colors--accent--h),
65 var(--colors--accent--s),
66 var(--colors--accent--l),
67 .1
68 ),
69 ),
70
71 --focus-ring: var(--colors--fg-lo),
72
73 --select: (
74 --bg: rgba($gray7, .996),
75 --img-bg: rgba($gray7, .5),
76 --fg: var(--colors--bg-hi),
77 --inverted: (
78 --bg: rgba($gray0, .996),
79 --fg: var(--colors--fg-lo),
80 )
81 ),
82
83 --link: (
84 --default: var(--colors--fg-lo),
85 --colored: (
86 --idle-h: 220,
87 --idle-s: 100%,
88 --idle-l: 80%,
89 --idle: hsl(
90 var(--colors--link--colored--idle-h),
91 var(--colors--link--colored--idle-s),
92 var(--colors--link--colored--idle-l),
93 ), //hsl(var(--colors--accent--h), 100%, 66%), //
94 --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //
95 )
96 ),
97
98 --code: (
99 --fg: var(--colors--fg-hi),
100 ),
101 )
102 ));
103}
104
105@include iro-execute {
106 $gray0: hsl(220, 5%, 100%);
107 $gray1: hsl(220, 5%, 95%);
108 $gray2: hsl(220, 5%, 88%);
109 $gray3: hsl(220, 5%, 83%);
110 $gray4: hsl(220, 5%, 68%);
111 $gray5: hsl(220, 5%, 44%);
112 $gray6: hsl(220, 5%, 16%);
113 $gray7: hsl(220, 5%, 0%);
114
115 @include store((
116 --colors: (
117 --bg-hi: $gray0, // Darker background
118 --bg: $gray1, // Background
119 --bg-lo: $gray2, // Lighter background
120
121 --obj-hi: $gray3,
122 --obj: $gray4,
123
124 --fg-hi: $gray5, // Faint text
125 --fg: $gray6, // Text
126 --fg-lo: $gray7, // Strong text
127
128 --accent: (
129 --h: 354,
130 --s: 74%,
131 --l: 48%,
132 --strong: hsl(
133 var(--colors--accent--h),
134 var(--colors--accent--s),
135 calc(var(--colors--accent--l) * .8)
136 ),
137 ),
138
139 --select: (
140 --bg: rgba($gray7, .996),
141 --img-bg: rgba($gray7, .5),
142 --inverted: (
143 --bg: rgba($gray0, .996),
144 ),
145 ),
146
147 --link: (
148 --colored: (
149 --idle-h: 220,
150 --idle-s: 60%,
151 --idle-l: 40%,
152 --idle: hsl(
153 var(--colors--link--colored--idle-h),
154 var(--colors--link--colored--idle-s),
155 var(--colors--link--colored--idle-l),
156 ), //hsl(var(--colors--accent--h), 100%, 66%), //
157 --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
158 )
159 ),
160 ),
161 ), 'light');
162}
163
164@include iro-execute {
165 $white: #fff;
166 $black: #000;
167
168 @include store((
169 --colors: (
170 --bg-hi: $white, // Darker background
171 --bg: $white, // Background
172 --bg-lo: $black, // Lighter background
173
174 --obj-hi: $black,
175 --obj: $black,
176
177 --fg-hi: $black, // Faint text
178 --fg: $black, // Text
179 --fg-lo: $black, // Strong text
180 ),
181 ), 'print');
182}
183
184@each $breakpoint in map-keys($breakpoints) {
185 @include media('<=#{$breakpoint}') {
186 @include store((
187 --colors: ()
188 ), $breakpoint);
189 }
190}
191
192@include store((
193 --dims: (
194 --indent: 1.5rem,
195 ),
196), 'sm');
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2025-12-26 18:30:39 +0000