FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement proper dark mode (#800)

Browse source 
* Implement proper dark mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix footer color in light mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
Emruz Hossain 2023-09-30 05:04:48 +06:00 • committed by GitHub
parent 6dc9d1d33d
commit 5f0aebcf68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 1136 additions and 353 deletions
Download patch file Download diff file Expand all files Collapse all files

35
assets/styles/sections/about.scss
View file

@ -54,11 +54,11 @@ $progress-bar-colors: (
a {
font-size: 1.5rem;
color: $text-color;
color: get-light-color('text-color');
padding: 0.5rem;
&:hover {
color: $accent-color;
color: get-light-color('accent-color');
@include transition();
}
}
@ -78,7 +78,7 @@ $progress-bar-colors: (
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid $bg-primary;
border: 12px solid get-light-color('bg-primary');
position: absolute;
top: 0;
left: 0;
@ -130,9 +130,9 @@ $progress-bar-colors: (
height: 90%;
padding: 1rem;
border-radius: 50%;
background: $text-color;
background: get-light-color('text-color');
font-size: 1rem;
color: $bg-primary;
color: get-light-color('bg-primary');
line-height: initial;
text-align: center;
position: absolute;
@ -202,3 +202,28 @@ $progress-bar-colors: (
}
}
}
html[data-theme='dark'] {
.about-section {
.social-link {
a {
color: get-dark-color('text-color');
&:hover {
color: get-dark-color('accent-color');
}
}
}
.circular-progress {
&::after {
border: 12px solid get-dark-color('bg-primary');
}
.circular-progress-value {
background: get-dark-color('inverse-text-color');
color: get-dark-color('text-color');
}
}
}
}

33
assets/styles/sections/accomplishments.scss
View file

@ -2,13 +2,13 @@
@include section-title-adjustment();
.card {
background: $bg-card;
border-top: 2px solid $accent-color;
background: get-light-color('bg-card');
border-top: 2px solid get-light-color('accent-color');
height: 100%;
&:hover,
&:focus {
border-top: 2px solid $hover-over-accent-color;
border-top: 2px solid get-light-color('hover-over-accent-color');
}
.card-header {
@ -16,7 +16,7 @@
border: none;
.sub-title {
color: $muted-text-color;
color: get-light-color('muted-text-color');
margin-top: 0.4rem;
}
}
@ -28,7 +28,7 @@
}
.card-footer {
background: $bg-card;
background: get-light-color('bg-card');
border: none;
padding: 0;
padding-left: 0.7rem;
@ -53,3 +53,26 @@
max-width: 100%;
}
}
html[data-theme='dark'] {
.accomplishments-section {
.card {
background: get-dark-color('bg-card');
border-top: 2px solid get-dark-color('accent-color');
&:hover,
&:focus {
border-top: 2px solid get-dark-color('hover-over-accent-color');
}
.card-header {
.sub-title {
color: get-dark-color('muted-text-color');
}
}
.card-footer {
background: get-dark-color('bg-card');
}
}
}
}

48
assets/styles/sections/achievements.scss
View file

@ -12,7 +12,7 @@
margin-left: 7px;
margin-right: 7px;
z-index: 1;
background-color: $bg-secondary;
background-color: get-light-color('bg-secondary');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
@ -21,8 +21,8 @@
@include transition();
.title {
color: $inverse-text-color;
background-color: rgba($bg-primary-inverse, 0.7);
color: get-light-color('inverse-text-color');
background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
opacity: 0;
padding: 5px;
position: absolute;
@ -85,28 +85,28 @@
}
.svg-inline--fa {
color: $muted-text-color;
background-color: rgba($bg-primary-inverse, 0.7);
color: get-light-color('muted-text-color');
background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
padding: 10px;
font-size: 0rem;
opacity: 0;
}
.caption {
background-color: rgba($bg-primary-inverse, 0.7);
background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
bottom: 1rem;
left: 1rem;
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
padding: 15px;
position: absolute;
@include transition();
h4 {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
p {
font-size: 16px;
font-weight: 300;
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
}
@ -127,3 +127,33 @@
}
}
}
html[data-theme='dark'] {
.achievements-section {
#gallery {
.achievement-entry {
background-color: get-dark-color('bg-secondary');
.title {
color: get-dark-color('inverse-text-color');
background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
}
}
.svg-inline--fa {
color: get-dark-color('muted-text-color');
background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
}
.caption {
background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
color: get-dark-color('inverse-text-color');
h4 {
color: get-dark-color('inverse-text-color');
}
p {
color: get-dark-color('inverse-text-color');
}
}
}
}
}

