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 document.addEventListener('astro:page-load', () => {
66 adjustBackButtonPosition()
67 })
68 document.addEventListener('DOMContentLoaded', () => {
69 adjustBackButtonPosition()
70 })
71 window.addEventListener('resize', adjustBackButtonPosition)
72 })()
73</script>
74
75<style>
76 .back-button {
77 width: 8rem;
78 display: inline-flex;
79 align-items: center;
80 gap: 0.375rem;
81 font-family: var(--serif);
82 font-size: var(--font-size-m);
83 font-style: italic;
84 letter-spacing: 0;
85 line-height: 1.75;
86 color: var(--text-secondary);
87 cursor: pointer;
88 border: none;
89 background-color: transparent;
90 position: relative;
91 margin-bottom: 2.5em;
92 padding: 0;
93 left: -0.175em;
94 transition: color 0.2s ease-out;
95 text-decoration: none;
96 }
97
98 .back-button:hover {
99 color: var(--text-primary);
100 }
101
102 @media (hover: none) and (pointer: coarse) {
103 .back-button:hover {
104 color: var(--text-secondary);
105 }
106 }
107
108 .back-button svg {
109 width: 0.8rem;
110 height: 0.8rem;
111 flex-shrink: 0;
112 }
113
114 .back-button.fixed-position {
115 position: fixed;
116 top: 6rem;
117 margin-bottom: 0;
118 padding-left: 0.75rem;
119 z-index: 10;
120 }
121</style>