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

Refactor about section

Browse source 
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2023-08-03 13:34:12 +06:00
parent 6179b05fd5
commit 6eb8bf43dd
11 changed files with 450 additions and 469 deletions
Download patch file Download diff file Expand all files Collapse all files

53
assets/styles/components/buttons.scss
View file

@ -1,3 +1,56 @@
.btn-dark {
background-color: #3c4858 !important;
border-color: #3c4858 !important;
color: #e5e9f2 !important;
transition: all 0.3s ease-out !important;
&:hover,
&:focus {
background-color: #248aaa !important;
border-color: #248aaa !important;
transition: all 0.3s ease-out !important;
}
}
.btn-info {
background-color: #248aaa !important;
color: #e5e9f2 !important;
&:hover,
&:focus {
background-color: #2098d1 !important;
color: #e5e9f2 !important;
}
}
.btn-outline-info {
color: #2098d1 !important;
border-color: #2098d1 !important;
&:hover,
&:focus {
background-color: #2098d1 !important;
color: #e5e9f2 !important;
}
}
.btn-link {
color: #248aaa;
&:hover,
&:focus {
color: #207089;
}
}
.nav-button {
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #8392a5;
}
.tags { .tags {
text-align: left; text-align: left;

59
assets/styles/components/cards.scss
View file

@ -1,5 +1,43 @@
.card {
box-shadow: none;
transition: all 0.3s ease-out;
overflow: hidden;
&:hover,&:focus {
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
border: 1px solid #fff;
transition: all 0.3s ease-out;
}
.card-head{
height: 172px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.card-body {
text-align: justify;
}
.card-img-top {
transition: all 0.3s ease-out !important;
}
.card-img-sm {
width: 32px;
height: 32px;
}
.card-img-xs {
width: 24px;
height: 24px;
}
}
.post-card { .post-card {
width: calc(100% / 3); width: 24rem;
display: inline-flex; display: inline-flex;
.post-card-link { .post-card-link {
@ -9,35 +47,16 @@
.card { .card {
margin: 5px; margin: 5px;
position: relative; position: relative;
box-shadow: none;
transition: all 0.3s ease-out;
overflow: hidden;
&:hover, &:hover,
&:focus { &:focus {
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
border: 1px solid #fff;
transition: all 0.3s ease-out;
.card-img-top { .card-img-top {
transform: scale(1.2); transform: scale(1.2);
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
} }
.card-head {
height: 172px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
.card-img-top {
transition: all 0.3s ease-out !important;
}
}
.card-body { .card-body {
text-align: justify;
padding: 1.25rem !important; padding: 1.25rem !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;

8
assets/styles/layouts/list.scss
View file

@ -166,24 +166,24 @@ body.kind-page {
} }
} }
@include media('<=small') { @include media('<medium') {
.post-card { .post-card {
margin-left: 1%; margin-left: 1%;
margin-right: 1%; margin-right: 1%;
width: 98%; width: 98%;
} }
} }
@include media('>=medium') { @include media('>=medium','<large') {
.post-card { .post-card {
width: calc(100% / 2); width: calc(100% / 2);
} }
} }
@include media('>=large') { @include media('>=large','<very-large') {
.post-card { .post-card {
width: calc(100% / 3); width: calc(100% / 3);
} }
} }
@include media('>=very-large') { @include media('>=very-large','<extra-large') {
.post-card { .post-card {
width: calc(100% / 4); width: calc(100% / 4);
} }

103
assets/styles/layouts/main.scss
View file

@ -63,54 +63,7 @@ a:hover {
color: #207089; color: #207089;
} }
.nav-button {
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #8392a5;
}
.btn-dark {
background-color: #3c4858 !important;
border-color: #3c4858 !important;
color: #e5e9f2 !important;
transition: all 0.3s ease-out !important;
}
.btn-dark:hover,
.btn-dark:focus {
background-color: #248aaa !important;
border-color: #248aaa !important;
transition: all 0.3s ease-out !important;
}
.btn-outline-info {
color: #2098d1 !important;
border-color: #2098d1 !important;
}
.btn-outline-info:hover {
background-color: #2098d1 !important;
color: #e5e9f2 !important;
}
.btn-info {
background-color: #248aaa !important;
color: #e5e9f2 !important;
}
.btn-info:hover {
background-color: #2098d1 !important;
color: #e5e9f2 !important;
}
.btn-link {
color: #248aaa;
}
.btn-link:hover {
color: #207089;
}
.bg-white { .bg-white {
background-color: #f9fafc !important; background-color: #f9fafc !important;
@ -140,50 +93,6 @@ img.right {
margin-left: auto; margin-left: auto;
} }
// .card {
// box-shadow: none;
// transition: all 0.3s ease-out;
// overflow: hidden;
// }
.card-img-sm {
width: 32px;
height: 32px;
}
.card-img-xs {
width: 24px;
height: 24px;
}
// .card:hover,
// .card:focus {
// box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
// border: 1px solid #fff;
// transition: all 0.3s ease-out;
// }
// .card .card-head {
// height: 172px;
// display: flex;
// justify-content: center;
// align-items: center;
// overflow: hidden;
// }
// .card-img-top {
// transition: all 0.3s ease-out !important;
// }
// .card:hover .card-head .card-img-top,
// .card:focus .card-head .card-img-top {
// transition: all 0.3s ease-out;
// transform: scale(1.2);
// }
// .card-body {
// text-align: justify;
// }
.sub-title { .sub-title {
color: #c0ccda; color: #c0ccda;
@ -420,7 +329,17 @@ mark {
/* --- FOOTER END ---- */ /* --- FOOTER END ---- */
/* ============= Device specific fixes ======= */ /* ============= Media Query Template ======= */
@include media('<medium') {
}
@include media('>=medium','<large') {
}
@include media('>=large','<very-large') {
}
@include media('>=very-large','<extra-large') {
}
@include media('>=extra-large') {
}
/* Large screens such as TV */ /* Large screens such as TV */
@media only screen and (min-width: 1824px) { @media only screen and (min-width: 1824px) {

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

@ -1,20 +1,20 @@
#about { .about-section {
.social-link { .social-link {
list-style: none; list-style: none;
padding: 0.2rem; padding: 0.2rem;
a {
font-size: 1.5rem;
color: #3c4858;
padding: 0.5rem;
&:hover {
color: #248aaa;
transition: all 0.3s ease-in;
}
}
} }
.social-link a {
font-size: 1.5rem;
color: #3c4858;
padding: 0.5rem;
}
.social-link a:hover {
color: #248aaa;
transition: all 0.3s ease-in;
}
.circular-progress { .circular-progress {
width: 150px; width: 150px;
height: 150px; height: 150px;
@ -23,365 +23,330 @@
margin: 0 auto; margin: 0 auto;
box-shadow: none; box-shadow: none;
position: relative; position: relative;
}
&::after {
.circular-progress:after { content: '';
content: ""; width: 100%;
width: 100%; height: 100%;
height: 100%; border-radius: 50%;
border-radius: 50%; border: 12px solid #f9fafc;
border: 12px solid #f9fafc; position: absolute;
position: absolute; top: 0;
top: 0; left: 0;
left: 0;
}
.circular-progress > span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.circular-progress .circular-progress-left {
left: 0;
}
.circular-progress .circular-progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.circular-progress .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 .circular-progress-right {
right: 0;
}
.circular-progress .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 .circular-progress-value {
width: 90%;
height: 90%;
padding: 1rem;
border-radius: 50%;
background: #3c4858;
font-size: 1rem;
color: #f9fafc;
line-height: initial;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
display: flex;
justify-content: center;
align-items: center;
}
.circular-progress.blue .circular-progress-bar {
border-color: #048dff;
}
.circular-progress.yellow .circular-progress-bar {
border-color: #eebb4d;
}
.circular-progress.pink .circular-progress-bar {
border-color: #ed63d2;
}
.circular-progress.green .circular-progress-bar {
border-color: #2dca73;
}
.circular-progress.sky .circular-progress-bar {
border-color: #00c9e3;
}
.circular-progress.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% { span {
transform: rotate(0deg); width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.circular-progress-left {
left: 0;
}
.circular-progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
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-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-value {
width: 90%;
height: 90%;
padding: 1rem;
border-radius: 50%;
background: #3c4858;
font-size: 1rem;
color: #f9fafc;
line-height: initial;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
display: flex;
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);
}
} }
} }
@keyframes circular-loading-55 { @include media('<=large') {
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);
}
}
@media only screen and (max-width: 990px) {
.circular-progress { .circular-progress {
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
/* ============= Device specific fixes ======= */ @include media('<=medium') {
/* 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) {
.about-section.container { .about-section.container {
max-width: 100%; max-width: 100%;
} }
.circular-progress { .circular-progress {
width: 135px; width: 135px;
height: 135px; height: 135px;
} }
} }
@include media('<=small') {
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
.circular-progress { .circular-progress {
width: 150px; width: 150px;
height: 150px; height: 150px;
} }
.circular-progress .circular-progress-value { .circular-progress .circular-progress-value {
font-size: 1rem; font-size: 1rem;
} }
} }
@include media('<=tiny') {
/* 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) {
.col-6 { .col-6 {
flex: auto; flex: auto;
max-width: 100%; max-width: 100%;
} }
.social-link { .social-link {
flex-wrap: wrap; flex-wrap: wrap;
} }
} .certificate-badge {
} padding-left: 2rem;
padding-right: 2rem;
}
.circular-progress {
width: 200px;
height: 200px;
.circular-progress-left .circular-progress-bar {
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
}
.circular-progress-right .circular-progress-bar {
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
}
}
}

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

@ -8,14 +8,15 @@
padding-bottom: 55px; padding-bottom: 55px;
display: block; display: block;
} }
@include media('<=small') {
@include media('<medium') {
.post-card { .post-card {
margin-left: 1%; margin-left: 1%;
margin-right: 1%; margin-right: 1%;
width: 98%; width: 98%;
} }
} }
@include media('<=medium') { @include media('>=medium','<large') {
.container { .container {
max-width: 100%; max-width: 100%;
} }
@ -23,13 +24,9 @@
width: calc(100% / 2); width: calc(100% / 2);
} }
} }
@include media('<=large') { @include media('>=large') {
.post-card { .post-card {
width: calc(100% / 3); width: calc(100% / 3);
} }
} }
@include media('<=very-large') {
}
@include media('<=extra-large') {
}
} }

1
assets/styles/variables.scss
View file

@ -1,4 +1,5 @@
$breakpoints: ( $breakpoints: (
tiny: 320px,
small: 640px, small: 640px,
medium: 768px, medium: 768px,
large: 1024px, large: 1024px,

13
exampleSite/package-lock.json generated Normal file
View file

@ -0,0 +1,13 @@
{
"name": "exampleSite",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "exampleSite",
"version": "0.1.0",
"devDependencies": {}
}
}
}

4
exampleSite/package.hugo.json Normal file
View file

@ -0,0 +1,4 @@
{
"name": "exampleSite",
"version": "0.1.0"
}

10
exampleSite/package.json Normal file
View file

@ -0,0 +1,10 @@
{
"comments": {
"dependencies": {},
"devDependencies": {}
},
"dependencies": {},
"devDependencies": {},
"name": "exampleSite",
"version": "0.1.0"
}

2
layouts/partials/misc/badge.html
View file

@ -1,7 +1,7 @@
<div class="col-6 col-lg-4 p-2"> <div class="col-6 col-lg-4 p-2">
{{ if eq .type "certification" }} {{ if eq .type "certification" }}
{{/* Verifiable certificate badge from https://www.credly.com */}} {{/* Verifiable certificate badge from https://www.credly.com */}}
<div class=""> <div class="certificate-badge">
<a href="{{ .url }}" target="_blank" rel="noopener noreferrer"> <a href="{{ .url }}" target="_blank" rel="noopener noreferrer">
<img src="{{ .badge }}" alt="{{ .name }}" /> <img src="{{ .badge }}" alt="{{ .name }}" />
</a> </a>