93
assets/styles/sections/education.scss
View file

@ -4,7 +4,7 @@
.card {
&:hover,
&:focus {
border-left: 2px solid $accent-color;
border-left: 2px solid get-light-color('accent-color');
}
}
@ -23,19 +23,19 @@
position: absolute;
left: 1rem;
top: 0;
background-color: $accent-color;
background-color: get-light-color('accent-color');
height: 100%;
width: 2px;
}
.icon-holder {
background-color: $accent-color;
background-color: get-light-color('accent-color');
border-radius: 50%;
height: 2rem;
width: 2rem;
padding: 0.2rem;
text-align: center;
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
position: relative;
}
}
@ -43,14 +43,14 @@
tr,
th,
td {
border: none;
border: none !important;
padding: 0;
background: none;
background: none !important;
}
tr {
&:hover {
background: none;
background: none !important;
}
&:first-child {
.hline {
@ -72,7 +72,7 @@
div {
height: 2px;
margin-right: -1px;
background-color: $accent-color;
background-color: get-light-color('accent-color');
}
}
@ -81,10 +81,10 @@
padding: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border-left: 2px solid $accent-color;
border-top: 1px solid $bg-primary;
border-bottom: 1px solid $bg-primary;
border-right: 1px solid $bg-primary;
border-left: 2px solid get-light-color('accent-color');
border-top: 1px solid get-light-color('bg-primary');
border-bottom: 1px solid get-light-color('bg-primary');
border-right: 1px solid get-light-color('bg-primary');
border-radius: 5px;
h5 {
@ -92,7 +92,7 @@
}
.timeframe {
color: $muted-text-color;
color: get-light-color('muted-text-color');
text-align: right;
}
@ -109,7 +109,7 @@
th {
background: none;
border: none;
color: $text-color;
color: get-light-color('text-color');
}
tr {
@ -167,5 +167,68 @@
}
.education-alt .degree-info {
border-right: 2px solid $accent-color;
border-right: 2px solid get-light-color('accent-color');
}
html[data-theme='dark'] {
.education-section {
.card {
&:hover,
&:focus {
border-left: 2px solid get-dark-color('accent-color');
}
}
.education-info-table {
.icon {
.hline {
background-color: get-dark-color('accent-color');
}
.icon-holder {
background-color: get-dark-color('accent-color');
color: get-dark-color('text-over-accent-color');
}
}
tr {
.line {
div {
background-color: get-dark-color('accent-color');
}
}
.details {
.degree-info {
border-left: 2px solid get-dark-color('accent-color');
border-top: 1px solid get-dark-color('bg-primary');
border-bottom: 1px solid get-dark-color('bg-primary');
border-right: 1px solid get-dark-color('bg-primary');
.timeframe {
color: get-dark-color('muted-text-color');
}
.taken-courses {
table {
tr,
td,
th {
color: get-dark-color('text-color');
}
}
}
&:hover{
border: 1px solid rgba(get-dark-color('accent-color'),0.2);
border-left: 2px solid get-dark-color('accent-color');
}
}
}
}
}
}
.education-alt .degree-info {
border-right: 2px solid get-dark-color('accent-color');
}
}

42
assets/styles/sections/experiences.scss
View file

@ -7,7 +7,7 @@
padding-left: 1rem;
& > li {
margin-left: 0;
color: $text-color;
color: get-light-color('text-color');
}
}
@ -18,8 +18,8 @@
.circle {
padding: 13px 20px;
border-radius: 50%;
background-color: $accent-color;
color: $text-over-accent-color;
background-color: get-light-color('accent-color');
color: get-light-color('text-over-accent-color');
max-height: 50px;
z-index: 2;
}
@ -33,7 +33,7 @@
&::after {
content: '';
position: absolute;
border-left: 3px solid $accent-color;
border-left: 3px solid get-light-color('accent-color');
z-index: 1;
height: 100%;
left: 50%;
@ -48,7 +48,7 @@
height: 40px;
}
hr {
border-top: 3px solid $accent-color;
border-top: 3px solid get-light-color('accent-color');
margin: 0;
top: 17px;
position: relative;
@ -58,7 +58,7 @@
overflow: hidden;
}
.corner {
border: 3px solid $accent-color;
border: 3px solid get-light-color('accent-color');
width: 100%;
position: relative;
border-radius: 15px;
@ -113,3 +113,33 @@
}
}
}
html[data-theme='dark'] {
.experiences-section {
ul {
& > li {
color: get-dark-color('text-color');
}
}
.circle {
background-color: get-dark-color('accent-color');
color: get-dark-color('text-over-accent-color');
}
.timeline {
.vertical-line {
&::after {
border-left: 3px solid get-dark-color('accent-color');
}
}
.horizontal-line {
hr {
border-top: 3px solid get-dark-color('accent-color');
}
.corner {
border: 3px solid get-dark-color('accent-color');
}
}
}
}
}

