You've already forked ProfessionalWebsite
New Colour Scheme
Changed from Teal & Green to Purple & Orange
This commit is contained in:
@@ -2,14 +2,14 @@
|
||||
--border-angle: 0turn;
|
||||
--main-bg: conic-gradient(
|
||||
from var(--border-angle),
|
||||
#154854,
|
||||
var(--bs-primary),
|
||||
#112 5%,
|
||||
#112 60%,
|
||||
#213 95%
|
||||
);
|
||||
border: solid 5px transparent;
|
||||
border-radius: 5px;
|
||||
--gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #154854, #60C401 99%, transparent);
|
||||
--gradient-border: conic-gradient(from var(--border-angle), transparent 25%, var(--bs-primary), var(--bs-secondary) 99%, transparent);
|
||||
background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
|
||||
background-position: center center;
|
||||
animation: bg-spin 3s linear infinite;
|
||||
@@ -27,23 +27,23 @@
|
||||
}
|
||||
@keyframes colour-change {
|
||||
0% {
|
||||
background: linear-gradient(120deg, #154854, #60C401);
|
||||
background: linear-gradient(120deg, var(--bs-primary), var(--bs-secondary));
|
||||
}
|
||||
50% {
|
||||
background: linear-gradient(120deg, #60C401, #154854, #60C401);
|
||||
background: linear-gradient(120deg, var(--bs-secondary), var(--bs-primary), var(--bs-secondary));
|
||||
}
|
||||
100% {
|
||||
background: linear-gradient(120deg, #60C401, #154854);
|
||||
background: linear-gradient(120deg, var(--bs-secondary), var(--bs-primary));
|
||||
}
|
||||
}
|
||||
@keyframes reverse-colour-change {
|
||||
0% {
|
||||
background: linear-gradient(120deg, #60C401, #154854);
|
||||
background: linear-gradient(120deg, var(--bs-secondary), var(--bs-primary));
|
||||
}
|
||||
50% {
|
||||
background: linear-gradient(120deg, #154854, #60C401, #154854);
|
||||
background: linear-gradient(120deg, var(--bs-primary), var(--bs-secondary), var(--bs-primary));
|
||||
}
|
||||
100% {
|
||||
background: linear-gradient(120deg, #154854, #60C401);
|
||||
background: linear-gradient(120deg, var(--bs-primary), var(--bs-secondary));
|
||||
}
|
||||
}
|
||||
@@ -1,123 +1,159 @@
|
||||
:root, [data-bs-theme=light] {
|
||||
--bs-primary: #154854;
|
||||
--bs-primary-rgb: 21,72,84;
|
||||
--bs-primary-text-emphasis: #081D22;
|
||||
--bs-primary-bg-subtle: #D0DADD;
|
||||
--bs-primary-border-subtle: #A1B6BB;
|
||||
--bs-secondary: #60C401;
|
||||
--bs-secondary-rgb: 96,196,1;
|
||||
--bs-secondary-text-emphasis: #264E00;
|
||||
--bs-secondary-bg-subtle: #DFF3CC;
|
||||
--bs-secondary-border-subtle: #BFE799;
|
||||
--bs-link-color: #154854;
|
||||
--bs-link-color-rgb: 21,72,84;
|
||||
--bs-link-hover-color: #60C401;
|
||||
--bs-link-hover-color-rgb: 96,196,1;
|
||||
--bs-primary: #381741;
|
||||
--bs-primary-rgb: 56,23,65;
|
||||
--bs-primary-text-emphasis: #16091A;
|
||||
--bs-primary-bg-subtle: #D7D1D9;
|
||||
--bs-primary-border-subtle: #AFA2B3;
|
||||
--bs-secondary: #e86b17;
|
||||
--bs-secondary-rgb: 232,107,23;
|
||||
--bs-secondary-text-emphasis: #5D2B09;
|
||||
--bs-secondary-bg-subtle: #FAE1D1;
|
||||
--bs-secondary-border-subtle: #F6C4A2;
|
||||
--bs-link-color: #381741;
|
||||
--bs-link-color-rgb: 56,23,65;
|
||||
--bs-link-hover-color: #e86b17;
|
||||
--bs-link-hover-color-rgb: 232,107,23;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--bs-btn-color: #fff;
|
||||
--bs-btn-bg: #154854;
|
||||
--bs-btn-border-color: #154854;
|
||||
--bs-btn-bg: #381741;
|
||||
--bs-btn-border-color: #381741;
|
||||
--bs-btn-hover-color: #fff;
|
||||
--bs-btn-hover-bg: #123D47;
|
||||
--bs-btn-hover-border-color: #113A43;
|
||||
--bs-btn-focus-shadow-rgb: 220,228,229;
|
||||
--bs-btn-hover-bg: #301437;
|
||||
--bs-btn-hover-border-color: #2D1234;
|
||||
--bs-btn-focus-shadow-rgb: 225,220,227;
|
||||
--bs-btn-active-color: #fff;
|
||||
--bs-btn-active-bg: #113A43;
|
||||
--bs-btn-active-border-color: #10363F;
|
||||
--bs-btn-active-bg: #2D1234;
|
||||
--bs-btn-active-border-color: #2A1131;
|
||||
--bs-btn-disabled-color: #fff;
|
||||
--bs-btn-disabled-bg: #154854;
|
||||
--bs-btn-disabled-border-color: #154854;
|
||||
--bs-btn-disabled-bg: #381741;
|
||||
--bs-btn-disabled-border-color: #381741;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--bs-btn-color: #154854;
|
||||
--bs-btn-border-color: #154854;
|
||||
--bs-btn-focus-shadow-rgb: 21,72,84;
|
||||
--bs-btn-color: #381741;
|
||||
--bs-btn-border-color: #381741;
|
||||
--bs-btn-focus-shadow-rgb: 56,23,65;
|
||||
--bs-btn-hover-color: #fff;
|
||||
--bs-btn-hover-bg: #154854;
|
||||
--bs-btn-hover-border-color: #154854;
|
||||
--bs-btn-hover-bg: #381741;
|
||||
--bs-btn-hover-border-color: #381741;
|
||||
--bs-btn-active-color: #fff;
|
||||
--bs-btn-active-bg: #154854;
|
||||
--bs-btn-active-border-color: #154854;
|
||||
--bs-btn-disabled-color: #154854;
|
||||
--bs-btn-active-bg: #381741;
|
||||
--bs-btn-active-border-color: #381741;
|
||||
--bs-btn-disabled-color: #381741;
|
||||
--bs-btn-disabled-bg: transparent;
|
||||
--bs-btn-disabled-border-color: #154854;
|
||||
--bs-btn-disabled-border-color: #381741;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--bs-btn-color: #000000;
|
||||
--bs-btn-bg: #60C401;
|
||||
--bs-btn-border-color: #60C401;
|
||||
--bs-btn-bg: #e86b17;
|
||||
--bs-btn-border-color: #e86b17;
|
||||
--bs-btn-hover-color: #000000;
|
||||
--bs-btn-hover-bg: #78CD27;
|
||||
--bs-btn-hover-border-color: #70CA1A;
|
||||
--bs-btn-focus-shadow-rgb: 14,29,0;
|
||||
--bs-btn-hover-bg: #EB813A;
|
||||
--bs-btn-hover-border-color: #EA7A2E;
|
||||
--bs-btn-focus-shadow-rgb: 35,16,3;
|
||||
--bs-btn-active-color: #000000;
|
||||
--bs-btn-active-bg: #80D034;
|
||||
--bs-btn-active-border-color: #70CA1A;
|
||||
--bs-btn-active-bg: #ED8945;
|
||||
--bs-btn-active-border-color: #EA7A2E;
|
||||
--bs-btn-disabled-color: #000000;
|
||||
--bs-btn-disabled-bg: #60C401;
|
||||
--bs-btn-disabled-border-color: #60C401;
|
||||
--bs-btn-disabled-bg: #e86b17;
|
||||
--bs-btn-disabled-border-color: #e86b17;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--bs-btn-color: #60C401;
|
||||
--bs-btn-border-color: #60C401;
|
||||
--bs-btn-focus-shadow-rgb: 96,196,1;
|
||||
--bs-btn-color: #e86b17;
|
||||
--bs-btn-border-color: #e86b17;
|
||||
--bs-btn-focus-shadow-rgb: 232,107,23;
|
||||
--bs-btn-hover-color: #000000;
|
||||
--bs-btn-hover-bg: #60C401;
|
||||
--bs-btn-hover-border-color: #60C401;
|
||||
--bs-btn-hover-bg: #e86b17;
|
||||
--bs-btn-hover-border-color: #e86b17;
|
||||
--bs-btn-active-color: #000000;
|
||||
--bs-btn-active-bg: #60C401;
|
||||
--bs-btn-active-border-color: #60C401;
|
||||
--bs-btn-disabled-color: #60C401;
|
||||
--bs-btn-active-bg: #e86b17;
|
||||
--bs-btn-active-border-color: #e86b17;
|
||||
--bs-btn-disabled-color: #e86b17;
|
||||
--bs-btn-disabled-bg: transparent;
|
||||
--bs-btn-disabled-border-color: #60C401;
|
||||
--bs-btn-disabled-border-color: #e86b17;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] {
|
||||
--bs-primary: #60C401;
|
||||
--bs-primary-rgb: 96,196,1;
|
||||
--bs-primary-text-emphasis: #A0DC67;
|
||||
--bs-primary-bg-subtle: #132700;
|
||||
--bs-primary-border-subtle: #3A7601;
|
||||
--bs-primary: #e86b17;
|
||||
--bs-primary-rgb: 232,107,23;
|
||||
--bs-primary-text-emphasis: #F1A674;
|
||||
--bs-primary-bg-subtle: #2E1505;
|
||||
--bs-primary-border-subtle: #8B400E;
|
||||
--bs-secondary: #381741;
|
||||
--bs-secondary-rgb: 56,23,65;
|
||||
--bs-secondary-text-emphasis: #88748D;
|
||||
--bs-secondary-bg-subtle: #0B050D;
|
||||
--bs-secondary-border-subtle: #220E27;
|
||||
--bs-link-color: #ffffff;
|
||||
--bs-link-color-rgb: 255,255,255;
|
||||
--bs-link-hover-color: #60C401;
|
||||
--bs-link-hover-color-rgb: 96,196,1;
|
||||
--bs-link-hover-color: #e86b17;
|
||||
--bs-link-hover-color-rgb: 232,107,23;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] .btn-primary, .btn-primary[data-bs-theme=dark] {
|
||||
--bs-btn-color: #000000;
|
||||
--bs-btn-bg: #60C401;
|
||||
--bs-btn-border-color: #60C401;
|
||||
--bs-btn-bg: #e86b17;
|
||||
--bs-btn-border-color: #e86b17;
|
||||
--bs-btn-hover-color: #000000;
|
||||
--bs-btn-hover-bg: #78CD27;
|
||||
--bs-btn-hover-border-color: #70CA1A;
|
||||
--bs-btn-focus-shadow-rgb: 14,29,0;
|
||||
--bs-btn-hover-bg: #EB813A;
|
||||
--bs-btn-hover-border-color: #EA7A2E;
|
||||
--bs-btn-focus-shadow-rgb: 35,16,3;
|
||||
--bs-btn-active-color: #000000;
|
||||
--bs-btn-active-bg: #80D034;
|
||||
--bs-btn-active-border-color: #70CA1A;
|
||||
--bs-btn-active-bg: #ED8945;
|
||||
--bs-btn-active-border-color: #EA7A2E;
|
||||
--bs-btn-disabled-color: #000000;
|
||||
--bs-btn-disabled-bg: #60C401;
|
||||
--bs-btn-disabled-border-color: #60C401;
|
||||
--bs-btn-disabled-bg: #e86b17;
|
||||
--bs-btn-disabled-border-color: #e86b17;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] .btn-outline-primary, .btn-outline-primary[data-bs-theme=dark] {
|
||||
--bs-btn-color: #60C401;
|
||||
--bs-btn-border-color: #60C401;
|
||||
--bs-btn-focus-shadow-rgb: 96,196,1;
|
||||
--bs-btn-color: #e86b17;
|
||||
--bs-btn-border-color: #e86b17;
|
||||
--bs-btn-focus-shadow-rgb: 232,107,23;
|
||||
--bs-btn-hover-color: #000000;
|
||||
--bs-btn-hover-bg: #60C401;
|
||||
--bs-btn-hover-border-color: #60C401;
|
||||
--bs-btn-hover-bg: #e86b17;
|
||||
--bs-btn-hover-border-color: #e86b17;
|
||||
--bs-btn-active-color: #000000;
|
||||
--bs-btn-active-bg: #60C401;
|
||||
--bs-btn-active-border-color: #60C401;
|
||||
--bs-btn-disabled-color: #60C401;
|
||||
--bs-btn-active-bg: #e86b17;
|
||||
--bs-btn-active-border-color: #e86b17;
|
||||
--bs-btn-disabled-color: #e86b17;
|
||||
--bs-btn-disabled-bg: transparent;
|
||||
--bs-btn-disabled-border-color: #60C401;
|
||||
--bs-btn-disabled-border-color: #e86b17;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] .btn-secondary, .btn-secondary[data-bs-theme=dark] {
|
||||
--bs-btn-color: #fff;
|
||||
--bs-btn-bg: #381741;
|
||||
--bs-btn-border-color: #381741;
|
||||
--bs-btn-hover-color: #fff;
|
||||
--bs-btn-hover-bg: #301437;
|
||||
--bs-btn-hover-border-color: #2D1234;
|
||||
--bs-btn-focus-shadow-rgb: 225,220,227;
|
||||
--bs-btn-active-color: #fff;
|
||||
--bs-btn-active-bg: #2D1234;
|
||||
--bs-btn-active-border-color: #2A1131;
|
||||
--bs-btn-disabled-color: #fff;
|
||||
--bs-btn-disabled-bg: #381741;
|
||||
--bs-btn-disabled-border-color: #381741;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] .btn-outline-secondary, .btn-outline-secondary[data-bs-theme=dark] {
|
||||
--bs-btn-color: #381741;
|
||||
--bs-btn-border-color: #381741;
|
||||
--bs-btn-focus-shadow-rgb: 56,23,65;
|
||||
--bs-btn-hover-color: #fff;
|
||||
--bs-btn-hover-bg: #381741;
|
||||
--bs-btn-hover-border-color: #381741;
|
||||
--bs-btn-active-color: #fff;
|
||||
--bs-btn-active-bg: #381741;
|
||||
--bs-btn-active-border-color: #381741;
|
||||
--bs-btn-disabled-color: #381741;
|
||||
--bs-btn-disabled-bg: transparent;
|
||||
--bs-btn-disabled-border-color: #381741;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
|
||||
@@ -74,32 +74,32 @@
|
||||
[data-bs-theme=dark] .card-link .blog-link {
|
||||
--bs-link-color: #ffffff !important;
|
||||
--bs-link-color-rgb: 255,255,255 !important;
|
||||
--bs-link-hover-color: #60C401 !important;
|
||||
--bs-link-hover-color-rgb: 96,196,1 !important;
|
||||
--bs-link-hover-color: var(--bs-secondary) !important;
|
||||
--bs-link-hover-color-rgb: var(--bs-secondary-rgb) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] .card-link .blog-link:hover {
|
||||
--bs-link-color: #ffffff !important;
|
||||
--bs-link-color-rgb: 255,255,255 !important;
|
||||
--bs-link-hover-color: #60C401 !important;
|
||||
--bs-link-hover-color-rgb: 96,196,1 !important;
|
||||
color: #60C401 !important;
|
||||
--bs-link-hover-color: var(--bs-secondary) !important;
|
||||
--bs-link-hover-color-rgb: var(--bs-secondary-rgb) !important;
|
||||
color: var(--bs-secondary) !important;
|
||||
}
|
||||
|
||||
[data-bs-theme=light] .card-link .blog-link {
|
||||
--bs-link-color: #154854 !important;
|
||||
--bs-link-color-rgb: 21,72,84 !important;
|
||||
--bs-link-hover-color: #60C401 !important;
|
||||
--bs-link-hover-color-rgb: 96,196,1 !important;
|
||||
--bs-link-color: var(--bs-primary) !important;
|
||||
--bs-link-color-rgb: var(--bs-primary-rgb) !important;
|
||||
--bs-link-hover-color: var(--bs-secondary) !important;
|
||||
--bs-link-hover-color-rgb: var(--bs-secondary-rgb) !important;
|
||||
color: var(--bs-link-color);
|
||||
}
|
||||
|
||||
[data-bs-theme=light] .card-link .blog-link:hover {
|
||||
--bs-link-color: #154854 !important;
|
||||
--bs-link-color-rgb: 21,72,84 !important;
|
||||
--bs-link-hover-color: #60C401 !important;
|
||||
--bs-link-hover-color-rgb: 96,196,1 !important;
|
||||
--bs-link-color: var(--bs-primary) !important;
|
||||
--bs-link-color-rgb: var(--bs-primary-rgb) !important;
|
||||
--bs-link-hover-color: var(--bs-secondary) !important;
|
||||
--bs-link-hover-color-rgb: var(--bs-secondary-rgb) !important;
|
||||
color: var(--bs-link-hover-color);
|
||||
}
|
||||
|
||||
@@ -144,13 +144,13 @@
|
||||
}
|
||||
|
||||
[data-bs-theme=light] .gradient {
|
||||
background: linear-gradient(120deg, #154854, #60C401)!important;
|
||||
background: linear-gradient(120deg, rgb(var(--bs-primary-rgb)), rgb(var(--bs-secondary-rgb)))!important;
|
||||
color: #fff;
|
||||
transition: background 1000ms linear;
|
||||
}
|
||||
|
||||
[data-bs-theme=auto] .gradient {
|
||||
background: linear-gradient(120deg, #154854, #60C401)!important;
|
||||
background: linear-gradient(120deg, rgb(var(--bs-primary-rgb)), rgb(var(--bs-secondary-rgb)))!important;
|
||||
color: #fff;
|
||||
transition: background 1000ms linear;
|
||||
}
|
||||
@@ -173,7 +173,7 @@
|
||||
} */
|
||||
|
||||
[data-bs-theme=dark] .gradient {
|
||||
background: linear-gradient(120deg, #60C401, #154854)!important;
|
||||
background: linear-gradient(120deg, rgb(var(--bs-secondary-rgb)), rgb(var(--bs-primary-rgb)))!important;
|
||||
color: #fff;
|
||||
transition: background 1000ms linear;
|
||||
}
|
||||
@@ -188,10 +188,10 @@
|
||||
[data-bs-theme=dark] .coloured-underline {
|
||||
/*text-decoration-line: underline;*/
|
||||
/*text-decoration-thickness: 2.5px;*/
|
||||
/*text-decoration-color: linear-gradient(#60C401, #154854), linear-gradient(rgb(96, 196, 1),rgb(96, 196, 1)), linear-gradient(#154854, #154854);*/
|
||||
/*text-decoration-color: linear-gradient(--bs-secondary, var(--bs-primary)), linear-gradient(rgb(var(--bs-secondary-rgb)),rgb(var(--bs-secondary-rgb))), linear-gradient(var(--bs-primary), var(--bs-primary));*/
|
||||
/*transition: background-size 2s linear, background-position 2s linear;*/
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#070d21, #070d21), linear-gradient(rgb(96, 196, 1),rgb(96, 196, 1)), linear-gradient(#154854, #154854);
|
||||
background-image: linear-gradient(#070d21, #070d21), linear-gradient(rgb(var(--bs-secondary-rgb)),rgb(var(--bs-secondary-rgb))), linear-gradient(rgb(var(--bs-primary-rgb)),rgb(var(--bs-primary-rgb)));
|
||||
background-size: 20px 2px, 100% 2px, 0 2px;
|
||||
background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
|
||||
background-repeat: no-repeat;
|
||||
@@ -201,10 +201,10 @@
|
||||
[data-bs-theme=light] .coloured-underline {
|
||||
/*text-decoration-line: underline;*/
|
||||
/*text-decoration-thickness: 2.5px;*/
|
||||
/*text-decoration-color: linear-gradient(#60C401, #154854), linear-gradient(rgb(96, 196, 1),rgb(96, 196, 1)), linear-gradient(#154854, #154854);*/
|
||||
/*text-decoration-color: linear-gradient(--bs-secondary, var(--bs-primary)), linear-gradient(rgb(var(--bs-secondary-rgb)),rgb(var(--bs-secondary-rgb))), linear-gradient(var(--bs-primary), var(--bs-primary));*/
|
||||
/*transition: background-size 2s linear, background-position 2s linear;*/
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fff, #fff), linear-gradient(rgb(96, 196, 1),rgb(96, 196, 1)), linear-gradient(#154854, #154854);
|
||||
background-image: linear-gradient(#fff, #fff), linear-gradient(rgb(var(--bs-secondary-rgb)),rgb(var(--bs-secondary-rgb))), linear-gradient(rgb(var(--bs-primary-rgb)),rgb(var(--bs-primary-rgb)));
|
||||
background-size: 20px 2px, 100% 2px, 0 2px;
|
||||
background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
|
||||
background-repeat: no-repeat;
|
||||
@@ -230,7 +230,7 @@
|
||||
}
|
||||
|
||||
.rainbow-border {
|
||||
max-height: 150px;
|
||||
max-height: 15em;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@@ -238,3 +238,65 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slider-image-fit {
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.center-everything {
|
||||
margin-right: auto!important;
|
||||
margin-left: auto!important;
|
||||
}
|
||||
|
||||
.portfolio-block.block-intro {
|
||||
text-align: center;
|
||||
padding-top: 5em;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.portfolio-block.project {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 3em;
|
||||
}
|
||||
|
||||
.portfolio-block.project .more-projects {
|
||||
margin-top: 2em;
|
||||
border-top: 1px solid var(--bs-dark-subtle);
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.portfolio-block.block-intro p {
|
||||
font-size: 1.5em;
|
||||
font-weight: 300;
|
||||
margin-bottom: 30px;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.project-carousel {
|
||||
width: 95%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.portfolio-block .heading h2, .portfolio-block .heading .h2 {
|
||||
text-transform: capitalize;
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
color: var(--bs-heading-color);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.swiper-control {
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
:root {
|
||||
--swiper-theme-color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item:active {
|
||||
--bs-dropdown-link-active-bg: var(--bs-secondary)!important;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user