kbe/hugo-mistergeek
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a pagination partial

Browse Source
This commit is contained in:
kbe
2025-08-18 17:15:47 +02:00
parent 7432ac7d4d
commit c5c947c5d7
4811 changed files with 410066 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
static/assets/css/scss/components/_fullscreen-menu.scss Normal file
View File

@@ -0,0 +1,171 @@
//
// Fullscreen Menu Styles //
//
.fm-toggle {
margin-left: auto;
cursor: pointer;
@include transition(ease-out 0.2s);
.lines {
position: relative;
display: inline-block;
background: black;
width: 25px;
height: 2px;
margin: 0;
padding: 0;
vertical-align: middle;
@include transition(linear 0.12s);
&:before, &:after {
content: '';
position: absolute;
left: 0;
background: black;
width: 25px;
height: 2px;
display: inline-block;
@include transition(linear 0.12s);
}
&:before { top: -7px;}
&:after { bottom: -7px;}
}
@include breakpoint-above(lg) {
.lines {
&:before { @include transform(scaleX(0.8)); @include transform-origin(100% 50%); }
&:after { @include transform(scaleX(0.6)); @include transform-origin(100% 50%); }
}
&:hover {
.lines {
&:before { @include transform(scaleX(1)); }
&:after { @include transform(scaleX(1)); }
}
}
}
}
.header {
&[class*='header-color'], &.transparent-light {
&:not(.transparent-dark) {
.fm-toggle {
.lines, .lines:before, .lines:after { background: white; }
}
}
}
}
//
// Fullscreen Menu //
//
.fullscreen-menu {
position: fixed;
top: 0;
left: 0;
z-index: 996;
visibility: hidden;
opacity: 0;
width: 100%;
height: 100%;
@include transition(ease-out 0.2s);
.fm-wrapper {
@include transform(scale(0.98));
height: 100%;
@include transition(ease-out 0.2s);
.position-top,
.position-middle,
.position-bottom {
padding: 0 30px;
}
@include breakpoint-above(md) {
.position-top,
.position-middle,
.position-bottom {
padding: 0 50px;
}
.position-top { top: 50px; }
.position-bottom { bottom: 50px; }
}
.fm-close {
position: absolute;
top: 50px;
right: 50px;
cursor: pointer;
span {
position: relative;
display: inline-block;
opacity: 0.8;
width: 60px;
height: 60px;
border-radius: 50%;
@include transition(ease-out 0.18s);
&:before, &:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
border-radius: 2px;
@include transition(ease-out 0.18s);
}
&:before { @include transform(translate(-50%, -50%) rotate(45deg)) }
&:after { @include transform(translate(-50%, -50%) rotate(-45deg)) }
}
&:hover {
span {
opacity: 1;
&:before { @include transform(translate(-50%, -50%) rotate(180deg)) }
&:after { @include transform(translate(-50%, -50%) rotate(180deg)) }
}
}
}
@include breakpoint-less(md) {
.fm-close {
top: 30px;
right: 30px;
}
}
@include breakpoint-less(sm) {
.fm-close {
top: 20px;
right: 20px;
span {
width: 50px;
height: 50px;
}
}
}
}
&.fm-show {
visibility: visible;
opacity: 1;
.fm-wrapper {
@include transform(scale(1));
}
}
}
.bg-black,
[class*='bg-dark'],
[class*='bg-gradient-'],
[class*='bg-color-'] {
&.fullscreen-menu {
.fm-wrapper {
.fm-close {
span {
background: get-color("white", 0.1);
&:before, &:after { background: white; }
}
}
}
}
}
[class*='bg-gray'],
[class*='bg-white'] {
&.fullscreen-menu {
.fm-wrapper {
.fm-close {
span {
background: get-color("dark", 0.1);
&:before, &:after { background: black; }
}
}
}
}
}