diff options
Diffstat (limited to 'assets/css/pages')
29 files changed, 901 insertions, 0 deletions
diff --git a/assets/css/pages/404.css b/assets/css/pages/404.css new file mode 100644 index 0000000..7939cc1 --- /dev/null +++ b/assets/css/pages/404.css @@ -0,0 +1,12 @@ +/* Minimal fallback if CSS fails to load */ + body{margin:0;background:#ffd;color:#000;font-family:system-ui,Segoe UI,Arial,sans-serif;line-height:1.6;} + .wrap{max-width:960px;margin:0 auto;padding:1.35rem 1rem 2.5rem;} + .card{border:1px solid #caa;border-radius:6px;padding:1rem;background:#ffd;} + .top{display:flex;gap:12px;align-items:center;margin-bottom:1rem;} + .top img{width:48px;height:48px;border:2px solid #000;border-radius:6px;} + .top a:hover img{border-color:#d22;} + a{color:#d22;text-decoration:none;transition:0.1s;} + a:hover{background:#d22;color:#000 !important;} + .muted{color:#333;font-size:.9rem;} + .links{margin:1rem 0 0 0;} + .links a{display:inline-block;margin:0 .25rem .5rem 0;padding:2px 4px;border-radius:4px;} diff --git a/assets/css/pages/50x.css b/assets/css/pages/50x.css new file mode 100644 index 0000000..cc573de --- /dev/null +++ b/assets/css/pages/50x.css @@ -0,0 +1,9 @@ +body{margin:0;background:#ffd;color:#000;font-family:system-ui,Segoe UI,Arial,sans-serif;line-height:1.6;} + .wrap{max-width:960px;margin:0 auto;padding:1.35rem 1rem 2.5rem;} + .card{border:1px solid #caa;border-radius:6px;padding:1rem;background:#ffd;} + .top{display:flex;gap:12px;align-items:center;margin-bottom:1rem;} + .top img{width:48px;height:48px;border:2px solid #000;border-radius:6px;} + .top a:hover img{border-color:#d22;} + a{color:#d22;text-decoration:none;transition:0.1s;} + a:hover{background:#d22;color:#000 !important;} + .muted{color:#333;font-size:.9rem;} diff --git a/assets/css/pages/articles-2023-04-10.css b/assets/css/pages/articles-2023-04-10.css new file mode 100644 index 0000000..1818de4 --- /dev/null +++ b/assets/css/pages/articles-2023-04-10.css @@ -0,0 +1 @@ +kbd{ border:1px solid var(--border); border-radius:4px; padding:0 6px; background: #fff; } diff --git a/assets/css/pages/articles-2023-04-10_jp.css b/assets/css/pages/articles-2023-04-10_jp.css new file mode 100644 index 0000000..1818de4 --- /dev/null +++ b/assets/css/pages/articles-2023-04-10_jp.css @@ -0,0 +1 @@ +kbd{ border:1px solid var(--border); border-radius:4px; padding:0 6px; background: #fff; } diff --git a/assets/css/pages/articles-2023-04-10_zh.css b/assets/css/pages/articles-2023-04-10_zh.css new file mode 100644 index 0000000..1818de4 --- /dev/null +++ b/assets/css/pages/articles-2023-04-10_zh.css @@ -0,0 +1 @@ +kbd{ border:1px solid var(--border); border-radius:4px; padding:0 6px; background: #fff; } diff --git a/assets/css/pages/articles-runescape.css b/assets/css/pages/articles-runescape.css new file mode 100644 index 0000000..1818de4 --- /dev/null +++ b/assets/css/pages/articles-runescape.css @@ -0,0 +1 @@ +kbd{ border:1px solid var(--border); border-radius:4px; padding:0 6px; background: #fff; } diff --git a/assets/css/pages/articles-runescape_jp.css b/assets/css/pages/articles-runescape_jp.css new file mode 100644 index 0000000..1818de4 --- /dev/null +++ b/assets/css/pages/articles-runescape_jp.css @@ -0,0 +1 @@ +kbd{ border:1px solid var(--border); border-radius:4px; padding:0 6px; background: #fff; } diff --git a/assets/css/pages/articles-runescape_zh.css b/assets/css/pages/articles-runescape_zh.css new file mode 100644 index 0000000..1818de4 --- /dev/null +++ b/assets/css/pages/articles-runescape_zh.css @@ -0,0 +1 @@ +kbd{ border:1px solid var(--border); border-radius:4px; padding:0 6px; background: #fff; } diff --git a/assets/css/pages/bookmarks.css b/assets/css/pages/bookmarks.css new file mode 100644 index 0000000..945b771 --- /dev/null +++ b/assets/css/pages/bookmarks.css @@ -0,0 +1,61 @@ +.bookmarks-title{ + margin-bottom: var(--space-md); +} + +.tree{ list-style-type: none; padding-left: 0; margin: 0; } + +.tree ul{ list-style-type: none; padding-left: 28px; margin: 5px 0; } + +.tree li{ margin: 4px 0; position: relative; } + +.tree summary{ + display: flex; + align-items: center; + cursor: pointer; + padding: 8px 12px; + transition: background-color 0.2s ease; + font-weight: 600; + outline: none; + user-select: none; + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--r); +} + +.tree summary:hover{ background-color: #fdd; border-color: var(--accent); } + +.tree summary::-webkit-details-marker{ display: none; } + +.tree summary::before{ + content: ">"; + color: var(--ink); + margin-right: 10px; + font-size: 1rem; + transition: all 0.2s ease; + width: 20px; + text-align: left; + font-weight: 700; +} + +.tree details[open] > summary::before{ content: ">"; transform: rotate(90deg); } + +.tree a{ + color: var(--ink); + text-decoration: none; + display: inline-flex; + align-items: center; + padding: 6px 6px; + border-radius: 4px; +} + +.tree a:hover{ background: var(--accent); color: #000 !important; } + + +.tree .navbar-file a{ color: var(--muted); } + +.tree .navbar-file a::before{ + content: "->"; + color: var(--muted); + margin-right: 10px; + font-size: 0.9rem; +} diff --git a/assets/css/pages/changelog.css b/assets/css/pages/changelog.css new file mode 100644 index 0000000..78b2ff4 --- /dev/null +++ b/assets/css/pages/changelog.css @@ -0,0 +1,19 @@ +.changelog-list{ list-style: none; padding: 0; margin: 0; } + +.changelog-entry{ + display: grid; + grid-template-columns: 12ch 1fr; + gap: var(--space-lg); + padding: var(--space-md) 0; + border-bottom: 1px dotted rgba(0,0,0,.25); +} + +.changelog-entry:last-child{ border-bottom: none; } + +.changelog-entry time{ font-weight: 700; color: var(--ink); white-space: nowrap; } + +.changelog-entry .text{ color: var(--muted); } + +@media (max-width: 560px){ + .changelog-entry{ grid-template-columns: 1fr; } +} diff --git a/assets/css/pages/computers.css b/assets/css/pages/computers.css new file mode 100644 index 0000000..ec7d01f --- /dev/null +++ b/assets/css/pages/computers.css @@ -0,0 +1,29 @@ +.machine{ + border: 1px solid var(--ink); + padding: var(--space-md); + margin-top: var(--space-md); + background: var(--bg); + display: grid; + grid-template-columns: 150px auto 150px; + gap: var(--space-md); + align-items: start; +} + +.machine img{ + width: 100%; + height: auto; + border: 1px solid var(--ink); +} + +.machine-info{ font-size: var(--fs-base); } + +.machine-title{ + color: var(--gold); + font-weight: 700; + font-size: var(--fs-lg); + margin-bottom: var(--space-xs); +} + +@media (max-width: 720px){ + .machine{ grid-template-columns: 1fr; } +} diff --git a/assets/css/pages/guestbook-form.css b/assets/css/pages/guestbook-form.css new file mode 100644 index 0000000..b45feaa --- /dev/null +++ b/assets/css/pages/guestbook-form.css @@ -0,0 +1,51 @@ +/* Pure light theme — NO container, NO black */ +body { + background: transparent; + margin: 0; + padding: 10px; + font-family: "Source Code Pro", monospace; + color: #3a2a00; + overflow-y: auto; + overflow-x: hidden; + /* Hide scrollbar for Chrome, Safari and Opera */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} +body::-webkit-scrollbar { + width: 0; + height: 0; +} + +/* Remove all container styling */ +form { + max-width: 900px; + margin: 0 auto; +} + +/* Slight spacing between form and messages */ +form { + margin-bottom: 20px; +} + +input[type="text"], textarea { + border: 1px solid transparent; + background: transparent; + color: #3a2a00; + font: inherit; + box-sizing: border-box; /* Include padding in width */ + margin-bottom: 10px; +} + +textarea { + resize: vertical; +} + +button { + background: transparent; + border: 1px solid transparent; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; + font: inherit; + color: #3a2a00; +} diff --git a/assets/css/pages/guestbook_jp.css b/assets/css/pages/guestbook_jp.css new file mode 100644 index 0000000..bd71cb5 --- /dev/null +++ b/assets/css/pages/guestbook_jp.css @@ -0,0 +1,29 @@ +.anonymous { color: #0a0; } + .error { color: var(--accent); } + .captcha { font-weight: 700; font-size: 20px; } + form { display: grid; gap: var(--space-sm); max-width: 640px; } + label { font-weight: 600; } + input[type="text"], textarea { + width: 100%; + padding: 10px; + border: 1px solid var(--border); + border-radius: var(--r); + background: var(--bg); + color: var(--ink); + font: inherit; + } + textarea { min-height: 120px; resize: vertical; } + .btn-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; } + button { + border: 1px solid var(--border); + border-radius: var(--r); + background: var(--bg); + padding: 8px 12px; + cursor: pointer; + font: inherit; + } + button:hover { background: #fdd; border-color: var(--accent); } + .entry { border-top: 1px dotted rgba(0,0,0,.25); padding-top: var(--space-md); margin-top: var(--space-md); } + .entry h4 { margin: 0 0 var(--space-xs) 0; } + .entry p { margin: 0; color: var(--muted); } + #captcha-canvas { border: 1px solid var(--border); border-radius: var(--r); background: #fff; } diff --git a/assets/css/pages/guestbook_zh.css b/assets/css/pages/guestbook_zh.css new file mode 100644 index 0000000..bd71cb5 --- /dev/null +++ b/assets/css/pages/guestbook_zh.css @@ -0,0 +1,29 @@ +.anonymous { color: #0a0; } + .error { color: var(--accent); } + .captcha { font-weight: 700; font-size: 20px; } + form { display: grid; gap: var(--space-sm); max-width: 640px; } + label { font-weight: 600; } + input[type="text"], textarea { + width: 100%; + padding: 10px; + border: 1px solid var(--border); + border-radius: var(--r); + background: var(--bg); + color: var(--ink); + font: inherit; + } + textarea { min-height: 120px; resize: vertical; } + .btn-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; } + button { + border: 1px solid var(--border); + border-radius: var(--r); + background: var(--bg); + padding: 8px 12px; + cursor: pointer; + font: inherit; + } + button:hover { background: #fdd; border-color: var(--accent); } + .entry { border-top: 1px dotted rgba(0,0,0,.25); padding-top: var(--space-md); margin-top: var(--space-md); } + .entry h4 { margin: 0 0 var(--space-xs) 0; } + .entry p { margin: 0; color: var(--muted); } + #captcha-canvas { border: 1px solid var(--border); border-radius: var(--r); background: #fff; } diff --git a/assets/css/pages/hitcounter.css b/assets/css/pages/hitcounter.css new file mode 100644 index 0000000..1c52da1 --- /dev/null +++ b/assets/css/pages/hitcounter.css @@ -0,0 +1,7 @@ +.counter { + display: grid; + gap: var(--space-sm); + justify-items: center; + text-align: center; + } + .big { font-size: 3rem; font-weight: 800; color: var(--gold); } diff --git a/assets/css/pages/hitcounter_jp.css b/assets/css/pages/hitcounter_jp.css new file mode 100644 index 0000000..1c52da1 --- /dev/null +++ b/assets/css/pages/hitcounter_jp.css @@ -0,0 +1,7 @@ +.counter { + display: grid; + gap: var(--space-sm); + justify-items: center; + text-align: center; + } + .big { font-size: 3rem; font-weight: 800; color: var(--gold); } diff --git a/assets/css/pages/hitcounter_zh.css b/assets/css/pages/hitcounter_zh.css new file mode 100644 index 0000000..1c52da1 --- /dev/null +++ b/assets/css/pages/hitcounter_zh.css @@ -0,0 +1,7 @@ +.counter { + display: grid; + gap: var(--space-sm); + justify-items: center; + text-align: center; + } + .big { font-size: 3rem; font-weight: 800; color: var(--gold); } diff --git a/assets/css/pages/journal-index.css b/assets/css/pages/journal-index.css new file mode 100644 index 0000000..02e8c42 --- /dev/null +++ b/assets/css/pages/journal-index.css @@ -0,0 +1,3 @@ +.entry { margin: var(--space-md) 0; } + .entry time { font-weight: 700; color: var(--ink); } + .entry p { margin: var(--space-xs) 0 0 0; color: var(--muted); } diff --git a/assets/css/pages/journal-index_jp.css b/assets/css/pages/journal-index_jp.css new file mode 100644 index 0000000..02e8c42 --- /dev/null +++ b/assets/css/pages/journal-index_jp.css @@ -0,0 +1,3 @@ +.entry { margin: var(--space-md) 0; } + .entry time { font-weight: 700; color: var(--ink); } + .entry p { margin: var(--space-xs) 0 0 0; color: var(--muted); } diff --git a/assets/css/pages/journal-index_zh.css b/assets/css/pages/journal-index_zh.css new file mode 100644 index 0000000..02e8c42 --- /dev/null +++ b/assets/css/pages/journal-index_zh.css @@ -0,0 +1,3 @@ +.entry { margin: var(--space-md) 0; } + .entry time { font-weight: 700; color: var(--ink); } + .entry p { margin: var(--space-xs) 0 0 0; color: var(--muted); } diff --git a/assets/css/pages/links.css b/assets/css/pages/links.css new file mode 100644 index 0000000..fbb3700 --- /dev/null +++ b/assets/css/pages/links.css @@ -0,0 +1,3 @@ +.buttons img { image-rendering: auto; } + .buttons a { padding: 0; background: transparent; } + .buttons a:hover { background: transparent; } diff --git a/assets/css/pages/links_jp.css b/assets/css/pages/links_jp.css new file mode 100644 index 0000000..fbb3700 --- /dev/null +++ b/assets/css/pages/links_jp.css @@ -0,0 +1,3 @@ +.buttons img { image-rendering: auto; } + .buttons a { padding: 0; background: transparent; } + .buttons a:hover { background: transparent; } diff --git a/assets/css/pages/links_zh.css b/assets/css/pages/links_zh.css new file mode 100644 index 0000000..fbb3700 --- /dev/null +++ b/assets/css/pages/links_zh.css @@ -0,0 +1,3 @@ +.buttons img { image-rendering: auto; } + .buttons a { padding: 0; background: transparent; } + .buttons a:hover { background: transparent; } diff --git a/assets/css/pages/mstartpage-index.css b/assets/css/pages/mstartpage-index.css new file mode 100644 index 0000000..67eac23 --- /dev/null +++ b/assets/css/pages/mstartpage-index.css @@ -0,0 +1,361 @@ +:root { + --main-text-color: #ddd; + --border-color: #C8A977; + --search-input-color: black; + --link-color: #FF0000; + --background-color: #111; + --menu-background: #222; + } + + * { + box-sizing: border-box; + } + + html, body { + margin: 0; + padding: 0; + height: 100%; + background-color: var(--background-color); + font-family: 'Source Code Pro', "MS Gothic", IPAMonaGothic, IPAGothic, "BIZ UDGothic", HGGothicM, "Noto Sans Mono CJK JP", "Noto Sans Mono", monospace; + font-size: 14px; + color: var(--main-text-color); + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); + overflow-x: hidden; + } + + a { + color: var(--link-color); + background-color: transparent; + text-decoration: none; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); + } + + a:hover { + text-decoration: underline; + } + + /* Header and menu */ + .header { + position: sticky; + top: 0; + z-index: 100; + background-color: var(--background-color); + padding: 10px; + border-bottom: 1px solid var(--border-color); + } + + .menu-toggle { + display: block; + width: 100%; + padding: 12px; + background-color: black; + color: var(--link-color); + border: 1px solid var(--link-color); + border-radius: 4px; + text-align: center; + font-weight: bold; + margin-bottom: 10px; + cursor: pointer; + } + + .main-menu { + display: none; + flex-direction: column; + background-color: var(--menu-background); + border: 1px solid var(--link-color); + border-radius: 4px; + padding: 10px; + margin-bottom: 15px; + } + + .main-menu.show { + display: flex; + } + + .main-menu a { + padding: 10px; + border-bottom: 1px solid #333; + } + + .main-menu a:last-child { + border-bottom: none; + } + + /* Search box */ + .search-container { + width: 100%; + padding: 10px; + background-color: var(--background-color); + margin-bottom: 15px; + } + + .search-form { + display: flex; + flex-direction: column; + } + + .search-input { + color: var(--link-color); + background-color: #3A3A3A; + border: 1px solid var(--link-color); + padding: 12px; + margin-bottom: 10px; + text-align: center; + border-radius: 4px; + font-size: 16px; /* Larger for touch */ + } + + input[type="submit"] { + color: var(--link-color); + background-color: black; + padding: 12px; + border: 1px solid var(--link-color); + cursor: pointer; + border-radius: 4px; + font-weight: bold; + font-size: 16px; + } + + /* Content sections */ + .content-section { + margin-bottom: 20px; + padding: 0 10px; + } + + .section-title { + color: var(--link-color); + font-size: 1.2em; + border-bottom: 1px solid var(--border-color); + padding-bottom: 5px; + margin-bottom: 10px; + } + + .link-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + gap: 10px; + } + + .link-item { + padding: 10px; + background-color: #1a1a1a; + border: 1px solid #333; + border-radius: 4px; + text-align: center; + } + + /* Gallery items for mobile */ + .gallery-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 15px; + padding: 10px; + } + + .gallery-item { + border: 2px ridge var(--border-color); + border-radius: 4px; + overflow: hidden; + } + + .gallery-item:hover { + border: 2px ridge var(--link-color); + } + + .gallery-item img { + width: 100%; + height: auto; + display: block; + } + + .gallery-desc { + padding: 8px; + text-align: center; + font-size: 0.9em; + color: var(--link-color); + background-color: #1a1a1a; + } + + /* Date and time */ + .datetime { + padding: 10px; + text-align: center; + margin: 15px 0; + } + + #realtime-date, #realtime-clock { + color: var(--link-color); + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); + margin: 5px 0; + } + + /* Footer */ + .footer { + padding: 15px; + text-align: center; + border-top: 1px solid #333; + margin-top: 20px; + } + + .footer-links { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + } + + .footer-links a { + padding: 5px; + } + + /* Collapsible sections */ + .collapsible { + background-color: #1a1a1a; + color: var(--link-color); + cursor: pointer; + padding: 12px; + width: 100%; + border: 1px solid var(--border-color); + text-align: left; + outline: none; + font-size: 1em; + font-weight: bold; + margin-bottom: 5px; + border-radius: 4px; + } + + .active, .collapsible:hover { + background-color: #222; + } + + .collapsible-content { + padding: 0 10px; + display: none; + overflow: hidden; + background-color: #1a1a1a; + margin-bottom: 10px; + border-radius: 0 0 4px 4px; + } + + /* XXX Verification Modal */ + .xxx-modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.9); + z-index: 1000; + justify-content: center; + align-items: center; + } + + .xxx-modal-content { + background-color: var(--menu-background); + padding: 20px; + border-radius: 8px; + border: 2px solid var(--link-color); + text-align: center; + max-width: 90%; + width: 350px; + } + + .xxx-logo { + width: 80px; + height: 80px; + margin: 0 auto 15px; + background-color: #333; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + color: var(--link-color); + border: 2px solid var(--link-color); + } + + .xxx-buttons { + display: flex; + justify-content: space-between; + margin-top: 20px; + } + + .xxx-button { + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: bold; + } + + .xxx-confirm { + background-color: #4CAF50; + color: white; + } + + .xxx-deny { + background-color: #f44336; + color: white; + } + + /* XXX Section */ + .xxx-section { + margin: 20px 0; + text-align: center; + } + + .xxx-toggle { + padding: 12px 20px; + background-color: #333; + color: var(--link-color); + border: 1px solid var(--link-color); + border-radius: 4px; + cursor: pointer; + font-weight: bold; + margin-bottom: 15px; + } + + .xxx-list { + position: fixed; + bottom: 20px; + right: 20px; + background-color: var(--menu-background); + border: 1px solid var(--link-color); + border-radius: 8px; + padding: 10px; + max-width: 200px; + display: none; + z-index: 999; + } + + .xxx-list-title { + color: var(--link-color); + font-weight: bold; + margin-bottom: 8px; + text-align: center; + border-bottom: 1px solid #444; + padding-bottom: 5px; + } + + .xxx-list-item { + margin: 5px 0; + text-align: center; + } + + /* Responsive adjustments */ + @media (min-width: 768px) { + body { + font-size: 16px; + max-width: 800px; + margin: 0 auto; + } + + .link-grid { + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + } + + .gallery-container { + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + } + } diff --git a/assets/css/pages/startpage-test.css b/assets/css/pages/startpage-test.css new file mode 100644 index 0000000..14996cb --- /dev/null +++ b/assets/css/pages/startpage-test.css @@ -0,0 +1,86 @@ +body { + font-family: 'Inter', sans-serif; /* Using Inter font */ + margin: 0; /* Remove default body margin */ + padding: 20px; + background-color: #f0f0f0; + display: flex; + flex-direction: column; /* Arrange content vertically */ + justify-content: center; + align-items: center; + min-height: 100vh; + } + + h1 { + text-align: center; + color: #333; + margin-bottom: 20px; + font-size: 2em; /* Larger heading */ + } + + .responsive-container { + width: 95%; /* Make it wider to accommodate the full page embed */ + max-width: 1200px; /* Max width for larger screens to prevent it from getting too wide */ + padding: 10px; + box-sizing: border-box; + border: 1px solid #ccc; + border-radius: 12px; /* Slightly larger rounded corners */ + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* More prominent shadow */ + background-color: white; + margin-bottom: 20px; + overflow: hidden; /* Ensure content stays within rounded corners */ + } + + .iframe-wrapper { + position: relative; + /* Maintain an aspect ratio that suits a full webpage, e.g., 16:9 or taller */ + /* A good starting point for a full webpage, adjust as needed for optimal viewing */ + padding-bottom: 120%; /* Height will be 120% of the width, making it taller */ + height: 0; + overflow: hidden; + border-radius: 8px; /* Slightly smaller rounded corners for inner frame */ + } + + .iframe-wrapper iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + border-radius: 8px; + } + + .desc { + padding: 15px; + text-align: center; + font-size: 1.1em; + color: #555; + line-height: 1.6; + } + + .desc a { + color: #007bff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; /* Smooth transition for hover effect */ + } + + .desc a:hover { + text-decoration: underline; + color: #0056b3; /* Darker blue on hover */ + } + + /* Responsive adjustments for the container */ + @media only screen and (max-width: 768px) { + .responsive-container { + width: 100%; /* Full width on smaller screens */ + padding: 5px; + border-radius: 0; /* No rounded corners on very small screens for edge-to-edge */ + } + .iframe-wrapper { + padding-bottom: 150%; /* Make it even taller on mobile if needed */ + } + body { + padding: 10px; + } + } diff --git a/assets/css/pages/test.css b/assets/css/pages/test.css new file mode 100644 index 0000000..4eacfa4 --- /dev/null +++ b/assets/css/pages/test.css @@ -0,0 +1,52 @@ +html, body { margin: 0; padding: 0; } + table.layout { border-collapse: collapse; width: 100%; } + td.content { padding: 0; } + .logo { float: left; margin-right: 1rem; } + + a { + text-decoration: none; + background-color: transparent; + transition: background-color 0.2s, color 0.2s; + padding: 4px; + border-radius: 4px; + } + a:hover { background-color: red; color: white; } + a.no-hover-box:hover { background-color: transparent; color: red; } + + .sidebar { + position: fixed; + top: 0; + right: 0; + width: 250px; + max-height: 100vh; + overflow-y: auto; + background-color: #ffd; + transform: translateX(100%); + transition: transform 0.3s ease-in-out; + } + .sidebar.visible { transform: translateX(0); } + + .links-container { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + margin-bottom: 1rem; + } + .links-container ul { + flex: 1 1 200px; + list-style: none; + margin: 0; padding: 0; + } + .links-container ul li { margin-bottom: 0.75rem; word-wrap: break-word; } + .links-container ul li a { + display: inline-block; + max-width: 100%; + word-wrap: break-word; + color: #0366d6; + transition: color 0.3s ease; + } + .links-container ul li a:hover { color: #023e8a; text-decoration: underline; } + + @media (max-width: 600px) { + .links-container { flex-direction: column; } + } diff --git a/assets/css/pages/test_jp.css b/assets/css/pages/test_jp.css new file mode 100644 index 0000000..4eacfa4 --- /dev/null +++ b/assets/css/pages/test_jp.css @@ -0,0 +1,52 @@ +html, body { margin: 0; padding: 0; } + table.layout { border-collapse: collapse; width: 100%; } + td.content { padding: 0; } + .logo { float: left; margin-right: 1rem; } + + a { + text-decoration: none; + background-color: transparent; + transition: background-color 0.2s, color 0.2s; + padding: 4px; + border-radius: 4px; + } + a:hover { background-color: red; color: white; } + a.no-hover-box:hover { background-color: transparent; color: red; } + + .sidebar { + position: fixed; + top: 0; + right: 0; + width: 250px; + max-height: 100vh; + overflow-y: auto; + background-color: #ffd; + transform: translateX(100%); + transition: transform 0.3s ease-in-out; + } + .sidebar.visible { transform: translateX(0); } + + .links-container { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + margin-bottom: 1rem; + } + .links-container ul { + flex: 1 1 200px; + list-style: none; + margin: 0; padding: 0; + } + .links-container ul li { margin-bottom: 0.75rem; word-wrap: break-word; } + .links-container ul li a { + display: inline-block; + max-width: 100%; + word-wrap: break-word; + color: #0366d6; + transition: color 0.3s ease; + } + .links-container ul li a:hover { color: #023e8a; text-decoration: underline; } + + @media (max-width: 600px) { + .links-container { flex-direction: column; } + } diff --git a/assets/css/pages/test_zh.css b/assets/css/pages/test_zh.css new file mode 100644 index 0000000..4eacfa4 --- /dev/null +++ b/assets/css/pages/test_zh.css @@ -0,0 +1,52 @@ +html, body { margin: 0; padding: 0; } + table.layout { border-collapse: collapse; width: 100%; } + td.content { padding: 0; } + .logo { float: left; margin-right: 1rem; } + + a { + text-decoration: none; + background-color: transparent; + transition: background-color 0.2s, color 0.2s; + padding: 4px; + border-radius: 4px; + } + a:hover { background-color: red; color: white; } + a.no-hover-box:hover { background-color: transparent; color: red; } + + .sidebar { + position: fixed; + top: 0; + right: 0; + width: 250px; + max-height: 100vh; + overflow-y: auto; + background-color: #ffd; + transform: translateX(100%); + transition: transform 0.3s ease-in-out; + } + .sidebar.visible { transform: translateX(0); } + + .links-container { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + margin-bottom: 1rem; + } + .links-container ul { + flex: 1 1 200px; + list-style: none; + margin: 0; padding: 0; + } + .links-container ul li { margin-bottom: 0.75rem; word-wrap: break-word; } + .links-container ul li a { + display: inline-block; + max-width: 100%; + word-wrap: break-word; + color: #0366d6; + transition: color 0.3s ease; + } + .links-container ul li a:hover { color: #023e8a; text-decoration: underline; } + + @media (max-width: 600px) { + .links-container { flex-direction: column; } + } diff --git a/assets/css/pages/vinyls.css b/assets/css/pages/vinyls.css new file mode 100644 index 0000000..ecf8b4b --- /dev/null +++ b/assets/css/pages/vinyls.css @@ -0,0 +1,14 @@ +.vinyl-grid{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: var(--space-md); + margin-top: var(--space-md); +} + +.vinyl-grid img{ + width: 100%; + height: auto; + border: 1px solid var(--border); + border-radius: var(--r); + background: var(--bg); +} |