log101/log101-dot-dev
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: add navigation styles

Browse Source
This commit is contained in:
log101 2023-12-07 09:45:21 +00:00
parent 52cefd37ca
commit ff7b02bda8
6 changed files with 155 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/scss/style.scss
View File

@ -151,7 +151,12 @@
padding: 0; /* Remove default padding */
margin: 0; /* Adjust margin as needed */
justify-content: center; /* Center the pagination items */
align-items: center;
font-family: Inter;
a {
text-decoration: none;
color: #252525;
}
}
.pagination .page-item {
@ -167,3 +172,15 @@
#site-footer {
width: 400px;
}
[aria-disabled="true"] {
text-decoration: none !important;
}
.page-item {
&.active {
a {
text-decoration: none !important;
}
}
}

5
layouts/_default/baseof.html
View File

@ -37,7 +37,10 @@
{{ block "header" . -}}{{ end -}}
{{ block "main" . -}}{{ end -}}
</div>
{{ block "footer" . -}}{{ end }}
<div id="site-footer">
{{ block "footer" . -}}{{ end }}
</div>
</div>
{{ $main := resources.Get "js/main.js" -}}

2
layouts/_default/list.html
View File

@ -20,10 +20,10 @@
</div>
</div>
{{ end }}
{{ template "_internal/pagination.html" . }}
</main>
{{ end }}
{{ define "footer" }}
{{ partial "pagination.html" . }}
{{ partial "footer.html" . }}
{{ end }}

131
layouts/partials/pagination.html Normal file
View File

