Skip to content

Commit 3433b88

Browse files
philippebeckphilippebeck
authored
Merge pull request #20 from philippebeck/dev
Release 0.5.1
2 parents b622a3a + 5910fa4 commit 3433b88

13 files changed

Lines changed: 71 additions & 165 deletions

File tree

‎dist/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/assets/style.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
//! ********** VARIABLES **********
22

3-
$sm: 768px;
4-
$md: 1366px;
5-
$lg: 1920px;
3+
$md: 768px;
4+
$lg: 1366px;
65

76
$breakpoints: (
8-
"sm": $sm,
97
"md": $md,
108
"lg": $lg
119
) !default;

‎lib/atoms/collapse/collapse.scss‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,21 @@
22

33
//! ********** VARIABLES **********
44

5-
$radius: 5px;
6-
$width: 50vw;
7-
8-
$radius-ratios: (
9-
"sm": 4,
10-
"md": 6,
11-
"lg": 8
5+
$radius-sizes: (
6+
"md": 20px,
7+
"lg": 50px
128
) !default;
139

1410
$width-sizes: (
15-
"sm": 40vw,
16-
"md": 25vw,
17-
"lg": 15vw
11+
"md": 40vw,
12+
"lg": 20vw
1813
) !default;
1914

2015
//! ********** MIXIN **********
2116

22-
@mixin collapse($ratio, $size) {
23-
border-radius: calc($radius * $ratio);
24-
width: $size;
17+
@mixin collapse($radius, $width) {
18+
border-radius: $radius;
19+
width: $width;
2520
}
2621

2722
//! ********** MAIN **********
@@ -40,9 +35,9 @@ $width-sizes: (
4035

4136
summary {
4237
margin: auto;
43-
border-radius: $radius;
38+
border-radius: 10px;
4439
padding: 10px;
45-
width: $width;
40+
width: 60vw;
4641
list-style: none;
4742
background-color: $secondary;
4843
color: $black;
@@ -57,7 +52,7 @@ $width-sizes: (
5752
@media (min-width: $breakpoint-value) {
5853

5954
@include collapse(
60-
map-get($radius-ratios, $breakpoint-key),
55+
map-get($radius-sizes, $breakpoint-key),
6156
map-get($width-sizes, $breakpoint-key)
6257
);
6358
}

‎lib/atoms/link/link.scss‎

Lines changed: 2 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,12 @@
11
@import '../../assets/style';
22

3-
//! ********** VARIABLES **********
4-
5-
$gap: 5px;
6-
$padding: 5px;
7-
8-
$gap-ratios: (
9-
"sm": 2.5,
10-
"md": 3.5,
11-
"lg": 4.5
12-
) !default;
13-
14-
$padding-ratios: (
15-
"sm": 2.5,
16-
"md": 3.5,
17-
"lg": 4.5
18-
) !default;
19-
20-
//! ********** MIXIN **********
21-
22-
@mixin link($gap-ratio, $padding-ratio) {
23-
.link,
24-
.btn {
25-
gap: calc($gap * $gap-ratio);
26-
}
27-
28-
.btn {
29-
padding: calc($padding * $padding-ratio / 2) calc($padding * $padding-ratio);
30-
}
31-
}
32-
33-
//! ********** MAIN **********
34-
35-
.link,
36-
.btn {
3+
.link {
374
display: flex;
385
place-content: center;
396
place-items: center;
40-
gap: $gap;
41-
width: 100%;
7+
gap: 10px;
428
height: 100%;
439
font-family: $monospace;
4410
text-decoration: none;
4511
color: $black;
4612
}
47-
48-
.btn {
49-
box-sizing: border-box;
50-
border: solid 2px $primary;
51-
border-radius: 10px;
52-
padding: calc($padding / 2) $padding;
53-
background-color: $gray;
54-
color: $white;
55-
56-
&:hover,
57-
&:focus {
58-
border-radius: 5px;
59-
background-color: $primary;
60-
color: $gray;
61-
transform: scale(1.05);
62-
transition: all 500ms;
63-
}
64-
}
65-
66-
@each $breakpoint-key, $breakpoint-value in $breakpoints {
67-
@media (min-width: $breakpoint-value) {
68-
69-
@include link(
70-
map-get($gap-ratios, $breakpoint-key),
71-
map-get($padding-ratios, $breakpoint-key)
72-
);
73-
}
74-
}

‎lib/atoms/list/list.scss‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,33 @@
22

33
//! ********** VARIABLES **********
44

5-
$gap-size: 10px;
6-
7-
$gap-ratios: (
8-
"sm": 1.5,
9-
"md": 2,
10-
"lg": 2.5
5+
$gap-sizes: (
6+
"md": 15px,
7+
"lg": 20px
118
) !default;
129

1310
//! ********** MIXIN **********
1411

15-
@mixin list($ratio) {
16-
gap: calc($gap-size * $ratio);
12+
@mixin list($gap) {
13+
gap: $gap;
1714
}
1815

1916
//! ********** MAIN **********
2017

2118
.list {
2219
display: flex;
2320
flex-flow: wrap;
24-
gap: $gap-size;
21+
gap: 10px;
2522
place-content: center;
2623
place-items: center;
27-
margin: auto;
24+
margin: 0;
2825
padding: 0;
2926
list-style: none;
3027
text-align: center;
3128

3229
@each $breakpoint-key, $breakpoint-value in $breakpoints {
3330
@media (min-width: $breakpoint-value) {
34-
@include list(map-get($gap-ratios, $breakpoint-key));
31+
@include list(map-get($gap-sizes, $breakpoint-key));
3532
}
3633
}
3734
}

‎lib/molecules/button/button.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212
display: none;
1313
}
1414

15-
@media (min-width: $sm) {
15+
@media (min-width: $md) {
1616
b {
1717
display: block;
1818
text-transform: uppercase;
1919
}
2020
}
2121

22-
@media (min-width: $md) {
22+
@media (min-width: $lg) {
2323
b {
2424
text-transform: capitalize;
2525
}

‎lib/molecules/footer/footer.scss‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,13 @@ $size: 30px;
66
$font: 1.2rem;
77

88
$block-sizes: (
9-
"sm": 15px,
10-
"md": 25px,
11-
"lg": 35px
9+
"md": 15px,
10+
"lg": 25px
1211
) !default;
1312

1413
$font-ratios: (
15-
"sm": 1.6,
16-
"md": 2,
17-
"lg": 2.4
14+
"md": 1.6,
15+
"lg": 2
1816
) !default;
1917

2018
//! ********** MIXIN **********

‎lib/molecules/gallery/gallery.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,37 @@
22

33
//! ********** VARIABLES **********
44

5-
$width-sizes: (
6-
"sm": 15px,
7-
"md": 40px,
8-
"lg": 75px
5+
$gap-sizes: (
6+
"md": 15px,
7+
"lg": 60px
98
) !default;
109

1110
$width-ratios: (
12-
"sm": 2,
13-
"md": 3,
11+
"md": 2,
1412
"lg": 4
1513
) !default;
1614

1715
//! ********** MIXIN **********
1816

19-
@mixin gallery($size, $ratio) {
17+
@mixin gallery($gap, $ratio) {
2018
.collapse {
2119
max-width: calc(500px * $ratio);
2220

2321
figure > .list > li {
24-
width: calc((100% - $size) / $ratio
22+
width: calc((100% - $gap) / $ratio
2523
);
2624
}
2725
}
2826
}
2927

30-
//! ********** GALLERY **********
28+
//! ********** MAIN **********
3129

3230
@each $breakpoint-key, $breakpoint-value in $breakpoints {
3331
@media (min-width: $breakpoint-value) {
3432

35-
@include gallery(map-get($width-sizes, $breakpoint-key),
36-
map-get($width-ratios, $breakpoint-key));
33+
@include gallery(
34+
map-get($gap-sizes, $breakpoint-key),
35+
map-get($width-ratios, $breakpoint-key)
36+
);
3737
}
3838
}

‎lib/molecules/navbar/navbar.scss‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,36 @@
22

33
//! ********** VARIABLES **********
44

5-
$padding: 5px;
6-
$font: 0.7rem;
7-
85
$padding-sizes: (
9-
"sm": 3px,
10-
"md": 5px,
11-
"lg": 7px
12-
) !default;
13-
14-
$padding-ratios: (
15-
"sm": 0,
16-
"md": 0,
17-
"lg": 0
6+
"md": 10px,
7+
"lg": 15px
188
) !default;
199

2010
$font-sizes: (
21-
"sm": 0.3rem,
22-
"md": 0.5rem,
23-
"lg": 0.7rem
11+
"md": 1rem,
12+
"lg": 1.2rem
2413
) !default;
2514

2615
//! ********** MIXIN **********
2716

2817
@mixin navbar($padding-size, $font-size) {
29-
padding: calc($padding + $padding-size);
30-
font-size: calc($font + $font-size);
18+
padding: $padding-size 0;
19+
font-size: $font-size;
3120
}
3221

3322
//! ********** MAIN **********
3423

3524
.navbar {
3625
display: flex;
37-
place-content: space-between;
26+
place-content: space-around;
3827
place-items: center;
3928
position: fixed;
4029
z-index: 1000;
4130
top: 0;
4231
box-sizing: border-box;
43-
padding: $padding;
32+
padding: 5px 0;
4433
width: 100%;
45-
font-size: $font;
34+
font-size: 0.8rem;
4635
background-color: $primary;
4736
color: $black;
4837

@@ -61,15 +50,13 @@ $font-sizes: (
6150
}
6251
}
6352

64-
@media (min-width: $sm) {
65-
place-content: space-around;
66-
53+
@media (min-width: $md) {
6754
& ul {
6855
gap: 2vw;
6956
}
7057
}
7158

72-
@media (min-width: $md) {
59+
@media (min-width: $lg) {
7360
place-content: space-evenly;
7461
}
7562
}

‎lib/molecules/slider/slider.scss‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,23 @@
33
//! ********** VARIABLES **********
44

55
$top-sizes: (
6-
"sm": 56px,
7-
"md": 70px,
8-
"lg": 84px
6+
"md": 56px,
7+
"lg": 70px
98
) !default;
109

1110
$left-sizes: (
12-
"sm": 19px,
13-
"md": 26px,
14-
"lg": 34px
11+
"md": 19px,
12+
"lg": 26px
1513
) !default;
1614

1715
$bottom-ratios: (
18-
"sm": 25px,
19-
"md": 48px,
20-
"lg": 74px
16+
"md": 25px,
17+
"lg": 48px
2118
) !default;
2219

2320
$font-ratios: (
24-
"sm": 2.5,
25-
"md": 3.5,
26-
"lg": 4.5
21+
"md": 2.5,
22+
"lg": 3.5
2723
) !default;
2824

2925
//! ********** MIXIN **********

0 commit comments

Comments
 (0)