Merge pull request #20 from philippebeck/dev

Release 0.5.1
philippebeck · Dec 5, 2024 · 3433b88 · 3433b88
2 parents b622a3a + 5910fa4
commit 3433b88
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 165 deletions.
diff --git a/dist/style.css b/dist/style.css
diff --git a/lib/assets/style.scss b/lib/assets/style.scss
@@ -1,11 +1,9 @@
 //! ********** VARIABLES **********
 
-$sm: 768px;
-$md: 1366px;
-$lg: 1920px;
+$md: 768px;
+$lg: 1366px;
 
 $breakpoints: (
-  "sm": $sm,
   "md": $md,
   "lg": $lg
 ) !default;

diff --git a/lib/atoms/collapse/collapse.scss b/lib/atoms/collapse/collapse.scss
@@ -2,26 +2,21 @@
 
 //! ********** VARIABLES **********
 
-$radius: 5px;
-$width: 50vw;
-
-$radius-ratios: (
-  "sm": 4,
-  "md": 6,
-  "lg": 8
+$radius-sizes: (
+  "md": 20px,
+  "lg": 50px
   ) !default;
 
 $width-sizes: (
-  "sm": 40vw,
-  "md": 25vw,
-  "lg": 15vw
+  "md": 40vw,
+  "lg": 20vw
   ) !default;
 
 //! ********** MIXIN **********
 
-@mixin collapse($ratio, $size) {
-  border-radius: calc($radius * $ratio);
-  width: $size;
+@mixin collapse($radius, $width) {
+  border-radius: $radius;
+  width: $width;
 }
 
 //! ********** MAIN **********
@@ -40,9 +35,9 @@ $width-sizes: (
 
   summary {
     margin: auto;
-    border-radius: $radius;
+    border-radius: 10px;
     padding: 10px;
-    width: $width;
+    width: 60vw;
     list-style: none;
     background-color: $secondary;
     color: $black;
@@ -57,7 +52,7 @@ $width-sizes: (
       @media (min-width: $breakpoint-value) {
 
         @include collapse(
-          map-get($radius-ratios, $breakpoint-key),
+          map-get($radius-sizes, $breakpoint-key),
           map-get($width-sizes, $breakpoint-key)
         );
       }

diff --git a/lib/atoms/link/link.scss b/lib/atoms/link/link.scss
@@ -1,74 +1,12 @@
 @import '../../assets/style';
 
-//! ********** VARIABLES **********
-
-$gap: 5px;
-$padding: 5px;
-
-$gap-ratios: (
-  "sm": 2.5,
-  "md": 3.5,
-  "lg": 4.5
-) !default;
-
-$padding-ratios: (
-  "sm": 2.5,
-  "md": 3.5,
-  "lg": 4.5
-) !default;
-
-//! ********** MIXIN **********
-
-@mixin link($gap-ratio, $padding-ratio) {
-  .link,
-  .btn {
-    gap: calc($gap * $gap-ratio);
-  }
-
-  .btn {
-    padding: calc($padding * $padding-ratio / 2) calc($padding * $padding-ratio);
-  }
-}
-
-//! ********** MAIN **********
-
-.link,
-.btn {
+.link {
   display: flex;
   place-content: center;
   place-items: center;
-  gap: $gap;
-  width: 100%;
+  gap: 10px;
   height: 100%;
   font-family: $monospace;
   text-decoration: none;
   color: $black;
 }
-
-.btn {
-  box-sizing: border-box;
-  border: solid 2px $primary;
-  border-radius: 10px;
-  padding: calc($padding / 2) $padding;
-  background-color: $gray;
-  color: $white;
-
-  &:hover,
-  &:focus {
-    border-radius: 5px;
-    background-color: $primary;
-    color: $gray;
-    transform: scale(1.05);
-    transition: all 500ms;
-  }
-}
-
-@each $breakpoint-key, $breakpoint-value in $breakpoints {
-  @media (min-width: $breakpoint-value) {
-
-    @include link(
-      map-get($gap-ratios, $breakpoint-key),
-      map-get($padding-ratios, $breakpoint-key)
-    );
-  }
-}
diff --git a/lib/atoms/list/list.scss b/lib/atoms/list/list.scss
@@ -2,36 +2,33 @@
 
 //! ********** VARIABLES **********
 
-$gap-size: 10px;
-
-$gap-ratios: (
-  "sm": 1.5,
-  "md": 2,
-  "lg": 2.5
+$gap-sizes: (
+  "md": 15px,
+  "lg": 20px
   ) !default;
 
   //! ********** MIXIN **********
 
-@mixin list($ratio) {
-  gap: calc($gap-size * $ratio);
+@mixin list($gap) {
+  gap: $gap;
 }
 
 //! ********** MAIN **********
 
 .list {
   display: flex;
   flex-flow: wrap;
-  gap: $gap-size;
+  gap: 10px;
   place-content: center;
   place-items: center;
-  margin: auto;
+  margin: 0;
   padding: 0;
   list-style: none;
   text-align: center;
 
   @each $breakpoint-key, $breakpoint-value in $breakpoints {
     @media (min-width: $breakpoint-value) {
-      @include list(map-get($gap-ratios, $breakpoint-key));
+      @include list(map-get($gap-sizes, $breakpoint-key));
     }
   }
 }
diff --git a/lib/molecules/button/button.scss b/lib/molecules/button/button.scss
@@ -12,14 +12,14 @@
     display: none;
   }
 
-  @media (min-width: $sm) {
+  @media (min-width: $md) {
     b {
       display: block;
       text-transform: uppercase;
     }
   }
 
-  @media (min-width: $md) {
+  @media (min-width: $lg) {
     b {
       text-transform: capitalize;
     }

diff --git a/lib/molecules/footer/footer.scss b/lib/molecules/footer/footer.scss
@@ -6,15 +6,13 @@ $size: 30px;
 $font: 1.2rem;
 
 $block-sizes: (
-  "sm": 15px,
-  "md": 25px,
-  "lg": 35px
+  "md": 15px,
+  "lg": 25px
 ) !default;
 
 $font-ratios: (
-  "sm": 1.6,
-  "md": 2,
-  "lg": 2.4
+  "md": 1.6,
+  "lg": 2
 ) !default;
 
 //! ********** MIXIN **********

diff --git a/lib/molecules/gallery/gallery.scss b/lib/molecules/gallery/gallery.scss
@@ -2,37 +2,37 @@
 
 //! ********** VARIABLES **********
 
-$width-sizes: (
-  "sm": 15px,
-  "md": 40px,
-  "lg": 75px
+$gap-sizes: (
+  "md": 15px,
+  "lg": 60px
 ) !default;
 
 $width-ratios: (
-  "sm": 2,
-  "md": 3,
+  "md": 2,
   "lg": 4
 ) !default;
 
 //! ********** MIXIN **********
 
-@mixin gallery($size, $ratio) {
+@mixin gallery($gap, $ratio) {
   .collapse {
     max-width: calc(500px * $ratio);
 
     figure > .list > li {
-      width: calc((100% - $size) / $ratio
+      width: calc((100% - $gap) / $ratio
       );
     }
   }
 }
 
-//! ********** GALLERY **********
+//! ********** MAIN **********
 
 @each $breakpoint-key, $breakpoint-value in $breakpoints {
   @media (min-width: $breakpoint-value) {
 
-    @include gallery(map-get($width-sizes, $breakpoint-key),
-      map-get($width-ratios, $breakpoint-key));
+    @include gallery(
+      map-get($gap-sizes, $breakpoint-key),
+      map-get($width-ratios, $breakpoint-key)
+    );
   }
 }
diff --git a/lib/molecules/navbar/navbar.scss b/lib/molecules/navbar/navbar.scss
@@ -2,47 +2,36 @@
 
 //! ********** VARIABLES **********
 
-$padding: 5px;
-$font: 0.7rem;
-
 $padding-sizes: (
-  "sm": 3px,
-  "md": 5px,
-  "lg": 7px
-) !default;
-
-$padding-ratios: (
-  "sm": 0,
-  "md": 0,
-  "lg": 0
+  "md": 10px,
+  "lg": 15px
 ) !default;
 
 $font-sizes: (
-  "sm": 0.3rem,
-  "md": 0.5rem,
-  "lg": 0.7rem
+  "md": 1rem,
+  "lg": 1.2rem
 ) !default;
 
 //! ********** MIXIN **********
 
 @mixin navbar($padding-size, $font-size) {
-  padding: calc($padding + $padding-size);
-  font-size: calc($font + $font-size);
+  padding: $padding-size 0;
+  font-size: $font-size;
 }
 
 //! ********** MAIN **********
 
 .navbar {
   display: flex;
-  place-content: space-between;
+  place-content: space-around;
   place-items: center;
   position: fixed;
   z-index: 1000;
   top: 0;
   box-sizing: border-box;
-  padding: $padding;
+  padding: 5px 0;
   width: 100%;
-  font-size: $font;
+  font-size: 0.8rem;
   background-color: $primary;
   color: $black;
 
@@ -61,15 +50,13 @@ $font-sizes: (
     }
   }
 
-  @media (min-width: $sm) {
-    place-content: space-around;
-
+  @media (min-width: $md) {
     & ul {
       gap: 2vw;
     }
   }
 
-  @media (min-width: $md) {
+  @media (min-width: $lg) {
     place-content: space-evenly;
   }
 }
diff --git a/lib/molecules/slider/slider.scss b/lib/molecules/slider/slider.scss
@@ -3,27 +3,23 @@
 //! ********** VARIABLES **********
 
 $top-sizes: (
-  "sm": 56px,
-  "md": 70px,
-  "lg": 84px
+  "md": 56px,
+  "lg": 70px
 ) !default;
 
 $left-sizes: (
-  "sm": 19px,
-  "md": 26px,
-  "lg": 34px
+  "md": 19px,
+  "lg": 26px
 ) !default;
 
 $bottom-ratios: (
-  "sm": 25px,
-  "md": 48px,
-  "lg": 74px
+  "md": 25px,
+  "lg": 48px
 ) !default;
 
 $font-ratios: (
-  "sm": 2.5,
-  "md": 3.5,
-  "lg": 4.5
+  "md": 2.5,
+  "lg": 3.5
 ) !default;
 
 //! ********** MIXIN **********