@ -0,0 +1,131 @@
{{- $validFormats := slice "default" "terse" }}
{{- $msg1 := "When passing a map to the internal pagination template, one of the elements must be named 'page', and it must be set to the context of the current page." }}
{{- $msg2 := "The 'format' specified in the map passed to the internal pagination template is invalid. Valid choices are: %s." }}
{{- $page := . }}
{{- $format := "default" }}
{{- if reflect.IsMap . }}
{{- with .page }}
{{- $page = . }}
{{- else }}
{{- errorf $msg1 }}
{{- end }}
{{- with .format }}
{{- $format = lower . }}
{{- end }}
{{- end }}
{{- if in $validFormats $format }}
{{- if gt $page.Paginator.TotalPages 1 }}
<ul class="pagination pagination-{{ $format }}">
{{- partial (printf "partials/inline/pagination/%s" $format) $page }}
</ul>
{{- end }}
{{- else }}
{{- errorf $msg2 (delimit $validFormats ", ") }}
{{- end -}}
{{/* Format: default
{{/* --------------------------------------------------------------------- */}}
{{- define "partials/inline/pagination/default" }}
{{- with .Paginator }}
{{- $currentPageNumber := .PageNumber }}
{{- with .Prev }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="Previous" class="page-link" role="button"><span aria-hidden="true">⮜</span></a>
</li>
{{- else }}
<li class="page-item disabled">
<a aria-disabled="true" aria-label="Previous" class="page-link" role="button" tabindex="-1"><span aria-hidden="true">⮜</span></a>
</li>
{{- end }}
{{- $slots := 5 }}
{{- $start := math.Max 1 (sub .PageNumber (math.Floor (div $slots 2))) }}
{{- $end := math.Min .TotalPages (sub (add $start $slots) 1) }}
{{- if lt (add (sub $end $start) 1) $slots }}
{{- $start = math.Max 1 (add (sub $end $slots) 1) }}
{{- end }}
{{- range $k := seq $start $end }}
{{- if eq $.Paginator.PageNumber $k }}
<li class="page-item active">
<a aria-current="page" aria-label="Page {{ $k }}" class="page-link" role="button">{{ $k }}</a>
</li>
{{- else }}
<li class="page-item">
<a href="{{ (index $.Paginator.Pagers (sub $k 1)).URL }}" aria-label="Page {{ $k }}" class="page-link" role="button">{{ $k }}</a>
</li>
{{- end }}
{{- end }}
{{- with .Next }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="Next" class="page-link" role="button"><span aria-hidden="true">⮞</span></a>
</li>
{{- else }}
<li class="page-item disabled">
<a aria-disabled="true" aria-label="Next" class="page-link" role="button" tabindex="-1"><span aria-hidden="true">⮞</span></a>
</li>
{{- end }}
{{- end }}
{{- end -}}
{{/* Format: terse
{{/* --------------------------------------------------------------------- */}}
{{- define "partials/inline/pagination/terse" }}
{{- with .Paginator }}
{{- $currentPageNumber := .PageNumber }}
{{- with .First }}
{{- if ne $currentPageNumber .PageNumber }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="First" class="page-link" role="button"><span aria-hidden="true">&laquo;&laquo;</span></a>
</li>
{{- end }}
{{- end }}
{{- with .Prev }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="Previous" class="page-link" role="button"><span aria-hidden="true">&laquo;</span></a>
</li>
{{- end }}
{{- $slots := 3 }}
{{- $start := math.Max 1 (sub .PageNumber (math.Floor (div $slots 2))) }}
{{- $end := math.Min .TotalPages (sub (add $start $slots) 1) }}
{{- if lt (add (sub $end $start) 1) $slots }}
{{- $start = math.Max 1 (add (sub $end $slots) 1) }}
{{- end }}
{{- range $k := seq $start $end }}
{{- if eq $.Paginator.PageNumber $k }}
<li class="page-item active">
<a aria-current="page" aria-label="Page {{ $k }}" class="page-link" role="button">{{ $k }}</a>
</li>
{{- else }}
<li class="page-item">
<a href="{{ (index $.Paginator.Pagers (sub $k 1)).URL }}" aria-label="Page {{ $k }}" class="page-link" role="button">{{ $k }}</a>
</li>
{{- end }}
{{- end }}
{{- with .Next }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="Next" class="page-link" role="button"><span aria-hidden="true">&raquo;</span></a>
</li>
{{- end }}
{{- with .Last }}
{{- if ne $currentPageNumber .PageNumber }}
<li class="page-item">
<a href="{{ .URL }}" aria-label="Last" class="page-link" role="button"><span aria-hidden="true">&raquo;&raquo;</span></a>
</li>
{{- end }}
{{- end }}
{{- end }}
{{- end -}}

2
resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.content
View File

@ -1 +1 @@
#page{height:100vh;margin:0}#spotlight{display:flex;min-height:100vh;flex-direction:column;align-items:start;justify-content:space-between;max-width:400px;margin:auto;font-size:1.5rem}@media(max-width:448px){#spotlight{margin-left:24px}}#home-center{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;margin-top:10vh}#home-title{color:#202020;font-family:Inter;font-size:48px;font-style:normal;font-weight:500;line-height:normal}#home-nav{display:flex;flex-direction:column}#home-nav a{color:#252525;font-family:Inter;font-size:40px;font-style:normal;font-weight:400;line-height:150%;text-decoration-line:underline}.post-item .post-day,.post-item a{color:#252525;font-family:Inter;font-size:40px;font-style:normal;font-weight:400;line-height:150%;text-decoration-line:underline}#site-footer,#home-footer{width:100%}#site-footer p,#home-footer p{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center}#site-footer a,#home-footer a{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center;text-decoration:none}#site-footer a:hover,#home-footer a:hover{text-decoration:underline}.posts-group{width:400px}.back-title{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.back-title a{text-decoration:none;color:#252525}.back-title a:hover{text-decoration:underline;color:#151515}.post-item{display:flex;justify-content:space-between;align-items:center;width:100%}.post-item a{font-size:30px}.post-item .post-day{font-size:30px;text-decoration:none;color:#787878}.pagination{display:flex;list-style:none;padding:0;margin:0;justify-content:center;font-family:Inter}.pagination .page-item{margin:0}.pagination .page-link{display:block;padding:5px 10px;margin:0 2px}#site-footer{width:400px}
#page{height:100vh;margin:0}#spotlight{display:flex;min-height:100vh;flex-direction:column;align-items:start;justify-content:space-between;max-width:400px;margin:auto;font-size:1.5rem}@media(max-width:448px){#spotlight{margin-left:24px}}#home-center{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;margin-top:10vh}#home-title{color:#202020;font-family:Inter;font-size:48px;font-style:normal;font-weight:500;line-height:normal}#home-nav{display:flex;flex-direction:column}#home-nav a{color:#252525;font-family:Inter;font-size:40px;font-style:normal;font-weight:400;line-height:150%;text-decoration-line:underline}.post-item .post-day,.post-item a{color:#252525;font-family:Inter;font-size:40px;font-style:normal;font-weight:400;line-height:150%;text-decoration-line:underline}#site-footer,#home-footer{width:100%}#site-footer p,#home-footer p{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center}#site-footer a,#home-footer a{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center;text-decoration:none}#site-footer a:hover,#home-footer a:hover{text-decoration:underline}.posts-group{width:400px}.back-title{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.back-title a{text-decoration:none;color:#252525}.back-title a:hover{text-decoration:underline;color:#151515}.post-item{display:flex;justify-content:space-between;align-items:center;width:100%}.post-item a{font-size:30px}.post-item .post-day{font-size:30px;text-decoration:none;color:#787878}.pagination{display:flex;list-style:none;padding:0;margin:0;justify-content:center;align-items:center;font-family:Inter}.pagination a{text-decoration:none;color:#252525}.pagination .page-item{margin:0}.pagination .page-link{display:block;padding:5px 10px;margin:0 2px}#site-footer{width:400px}[aria-disabled=true]{text-decoration:none!important}.page-item.active a{text-decoration:none!important}

2
resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.json
View File

@ -1 +1 @@
{"Target":"css/style.min.dd07bb0d6a75bc893e253d7929db53d7b6973c27c5fa5672c5b491e607c2bd3c.css","MediaType":"text/css","Data":{"Integrity":"sha256-3Qe7DWp1vIk+JT15KdtT17aXPCfF+lZyxbSR5gfCvTw="}}
{"Target":"css/style.min.47c6d76a98c0536b40e5fcc553d9770c9361d646f05ac807bb6c59ffa7caa6c2.css","MediaType":"text/css","Data":{"Integrity":"sha256-R8bXapjAU2tA5fzFU9l3DJNh1kbwWsgHu2xZ/6fKpsI="}}