diff options
Diffstat (limited to 'assets/stylesheets/style.css')
-rw-r--r-- | assets/stylesheets/style.css | 195 |
1 files changed, 195 insertions, 0 deletions
diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css new file mode 100644 index 0000000..b5a6aed --- /dev/null +++ b/assets/stylesheets/style.css @@ -0,0 +1,195 @@ +html { + background: #222; +} +body { + margin: 0; + color: white; + font-family: "Noto Serif", serif; + text-underline-offset: 2.25px; + overflow-x: hidden; +} + +header { + display: grid; + grid-template-columns: 1fr auto 1fr; + background: #333; + padding: 5px 10px; + gap: 1em; + user-select: none; + position: sticky; + top: 0; + z-index: 100 +} + +#title { + text-align: center; +} + +#menu { + margin-left: auto; + display: flex; + gap: 3ex; +} + +header a { + color: white; + text-decoration: none; + position: relative; + width: fit-content; +} + +header a:hover::after { + content: ""; + background: green; + position: absolute; + display: block; + bottom: -.3em; + left: -1ex; + height: 3px; + width: calc(100% + 2ex); +} + +main, footer{ + max-width: 900px; + margin: 1.5em auto; + padding-inline: 3ex; +} + +#publishing { + text-align: right; + color: #555; +} +#publishing a { + color: #555; +} + +hr { + color: #555; + margin: 2em 0; +} + +h1, h2, h3, h4, h5, h6 { + text-align: center; +} + +.monodate { + font-family: monospace; +} + +.bold { + font-weight: bold; +} + +a { + color: lightgreen; +} + +/* highlighted code */ +.chroma { + background: none; +} + +div.chroma { + overflow: scroll; +} + +.chroma .lntable { + margin: auto; + width: fit-content; +} +.chroma code { + margin: 0 1ex; +} + +.chroma ::selection { + background: #444; +} + +:not(.chroma span)::selection { + background: green; + color: white; +} + +pre { + tab-size: 4; + -webkit-text-size-adjust: 100%; + overflow: scroll; +} + +ol, ul, pre code { + margin: auto; + display: block; + width: fit-content; + max-width: 100%; +} + +.alpha-ol ol { + list-style-type: lower-alpha; +} + +img, figcaption { + margin: auto; + display: block; + width: fit-content; + max-width: 60%; + color: #ddd; +} + +#copyright, #theme-copyright { + text-align: center; + display: block; + opacity: .2; +} + +.overflow-box { + overflow: scroll; +} + +table { + border-collapse: collapse; +} + +tr:nth-child(even) { + background: #252525; +} + +th { + background: #333; + border-right: 1.5px solid #222; + padding: .25em; +} + +td:not(.img) { + padding-inline: .75ex; +} + +td:not(:last-child) { + border-right: 1.5px solid #2b2b2b; +} + +td.img { + border: none; +} + +@media (max-width: 1000px) { + header { + grid-template-columns: auto auto; + grid-template-areas: + "home quicklinks" + "title title" + ; + } + #title { + text-align: center; + display: block; + width: 100%; + order: 3; + grid-area: title; + } + ol, ul, pre code { + margin-left: 0; + } + img, figcaption { + max-width: 95%; + } +} |