adding some variables for colors
This commit is contained in:
		| @@ -1,3 +1,108 @@ | |||||||
| :root { | :root { | ||||||
|     /**/ |  | ||||||
|  |     /** ------------------------------ | ||||||
|  |      * START -- https://coolors.co/022f40-38aecc-0090c1-183446-046e8f | ||||||
|  |      * -------------------------------**/ | ||||||
|  |     /* CSS HEX */ | ||||||
|  |     --prussian-blue: #022f40ff; | ||||||
|  |     --pacific-cyan: #38aeccff; | ||||||
|  |     --blue-ncs: #0090c1ff; | ||||||
|  |     --prussian-blue-2: #183446ff; | ||||||
|  |     --cerulean: #046e8fff; | ||||||
|  |  | ||||||
|  |     /* CSS HSL */ | ||||||
|  |     --prussian-blue: hsla(196, 94%, 13%, 1); | ||||||
|  |     --pacific-cyan: hsla(192, 59%, 51%, 1); | ||||||
|  |     --blue-ncs: hsla(195, 100%, 38%, 1); | ||||||
|  |     --prussian-blue-2: hsla(203, 49%, 18%, 1); | ||||||
|  |     --cerulean: hsla(194, 95%, 29%, 1); | ||||||
|  |  | ||||||
|  |     /* SCSS HEX */ | ||||||
|  |     $prussian-blue: #022f40ff; | ||||||
|  |     $pacific-cyan: #38aeccff; | ||||||
|  |     $blue-ncs: #0090c1ff; | ||||||
|  |     $prussian-blue-2: #183446ff; | ||||||
|  |     $cerulean: #046e8fff; | ||||||
|  |  | ||||||
|  |     /* SCSS HSL */ | ||||||
|  |     $prussian-blue: hsla(196, 94%, 13%, 1); | ||||||
|  |     $pacific-cyan: hsla(192, 59%, 51%, 1); | ||||||
|  |     $blue-ncs: hsla(195, 100%, 38%, 1); | ||||||
|  |     $prussian-blue-2: hsla(203, 49%, 18%, 1); | ||||||
|  |     $cerulean: hsla(194, 95%, 29%, 1); | ||||||
|  |  | ||||||
|  |     /* SCSS RGB */ | ||||||
|  |     $prussian-blue: rgba(2, 47, 64, 1); | ||||||
|  |     $pacific-cyan: rgba(56, 174, 204, 1); | ||||||
|  |     $blue-ncs: rgba(0, 144, 193, 1); | ||||||
|  |     $prussian-blue-2: rgba(24, 52, 70, 1); | ||||||
|  |     $cerulean: rgba(4, 110, 143, 1); | ||||||
|  |  | ||||||
|  |     /* SCSS Gradient */ | ||||||
|  |     /*$gradient-top: linear-gradient(0deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/ | ||||||
|  |     /*$gradient-right: linear-gradient(90deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/ | ||||||
|  |     /*$gradient-bottom: linear-gradient(180deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/ | ||||||
|  |     /*$gradient-left: linear-gradient(270deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/ | ||||||
|  |     /*$gradient-top-right: linear-gradient(45deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/ | ||||||
|  |     /*$gradient-bottom-right: linear-gradient(135deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/ | ||||||
|  |     /*$gradient-top-left: linear-gradient(225deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/ | ||||||
|  |     /*$gradient-bottom-left: linear-gradient(315deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/ | ||||||
|  |     /*$gradient-radial: radial-gradient(#022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/ | ||||||
|  |     /** ------------------------------ | ||||||
|  |      * END -- https://coolors.co/022f40-38aecc-0090c1-183446-046e8f | ||||||
|  |      * -------------------------------**/ | ||||||
|  |  | ||||||
|  |  | ||||||
|  |     /** ------------------------------ | ||||||
|  |      * START -- https://coolors.co/8ac482-47783f-ffbe86-ffb5c2-3777ff | ||||||
|  |      * -------------------------------**/ | ||||||
|  |     /* CSS HEX */ | ||||||
|  |     --pistachio: #8ac482ff; | ||||||
|  |     --fern-green: #47783fff; | ||||||
|  |     --peach: #ffbe86ff; | ||||||
|  |     --cherry-blossom-pink: #ffb5c2ff; | ||||||
|  |     --blue-crayola: #3777ffff; | ||||||
|  |  | ||||||
|  |     /* CSS HSL */ | ||||||
|  |     --pistachio: hsla(113, 36%, 64%, 1); | ||||||
|  |     --fern-green: hsla(112, 31%, 36%, 1); | ||||||
|  |     --peach: hsla(28, 100%, 76%, 1); | ||||||
|  |     --cherry-blossom-pink: hsla(349, 100%, 85%, 1); | ||||||
|  |     --blue-crayola: hsla(221, 100%, 61%, 1); | ||||||
|  |  | ||||||
|  |     /* SCSS HEX */ | ||||||
|  |     $pistachio: #8ac482ff; | ||||||
|  |     $fern-green: #47783fff; | ||||||
|  |     $peach: #ffbe86ff; | ||||||
|  |     $cherry-blossom-pink: #ffb5c2ff; | ||||||
|  |     $blue-crayola: #3777ffff; | ||||||
|  |  | ||||||
|  |     /* SCSS HSL */ | ||||||
|  |     $pistachio: hsla(113, 36%, 64%, 1); | ||||||
|  |     $fern-green: hsla(112, 31%, 36%, 1); | ||||||
|  |     $peach: hsla(28, 100%, 76%, 1); | ||||||
|  |     $cherry-blossom-pink: hsla(349, 100%, 85%, 1); | ||||||
|  |     $blue-crayola: hsla(221, 100%, 61%, 1); | ||||||
|  |  | ||||||
|  |     /* SCSS RGB */ | ||||||
|  |     $pistachio: rgba(138, 196, 130, 1); | ||||||
|  |     $fern-green: rgba(71, 120, 63, 1); | ||||||
|  |     $peach: rgba(255, 190, 134, 1); | ||||||
|  |     $cherry-blossom-pink: rgba(255, 181, 194, 1); | ||||||
|  |     $blue-crayola: rgba(55, 119, 255, 1); | ||||||
|  |  | ||||||
|  |     /* SCSS Gradient */ | ||||||
|  |     /*$gradient-top: linear-gradient(0deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/ | ||||||
|  |     /*$gradient-right: linear-gradient(90deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/ | ||||||
|  |     /*$gradient-bottom: linear-gradient(180deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/ | ||||||
|  |     /*$gradient-left: linear-gradient(270deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/ | ||||||
|  |     /*$gradient-top-right: linear-gradient(45deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/ | ||||||
|  |     /*$gradient-bottom-right: linear-gradient(135deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/ | ||||||
|  |     /*$gradient-top-left: linear-gradient(225deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/ | ||||||
|  |     /*$gradient-bottom-left: linear-gradient(315deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/ | ||||||
|  |     /*$gradient-radial: radial-gradient(#8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/ | ||||||
|  |     /** ------------------------------ | ||||||
|  |      * END -- https://coolors.co/8ac482-47783f-ffbe86-ffb5c2-3777ff | ||||||
|  |      * -------------------------------**/ | ||||||
|  |  | ||||||
| } | } | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user