2025-09-12 19:20:30 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
<!--
|
|
|
|
|
Copyright (c) 2025 Sakuragasaki46.
|
|
|
|
|
This Service is available "AS IS", with NO WARRANTY, explicit or implied.
|
|
|
|
|
Sakuragasaki46 is NOT legally liable for Your use of the Service.
|
|
|
|
|
This service is age-restricted; do not access if underage.
|
|
|
|
|
More info: https://{{ domain_name }}/terms
|
|
|
|
|
-->
|
|
|
|
|
%sveltekit.head%
|
|
|
|
|
<style>
|
|
|
|
|
/* CSS reset */
|
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
|
body { margin: 0; line-height: 1.5; font-size: 18px; background-color: var(--canvas); color: var(--text-primary); position: relative; }
|
|
|
|
|
body { font-family: var(--ui-font, sans-serif); }
|
|
|
|
|
button, input, select, textarea { font: inherit; }
|
|
|
|
|
a:link, a:visited { color: var(--accent); }
|
|
|
|
|
img { max-width: 100%; max-height: 100vh; }
|
|
|
|
|
faint, .faint { opacity: .75; }
|
|
|
|
|
strong faint, strong .faint { font-weight: 400; }
|
|
|
|
|
.callout { color: var(--text-alt); }
|
|
|
|
|
.success { color: var(--success); }
|
|
|
|
|
.error { color: var(--error); }
|
|
|
|
|
.warning { color: var(--warning); }
|
|
|
|
|
card, .card { display: block; background-color: var(--background); border: var(--canvas) 1px solid; border-radius: 12px; margin: 12px auto; padding: 12px; max-width: 960px; }
|
|
|
|
|
|
|
|
|
|
/* color themes */
|
|
|
|
|
:root {
|
|
|
|
|
--c0-accent: #ff7300;
|
|
|
|
|
--c1-accent: #ff7300;
|
|
|
|
|
--c2-accent: #f837ce;
|
|
|
|
|
--c3-accent: #38b8ff;
|
|
|
|
|
--c4-accent: #ffe338;
|
|
|
|
|
--c5-accent: #78f038;
|
|
|
|
|
--c6-accent: #ff9aae;
|
|
|
|
|
--c7-accent: #606080;
|
|
|
|
|
--c8-accent: #aeaac0;
|
|
|
|
|
--c9-accent: #3ae0b8;
|
|
|
|
|
--c10-accent: #8828ea;
|
|
|
|
|
--c11-accent: #1871d8;
|
|
|
|
|
--c12-accent: #885a18;
|
|
|
|
|
--c13-accent: #38a856;
|
|
|
|
|
--c14-accent: #ff3018;
|
|
|
|
|
--c15-accent: #ff1668;
|
|
|
|
|
|
|
|
|
|
--light-text-primary: #181818;
|
|
|
|
|
--light-text-alt: #444;
|
|
|
|
|
--light-border: #999;
|
|
|
|
|
--light-success: #73af00;
|
|
|
|
|
--light-error: #e04830;
|
|
|
|
|
--light-warning: #dea800;
|
|
|
|
|
--light-canvas: #eaecee;
|
|
|
|
|
--light-background: #f9f9f9;
|
|
|
|
|
--light-bg-sharp: #fdfdff;
|
|
|
|
|
|
|
|
|
|
--dark-text-primary: #e8e8e8;
|
|
|
|
|
--dark-text-alt: #c0cad3;
|
|
|
|
|
--dark-border: #777;
|
|
|
|
|
--dark-success: #93cf00;
|
|
|
|
|
--dark-error: #e04830;
|
|
|
|
|
--dark-warning: #dea800;
|
|
|
|
|
--dark-canvas: #0a0a0e;
|
|
|
|
|
--dark-background: #181a21;
|
|
|
|
|
--dark-bg-sharp: #080808;
|
|
|
|
|
|
|
|
|
|
--accent: var(--c0-accent);
|
|
|
|
|
--text-primary: var(--light-text-primary);
|
|
|
|
|
--text-alt: var(--light-text-alt);
|
|
|
|
|
--border: var(--light-border);
|
|
|
|
|
--success: var(--light-success);
|
|
|
|
|
--error: var(--light-error);
|
|
|
|
|
--warning: var(--light-warning);
|
|
|
|
|
--canvas: var(--light-canvas);
|
|
|
|
|
--background: var(--light-background);
|
|
|
|
|
--bg-sharp: var(--light-bg-sharp);
|
|
|
|
|
|
|
|
|
|
/* NOT color themes */
|
|
|
|
|
--ui-font: system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans", sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) { :root {
|
|
|
|
|
--text-primary: var(--dark-text-primary);
|
|
|
|
|
--text-alt: var(--dark-text-alt);
|
|
|
|
|
--border: var(--dark-border);
|
|
|
|
|
--success: var(--dark-success);
|
|
|
|
|
--error: var(--dark-error);
|
|
|
|
|
--warning: var(--dark-warning);
|
|
|
|
|
--canvas: var(--dark-canvas);
|
|
|
|
|
--background: var(--dark-background);
|
|
|
|
|
--bg-sharp: var(--dark-bg-sharp);
|
|
|
|
|
} }
|
|
|
|
|
|
|
|
|
|
.color-scheme-light {
|
|
|
|
|
--text-primary: var(--light-text-primary);
|
|
|
|
|
--text-alt: var(--light-text-alt);
|
|
|
|
|
--border: var(--light-border);
|
|
|
|
|
--success: var(--light-success);
|
|
|
|
|
--error: var(--light-error);
|
|
|
|
|
--warning: var(--light-warning);
|
|
|
|
|
--canvas: var(--light-canvas);
|
|
|
|
|
--background: var(--light-background);
|
|
|
|
|
--bg-sharp: var(--light-bg-sharp);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.color-scheme-dark {
|
|
|
|
|
--text-primary: var(--dark-text-primary);
|
|
|
|
|
--text-alt: var(--dark-text-alt);
|
|
|
|
|
--border: var(--dark-border);
|
|
|
|
|
--success: var(--dark-success);
|
|
|
|
|
--error: var(--dark-error);
|
|
|
|
|
--warning: var(--dark-warning);
|
|
|
|
|
--canvas: var(--dark-canvas);
|
|
|
|
|
--background: var(--dark-background);
|
|
|
|
|
--bg-sharp: var(--dark-bg-sharp);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.color-theme-1 { --accent: var(--c1-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-2 { --accent: var(--c2-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-3 { --accent: var(--c3-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-4 { --accent: var(--c4-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-5 { --accent: var(--c5-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-6 { --accent: var(--c6-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-7 { --accent: var(--c7-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-8 { --accent: var(--c8-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-9 { --accent: var(--c9-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-10 { --accent: var(--c10-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-11 { --accent: var(--c11-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-12 { --accent: var(--c12-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-13 { --accent: var(--c13-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-14 { --accent: var(--c14-accent); }
|
|
|
|
|
|
|
|
|
|
.color-theme-15 { --accent: var(--c15-accent); }
|
|
|
|
|
/* ... */
|
|
|
|
|
|
|
|
|
|
/* mobile styles */
|
|
|
|
|
@media screen and (min-width: 800px) { .mobileonly { display: none !important; } }
|
|
|
|
|
@media screen and (max-width: 799px) { .nomobile { display: none !important; } }
|
|
|
|
|
|
|
|
|
|
/* other global styles */
|
|
|
|
|
aside.card > ul {
|
|
|
|
|
list-style: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0; }
|
|
|
|
|
|
|
|
|
|
aside.card > ul > li {
|
|
|
|
|
border-bottom: 1px solid var(--border);
|
|
|
|
|
padding: 12px; }
|
|
|
|
|
|
|
|
|
|
aside.card > ul > li:last-child {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
aside.card > p {
|
|
|
|
|
padding: 12px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul.row {
|
|
|
|
|
list-style: none;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul.column {
|
|
|
|
|
list-style: none;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-22 15:09:10 +02:00
|
|
|
ul.grid {
|
|
|
|
|
list-style: none;
|
|
|
|
|
padding: 0;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
|
|
|
grid-template-rows: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul.grid > li {
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: .5em;
|
|
|
|
|
padding: .5em;
|
|
|
|
|
margin: 1em .5em;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul.grid > li small {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2025-09-12 19:20:30 +02:00
|
|
|
a svg {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:not([type="button"], [type="submit"], [type="reset"]) {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-bottom: 2px solid var(--border);
|
|
|
|
|
background-color: inherit;
|
|
|
|
|
color: var(--text-alt);
|
|
|
|
|
}
|
|
|
|
|
input:not([type="button"], [type="submit"], [type="reset"]):focus {
|
|
|
|
|
background-color: var(--bg-sharp);
|
|
|
|
|
border-color: var(--accent);
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button, select, button.card {
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border: var(--accent) 1px solid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button.primary, button.primary.card {
|
|
|
|
|
color: var(--bg-main);
|
|
|
|
|
background-color: var(--accent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button.inline {
|
|
|
|
|
display: inline;
|
|
|
|
|
border: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button, input:is([type="button"], [type="submit"], [type="reset"]), select, textarea {
|
|
|
|
|
border-radius: 9px;
|
|
|
|
|
padding: .5em;
|
|
|
|
|
font: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button.card {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: .5em 1em;
|
|
|
|
|
border-radius: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-22 11:58:43 +02:00
|
|
|
:disabled {
|
|
|
|
|
opacity: .5;
|
|
|
|
|
}
|
|
|
|
|
|
2025-09-12 19:20:30 +02:00
|
|
|
article h1, article h2 {
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body data-sveltekit-preload-data="hover">
|
|
|
|
|
<global-wrapper style="display: contents">%sveltekit.body%</global-wrapper>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
