/* 手機顯示修正（2026-09-24 v11）只在螢幕寬度 768px 以下生效，電腦版完全不受影響。不滿意：把這個檔刪掉、或把頁面從 _腳本/mobile_pages.txt 拿掉再重跑 build_site.py。不改 HTML 結構，只覆蓋舊主題固定 960px 的寬度與過小的字。 */ /* 手機頂部列（build_site.py 插入）：電腦版不顯示 */ .m-topbar, .m-nav-toggle { display: none; } @media (max-width: 768px) { .m-nav-toggle { position: absolute; opacity: 0; pointer-events: none; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 字型：仿 Weebly 手機版改黑體（電腦版仍是 Georgia／明體）。不要的話刪掉這兩行 */ body, #wsite-content .paragraph, #wsite-content p, #wsite-content li, #wsite-content h2, #wsite-content blockquote, #navigation li a, #footer { font-family: "Open Sans", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif !important; } body { font-size: 16px; } /* 主容器：固定 960px → 跟著螢幕寬 */ #container { width: auto !important; max-width: 100%; margin: 0; } #content { padding: 16px 14px; min-height: 0; } /* 頁首（2026-09-25 改）：仿 Weebly 手機版 → 白色頂部列（左漢堡選單、中間站名），原本的 logo＋連絡我們收起（Facebook／信箱圖示頁尾還有一組）。頂部列 HTML 由 build_site.py 第 16 步插在後面 */ #header-wrap { display: none; } /* 頂部列和橫幅之間原本露出 5px 咖啡色（#main 的 padding-top，主題底色）→ 手機上拿掉，只留頂部列下緣一條細線（2026-09-25） */ #main { padding-top: 0 !important; } .m-topbar { display: flex; align-items: center; position: sticky; top: 0; z-index: 1000; height: 56px; background: #fff; border-bottom: 1px solid #ddd; box-sizing: border-box; } .m-burger { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .m-burger span, .m-burger span::before, .m-burger span::after { display: block; width: 22px; height: 3px; background: #EF7C24; border-radius: 2px; position: relative; transition: transform .2s; } .m-burger span::before, .m-burger span::after { content: ""; position: absolute; left: 0; } .m-burger span::before { top: -7px; } .m-burger span::after { top: 7px; } .m-title { flex: 1; margin-right: 56px; text-align: center; font-size: 22px; letter-spacing: 1px; color: #58595B !important; font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 選單：平常收起，點漢堡才展開（蓋在頁面上方、一行一項），漢堡變成 × */ #navigation { display: none; } .m-nav-toggle:checked ~ #container #navigation { display: block; position: fixed; top: 56px; left: 0; right: 0; z-index: 999; max-height: calc(100vh - 56px); overflow-y: auto; box-shadow: 0 6px 12px rgba(0,0,0,.15); } .m-nav-toggle:checked ~ .m-topbar .m-burger span { background: transparent; } .m-nav-toggle:checked ~ .m-topbar .m-burger span::before { transform: translateY(7px) rotate(45deg); } .m-nav-toggle:checked ~ .m-topbar .m-burger span::after { transform: translateY(-7px) rotate(-45deg); } #navigation ul { padding: 0; text-align: left; } #navigation li, #navigation li.wsite-menu-item-wrap { float: none; display: block !important; border-bottom: 1px solid #eadfcc; } #navigation li a { float: none; display: block; padding: 16px 20px; font-size: 17px; border-right: 0; } /* Weebly 的程式會把放不下的項目收進「更多...」下拉 → 不用 */ #navigation li.wsite-nav-more { display: none !important; } /* 頁首橫幅：原本是 960×339 的背景圖，手機上只露出左邊 → 按比例縮小、完整顯示 */ #banner .wsite-header { background-size: 100% auto !important; background-repeat: no-repeat; background-position: center top; height: auto !important; aspect-ratio: 960 / 339; } /* 頁首橫幅是 Weebly 輪播（wslide，例如課程介紹頁）：程式寫死 960px 寬、高 269px、圖片用負 left 置中 → 手機上改成圖片等比縮到螢幕寬（輪播切換照舊，由原本的程式控制） */ #banner .wslide { height: auto !important; aspect-ratio: auto; } #banner .wslide-main, #banner .wslide-main td { display: block; width: 100% !important; } #banner .wslide-content { height: auto !important; font-size: 0; line-height: 0; } #banner .wslide-content-inner, #banner .wslide-slides, #banner .wslide-slide, #banner .wslide-slide-inner1 { position: relative !important; width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; overflow: visible; } #banner .wslide-slide-inner2 { position: static !important; width: 100% !important; left: 0 !important; top: 0 !important; margin: 0 !important; } #banner .wslide-slide-inner2 img { width: 100% !important; height: auto !important; display: block; } #banner .wslide-slide-inner2 img { max-width: 100% !important; } /* Weebly 多欄版面（表格排的左右欄）→ 上下排 */ .wsite-multicol-table-wrap { margin: 0 !important; } .wsite-multicol-table, .wsite-multicol-tbody, .wsite-multicol-tr, .wsite-multicol-col { display: block; width: 100% !important; box-sizing: border-box; } .wsite-multicol-col { padding: 0 !important; } .wsite-spacer { display: none; } /* Weebly「圖文並排」元件：圖片外框用 float 靠左／右、寫死 width（例如 317px），手機上把文字擠成一條 → 取消浮動，圖片獨占一行置中、等比縮小，文字接在下面（HTML 裡圖片寫在文字前，所以圖在上） */ #wsite-content span[style*="float"]:not(.imgPusher), #wsite-content div[style*="float"]:not(.blog-body) { float: none !important; display: block !important; width: auto !important; max-width: 100% !important; margin: 10px auto !important; text-align: center; } #wsite-content span.wsite-caption { display: block !important; } #wsite-content img.wsite-image, #wsite-content img.galleryImageBorder, #wsite-content img.galleryImageBorderBlack { margin-left: auto !important; margin-right: auto !important; } /* 部落格：文章＋右側欄 → 上下排 */ .blog-body, .column-blog, #wsite-content .blog-sidebar { float: none !important; width: auto !important; } /* 部落格頁外層是 #blogTable 表格（文章一格、側欄一格、table-layout:fixed）→ 拆成上下排 */ #blogTable, #blogTable tbody, #blogTable tr, #blogTable td { display: block; width: 100% !important; box-sizing: border-box; } #blogTable td.blog-sidebar { padding: 24px 0 0 !important; border-top: 1px solid #eee; margin-top: 16px; } /* 舊頁面寫死寬度的表格（例如 width="850"） */ #wsite-content table[width], #wsite-content td[width] { width: auto !important; } #wsite-content table { table-layout: auto; } /* Weebly「表格」元件（simple-table）預設（2026-09-25 改）：手機上維持表格，像 Weebly 手機版一樣縮小字級與格子內距，5 欄在 390 寬放得下例外：表頭全是「第X天」的活動表（build_site.py 第 12f 步加 class m-stack）→ 上下排：第一天表頭 → 第一天內容 → 第二天表頭 → …（用 grid 的 order 重排，不改 HTML） */ #wsite-content .simple-table-wrapper { padding: 12px 0 !important; } #wsite-content .simple-table:not(.m-stack) { width: 100% !important; table-layout: auto !important; } #wsite-content .simple-table:not(.m-stack) td.cell { width: auto !important; word-break: break-word; overflow-wrap: anywhere; } #wsite-content .simple-table:not(.m-stack) td.cell .paragraph { width: auto !important; margin: 0 4px !important; padding-top: 6px !important; padding-bottom: 6px !important; } /* 縮字級只給 3 欄以上的表格（build_site.py 第 12f 步加 class m-wide）；單格、2 欄的框框維持正常字級（2026-09-26） */ #wsite-content .simple-table.m-wide td.cell .paragraph { font-size: 13px !important; line-height: 1.5 !important; } #wsite-content .simple-table.m-wide td.cell .paragraph font[size], #wsite-content .simple-table.m-wide td.cell .paragraph li { font-size: 13px !important; } #wsite-content .simple-table:not(.m-stack) td.cell .paragraph ul { padding-left: 16px; margin: 0; } #wsite-content .simple-table.m-stack { display: block; border: 0; } #wsite-content .simple-table.m-stack tbody { display: grid; grid-template-columns: 100%; } #wsite-content .simple-table.m-stack tr { display: contents; } #wsite-content .simple-table.m-stack td.cell { display: block; width: auto !important; border-right: 0 !important; border-bottom: 0 !important; } #wsite-content .simple-table.m-stack tr:first-child td.cell { border-radius: 6px 6px 0 0; margin-top: 12px; } #wsite-content .simple-table.m-stack tr:first-child td.cell .paragraph { padding: 8px 0; } #wsite-content .simple-table.m-stack td.cell .paragraph ul { margin: 0; padding-left: 22px; } #wsite-content .simple-table.m-stack tr:first-child td:nth-child(1) { order: 1; } #wsite-content .simple-table.m-stack tr:nth-child(2) td:nth-child(1) { order: 2; } #wsite-content .simple-table.m-stack tr:first-child td:nth-child(2) { order: 3; } #wsite-content .simple-table.m-stack tr:nth-child(2) td:nth-child(2) { order: 4; } #wsite-content .simple-table.m-stack tr:first-child td:nth-child(3) { order: 5; } #wsite-content .simple-table.m-stack tr:nth-child(2) td:nth-child(3) { order: 6; } #wsite-content .simple-table.m-stack tr:first-child td:nth-child(4) { order: 7; } #wsite-content .simple-table.m-stack tr:nth-child(2) td:nth-child(4) { order: 8; } #wsite-content .simple-table.m-stack tr:first-child td:nth-child(5) { order: 9; } #wsite-content .simple-table.m-stack tr:nth-child(2) td:nth-child(5) { order: 10; } #wsite-content .simple-table.m-stack tr:nth-child(n+3) td { order: 99; } /* 正文字級與行高 */ #wsite-content .paragraph, #wsite-content li, #wsite-content blockquote { font-size: 16px; line-height: 1.75; } #wsite-content font[size="2"] { font-size: 14px; } #wsite-content h2 { line-height: 1.4; } /* 標題（2026-09-25）：課程標題等 h2 從主題的 22px 縮到 18px（約同 Weebly 手機版）；h2 裡的 24px→20px。顏色不動 */ #wsite-content h2 { font-size: 18px !important; } #wsite-content h2 font[size="5"] { font-size: 20px !important; } /* 主標題（build 第 16 步在內文第一個加 .m-title-main 並寫入第一行字數 --n）：依字數縮到一行放得下，32px 到 22px 之間； 22px 還放不下的（.m-title-long）改 26px、兩行平均換行 */ #wsite-content font.m-title-main { font-size: clamp(22px, calc((100vw - 34px) / var(--n)), 32px) !important; line-height: 1.35; } #wsite-content font.m-title-long { font-size: 26px !important; } #wsite-content font.m-title-main font { font-size: inherit !important; } /* 圖片、影片不超出螢幕（橫向滑動相簿的圖維持原本固定高度，不動） */ #wsite-content img:not([style*="scroll-snap-align"]), #banner img { max-width: 100% !important; height: auto !important; } #wsite-content iframe { max-width: 100%; } #wsite-content table { max-width: 100%; } .wsite-image { margin-left: 0 !important; margin-right: 0 !important; } /* 圖片外框寫死 text-align:right／left（例如課程介紹頁的課程圖）→ 手機上置中，跟 Weebly 手機版一樣 */ #wsite-content .wsite-image { text-align: center !important; } span.imgPusher { display: none !important; } /* 頁尾 */ #footer { padding: 16px 14px; text-align: left; margin-bottom: 0; } }