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

Update achievements section

Browse source 
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2023-09-21 23:13:25 +06:00
parent b36d258104
commit 3e20e2ffb2
2 changed files with 129 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -105,6 +105,10 @@ img.right {
margin-right: 3px;
}
.hidden {
display: none !important;
}
/* ====== table ====== */
table {
border-radius: 0.1rem;

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

@ -2,179 +2,132 @@
.container {
padding-top: 0.5rem;
}
h1 > span{
margin-top: -55px; /* Size of fixed header */
padding-bottom:55px;
display: block;
h1 > span {
margin-top: -55px; /* Size of fixed header */
padding-bottom: 55px;
display: block;
}
#gallery .achievement-entry {
cursor: pointer;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 7px;
margin-right: 7px;
z-index: 1;
background-color: #e5e9f2;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease-out;
}
#gallery .achievement-entry:hover {
cursor: pointer;
z-index: 1;
transform: scale(1.1);
transition: all 0.3s ease-out;
z-index: 20000;
}
#gallery .achievement-details {
cursor: pointer;
z-index: 1;
opacity: 1 !important;
transition: none !important;
transform: none !important;
}
#gallery .img-type-1 {
height: 300px;
}
#gallery .img-type-2 {
height: 146px;
margin-bottom: 8px;
}
#gallery .svg-inline--fa {
color: #8392a5;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
font-size: 0rem;
opacity: 0;
}
#gallery .achievement-entry:hover .svg-inline--fa {
opacity: 1;
font-size: 1rem;
transition: all 0.3s ease-out;
}
#gallery .img-type-1 .svg-inline--fa {
margin-top: 135px;
}
#gallery .img-type-2 .svg-inline--fa {
margin-top: 50px;
}
#gallery .achievement-details.img-type-1 .svg-inline--fa,
.achievement-details.img-type-2 .svg-inline--fa {
margin-top: 0px !important;
transition: none !important;
float: right;
}
#gallery .achievement-entry .title {
color: #e5e9f2;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
padding: 5px;
position: absolute;
bottom: 0px;
width: 100%;
margin-bottom: 0px;
bottom: -5px;
}
#gallery .achievement-entry:hover .title {
opacity: 1;
bottom: 0px;
transition: bottom 0.3s ease-out;
}
#gallery .caption {
background-color: rgba(0, 0, 0, 0.7);
bottom: 1rem;
left: 1rem;
color: #e5e9f2;
padding: 15px;
position: absolute;
transition: all 0.3s ease-out;
}
#gallery .caption h4 {
color: #e5e9f2;
}
#gallery .caption p {
font-size: 16px;
font-weight: 300;
color: #e5e9f2;
}
.hidden {
display: none !important;
}
#gallery .achievement-details {
height: 75vh !important;
}
/* ============= 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) {
.container {
max-width: 100%;
#gallery {
.achievement-entry {
margin-top: 5px;
margin-bottom: 5px;
margin-left: 7px;
margin-right: 7px;
z-index: 1;
background-color: #e5e9f2;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease-out;
.title {
color: #e5e9f2;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
padding: 5px;
position: absolute;
bottom: 0px;
width: 100%;
margin-bottom: 0px;
bottom: -5px;
}
&:hover {
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s ease-out;
z-index: 20000;
.svg-inline--fa {
opacity: 1;
font-size: 1rem;
transition: all 0.3s ease-out;
}
.title {
opacity: 1;
bottom: 0px;
transition: bottom 0.3s ease-out;
}
}
}
.col-md-6 {
flex: 50%;
width: 50%;
.achievement-details {
cursor: pointer;
z-index: 1;
height: 75vh !important;
opacity: 1 !important;
transition: none !important;
transform: none !important;
.img-type-1 .svg-inline--fa,
.img-type-2 .svg-inline--fa {
margin-top: 0px !important;
transition: none !important;
float: right;
}
}
.img-type-1 {
height: 300px;
.svg-inline--fa {
margin-top: 135px;
}
}
.img-type-2 {
height: 146px;
margin-bottom: 8px;
.svg-inline--fa {
margin-top: 50px;
}
}
.svg-inline--fa {
color: #8392a5;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
font-size: 0rem;
opacity: 0;
}
.caption {
background-color: rgba(0, 0, 0, 0.7);
bottom: 1rem;
left: 1rem;
color: #e5e9f2;
padding: 15px;
position: absolute;
transition: all 0.3s ease-out;
h4 {
color: #e5e9f2;
}
p {
font-size: 16px;
font-weight: 300;
color: #e5e9f2;
}
}
@include media('<=medium') {
.container {
max-width: 100%;
}
.col-md-6 {
flex: 50%;
width: 50%;
}
}
@include media('<=small') {
#gallery .achievement-entry:hover {
transform: scale(1.05);
}
}
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
#gallery .achievement-entry:hover {
transform: scale(1.05);
}
}
/* 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) {
}
}
}