67
assets/styles/sections/footer.scss
View file

@ -1,19 +1,19 @@
.footer {
color: $muted-text-color !important;
background-color: $bg-primary-inverse;
color: get-light-color('muted-text-color') !important;
background-color: get-light-color('footer-color');
position: relative;
z-index: 9999;
h5 {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
a {
color: $muted-text-color;
color: get-light-color('muted-text-color');
@include transition();
&:hover {
margin-left: 5px;
text-decoration: $muted-text-color underline;
text-decoration: get-light-color('muted-text-color') underline;
@include transition();
}
}
@ -28,30 +28,30 @@
}
hr {
background-color: $muted-text-color;
background-color: get-light-color('muted-text-color');
}
p:first-child {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
input {
background-color: $inverse-text-color;
background-color: get-light-color('inverse-text-color');
&:focus {
background-color: $bg-secondary;
background-color: get-light-color('bg-secondary');
}
}
#disclaimer {
color: $muted-text-color !important;
color: get-light-color('muted-text-color') !important;
text-align: justify;
& > strong {
color: $inverse-text-color !important;
color: get-light-color('inverse-text-color') !important;
}
}
#theme {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
img {
width: 32px;
display: inline-block;
@ -67,3 +67,46 @@
}
}
}
html[data-theme='dark'] {
.footer {
color: get-dark-color('muted-text-color') !important;
background-color: get-dark-color('footer-color');
h5 {
color: get-dark-color('heading-color');
}
a {
color: get-dark-color('muted-text-color');
&:hover {
text-decoration: get-dark-color('muted-text-color') underline;
}
}
hr {
background-color: get-dark-color('muted-text-color');
}
p:first-child {
color: get-dark-color('muted-text-color');
}
input {
background-color: get-dark-color('bg-primary');
&:focus {
background-color: get-dark-color('bg-secondary');
}
}
#disclaimer {
color: get-dark-color('muted-text-color') !important;
& > strong {
color: get-dark-color('text-color') !important;
}
}
#theme {
color: get-dark-color('text-color');
}
}
}

31
assets/styles/sections/home.scss
View file

