initial commit
This commit is contained in:
commit
155aa524f3
48 changed files with 3943 additions and 0 deletions
245
src/app.html
Normal file
245
src/app.html
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
<!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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue