briankoser commented 6 years ago

[ ] Vertical rhythm
[x] Headings
[ ] CSS Grid
[ ] Mixins
[ ] Variables
[ ] Implement following 2 links

https://24ways.org/2017/getting-hardboiled-with-css-custom-properties/

body {
    color : black;
    color : var(--color-text-default, black); 
}

https://codepen.io/AllThingsSmitty/pen/MOYNBO

interactive, colorful
Clean and modern without feeling sterile or developer-y
Warm instead of cool
Different feels for different people? Brian's area could look different than Lydia's
Background: skyline of city we're currently in?
Sunrise/sunset?
Seasons?
Books/library?

Matt design logo? Sketches for avatars?

Colors

https://css-tricks.com/re-pleasing-color-palettes/
Yellow and navy? - bright, cheerful, unique
Brown and green? - brown goes with "kodex" book theme, natural feel
Orange and blue? - fun
https://stripe.com/blog/accessible-color-systems
Use emoji/icons everywhere

Logo

Brainstorm with Melissa

four pie pieces: blue, green, purple, yellow
die showing the 4 side
sailing ship
old-timey microphone
book
four dots: blue, green, purple, gold
four icons: one for each of us?

Pick a primary color

Illustrations?

Brian: Bear in an easy chair reading a book Melissa: rabbit, duck? Lydia: rabbit?

briankoser commented 6 years ago

https://github.com/julianshapiro/velocity

briankoser commented 5 years ago

Grids:

https://css-tricks.com/difference-explicit-implicit-grids/ http://meyerweb.com/eric/thoughts/2016/12/05/css-grid/ https://css-tricks.com/css-grid-one-layout-multiple-ways/ https://alistapart.com/article/practical-grid https://css-tricks.com/introduction-fr-css-unit/ https://24ways.org/2012/css3-grid-layout/ http://jensimmons.com/post/feb-27-2017/learn-css-grid https://css-tricks.com/getting-started-css-grid/

briankoser commented 5 years ago

body {
  color-adjust: economy;
}

briankoser commented 5 years ago

https://codepen.io/chriscoyier/pen/owBwKM/ https://9elements.github.io/fancy-border-radius/

briankoser commented 5 years ago


ul li:nth-of-type(5n + 1)::marker {
  color: blue;
}

ul li:nth-of-type(5n + 2)::marker {
  color: green;
}

ul li:nth-of-type(5n + 3)::marker {
  color: purple;
}

ul li:nth-of-type(5n + 4)::marker {
  color: yellow;
}

ul li:nth-of-type(5n + 5)::marker {
  color: orange;
}