diff --git a/.supermacy.yml b/.supermacy.yml index c154d48..c4bb088 100644 --- a/.supermacy.yml +++ b/.supermacy.yml @@ -1,2 +1,2 @@ -stylusSupremacy.insertSemicolons: false -stylusSupremacy.insertBraces: false \ No newline at end of file +stylusSupremacy.insertSemicolons: true +stylusSupremacy.insertBraces: true \ No newline at end of file diff --git a/layout/partial/head.pug b/layout/partial/head.pug index 6f37c02..85d0e2b 100644 --- a/layout/partial/head.pug +++ b/layout/partial/head.pug @@ -23,12 +23,11 @@ meta#default-theme(data=theme.defaultTheme == "dark-mode" ? "dark" : "light") meta(name="renderer", content="webkit") link(rel="shortcut icon", type="image/x-icon", href=url_for(theme.favicon)) +link(rel="stylesheet", href=url_for("js_complied/bundle.css")) link(rel="stylesheet", href=url_for("css/theme/" + (theme.defaultTheme == "dark-mode" ? "dark" : "light") + ".css")) link(rel="stylesheet", href=url_for("css/style.css")) link(rel="stylesheet", href=url_for("css/blog_basic.css")) link(rel="stylesheet", href=url_for("css/font-awesome.min.css")) -link(rel="stylesheet", href=url_for("css/insight.css")) -link(rel="stylesheet", href=url_for("css/search.css")) link(rel="alternate", type="application/atom+xml", title="ATOM 1.0", href="/atom.xml") link(rel="preconnect", href="https://fonts.googleapis.com") diff --git a/package.json b/package.json index aa7629a..312e834 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "scripts": { "format:stylus": "stylus-supremacy format ./source/css/**/*.styl -r --options .supermacy.yml", - "format:pretty": "prettier --write ./layout/**/*.pug", + "format:pretty": "prettier --write ./{layout,src}/**/*.{pug,scss}", "format:biome": "biome format --write includes languages scripts source src", "lint": "eslint . --fix", "format": "pnpm format:stylus && pnpm format:biome && pnpm format:pretty", @@ -16,6 +16,7 @@ "hexo-renderer-pug": "^0.0.5", "hexo-renderer-stylus": "^0.2.3", "rollup": "^4.21.2", + "rollup-plugin-sass": "^1.13.2", "typescript": "^5.5.4" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f56b3b2..296c6dc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: rollup: specifier: ^4.21.2 version: 4.21.2 + rollup-plugin-sass: + specifier: ^1.13.2 + version: 1.13.2(rollup@4.21.2) typescript: specifier: ^5.5.4 version: 5.5.4 @@ -755,6 +758,9 @@ packages: resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==} engines: {node: '>= 4'} + immutable@4.3.7: + resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==} + import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -1131,6 +1137,10 @@ packages: resolution: {integrity: sha512-yqINtL/G7vs2v+dFIZmFUDbnVyFUJFKd6gK22Kgo6R4jfJGFtisKyncWDDULgjfqf4ASQuIQyjJ7XZ+3aWpsAg==} engines: {node: '>=0.10.0'} + rollup-plugin-sass@1.13.2: + resolution: {integrity: sha512-Ff+NePHCWpLKzcb7k8D+v1c7+I6DyFXJyLYF6MBkt24ei6Gsp4WMRZv1i/EtTZF980b5eWKjQpxLXDZh2CSXwA==} + engines: {node: '>=10'} + rollup@4.21.2: resolution: {integrity: sha512-e3TapAgYf9xjdLvKQCkQTnbTKd4a6jwlpQSJJFokHGaX2IVjoEqkIIhiQfqsi0cdwlOD+tQGuOd5AJkc5RngBw==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} @@ -1139,6 +1149,11 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} + sass@1.78.0: + resolution: {integrity: sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==} + engines: {node: '>=14.0.0'} + hasBin: true + sax@0.5.8: resolution: {integrity: sha512-c0YL9VcSfcdH3F1Qij9qpYJFpKFKMXNOkLWFssBL3RuF7ZS8oZhllR2rWlCRjDTJsfq3R6wbSsaRU6o0rkEdNw==} @@ -1167,6 +1182,10 @@ packages: sigmund@1.0.1: resolution: {integrity: sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==} + source-map-js@1.2.1: + resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} + engines: {node: '>=0.10.0'} + source-map@0.1.43: resolution: {integrity: sha512-VtCvB9SIQhk3aF6h+N85EaqIaBFIAfZ9Cu+NJHHVvc8BbEcnvDcFw6sqQ2dQrT6SlOrZq3tIvyD9+EGq/lJryQ==} engines: {node: '>=0.8.0'} @@ -2021,6 +2040,8 @@ snapshots: ignore@5.3.1: {} + immutable@4.3.7: {} + import-fresh@3.3.0: dependencies: parent-module: 1.0.1 @@ -2389,6 +2410,14 @@ snapshots: dependencies: align-text: 0.1.4 + rollup-plugin-sass@1.13.2(rollup@4.21.2): + dependencies: + '@rollup/pluginutils': 5.1.0(rollup@4.21.2) + resolve: 1.22.8 + sass: 1.78.0 + transitivePeerDependencies: + - rollup + rollup@4.21.2: dependencies: '@types/estree': 1.0.5 @@ -2415,6 +2444,12 @@ snapshots: dependencies: queue-microtask: 1.2.3 + sass@1.78.0: + dependencies: + chokidar: 3.0.2 + immutable: 4.3.7 + source-map-js: 1.2.1 + sax@0.5.8: {} sax@1.2.4: {} @@ -2440,6 +2475,8 @@ snapshots: sigmund@1.0.1: {} + source-map-js@1.2.1: {} + source-map@0.1.43: dependencies: amdefine: 1.0.1 diff --git a/rollup.config.mjs b/rollup.config.mjs index bf75298..b8a5f51 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -1,4 +1,5 @@ import resolve from '@rollup/plugin-node-resolve'; +import sass from 'rollup-plugin-sass'; import { defineConfig } from 'rollup'; import swc from 'unplugin-swc'; @@ -23,6 +24,9 @@ export default defineConfig([ }, }, }), + sass({ + output: true, + }), ], }, ]); diff --git a/source/css/blog_basic.styl b/source/css/blog_basic.styl index f91b5bb..53569e7 100644 --- a/source/css/blog_basic.styl +++ b/source/css/blog_basic.styl @@ -1,1189 +1,1532 @@ -.tip - position: relative - margin: 2em 0 - padding: 12px 24px 12px 30px - border-left: 4px solid #f66 - border-top-right-radius: 2px - border-bottom-right-radius: 2px - background-color: var(--secondary-950) - - br +.tip { + position: relative; + margin: 2em 0; + padding: 12px 24px 12px 30px; + border-left: 4px solid #f66; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + background-color: var(--secondary-950); + + br { /* *display: none* */ + } + + &:before { + position: absolute; + top: 14px; + left: -12px; + content: '!'; + width: 20px; + height: 20px; + border-radius: 100%; + transition: color 0.8s; + color: var(--secondary); + font-size: 14px; + line-height: 20px; + font-weight: bold; + text-align: center; + background-color: #f66; + font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; + } +} + +.content>.post>.post-content>p { + word-wrap: break-word; + word-break: break-all; +} + +#ds-thread, #disqus_thread, #cloud-tie-wrapper { + margin: 0 30px !important; +} + +pre { + font-size: 15px; + background-color: var(--secondary-950) !important; + font-family: 'mononoki', 'Consolas', 'Roboto Mono', 'Lucida Console', 'Trebuchet MS', 'Courier New', 'Monaco', 'courier', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Jhenghei', 'Microsoft YaHei', monospace !important; +} + +figure.highlight { + position: relative !important; + margin: 1em 0 !important; + border-radius: 2px !important; + line-height: 1.1em !important; + background-color: var(--secondary-950) !important; + overflow-x: auto !important; + padding-left: 1em; + + table, tr, td { + width: 100% !important; + border-collapse: collapse !important; + padding: 0 !important; + margin: 0 !important; + } + + .gutter { + width: fit-content !important; + line-height: 1.5em !important; + font-size: 15px; + padding: 0em 1em 0em 0em !important; + user-select: none; + + pre { + color: rgb(212, 148, 75) !important; + } + } + + body.disable-line-number & .gutter { + display: none; + } + + .code pre { + padding: 1.2em 1em 1.2em 0 !important; + line-height: 1.5em !important; + margin: 0 !important; + } + + .code:after { + position: absolute !important; + top: 0 !important; + right: 0 !important; + color: #ccc !important; + text-align: right !important; + font-size: 0.75em !important; + padding: 5px 10px 0 !important; + line-height: 15px !important; + height: 15px !important; + font-weight: 600 !important; + } + + mixcontent(txt) { + .code:after { + content: txt; + } + } + + &.1c { + mixcontent('1C'); + } + + &.4d { + mixcontent('4D'); + } + + &.sap-abap, &.abap { + mixcontent('ABAP'); + } + + &.abnf { + mixcontent('ABNF'); + } + + &.accesslog { + mixcontent('Access logs'); + } + + &.ada { + mixcontent('Ada'); + } + + &.apex { + mixcontent('Apex'); + } + + &.arduino, &.ino { + mixcontent('Arduino (C++ w/Arduino libs)'); + } + + &.armasm, &.arm { + mixcontent('ARM assembler'); + } + + &.avrasm { + mixcontent('AVR assembler'); + } + + &.actionscript, &.as { + mixcontent('ActionScript'); + } + + &.alan, &.i { + mixcontent('Alan IF'); + } + + &.ln { + mixcontent('Alan'); + } + + &.angelscript, &.asc { + mixcontent('AngelScript'); + } + + &.apache, &.apacheconf { + mixcontent('Apache'); + } + + &.applescript, &.osascript { + mixcontent('AppleScript'); + } + + &.arcade { + mixcontent('Arcade'); + } + + &.asciidoc, &.adoc { + mixcontent('AsciiDoc'); + } + + &.aspectj { + mixcontent('AspectJ'); + } + + &.autohotkey { + mixcontent('AutoHotkey'); + } + + &.autoit { + mixcontent('AutoIt'); + } + + &.awk, &.mawk, &.nawk, &.gawk { + mixcontent('Awk'); + } + + &.ballerina, &.bal { + mixcontent('Ballerina'); + } - &:before - position: absolute - top: 14px - left: -12px - content: '!' - width: 20px - height: 20px - border-radius: 100% - transition: color 0.8s - color: var(--secondary) - font-size: 14px - line-height: 20px - font-weight: bold - text-align: center - background-color: #f66 - font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif - -.content>.post>.post-content>p - word-wrap: break-word - word-break: break-all - -#ds-thread, #disqus_thread, #cloud-tie-wrapper - margin: 0 30px !important - -pre - font-size: 15px - background-color: var(--secondary-950) !important - font-family: 'mononoki', 'Consolas', 'Roboto Mono', 'Lucida Console', 'Trebuchet MS', 'Courier New', 'Monaco', 'courier', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Jhenghei', 'Microsoft YaHei', monospace !important - -figure.highlight - position: relative !important - margin: 1em 0 !important - border-radius: 2px !important - line-height: 1.1em !important - background-color: var(--secondary-950) !important - overflow-x: auto !important - padding-left: 1em - - table, tr, td - width: 100% !important - border-collapse: collapse !important - padding: 0 !important - margin: 0 !important - - .gutter - width: fit-content !important - line-height: 1.5em !important - font-size: 15px - padding: 0em 1em 0em 0em !important - user-select: none - - pre - color: rgb(212, 148, 75) !important + &.bash, &.sh, &.zsh { + mixcontent('Bash'); + } - body.disable-line-number & .gutter - display: none + &.basic { + mixcontent('Basic'); + } - .code pre - padding: 1.2em 1em 1.2em 0 !important - line-height: 1.5em !important - margin: 0 !important + &.bbcode { + mixcontent('BBCode'); + } - .code:after - position: absolute !important - top: 0 !important - right: 0 !important - color: #ccc !important - text-align: right !important - font-size: 0.75em !important - padding: 5px 10px 0 !important - line-height: 15px !important - height: 15px !important - font-weight: 600 !important + &.blade { + mixcontent('Blade (Laravel)'); + } - mixcontent(txt) - .code:after - content: txt + &.bnf { + mixcontent('BNF'); + } - &.1c - mixcontent('1C') + &.bqn { + mixcontent('BQN'); + } - &.4d - mixcontent('4D') + &.brainfuck, &.bf { + mixcontent('Brainfuck'); + } - &.sap-abap, &.abap - mixcontent('ABAP') + &.csharp, &.cs { + mixcontent('C#'); + } - &.abnf - mixcontent('ABNF') + &.c, &.h { + mixcontent('C'); + } - &.accesslog - mixcontent('Access logs') + &.cpp, &.hpp, &.cc, &.hh, &.cxx, &.hxx, &.c\\\+\\\+, &.h\\\+\\\+ { + mixcontent('C++'); + } - &.ada - mixcontent('Ada') + &.cal { + mixcontent('C/AL'); + } - &.apex - mixcontent('Apex') + &.c3 { + mixcontent('C3'); + } - &.arduino, &.ino - mixcontent('Arduino (C++ w/Arduino libs)') + &.cos, &.cls { + mixcontent('Cache Object Script'); + } - &.armasm, &.arm - mixcontent('ARM assembler') + &.candid, &.did { + mixcontent('Candid'); + } - &.avrasm - mixcontent('AVR assembler') + &.cmake { + mixcontent('CMake'); + } - &.actionscript, &.as - mixcontent('ActionScript') + &.cobol, &.standard-cobol { + mixcontent('COBOL'); + } - &.alan, &.i - mixcontent('Alan IF') + &.codeowners { + mixcontent('CODEOWNERS'); + } - &.ln - mixcontent('Alan') + &.coq { + mixcontent('Coq'); + } - &.angelscript, &.asc - mixcontent('AngelScript') + &.csp { + mixcontent('CSP'); + } - &.apache, &.apacheconf - mixcontent('Apache') + &.css { + mixcontent('CSS'); + } - &.applescript, &.osascript - mixcontent('AppleScript') + &.capnproto, &.capnp { + mixcontent('Cap’n Proto'); + } - &.arcade - mixcontent('Arcade') + &.chaos, &.kaos { + mixcontent('Chaos'); + } - &.asciidoc, &.adoc - mixcontent('AsciiDoc') + &.chapel, &.chpl { + mixcontent('Chapel'); + } - &.aspectj - mixcontent('AspectJ') + &.cisco { + mixcontent('Cisco CLI'); + } - &.autohotkey - mixcontent('AutoHotkey') + &.clojure, &.clj { + mixcontent('Clojure'); + } - &.autoit - mixcontent('AutoIt') + &.coffeescript, &.coffee, &.cson, &.iced { + mixcontent('CoffeeScript'); + } - &.awk, &.mawk, &.nawk, &.gawk - mixcontent('Awk') + &.cpc { + mixcontent('CpcdosC+'); + } - &.ballerina, &.bal - mixcontent('Ballerina') + &.crmsh, &.crm, &.pcmk { + mixcontent('Crmsh'); + } - &.bash, &.sh, &.zsh - mixcontent('Bash') + &.crystal, &.cr { + mixcontent('Crystal'); + } - &.basic - mixcontent('Basic') + &.curl { + mixcontent('cURL'); + } - &.bbcode - mixcontent('BBCode') + &.cypher { + mixcontent('Cypher (Neo4j)'); + } - &.blade - mixcontent('Blade (Laravel)') + &.d { + mixcontent('D'); + } - &.bnf - mixcontent('BNF') + &.dafny { + mixcontent('Dafny'); + } - &.bqn - mixcontent('BQN') + &.dart { + mixcontent('Dart'); + } - &.brainfuck, &.bf - mixcontent('Brainfuck') + &.dpr, &.dfm, &.pas, &.pascal { + mixcontent('Delphi'); + } - &.csharp, &.cs - mixcontent('C#') + &.diff, &.patch { + mixcontent('Diff'); + } - &.c, &.h - mixcontent('C') + &.django, &.jinja { + mixcontent('Django'); + } - &.cpp, &.hpp, &.cc, &.hh, &.cxx, &.hxx, &.c\\\+\\\+, &.h\\\+\\\+ - mixcontent('C++') + &.dns, &.zone, &.bind { + mixcontent('DNS Zone file'); + } - &.cal - mixcontent('C/AL') + &.dockerfile, &.docker { + mixcontent('Dockerfile'); + } - &.c3 - mixcontent('C3') + &.dos, &.bat, &.cmd { + mixcontent('DOS'); + } - &.cos, &.cls - mixcontent('Cache Object Script') + &.dsconfig { + mixcontent('dsconfig'); + } - &.candid, &.did - mixcontent('Candid') + &.dts { + mixcontent('DTS (Device Tree)'); + } - &.cmake - mixcontent('CMake') + &.dust, &.dst { + mixcontent('Dust'); + } - &.cobol, &.standard-cobol - mixcontent('COBOL') + &.dylan { + mixcontent('Dylan'); + } - &.codeowners - mixcontent('CODEOWNERS') + &.ebnf { + mixcontent('EBNF'); + } - &.coq - mixcontent('Coq') + &.elixir { + mixcontent('Elixir'); + } - &.csp - mixcontent('CSP') + &.elm { + mixcontent('Elm'); + } - &.css - mixcontent('CSS') + &.erlang, &.erl { + mixcontent('Erlang'); + } - &.capnproto, &.capnp - mixcontent('Cap’n Proto') + &.excel, &.xls, &.xlsx { + mixcontent('Excel'); + } - &.chaos, &.kaos - mixcontent('Chaos') + &.extempore, &.xtlang, &.xtm { + mixcontent('Extempore'); + } - &.chapel, &.chpl - mixcontent('Chapel') + &.fsharp, &.fs, &.fsx, &.fsi, &.fsscript { + mixcontent('F#'); + } - &.cisco - mixcontent('Cisco CLI') + &.fix { + mixcontent('FIX'); + } - &.clojure, &.clj - mixcontent('Clojure') + &.flix { + mixcontent('Flix'); + } - &.coffeescript, &.coffee, &.cson, &.iced - mixcontent('CoffeeScript') + &.fortran, &.f90, &.f95 { + mixcontent('Fortran'); + } - &.cpc - mixcontent('CpcdosC+') + &.func { + mixcontent('FunC'); + } - &.crmsh, &.crm, &.pcmk - mixcontent('Crmsh') + &.gcode, &.nc { + mixcontent('G-Code'); + } - &.crystal, &.cr - mixcontent('Crystal') + &.gams, &.gms { + mixcontent('Gams'); + } - &.curl - mixcontent('cURL') + &.gauss, &.gss { + mixcontent('GAUSS'); + } - &.cypher - mixcontent('Cypher (Neo4j)') + &.godot, &.gdscript { + mixcontent('GDScript'); + } - &.d - mixcontent('D') + &.gherkin { + mixcontent('Gherkin'); + } - &.dafny - mixcontent('Dafny') + &.hbs, &.glimmer, &.htmlbars { + mixcontent('Glimmer and EmberJS'); + } - &.dart - mixcontent('Dart') + &.gn, &.gni { + mixcontent('GN for Ninja'); + } - &.dpr, &.dfm, &.pas, &.pascal - mixcontent('Delphi') + &.go, &.golang { + mixcontent('Go'); + } - &.diff, &.patch - mixcontent('Diff') + &.gf { + mixcontent('Grammatical Framework'); + } - &.django, &.jinja - mixcontent('Django') + &.golo, &.gololang { + mixcontent('Golo'); + } - &.dns, &.zone, &.bind - mixcontent('DNS Zone file') + &.gradle { + mixcontent('Gradle'); + } - &.dockerfile, &.docker - mixcontent('Dockerfile') + &.graphql, &.gql { + mixcontent('GraphQL'); + } - &.dos, &.bat, &.cmd - mixcontent('DOS') + &.groovy { + mixcontent('Groovy'); + } - &.dsconfig - mixcontent('dsconfig') + &.gsql { + mixcontent('GSQL'); + } - &.dts - mixcontent('DTS (Device Tree)') + &.xml, &.html, &.xhtml, &.rss, &.atom, &.xjb, &.xsd, &.xsl, &.plist, &.svg { + mixcontent('HTML, XML'); + } - &.dust, &.dst - mixcontent('Dust') + &.http, &.https { + mixcontent('HTTP'); + } - &.dylan - mixcontent('Dylan') + &.haml { + mixcontent('Haml'); + } - &.ebnf - mixcontent('EBNF') + &.handlebars, &.hbs { + mixcontent('Handlebars'); + } - &.elixir - mixcontent('Elixir') + &.haskell, &.hs { + mixcontent('Haskell'); + } - &.elm - mixcontent('Elm') + &.haxe, &.hx { + mixcontent('Haxe'); + } - &.erlang, &.erl - mixcontent('Erlang') + &.hlsl { + mixcontent('High-level shader language'); + } - &.excel, &.xls, &.xlsx - mixcontent('Excel') + &.hy, &.hylang { + mixcontent('Hy'); + } - &.extempore, &.xtlang, &.xtm - mixcontent('Extempore') + &.ini, &.toml { + mixcontent('Ini, TOML'); + } - &.fsharp, &.fs, &.fsx, &.fsi, &.fsscript - mixcontent('F#') + &.inform7, &.i7 { + mixcontent('Inform7'); + } - &.fix - mixcontent('FIX') + &.irpf90 { + mixcontent('IRPF90'); + } - &.flix - mixcontent('Flix') + &.iptables { + mixcontent('Iptables'); + } - &.fortran, &.f90, &.f95 - mixcontent('Fortran') + &.json, &.jsonc { + mixcontent('JSON'); + } - &.func - mixcontent('FunC') + &.java, &.jsp { + mixcontent('Java'); + } - &.gcode, &.nc - mixcontent('G-Code') + &.javascript, &.js, &.jsx { + mixcontent('JavaScript'); + } - &.gams, &.gms - mixcontent('Gams') + &.jolie, &.iol, &.ol { + mixcontent('Jolie'); + } - &.gauss, &.gss - mixcontent('GAUSS') + &.julia, &.jl { + mixcontent('Julia'); + } - &.godot, &.gdscript - mixcontent('GDScript') + &.julia-repl { + mixcontent('Julia REPL'); + } - &.gherkin - mixcontent('Gherkin') + &.kotlin, &.kt { + mixcontent('Kotlin'); + } - &.hbs, &.glimmer, &.htmlbars - mixcontent('Glimmer and EmberJS') + &.lang { + mixcontent('Lang'); + } - &.gn, &.gni - mixcontent('GN for Ninja') + &.tex { + mixcontent('LaTeX'); + } - &.go, &.golang - mixcontent('Go') + &.leaf { + mixcontent('Leaf'); + } - &.gf - mixcontent('Grammatical Framework') + &.lean { + mixcontent('Lean'); + } - &.golo, &.gololang - mixcontent('Golo') + &.lasso, &.ls, &.lassoscript { + mixcontent('Lasso'); + } - &.gradle - mixcontent('Gradle') + &.less { + mixcontent('Less'); + } - &.graphql, &.gql - mixcontent('GraphQL') + &.ldif { + mixcontent('LDIF'); + } - &.groovy - mixcontent('Groovy') + &.lisp { + mixcontent('Lisp'); + } - &.gsql - mixcontent('GSQL') + &.livecodeserver { + mixcontent('LiveCode Server'); + } - &.xml, &.html, &.xhtml, &.rss, &.atom, &.xjb, &.xsd, &.xsl, &.plist, &.svg - mixcontent('HTML, XML') + &.livescript, &.ls { + mixcontent('LiveScript'); + } - &.http, &.https - mixcontent('HTTP') + &.lookml { + mixcontent('LookML'); + } - &.haml - mixcontent('Haml') + &.lua { + mixcontent('Lua'); + } - &.handlebars, &.hbs - mixcontent('Handlebars') + &.luau { + mixcontent('Luau'); + } - &.haskell, &.hs - mixcontent('Haskell') + &.macaulay2 { + mixcontent('Macaulay2'); + } - &.haxe, &.hx - mixcontent('Haxe') + &.makefile, &.mk, &.mak, &.make { + mixcontent('Makefile'); + } - &.hlsl - mixcontent('High-level shader language') + &.markdown, &.md, &.mkdown, &.mkd { + mixcontent('Markdown'); + } - &.hy, &.hylang - mixcontent('Hy') + &.mathematica, &.mma, &.wl { + mixcontent('Mathematica'); + } - &.ini, &.toml - mixcontent('Ini, TOML') + &.matlab { + mixcontent('Matlab'); + } - &.inform7, &.i7 - mixcontent('Inform7') + &.maxima { + mixcontent('Maxima'); + } - &.irpf90 - mixcontent('IRPF90') + &.mel { + mixcontent('Maya Embedded Language'); + } - &.iptables - mixcontent('Iptables') + &.mercury { + mixcontent('Mercury'); + } - &.json, &.jsonc - mixcontent('JSON') + &.mips, &.mipsasm { + mixcontent('MIPS Assembler'); + } - &.java, &.jsp - mixcontent('Java') + &.mint { + mixcontent('Mint'); + } - &.javascript, &.js, &.jsx - mixcontent('JavaScript') + &.mirth { + mixcontent('Mirth'); + } - &.jolie, &.iol, &.ol - mixcontent('Jolie') + &.mirc, &.mrc { + mixcontent('mIRC Scripting Language'); + } - &.julia, &.jl - mixcontent('Julia') + &.mizar { + mixcontent('Mizar'); + } - &.julia-repl - mixcontent('Julia REPL') + &.mkb { + mixcontent('MKB'); + } - &.kotlin, &.kt - mixcontent('Kotlin') + &.mlir { + mixcontent('MLIR'); + } - &.lang - mixcontent('Lang') + &.mojolicious { + mixcontent('Mojolicious'); + } - &.tex - mixcontent('LaTeX') + &.monkey { + mixcontent('Monkey'); + } - &.leaf - mixcontent('Leaf') + &.moonscript, &.moon { + mixcontent('Moonscript'); + } - &.lean - mixcontent('Lean') + &.motoko, &.mo { + mixcontent('Motoko'); + } - &.lasso, &.ls, &.lassoscript - mixcontent('Lasso') + &.n1ql { + mixcontent('N1QL'); + } - &.less - mixcontent('Less') + &.nsis { + mixcontent('NSIS'); + } - &.ldif - mixcontent('LDIF') + &.never { + mixcontent('Never'); + } - &.lisp - mixcontent('Lisp') + &.nginx, &.nginxconf { + mixcontent('Nginx'); + } - &.livecodeserver - mixcontent('LiveCode Server') + &.nim, &.nimrod { + mixcontent('Nim'); + } - &.livescript, &.ls - mixcontent('LiveScript') + &.nix { + mixcontent('Nix'); + } - &.lookml - mixcontent('LookML') + &.oak { + mixcontent('Oak'); + } - &.lua - mixcontent('Lua') + &.ocl { + mixcontent('Object Constraint Language'); + } - &.luau - mixcontent('Luau') + &.ocaml, &.ml { + mixcontent('OCaml'); + } - &.macaulay2 - mixcontent('Macaulay2') + &.objectivec, &.mm, &.objc, &.obj-c { + mixcontent('Objective C'); + } - &.makefile, &.mk, &.mak, &.make - mixcontent('Makefile') + &.glsl { + mixcontent('OpenGL Shading Language'); + } - &.markdown, &.md, &.mkdown, &.mkd - mixcontent('Markdown') + &.openscad, &.scad { + mixcontent('OpenSCAD'); + } - &.mathematica, &.mma, &.wl - mixcontent('Mathematica') + &.ruleslanguage { + mixcontent('Oracle Rules Language'); + } - &.matlab - mixcontent('Matlab') + &.oxygene { + mixcontent('Oxygene'); + } - &.maxima - mixcontent('Maxima') + &.pf { + mixcontent('PF'); + } - &.mel - mixcontent('Maya Embedded Language') + &.php { + mixcontent('PHP'); + } - &.mercury - mixcontent('Mercury') + &.papyrus, &.psc { + mixcontent('Papyrus'); + } - &.mips, &.mipsasm - mixcontent('MIPS Assembler') + &.parser3 { + mixcontent('Parser3'); + } - &.mint - mixcontent('Mint') + &.perl, &.pl, &.pm { + mixcontent('Perl'); + } - &.mirth - mixcontent('Mirth') + &.phix { + mixcontent('Phix'); + } - &.mirc, &.mrc - mixcontent('mIRC Scripting Language') + &.pine, &.pinescript { + mixcontent('Pine Script'); + } - &.mizar - mixcontent('Mizar') + &.plaintext, &.txt, &.text { + mixcontent('Plaintext'); + } - &.mkb - mixcontent('MKB') + &.pony { + mixcontent('Pony'); + } - &.mlir - mixcontent('MLIR') + &.pgsql, &.postgres, &.postgresql { + mixcontent('PostgreSQL & PL/pgSQL'); + } - &.mojolicious - mixcontent('Mojolicious') + &.powershell, &.ps, &.ps1 { + mixcontent('PowerShell'); + } - &.monkey - mixcontent('Monkey') + &.processing { + mixcontent('Processing'); + } - &.moonscript, &.moon - mixcontent('Moonscript') + &.prolog { + mixcontent('Prolog'); + } - &.motoko, &.mo - mixcontent('Motoko') + &.properties { + mixcontent('Properties'); + } - &.n1ql - mixcontent('N1QL') + &.proto, &.protobuf { + mixcontent('Protocol Buffers'); + } - &.nsis - mixcontent('NSIS') + &.puppet, &.pp { + mixcontent('Puppet'); + } - &.never - mixcontent('Never') + &.python, &.py, &.gyp { + mixcontent('Python'); + } - &.nginx, &.nginxconf - mixcontent('Nginx') + &.profile { + mixcontent('Python profiler results'); + } - &.nim, &.nimrod - mixcontent('Nim') + &.python-repl, &.pycon { + mixcontent('Python REPL'); + } - &.nix - mixcontent('Nix') + &.qsharp { + mixcontent('Q#'); + } - &.oak - mixcontent('Oak') + &.k, &.kdb { + mixcontent('Q'); + } - &.ocl - mixcontent('Object Constraint Language') + &.qml { + mixcontent('QML'); + } - &.ocaml, &.ml - mixcontent('OCaml') + &.r { + mixcontent('R'); + } - &.objectivec, &.mm, &.objc, &.obj-c - mixcontent('Objective C') + &.cshtml, &.razor, &.razor-cshtml { + mixcontent('Razor CSHTML'); + } - &.glsl - mixcontent('OpenGL Shading Language') + &.reasonml, &.re { + mixcontent('ReasonML'); + } - &.openscad, &.scad - mixcontent('OpenSCAD') + &.redbol, &.rebol, &.red, &.red-system { + mixcontent('Rebol & Red'); + } - &.ruleslanguage - mixcontent('Oracle Rules Language') + &.rib { + mixcontent('RenderMan RIB'); + } - &.oxygene - mixcontent('Oxygene') + &.rsl { + mixcontent('RenderMan RSL'); + } - &.pf - mixcontent('PF') + &.rescript, &.res { + mixcontent('ReScript'); + } - &.php - mixcontent('PHP') + &.risc, &.riscript { + mixcontent('RiScript'); + } - &.papyrus, &.psc - mixcontent('Papyrus') + &.riscv, &.riscvasm { + mixcontent('RISC-V Assembly'); + } - &.parser3 - mixcontent('Parser3') + &.graph, &.instances { + mixcontent('Roboconf'); + } - &.perl, &.pl, &.pm - mixcontent('Perl') + &.robot, &.rf { + mixcontent('Robot Framework'); + } - &.phix - mixcontent('Phix') + &.rpm-specfile, &.rpm, &.spec, &.rpm-spec, &.specfile { + mixcontent('RPM spec files'); + } - &.pine, &.pinescript - mixcontent('Pine Script') + &.ruby, &.rb, &.gemspec, &.podspec, &.thor, &.irb { + mixcontent('Ruby'); + } - &.plaintext, &.txt, &.text - mixcontent('Plaintext') + &.rust, &.rs { + mixcontent('Rust'); + } - &.pony - mixcontent('Pony') + &.rvt, &.rvt-script { + mixcontent('RVT Script'); + } - &.pgsql, &.postgres, &.postgresql - mixcontent('PostgreSQL & PL/pgSQL') + &.sas { + mixcontent('SAS'); + } - &.powershell, &.ps, &.ps1 - mixcontent('PowerShell') + &.scss { + mixcontent('SCSS'); + } - &.processing - mixcontent('Processing') + &.sql { + mixcontent('SQL'); + } - &.prolog - mixcontent('Prolog') + &.p21, &.step, &.stp { + mixcontent('STEP Part 21'); + } - &.properties - mixcontent('Properties') + &.scala { + mixcontent('Scala'); + } - &.proto, &.protobuf - mixcontent('Protocol Buffers') + &.scheme { + mixcontent('Scheme'); + } - &.puppet, &.pp - mixcontent('Puppet') + &.scilab, &.sci { + mixcontent('Scilab'); + } - &.python, &.py, &.gyp - mixcontent('Python') + &.sfz { + mixcontent('SFZ'); + } - &.profile - mixcontent('Python profiler results') + &.shexc { + mixcontent('Shape Expressions'); + } - &.python-repl, &.pycon - mixcontent('Python REPL') + &.shell, &.console { + mixcontent('Shell'); + } - &.qsharp - mixcontent('Q#') + &.smali { + mixcontent('Smali'); + } - &.k, &.kdb - mixcontent('Q') + &.smalltalk, &.st { + mixcontent('Smalltalk'); + } - &.qml - mixcontent('QML') + &.sml, &.ml { + mixcontent('SML'); + } - &.r - mixcontent('R') + &.solidity, &.sol { + mixcontent('Solidity'); + } - &.cshtml, &.razor, &.razor-cshtml - mixcontent('Razor CSHTML') + &.spl { + mixcontent('Splunk SPL'); + } - &.reasonml, &.re - mixcontent('ReasonML') + &.stan, &.stanfuncs { + mixcontent('Stan'); + } - &.redbol, &.rebol, &.red, &.red-system - mixcontent('Rebol & Red') + &.stata { + mixcontent('Stata'); + } - &.rib - mixcontent('RenderMan RIB') + &.iecst, &.scl, &.stl, &.structured-text { + mixcontent('Structured Text'); + } - &.rsl - mixcontent('RenderMan RSL') + &.stylus, &.styl { + mixcontent('Stylus'); + } - &.rescript, &.res - mixcontent('ReScript') + &.subunit { + mixcontent('SubUnit'); + } - &.risc, &.riscript - mixcontent('RiScript') + &.supercollider, &.sc { + mixcontent('Supercollider'); + } - &.riscv, &.riscvasm - mixcontent('RISC-V Assembly') + &.svelte { + mixcontent('Svelte'); + } - &.graph, &.instances - mixcontent('Roboconf') + &.swift { + mixcontent('Swift'); + } - &.robot, &.rf - mixcontent('Robot Framework') + &.tcl, &.tk { + mixcontent('Tcl'); + } - &.rpm-specfile, &.rpm, &.spec, &.rpm-spec, &.specfile - mixcontent('RPM spec files') + &.terraform, &.tf, &.hcl { + mixcontent('Terraform (HCL)'); + } - &.ruby, &.rb, &.gemspec, &.podspec, &.thor, &.irb - mixcontent('Ruby') + &.tap { + mixcontent('Test Anything Protocol'); + } - &.rust, &.rs - mixcontent('Rust') + &.thrift { + mixcontent('Thrift'); + } - &.rvt, &.rvt-script - mixcontent('RVT Script') + &.toit { + mixcontent('Toit'); + } - &.sas - mixcontent('SAS') + &.tp { + mixcontent('TP'); + } - &.scss - mixcontent('SCSS') + &.tsql { + mixcontent('Transact-SQL'); + } - &.sql - mixcontent('SQL') + &.twig, &.craftcms { + mixcontent('Twig'); + } - &.p21, &.step, &.stp - mixcontent('STEP Part 21') + &.typescript, &.ts, &.tsx, &.mts, &.cts { + mixcontent('TypeScript'); + } - &.scala - mixcontent('Scala') + &.unicorn-rails-log { + mixcontent('Unicorn Rails log'); + } - &.scheme - mixcontent('Scheme') + &.unison, &.u { + mixcontent('Unison'); + } - &.scilab, &.sci - mixcontent('Scilab') + &.vbnet, &.vb { + mixcontent('VB.Net'); + } - &.sfz - mixcontent('SFZ') + &.vba { + mixcontent('VBA'); + } - &.shexc - mixcontent('Shape Expressions') + &.vbscript, &.vbs { + mixcontent('VBScript'); + } - &.shell, &.console - mixcontent('Shell') + &.vhdl { + mixcontent('VHDL'); + } - &.smali - mixcontent('Smali') + &.vala { + mixcontent('Vala'); + } - &.smalltalk, &.st - mixcontent('Smalltalk') + &.verilog, &.v { + mixcontent('Verilog'); + } - &.sml, &.ml - mixcontent('SML') - - &.solidity, &.sol - mixcontent('Solidity') - - &.spl - mixcontent('Splunk SPL') - - &.stan, &.stanfuncs - mixcontent('Stan') - - &.stata - mixcontent('Stata') - - &.iecst, &.scl, &.stl, &.structured-text - mixcontent('Structured Text') - - &.stylus, &.styl - mixcontent('Stylus') - - &.subunit - mixcontent('SubUnit') - - &.supercollider, &.sc - mixcontent('Supercollider') - - &.svelte - mixcontent('Svelte') - - &.swift - mixcontent('Swift') - - &.tcl, &.tk - mixcontent('Tcl') - - &.terraform, &.tf, &.hcl - mixcontent('Terraform (HCL)') - - &.tap - mixcontent('Test Anything Protocol') - - &.thrift - mixcontent('Thrift') - - &.toit - mixcontent('Toit') - - &.tp - mixcontent('TP') - - &.tsql - mixcontent('Transact-SQL') - - &.twig, &.craftcms - mixcontent('Twig') - - &.typescript, &.ts, &.tsx, &.mts, &.cts - mixcontent('TypeScript') - - &.unicorn-rails-log - mixcontent('Unicorn Rails log') - - &.unison, &.u - mixcontent('Unison') - - &.vbnet, &.vb - mixcontent('VB.Net') - - &.vba - mixcontent('VBA') - - &.vbscript, &.vbs - mixcontent('VBScript') - - &.vhdl - mixcontent('VHDL') - - &.vala - mixcontent('Vala') - - &.verilog, &.v - mixcontent('Verilog') - - &.vim - mixcontent('Vim Script') - - &.wgsl - mixcontent('WGSL') - - &.xsharp, &.xs, &.prg - mixcontent('X#') - - &.axapta - mixcontent('X++') - - &.x86asm - mixcontent('x86 Assembly') - - &.x86asmatt - mixcontent('x86 Assembly (AT&T)') - - &.xl, &.tao - mixcontent('XL') - - &.xquery, &.xpath, &.xq, &.xqm - mixcontent('XQuery') - - &.yml, &.yaml - mixcontent('YAML') - - &.zenscript, &.zs - mixcontent('ZenScript') - - &.zephir, &.zep - mixcontent('Zephir') - - &.zig - mixcontent('Zig') - -pre - color: var(--primary-700) !important - - .function .keyword, .constant - color: #0092db !important - - .keyword, .attribute - color: #e96900 !important - - .number, .literal - color: #ae81ff !important - - .tag, .tag .title, .change, .winutils, .flow, .lisp .title, .clojure .built_in, .nginx .title, .tex .special - color: #2973b7 !important - - .symbol, .symbol .string, .value, .regexp - color: #42b983 !important - - .title - color: #83B917 !important - - .tag .value, .string, .subst, .haskell .type, .preprocessor, .ruby .class .parent, .built_in, .sql .aggregate, .django .template_tag, .django .variable, .smalltalk .class, .javadoc, .django .filter .argument, .smalltalk .localvars, .smalltalk .array, .attr_selector, .pseudo, .addition, .stream, .envvar, .apache .tag, .apache .cbracket, .tex .command, .prompt - color: #42b983 !important - - .comment, .java .annotation, .python .decorator, .template_comment, .pi, .doctype, .shebang, .apache .sqbracket, .tex .formula - color: #b3b3b3 !important - - .deletion - color: #BA4545 !important - - .coffeescript .javascript, .javascript .xml, .tex .formula, .xml .javascript, .xml .vbscript, .xml .css, .xml .cdata - opacity: 0.5 !important - -html - height: 100% - max-height: 100% - padding: 0 - margin: 0 - -body - padding: 0 - margin: 0 - line-height: 1.6em - -.clear - clear: both - display: block - overflow: hidden - visibility: hidden - width: 0 - height: 0 - -h1, h2, h3, h4, h5, h6 - text-rendering: optimizeLegibility - line-height: 1 - margin: 2rem 0 - -h1 - font-size: 2.1rem - line-height: 1.2em - -h2 - font-size: 1.9rem - line-height: 1.2em - -h3 - font-size: 1.75rem - -h4 - font-size: 1.3rem - -h5 - font-size: 1.2rem - -h6 - font-size: 1.1rem - -img - max-width: 100% - height: auto - -p, ul, ol, dl - margin: 1em 0 - -ol ol, ul ul, ul ol, ol ul - margin: 0.4em 0 - -ol.toclist-child - padding-inline-start: 15px - -ul p, ol p, li p, .content li p, blockquote p, .content blockquote p, .post blockquote p, .post li p - margin: 0 - overflow: visible - -a img - border: none - -dl - dt - float: left - width: 180px - overflow: hidden - clear: left - text-align: right - text-overflow: ellipsis - white-space: nowrap - font-weight: bold - margin-bottom: 1em - - dd - margin-left: 200px - margin-bottom: 1em - -hr - display: block - height: 1px - border: 0 - border-top: 1px solid var(--primary-100) - margin: 3.2em 0 - padding: 0 - -blockquote - box-sizing: border-box - margin: 1.6em 0 1.6em 0em - padding: 0 0 0 1.6em - border-left: #f66 0.3em solid - background-color: cssrgba(var(--primary-rgb), 0.03) - - p - margin: 0.8em 0 - padding: 1em 0 - - small - display: inline-block - margin: 0.8em 0 0.8em 1.5em - font-size: 0.9em - color: #ccc - - &:before - content: '\2014 \00A0' - - cite - font-weight: bold - - a - font-weight: normal - -mark - background-color: #ffc336 - -code, tt - padding: 1px 3px - font-family: Inconsolata, monospace, sans-serif - font-size: 0.95em - white-space: pre-wrap - border: 1px solid var(--primary-200) - background-color: var(--secondary-950) - transition: background-color 0.8s, border 0.8s - color: #d14 - border-radius: 2px - -kbd - display: inline-block - margin-bottom: 0.4em - padding: 1px 8px - border: var(--primary-200) 1px solid - color: var(--primary-700) - font-size: 0.9em - font-weight: bold - background: var(--primary-50) - border-radius: 4px - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 white inset - -table - -moz-box-sizing: border-box - box-sizing: border-box - margin: 1em 0 - width: 100% - max-width: 100% - border-width: 1px - border-style: solid - background-color: transparent - -table, table tr, table tr td, table tr th - border-color: transparent - -table th - color: var(--primary-700) - background-color: rgba(63, 185, 237, 0.15) - -tr th - border-bottom-width: 1px - border-bottom-style: solid - -tr th, tr td - padding: 5px 20px - border-right: 1px solid - font-size: 1rem - -tr th:last-child, tr td:last-child - border-right: 0px - -table th - font-weight: bold - -table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th - background-color: var(--secondary-950) - -.gist - font-size: 12px - - table - margin: 0 - width: auto - - pre - font-size: 12px - - .line-numbers - font-size: 12px - -.toc - border: 1px solid #f0f0f0 - margin-bottom: 20px - padding: 10px 30px - -#fb_comments_container - overflow: hidden - margin: 0 auto - - #fb_comments - list-style-type: none - padding: 0 - - h1 - font-size: 1.3em - - h2 - font-size: 1.2em - - h3 - font-size: 1.1em - -#fb_comments_container #fb_comments h4, #fb_comments_container #fb_comments h5, #fb_comments_container #fb_comments h6 - font-size: 1.05em - -#fb_comments_container #fb_comments .comment - position: relative - padding: 25px 0 - border-bottom: 1px solid rgba(150, 150, 150, 0.2) - *border-bottom: 1px solid #f0f0f0 - - .avatar - position: absolute - top: 25px - left: 0 - width: 50px - float: left - - img - width: 48px - border: none - border-radius: 5px - margin: 0 - -#fb_comments_container #fb_comments .comment .comment_body, #fb_comments_container #fb_comments .comment .c_content - margin-left: 70px - display: block - -#fb_comments_container #fb_comments .comment .comment_body p, #fb_comments_container #fb_comments .comment .c_content p - margin: 5px 0 15px 0 - padding: 0 - line-height: 1.8 - -#fb_comments_container #fb_comments .comment .comment_body .author, #fb_comments_container #fb_comments .comment .c_content .author - line-height: 1.5em - margin: 0 - padding: 0 - -#fb_comments_container #fb_comments .comment .comment_body .author b, #fb_comments_container #fb_comments .comment .c_content .author b - color: #555 - -#fb_comments_container #fb_comments .comment .comment_body .author small, #fb_comments_container #fb_comments .comment .c_content .author small - font-weight: normal - padding-left: 10px - font-size: 0.7em - color: #666 - -#fb_new_comment - padding-bottom: 50px - - textarea - border-radius: 5px - height: 80px - width: 98% - padding: 5px - font-size: 1em - border: 1px solid rgba(150, 150, 150, 0.5) - *border: 1px solid #a8a8a8 - line-height: 1.5 - - .comment_error - color: red - text-align: center - display: block - font-size: 0.8em - padding-top: 1em - - .c_button &:hover - background: #E60900 - color: #fff - text-decoration: none - -#fb_new_comment .c_button, #fb_new_comment #c_submit - cursor: pointer - font-family: 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif - font-size: 1em - line-height: 1.3em - letter-spacing: 1px - border-radius: 5px - padding: 5px 5px 2px 5px - -#fb_new_comment .input_body - margin-top: 10px - - ul - list-style: none - padding: 5px 0 - margin: auto 0 - - li - float: left - margin-right: 2.2% - *margin-right: 22px - - label - line-height: 1em - - input - border-radius: 5px - border: 1px solid #ddd - padding: 5px - background: rgba(255, 255, 255, 0.5) - margin: 0 0 10px 0 - -#SwfStore_farbox_0 - height: 0 - overflow: hidden - -@media screen and (max-width: 320px) - #fb_comments .c_content, #fb_comments .comment_body - margin-left: 57px - -.tag_box - position: relative - width: 80% - margin-top: 1% - margin-left: 7.2% - -.katex .katex-html - display: none \ No newline at end of file + &.vim { + mixcontent('Vim Script'); + } + + &.wgsl { + mixcontent('WGSL'); + } + + &.xsharp, &.xs, &.prg { + mixcontent('X#'); + } + + &.axapta { + mixcontent('X++'); + } + + &.x86asm { + mixcontent('x86 Assembly'); + } + + &.x86asmatt { + mixcontent('x86 Assembly (AT&T)'); + } + + &.xl, &.tao { + mixcontent('XL'); + } + + &.xquery, &.xpath, &.xq, &.xqm { + mixcontent('XQuery'); + } + + &.yml, &.yaml { + mixcontent('YAML'); + } + + &.zenscript, &.zs { + mixcontent('ZenScript'); + } + + &.zephir, &.zep { + mixcontent('Zephir'); + } + + &.zig { + mixcontent('Zig'); + } +} + +pre { + color: var(--primary-700) !important; + + .function .keyword, .constant { + color: #0092db !important; + } + + .keyword, .attribute { + color: #e96900 !important; + } + + .number, .literal { + color: #ae81ff !important; + } + + .tag, .tag .title, .change, .winutils, .flow, .lisp .title, .clojure .built_in, .nginx .title, .tex .special { + color: #2973b7 !important; + } + + .symbol, .symbol .string, .value, .regexp { + color: #42b983 !important; + } + + .title { + color: #83B917 !important; + } + + .tag .value, .string, .subst, .haskell .type, .preprocessor, .ruby .class .parent, .built_in, .sql .aggregate, .django .template_tag, .django .variable, .smalltalk .class, .javadoc, .django .filter .argument, .smalltalk .localvars, .smalltalk .array, .attr_selector, .pseudo, .addition, .stream, .envvar, .apache .tag, .apache .cbracket, .tex .command, .prompt { + color: #42b983 !important; + } + + .comment, .java .annotation, .python .decorator, .template_comment, .pi, .doctype, .shebang, .apache .sqbracket, .tex .formula { + color: #b3b3b3 !important; + } + + .deletion { + color: #BA4545 !important; + } + + .coffeescript .javascript, .javascript .xml, .tex .formula, .xml .javascript, .xml .vbscript, .xml .css, .xml .cdata { + opacity: 0.5 !important; + } +} + +html { + height: 100%; + max-height: 100%; + padding: 0; + margin: 0; +} + +body { + padding: 0; + margin: 0; + line-height: 1.6em; +} + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} + +h1, h2, h3, h4, h5, h6 { + text-rendering: optimizeLegibility; + line-height: 1; + margin: 2rem 0; +} + +h1 { + font-size: 2.1rem; + line-height: 1.2em; +} + +h2 { + font-size: 1.9rem; + line-height: 1.2em; +} + +h3 { + font-size: 1.75rem; +} + +h4 { + font-size: 1.3rem; +} + +h5 { + font-size: 1.2rem; +} + +h6 { + font-size: 1.1rem; +} + +img { + max-width: 100%; + height: auto; +} + +p, ul, ol, dl { + margin: 1em 0; +} + +ol ol, ul ul, ul ol, ol ul { + margin: 0.4em 0; +} + +ol.toclist-child { + padding-inline-start: 15px; +} + +ul p, ol p, li p, .content li p, blockquote p, .content blockquote p, .post blockquote p, .post li p { + margin: 0; + overflow: visible; +} + +a img { + border: none; +} + +dl { + dt { + float: left; + width: 180px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: bold; + margin-bottom: 1em; + } + + dd { + margin-left: 200px; + margin-bottom: 1em; + } +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid var(--primary-100); + margin: 3.2em 0; + padding: 0; +} + +blockquote { + box-sizing: border-box; + margin: 1.6em 0 1.6em 0em; + padding: 0 0 0 1.6em; + border-left: #f66 0.3em solid; + background-color: cssrgba(var(--primary-rgb), 0.03); + + p { + margin: 0.8em 0; + padding: 1em 0; + } + + small { + display: inline-block; + margin: 0.8em 0 0.8em 1.5em; + font-size: 0.9em; + color: #ccc; + + &:before { + content: '\2014 \00A0'; + } + } + + cite { + font-weight: bold; + + a { + font-weight: normal; + } + } +} + +mark { + background-color: #ffc336; +} + +code, tt { + padding: 1px 3px; + font-family: Inconsolata, monospace, sans-serif; + font-size: 0.95em; + white-space: pre-wrap; + border: 1px solid var(--primary-200); + background-color: var(--secondary-950); + transition: background-color 0.8s, border 0.8s; + color: #d14; + border-radius: 2px; +} + +kbd { + display: inline-block; + margin-bottom: 0.4em; + padding: 1px 8px; + border: var(--primary-200) 1px solid; + color: var(--primary-700); + font-size: 0.9em; + font-weight: bold; + background: var(--primary-50); + border-radius: 4px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 white inset; +} + +table { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1em 0; + width: 100%; + max-width: 100%; + border-width: 1px; + border-style: solid; + background-color: transparent; +} + +table, table tr, table tr td, table tr th { + border-color: transparent; +} + +table th { + color: var(--primary-700); + background-color: rgba(63, 185, 237, 0.15); +} + +tr th { + border-bottom-width: 1px; + border-bottom-style: solid; +} + +tr th, tr td { + padding: 5px 20px; + border-right: 1px solid; + font-size: 1rem; +} + +tr th:last-child, tr td:last-child { + border-right: 0px; +} + +table th { + font-weight: bold; +} + +table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th { + background-color: var(--secondary-950); +} + +.gist { + font-size: 12px; + + table { + margin: 0; + width: auto; + + pre { + font-size: 12px; + } + + .line-numbers { + font-size: 12px; + } + } +} + +.toc { + border: 1px solid #f0f0f0; + margin-bottom: 20px; + padding: 10px 30px; +} + +#fb_comments_container { + overflow: hidden; + margin: 0 auto; + + #fb_comments { + list-style-type: none; + padding: 0; + + h1 { + font-size: 1.3em; + } + + h2 { + font-size: 1.2em; + } + + h3 { + font-size: 1.1em; + } + } +} + +#fb_comments_container #fb_comments h4, #fb_comments_container #fb_comments h5, #fb_comments_container #fb_comments h6 { + font-size: 1.05em; +} + +#fb_comments_container #fb_comments .comment { + position: relative; + padding: 25px 0; + border-bottom: 1px solid rgba(150, 150, 150, 0.2); + *border-bottom: 1px solid #f0f0f0; + + .avatar { + position: absolute; + top: 25px; + left: 0; + width: 50px; + float: left; + + img { + width: 48px; + border: none; + border-radius: 5px; + margin: 0; + } + } +} + +#fb_comments_container #fb_comments .comment .comment_body, #fb_comments_container #fb_comments .comment .c_content { + margin-left: 70px; + display: block; +} + +#fb_comments_container #fb_comments .comment .comment_body p, #fb_comments_container #fb_comments .comment .c_content p { + margin: 5px 0 15px 0; + padding: 0; + line-height: 1.8; +} + +#fb_comments_container #fb_comments .comment .comment_body .author, #fb_comments_container #fb_comments .comment .c_content .author { + line-height: 1.5em; + margin: 0; + padding: 0; +} + +#fb_comments_container #fb_comments .comment .comment_body .author b, #fb_comments_container #fb_comments .comment .c_content .author b { + color: #555; +} + +#fb_comments_container #fb_comments .comment .comment_body .author small, #fb_comments_container #fb_comments .comment .c_content .author small { + font-weight: normal; + padding-left: 10px; + font-size: 0.7em; + color: #666; +} + +#fb_new_comment { + padding-bottom: 50px; + + textarea { + border-radius: 5px; + height: 80px; + width: 98%; + padding: 5px; + font-size: 1em; + border: 1px solid rgba(150, 150, 150, 0.5); + *border: 1px solid #a8a8a8; + line-height: 1.5; + } + + .comment_error { + color: red; + text-align: center; + display: block; + font-size: 0.8em; + padding-top: 1em; + } + + .c_button &:hover { + background: #E60900; + color: #fff; + text-decoration: none; + } +} + +#fb_new_comment .c_button, #fb_new_comment #c_submit { + cursor: pointer; + font-family: 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; + font-size: 1em; + line-height: 1.3em; + letter-spacing: 1px; + border-radius: 5px; + padding: 5px 5px 2px 5px; +} + +#fb_new_comment .input_body { + margin-top: 10px; + + ul { + list-style: none; + padding: 5px 0; + margin: auto 0; + + li { + float: left; + margin-right: 2.2%; + *margin-right: 22px; + + label { + line-height: 1em; + } + + input { + border-radius: 5px; + border: 1px solid #ddd; + padding: 5px; + background: rgba(255, 255, 255, 0.5); + margin: 0 0 10px 0; + } + } + } +} + +#SwfStore_farbox_0 { + height: 0; + overflow: hidden; +} + +@media screen and (max-width: 320px) { + #fb_comments .c_content, #fb_comments .comment_body { + margin-left: 57px; + } +} + +.tag_box { + position: relative; + width: 80%; + margin-top: 1%; + margin-left: 7.2%; +} + +.katex .katex-html { + display: none; +} \ No newline at end of file diff --git a/source/css/insight.styl b/source/css/insight.styl deleted file mode 100644 index 370110d..0000000 --- a/source/css/insight.styl +++ /dev/null @@ -1,46 +0,0 @@ -.ins-section-container - position: relative - background: var(--primary-50) - -.ins-section - font-size: 14px - line-height: 16px - - .ins-section-header, .ins-search-item - padding: 8px 15px - - .ins-section-header - color: var(--primary-400) - border-bottom: 1px solid var(--primary-100) - - .ins-slug - margin-left: 5px - color: var(--primary-400) - - &:before - content: '(' - - &:after - content: ')' - - .ins-search-item - &:hover, &.active - color: var(--secondary) - background: #3273dc - - .ins-slug, .ins-search-preview - color: var(--secondary) - - header, .ins-search-preview - overflow: hidden - white-space: nowrap - text-overflow: ellipsis - - .ins-search-preview - height: 15px - font-size: 9px - color: var(--primary-400) - margin: 5px 0 0 20px - - & header .ins-title - margin-left: 8px diff --git a/source/css/search.styl b/source/css/search.styl deleted file mode 100644 index cba9bdd..0000000 --- a/source/css/search.styl +++ /dev/null @@ -1,57 +0,0 @@ -.searchbox .searchbox-selectable - cursor: pointer - -.searchbox .searchbox-input-wrapper - position: relative - -.searchbox .searchbox-input-wrapper .searchbox-input - width: 100% - border: none - outline: none - font-size: 16px - box-shadow: none - font-weight: 200 - border-radius: 0 - background: var(--secondary) - line-height: 20px - box-sizing: border-box - padding: 12px 28px 12px 20px - border-bottom: 1px solid var(--primary-100) - -.searchbox .searchbox-input-wrapper .searchbox-close - top: 50% - right: 6px - width: 20px - height: 20px - font-size: 16px - margin-top: -11px - position: absolute - text-align: center - display: inline-block - -.searchbox .searchbox-input-wrapper .searchbox-close:hover - color: #3273dc - -.searchbox .searchbox-result-wrapper - left: 0 - right: 0 - top: 45px - bottom: 0 - overflow-y: auto - position: absolute - -.searchbox .searchbox-container - top: 100px - width: 540px - bottom: 100px - margin-left: -270px - box-sizing: border-box - -@media screen and (max-width: 559px), screen and (max-height: 479px) - .searchbox .searchbox-container - top: 0 - left: 0 - margin: 0 - width: 100% - height: 100% - background: var(--primary-50) \ No newline at end of file diff --git a/source/css/style.styl b/source/css/style.styl index 0facb98..68ce05a 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -1,985 +1,1195 @@ -cssrgba(color, opacity) - s('rgba(%s, %s)', color, opacity) +cssrgba(color, opacity) { + s('rgba(%s, %s)', color, opacity); +} -@charset 'UTF-8'site-border = 1px solid var(--primary-100) +@charset 'UTF-8'site-border = 1px solid var(--primary-100); -html - -webkit-font-smoothing: antialiased +html { + -webkit-font-smoothing: antialiased; // transition: all 0.2s ease-out; +} -html[id='theme-dark-mode'] +html[id='theme-dark-mode'] { // filter: invert(1) hue-rotate(180deg); +} -html[id='theme-dark-mode'] img +html[id='theme-dark-mode'] img { // filter: invert(1) hue-rotate(180deg); - -body - color: var(--primary-high) - font-family: 'Open Sans', Helvetica, Arial, 'PingHei', 'PingFang SC', Helvetica, 'Work Sans', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif - font-size: 15px - width: 100% - margin: 0 auto 30px auto - background-color: var(--secondary) - transition: background-color 0.8s, color 0.8s - -p - line-height: 1.9em - font-weight: 400 - font-size: 15px - -a - text-decoration: none - -a:link, a:visited - opacity: 1 - -webkit-transition: all 0.15s linear - -moz-transition: all 0.15s linear - -o-transition: all 0.15s linear - -ms-transition: all 0.15s linear - transition: all 0.15s linear - color: var(--secondary-300) - -a:hover, a:active - color: #4786D6 +} + +body { + color: var(--primary-high); + font-family: 'Open Sans', Helvetica, Arial, 'PingHei', 'PingFang SC', Helvetica, 'Work Sans', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; + font-size: 15px; + width: 100%; + margin: 0 auto 30px auto; + background-color: var(--secondary); + transition: background-color 0.8s, color 0.8s; +} + +p { + line-height: 1.9em; + font-weight: 400; + font-size: 15px; +} + +a { + text-decoration: none; +} + +a:link, a:visited { + opacity: 1; + -webkit-transition: all 0.15s linear; + -moz-transition: all 0.15s linear; + -o-transition: all 0.15s linear; + -ms-transition: all 0.15s linear; + transition: all 0.15s linear; + color: var(--secondary-300); +} + +a:hover, a:active { + color: #4786D6; +} /* basic styles ends */ /* animation starts */ -.animated - -webkit-animation-fill-mode: both - -moz-animation-fill-mode: both - -ms-animation-fill-mode: both - -o-animation-fill-mode: both - animation-fill-mode: both - -webkit-animation-duration: 0.5s - -moz-animation-duration: 0.5s - -ms-animation-duration: 0.5s - -o-animation-duration: 0.5s - animation-duration: 0.5s - -.animated.hinge - -webkit-animation-duration: 0.5s - -moz-animation-duration: 0.5s - -ms-animation-duration: 0.5s - -o-animation-duration: 0.5s - animation-duration: 0.5s - -@keyframes fadeInDown - 0% - opacity: 0 - -webkit-transform: translateY(-20px) - - 100% - opacity: 1 - -webkit-transform: translateY(0) - -@keyframes fadeInDown - 0% - opacity: 0 - -moz-transform: translateY(-20px) - - 100% - opacity: 1 - -moz-transform: translateY(0) - -@keyframes fadeInDown - 0% - opacity: 0 - -o-transform: translateY(-20px) - - 100% - opacity: 1 - -o-transform: translateY(0) - -@keyframes fadeInDown - 0% - opacity: 0 - transform: translateY(-20px) - - 100% - opacity: 1 - transform: translateY(0) - -.fadeInDown - -webkit-animation-name: fadeInDown - -moz-animation-name: fadeInDown - -o-animation-name: fadeInDown - animation-name: fadeInDown - -@keyframes fadeOutDown - 0% - opacity: 1 - -webkit-transform: translateY(0) - - 100% - opacity: 0 - -webkit-transform: translateY(20px) - -@keyframes fadeOutDown - 0% - opacity: 1 - -moz-transform: translateY(0) - - 100% - opacity: 0 - -moz-transform: translateY(20px) - -@keyframes fadeOutDown - 0% - opacity: 1 - -o-transform: translateY(0) - - 100% - opacity: 0 - -o-transform: translateY(20px) - -@keyframes fadeOutDown - 0% - opacity: 1 - transform: translateY(0) - - 100% - opacity: 0 - transform: translateY(20px) - -.fadeOutDown - -webkit-animation-name: fadeOutDown - -moz-animation-name: fadeOutDown - -o-animation-name: fadeOutDown - animation-name: fadeOutDown - -@keyframes fadeOut - 0% - opacity: 1 - - 100% - opacity: 0 - -.fadeOut - -webkit-animation-name: fadeOut - -moz-animation-name: fadeOut - -o-animation-name: fadeOut - animation-name: fadeOut - -@keyframes fadeIn - 0% - opacity: 0 - - 100% - opacity: 1 - -.fadeIn - -webkit-animation-name: fadeIn - -moz-animation-name: fadeIn - -o-animation-name: fadeIn - animation-name: fadeIn +.animated { + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -ms-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -ms-animation-duration: 0.5s; + -o-animation-duration: 0.5s; + animation-duration: 0.5s; +} + +.animated.hinge { + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -ms-animation-duration: 0.5s; + -o-animation-duration: 0.5s; + animation-duration: 0.5s; +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + -o-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + -moz-animation-name: fadeInDown; + -o-animation-name: fadeInDown; + animation-name: fadeInDown; +} + +@keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + } +} + +@keyframes fadeOutDown { + 0% { + opacity: 1; + -moz-transform: translateY(0); + } + + 100% { + opacity: 0; + -moz-transform: translateY(20px); + } +} + +@keyframes fadeOutDown { + 0% { + opacity: 1; + -o-transform: translateY(0); + } + + 100% { + opacity: 0; + -o-transform: translateY(20px); + } +} + +@keyframes fadeOutDown { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(20px); + } +} + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + -moz-animation-name: fadeOutDown; + -o-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} + +@keyframes fadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +.fadeOut { + -webkit-animation-name: fadeOut; + -moz-animation-name: fadeOut; + -o-animation-name: fadeOut; + animation-name: fadeOut; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +.fadeIn { + -webkit-animation-name: fadeIn; + -moz-animation-name: fadeIn; + -o-animation-name: fadeIn; + animation-name: fadeIn; +} /* animation ends */ -.content - height: auto - float: right - width: 70% - margin-top: 60px - -.page-top - width: 70% - position: fixed - right: 0 - z-index: 3 - transition: background-color 0.8s, border 0.8s - background-color: var(--secondary) - height: 60px - border-bottom: site-border - - .nav - list-style: none - padding: 18px 30px - float: left - font-size: 14px - - li - position: relative - display: initial - padding-right: 20px - - a - color: var(--secondary-350) - - a:hover - color: #4786D6 - - a.current - color: var(--secondary-350) - padding-bottom: 20px - border-bottom: 2px solid #4786D6 - - .information - float: right - padding-top: 12px - padding-right: 20px - - .avatar - float: right - - img - width: 32px - height: 32px - border-radius: 300px - - .nav_right_btn - float: left - padding-top: 5px - margin-right: 0px - - li - display: initial - padding-right: 30px - -.sidebar - width: 30% - -webkit-background-size: cover - background-size: cover - background-color: var(--secondary) - height: 100% - transition: all 0.8s - top: 0 - left: 0 - position: fixed - z-index: 4 - border-right: site-border - - .logo-title - text-align: center - margin-top: -50px - - .description - font-size: 14px - color: var(--secondary-350) - - .logo - margin: 0 auto - - .title - h3 - text-transform: none - font-size: 2rem - font-weight: bold - letter-spacing: 2px - line-height: 1 - margin: 0 - - a - text-decoration: none - color: var(--secondary-350) - font-size: 2rem - font-weight: bold - - .social-links - list-style: none - padding: 0 - font-size: 14px - text-align: center - - i - margin-right: 3px - - li - display: inline - padding: 0 4px - line-height: 0 - - a - color: var(--secondary-350) - - a:hover - color: #4786D6 - -.sidebar-top - margin: auto 0 - display: flex - flex-direction: column - justify-content: center - height: 100% - - .ltr - text-align: center - -.card - margin-left: 5px - -.post - transition: background-color 0.8s - background-color: var(--secondary) - margin: 30px - - .post-title - h1 - text-transform: none - font-size: 30px - letter-spacing: 5px - line-height: 1 - - h2 - text-transform: none - letter-spacing: 1px - font-size: 28px - line-height: 1 - font-weight: 600 - color: var(--secondary-350) - - h3 - text-transform: none - letter-spacing: 1px - line-height: 1 - font-weight: 600 - color: var(--primary-high) - font-size: 22px - margin: 0 - - a - text-decoration: none - color: var(--secondary-350) - - &:hover - text-decoration: underline - - .post-content - a - text-decoration: none - color: #4786D6 - - a:hover - color: #2F69B3 - - h1 - color: var(--secondary-350) - font-size: 22px - font-weight: 600 - - h2 - color: var(--secondary-350) - font-size: 20px - - h3 - color: var(--secondary-350) - font-size: 18px - font-weight: 600 - - h4 - color: var(--secondary-350) - font-size: 17px - - h5 - color: var(--secondary-350) - font-size: 16px - font-weight: 600 - - h6 - color: var(--secondary-350) - font-size: 15px - - .post-footer - padding: 0 0 30px 0 - border-bottom: site-border - transition: border 0.8s - - .meta - post-footer-color = var(--primary-low-mid) - max-width: 100% - height: 25px - color: post-footer-color - - .info - float: left - font-size: 12px - - .date - margin-right: 10px - - a - text-decoration: none - color: post-footer-color - padding-right: 10px - - &:hover - color: #4786D6 - - i - margin-right: 6px - - .tags - padding-bottom: 15px - font-size: 13px - - ul - list-style-type: none - display: inline - margin: 0 - padding: 0 - - li - list-style-type: none - margin: 0 - padding-right: 5px - display: inline - - a - text-decoration: none - color: cssrgba(var(--primary-rgb), 0.44) - font-weight: 400 - - &:hover - text-decoration: none - -.pagination - margin: 30px - padding: 0px 0 56px 0 - border-bottom: site-border - transition: border 0.8s - - ul - list-style: none - margin: 0 - padding: 0 - height: 13px - - li - margin: 0 2px 0 2px - display: inline - line-height: 1 - - a - text-decoration: none - - .pre - float: left - - .next - float: right - -.like-reblog-buttons - float: right - -.like-button - float: right - padding: 0 0 0 10px - -.reblog-button - float: right - padding: 0 - -#install-btn - position: fixed - bottom: 0px - right: 6px - -#disqus_thread - margin: 30px - border-bottom: site-border - -.footer - clear: both - text-align: center - font-size: 10px - margin: 0 auto - bottom: 0 - position: absolute - width: 100% - padding-bottom: 5px - background-color: var(--secondary) - transition: background-color 0.8s - - a - color: var(--secondary-650) - - a:hover - color: #4786D6 - -.archive - width: 100% - -.list-with-title - font-size: 15px - margin: 30px - padding: 0 - line-height: 25px - - li - list-style-type: none - padding: 0 - - .listing-title - font-size: 24px - color: var(--secondary-400) - font-weight: 600 - line-height: 2.2em - - .listing - padding: 0 - - .listing-post - padding-bottom: 5px - display: flex - - .post-time - flex: 0 0 50px - float: right - color: var(--secondary-800) - transition: color 0.8s - - a - flex: 1 1 100% - color: var(--secondary-550) - - &:hover - color: #4786D6 +.content { + height: auto; + float: right; + width: 70%; + margin-top: 60px; +} + +.page-top { + width: 70%; + position: fixed; + right: 0; + z-index: 3; + transition: background-color 0.8s, border 0.8s; + background-color: var(--secondary); + height: 60px; + border-bottom: site-border; + + .nav { + list-style: none; + padding: 18px 30px; + float: left; + font-size: 14px; + + li { + position: relative; + display: initial; + padding-right: 20px; + } + + a { + color: var(--secondary-350); + } + + a:hover { + color: #4786D6; + } + + a.current { + color: var(--secondary-350); + padding-bottom: 20px; + border-bottom: 2px solid #4786D6; + } + } + + .information { + float: right; + padding-top: 12px; + padding-right: 20px; + + .avatar { + float: right; + + img { + width: 32px; + height: 32px; + border-radius: 300px; + } + } + + .nav_right_btn { + float: left; + padding-top: 5px; + margin-right: 0px; + + li { + display: initial; + padding-right: 30px; + } + } + } +} + +.sidebar { + width: 30%; + -webkit-background-size: cover; + background-size: cover; + background-color: var(--secondary); + height: 100%; + transition: all 0.8s; + top: 0; + left: 0; + position: fixed; + z-index: 4; + border-right: site-border; + + .logo-title { + text-align: center; + margin-top: -50px; + + .description { + font-size: 14px; + color: var(--secondary-350); + } + + .logo { + margin: 0 auto; + } + + .title { + h3 { + text-transform: none; + font-size: 2rem; + font-weight: bold; + letter-spacing: 2px; + line-height: 1; + margin: 0; + } + + a { + text-decoration: none; + color: var(--secondary-350); + font-size: 2rem; + font-weight: bold; + } + } + } + + .social-links { + list-style: none; + padding: 0; + font-size: 14px; + text-align: center; + + i { + margin-right: 3px; + } + + li { + display: inline; + padding: 0 4px; + line-height: 0; + } + + a { + color: var(--secondary-350); + } + + a:hover { + color: #4786D6; + } + } +} + +.sidebar-top { + margin: auto 0; + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + + .ltr { + text-align: center; + } +} + +.card { + margin-left: 5px; +} + +.post { + transition: background-color 0.8s; + background-color: var(--secondary); + margin: 30px; + + .post-title { + h1 { + text-transform: none; + font-size: 30px; + letter-spacing: 5px; + line-height: 1; + } + + h2 { + text-transform: none; + letter-spacing: 1px; + font-size: 28px; + line-height: 1; + font-weight: 600; + color: var(--secondary-350); + } + + h3 { + text-transform: none; + letter-spacing: 1px; + line-height: 1; + font-weight: 600; + color: var(--primary-high); + font-size: 22px; + margin: 0; + } + + a { + text-decoration: none; + color: var(--secondary-350); + + &:hover { + text-decoration: underline; + } + } + } + + .post-content { + a { + text-decoration: none; + color: #4786D6; + } + + a:hover { + color: #2F69B3; + } + + h1 { + color: var(--secondary-350); + font-size: 22px; + font-weight: 600; + } + + h2 { + color: var(--secondary-350); + font-size: 20px; + } + + h3 { + color: var(--secondary-350); + font-size: 18px; + font-weight: 600; + } + + h4 { + color: var(--secondary-350); + font-size: 17px; + } + + h5 { + color: var(--secondary-350); + font-size: 16px; + font-weight: 600; + } + + h6 { + color: var(--secondary-350); + font-size: 15px; + } + } + + .post-footer { + padding: 0 0 30px 0; + border-bottom: site-border; + transition: border 0.8s; + + .meta { + post-footer-color = var(--primary-low-mid); + max-width: 100%; + height: 25px; + color: post-footer-color; + + .info { + float: left; + font-size: 12px; + + .date { + margin-right: 10px; + } + } + + a { + text-decoration: none; + color: post-footer-color; + padding-right: 10px; + + &:hover { + color: #4786D6; + } + } + + i { + margin-right: 6px; + } + } + + .tags { + padding-bottom: 15px; + font-size: 13px; + + ul { + list-style-type: none; + display: inline; + margin: 0; + padding: 0; + + li { + list-style-type: none; + margin: 0; + padding-right: 5px; + display: inline; + } + } + + a { + text-decoration: none; + color: cssrgba(var(--primary-rgb), 0.44); + font-weight: 400; + + &:hover { + text-decoration: none; + } + } + } + } +} + +.pagination { + margin: 30px; + padding: 0px 0 56px 0; + border-bottom: site-border; + transition: border 0.8s; + + ul { + list-style: none; + margin: 0; + padding: 0; + height: 13px; + + li { + margin: 0 2px 0 2px; + display: inline; + line-height: 1; + + a { + text-decoration: none; + } + } + } + + .pre { + float: left; + } + + .next { + float: right; + } +} + +.like-reblog-buttons { + float: right; +} + +.like-button { + float: right; + padding: 0 0 0 10px; +} + +.reblog-button { + float: right; + padding: 0; +} + +#install-btn { + position: fixed; + bottom: 0px; + right: 6px; +} + +#disqus_thread { + margin: 30px; + border-bottom: site-border; +} + +.footer { + clear: both; + text-align: center; + font-size: 10px; + margin: 0 auto; + bottom: 0; + position: absolute; + width: 100%; + padding-bottom: 5px; + background-color: var(--secondary); + transition: background-color 0.8s; + + a { + color: var(--secondary-650); + } + + a:hover { + color: #4786D6; + } +} + +.archive { + width: 100%; +} + +.list-with-title { + font-size: 15px; + margin: 30px; + padding: 0; + line-height: 25px; + + li { + list-style-type: none; + padding: 0; + } + + .listing-title { + font-size: 24px; + color: var(--secondary-400); + font-weight: 600; + line-height: 2.2em; + } + + .listing { + padding: 0; + + .listing-post { + padding-bottom: 5px; + display: flex; + + .post-time { + flex: 0 0 50px; + float: right; + color: var(--secondary-800); + transition: color 0.8s; + } + + a { + flex: 1 1 100%; + color: var(--secondary-550); + + &:hover { + color: #4786D6; + } + } + } + } +} /* share */ -.share - margin: 0px 30px - display: inline-flex - - > .share-btn - width: 32px - height: 32px - border-radius: 300px - margin-right: 5px - background-color: var(--secondary-250) - transition: all 0.3s - - a - color: var(--secondary) - padding: 9px - - &:hover - background-color: var(--primary) - - .linkonly a - padding: 9px 7px - - .weibo - background-color: #ED6243 - - &:hover - background-color: #9c2409 - - .twitter - background-color: #59C0FD - - &:hover - background-color: #2b81b3 - - .mastodon - background-color: #6d2fdf - - &:hover - background-color: #4003b1 +.share { + margin: 0px 30px; + display: inline-flex; + + > .share-btn { + width: 32px; + height: 32px; + border-radius: 300px; + margin-right: 5px; + background-color: var(--secondary-250); + transition: all 0.3s; + + a { + color: var(--secondary); + padding: 9px; + } + + &:hover { + background-color: var(--primary); + } + } + + .linkonly a { + padding: 9px 7px; + } + + .weibo { + background-color: #ED6243; + + &:hover { + background-color: #9c2409; + } + } + + .twitter { + background-color: #59C0FD; + + &:hover { + background-color: #2b81b3; + } + } + + .mastodon { + background-color: #6d2fdf; + + &:hover { + background-color: #4003b1; + } + } +} /* about */ -.about - margin: 30px +.about { + margin: 30px; - h3 - font-size: 22px + h3 { + font-size: 22px; + } +} /* links */ -.links - margin: 30px +.links { + margin: 30px; - h3 - font-size: 22px + h3 { + font-size: 22px; + } - a - cursor: pointer + a { + cursor: pointer; + } +} /* Comment style */ -.comment-count - color: var(--secondary-400) +.comment-count { + color: var(--secondary-400); +} -.tab-community - color: var(--secondary-400) +.tab-community { + color: var(--secondary-400); +} -.read_more - font-size: 14px +.read_more { + font-size: 14px; +} -.back-button - padding-top: 30px - max-width: 100px - padding-left: 40px - float: left +.back-button { + padding-top: 30px; + max-width: 100px; + padding-left: 40px; + float: left; +} /* 默认评论样式 */ -#fb_comments_container - margin: 30px +#fb_comments_container { + margin: 30px; +} /* button style */ -a.btn - color: var(--secondary-550) - font-weight: 400 - -.btn - display: inline-block - position: relative - outline: 0 - color: var(--primary-450) - background: transparent - font-size: 14px - text-align: center - text-decoration: none - cursor: pointer - border: 1px solid var(--primary-150) - white-space: nowrap - font-weight: 400 - font-style: normal - border-radius: 999em - transition: color 0.8s, border 0.8s - -.btn:hover - display: inline-block - position: relative - outline: 0px - color: var(--primary-650) - background: transparent - font-size: 14px - text-align: center - text-decoration: none - cursor: pointer - border: 1px solid var(--secondary-250) - white-space: nowrap - font-weight: 400 - font-style: normal - border-radius: 999em - -[role='back'] - padding: 0.5em 1.25em - line-height: 1.666em - -[role='home'] - padding: 0.5em 1.25em - line-height: 1.666em - -[role='navigation'] - padding: 0.5em 1.25em - line-height: 1.666em - -[role='tags'] - padding: 6px 12px +a.btn { + color: var(--secondary-550); + font-weight: 400; +} + +.btn { + display: inline-block; + position: relative; + outline: 0; + color: var(--primary-450); + background: transparent; + font-size: 14px; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 1px solid var(--primary-150); + white-space: nowrap; + font-weight: 400; + font-style: normal; + border-radius: 999em; + transition: color 0.8s, border 0.8s; +} + +.btn:hover { + display: inline-block; + position: relative; + outline: 0px; + color: var(--primary-650); + background: transparent; + font-size: 14px; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 1px solid var(--secondary-250); + white-space: nowrap; + font-weight: 400; + font-style: normal; + border-radius: 999em; +} + +[role='back'] { + padding: 0.5em 1.25em; + line-height: 1.666em; +} + +[role='home'] { + padding: 0.5em 1.25em; + line-height: 1.666em; +} + +[role='navigation'] { + padding: 0.5em 1.25em; + line-height: 1.666em; +} + +[role='tags'] { + padding: 6px 12px; +} /* Menu样式 */ -.menu - float: right - padding-top: 30px - - .btn-down - margin: 0px - - li - list-style: none - width: 100px - - a - display: inline-block - position: relative - padding: 0.5em 1.25em - outline: 0 - color: cssrgba(var(--primary-rgb), 0.44) - background: cssrgba(var(--primary-rgb), 0) - font-size: 14px - text-align: center - text-decoration: none - cursor: pointer - border: 1px solid cssrgba(var(--primary-rgb), 0.15) - white-space: nowrap - font-weight: 400 - font-style: normal - border-radius: 999em - margin-top: 5px - - &:hover - position: relative - padding: 0.5em 1.25em - outline: 0 - color: var(--secondary) - background: #3CBD10 - font-size: 14px - text-align: center - text-decoration: none - cursor: pointer - border: 1px solid cssrgba(var(--primary-rgb), 0.15) - white-space: nowrap - font-weight: 400 - font-style: normal - border-radius: 999em - margin-top: 5px - - .btn-down div - position: absolute - visibility: hidden - width: 100px - float: right - -.page_404 - text-align: center - padding-top: 50px +.menu { + float: right; + padding-top: 30px; + + .btn-down { + margin: 0px; + + li { + list-style: none; + width: 100px; + + a { + display: inline-block; + position: relative; + padding: 0.5em 1.25em; + outline: 0; + color: cssrgba(var(--primary-rgb), 0.44); + background: cssrgba(var(--primary-rgb), 0); + font-size: 14px; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 1px solid cssrgba(var(--primary-rgb), 0.15); + white-space: nowrap; + font-weight: 400; + font-style: normal; + border-radius: 999em; + margin-top: 5px; + + &:hover { + position: relative; + padding: 0.5em 1.25em; + outline: 0; + color: var(--secondary); + background: #3CBD10; + font-size: 14px; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 1px solid cssrgba(var(--primary-rgb), 0.15); + white-space: nowrap; + font-weight: 400; + font-style: normal; + border-radius: 999em; + margin-top: 5px; + } + } + } + } + + .btn-down div { + position: absolute; + visibility: hidden; + width: 100px; + float: right; + } +} + +.page_404 { + text-align: center; + padding-top: 50px; +} /* Tag style */ -.tag_btn - align-items: center - border-radius: 100px - color: var(--secondary-250) - display: inline-flex +.tag_btn { + align-items: center; + border-radius: 100px; + color: var(--secondary-250); + display: inline-flex; // font-size: 0.9rem; - justify-content: center - padding-left: 0.75em - padding-right: 0em - white-space: nowrap - margin: 10px + justify-content: center; + padding-left: 0.75em; + padding-right: 0em; + white-space: nowrap; + margin: 10px; // border: 1px solid var(--primary-low); // background-color: var(--secondary-850); - i - margin: 8px - - .tag_count - align-items: center - border-radius: 100px - color: var(--secondary-250) - display: inline-flex - font-size: 0.5rem - width: 15px - height: 15px - justify-content: center - line-height: 1.5 - padding: 5px - margin: 5px - white-space: nowrap - background-color: var(--secondary-900) - transition: background-color 0.8s + i { + margin: 8px; + } + + .tag_count { + align-items: center; + border-radius: 100px; + color: var(--secondary-250); + display: inline-flex; + font-size: 0.5rem; + width: 15px; + height: 15px; + justify-content: center; + line-height: 1.5; + padding: 5px; + margin: 5px; + white-space: nowrap; + background-color: var(--secondary-900); + transition: background-color 0.8s; + } +} /* TOC style */ -.tocmenu - align-items: center - border-top: 1px solid var(--primary-100) - text-align: center - font-size: 13px - margin: 0 auto - width: 100% - list-style: none - position: relative - -.toclist-container - overflow-y: auto - max-height: calc(100vh - 600px) - - &::-webkit-scrollbar-thumb - color: #4786d6 - background-color: #4786d6 - - &::-webkit-scrollbar - width: 2px - color: #4786d6 - height: auto - -.toclist +.tocmenu { + align-items: center; + border-top: 1px solid var(--primary-100); + text-align: center; + font-size: 13px; + margin: 0 auto; + width: 100%; + list-style: none; + position: relative; +} + +.toclist-container { + overflow-y: auto; + max-height: calc(100vh - 600px); + + &::-webkit-scrollbar-thumb { + color: #4786d6; + background-color: #4786d6; + } + + &::-webkit-scrollbar { + width: 2px; + color: #4786d6; + height: auto; + } +} + +.toclist { /* width: max-content; */ - border-top: none - padding: 0px 30px - display: inline-block - text-align: left - -.in-page.toc-container - display: none - -@media screen and (max-width: 960px) - .sidebar - width: 100% - height: auto - position: relative - border-right: none - z-index: 1 - top: auto - - .logo-title - padding-top: 120px - margin-top: 0 - - .title - img - width: 100px - - h3 - font-size: 20px - - .page-top - width: 100% - white-space: nowrap - overflow-x: scroll - overflow-y: hidden - - .information - transition: background-color 0.8s - background-color: var(--secondary) - position: absolute - right: 0 - - .nav_right_btn - display: none - - .information:hover - .nav_right_btn - display: block - - .page-top::-webkit-scrollbar - -webkit-appearance: none - width: 2px - - .post-title h3 - line-height: 1.6 - - .content - margin-top: 0px - top: auto - width: 100% - z-index: 2 + border-top: none; + padding: 0px 30px; + display: inline-block; + text-align: left; +} + +.in-page.toc-container { + display: none; +} + +@media screen and (max-width: 960px) { + .sidebar { + width: 100%; + height: auto; + position: relative; + border-right: none; + z-index: 1; + top: auto; + + .logo-title { + padding-top: 120px; + margin-top: 0; + + .title { + img { + width: 100px; + } + + h3 { + font-size: 20px; + } + } + } + } + + .page-top { + width: 100%; + white-space: nowrap; + overflow-x: scroll; + overflow-y: hidden; + + .information { + transition: background-color 0.8s; + background-color: var(--secondary); + position: absolute; + right: 0; + + .nav_right_btn { + display: none; + } + } + + .information:hover { + .nav_right_btn { + display: block; + } + } + } + + .page-top::-webkit-scrollbar { + -webkit-appearance: none; + width: 2px; + } + + .post-title h3 { + line-height: 1.6; + } + + .content { + margin-top: 0px; + top: auto; + width: 100%; + z-index: 2; /* position: absolute; */ - - .footer - display: none - - .tocmenu - border-bottom: 1px solid var(--primary-100) - position: relative - text-align: left - - .toc-mobile - .toc-button - position: fixed - z-index: 900 - background: #4786d6 - color: var(--secondary) - padding: 8px 15px - bottom: 0 - right: 0 - - &:hover - .in-page.toc-container - right: 0 - - .toclist-container - height: auto - max-height: calc(100vh - 110px) - - .in-sidebar.toc-container - display: none - - .in-page.toc-container - display: block - border-left: 1px solid v3r(--primary-100) - position: fixed - bottom: 0px - right: -300px - width: 300px - transition: all 0.4s - background-color: var(--secondary) - z-index: 999 - - .toc-toggle summary - background: #4786d6 - transition: color 0.8s - color: var(--secondary) - padding: 5px 10px - - .toc-toggle[open] summary - color: #4786d6 - transition: background-color 0.8s - background: var(--secondary) - padding: 4px - text-align: center - -.friend-link-container - display: inline-block - -.friend-link-box - width: 350px - margin: 10px - padding: 10px - border: 1px solid var(--primary-100) - border-radius: 10px - display: grid - grid-template: auto / 84px auto - -.friend-link-meta - padding: 10px - -.friend-link-title - font-weight: 700 - -.friend-link-avatar - width: 64px - margin-right: 10px - -.friend-link-avatar img - width: 64px - -.float-button - position: fixed - width: 50px - height: 50px - background-color: var(--secondary) - border: 1px solid var(--primary-300) - right: 10px - border-radius: 100% - transition: all 0.3s - - &:hover - background-color: var(--secondary-950) - - &:active - background-color: var(--secondary-900) - - &.hide - transform: translateX(100px) - - i - font-size: 200% - color: var(--primary-500) - - &#scroll-to-top - bottom: 50px - -.modal-cover - display: none - perspective: 50em - top: 0 - left: 0 - width: 100% - height: 100% - z-index: 100 - background: rgba(0, 0, 0, 0.7) - transform-origin: 0% - perspective-origin: top center - -.modal-cover.show - display: block - -.modal-cover, .modal-cover .modal-container - position: fixed - overflow: hidden - -.modal-cover .modal-container - left: 50% - z-index: 101 - -.indicator - top: 50vh - transform: translate(-35px, -35px) - width: 70px - height: 70px - border-radius: 10px - background: var(--secondary) - display: flex - align-items: center - justify-content: center - - i - font-size: 300% - color: var(--primary-800) + } + + .footer { + display: none; + } + + .tocmenu { + border-bottom: 1px solid var(--primary-100); + position: relative; + text-align: left; + } + + .toc-mobile { + .toc-button { + position: fixed; + z-index: 900; + background: #4786d6; + color: var(--secondary); + padding: 8px 15px; + bottom: 0; + right: 0; + } + + &:hover { + .in-page.toc-container { + right: 0; + } + } + } + + .toclist-container { + height: auto; + max-height: calc(100vh - 110px); + } + + .in-sidebar.toc-container { + display: none; + } + + .in-page.toc-container { + display: block; + border-left: 1px solid v3r(--primary-100); + position: fixed; + bottom: 0px; + right: -300px; + width: 300px; + transition: all 0.4s; + background-color: var(--secondary); + z-index: 999; + + .toc-toggle summary { + background: #4786d6; + transition: color 0.8s; + color: var(--secondary); + padding: 5px 10px; + } + + .toc-toggle[open] summary { + color: #4786d6; + transition: background-color 0.8s; + background: var(--secondary); + padding: 4px; + text-align: center; + } + } +} + +.friend-link-container { + display: inline-block; +} + +.friend-link-box { + width: 350px; + margin: 10px; + padding: 10px; + border: 1px solid var(--primary-100); + border-radius: 10px; + display: grid; + grid-template: auto / 84px auto; +} + +.friend-link-meta { + padding: 10px; +} + +.friend-link-title { + font-weight: 700; +} + +.friend-link-avatar { + width: 64px; + margin-right: 10px; +} + +.friend-link-avatar img { + width: 64px; +} + +.float-button { + position: fixed; + width: 50px; + height: 50px; + background-color: var(--secondary); + border: 1px solid var(--primary-300); + right: 10px; + border-radius: 100%; + transition: all 0.3s; + + &:hover { + background-color: var(--secondary-950); + } + + &:active { + background-color: var(--secondary-900); + } + + &.hide { + transform: translateX(100px); + } + + i { + font-size: 200%; + color: var(--primary-500); + } + + &#scroll-to-top { + bottom: 50px; + } +} + +.modal-cover { + display: none; + perspective: 50em; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + background: rgba(0, 0, 0, 0.7); + transform-origin: 0%; + perspective-origin: top center; +} + +.modal-cover.show { + display: block; +} + +.modal-cover, .modal-cover .modal-container { + position: fixed; + overflow: hidden; +} + +.modal-cover .modal-container { + left: 50%; + z-index: 101; +} + +.indicator { + top: 50vh; + transform: translate(-35px, -35px); + width: 70px; + height: 70px; + border-radius: 10px; + background: var(--secondary); + display: flex; + align-items: center; + justify-content: center; + + i { + font-size: 300%; + color: var(--primary-800); + } +} diff --git a/source/css/theme/dark.styl b/source/css/theme/dark.styl index d6acb3a..b20397e 100644 --- a/source/css/theme/dark.styl +++ b/source/css/theme/dark.styl @@ -1,22 +1,26 @@ // primary = 0, 0, 0 // secondary = 255, 255, 255 -primary = 255, 255, 255 -secondary = 22, 22, 22 +primary = 255, 255, 255; +secondary = 22, 22, 22; -mix_color(name, color1, color2) - for lightness in range(50, 1000, 50) - \-\-{name}-{lightness}: lightness * 0.001 * rgb(color1) + (1000 - lightness) * 0.001 * rgb(color2) +mix_color(name, color1, color2) { + for lightness in range(50, 1000, 50) { + \-\-{name}-{lightness}: lightness * 0.001 * rgb(color1) + (1000 - lightness) * 0.001 * rgb(color2); + } +} -gen_color(name, color1, color2) - \-\-{name}-rgb: color1 - \-\-{name}: rgb(color1) - \-\-{name}-high: 0.9 * rgb(color1) + 0.1 * rgb(color2) - \-\-{name}-midium: 0.7 * rgb(color1) + 0.3 * rgb(color2) - \-\-{name}-low-mid: 0.5 * rgb(color1) + 0.5 * rgb(color2) - \-\-{name}-low: 0.2 * rgb(color1) + 0.8 * rgb(color2) - \-\-{name}-very-low: 0.05 * rgb(color1) + 0.95 * rgb(color2) - mix_color(name, color1, color2) +gen_color(name, color1, color2) { + \-\-{name}-rgb: color1; + \-\-{name}: rgb(color1); + \-\-{name}-high: 0.9 * rgb(color1) + 0.1 * rgb(color2); + \-\-{name}-midium: 0.7 * rgb(color1) + 0.3 * rgb(color2); + \-\-{name}-low-mid: 0.5 * rgb(color1) + 0.5 * rgb(color2); + \-\-{name}-low: 0.2 * rgb(color1) + 0.8 * rgb(color2); + \-\-{name}-very-low: 0.05 * rgb(color1) + 0.95 * rgb(color2); + mix_color(name, color1, color2); +} -:root - gen_color('primary', primary, secondary) - gen_color('secondary', secondary, primary) \ No newline at end of file +:root { + gen_color('primary', primary, secondary); + gen_color('secondary', secondary, primary); +} \ No newline at end of file diff --git a/source/css/theme/light.styl b/source/css/theme/light.styl index 3ac89ce..d8dbfb8 100644 --- a/source/css/theme/light.styl +++ b/source/css/theme/light.styl @@ -1,22 +1,26 @@ -primary = 22, 22, 22 -secondary = 255, 255, 255 +primary = 22, 22, 22; +secondary = 255, 255, 255; // primary = 255, 255, 255 // secondary = 0, 0, 0 -mix_color(name, color1, color2) - for lightness in range(50, 1000, 50) - \-\-{name}-{lightness}: lightness * 0.001 * rgb(color1) + (1000 - lightness) * 0.001 * rgb(color2) +mix_color(name, color1, color2) { + for lightness in range(50, 1000, 50) { + \-\-{name}-{lightness}: lightness * 0.001 * rgb(color1) + (1000 - lightness) * 0.001 * rgb(color2); + } +} -gen_color(name, color1, color2) - \-\-{name}-rgb: color1 - \-\-{name}: rgb(color1) - \-\-{name}-high: 0.9 * rgb(color1) + 0.1 * rgb(color2) - \-\-{name}-midium: 0.7 * rgb(color1) + 0.3 * rgb(color2) - \-\-{name}-low-mid: 0.5 * rgb(color1) + 0.5 * rgb(color2) - \-\-{name}-low: 0.2 * rgb(color1) + 0.8 * rgb(color2) - \-\-{name}-very-low: 0.05 * rgb(color1) + 0.95 * rgb(color2) - mix_color(name, color1, color2) +gen_color(name, color1, color2) { + \-\-{name}-rgb: color1; + \-\-{name}: rgb(color1); + \-\-{name}-high: 0.9 * rgb(color1) + 0.1 * rgb(color2); + \-\-{name}-midium: 0.7 * rgb(color1) + 0.3 * rgb(color2); + \-\-{name}-low-mid: 0.5 * rgb(color1) + 0.5 * rgb(color2); + \-\-{name}-low: 0.2 * rgb(color1) + 0.8 * rgb(color2); + \-\-{name}-very-low: 0.05 * rgb(color1) + 0.95 * rgb(color2); + mix_color(name, color1, color2); +} -:root - gen_color('primary', primary, secondary) - gen_color('secondary', secondary, primary) \ No newline at end of file +:root { + gen_color('primary', primary, secondary); + gen_color('secondary', secondary, primary); +} \ No newline at end of file diff --git a/source/css/theme/mixin_functions.styl b/source/css/theme/mixin_functions.styl index efbadb6..213a5d5 100644 --- a/source/css/theme/mixin_functions.styl +++ b/source/css/theme/mixin_functions.styl @@ -1,13 +1,16 @@ -mix_color(name, color1, color2) - for lightness in range(50, 1000, 50) - \-\-{name}-{lightness}: lightness * 0.001 * rgb(color1) + (1000 - lightness) * 0.001 * rgb(color2) +mix_color(name, color1, color2) { + for lightness in range(50, 1000, 50) { + \-\-{name}-{lightness}: lightness * 0.001 * rgb(color1) + (1000 - lightness) * 0.001 * rgb(color2); + } +} -gen_color(name, color1, color2) - \-\-{name}-rgb: color1 - \-\-{name}: rgb(color1) - \-\-{name}-high: 0.9 * rgb(color1) + 0.1 * rgb(color2) - \-\-{name}-midium: 0.7 * rgb(color1) + 0.3 * rgb(color2) - \-\-{name}-low-mid: 0.5 * rgb(color1) + 0.5 * rgb(color2) - \-\-{name}-low: 0.3 * rgb(color1) + 0.3 * rgb(color2) - \-\-{name}-very-low: 0.1 * rgb(color1) + 0.9 * rgb(color2) - mix_color(name, color1, color2) \ No newline at end of file +gen_color(name, color1, color2) { + \-\-{name}-rgb: color1; + \-\-{name}: rgb(color1); + \-\-{name}-high: 0.9 * rgb(color1) + 0.1 * rgb(color2); + \-\-{name}-midium: 0.7 * rgb(color1) + 0.3 * rgb(color2); + \-\-{name}-low-mid: 0.5 * rgb(color1) + 0.5 * rgb(color2); + \-\-{name}-low: 0.3 * rgb(color1) + 0.3 * rgb(color2); + \-\-{name}-very-low: 0.1 * rgb(color1) + 0.9 * rgb(color2); + mix_color(name, color1, color2); +} \ No newline at end of file diff --git a/src/components/search.scss b/src/components/search.scss new file mode 100644 index 0000000..d3c1b89 --- /dev/null +++ b/src/components/search.scss @@ -0,0 +1,130 @@ +.searchbox .searchbox-selectable { + cursor: pointer; +} + +.searchbox .searchbox-input-wrapper { + position: relative; +} + +.searchbox .searchbox-input-wrapper .searchbox-input { + width: 100%; + border: none; + outline: none; + font-size: 16px; + box-shadow: none; + font-weight: 200; + border-radius: 0; + background: var(--secondary); + line-height: 20px; + box-sizing: border-box; + padding: 12px 28px 12px 20px; + border-bottom: 1px solid var(--primary-100); +} + +.searchbox .searchbox-input-wrapper .searchbox-close { + top: 50%; + right: 6px; + width: 20px; + height: 20px; + font-size: 16px; + margin-top: -11px; + position: absolute; + text-align: center; + display: inline-block; +} + +.searchbox .searchbox-input-wrapper .searchbox-close:hover { + color: #3273dc; +} + +.searchbox .searchbox-result-wrapper { + left: 0; + right: 0; + top: 45px; + bottom: 0; + overflow-y: auto; + position: absolute; +} + +.searchbox .searchbox-container { + top: 100px; + width: 540px; + bottom: 100px; + margin-left: -270px; + box-sizing: border-box; +} + +@media screen and (max-width: 559px), screen and (max-height: 479px) { + .searchbox .searchbox-container { + top: 0; + left: 0; + margin: 0; + width: 100%; + height: 100%; + background: var(--primary-50); + } +} + +.ins-section-container { + position: relative; + background: var(--primary-50); +} + +.ins-section { + font-size: 14px; + line-height: 16px; + + .ins-section-header, + .ins-search-item { + padding: 8px 15px; + } + + .ins-section-header { + color: var(--primary-400); + border-bottom: 1px solid var(--primary-100); + } + + .ins-slug { + margin-left: 5px; + color: var(--primary-400); + + &:before { + content: '('; + } + + &:after { + content: ')'; + } + } + + .ins-search-item { + &:hover, + &.active { + color: var(--secondary); + background: #3273dc; + + .ins-slug, + .ins-search-preview { + color: var(--secondary); + } + } + + header, + .ins-search-preview { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .ins-search-preview { + height: 15px; + font-size: 9px; + color: var(--primary-400); + margin: 5px 0 0 20px; + } + } + + & header .ins-title { + margin-left: 8px; + } +} diff --git a/src/components/search.tsx b/src/components/search.tsx index 1288e8e..ed3d14f 100644 --- a/src/components/search.tsx +++ b/src/components/search.tsx @@ -1,3 +1,4 @@ +import './search.scss'; import Fuse, { type FuseResult } from 'fuse.js'; import { AnatoloDynamicResource } from '@/anatolo/dynamic-resource'; import { AnatoloRef } from '@/anatolo/ref';