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

Introduce color variables

Browse source 
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2023-09-29 04:22:23 +06:00
parent b34c6860be
commit 6d5d1b9851
35 changed files with 696 additions and 909 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,52 @@
@use 'sass:map';
$progress-bar-colors: (
'blue': #048dff,
'yellow': #eebb4d,
'pink': #ed63d2,
'green': #2dca73,
'sky': #00c9e3,
'orange': #ff7c7c,
);
@mixin circular-progress-bar-color() {
@each $color, $value in $progress-bar-colors {
&.#{$color} {
.circular-progress-bar {
border-color: $value;
}
}
}
}
@mixin circular-progress-animation-breakpoints() {
$progress: 50;
$duration: 0;
@for $i from 1 through 10 {
.circular-progress-percentage-#{$progress} {
animation: circular-loading-#{$progress} #{$duration}s linear forwards 1.8s;
}
$progress: $progress + 5;
$duration: $duration + 0.18;
}
}
@mixin circular-progress-animation-keyframes($progress, $degree, $keyframes) {
@for $i from 1 through $keyframes {
@keyframes circular-loading-#{$progress} {
0% {
transform: rotate(0);
}
100% {
transform: rotate(#{$degree}deg);
}
}
$progress: $progress + 5;
$degree: $degree + 18;
}
}
.about-section {
.social-link {
list-style: none;
@ -5,12 +54,12 @@
a {
font-size: 1.5rem;
color: #3c4858;
color: $text-color;
padding: 0.5rem;
&:hover {
color: #248aaa;
transition: all 0.3s ease-in;
color: $accent-color;
@include transition();
}
}
}
@ -29,7 +78,7 @@
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #f9fafc;
border: 12px solid $bg-primary;
position: absolute;
top: 0;
left: 0;
@ -42,9 +91,7 @@
top: 0;
z-index: 1;
}
.circular-progress-left {
left: 0;
}
.circular-progress-bar {
width: 100%;
height: 100%;
@ -54,32 +101,38 @@
position: absolute;
top: 0;
}
.circular-progress-left .circular-progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
transform-origin: center left;
.circular-progress-left {
left: 0;
.circular-progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
transform-origin: center left;
}
}
.circular-progress-right {
right: 0;
}
.circular-progress-right .circular-progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
transform-origin: center right;
animation: circular-loading-1 1.8s linear forwards;
.circular-progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
transform-origin: center right;
animation: circular-loading-1 1.8s linear forwards;
}
}
.circular-progress-value {
width: 90%;
height: 90%;
padding: 1rem;
border-radius: 50%;
background: #3c4858;
background: $text-color;
font-size: 1rem;
color: #f9fafc;
color: $bg-primary;
line-height: initial;
text-align: center;
position: absolute;
@ -89,211 +142,10 @@
justify-content: center;
align-items: center;
}
&.blue .circular-progress-bar {
border-color: #048dff;
}
&.yellow .circular-progress-bar {
border-color: #eebb4d;
}
&.pink .circular-progress-bar {
border-color: #ed63d2;
}
&.green .circular-progress-bar {
border-color: #2dca73;
}
&.sky .circular-progress-bar {
border-color: #00c9e3;
}
&.orange .circular-progress-bar {
border-color: #ff7c7c;
}
.circular-progress-percentage-50 {
animation: circular-loading-50 0s linear forwards 1.8s;
}
.circular-progress-percentage-55 {
animation: circular-loading-55 0.18s linear forwards 1.8s;
}
.circular-progress-percentage-60 {
animation: circular-loading-60 0.36s linear forwards 1.8s;
}
.circular-progress-percentage-65 {
animation: circular-loading-65 0.54s linear forwards 1.8s;
}
.circular-progress-percentage-70 {
animation: circular-loading-70 0.72s linear forwards 1.8s;
}
.circular-progress-percentage-75 {
animation: circular-loading-75 0.9s linear forwards 1.8s;
}
.circular-progress-percentage-80 {
animation: circular-loading-80 1.08s linear forwards 1.8s;
}
.circular-progress-percentage-85 {
animation: circular-loading-85 1.26s linear forwards 1.8s;
}
.circular-progress-percentage-90 {
animation: circular-loading-90 1.44s linear forwards 1.8s;
}
.circular-progress-percentage-95 {
animation: circular-loading-95 1.62s linear forwards 1.8s;
}
.circular-progress-percentage-100 {
animation: circular-loading-100 1.8s linear forwards 1.8s;
}
@keyframes circular-loading-50 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes circular-loading-55 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(18deg);
}
}
@keyframes circular-loading-60 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(36deg);
}
}
@keyframes circular-loading-65 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(54deg);
}
}
@keyframes circular-loading-70 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(72deg);
}
}
@keyframes circular-loading-75 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
@keyframes circular-loading-80 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(108deg);
}
}
@keyframes circular-loading-85 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(126deg);
}
}
@keyframes circular-loading-90 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(144deg);
}
}
@keyframes circular-loading-95 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(162deg);
}
}
@keyframes circular-loading-100 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes circular-loading-1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes circular-loading-2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(144deg);
}
}
@keyframes circular-loading-3 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
@keyframes circular-loading-4 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(36deg);
}
}
@keyframes circular-loading-5 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(126deg);
}
}
@include circular-progress-bar-color();
@include circular-progress-animation-breakpoints();
@include circular-progress-animation-keyframes($progress: 50, $degree: 0, $keyframes: 10);
@include circular-progress-animation-keyframes($progress: 1, $degree: 180, $keyframes: 5);
}
@include media('<=large') {

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

@ -2,13 +2,13 @@
@include section-title-adjustment();
.card {
background: #fff;
border-top: 2px solid #248aaa;
background: $bg-card;
border-top: 2px solid $accent-color;
height: 100%;
&:hover,
&:focus {
border-top: 2px solid #248aaa;
border-top: 2px solid $hover-over-accent-color;
}
.card-header {
@ -16,7 +16,7 @@
border: none;
.sub-title {
color: #8392a5;
color: $muted-text-color;
margin-top: 0.4rem;
}
}
@ -28,7 +28,7 @@
}
.card-footer {
background: #fff;
background: $bg-card;
border: none;
padding: 0;
padding-left: 0.7rem;

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

@ -12,17 +12,17 @@
margin-left: 7px;
margin-right: 7px;
z-index: 1;
background-color: #e5e9f2;
background-color: $bg-secondary;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease-out;
@include transition();
.title {
color: #e5e9f2;
background-color: rgba(0, 0, 0, 0.7);
color: $inverse-text-color;
background-color: rgba($bg-primary-inverse, 0.7);
opacity: 0;
padding: 5px;
position: absolute;
@ -35,19 +35,19 @@
&:hover {
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s ease-out;
@include transition();
z-index: 20000;
.svg-inline--fa {
opacity: 1;
font-size: 1rem;
transition: all 0.3s ease-out;
@include transition();
}
.title {
opacity: 1;
bottom: 0px;
transition: bottom 0.3s ease-out;
@include transition();
}
}
}
@ -85,28 +85,28 @@
}
.svg-inline--fa {
color: #8392a5;
background-color: rgba(0, 0, 0, 0.7);
color: $muted-text-color;
background-color: rgba($bg-primary-inverse, 0.7);
padding: 10px;
font-size: 0rem;
opacity: 0;
}
.caption {
background-color: rgba(0, 0, 0, 0.7);
background-color: rgba($bg-primary-inverse, 0.7);
bottom: 1rem;
left: 1rem;
color: #e5e9f2;
color: $inverse-text-color;
padding: 15px;
position: absolute;
transition: all 0.3s ease-out;
@include transition();
h4 {
color: #e5e9f2;
color: $inverse-text-color;
}
p {
font-size: 16px;
font-weight: 300;
color: #e5e9f2;
color: $inverse-text-color;
}
}

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

@ -4,7 +4,7 @@
.card {
&:hover,
&:focus {
border-left: 2px solid #248aaa;
border-left: 2px solid $accent-color;
}
}
@ -23,19 +23,19 @@
position: absolute;
left: 1rem;
top: 0;
background-color: #248aaa;
background-color: $accent-color;
height: 100%;
width: 2px;
}
.icon-holder {
background-color: #248aaa;
background-color: $accent-color;
border-radius: 50%;
height: 2rem;
width: 2rem;
padding: 0.2rem;
text-align: center;
color: #e5e9f2;
color: $text-over-accent-color;
position: relative;
}
}
@ -71,9 +71,8 @@
div {
height: 2px;
/* width: 100%; */
margin-right: -1px;
background-color: #248aaa;
background-color: $accent-color;
}
}
@ -82,10 +81,10 @@
padding: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border-left: 2px solid #248aaa;
border-top: 1px solid #c0ccda;
border-bottom: 1px solid #c0ccda;
border-right: 1px solid #c0ccda;
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-radius: 5px;
h5 {
@ -93,7 +92,7 @@
}
.timeframe {
color: #8392a5;
color: $muted-text-color;
text-align: right;
}
@ -101,7 +100,7 @@
table {
margin-left: 1rem;
width: 100%;
transition: all 0.3s ease-out;
@include transition();
background: none;
border: none;
@ -110,7 +109,7 @@
th {
background: none;
border: none;
color: #212529;
color: $text-color;
}
tr {
@ -123,7 +122,7 @@
}
.hidden-course {
display: none;
transition: all 1s ease-out;
@include transition();
}
ul {
margin-bottom: 0;
@ -168,5 +167,5 @@
}
.education-alt .degree-info {
border-right: 2px solid #248aaa;
border-right: 2px solid $accent-color;
}

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

@ -7,7 +7,7 @@
padding-left: 1rem;
& > li {
margin-left: 0;
color: #3c4858;
color: $text-color;
}
}
@ -18,8 +18,8 @@
.circle {
padding: 13px 20px;
border-radius: 50%;
background-color: #248aaa;
color: #f9fafc;
background-color: $accent-color;
color: $text-over-accent-color;
max-height: 50px;
z-index: 2;
}
@ -33,7 +33,7 @@
&::after {
content: '';
position: absolute;
border-left: 3px solid #248aaa;
border-left: 3px solid $accent-color;
z-index: 1;
height: 100%;
left: 50%;
@ -48,7 +48,7 @@
height: 40px;
}
hr {
border-top: 3px solid #248aaa;
border-top: 3px solid $accent-color;
margin: 0;
top: 17px;
position: relative;
@ -58,7 +58,7 @@
overflow: hidden;
}
.corner {
border: 3px solid #248aaa;
border: 3px solid $accent-color;
width: 100%;
position: relative;
border-radius: 15px;

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

@ -1,19 +1,20 @@
.footer {
color: #8392a5 !important;
background-color: #1c2d41;
color: $muted-text-color !important;
background-color: $bg-primary-inverse;
position: relative;
z-index: 9999;
h5 {
color: #c0ccda;
color: $inverse-text-color;
}
a {
color: #8392a5;
transition: all 0.3s ease-out;
color: $muted-text-color;
@include transition();
&:hover {
margin-left: 5px;
transition: all 0.3s ease-out;
text-decoration: $muted-text-color underline;
@include transition();
}
}
@ -27,37 +28,42 @@
}
hr {
background-color: #8392a5;
background-color: $muted-text-color;
}
p:first-child {
color: #c0ccda;
color: $inverse-text-color;
}
input {
background-color: #c0ccda;
background-color: $inverse-text-color;
&:focus {
background-color: #e5e9f2;
background-color: $bg-secondary;
}
}
#disclaimer {
color: #8392a5 !important;
color: $muted-text-color !important;
text-align: justify;
& > strong {
color: #c0ccda !important;
color: $inverse-text-color !important;
}
}
#theme {
color: #c0ccda;
color: $inverse-text-color;
img {
width: 32px;
display: inline-block;
}
}
#hugo:hover {
margin-right: 5px;
transition: all 0.3s ease-out;
#hugo {
&:hover {
margin-right: 5px;
@include transition();
}
img {
display: inline-block;
}
}
}

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

