diff options
Diffstat (limited to 'theme/neb/static/css/neb-style.css')
| -rw-r--r-- | theme/neb/static/css/neb-style.css | 261 |
1 files changed, 261 insertions, 0 deletions
diff --git a/theme/neb/static/css/neb-style.css b/theme/neb/static/css/neb-style.css new file mode 100644 index 0000000..daf798a --- /dev/null +++ b/theme/neb/static/css/neb-style.css @@ -0,0 +1,261 @@ +@import url(codehilite-coffee.css); +@import url(neb-anim.css); + +:root { + font-family: sans-serif; + + --color: #0088ff; + + --code-color: #de2891; + --coffee-color: #ee211d; + --data-color: #18d211; + --design-color: #d26b2a; + --feature-color: #7f35ee; + + .code { --color: var(--code-color); } + .coffee { --color: var(--coffee-color); } + .data { --color: var(--data-color); } + .design { --color: var(--design-color); } + .feature { --color: var(--feature-color); } +} + +body { + margin: 25px; + margin-bottom: 60px; + + &::before { + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + + background-color: #c9c9c9; + background-image: url(/theme/img/5002.png); + background-size: 125px; + } + + > header, + > main, + > footer { + max-width: 968px; + margin-left: auto; + margin-right: auto; + + background: white; + } + + > header { + padding: 20px 20px 10px 20px; + + background-color: black; + background-image: url(/theme/img/5003.png); + color: white; + background-size: 125px; + + > nav ul { + display: flex; + padding: 0; + margin-bottom: 10px; + + li { + display: block; + + &:has(+ .right) { + flex-grow: 1; + } + } + + li a { + padding: 5px 20px; + + background: #272727; + border: 1px solid var(--color); + border-radius: 2px; + + &:where(li.active a) { + background: var(--color); + color: white; + } + } + } + } + + > footer { + padding: 5px 20px 5px 20px; + background-color: #f3f3f3; + } + + > main { + --content-padding: 20px; + padding: var(--content-padding); + + contain: paint; + + article > header > :first-child { + margin-top: 0; + } + } +} + +a { + color: var(--color); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + &.secret { + color: inherit; + } +} + +article { + line-height: 1.6; + + code:not(:where(pre code)) { + padding: 2px 3px; + background-color: color-mix(in srgb, var(--color), 85% #00000003); + border: 1px solid color-mix(in srgb, var(--color), 70% #00000002); + border-radius: 3px; + } + + pre { + line-height: 1.3; + white-space: pre-wrap; + background: #0006; + border: 4px inset #ccce !important; + padding: 12px 8px; + } + + li { + /* baseline, paragraphs will space further */ + margin-bottom: 0.25em; + } + + figure { + img, video { + display: block; + margin-left: auto; + margin-right: auto; + margin-bottom: 1em; + max-width: 100%; + max-height: 80vh; + box-shadow: 0 1px 3px 1px #3336; + width: auto; + height: auto; + } + + figcaption { + text-align: center; + font-style: oblique; + } + } + + .toc { + font-weight: 800; + + li i { display: none; } + + li::before { + --pale: color-mix(in srgb, var(--color), 65% #ffffff); + --shine: color-mix(in srgb, var(--color), 75% white); + + background: var(--pale); + padding: 3px 7px; + margin-right: 7px; + border-bottom-right-radius: 5px; + border-top-left-radius: 5px; + } + + li:has(a:hover)::before { + background: + linear-gradient(45deg, + var(--pale) var(--shine2), + var(--shine) calc(var(--shine2) + 1%), + var(--shine) var(--shine1), + var(--pale) calc(var(--shine1) + 1%)); + + animation: label-shine 0.35s linear forwards; + } + + li:has(a[href*="#code"])::before { + content: "code"; --color: var(--code-color); + } + + li:has(a[href*="#coffee"])::before { + content: "coffee"; --color: var(--coffee-color); + } + + li:has(a[href*="#data"])::before { + content: "data"; --color: var(--data-color); + } + + li:has(a[href*="#design"])::before { + content: "design"; --color: var(--design-color); + } + + li:has(a[href*="#feature"])::before { + content: "feature"; --color: var(--feature-color); + } + } + + h3 { + margin-left: calc(-1 * var(--content-padding)); + margin-right: calc(-1 * var(--content-padding)); + padding-left: calc(0.5 * var(--content-padding)); + padding-right: calc(1.5 * var(--content-padding)); + padding-top: 6px; + padding-bottom: 4px; + margin-top: 1.75em; + scroll-margin-top: 0.75em; + + position: sticky; + top: 0; + background: #fffc; + box-shadow: 0 3px 4px #fff3; + border-bottom: 2px solid #22222238; + backdrop-filter: + contrast(0.9) brightness(1.4) contrast(0.2) brightness(2.0) saturate(1.4) blur(6px); + + &::before { + background: color-mix(in srgb, var(--color), 65% #ffffff); + padding: 5px 10px; + margin-right: 10px; + border-bottom-right-radius: 5px; + border-top-left-radius: 5px; + } + + &.code::before { content: "code"; } + &.coffee::before { content: "coffee"; } + &.data::before { content: "data"; } + &.design::before { content: "design"; } + &.feature::before { content: "feature"; } + } + + h3 { font-size: 1.17em; } + h3 { margin-bottom: 0; } + h3 + * { margin-top: 1.17em; } + + footer { + line-height: 1.2; + p { margin: 0; } + + &::before { + content: ""; + display: block; + width: 14ch; + height: 2px; + margin-bottom: 1em; + margin-top: 3em; + background: #c7c7c7; + } + + address { + font-style: normal; + } + } +} |