@ -2,7 +2,7 @@
height: 100vh;
padding: 0;
margin: 0;
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
overflow: hidden;
.background {
@ -44,19 +44,19 @@
img {
width: 148px;
height: 148px;
background-color: $bg-secondary;
background-color: get-light-color('bg-secondary');
padding: 5px;
margin-bottom: 10px;
}
.greeting,
.greeting-subtitle {
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
}
.typing-carousel {
font-size: 14pt;
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
}
#typing-carousel-data {
@ -65,7 +65,7 @@
.arrow {
position: absolute;
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
font-size: 1.5rem;
bottom: 0;
}
@ -108,3 +108,24 @@
}
}
}
html[data-theme='dark'] {
.home {
color: get-dark-color('text-over-accent-color');
img {
background-color: get-dark-color('bg-secondary');
}
.greeting,
.greeting-subtitle {
color: get-dark-color('text-over-accent-color');
}
.typing-carousel {
color: get-dark-color('text-over-accent-color');
}
.arrow {
color: get-dark-color('text-over-accent-color');
}
}
}

17
assets/styles/sections/projects.scss
View file

@ -1,7 +1,7 @@
.projects-section {
.card {
.card-header {
background-color: $bg-card;
background-color: get-light-color('bg-card');
padding: 0.7rem;
padding-bottom: 0rem;
text-decoration: none;
@ -10,7 +10,7 @@
margin-right: 0.5rem;
}
.sub-title {
color: $muted-text-color;
color: get-light-color('muted-text-color');
margin-top: 0.4rem;
span {
@ -81,3 +81,16 @@
}
}
}
html[data-theme='dark'] {
.projects-section {
.card {
.card-header {
background-color: get-dark-color('bg-card');
.sub-title {
color: get-dark-color('muted-text-color');
}
}
}
}
}

34
assets/styles/sections/publications.scss
View file

@ -2,12 +2,12 @@
@include section-title-adjustment();
.card {
background: $bg-card;
border-top: 2px solid $accent-color;
background: get-light-color('bg-card');
border-top: 2px solid get-light-color('accent-color');
&:hover,
&:focus {
border-top: 2px solid $accent-color;
border-top: 2px solid get-light-color('accent-color');
}
.card-header {
@ -17,7 +17,7 @@
flex-direction: column;
.sub-title {
color: $muted-text-color;
color: get-light-color('muted-text-color');
margin-top: 0.4rem;
span:nth-child(2) {
@ -33,7 +33,7 @@
}
.card-footer {
background: $bg-card;
background: get-light-color('bg-card');
border: none;
padding: 0;
padding-left: 1rem;
@ -106,3 +106,27 @@
}
}
}
html[data-theme='dark'] {
.publications-section {
.card {
background: get-dark-color('bg-card');
border-top: 2px solid get-dark-color('accent-color');
&:hover,
&:focus {
border-top: 2px solid get-dark-color('accent-color');
}
.card-header {
.sub-title {
color: get-dark-color('muted-text-color');
}
}
.card-footer {
background: get-dark-color('bg-card');
}
}
}
}

15
assets/styles/sections/skills.scss
View file

@ -5,12 +5,12 @@
height: 100%;
.card-head {
background-color: $bg-primary !important;
background-color: get-light-color('bg-primary') !important;
height: -moz-fit-content;
height: fit-content;
padding: 0.7rem;
padding-bottom: 0rem;
border-bottom: 0.0625rem solid rgba($accent-color, 0.4);
border-bottom: 0.0625rem solid rgba(get-light-color('accent-color'), 0.4);
.card-img-xs {
margin-right: 0.5rem;
@ -33,3 +33,14 @@
}
}
}
html[data-theme='dark'] {
.skills-section {
.card {
.card-head {
background-color: get-dark-color('bg-card') !important;
border-bottom: 0.0625rem solid rgba(get-dark-color('accent-color'), 0.4);
}
}
}
}