tiddlypwa/tiddlers/doc.css
Val Packett ba19d4bc3b Docs: svg fixes
The logo wouldn't show up on iOS, let's rearrange things a bit
2023-07-26 16:53:21 -03:00

41 lines
2.2 KiB
CSS

/*\
title: $:/doc.css
tags: $:/tags/Stylesheet [[TiddlyPWA Docs]]
type: text/css
Licensed under 0BSD, see license.tid.
\*/
[data-tiddler-title="TiddlyPWA"] .tc-tiddler-body { text-align: center; }
.tpwadoc-logos { display: flex; margin: 1rem 0; gap: .5rem; user-select: none; pointer-events: none; }
.tpwadoc-logos > :first-child { width: 25%; }
.tpwadoc-logos > :last-child { margin-right: 1rem; }
.tpwadoc-card { display: block; text-align: center; background: var(--bg, #fff); color: #333; text-decoration: none; border-radius: 5px; padding: 1.5rem 1rem; transition: ease-in-out .3s transform; text-shadow: 0 1px color-mix(in srgb, var(--bg) 70%, #fff); }
.tpwadoc-card:hover { transform: scale(1.02) rotateZ(0.3deg); box-shadow: 0 0 8px 1px var(--bg, #fff); }
@media (prefers-reduced-motion) { .tpwadoc-card:hover { transform: none; } }
.tpwadoc-icon { font-size: 2.5rem; height: 2.6rem; }
.tpwadoc-title { font-weight: bolder; height: 1.7rem; }
.tpwadoc-row { display: flex; gap: 1rem; }
.tpwadoc-row > * { flex: 1 1 0; }
@media screen and (max-width:690px) { .tpwadoc-row { flex-direction: column; } }
.tpwadoc-card-try {--bg:#fff4c8;}
.tpwadoc-card-host {--bg:#ffc8e7;}
.tpwadoc-card-upload {--bg:#e0ffdf;}
.tpwadoc-card-sync {--bg:#93ebff;}
.tpwadoc-card-crypt {--bg:#fbd16c;}
.tpwadoc-card-codeberg {--bg:#b8aeff;}
.tpwadoc-card-patreon {--bg:#ffab91;}
.tpwadoc-card-glitch {--bg:#ff7698;}
.tpwadoc-card-diy {--bg:#eaeaea;}
.tpwadoc-card-try input, .tpwadoc-card-try button { margin: 0 .25em; padding: .5em; border-radius: 4px; background: #ffedda; color: #333; border: 1px solid #49411f; margin-top: 0.5rem; }
.tpwadoc-card-try button:hover { background: #f0e0d0; }
.tpwadoc-card-try form div { line-height: 2.5; margin-top: .5em; }
.tpwa-visited-wiki { display: inline-block; vertical-align: baseline; padding: .2em .5em; margin: 0 .25em; line-height: 1; border-radius: 6px; background: color-mix(in srgb, var(--bg) 80%, #cacaca); }
.tpwa-visited-wiki:hover { background: color-mix(in srgb, var(--bg) 90%, #444); }
.tpwa-visited-wiki button { padding: 0.15em 0.35em; margin: 0 0 0 .5em; border: none; vertical-align: baseline; border-radius: 3px; background: none; }
.tpwa-visited-wiki button:hover { background: color-mix(in srgb, var(--bg) 90%, #ff0000); }