clairity.css 0.5.3 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9b971433592736999ac6b4a0d8582933732270c80b4070acdda13c5f8605a39b
-  data.tar.gz: 40e328586eb1ace8bef06e26c5edb42edfc58f81f1051c4953e558ef6bb72e5c
+  metadata.gz: f699e85eb3675690410e8e201cabcc65ab746862ce714a56da8578b82dcc81f9
+  data.tar.gz: a2b6a55c5addb15cf02aa730cfa80a678f2f27b0e2d4e4b299bbe0a2df386623
 SHA512:
-  metadata.gz: e7bda8d9aa7125fcac95be2a1e93b2ce5362420d54c9983e6e05d253150d74ff291a3c353623f4e778aaac211f11ea38edfb3226846e85764d66a697fdc55623
-  data.tar.gz: 1542e062d10024764fb8410f755d1d3dcccf85b6c0e4c88e2a0c8349a37c0f49327fa02c8615fcc8f2f01bc8fc969158808ae5134ed04e9f3edfbf1f041d2d97
+  metadata.gz: 537fa357fd3c4f45bca71447846379a72d06591e7d239908b71351d2e3e88504365e597fc16ab58f459e7c4bbac5f0034a9b3179b290a7b06eb4f72b5e1fa3fa
+  data.tar.gz: d40ddaba3b1192b8513c8e6224fbbd812adec3ecfda12ec3094a3aefb2ed99bde1885d78ecdf6f30b4d94739b0b5f7acdb3ae4475c75bceb6a8f93f6c4d62252

data/CHANGELOG.md

@@ -29,6 +29,22 @@ This section is for recording changes committed since the last release.
 ### Security
 
 
+## [v0.6.0] - 20230707
+
+### Added
+
+* [variables.css]: added `--xxxl` size
+* [icons.css]: added `--i-user` icon and associated icon class in [classes.css]
+* [classes.css]: updated `.avatar` class with `aspect-ratio`, `width`, `display`, and `justify-content` properties
+* [components.css]: added iconned `.avatar` component that uses our svg icons as the avatar image, with the structure `<span class="avatar"><i class="i-icon"></i></span>`
+* [utilities.css]: added `.start` flex positioning class, to complement `.center` and `.end`
+
+### Changed
+
+* [components.css]: reduced specificity of `header:not(.banner)` to [0001] by using `:where`: `header:where(:not(.banner))`
+* [utilities.css]: renamed `.right` to `.end` to match newly added `.start` class
+
+
 ## [v0.5.3] - 20230706
 
 ### Added
@@ -738,7 +754,8 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
 - `palette.css` - separate out the color scheme into its own css file
 
 
-[unreleased]: https://github.com/clairity/clairity.css/compare/v0.5.3...HEAD
+[unreleased]: https://github.com/clairity/clairity.css/compare/v0.6.0...HEAD
+[v0.6.0]: https://github.com/clairity/clairity.css/compare/v0.5.3...v0.6.0
 [v0.5.3]: https://github.com/clairity/clairity.css/compare/v0.5.2...v0.5.3
 [v0.5.2]: https://github.com/clairity/clairity.css/compare/v0.5.1...v0.5.2
 [v0.5.1]: https://github.com/clairity/clairity.css/compare/v0.5.0...v0.5.1

data/lib/assets/css/clairity/classes.css

@@ -173,11 +173,21 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
 //  #media / #embedded - elements that add multimedia to a page
 // -------------------------------------------------------------------------- */
 
