change color theme

This commit is contained in:
rox630 2020-12-15 12:46:25 +01:00
parent 697897d5c3
commit 2fa696c043
9 changed files with 217 additions and 31 deletions

File diff suppressed because one or more lines are too long

View file

@ -1,3 +1,26 @@
/* ========= Colors ============
Heading: #1C2D41
Paragraph: #3C4858
Iconography: #8392A5
Secondary: #C0CCDA
Dirty Snow: #E5E9F2
Snow: #F9FAFC
Emerald: #3BC265
Rose Red: #C12F5A
Dark Liver: #46444D
Sonic Silver:#6F6F6F
Sonic Silver2: #5f5e66
Fuzzy Wuzzy: #BC645F
Fuzzy Wuzzy Light: #d68b87
Magenta: #7551E9
Orange: #FF7D51
Pink: #ED63D2
Green: #2DCA73
Yellow: #FFC212
*/
.wrapper { .wrapper {
display: flex; display: flex;
padding: 0; padding: 0;

View file

@ -6,6 +6,14 @@ Secondary: #C0CCDA
Dirty Snow: #E5E9F2 Dirty Snow: #E5E9F2
Snow: #F9FAFC Snow: #F9FAFC
Emerald: #3BC265
Rose Red: #C12F5A
Dark Liver: #46444D
Sonic Silver:#6F6F6F
Sonic Silver2: #5f5e66
Fuzzy Wuzzy: #BC645F
Fuzzy Wuzzy Light: #d68b87
Magenta: #7551E9 Magenta: #7551E9
Orange: #FF7D51 Orange: #FF7D51
Pink: #ED63D2 Pink: #ED63D2
@ -23,23 +31,23 @@ h2,
h3, h3,
h4, h4,
h5 { h5 {
color: #1c2d41; color: #E5E9F2;
} }
strong { strong {
color: #1c2d41 !important; color: #E5E9F2 !important;
} }
p { p {
color: #3c4858; color: #F9FAFC;
} }
a { a {
color: #248aaa; color: #BC645F;
} }
a:hover { a:hover {
color: #207089; color: #d68b87;
} }
.nav-button { .nav-button {
@ -50,26 +58,26 @@ a:hover {
} }
.btn-dark { .btn-dark {
background-color: #3c4858; background-color: #BC645F;
border-color: #3c4858; border-color: #BC645F;
color: #e5e9f2; color: #e5e9f2;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.btn-dark:hover, .btn-dark:hover,
.btn-dark:focus { .btn-dark:focus {
background-color: #248aaa; background-color: #d68b87;
border-color: #248aaa; border-color: #d68b87;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.btn-outline-info { .btn-outline-info {
color: #2098d1 !important; color: #46444D !important;
border-color: #2098d1 !important; border-color: #46444D !important;
} }
.btn-outline-info:hover { .btn-outline-info:hover {
background-color: #2098d1 !important; background-color: #C12F5A !important;
color: #e5e9f2 !important; color: #e5e9f2 !important;
} }
@ -84,11 +92,11 @@ a:hover {
} }
.bg-white { .bg-white {
background-color: #f9fafc !important; background-color: #46444D !important;
} }
.bg-dimmed { .bg-dimmed {
background-color: #e5e9f2; background-color: #5f5e66;
} }
.anchor { .anchor {
@ -164,7 +172,7 @@ img.right {
.footer { .footer {
color: #8392a5 !important; color: #8392a5 !important;
background-color: #1c2d41; background-color: #46444D;
position: relative; position: relative;
z-index: 9999; z-index: 9999;
} }

View file

@ -1,3 +1,26 @@
/* ========= Colors ============
Heading: #1C2D41
Paragraph: #3C4858
Iconography: #8392A5
Secondary: #C0CCDA
Dirty Snow: #E5E9F2
Snow: #F9FAFC
Emerald: #3BC265
Rose Red: #C12F5A
Dark Liver: #46444D
Sonic Silver:#6F6F6F
Sonic Silver2: #5f5e66
Fuzzy Wuzzy: #BC645F
Fuzzy Wuzzy Light: #d68b87
Magenta: #7551E9
Orange: #FF7D51
Pink: #ED63D2
Green: #2DCA73
Yellow: #FFC212
*/
body { body {
background-color: #e5e9f2; background-color: #e5e9f2;
position: relative; position: relative;

View file

@ -18,17 +18,17 @@
} }
.initial-navbar .navbar-brand { .initial-navbar .navbar-brand {
color: #c0ccda; color: #F9FAFC;
font-weight: 600; font-weight: 600;
} }
.initial-navbar li a { .initial-navbar li a {
color: #c0ccda; color: #F9FAFC;
} }
.initial-navbar .navbar-nav .active, .initial-navbar .navbar-nav .active,
.initial-navbar li a:hover { .initial-navbar li a:hover {
color: #f9fafc; color: #BC645F;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
@ -68,7 +68,7 @@
.final-navbar li a:hover { .final-navbar li a:hover {
color: #2098d1; color: #2098d1;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
border-bottom: 2px solid #2098d1; border-bottom: 2px solid #C12F5A;
background: rgb(2, 0, 36); background: rgb(2, 0, 36);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
@ -86,7 +86,7 @@
.navbar-collapse.show .navbar-nav .active, .navbar-collapse.show .navbar-nav .active,
.navbar-collapse.show .navbar-nav a:hover { .navbar-collapse.show .navbar-nav a:hover {
color: #2098d1; color: #d68b87;
} }
#top-navbar-divider { #top-navbar-divider {

View file

@ -5,12 +5,12 @@
.social-link a { .social-link a {
font-size: 1.5rem; font-size: 1.5rem;
color: #3c4858; color: #BC645F;
padding: 0.5rem; padding: 0.5rem;
} }
.social-link a:hover { .social-link a:hover {
color: #248aaa; color: #d68b87;
transition: all 0.3s ease-in; transition: all 0.3s ease-in;
} }

View file

@ -1,3 +1,26 @@
/* ========= Colors ============
Heading: #1C2D41
Paragraph: #3C4858
Iconography: #8392A5
Secondary: #C0CCDA
Dirty Snow: #E5E9F2
Snow: #F9FAFC
Emerald: #3BC265
Rose Red: #C12F5A
Dark Liver: #46444D
Sonic Silver:#6F6F6F
Sonic Silver2: #5f5e66
Fuzzy Wuzzy: #BC645F
Fuzzy Wuzzy Light: #d68b87
Magenta: #7551E9
Orange: #FF7D51
Pink: #ED63D2
Green: #2DCA73
Yellow: #FFC212
*/
.experiences-section { .experiences-section {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -12,7 +35,7 @@
.experiences-section ul > li { .experiences-section ul > li {
margin-left: 0; margin-left: 0;
color: #3c4858; color: #E5E9F2;
} }
.experiences-section .designation { .experiences-section .designation {
@ -22,7 +45,7 @@
.circle { .circle {
padding: 13px 20px; padding: 13px 20px;
border-radius: 50%; border-radius: 50%;
background-color: #248aaa; background-color: #C12F5A;
color: #f9fafc; color: #f9fafc;
max-height: 50px; max-height: 50px;
z-index: 2; z-index: 2;
@ -35,7 +58,7 @@
.timeline .vertical-line::after { .timeline .vertical-line::after {
content: ""; content: "";
position: absolute; position: absolute;
border-left: 3px solid #248aaa; border-left: 3px solid #C12F5A;
z-index: 1; z-index: 1;
height: 100%; height: 100%;
left: 50%; left: 50%;
@ -51,7 +74,7 @@
} }
.timeline .horizontal-line hr { .timeline .horizontal-line hr {
border-top: 3px solid #248aaa; border-top: 3px solid #C12F5A;
margin: 0; margin: 0;
top: 17px; top: 17px;
position: relative; position: relative;
@ -63,7 +86,7 @@
} }
.timeline .horizontal-line .corner { .timeline .horizontal-line .corner {
border: 3px solid #248aaa; border: 3px solid #C12F5A;
width: 100%; width: 100%;
position: relative; position: relative;
border-radius: 15px; border-radius: 15px;

View file

@ -1,5 +1,28 @@
/* ========= Colors ============
Heading: #1C2D41
Paragraph: #3C4858
Iconography: #8392A5
Secondary: #C0CCDA
Dirty Snow: #E5E9F2
Snow: #F9FAFC
Emerald: #3BC265
Rose Red: #C12F5A
Dark Liver: #46444D
Sonic Silver:#6F6F6F
Sonic Silver2: #5f5e66
Fuzzy Wuzzy: #BC645F
Fuzzy Wuzzy Light: #d68b87
Magenta: #7551E9
Orange: #FF7D51
Pink: #ED63D2
Green: #2DCA73
Yellow: #FFC212
*/
.projects-section .card .card-header { .projects-section .card .card-header {
background-color: #f9fafc; background-color: #BC645F;
padding: 0.7rem; padding: 0.7rem;
padding-bottom: 0rem; padding-bottom: 0rem;
text-decoration: none; text-decoration: none;
@ -21,7 +44,7 @@
} }
.projects-section .card .card-header .sub-title { .projects-section .card .card-header .sub-title {
color: #8392a5; color: #46444D;
margin-top: 0.4rem; margin-top: 0.4rem;
} }

View file

@ -1,5 +1,28 @@
/* ========= Colors ============
Heading: #1C2D41
Paragraph: #3C4858
Iconography: #8392A5
Secondary: #C0CCDA
Dirty Snow: #E5E9F2
Snow: #F9FAFC
Emerald: #3BC265
Rose Red: #C12F5A
Dark Liver: #46444D
Sonic Silver:#6F6F6F
Sonic Silver2: #5f5e66
Fuzzy Wuzzy: #BC645F
Fuzzy Wuzzy Light: #d68b87
Magenta: #7551E9
Orange: #FF7D51
Pink: #ED63D2
Green: #2DCA73
Yellow: #FFC212
*/
.skills-section .card .card-head { .skills-section .card .card-head {
background-color: #f9fafc; background-color: #BC645F;
height: -webkit-fit-content; height: -webkit-fit-content;
height: -moz-fit-content; height: -moz-fit-content;
height: fit-content; height: fit-content;