fixes
|
@ -0,0 +1,37 @@
|
|||
@use "sass:map";
|
||||
|
||||
$breakpoints: (
|
||||
small: 30em,
|
||||
medium: 45em,
|
||||
large: 65em,
|
||||
xl: 80em,
|
||||
);
|
||||
|
||||
@mixin mq($size) {
|
||||
$breakpoint: map.get($breakpoints, $size);
|
||||
|
||||
@media screen and (min-width: $breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
// all of these should work
|
||||
@include mq(medium) {
|
||||
background: pink;
|
||||
}
|
||||
@include mq(500px) {
|
||||
background: lightblue;
|
||||
}
|
||||
@include mq(100em) {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
// these should fail, with an error telling me why
|
||||
@include mq(reallysmall) {
|
||||
background: yellow;
|
||||
}
|
||||
@include mq(5000) {
|
||||
background: purple;
|
||||
}
|
||||
}
|
|
@ -2,6 +2,5 @@
|
|||
@use "abstracts/font-sizes";
|
||||
|
||||
.card {
|
||||
font-size: $fs-400;
|
||||
color: $clr-primary;
|
||||
|
||||
}
|
||||
|
|
After Width: | Height: | Size: 232 KiB |
After Width: | Height: | Size: 35 KiB |
After Width: | Height: | Size: 410 KiB |
After Width: | Height: | Size: 8.9 KiB |
After Width: | Height: | Size: 217 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 238 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 169 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 104 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 104 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 87 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 3.9 MiB |
|
@ -0,0 +1,30 @@
|
|||
# Personal Chef Services - Style guide
|
||||
|
||||
## Typography
|
||||
|
||||
### Fonts
|
||||
|
||||
- Abril Fatface
|
||||
- Lato
|
||||
|
||||
### Font sizes
|
||||
|
||||
- 80px
|
||||
- 60px
|
||||
- 27px
|
||||
- 21px
|
||||
- 18px
|
||||
|
||||
## Colors
|
||||
|
||||
### Primary
|
||||
|
||||
- 400: #FF6635
|
||||
- 500: #DD4E11
|
||||
|
||||
### Neutral
|
||||
|
||||
- 900: #212121
|
||||
- 400: #5C5C5C
|
||||
- 200: #F8F8F8
|
||||
- 100: #FFFFFF
|