clairity.css 0.5.1 → 0.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +24 -1
  3. data/lib/assets/css/clairity/classes.css +21 -24
  4. data/lib/assets/css/clairity/components.css +31 -1
  5. data/lib/assets/css/clairity/icons.css +3 -0
  6. data/lib/clairity.css/version.rb +1 -1
  7. metadata +3 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c65c6029ccabe42eb67a360010a78668fa3c70710a1f39a855d362dea1dd7fa8
4
- data.tar.gz: 82c3bdb27894954730a381bf55ea21b9b07737e95c7807314754377ec37aea14
3
+ metadata.gz: 9b971433592736999ac6b4a0d8582933732270c80b4070acdda13c5f8605a39b
4
+ data.tar.gz: 40e328586eb1ace8bef06e26c5edb42edfc58f81f1051c4953e558ef6bb72e5c
5
5
  SHA512:
6
- metadata.gz: 7e4baab2ddda8fd5c268d8975814e1066d774134e09bb618d3858e3bd2c36b8e558b264c354838429b8d234f2b90375b3b26de9eb4e967dece49ea720fa6bdb0
7
- data.tar.gz: f20400f2e224b380cc1f189842bd44c806317eebeed85bdc8cc604073077fef047a24952a5c62b4a2d509b75f520abd31e1b02cd31adfe12a786c09bc36c8a89
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.1...HEAD
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
data/lib/assets/css/clairity/classes.css CHANGED
@@ -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
- // #icons - helper classes for icons - EXPERIMENTAL
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
  // ........................................................................... */
data/lib/assets/css/clairity/components.css CHANGED
@@ -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, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
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
  }
data/lib/assets/css/clairity/icons.css CHANGED
@@ -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
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ClairityCss
4
- VERSION = '0.5.1'
4
+ VERSION = '0.5.3'
5
5
  end
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.1
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-28 00:00:00.000000000 Z
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.14
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