@ -2,7 +2,7 @@
height: 100vh;
padding: 0;
margin: 0;
color: #f9fafc;
color: $text-over-accent-color;
overflow: hidden;
.background {
@ -16,12 +16,12 @@
filter: blur(3px);
background-size: cover;
}
.arrow-center {
display: flex;
justify-content: center;
}
/*
Resolves https://github.com/hugo-toha/toha/issues/70
@ -34,45 +34,46 @@
background-attachment: scroll;
}
}
.content {
position: relative;
top: -65%;
height: 60%;
}
img {
width: 148px;
height: 148px;
background-color: #e7e7ef;
background-color: $bg-secondary;
padding: 5px;
margin-bottom: 10px;
}
.greeting, .greeting-subtitle {
color: #f9fafc;
.greeting,
.greeting-subtitle {
color: $text-over-accent-color;
}
.typing-carousel {
font-size: 14pt;
color: #f0f0f0;
color: $text-over-accent-color;
}
#typing-carousel-data {
display: none;
}
.arrow {
position: absolute;
color: #f9fafc;
color: $text-over-accent-color;
font-size: 1.5rem;
bottom: 0;
}
.bounce {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,
20%,
@ -88,64 +89,22 @@
transform: translateY(-15px);
}
}
/* ============= Device specific fixes ======= */
/* Large screens such as TV */
@media only screen and (min-width: 1824px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1400px) {
}
@media (max-width: 1200px) {
}
/* IPad Pro */
@media (max-width: 1024px) {
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
}
/* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 768px) {
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
@include media('<=small') {
.content {
position: relative;
top: -75%;
height: 65%;
}
img {
width: 140px;
max-width: 50%;
height: auto;
}
.greeting {
font-size: 24pt;
}
}
/* iPhoneX, iPhone 6,7,8 */
@media only screen and (max-width: 375px) {
}
/* Galaxy S5, Moto G4 */
@media only screen and (max-width: 360px) {
}
/* iPhone 5 or before */
@media only screen and (max-width: 320px) {
}
}
}

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

