style: add navigation styles
This commit is contained in:
parent
52cefd37ca
commit
ff7b02bda8
|
|
@ -151,7 +151,12 @@
|
||||||
padding: 0; /* Remove default padding */
|
padding: 0; /* Remove default padding */
|
||||||
margin: 0; /* Adjust margin as needed */
|
margin: 0; /* Adjust margin as needed */
|
||||||
justify-content: center; /* Center the pagination items */
|
justify-content: center; /* Center the pagination items */
|
||||||
|
align-items: center;
|
||||||
font-family: Inter;
|
font-family: Inter;
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #252525;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination .page-item {
|
.pagination .page-item {
|
||||||
|
|
@ -167,3 +172,15 @@
|
||||||
#site-footer {
|
#site-footer {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[aria-disabled="true"] {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item {
|
||||||
|
&.active {
|
||||||
|
a {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,10 @@
|
||||||
{{ block "header" . -}}{{ end -}}
|
{{ block "header" . -}}{{ end -}}
|
||||||
{{ block "main" . -}}{{ end -}}
|
{{ block "main" . -}}{{ end -}}
|
||||||
</div>
|
</div>
|
||||||
{{ block "footer" . -}}{{ end }}
|
<div id="site-footer">
|
||||||
|
{{ block "footer" . -}}{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ $main := resources.Get "js/main.js" -}}
|
{{ $main := resources.Get "js/main.js" -}}
|
||||||
|
|
|
||||||
|
|
@ -20,10 +20,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ template "_internal/pagination.html" . }}
|
|
||||||
</main>
|
</main>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "footer" }}
|
{{ define "footer" }}
|
||||||
|
{{ partial "pagination.html" . }}
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
131
layouts/partials/pagination.html
Normal file
131
layouts/partials/pagination.html
Normal 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">««</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">«</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">»</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">»»</span></a>
|
||||||
|
</li>
|
||||||
|
{{- end }}
|
||||||
|
{{- end }}
|
||||||
|
{{- end }}
|
||||||
|
{{- end -}}
|
||||||
|
|
@ -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}
|
||||||
|
|
@ -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="}}
|
||||||
Loading…
Reference in New Issue
Block a user