From ec5f157227955686851f24e011bda3b849489350 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Tue, 24 Sep 2024 11:41:33 +0200 Subject: [PATCH 1/6] Update color variables to Icon & Button --- lib/atoms/icon/_icon-var.scss | 11 +++++------ lib/molecules/button/_button-var.scss | 8 +++++--- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/lib/atoms/icon/_icon-var.scss b/lib/atoms/icon/_icon-var.scss index 413441d..065fac9 100644 --- a/lib/atoms/icon/_icon-var.scss +++ b/lib/atoms/icon/_icon-var.scss @@ -1,18 +1,17 @@ //! ********** ICON VARIABLES ********** $icons: ( - "cubes": #8E44AD, - "sitemap": #3498DB, - "html5": #E44D26, "css3": #1572B6, - "sass": #CD6799, + "database": #00758F, + "html5": #E44D26, "square-js": #F0DB4F, - "react": #61DBFB, "vuejs": #42B883, "node-js": #3C873A, "php": #777BB4, "python": #3776AB, - "database": #00758F, + "react": #61DBFB, + "sass": #CD6799, + "sitemap": #3498DB, "square-git": #F1502F, "dev": #000 ) !default; diff --git a/lib/molecules/button/_button-var.scss b/lib/molecules/button/_button-var.scss index 8c95c7b..9e8167b 100644 --- a/lib/molecules/button/_button-var.scss +++ b/lib/molecules/button/_button-var.scss @@ -1,8 +1,10 @@ //! ********** BUTTON VARIABLES ********** $buttons: ( - "paper-plane": #DC143C, - "github": #000, + "codepen": #1E1F26, + "github": #010409, "linkedin-in": #0077B5, - "medium": #00AB6C + "medium": #00AB6C, + "npm": #EA2039, + "x-twitter": #1D9BF0 ) !default; From 379b81342ab76c557a75d2352512178b68d6b96f Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Tue, 24 Sep 2024 11:42:09 +0200 Subject: [PATCH 2/6] Improve navbar with brand & contact --- lib/molecules/navbar/Navbar.tsx | 28 ++++++++++++++++++++++----- lib/molecules/navbar/NavbarProps.tsx | 14 +++++++++++--- lib/molecules/navbar/_navbar-var.scss | 4 ++-- lib/molecules/navbar/navbar.scss | 8 ++++++-- 4 files changed, 42 insertions(+), 12 deletions(-) diff --git a/lib/molecules/navbar/Navbar.tsx b/lib/molecules/navbar/Navbar.tsx index 7813943..aa4425f 100644 --- a/lib/molecules/navbar/Navbar.tsx +++ b/lib/molecules/navbar/Navbar.tsx @@ -6,25 +6,37 @@ import './navbar.scss' /** * ! NAVBAR MOLECULE COMPONENT * @name Navbar - * @description Renders the Navbar with an Items Array as an unordered list + * @description Renders the Navbar with a Brand, an Links Array as an unordered list & an Option * * @param {NavbarProps} props * The Properties of the Navbar * - * @param {Array} props.array - * The Items Array of the Navbar + * @param {ButtonProps} props.brand + * The Brand of the Navbar + * + * @param {Array} props.links + * The Links of the Navbar + * + * @param {ButtonProps} props.contact + * The Contact of the Navbar * * @returns {React.ReactElement} * The rendered Navbar */ export const Navbar = - ({ array }: NavbarProps) : + ({ brand, links, contact }: NavbarProps) : React.ReactElement => { return ( ) } diff --git a/lib/molecules/navbar/NavbarProps.tsx b/lib/molecules/navbar/NavbarProps.tsx index cff98b5..4b8e275 100644 --- a/lib/molecules/navbar/NavbarProps.tsx +++ b/lib/molecules/navbar/NavbarProps.tsx @@ -5,9 +5,17 @@ import { ButtonProps } from '../button/ButtonProps' * @interface NavbarProps * @description The Properties of the Navbar * - * @property {Array} array - * The Items Array of the Navbar + * @property {ButtonProps} brand + * The Brand of the Navbar + * + * @property {Array} links + * The Links of the Navbar + * + * @property {ButtonProps} contact + * The Contact of the Navbar */ export interface NavbarProps { - array: Array + brand: ButtonProps + links: Array + contact: ButtonProps } diff --git a/lib/molecules/navbar/_navbar-var.scss b/lib/molecules/navbar/_navbar-var.scss index 4b2fd18..34c3f19 100644 --- a/lib/molecules/navbar/_navbar-var.scss +++ b/lib/molecules/navbar/_navbar-var.scss @@ -1,6 +1,6 @@ //! ********** NAVBAR VARIABLES ********** -$padding-x: 10px; +$padding-x: 5px; $padding-y: 2px; $font: 0.7rem; @@ -17,7 +17,7 @@ $padding-sizes: ( $padding-ratios: ( "tn": 2, "xs": 3, - "sm": 4, + "sm": 0, "md": 0, "lg": 0, "xl": 0, diff --git a/lib/molecules/navbar/navbar.scss b/lib/molecules/navbar/navbar.scss index dc6046b..2208362 100644 --- a/lib/molecules/navbar/navbar.scss +++ b/lib/molecules/navbar/navbar.scss @@ -6,7 +6,7 @@ .navbar { display: flex; - place-content: center; + place-content: space-between; place-items: center; position: fixed; z-index: 1000; @@ -33,7 +33,11 @@ } } - @media (min-width: $md) { + @media (min-width: $sm) { place-content: space-around; } + + @media (min-width: $lg) { + place-content: space-evenly; + } } From 51e35d713c58859b3b11f165d211f0f17efc6d67 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Tue, 24 Sep 2024 11:42:28 +0200 Subject: [PATCH 3/6] Remove ids to gallery mixin --- lib/molecules/gallery/_gallery-mix.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/molecules/gallery/_gallery-mix.scss b/lib/molecules/gallery/_gallery-mix.scss index 885bddf..989f261 100644 --- a/lib/molecules/gallery/_gallery-mix.scss +++ b/lib/molecules/gallery/_gallery-mix.scss @@ -1,8 +1,7 @@ //! ********** GALLERY MIXIN ********** @mixin gallery($size, $ratio) { - [id=blog] .collapse li, - [id=portfolio] .collapse figure > * > li { + .collapse figure > .list > li { width: calc((100% - ($ratio - 1) * $size) / $ratio ); } From 46ea7a88f7edee580fe2fde9f6dcd31f58bd5ff7 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Tue, 24 Sep 2024 11:55:20 +0200 Subject: [PATCH 4/6] Rename Footer props --- lib/molecules/footer/Footer.tsx | 10 +++++----- lib/molecules/footer/FooterProps.tsx | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/molecules/footer/Footer.tsx b/lib/molecules/footer/Footer.tsx index 165ab26..372a5dd 100644 --- a/lib/molecules/footer/Footer.tsx +++ b/lib/molecules/footer/Footer.tsx @@ -6,25 +6,25 @@ import './footer.scss' /** * ! FOOTER MOLECULE COMPONENT * @name Footer - * @description Renders the Footer with an Items Array as an unordered list + * @description Renders the Footer with a Links Array as an unordered list * * @param {FooterProps} props * The Properties of the Footer * - * @param {Array} props.array - * The Items Array of the Footer + * @param {Array} props.links + * The Links of the Footer * * @returns {React.ReactElement} * The rendered Footer */ export const Footer = - ({ array }: FooterProps): + ({ links }: FooterProps): React.ReactElement => { return (