@ -1,7 +1,7 @@
.projects-section {
.card {
.card-header {
background-color: #f9fafc;
background-color: $bg-card;
padding: 0.7rem;
padding-bottom: 0rem;
text-decoration: none;
@ -10,7 +10,7 @@
margin-right: 0.5rem;
}
.sub-title {
color: #8392a5;
color: $muted-text-color;
margin-top: 0.4rem;
span {

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

@ -2,12 +2,12 @@
@include section-title-adjustment();
.card {
background: #fff;
border-top: 2px solid #248aaa;
background: $bg-card;
border-top: 2px solid $accent-color;
&:hover,
&:focus {
border-top: 2px solid #248aaa;
border-top: 2px solid $accent-color;
}
.card-header {
@ -17,7 +17,7 @@
flex-direction: column;
.sub-title {
color: #8392a5;
color: $muted-text-color;
margin-top: 0.4rem;
span:nth-child(2) {
@ -33,7 +33,7 @@
}
.card-footer {
background: #fff;
background: $bg-card;
border: none;
padding: 0;
padding-left: 1rem;

2
assets/styles/sections/recent-posts.scss
View file

@ -16,7 +16,7 @@
width: 98%;
}
}
@include media('>=medium','<large') {
@include media('>=medium', '<large') {
.container {
max-width: 100%;
}

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

@ -5,12 +5,12 @@
height: 100%;
.card-head {
background-color: #f9fafc;
background-color: $bg-primary !important;
height: -moz-fit-content;
height: fit-content;
padding: 0.7rem;
padding-bottom: 0rem;
border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
border-bottom: 0.0625rem solid rgba($accent-color, 0.4);
.card-img-xs {
margin-right: 0.5rem;