clairity.css 0.5.1 → 0.5.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +24 -1
- data/lib/assets/css/clairity/classes.css +21 -24
- data/lib/assets/css/clairity/components.css +31 -1
- data/lib/assets/css/clairity/icons.css +3 -0
- data/lib/clairity.css/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 9b971433592736999ac6b4a0d8582933732270c80b4070acdda13c5f8605a39b
|
4
|
+
data.tar.gz: 40e328586eb1ace8bef06e26c5edb42edfc58f81f1051c4953e558ef6bb72e5c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e7bda8d9aa7125fcac95be2a1e93b2ce5362420d54c9983e6e05d253150d74ff291a3c353623f4e778aaac211f11ea38edfb3226846e85764d66a697fdc55623
|
7
|
+
data.tar.gz: 1542e062d10024764fb8410f755d1d3dcccf85b6c0e4c88e2a0c8349a37c0f49327fa02c8615fcc8f2f01bc8fc969158808ae5134ed04e9f3edfbf1f041d2d97
|
data/CHANGELOG.md
CHANGED
@@ -29,6 +29,27 @@ This section is for recording changes committed since the last release.
|
|
29
29
|
### Security
|
30
30
|
|
31
31
|
|
32
|
+
## [v0.5.3] - 20230706
|
33
|
+
|
34
|
+
### Added
|
35
|
+
|
36
|
+
* [classes.css]: added `.avatar` class for avatar images, which are typically round
|
37
|
+
* [classes.css]: added `.bordered` class for putting a `currentColor` border around an element
|
38
|
+
* [icons.css]: added `--i-id`, `--i-id-badge-2`, and `--i-users` icons and the associated icon classes in [classes.css]
|
39
|
+
|
40
|
+
|
41
|
+
## [v0.5.2] - 20230628
|
42
|
+
|
43
|
+
### Added
|
44
|
+
|
45
|
+
* [components.css]: added styling for icons sitting next to headings
|
46
|
+
|
47
|
+
|
48
|
+
### Changed
|
49
|
+
|
50
|
+
* [classes.css]: moved multi-element heading styles into [components.css], unifying heading styles in one place and also leaving [classes.css] with just class styles
|
51
|
+
|
52
|
+
|
32
53
|
## [v0.5.1] - 20230628
|
33
54
|
|
34
55
|
### Changed
|
@@ -717,7 +738,9 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
|
|
717
738
|
- `palette.css` - separate out the color scheme into its own css file
|
718
739
|
|
719
740
|
|
720
|
-
[unreleased]: https://github.com/clairity/clairity.css/compare/v0.5.
|
741
|
+
[unreleased]: https://github.com/clairity/clairity.css/compare/v0.5.3...HEAD
|
742
|
+
[v0.5.3]: https://github.com/clairity/clairity.css/compare/v0.5.2...v0.5.3
|
743
|
+
[v0.5.2]: https://github.com/clairity/clairity.css/compare/v0.5.1...v0.5.2
|
721
744
|
[v0.5.1]: https://github.com/clairity/clairity.css/compare/v0.5.0...v0.5.1
|
722
745
|
[v0.5.0]: https://github.com/clairity/clairity.css/compare/v0.4.0...v0.5.0
|
723
746
|
[v0.4.0]: https://github.com/clairity/clairity.css/compare/v0.3.1...v0.4.0
|
@@ -2,13 +2,15 @@
|
|
2
2
|
CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
3
3
|
add alternate styles for many elements and groups of elements here,
|
4
4
|
but none of these will rise to the level of full-on components. Those
|
5
|
-
will be the next layer of the CSS hierarchy.
|
6
|
-
|
5
|
+
will be the next layer of the CSS hierarchy. These class styles will
|
6
|
+
still aim to be semantic rather than utilitarian, with the latter
|
7
|
+
deferred to utilities.css, further down the css stack.
|
8
|
+
|
7
9
|
We'll generally aim for [0010] specificity here, as that's the default
|
8
10
|
specificity of a single class, which can be overridden in later styles
|
9
11
|
using just a single class. Exceptions will be marked with their
|
10
12
|
specificity, as usual.
|
11
|
-
|
13
|
+
|
12
14
|
Note that class names can start with a number in HTML5, but css
|
13
15
|
selectors can't. For a workaround (used with the .100vw class), see
|
14
16
|
https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
|
@@ -93,20 +95,6 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
93
95
|
.h6 { --min-font: 1; --max-font: 1.125; }
|
94
96
|
.h5, .h6 { font-weight: var(--regular); }
|
95
97
|
|
96
|
-
/* dampen the prominence of links in headings; keep in sync with cosmetic.css */
|
97
|
-
:where(.h1, .h2, .h3, .h4, .h5, .h6) :is(a, :visited) {
|
98
|
-
color: var(--heading);
|
99
|
-
font-weight: unset;
|
100
|
-
text-decoration-style: dotted;
|
101
|
-
}
|
102
|
-
|
103
|
-
/* decrease space between headings and paragraphs - EXPERIMENTAL */
|
104
|
-
:is(.h1,.h2,.h3,.h4,.h5,.h6):has(+ p) {
|
105
|
-
margin-bottom: 0.25em;
|
106
|
-
}
|
107
|
-
:where(.h1,.h2,.h3,.h4,.h5,.h6) + p {
|
108
|
-
margin-top: 0.25em;
|
109
|
-
}
|
110
98
|
|
111
99
|
/* text providing extra detail to a heading. p-subtitle is a microformat
|
112
100
|
(plaintext) alternative class name for .subtitle
|
@@ -124,12 +112,6 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
124
112
|
border: none;
|
125
113
|
padding-left: unset;
|
126
114
|
}
|
127
|
-
/* HACK: normalize spacing between headings, typically within hgroups - [0010]*/
|
128
|
-
.plain :where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) +
|
129
|
-
:where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
|
130
|
-
margin-top: var(--medium); /* em relative spacing */
|
131
|
-
}
|
132
|
-
|
133
115
|
|
134
116
|
/* -----------------------------------------------------------------------------
|
135
117
|
// #colors - semantic classes for setting the --color variable - EXPERIMENTAL
|
@@ -161,6 +143,12 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
161
143
|
// .......................................................................... */
|
162
144
|
.dual-aside { grid-column: 2 / -2; }
|
163
145
|
|
146
|
+
.bordered {
|
147
|
+
border: var(--solid) currentColor;
|
148
|
+
border-radius: var(--radius);
|
149
|
+
padding: var(--xs);
|
150
|
+
}
|
151
|
+
|
164
152
|
|
165
153
|
/* -----------------------------------------------------------------------------
|
166
154
|
// #breaks - #br #wbr #hr - line breaks and the horizontal rule
|
@@ -182,9 +170,15 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
182
170
|
|
183
171
|
|
184
172
|
/* -----------------------------------------------------------------------------
|
185
|
-
// #
|
173
|
+
// #media / #embedded - elements that add multimedia to a page
|
186
174
|
// -------------------------------------------------------------------------- */
|
187
175
|
|
176
|
+
.avatar { border-radius: var(--circle); }
|
177
|
+
|
178
|
+
|
179
|
+
/* #icons - helper classes for icons - EXPERIMENTAL
|
180
|
+
// ........................................................................... */
|
181
|
+
|
188
182
|
/* for inserting an icon using the background-blend-mode technique */
|
189
183
|
.icon {
|
190
184
|
display: inline-block;
|
@@ -209,6 +203,8 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
209
203
|
.i-dash { --icon: var(--i-dash); }
|
210
204
|
.i-edit { --icon: var(--i-edit); }
|
211
205
|
.i-home-edit { --icon: var(--i-home-edit); }
|
206
|
+
.i-id { --icon: var(--i-id); }
|
207
|
+
.i-id-badge-2 { --icon: var(--i-id-badge-2); }
|
212
208
|
.i-key { --icon: var(--i-key); }
|
213
209
|
.i-mail { --icon: var(--i-mail); }
|
214
210
|
.i-mail-check { --icon: var(--i-mail-check); }
|
@@ -222,6 +218,7 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
222
218
|
.i-user-circle { --icon: var(--i-user-circle); }
|
223
219
|
.i-user-edit { --icon: var(--i-user-edit); }
|
224
220
|
.i-user-off { --icon: var(--i-user-off); }
|
221
|
+
.i-users { --icon: var(--i-users); }
|
225
222
|
|
226
223
|
/* removes a ::before or ::after icon - [0011] specificity
|
227
224
|
// ........................................................................... */
|
@@ -91,6 +91,36 @@ header :where(p, .subtitle) {
|
|
91
91
|
flex: 1 0 100%; /* flex to a full row, forcing a line wrap*/
|
92
92
|
}
|
93
93
|
|
94
|
+
/* HACK: normalize spacing between headings, typically within hgroups - [0010]
|
95
|
+
// .......................................................................... */
|
96
|
+
.plain :where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) +
|
97
|
+
:where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
|
98
|
+
margin-top: var(--medium); /* em relative spacing */
|
99
|
+
}
|
100
|
+
|
101
|
+
/* dampen the prominence of links in headings; keep in sync with cosmetic.css
|
102
|
+
// .......................................................................... */
|
103
|
+
:where(.h1,.h2,.h3,.h4,.h5,.h6) :is(a, :visited) {
|
104
|
+
color: var(--heading);
|
105
|
+
font-weight: unset;
|
106
|
+
text-decoration-style: dotted;
|
107
|
+
}
|
108
|
+
|
109
|
+
/* decrease space between headings and paragraphs - EXPERIMENTAL
|
110
|
+
// .......................................................................... */
|
111
|
+
:is(.h1,.h2,.h3,.h4,.h5,.h6):has(+ p) {
|
112
|
+
margin-bottom: 0.25em;
|
113
|
+
}
|
114
|
+
:where(.h1,.h2,.h3,.h4,.h5,.h6) + p {
|
115
|
+
margin-top: 0.25em;
|
116
|
+
}
|
117
|
+
|
118
|
+
/* lets icons sit comfortably next to headings - EXPERIMENTAL */
|
119
|
+
:where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) + i[class^='i-'] {
|
120
|
+
align-self: normal;
|
121
|
+
margin-inline-start: var(--xs);
|
122
|
+
}
|
123
|
+
|
94
124
|
|
95
125
|
/* -----------------------------------------------------------------------------
|
96
126
|
// site #footer - typical fat footer; #footer is the singular site footer
|
@@ -130,7 +160,7 @@ header :where(p, .subtitle) {
|
|
130
160
|
|
131
161
|
/* style headers in the site footer */
|
132
162
|
:where(.fat, body > footer:last-of-type)
|
133
|
-
:is(h1,
|
163
|
+
:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
|
134
164
|
color: var(--muted);
|
135
165
|
font-weight: var(--light);
|
136
166
|
}
|
@@ -29,6 +29,8 @@
|
|
29
29
|
--i-file: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>file</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z' /></svg>");
|
30
30
|
--i-file-download: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>file download</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z' /><path d='M12 17v-6' /><path d='M9.5 14.5l2.5 2.5l2.5 -2.5' /></svg>");
|
31
31
|
--i-home-edit: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>home edit</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 21v-6a2 2 0 0 1 2 -2h2c.645 0 1.218 .305 1.584 .78' /><path d='M20.004 11.004l-8.004 -8.004l-9 9h2v7a2 2 0 0 0 2 2h4' /><path d='M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z' /></svg>");
|
32
|
+
--i-id: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>id</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z' /><path d='M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /><path d='M15 8l2 0' /><path d='M15 12l2 0' /><path d='M7 16l10 0' /></svg>");
|
33
|
+
--i-id-badge-2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>id badge 2</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M7 12h3v4h-3z' /><path d='M10 6h-6a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1 -1v-12a1 1 0 0 0 -1 -1h-6' /><path d='M10 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z' /><path d='M14 16h2' /><path d='M14 12h4' /></svg>");
|
32
34
|
--i-key: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>key</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z' /><path d='M15 9h.01' /></svg>");
|
33
35
|
--i-lock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>lock</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='5' y='11' width='14' height='10' rx='2' /><circle cx='12' cy='16' r='1' /><path d='M8 11v-4a4 4 0 0 1 8 0v4' /></svg>");
|
34
36
|
--i-mail: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>mail</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='3' y='5' width='18' height='14' rx='2' /><polyline points='3 7 12 13 21 7' /></svg>");
|
@@ -46,4 +48,5 @@
|
|
46
48
|
--i-user-circle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>user circle</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><circle cx='12' cy='12' r='9' /><circle cx='12' cy='10' r='3' /><path d='M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855' /></svg>");
|
47
49
|
--i-user-edit: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>user edit</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0' /><path d='M6 21v-2a4 4 0 0 1 4 -4h3.5' /><path d='M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z' /></svg>");
|
48
50
|
--i-user-off: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>disable</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14.274 10.291a4 4 0 1 0 -5.554 -5.58m-.548 3.453a4.01 4.01 0 0 0 2.62 2.65' /><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 1.147 .167m2.685 2.681a4 4 0 0 1 .168 1.152v2' /><line x1='3' y1='3' x2='21' y2='21' /></svg>");
|
51
|
+
--i-users: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>users</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0' /><path d='M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2' /><path d='M16 3.13a4 4 0 0 1 0 7.75' /><path d='M21 21v-2a4 4 0 0 0 -3 -3.85' /></svg>");
|
49
52
|
}
|
data/lib/clairity.css/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: clairity.css
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.5.
|
4
|
+
version: 0.5.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- clairity
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-06
|
11
|
+
date: 2023-07-06 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|
@@ -122,7 +122,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
122
122
|
- !ruby/object:Gem::Version
|
123
123
|
version: '0'
|
124
124
|
requirements: []
|
125
|
-
rubygems_version: 3.4.
|
125
|
+
rubygems_version: 3.4.15
|
126
126
|
signing_key:
|
127
127
|
specification_version: 4
|
128
128
|
summary: clairity.css is a simple, semantic classless CSS framework and future HTML-first
|