diff options
author | Vika <vika@fireburn.ru> | 2023-07-29 21:59:56 +0300 |
---|---|---|
committer | Vika <vika@fireburn.ru> | 2023-07-29 21:59:56 +0300 |
commit | 0617663b249f9ca488e5de652108b17d67fbaf45 (patch) | |
tree | 11564b6c8fa37bf9203a0a4cc1c4e9cc088cb1a5 /templates/assets | |
parent | 26c2b79f6a6380ae3224e9309b9f3352f5717bd7 (diff) | |
download | kittybox-0617663b249f9ca488e5de652108b17d67fbaf45.tar.zst |
Moved the entire Kittybox tree into the root
Diffstat (limited to 'templates/assets')
-rw-r--r-- | templates/assets/jslicense.html | 31 | ||||
-rw-r--r-- | templates/assets/onboarding.css | 33 | ||||
-rw-r--r-- | templates/assets/style.css | 236 |
3 files changed, 300 insertions, 0 deletions
diff --git a/templates/assets/jslicense.html b/templates/assets/jslicense.html new file mode 100644 index 0000000..90c681c --- /dev/null +++ b/templates/assets/jslicense.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>JavaScript licensing information for Kittybox</title> + </head> + <body> + <p>All JavaScript included with Kittybox is licensed as free software, most of it under AGPL-3.0.</p> + <table id="jslicense-labels1"> + <tr> + <td><a href="/.kittybox/static/onboarding.js">onboarding.js</a></td> + <td><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0</a></td> + <td><a href="https://git.sr.ht/~vikanezrimaya/kittybox/tree/main/item/kittybox-rs/javascript/src/onboarding.ts">onboarding.ts (Kittybox source code)</a></td> + </tr> + <tr> + <td><a href="/.kittybox/static/indieauth.js">indieauth.js</a></td> + <td><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0</a></td> + <td><a href="https://git.sr.ht/~vikanezrimaya/kittybox/tree/main/item/kittybox-rs/javascript/src/indieauth.ts">indieauth.ts (Kittybox source code)</a></td> + </tr> + <tr> + <td><a href="/.kittybox/static/lib.js">lib.js</a></td> + <td><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0</a></td> + <td><a href="https://git.sr.ht/~vikanezrimaya/kittybox/tree/main/item/kittybox-rs/javascript/src/lib.ts">lib.ts (Kittybox source code)</a></td> + </tr> + <tr> + <td><a href="/.kittybox/static/indieauth.js">indieauth.js</a></td> + <td><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0</a></td> + <td><a href="https://git.sr.ht/~vikanezrimaya/kittybox/tree/main/item/kittybox-rs/javascript/src/indieauth.ts">indieauth.ts (Kittybox source code)</a></td> + </tr> + </table> + </body> +</html> diff --git a/templates/assets/onboarding.css b/templates/assets/onboarding.css new file mode 100644 index 0000000..6f191b9 --- /dev/null +++ b/templates/assets/onboarding.css @@ -0,0 +1,33 @@ +form.onboarding > ul#progressbar > li.active { + font-weight: bold; +} +form.onboarding > ul#progressbar { + display: flex; list-style: none; justify-content: space-around; +} + +form.onboarding > fieldset > div.switch_card_buttons { + display: flex; + justify-content: space-between; + width: 100%; +} +form.onboarding > fieldset > div.switch_card_buttons button:last-child { + margin-left: auto; +} +.form_group, .multi_input { + display: flex; + flex-direction: column; +} +.multi_input { + align-items: start; +} +.multi_input > input { + width: 100%; + align-self: stretch; +} +form.onboarding > fieldset > .form_group + * { + margin-top: .75rem; +} +form.onboarding textarea { + width: 100%; + resize: vertical; +} diff --git a/templates/assets/style.css b/templates/assets/style.css new file mode 100644 index 0000000..4cd7c09 --- /dev/null +++ b/templates/assets/style.css @@ -0,0 +1,236 @@ +@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Lato&display=swap'); + +:root { + font-family: var(--font-normal); + --font-normal: 'Lato', sans-serif; + --font-accent: 'Caveat', cursive; + --type-scale: 1.250; + + --primary-accent: purple; + --secondary-accent: gold; +} +* { + box-sizing: border-box; +} +body { + margin: 0; +} +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-accent); +} +.titanic { + font-size: 3.815rem +} +h1, .xxxlarge { + margin-top: 0; + margin-bottom: 0; + font-size: 3.052rem; +} +h2, .xxlarge {font-size: 2.441rem;} +h3, .xlarge {font-size: 1.953rem;} +h4, .larger {font-size: 1.563rem;} +h5, .large {font-size: 1.25rem;} +h6, .normal {font-size: 1rem;} +small, .small { font-size: 0.8em; } + +nav#headerbar { + background: var(--primary-accent); + color: whitesmoke; + border-bottom: .75rem solid var(--secondary-accent); + padding: .3rem; + vertical-align: center; + /*position: sticky; + top: 0;*/ +} +nav#headerbar a#homepage { + font-weight: bolder; + font-family: var(--font-accent); + font-size: 2rem; +} +nav#headerbar > ul { + display: flex; + padding: inherit; + margin: inherit; + gap: .75em; +} +nav#headerbar > ul > li { + display: inline-flex; + flex-direction: column; + marker: none; + padding: inherit; + margin: inherit; + justify-content: center; +} +nav#headerbar > ul > li.shiftright { + margin-left: auto; +} +nav#headerbar a { + color: white; +} +body > main { + max-width: 60rem; + margin: auto; + padding: .75rem; +} +body > footer { + text-align: center; +} +.sidebyside { + display: flex; + flex-wrap: wrap; + gap: .75rem; + margin-top: .75rem; + margin-bottom: .75rem; +} +.sidebyside > * { + width: 100%; + margin-top: 0; + margin-bottom: 0; + border: .125rem solid black; + border-radius: .75rem; + padding: .75rem; + margin-top: 0 !important; + margin-bottom: 0 !important; + flex-basis: 28rem; + flex-grow: 1; +} +article > * + * { + margin-top: .75rem; +} +article > header { + padding-bottom: .75rem; + border-bottom: 1px solid gray; +} +article > footer { + border-top: 1px solid gray; +} +article.h-entry, article.h-feed, article.h-card, article.h-event { + border: 2px solid black; + border-radius: .75rem; + padding: .75rem; + margin-top: .75rem; + margin-bottom: .75rem; +} +.webinteractions > ul.counters { + display: inline-flex; + padding: inherit; + margin: inherit; + gap: .75em; + flex-wrap: wrap; +} +.webinteractions > ul.counters > li > .icon { + font-size: 1.5em; +} +.webinteractions > ul.counters > li { + display: inline-flex; + align-items: center; + gap: .5em; +} +article.h-entry > header.metadata ul { + padding-inline-start: unset; + margin: unset; +} +article.h-entry > header.metadata ul.categories { + flex-wrap: wrap; + display: inline-flex; + list-style-type: none; +} +article.h-entry > header.metadata ul.categories li { + display: inline; + margin-inline-start: unset; +} +article.h-entry > header.metadata ul li { + margin-inline-start: 2.5em; +} +article.h-entry .e-content pre { + border: 1px solid gray; + border-radius: 0.5em; + overflow-y: auto; + padding: 0.5em; +} +article.h-entry img.u-photo { + max-width: 80%; + max-height: 90vh; + display: block; + margin: auto; +} +article.h-entry img.u-photo + * { + margin-top: .75rem; +} +article.h-entry > header.metadata span + span::before { + content: " | " +} +li.p-category::before { + content: " #"; +} + +article.h-entry ul.categories { + gap: .2em; +} +article.h-card img.u-photo { + border-radius: 100%; + float: left; + height: 8rem; + border: 1px solid gray; + margin-right: .75em; + object-fit: cover; + aspect-ratio: 1; +} + +.mini-h-card img, #indieauth_page img { + height: 2em; + display: inline-block; + border: 2px solid gray; + border-radius: 100%; + margin-right: 0.5rem; +} + +.mini-h-card * { + vertical-align: middle; +} + +.mini-h-card a { + text-decoration: none; +} + +#indieauth_page > #introduction { + border: .125rem solid gray; + border-radius: .75rem; + margin: 1.25rem; + padding: .75rem; +} + +/* Rainbow hearts */ +/* TODO make toggleable by splitting into separate CSS file */ +@counter-style rainbow-hearts { + system: cyclic; + symbols: "โค๏ธ" "๐งก" "๐" "๐" "๐" "๐"; +} +body { + counter-reset: like-icons; +} +span.like-icon::before { + counter-increment: like-icons; + content: "" counter(like-icons, rainbow-hearts); +} +span.like-icon-label { + display: none; +} +ul.h-feed { + list-style: none; +} + +body > a#skip-to-content { + position: absolute; + width: 1px; + height: 1px; + margin: 0; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + background: white; + padding: 16px; +} +body > a#skip-to-content:focus { + width: auto; height: auto; clip: auto; + z-index: 999; +} |