diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/style.css | 174 |
1 files changed, 174 insertions, 0 deletions
diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..da77912 --- /dev/null +++ b/assets/style.css @@ -0,0 +1,174 @@ +:root { + --paper-color: #ffffea; + --light-yellow: #eeee9e; + --dark-yellow: #99994c; + --light-blue: #eaffff; + --dark-blue: #8888cc; + --light-gray: #eee; + --dark-gray: #888; + + --pagewidth: 60rem; + --textwidth: 45rem; + --parspace: .5em; + + --letter-page-width: 8.5in; + --letter-page-height: 11in; +} + +html { background: var(--light-gray); } + +body { + margin: 1rem auto; + padding: 1rem .5rem; + max-width: var(--pagewidth); + border: 1px solid var(--dark-yellow); + box-shadow: 2px 2px var(--dark-yellow); + + font-family: "Palatino", "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; + line-height: 1.3em; + text-rendering: optimizeLegibility; + color: #000; + background: #fff; +} + +#content { + margin: 0 auto; + max-width: var(--textwidth); +} + +header { margin-bottom: 1rem; } + +footer { margin-top: 3rem; } +footer p { + text-align: left; + font-size: 90%; + margin-bottom: .1em; +} +footer :last-child { margin-bottom: 0; } + +nav ul { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); + gap: .4rem .8rem; + margin: 0; + margin-block: 0 .8rem; + padding: 0; +} + +nav li { display: inline-block; } +nav a { + display: inline-block; + box-sizing: border-box; + width: 100%; + text-align: center; + vertical-align: middle; + white-space: nowrap; + color: #000; + border: .1rem solid var(--dark-blue); + box-shadow: .1rem .1rem var(--dark-blue); +} +li.nav-active a { + font-weight: bold; + box-shadow: .2rem .2rem var(--dark-yellow); +} +li.nav-ancestor a { font-weight: bold; } +nav a, nav a:hover, nav a:active { text-decoration: none; } +nav a:hover { background: var(--light-blue); } +nav a:active { box-shadow: 0 0; } + +.article-header { margin-bottom: 2rem; } + +p { + text-align: justify; + hyphens: auto; + text-justify: inter-word; + margin-top: 0; + margin-bottom: var(--parspace); +} + +a { text-decoration: none; } +a:hover { text-decoration: underline; } +a:active { text-decoration: none; } + +h1, +h2, +h3 { + margin-block-start: .8em; + margin-block-end: .4em; +} +.title { font-size: 1.4rem; } +h1 { font-size: 1.15rem; } +h2 { font-size: 1.10rem; } +h3 { font-size: 1.05rem; } + +table { + border-collapse: collapse; + text-align: left; + margin-bottom: 1rem; + border-left: .2rem solid var(--dark-blue); + box-shadow: .2rem .2rem var(--light-gray); +} +thead tr { + background: var(--light-blue); + border: 1px solid #000; +} +tbody tr { border: 1px solid var(--dark-gray); } +th, td { + padding: .125em .4em; + vertical-align: middle; +} + +hr { + border-top: .1rem solid #000; + margin-top: 0; + margin-bottom: 1em; +} + +blockquote { + width: 80%; + margin: 0 auto var(--parspace) auto; +} + +cite { + display: block; + text-align: right +} + +img { + box-sizing: border-box; + max-width: 100%; + max-height: 90vh; + border: 1px solid var(--dark-gray); + box-shadow: .2rem .2rem var(--light-gray); + margin-bottom: var(--parspace); +} + +div { margin-bottom: var(--parspace); } + +ul { + list-style: none; + margin: 0; + margin-block: 0 1em; + padding: 0; +} + +main li { + padding-left: 1em; + position: relative; +} +main li::before { + content: "•"; + position: absolute; + left: 0; +} + +iframe { + width: 100%; + height: 85vh; + border: none; +} + +code, .mono { + font-family: "IBM Plex Mono", "Source Code Pro", monospace; + font-size: .9em; +} |