diff --git a/challenges/06-custom-props/_breakpoints.scss b/challenges/06-custom-props/_breakpoints.scss new file mode 100644 index 0000000..af98e92 --- /dev/null +++ b/challenges/06-custom-props/_breakpoints.scss @@ -0,0 +1,5 @@ +$breakpoints: ( + small: 30em, + medium: 45em, + large: 65em +); diff --git a/challenges/06-custom-props/_font-sizes.scss b/challenges/06-custom-props/_font-sizes.scss new file mode 100644 index 0000000..2cc6709 --- /dev/null +++ b/challenges/06-custom-props/_font-sizes.scss @@ -0,0 +1,26 @@ +$font-sizes: ( + 'small': ( + '900': 3rem, + '800': 2.625rem, + '700': 1.75rem, + '600': 1.25rem, + '500': 1.125rem, + '400': 1rem + ), + 'medium': ( + '900': 3.25rem, + '800': 2.75rem, + '700': 1.75rem, + '600': 1.5rem, + '500': 1.125rem, + '400': 1rem + ), + 'large': ( + '900': 3.75rem, + '800': 3rem, + '700': 2rem, + '600': 1.5rem, + '500': 1.25rem, + '400': 1rem + ) +); diff --git a/challenges/06-custom-props/_mixins.scss b/challenges/06-custom-props/_mixins.scss new file mode 100644 index 0000000..d2ee4d3 --- /dev/null +++ b/challenges/06-custom-props/_mixins.scss @@ -0,0 +1,23 @@ +@use 'sass:map'; +@use 'sass:math'; +@use 'sass:meta'; +@use 'breakpoints' as *; + +@mixin mq($size) { + @if map.has-key($breakpoints, $size) { + $breakpoint: map-get($breakpoints, $size); + @media screen and (min-width: $breakpoint) { + @content; + } + } @else if meta.type-of($size) == number { + @if math.is-unitless($size) { + @error 'when using a number with @mq() make sure to include a unit'; + } @else { + @media screen and (min-width: $size) { + @content; + } + } + } @else { + @error 'the keyword #{$size} is not in the $breakpoints map'; + } +} diff --git a/challenges/06-custom-props/main.scss b/challenges/06-custom-props/main.scss new file mode 100644 index 0000000..70d7e74 --- /dev/null +++ b/challenges/06-custom-props/main.scss @@ -0,0 +1,5 @@ +@use 'sass:map'; +@use 'font-sizes' as *; +@use 'mixins' as *; +@use 'breakpoints' as *; + diff --git a/projects/05-barber-shop/design and assets/assets/hair-cut.jpg b/projects/05-barber-shop/design and assets/assets/hair-cut.jpg new file mode 100644 index 0000000..69dfab9 Binary files /dev/null and b/projects/05-barber-shop/design and assets/assets/hair-cut.jpg differ diff --git a/projects/05-barber-shop/design and assets/assets/logo.svg b/projects/05-barber-shop/design and assets/assets/logo.svg new file mode 100644 index 0000000..fdda025 --- /dev/null +++ b/projects/05-barber-shop/design and assets/assets/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/projects/05-barber-shop/design and assets/design/Design System/Design System - Colors.jpg b/projects/05-barber-shop/design and assets/design/Design System/Design System - Colors.jpg new file mode 100644 index 0000000..8ea44cf Binary files /dev/null and b/projects/05-barber-shop/design and assets/design/Design System/Design System - Colors.jpg differ diff --git a/projects/05-barber-shop/design and assets/design/Design System/Design System - Design Elements.jpg b/projects/05-barber-shop/design and assets/design/Design System/Design System - Design Elements.jpg new file mode 100644 index 0000000..78b71f9 Binary files /dev/null and b/projects/05-barber-shop/design and assets/design/Design System/Design System - Design Elements.jpg differ diff --git a/projects/05-barber-shop/design and assets/design/Design System/Design System - Typgraphy.jpg b/projects/05-barber-shop/design and assets/design/Design System/Design System - Typgraphy.jpg new file mode 100644 index 0000000..b8dc635 Binary files /dev/null and b/projects/05-barber-shop/design and assets/design/Design System/Design System - Typgraphy.jpg differ diff --git a/projects/05-barber-shop/design and assets/design/Design System/Design System - interactive elements.jpg b/projects/05-barber-shop/design and assets/design/Design System/Design System - interactive elements.jpg new file mode 100644 index 0000000..bded183 Binary files /dev/null and b/projects/05-barber-shop/design and assets/design/Design System/Design System - interactive elements.jpg differ diff --git a/projects/05-barber-shop/design and assets/design/Desktop - interactions.jpg b/projects/05-barber-shop/design and assets/design/Desktop - interactions.jpg new file mode 100644 index 0000000..075e838 Binary files /dev/null and b/projects/05-barber-shop/design and assets/design/Desktop - interactions.jpg differ diff --git a/projects/05-barber-shop/design and assets/design/Desktop.jpg b/projects/05-barber-shop/design and assets/design/Desktop.jpg new file mode 100644 index 0000000..ecd4357 Binary files /dev/null and b/projects/05-barber-shop/design and assets/design/Desktop.jpg differ diff --git a/projects/05-barber-shop/design and assets/design/Mobile.jpg b/projects/05-barber-shop/design and assets/design/Mobile.jpg new file mode 100644 index 0000000..f2c5f8f Binary files /dev/null and b/projects/05-barber-shop/design and assets/design/Mobile.jpg differ