diff options
Diffstat (limited to 'theme/neb/static/css')
| -rw-r--r-- | theme/neb/static/css/codehilite-coffee.css | 85 | ||||
| -rw-r--r-- | theme/neb/static/css/neb-anim.css | 31 | ||||
| -rw-r--r-- | theme/neb/static/css/neb-style.css | 261 |
3 files changed, 377 insertions, 0 deletions
diff --git a/theme/neb/static/css/codehilite-coffee.css b/theme/neb/static/css/codehilite-coffee.css new file mode 100644 index 0000000..1f7de46 --- /dev/null +++ b/theme/neb/static/css/codehilite-coffee.css @@ -0,0 +1,85 @@ +pre { line-height: 125%; } +td.linenos .normal { color: #4e4e4e; background-color: transparent; padding-left: 5px; padding-right: 5px; } +span.linenos { color: #4e4e4e; background-color: transparent; padding-left: 5px; padding-right: 5px; } +td.linenos .special { color: #8f9494; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } +span.linenos.special { color: #8f9494; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } +.codehilite .hll { background-color: #ddd0c0 } +.codehilite { background: #262220; color: #ddd0c0 } +.codehilite .c { color: #70757A } /* Comment */ +.codehilite .err { color: #af5f5f } /* Error */ +.codehilite .esc { color: #ddd0c0 } /* Escape */ +.codehilite .g { color: #ddd0c0 } /* Generic */ +.codehilite .k { color: #919191 } /* Keyword */ +.codehilite .l { color: #af875f } /* Literal */ +.codehilite .n { color: #ddd0c0 } /* Name */ +.codehilite .o { color: #878787 } /* Operator */ +.codehilite .x { color: #ddd0c0 } /* Other */ +.codehilite .p { color: #ddd0c0 } /* Punctuation */ +.codehilite .ch { color: #8f9f9f } /* Comment.Hashbang */ +.codehilite .cm { color: #70757A } /* Comment.Multiline */ +.codehilite .cp { color: #fdd0c0 } /* Comment.Preproc */ +.codehilite .cpf { color: #c9b98f } /* Comment.PreprocFile */ +.codehilite .c1 { color: #70757A } /* Comment.Single */ +.codehilite .cs { color: #af5f5f } /* Comment.Special */ +.codehilite .gd { color: #bb6868 } /* Generic.Deleted */ +.codehilite .ge { color: #ddd0c0; font-style: italic } /* Generic.Emph */ +.codehilite .ges { color: #ddd0c0 } /* Generic.EmphStrong */ +.codehilite .gr { color: #af5f5f } /* Generic.Error */ +.codehilite .gh { color: #ddd0c0 } /* Generic.Heading */ +.codehilite .gi { color: #849155 } /* Generic.Inserted */ +.codehilite .go { color: #ddd0c0 } /* Generic.Output */ +.codehilite .gp { color: #ddd0c0 } /* Generic.Prompt */ +.codehilite .gs { color: #ddd0c0; font-weight: bold } /* Generic.Strong */ +.codehilite .gu { color: #ddd0c0 } /* Generic.Subheading */ +.codehilite .gt { color: #af5f5f } /* Generic.Traceback */ +.codehilite .kc { color: #875f5f } /* Keyword.Constant */ +.codehilite .kd { color: #875f5f } /* Keyword.Declaration */ +.codehilite .kn { color: #875f5f } /* Keyword.Namespace */ +.codehilite .kp { color: #919191 } /* Keyword.Pseudo */ +.codehilite .kr { color: #b46276 } /* Keyword.Reserved */ +.codehilite .kt { color: #af875f } /* Keyword.Type */ +.codehilite .ld { color: #af875f } /* Literal.Date */ +.codehilite .m { color: #87afaf } /* Literal.Number */ +.codehilite .s { color: #c9b98f } /* Literal.String */ +.codehilite .na { color: #ddd0c0 } /* Name.Attribute */ +.codehilite .nb { color: #ddd0c0 } /* Name.Builtin */ +.codehilite .nc { color: #875f5f } /* Name.Class */ +.codehilite .no { color: #af8787 } /* Name.Constant */ +.codehilite .nd { color: #fdd0c0 } /* Name.Decorator */ +.codehilite .ni { color: #ddd0c0 } /* Name.Entity */ +.codehilite .ne { color: #877575 } /* Name.Exception */ +.codehilite .nf { color: #fdd0c0 } /* Name.Function */ +.codehilite .nl { color: #ddd0c0 } /* Name.Label */ +.codehilite .nn { color: #ddd0c0 } /* Name.Namespace */ +.codehilite .nx { color: #ddd0c0 } /* Name.Other */ +.codehilite .py { color: #dfaf87 } /* Name.Property */ +.codehilite .nt { color: #87afaf } /* Name.Tag */ +.codehilite .nv { color: #ddd0c0 } /* Name.Variable */ +.codehilite .ow { color: #878787 } /* Operator.Word */ +.codehilite .pm { color: #ddd0c0 } /* Punctuation.Marker */ +.codehilite .w { color: #ddd0c0 } /* Text.Whitespace */ +.codehilite .mb { color: #87afaf } /* Literal.Number.Bin */ +.codehilite .mf { color: #87afaf } /* Literal.Number.Float */ +.codehilite .mh { color: #87afaf } /* Literal.Number.Hex */ +.codehilite .mi { color: #87afaf } /* Literal.Number.Integer */ +.codehilite .mo { color: #87afaf } /* Literal.Number.Oct */ +.codehilite .sa { color: #dfaf87 } /* Literal.String.Affix */ +.codehilite .sb { color: #c9b98f } /* Literal.String.Backtick */ +.codehilite .sc { color: #c9b98f } /* Literal.String.Char */ +.codehilite .dl { color: #c9b98f } /* Literal.String.Delimiter */ +.codehilite .sd { color: #878787 } /* Literal.String.Doc */ +.codehilite .s2 { color: #c9b98f } /* Literal.String.Double */ +.codehilite .se { color: #af5f5f } /* Literal.String.Escape */ +.codehilite .sh { color: #c9b98f } /* Literal.String.Heredoc */ +.codehilite .si { color: #af5f5f } /* Literal.String.Interpol */ +.codehilite .sx { color: #fdd0c0 } /* Literal.String.Other */ +.codehilite .sr { color: #af5f5f } /* Literal.String.Regex */ +.codehilite .s1 { color: #c9b98f } /* Literal.String.Single */ +.codehilite .ss { color: #af5f5f } /* Literal.String.Symbol */ +.codehilite .bp { color: #87afaf } /* Name.Builtin.Pseudo */ +.codehilite .fm { color: #fdd0c0 } /* Name.Function.Magic */ +.codehilite .vc { color: #ddd0c0 } /* Name.Variable.Class */ +.codehilite .vg { color: #ddd0c0 } /* Name.Variable.Global */ +.codehilite .vi { color: #ddd0c0 } /* Name.Variable.Instance */ +.codehilite .vm { color: #ddd0c0 } /* Name.Variable.Magic */ +.codehilite .il { color: #87afaf } /* Literal.Number.Integer.Long */ diff --git a/theme/neb/static/css/neb-anim.css b/theme/neb/static/css/neb-anim.css new file mode 100644 index 0000000..45de2fd --- /dev/null +++ b/theme/neb/static/css/neb-anim.css @@ -0,0 +1,31 @@ +@property --shine1 { + syntax: '<percentage>'; + initial-value: 0%; + inherits: false; +} + +@property --shine2 { + syntax: '<percentage>'; + initial-value: 0%; + inherits: false; +} + +@keyframes label-shine { + from { + --shine1: 0%; + --shine2: 0%; + } + + 20% { + --shine2: 0%; + } + + 80% { + --shine1: 100%; + } + + 100% { + --shine1: 100%; + --shine2: 100%; + } +} 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; + } + } +} |