JOL/assets/css/sass/pagination.css
Jessica Canady 1bf44f3344
MEGACOMMIT: Ton of blog and layout work.
Mostly reimplementing the old Zola theme.
2024-07-30 11:46:47 -04:00

58 lines
1.3 KiB
CSS

.pagination {
margin-top: 50px; }
.pagination__title {
display: flex;
text-align: center;
position: relative;
margin: 100px 0 20px; }
.pagination__title-h {
text-align: center;
margin: 0 auto;
padding: 5px 10px;
background: var(--background);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .1em;
z-index: 1; }
.pagination__title hr {
position: absolute;
left: 0;
right: 0;
width: 100%;
margin-top: 15px;
z-index: 0; }
.pagination__buttons {
display: flex;
align-items: center;
justify-content: center; }
@media (max-width: 683px) {
.pagination__buttons {
flex-direction: column; } }
.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 8px;
max-width: 40%;
padding: 0;
cursor: pointer;
appearance: none; }
@media (max-width: 683px) {
.button {
max-width: 80%; } }
.button + .button {
margin-left: 10px; }
.button a {
display: flex;
padding: 8px 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; }
.button__text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; }