forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1---
2import { themeConfig } from '@/config'
3---
4
5<a href="/" class="back-button">
6 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
7 <path
8 d="M2.5 6.5H9.5C11.1569 6.5 12.5 7.84315 12.5 9.5V9.5C12.5 11.1569 11.1569 12.5 9.5 12.5H7.5M2.5 6.5L5.5 9.5M2.5 6.5L5.5 3.5"
9 stroke="currentColor"
10 stroke-width="1.25"
11 stroke-linecap="round"
12 stroke-linejoin="round"></path>
13 </svg>
14 index
15</a>
16
17<script
18 is:inline
19 define:vars={{
20 contentWidth: themeConfig.general.contentWidth,
21 centeredLayout: themeConfig.general.centeredLayout,
22 toc: themeConfig.post.toc
23 }}
24>
25 ;(function () {
26 // Adjust back button position based on layout and screen size
27 function adjustBackButtonPosition() {
28 const button = document.querySelector('.back-button')
29 if (!button) return
30
31 // If not using centered layout, remove fixed positioning
32 if (!centeredLayout) {
33 button.classList.remove('fixed-position')
34 button.style.left = ''
35 return
36 }
37
38 // Calculate available margin space for positioning
39 const pageWidth = window.innerWidth
40 const contentWidthValue = parseFloat(contentWidth)
41 // Apply the same minimum width logic as in BaseLayout
42 const widthValue = Math.min(contentWidthValue, 50)
43 const shouldUseCustomWidth = widthValue > 25
44 const finalWidthValue = shouldUseCustomWidth ? widthValue : 25
45 const margin = (pageWidth - finalWidthValue * 16) / 2
46 const baseMinSpace = 11 * 16 // Base minimum space needed
47 // If toc is enabled, need additional 2.5rem (40px) space
48 const minSpace = toc ? baseMinSpace + 52 : baseMinSpace + 12
49
50 // Position button fixed on the left if there's enough space
51 if (margin >= minSpace) {
52 button.classList.add('fixed-position')
53 const basePosition = margin - baseMinSpace
54 // If toc is enabled, move 2.5rem (40px) further left
55 const leftPosition = toc ? basePosition - 40 : basePosition
56 button.style.left = `${leftPosition}px`
57 } else {
58 button.classList.remove('fixed-position')
59 button.style.left = ''
60 }
61 }
62
63 adjustBackButtonPosition()
64
65 // Use only astro:page-load as it fires on initial load and navigation
66 document.addEventListener('astro:page-load', adjustBackButtonPosition)
67 window.addEventListener('resize', adjustBackButtonPosition)
68 })()
69</script>
70
71<style>
72 .back-button {
73 width: 8rem;
74 display: inline-flex;
75 align-items: center;
76 gap: 0.375rem;
77 font-family: var(--serif);
78 font-size: var(--font-size-m);
79 font-style: italic;
80 letter-spacing: 0;
81 line-height: 1.75;
82 color: var(--text-secondary);
83 cursor: pointer;
84 border: none;
85 background-color: transparent;
86 position: relative;
87 margin-bottom: 2.5em;
88 padding: 0;
89 left: -0.175em;
90 transition: color 0.2s ease-out;
91 text-decoration: none;
92 }
93
94 .back-button:hover {
95 color: var(--text-primary);
96 }
97
98 @media (hover: none) and (pointer: coarse) {
99 .back-button:hover {
100 color: var(--text-secondary);
101 }
102 }
103
104 .back-button svg {
105 width: 0.8rem;
106 height: 0.8rem;
107 flex-shrink: 0;
108 }
109
110 .back-button.fixed-position {
111 position: fixed;
112 top: 6rem;
113 margin-bottom: 0;
114 padding-left: 0.75rem;
115 z-index: 10;
116 }
117</style>