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

Refactor list page css

Browse source 
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2023-09-27 00:03:46 +06:00
parent bd8c8f8af3
commit 99752a787a
1 changed files with 145 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,65 +9,161 @@ body.kind-page {
padding: 0; padding: 0;
margin: 0; margin: 0;
width: 100%; width: 100%;
.content-section {
flex: 80%;
order: 2;
/* background-color: lightseagreen; */
padding: 0;
position: relative;
padding-left: 0.5rem;
padding-right: 0.5rem;
.content {
padding: 0;
position: relative;
padding-top: 2rem;
min-height: 130vh;
.post-card-holder {
margin-top: 32px;
margin-left: auto;
padding: 0;
display: flex;
flex-flow: wrap;
}
.paginator {
width: -moz-fit-content;
width: fit-content;
margin: auto;
.pagination {
margin-left: auto;
margin-right: auto;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
width: -moz-fit-content;
width: fit-content;
}
.page-item {
& > a {
color: #248aaa;
}
&.active > a {
background-color: #248aaa;
color: #f9fafc;
}
}
}
}
}
} }
.content-section { @include media('<medium') {
flex: 80%; .post-card {
order: 2; margin-left: 1%;
/* background-color: lightseagreen; */ margin-right: 1%;
padding: 0; width: 98%;
position: relative; }
padding-left: 0.5rem; .wrapper {
padding-right: 0.5rem; padding-left: 0px;
padding-right: 0px;
flex-flow: column;
overflow: hidden;
.content-section {
flex: 100%;
max-width: 100%;
padding-left: 0;
width: 100%;
.content {
width: 100%;
padding-left: 0;
padding-right: 0;
transition: all ease-out 0.3s;
}
&.hide {
.content {
margin-top: 0;
padding-top: 0;
transition: all ease-out 0.3s;
}
.post-card-holder {
margin-top: 0.5rem;
transition: all ease-out 0.3s;
}
}
}
}
} }
.content { @include media('>=medium', '<large') {
padding: 0; .post-card {
position: relative; width: calc(100% / 2);
padding-top: 2rem; }
min-height: 130vh; .content-section.hide {
.post-card {
width: 100%;
}
}
} }
.post-card-holder { @include media('>=large', '<very-large') {
margin-top: 32px; .post-card {
margin-left: auto; width: calc(100% / 3);
padding: 0; }
display: flex; .wrapper {
flex-flow: wrap; padding-left: 0px;
padding-right: 0px;
.content-section {
padding: 0;
flex: 60%;
order: 2;
padding-bottom: 0.5rem;
.content {
overflow: hidden;
.post-card-holder {
margin: 0;
margin-top: 1.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
position: relative;
transition: all ease-out 0.3s;
}
}
.container {
max-width: 100%;
}
&.hide {
.post-card {
width: calc(100% / 2);
}
}
}
}
} }
.paginator { @include media('>=very-large', '<extra-large') {
width: -moz-fit-content; .post-card {
width: fit-content; width: calc(100% / 4);
margin: auto; }
.post-card-holder {
margin-left: 0px;
}
} }
.paginator .page-item > a { @include media('>=extra-large') {
color: #248aaa; .post-card {
} width: calc(100% / 5);
}
.paginator .page-item.active > a {
background-color: #248aaa;
color: #f9fafc;
}
.navbar-toggler {
display: none;
}
.pagination {
margin-left: auto;
margin-right: auto;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
width: -moz-fit-content;
width: fit-content;
}
/* ============= Device specific fixes ======= */
/* Large screens such as TV */
@media only screen and (min-width: 1824px) {
.content-section { .content-section {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
@ -75,117 +171,4 @@ body.kind-page {
max-width: 85%; max-width: 85%;
} }
} }
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1400px) {
.post-card-holder {
margin-left: 0px;
}
}
@media (max-width: 1200px) {
}
/* IPad Pro */
@media (max-width: 1024px) {
.wrapper {
padding-left: 0px;
padding-right: 0px;
}
.content-section {
padding: 0;
flex: 60%;
order: 2;
padding-bottom: 0.5rem;
}
.content {
overflow: hidden;
}
.container {
max-width: 100%;
}
.navbar-toggler {
display: block;
}
.navbar-collapse.lang-selector {
display: block !important;
position: absolute;
right: 0;
top: 0.5rem;
}
.post-card-holder {
margin: 0;
margin-top: 1.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
position: relative;
transition: all ease-out 0.3s;
}
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
.wrapper {
padding-left: 0px;
padding-right: 0px;
flex-flow: column;
overflow: hidden;
}
.content-section {
flex: 100%;
max-width: 100%;
padding-left: 0;
width: 100%;
}
.content {
width: 100%;
padding-left: 0;
padding-right: 0;
transition: all ease-out 0.3s;
}
.content-section.hide .content {
margin-top: 0;
padding-top: 0;
transition: all ease-out 0.3s;
}
.content-section.hide .post-card-holder {
margin-top: 0.5rem;
transition: all ease-out 0.3s;
}
}
@include media('<medium') {
.post-card {
margin-left: 1%;
margin-right: 1%;
width: 98%;
}
}
@include media('>=medium', '<large') {
.post-card {
width: calc(100% / 2);
}
}
@include media('>=large', '<very-large') {
.post-card {
width: calc(100% / 3);
}
}
@include media('>=very-large', '<extra-large') {
.post-card {
width: calc(100% / 4);
}
}
@include media('>=extra-large') {
.post-card {
width: calc(100% / 5);
}
}
} }