-.avatar  { border-radius: var(--circle); }
+/*  #avatar - makes an image round, up to --xxxl in size        - EXPERIMENTAL
+// .......................................................................... */
+
+.avatar {
+  aspect-ratio:           1;                  /* make it square */
+  width:                  -moz-available;     /* take up available space */
+  max-width:              var(--xxxl);        /* cap the size via width */
+  display:                inline-flex;        /* allows setting icon as image */
+  justify-content:        center;             /* centers icon image */
+  border-radius:          var(--circle);
+}
 
 
 /*  #icons - helper classes for icons                           - EXPERIMENTAL
-// ........................................................................... */
+// .......................................................................... */
 
 /* for inserting an icon using the background-blend-mode technique */
 .icon {
@@ -190,12 +200,12 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
 
 /* leading/trailing space for inline ::before elements, typically icons
 //   TODO: investigate using :has() for this on the parent of .icon
-// ........................................................................... */
+// .......................................................................... */
 .leading  { padding-left: var(--inline-padding);  }
 .trailing {padding-right: var(--inline-padding);  }
 
 /* convenience classes for icons defined in icons.css
-// ........................................................................... */
+// .......................................................................... */
 .i-burger       { --icon: var(--i-burger);        }
 .i-check        { --icon: var(--i-check);         }
 .i-chevron      { --icon: var(--i-chevron);       }
@@ -215,13 +225,14 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
 .i-server-cog   { --icon: var(--i-server-cog);    }
 .i-settings     { --icon: var(--i-settings);      }
 .i-trash        { --icon: var(--i-trash);         }
+.i-user         { --icon: var(--i-user);          }
 .i-user-circle  { --icon: var(--i-user-circle);   }
 .i-user-edit    { --icon: var(--i-user-edit);     }
 .i-user-off     { --icon: var(--i-user-off);      }
 .i-users        { --icon: var(--i-users);         }
 
 /* removes a ::before or ::after icon                     - [0011] specificity
-// ........................................................................... */
+// .......................................................................... */
 .unadorned::before, .unadorned::after {
   content:                unset;
 }

data/lib/assets/css/clairity/components.css

@@ -77,7 +77,7 @@ body > footer:last-of-type:is(._100dvi, [class~="100dvi"]) {
 //  #headings - 
 // -------------------------------------------------------------------------- */
 
-header:not(.banner) {
+header:where(:not(.banner)) {                           /* [0001] specificity */
   display:                flex;
   flex-wrap:              wrap;
   justify-content:        space-between;
@@ -213,6 +213,20 @@ i[class^='i-'] {
   vertical-align:         middle;
 }
 
+/*  iconned #avatar - use an icon as the avatar image           - EXPERIMENTAL
+// .......................................................................... */
+
+.avatar:has(i[class^="i-"]) {
+  background-color:       var(--300);       /* grey background */
+}
+
+.avatar i[class^="i-"] {
+  --color:                var(--10);        /* ~white icon */
+  mask-size:              var(--xxl);       /* make icon big */
+  padding:                var(--xl);        /* make "mask" of icon big enough */
+}
+
+
 
 /* -----------------------------------------------------------------------------
 //  #banner - header that usually includes a hero image and perhaps a nav
@@ -824,7 +838,7 @@ selectmenu::part(listbox) {
     max-height:           var(--width);
     max-width:            var(--width);
   }
-  /* change orphaned last item to row layout for 3-wide grid */
+  /* change orphaned last item to row layout for 3-wide grid   - EXPERIMENTAL */
   .cards :last-child:nth-child(3n - 2) {
     grid-column:          span 3;
     flex-direction:       row;

data/lib/assets/css/clairity/icons.css

@@ -18,7 +18,7 @@
   --i-search:             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M36,36 25,25' stroke='%23ccc' stroke-width='3' /><circle cx='15' cy='15' r='14' fill='none' stroke='%23ccc' stroke-width='1.5' /></svg>");
   --i-sms:                url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M2,2 38,2 38,28 22,28 12,38 12,28 2,28Z' fill='none' stroke='%23999' stroke-width='1.5'/></svg>");
   --i-tel:                url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke-width='1.5'><path d='M8,1 34,1 34,39 8,39Z M12,5 30,5 30,30 12,30Z' /><circle cx='21' cy='34' r='2'/></g></svg>");
-  /* modified tabler icons */ 
+  /* modified tabler icons */
   --i-bookmark:           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>bookmark</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2' /></svg>");
   --i-browser:            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>browser</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='4' y='4' width='16' height='16' rx='1' /><line x1='4' y1='8' x2='20' y2='8' /><line x1='8' y1='4' x2='8' y2='8' /></svg>");
   --i-calendar:           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>calendar</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='4' y='5' width='16' height='16' rx='2' /><line x1='16' y1='3' x2='16' y2='7' /><line x1='8' y1='3' x2='8' y2='7' /><line x1='4' y1='11' x2='20' y2='11' /><line x1='11' y1='15' x2='12' y2='15' /><line x1='12' y1='15' x2='12' y2='18' /></svg>");
@@ -45,6 +45,7 @@
   --i-server-cog:         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>server cog</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='3' y='4' width='18' height='8' rx='3' /><path d='M12 20h-6a3 3 0 0 1 -3 -3v-2a3 3 0 0 1 3 -3h10.5' /><circle cx='18.001' cy='18' r='2' /><path d='M18.001 14.5v1.5' /><path d='M18.001 20v1.5' /><path d='M21.032 16.25l-1.299 .75' /><path d='M16.27 19l-1.3 .75' /><path d='M14.97 16.25l1.3 .75' /><path d='M19.733 19l1.3 .75' /><path d='M7 8v.01' /><path d='M7 16v.01' /></svg>");
   --i-settings:           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>settings</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z' /><path d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0' /></svg>");
   --i-trash:              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>delete</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><line x1='4' y1='7' x2='20' y2='7' /><line x1='10' y1='11' x2='10' y2='17' /><line x1='14' y1='11' x2='14' y2='17' /><path d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12' /><path d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3' /></svg>");
+  --i-user:               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</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 -4h4a4 4 0 0 1 4 4v2' /></svg>");
   --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>");
   --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>");
   --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>");

data/lib/assets/css/clairity/utilities.css

@@ -43,8 +43,9 @@
 .centered menu  { justify-content:  center; }           /* [0011] specificity */
 
 /* flex positioning utilities */
-.center { justify-content: center;   }
-.right  { justify-content: flex-end; }
+.start { justify-content: flex-start; }
+.center{ justify-content: center;     }
+.end   { justify-content: flex-end;   }
 
 
 /* -----------------------------------------------------------------------------

data/lib/assets/css/clairity/variables.css

@@ -102,6 +102,7 @@
   --l:                    2rem;
   --xl:                   4rem;
   --xxl:                  8rem;
+  --xxxl:                 16rem;
 
   /* contextual spacing - mainly for headers & icons among surrounding content*/
 /*--margin:               var(--ml) 0 var(--m);*/                /* rem-based */

data/lib/clairity.css/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ClairityCss
-  VERSION = '0.5.3'
+  VERSION = '0.6.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clairity.css
 version: !ruby/object:Gem::Version
-  version: 0.5.3
+  version: 0.6.0
 platform: ruby
 authors:
 - clairity
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-06 00:00:00.000000000 Z
+date: 2023-07-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties