@smbcloud / solanastockholmmeetup
Code Commits Issues Pulls Cloud Agent CI/CD
main
dependabot/npm_and_yarn/eslint-9.39.1 dependabot/npm_and_yarn/eslint-plugin-astro-1.5.0 dependabot/npm_and_yarn/eslint/js-9.39.1 dependabot/npm_and_yarn/katex-0.16.25 dependabot/npm_and_yarn/sharp-0.34.5 dependabot/npm_and_yarn/tailwindcss/vite-4.1.17 dependabot/npm_and_yarn/tsx-4.20.6 dependabot/npm_and_yarn/typescript-eslint-8.46.4 dependabot/npm_and_yarn/typescript-eslint/eslint-plugin-8.36.0 dependabot/npm_and_yarn/typescript-eslint/parser-8.46.4 main
astro 111 lines 2.95 KB
Raw
1 ---
2 import { SITE } 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: SITE.contentWidth,
21 centeredLayout: SITE.centeredLayout,
22 toc: SITE.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 const margin = (pageWidth - contentWidthValue * 16) / 2
42 const baseMinSpace = 11 * 16 // Base minimum space needed
43 // If toc is enabled, need additional 2.5rem (40px) space
44 const minSpace = toc ? baseMinSpace + 40 : baseMinSpace
45
46 // Position button fixed on the left if there's enough space
47 if (margin >= minSpace) {
48 button.classList.add('fixed-position')
49 const basePosition = margin - baseMinSpace
50 // If toc is enabled, move 2.5rem (40px) further left
51 const leftPosition = toc ? basePosition - 40 : basePosition
52 button.style.left = `${leftPosition}px`
53 } else {
54 button.classList.remove('fixed-position')
55 button.style.left = ''
56 }
57 }
58
59 adjustBackButtonPosition()
60
61 document.addEventListener('astro:page-load', () => {
62 adjustBackButtonPosition()
63 })
64 document.addEventListener('DOMContentLoaded', () => {
65 adjustBackButtonPosition()
66 })
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(--font-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 .back-button svg {
99 width: 0.8rem;
100 height: 0.8rem;
101 flex-shrink: 0;
102 }
103
104 .back-button.fixed-position {
105 position: fixed;
106 top: 6rem;
107 margin-bottom: 0;
108 padding-left: 1rem;
109 z-index: 10;
110 }
111 </style>