1 ---
2 import { SITE } from '@/config'
3 ---
4
5 <a
6 href="/"
7 class="inline-flex items-center gap-1 font-serif text-m italic leading-[1.75] text-food-brown hover:text-food-orange transition-colors w-32 mb-10 px-0 py-0 bg-transparent border-none no-underline"
8 >
9 <svg
10 width="16"
11 height="16"
12 viewBox="0 0 16 16"
13 fill="none"
14 xmlns="http://www.w3.org/2000/svg"
15 class="w-3 h-3 flex-shrink-0"
16 >
17 <path
18 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"
19 stroke="currentColor"
20 stroke-width="1.25"
21 stroke-linecap="round"
22 stroke-linejoin="round"></path>
23 </svg>
24 index
25 </a>
26
27 <script
28 is:inline
29 define:vars={{
30 contentWidth: SITE.contentWidth,
31 centeredLayout: SITE.centeredLayout,
32 toc: SITE.toc
33 }}
34 >
35 ;(function () {
36 // Adjust back button position based on layout and screen size
37 function adjustBackButtonPosition() {
38 const button = document.querySelector('.back-button')
39 if (!button) return
40
41 // If not using centered layout, remove fixed positioning
42 if (!centeredLayout) {
43 button.classList.remove('fixed-position')
44 button.style.left = ''
45 return
46 }
47
48 // Calculate available margin space for positioning
49 const pageWidth = window.innerWidth
50 const contentWidthValue = parseFloat(contentWidth)
51 const margin = (pageWidth - contentWidthValue * 16) / 2
52 const baseMinSpace = 11 * 16 // Base minimum space needed
53 // If toc is enabled, need additional 2.5rem (40px) space
54 const minSpace = toc ? baseMinSpace + 40 : baseMinSpace
55
56 // Position button fixed on the left if there's enough space
57 if (margin >= minSpace) {
58 button.classList.add('fixed-position')
59 const basePosition = margin - baseMinSpace
60 // If toc is enabled, move 2.5rem (40px) further left
61 const leftPosition = toc ? basePosition - 40 : basePosition
62 button.style.left = `${leftPosition}px`
63 } else {
64 button.classList.remove('fixed-position')
65 button.style.left = ''
66 }
67 }
68
69 adjustBackButtonPosition()
70
71 document.addEventListener('astro:page-load', () => {
72 adjustBackButtonPosition()
73 })
74 document.addEventListener('DOMContentLoaded', () => {
75 adjustBackButtonPosition()
76 })
77 window.addEventListener('resize', adjustBackButtonPosition)
78 })()
79 </script>
80
81 <!-- Tailwind utility classes are now used for styling. Custom CSS removed. -->