diff options
Diffstat (limited to 'site/themes/sine/static/css')
| -rw-r--r-- | site/themes/sine/static/css/style.css | 186 | ||||
| -rw-r--r-- | site/themes/sine/static/css/syntax-old.css | 88 | ||||
| -rw-r--r-- | site/themes/sine/static/css/syntax.css | 146 | ||||
| -rw-r--r-- | site/themes/sine/static/css/themes/oxocarbon-dark.css | 22 | ||||
| -rw-r--r-- | site/themes/sine/static/css/themes/oxocarbon-light.css | 22 |
5 files changed, 464 insertions, 0 deletions
diff --git a/site/themes/sine/static/css/style.css b/site/themes/sine/static/css/style.css new file mode 100644 index 0000000..c14e227 --- /dev/null +++ b/site/themes/sine/static/css/style.css @@ -0,0 +1,186 @@ +/* COLORS */ +@import url('themes/oxocarbon-light.css'); +@import url('themes/oxocarbon-dark.css'); + +#toggleTheme { + font-family: "kirsch"; + font-size: 2rem; + color: var(--fg); + border: none; + background: none; + cursor: pointer; + position: relative; + top: 2px; + margin: -4px 2px; +} + +#logoContainer { + padding-right: 4px; +} + +/* FONT */ + +@font-face { + font-family: "kirsch"; + src: + local("kirsch"), + url("https://cdn.jsdelivr.net/npm/kirsch@latest/out/kirsch.woff2") format("woff2"), + url("https://cdn.jsdelivr.net/npm/kirsch@latest/out/kirsch.ttf") format("truetype"); + font-display: block; +} + +/* LAYOUT */ + +body { + color: var(--fg); + background-color: transparent; + font-size: 175%; + line-height: 1.2; + max-width: 45rem; + padding: 1rem; + margin: 0 auto; + font-family: "kirsch"; + font-display: block; +} + +#main { + margin: 2% auto; + display: flex; + flex-direction: column; + justify-content: center; +} + +#content { + border-style: solid; + border-color: var(--fg); + background-color: var(--bg); + + padding: 3% 5%; + overflow: auto; +} + +/* NAVIGATION */ + +.navbar { + background-color: var(--bg); + border-style: dashed; + border-color: var(--fg); + + font-size: 110%; + + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 10px 20px; + box-sizing: border-box; + + margin-bottom: 2%; +} + +.logo { + flex-shrink: 0; + /* margin: 0 0%; */ +} + +.nav-links { + list-style-type: none; + display: flex; + gap: 20px; + flex-shrink: 0; + /* overflow-x: auto; */ + overflow: visible; + margin: 0; + padding: 0; +} + +.navbar a { + display: inline-block; + white-space: nowrap; + flex-shrink: 0; + + color: var(--fg); + font-weight: bold; + text-decoration: none; +} + +@media (max-width: 768px) { + .nav-links { + gap: 10px; + } +} + +@media (max-width: 480px) { + .nav-links a { + font-size: 14px; + } +} +.main-menu { + display: flex; + list-style: none; + margin: 0; + padding: 0; +} + +@media screen and (max-width: 48rem) { + .site-nav, + .main-menu { + flex-direction: column; + } + + .site-nav a { + padding: 0.5rem; + padding-left: 0; + } +} + +/* Canvas Background */ +#background { + position: fixed; + inset: 0; /* stretch full screen */ + z-index: -1; /* behind content */ + pointer-events: none; /* don’t block clicks */ + display: block; /* remove inline-gap issues */ + + background-color: var(--bg); +} + +/* SINGLES */ +#content * { + margin: 14px 0; +} + +#content h1 { + margin: 0; + text-align: center; +} + +#content ul { + list-style-type: square; +} + +#content li { + margin: 0; +} + +#content a { + color: var(--base0B); +} + +#content a:visited { + color: var(--base0E); +} + +#content footer { + margin-bottom: 0; + text-align: center; +} + +#content footer p { + margin-bottom: 0; +} + +/* SYNTAX HIGHLIGHTING */ +@import url('syntax.css'); diff --git a/site/themes/sine/static/css/syntax-old.css b/site/themes/sine/static/css/syntax-old.css new file mode 100644 index 0000000..5f5478f --- /dev/null +++ b/site/themes/sine/static/css/syntax-old.css @@ -0,0 +1,88 @@ +/* Generated using: hugo gen chromastyles --style=monokai */ + +/* Background */ .bg { color:#f8f8f2;background-color:#272822; } +/* PreWrapper */ .chroma { color:#f8f8f2;background-color:#272822; } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color:#960050;background-color:#1e0010 } +/* CodeLine */ .chroma .cl { } +/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } +/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } +/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } +/* LineHighlight */ .chroma .hl { background-color:#3c3d38 } +/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* Line */ .chroma .line { display:flex; } +/* Keyword */ .chroma .k { color:#66d9ef } +/* KeywordConstant */ .chroma .kc { color:#66d9ef } +/* KeywordDeclaration */ .chroma .kd { color:#66d9ef } +/* KeywordNamespace */ .chroma .kn { color:#f92672 } +/* KeywordPseudo */ .chroma .kp { color:#66d9ef } +/* KeywordReserved */ .chroma .kr { color:#66d9ef } +/* KeywordType */ .chroma .kt { color:#66d9ef } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { color:#a6e22e } +/* NameClass */ .chroma .nc { color:#a6e22e } +/* NameConstant */ .chroma .no { color:#66d9ef } +/* NameDecorator */ .chroma .nd { color:#a6e22e } +/* NameEntity */ .chroma .ni { } +/* NameException */ .chroma .ne { color:#a6e22e } +/* NameLabel */ .chroma .nl { } +/* NameNamespace */ .chroma .nn { } +/* NameOther */ .chroma .nx { color:#a6e22e } +/* NameProperty */ .chroma .py { } +/* NameTag */ .chroma .nt { color:#f92672 } +/* NameBuiltin */ .chroma .nb { } +/* NameBuiltinPseudo */ .chroma .bp { } +/* NameVariable */ .chroma .nv { } +/* NameVariableClass */ .chroma .vc { } +/* NameVariableGlobal */ .chroma .vg { } +/* NameVariableInstance */ .chroma .vi { } +/* NameVariableMagic */ .chroma .vm { } +/* NameFunction */ .chroma .nf { color:#a6e22e } +/* NameFunctionMagic */ .chroma .fm { color:#a6e22e } +/* Literal */ .chroma .l { color:#ae81ff } +/* LiteralDate */ .chroma .ld { color:#e6db74 } +/* LiteralString */ .chroma .s { color:#e6db74 } +/* LiteralStringAffix */ .chroma .sa { color:#e6db74 } +/* LiteralStringBacktick */ .chroma .sb { color:#e6db74 } +/* LiteralStringChar */ .chroma .sc { color:#e6db74 } +/* LiteralStringDelimiter */ .chroma .dl { color:#e6db74 } +/* LiteralStringDoc */ .chroma .sd { color:#e6db74 } +/* LiteralStringDouble */ .chroma .s2 { color:#e6db74 } +/* LiteralStringEscape */ .chroma .se { color:#ae81ff } +/* LiteralStringHeredoc */ .chroma .sh { color:#e6db74 } +/* LiteralStringInterpol */ .chroma .si { color:#e6db74 } +/* LiteralStringOther */ .chroma .sx { color:#e6db74 } +/* LiteralStringRegex */ .chroma .sr { color:#e6db74 } +/* LiteralStringSingle */ .chroma .s1 { color:#e6db74 } +/* LiteralStringSymbol */ .chroma .ss { color:#e6db74 } +/* LiteralNumber */ .chroma .m { color:#ae81ff } +/* LiteralNumberBin */ .chroma .mb { color:#ae81ff } +/* LiteralNumberFloat */ .chroma .mf { color:#ae81ff } +/* LiteralNumberHex */ .chroma .mh { color:#ae81ff } +/* LiteralNumberInteger */ .chroma .mi { color:#ae81ff } +/* LiteralNumberIntegerLong */ .chroma .il { color:#ae81ff } +/* LiteralNumberOct */ .chroma .mo { color:#ae81ff } +/* Operator */ .chroma .o { color:#f92672 } +/* OperatorWord */ .chroma .ow { color:#f92672 } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color:#75715e } +/* CommentHashbang */ .chroma .ch { color:#75715e } +/* CommentMultiline */ .chroma .cm { color:#75715e } +/* CommentSingle */ .chroma .c1 { color:#75715e } +/* CommentSpecial */ .chroma .cs { color:#75715e } +/* CommentPreproc */ .chroma .cp { color:#75715e } +/* CommentPreprocFile */ .chroma .cpf { color:#75715e } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color:#f92672 } +/* GenericEmph */ .chroma .ge { font-style:italic } +/* GenericError */ .chroma .gr { } +/* GenericHeading */ .chroma .gh { } +/* GenericInserted */ .chroma .gi { color:#a6e22e } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { font-weight:bold } +/* GenericSubheading */ .chroma .gu { color:#75715e } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } diff --git a/site/themes/sine/static/css/syntax.css b/site/themes/sine/static/css/syntax.css new file mode 100644 index 0000000..ceb4317 --- /dev/null +++ b/site/themes/sine/static/css/syntax.css @@ -0,0 +1,146 @@ +/* Converted to Base16 variables */ + +/* Background */ +.bg { color: var(--base05); background-color: var(--base00); } + +/* PreWrapper */ +.chroma { color: var(--base05); background-color: var(--base00); } + +/* Other */ +.chroma .x { } + +/* Error */ +.chroma .err { color: var(--base08); background-color: var(--base0F); } + +/* CodeLine */ +.chroma .cl { } + +/* LineLink */ +.chroma .lnlinks { outline:none; text-decoration:none; color:inherit } + +/* LineTableTD */ +.chroma .lntd { vertical-align:top; padding:0; margin:0; border:0; } + +/* LineTable */ +.chroma .lntable { border-spacing:0; padding:0; margin:0; border:0; } + +/* LineHighlight */ +.chroma .hl { background-color: var(--base02); } + +/* LineNumbersTable */ +.chroma .lnt { + white-space:pre; + -webkit-user-select:none; + user-select:none; + margin-right:0.4em; + padding:0 0.4em 0 0.4em; + color: var(--base03); +} + +/* LineNumbers */ +.chroma .ln { + white-space:pre; + -webkit-user-select:none; + user-select:none; + margin-right:0.4em; + padding:0 0.4em 0 0.4em; + color: var(--base03); +} + +/* Line */ +.chroma .line { display:flex; } + +/* Keyword */ +.chroma .k, +.chroma .kc, +.chroma .kd, +.chroma .kp, +.chroma .kr, +.chroma .kt { color: var(--base0E); } + +/* KeywordNamespace */ +.chroma .kn { color: var(--base08); } + +/* Name */ +.chroma .n { } + +/* NameAttribute */ +.chroma .na, +.chroma .nc, +.chroma .nd, +.chroma .ne, +.chroma .nx, +.chroma .nf, +.chroma .fm { color: var(--base0D); } + +/* NameConstant */ +.chroma .no { color: var(--base09); } + +/* NameTag */ +.chroma .nt { color: var(--base08); } + +/* Literal */ +.chroma .l, +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .il, +.chroma .mo { color: var(--base09); } + +/* LiteralDate */ +.chroma .ld, +.chroma .s, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .dl, +.chroma .sd, +.chroma .s2, +.chroma .sh, +.chroma .si, +.chroma .sx, +.chroma .sr, +.chroma .s1, +.chroma .ss { color: var(--base0B); } + +/* LiteralStringEscape */ +.chroma .se { color: var(--base0C); } + +/* Operator */ +.chroma .o, +.chroma .ow { color: var(--base08); } + +/* Comment */ +.chroma .c, +.chroma .ch, +.chroma .cm, +.chroma .c1, +.chroma .cs, +.chroma .cp, +.chroma .cpf { color: var(--base03); } + +/* GenericDeleted */ +.chroma .gd { color: var(--base08); } + +/* GenericEmph */ +.chroma .ge { font-style:italic } + +/* GenericInserted */ +.chroma .gi { color: var(--base0B); } + +/* GenericStrong */ +.chroma .gs { font-weight:bold } + +/* GenericSubheading */ +.chroma .gu { color: var(--base03); } + +/* GenericHeading, Output, Prompt, Traceback, etc. left unstyled */ +.chroma .gr, +.chroma .gh, +.chroma .go, +.chroma .gp, +.chroma .gt, +.chroma .gl, +.chroma .w { } diff --git a/site/themes/sine/static/css/themes/oxocarbon-dark.css b/site/themes/sine/static/css/themes/oxocarbon-dark.css new file mode 100644 index 0000000..3283009 --- /dev/null +++ b/site/themes/sine/static/css/themes/oxocarbon-dark.css @@ -0,0 +1,22 @@ +/* COLORS */ +[data-theme="dark"] { + --base00: #161616; + --base01: #262626; + --base02: #393939; + --base03: #525252; + --base04: #dde1e6; + --base05: #f2f4f8; + --base06: #ffffff; + --base07: #08bdba; + --base08: #3ddbd9; + --base09: #78a9ff; + --base0A: #ee5396; + --base0B: #33b1ff; + --base0C: #ff7eb6; + --base0D: #42be65; + --base0E: #be95ff; + --base0F: #82cfff; + + --fg: var(--base06); + --bg: var(--base00); +} diff --git a/site/themes/sine/static/css/themes/oxocarbon-light.css b/site/themes/sine/static/css/themes/oxocarbon-light.css new file mode 100644 index 0000000..7cd48ee --- /dev/null +++ b/site/themes/sine/static/css/themes/oxocarbon-light.css @@ -0,0 +1,22 @@ +/* COLORS */ +[data-theme="light"] { + --base00: #ffffff; + --base01: #f2f2f2; + --base02: #d0d0d0; + --base03: #161616; + --base04: #37474f; + --base05: #90a4ae; + --base06: #525252; + --base07: #08bdba; + --base08: #ff7eb6; + --base09: #ee5396; + --base0A: #FF6F00; + --base0B: #0f62fe; + --base0C: #673ab7; + --base0D: #42be65; + --base0E: #be95ff; + --base0F: #ffab91; + + --fg: var(--base03); + --bg: var(--base00); +} |
