Skip to content

Instantly share code, notes, and snippets.

View una's full-sized avatar

Una Kravets una

5k followers · 66 following
View GitHub Profile
@una
una / style.css
Last active September 22, 2023 18:11
min() max() clamp()
.sidebar {
/* Select smaller of the 2 calculated values
Narrower screens: 20vw, Wider screens: 300px */
width: min(20vw, 300px);
}
.make-the-logo-bigger {
/* Select larger of the 2 calculated values
Basically clamps the font size to 60px or larger (10vw) */
font-size: max(60px, 10vw);
@una
una / color-functions.md
Last active March 11, 2020 13:15
CSS Color Functions

CSS Color Functions

Web developers and design systems developers often use functions to design components. With the increasing usage of design systems that support multiple platforms, and increased capability of Dark Mode in UI, this becomes even more useful to not need to manually set color, and to instead have a single source from which layouts are calculated. Currently Sass, calc() on HSL values, or PostCSS is used to do this.

Examples:

  • Components with color variations based on calculations from a parent. (i.e. Button with outline that uses the primary button color to adjust the size)
  • Theming - Palletes based on a color or set of colors for themes. Especially when a single base system is used with multiple themes
  • Uniformity among transformations between components with different primary colors

Proposal

@una
una / todo.md
Last active May 27, 2018 15:55
TODOS

Memorial Day Weekend

  • Get a massage (use gift card)
  • Pedicure
  • Film/edit 2 videos
  • Channel art for Youtube
  • Record Toolsday
  • Watch The Shape of Water
  • Work on book
@una
una / links.md
Last active January 13, 2019 01:27
a-css-carol--links
@una
una / text.md
Last active April 12, 2022 03:29
Cleanup Branches

  1. Go to the remote repo and delete outdated branches

  2. Then either:

    • Locally cleanup only merged branches: git branch --merged | grep -v "\*" | xargs -n 1 git branch -d
  • Locally remove fetched, outdated branches: git for-each-ref --format='%(refname:short) %(upstream)' refs/heads/ | awk '$2 !~/^refs\/remotes/' | xargs git branch -D”
@una
una / index.html
Created April 2, 2017 03:23
Pure CSS (Sass) Carnival Game
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<h1>CSS Only Carnival: Target Practice</h1>
<h2>This game uses no JS at all (isn't CSS awesome?). You have 8 seconds to hit as many targets as you can!</h2>
<div class="game-over">
<h1>Game Over!</h1>
<a class="play-again" target="_parent" href="http://codepen.io/una/full/NxZaNr">Play Again</a>
</div>
@una
una / keybase.md
Created April 21, 2016 03:24

Keybase proof

I hereby claim:

  • I am una on github.
  • I am una (https://keybase.io/una) on keybase.
  • I have a public key whose fingerprint is CC61 7710 B1E5 DC00 059A B02B E6C6 D8DA A734 F1ED

To claim this, I am signing this object:

@una
una / Pure CSS Tic Tac Toe!.markdown
Created April 7, 2016 21:13
Pure CSS Tic Tac Toe!
@una
una / SassMeister-input.scss
Created February 4, 2016 06:37
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
// HELPER FUNCTIONS
// Map Deep Set by Hugo Giraudel
// link: http://www.sitepoint.com/extra-map-functions-sass/
@function map-deep-set($map, $keys.../*, $value */) {
$map-list: ($map,);
@una
una / SassMeister-input.scss
Last active February 4, 2016 05:26
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
// initial map
$colors: (
'red': (
'base': #f00
),
'yellow' : (